activity.vue 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678
  1. <template>
  2. <view class="container activity-content">
  3. <!-- 活动、日程 -->
  4. <view class="top-content" id="idtop">
  5. <view class="tab">
  6. <view class="tab-item" v-for="(item, index) in tabs" :key="item.id">
  7. <view class="scroll-tab-item" :class="{ active: tabsActive == index }" @click="toggleTab(item, index)">
  8. {{ item.name }}
  9. <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/border_act.png" class="border_act" v-if="tabsActive == index" mode=""> </image>
  10. </view>
  11. </view>
  12. </view>
  13. </view>
  14. <!-- 筛选状态 -->
  15. <view class="screen-item" v-if="tabsActive == 0">
  16. <text :class="isShowJurisdiction ? 'active' : ''" @click="permissioActivity">有权限行业</text>
  17. <!-- 各种状态选择 -->
  18. <view class="select-conyent">
  19. <van-dropdown-menu active-color="#333333">
  20. <van-dropdown-item id="industry" :title="chartPermissionName">
  21. <view class="menu-items">
  22. <view class="menu-items-box" v-for="item in listChartPermission" :key="item.ChartPermissionId" @click="overallClick(item)">
  23. <view class="items-box">
  24. <u-icon v-if="item.IsChoose" name="checkbox-mark" :color="isShowJurisdiction ? '#ccc' : '#2C83FF'" size="24"></u-icon>
  25. </view>
  26. <text>{{ item.PermissionName }}</text>
  27. </view>
  28. </view>
  29. <view class="replacement">
  30. <text @click="replacementBtn" class="replacement-box">重置</text>
  31. <text @click="replacementConfirm">确定</text>
  32. </view>
  33. </van-dropdown-item>
  34. </van-dropdown-menu>
  35. </view>
  36. <text v-for="item in activityTimeList" :key="item.Id" :class="item.IsChoose ? 'active' : ''" @click="isActivityDate(item.Id)">{{ item.StatusName }}</text>
  37. </view>
  38. <!-- 活动列表 -->
  39. <view class="collect-activity" v-if="haveData && tabsActive == 0">
  40. <view class="content-list">
  41. <view class="half">
  42. <view class="activity-ltem" v-for="(item, index) in collectTypeList" :key="index" v-if="index % 2 == 0">
  43. <image class="zindex-one" :src="item.ImgUrl"></image>
  44. <image class="zindex-two" :src="item.ImgUrlBg"></image>
  45. <view class="content">
  46. <view class="item-img" @click="goDetails(item.ActivityTypeId,item.ActivityTypeName)">
  47. {{ item.ActivityTypeName }}
  48. </view>
  49. <view class="activity-li" v-for="val in item.List" :key="val.KeyWord" @click="goDetails(val.KeyWord)">
  50. <image class="item-image" lazy-load :src="val.ImgUrlBg"></image>
  51. <text class="text_oneLine"> {{ val.KeyWord }}</text>
  52. </view>
  53. </view>
  54. </view>
  55. </view>
  56. <view class="half">
  57. <view class="activity-ltem" v-for="(item, index) in collectTypeList" :key="index" v-if="index % 2 != 0">
  58. <image class="zindex-one" :src="item.ImgUrl"></image>
  59. <image class="zindex-two" :src="item.ImgUrlBg"></image>
  60. <view class="content">
  61. <view class="item-img" @click="goDetails(item.ActivityTypeId,item.ActivityTypeName)">
  62. {{ item.ActivityTypeName }}
  63. </view>
  64. <view class="activity-li" v-for="val in item.List" :key="val.KeyWord" @click="goDetails(val.KeyWord)">
  65. <image class="item-image" lazy-load :src="val.ImgUrlBg"></image>
  66. <text class="text_oneLine"> {{ val.KeyWord }}</text>
  67. </view>
  68. </view>
  69. </view>
  70. </view>
  71. </view>
  72. <u-loadmore :status="status" icon-type="flower" :load-text="loadText" margin-top="20" v-if="totalPage > 1" />
  73. </view>
  74. <view class="collect-ul" v-else-if="haveData && tabsActive !== 0">
  75. <view class="collect-ltem" v-for="(item, index) in collectList" :key="index">
  76. <view class="title-date" @click="goDetail(item)">
  77. <text :class="item.ActivityType == 1 ? '' : 'xianxia'">{{ item.ActivityType == 1 ? "线上" : "线下" }}</text>
  78. {{ item.ActivityTimeText }}
  79. </view>
  80. <view class="item-li">
  81. <view class="item-img" @click="goDetail(item)">
  82. <image :src="item.ImgUrl">
  83. <text v-if="item.ActiveState == 1" class="img-status begin">未开始</text>
  84. <text v-else-if="item.ActiveState == 2" class="img-status proceed">进行中</text>
  85. <text v-else class="img-status">已结束</text>
  86. <view class="img-type">
  87. <image :src="item.ImgUrlText" mode=""></image>
  88. </view>
  89. </view>
  90. <view class="item">
  91. <view class="item-text" @click="goDetail(item)">
  92. <text class="activity-title"> {{ item.ActivityName }} </text>
  93. <text class="text_twoLine" v-if="item.ActivityTypeName == '专家电话会' || item.ActivityTypeName == '专家线下沙龙'">专家背景:{{ item.Expert }} </text>
  94. <text class="text_twoLine" v-if="item.ActivityTypeName == '公司调研电话会' || item.ActivityTypeName == '公司线下调研'">嘉宾:{{ item.DistinguishedGuest }} </text>
  95. <text class="text_twoLine" v-if="item.ActivityTypeName == '分析师电话会' || item.ActivityTypeName == '分析师线下沙龙'">主讲人:{{ item.Speaker }}</text>
  96. </view>
  97. <block v-if="item.ActiveState == 1">
  98. <view class="bottom-box city" v-if="item.ActiveState == 1 && item.IsLimitPeople == 1 && item.ActivityTypeName == '公司调研电话会'">
  99. <view class="city-img">
  100. <image v-if="item.City" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/location.png" />
  101. {{ item.City }}
  102. </view>
  103. <text class="button" v-if="item.IsSignup !== 1" @click="wanttosignup(item.ActivityId)">我要报名</text>
  104. <text class="button" v-else @click="signupCancel(item.ActivityId, 2, item.ActivityTime)">{{ item.SignupType == 1 ? "取消外呼" : "取消报名" }}</text>
  105. </view>
  106. <view class="bottom-box" v-else-if="item.ActivityType == 1">
  107. <view class="" style="width: 130rpx">
  108. <text v-if="item.ActivityTypeId == 1" @click="askingGo(item)">帮我代问</text>
  109. </view>
  110. <text @click="meetingReminderAdd(item.ActivityId)" v-if="item.IsCancelMeetingReminder == 0">会议提醒</text>
  111. <text @click="meetingReminderCancel(item.ActivityId)" v-else>取消提醒</text>
  112. <text class="button" v-if="item.IsSignup !== 1" @click="signupAdd(item.ActivityId, 1)">预约外呼</text>
  113. <text class="button" @click="signupCancel(item.ActivityId, 1, item.ActivityTime)" v-else>取消外呼</text>
  114. </view>
  115. <view class="bottom-box city" v-else>
  116. <view class="city-img">
  117. <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/location.png" />
  118. {{ item.City }}
  119. </view>
  120. <text class="button" v-if="item.IsSignup !== 1" @click="signupAdd(item.ActivityId, 3)">我要报名</text>
  121. <text class="button" v-else @click="signupCancel(item.ActivityId, 3, item.ActivityTime)">取消报名</text>
  122. </view>
  123. </block>
  124. </view>
  125. </view>
  126. </view>
  127. <u-loadmore :status="status" icon-type="flower" :load-text="loadText" margin-top="20" v-if="totalPage > 1" />
  128. </view>
  129. <view class="nodata" v-if="!haveData">
  130. <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/act_search.png" mode="" class="nodata_ico"></image>
  131. <text>{{ tabsActive == 0 ? "暂时没有符合条件的活动" : "暂无我的日程" }}</text>
  132. </view>
  133. <view class="more" v-if="tabsActive == 0" @click="goSearch">更多进行中和已结束的主题>></view>
  134. <!-- 所有自定义弹框 -->
  135. <modalDialog
  136. :isShow="isShow"
  137. :signupType="signupType"
  138. :goFollow="goFollow"
  139. :signupStatus="signupStatus"
  140. :hasPermission="hasPermission"
  141. :jurisdictionList="jurisdictionList"
  142. :editIsShow="editIsShow"
  143. :isCancelShow="isCancelShow"
  144. :idTypeCancel="idTypeCancel"
  145. @cancelShowBtn="cancelEnsure"
  146. :countryCode="countryCode"
  147. :mobileEdit="mobileEdit"
  148. :goOnNextStep="goOnNextStep"
  149. :isShowhasPermission="isShowhasPermission"
  150. :applyForIsShow="applyForIsShow"
  151. :mailboxBinding="mailboxBinding"
  152. />
  153. </view>
  154. </template>
  155. <script>
  156. import { activity } from "@/config/api.js";
  157. import { Throttle } from "@/config/util.js";
  158. import myActivityMixin from "@/activityPages/components/indexActivity.js";
  159. import modalDialog from "@/components/modalDialog.vue";
  160. let app = getApp();
  161. export default {
  162. mixins: [myActivityMixin],
  163. components: {
  164. modalDialog,
  165. },
  166. data() {
  167. return {
  168. tabs: [
  169. {
  170. name: "全部活动",
  171. id: 1,
  172. },
  173. {
  174. name: "我的日程",
  175. id: 2,
  176. },
  177. ],
  178. collectTypeList:[],
  179. chartPermissionName: "所有行业",
  180. haveData: true,
  181. activityTimeList: [
  182. { Id: 1, IsChoose: false, StatusName: "今日活动" },
  183. { Id: 2, IsChoose: false, StatusName: "明日活动" },
  184. ],
  185. whichDay: "",
  186. listChartPermission: [],
  187. listChartPermissionInit: [],
  188. chartPermissionIds: "",
  189. isShowJurisdiction: false, //
  190. isGetJurisdiction: 0,
  191. isrefresh: true,
  192. activityTypeId:''
  193. };
  194. },
  195. computed: {
  196. messageTitle() {
  197. let arr = this.whichDay ? this.whichDay.split(",") : [];
  198. let whichData = arr.length == 2 ? "今日活动,明日活动" : arr == "1" ? "今日活动" : arr == "2" ? "明日活动" : "";
  199. let title = whichData ? whichData + "," + this.chartPermissionName : this.chartPermissionName !== "所有行业" ? this.chartPermissionName : "";
  200. return title || "近期所有行业活动预告";
  201. },
  202. },
  203. methods: {
  204. async getUserSearchContent() {
  205. const res = await activity.getUserSearchContent({
  206. IsShowJurisdiction: this.isGetJurisdiction,
  207. });
  208. if (res.Ret === 200) {
  209. this.isShowJurisdiction = res.Data.IsShowJurisdiction;
  210. this.listChartPermission = res.Data.ListChartPermission;
  211. this.listChartPermissionInit = res.Data.ListChartPermission2;
  212. this.clickPermission()
  213. if (this.chartPermissionIds) {
  214. this.closeTheWindow();
  215. }
  216. }
  217. },
  218. async getActivityLabelTypeList() {
  219. const res = await activity.getActivityLabelTypeList({
  220. ChartPermissionIds: this.chartPermissionIds,
  221. IsShowJurisdiction: this.isGetJurisdiction,
  222. ActiveState: "1",
  223. WhichDay: this.whichDay,
  224. IsPower: this.isGetJurisdiction,
  225. });
  226. if (res.Ret === 200) {
  227. this.collectTypeList = res.Data.List || [];
  228. this.haveData= this.collectTypeList.length ? true : false;
  229. if (this.refresh) {
  230. uni.stopPullDownRefresh();
  231. this.refresh = false;
  232. }
  233. }
  234. },
  235. async getActivityList(){
  236. const res= await activity.getScheduleList({ PageSize: this.pageSize, CurrentIndex: this.page_no });
  237. if (res.Ret === 200) {
  238. this.contentImg = res.Data.ImgUrl;
  239. this.contentLabel = res.Data.Label;
  240. this.status = this.page_no < res.Data.Paging.Pages ? "loadmore" : "nomore";
  241. if (this.page_no === 1) {
  242. this.collectList = res.Data.List || [];
  243. this.haveData= this.collectList.length ? true : false;
  244. if (this.refresh) {
  245. uni.stopPullDownRefresh();
  246. this.refresh = false;
  247. }
  248. } else {
  249. this.collectList = this.collectList.concat(res.Data.List);
  250. }
  251. }
  252. },
  253. //头部tabs切换
  254. toggleTab(item, index) {
  255. if (!this.$store.state.isAuth && !this.$store.state.isBind) {
  256. //已授权已绑定
  257. if (index != this.tabsActive) {
  258. this.tabsActive = index;
  259. this.page_no = 1;
  260. this.collectTypeList = [];
  261. this.collectList=[]
  262. this.tabsActive==0 ? this.getActivityLabelTypeList() : this.getActivityList()
  263. if(this.tabsActive !==0 ){
  264. this.selectComponent("#industry").toggle(false);
  265. }
  266. }
  267. } else {
  268. //已授权未绑定
  269. uni.navigateTo({
  270. url: "/pageMy/login/login",
  271. });
  272. }
  273. },
  274. // 下拉的选择的关闭事件
  275. closeTheWindow() {
  276. const types = this.chartPermissionIds ? this.chartPermissionIds.split(",").map(Number) : [];
  277. if (types.length > 0) {
  278. const str = [];
  279. this.listChartPermission.forEach((item) => {
  280. if (types.includes(item.ChartPermissionId)) {
  281. item.IsChoose = true;
  282. str.push(item.PermissionName);
  283. } else {
  284. item.IsChoose = false;
  285. }
  286. });
  287. this.chartPermissionName = str.length==6?"所有行业" : str.join(",")
  288. }
  289. },
  290. // 下拉的选择的选中事件
  291. overallClick(item) {
  292. if (this.isShowJurisdiction) return;
  293. this.listChartPermission.forEach((key) => {
  294. if (key.ChartPermissionId == item.ChartPermissionId) {
  295. key.IsChoose = !key.IsChoose;
  296. }
  297. });
  298. },
  299. // 下拉的选择的重置事件
  300. replacementBtn() {
  301. this.listChartPermission = this.listChartPermissionInit;
  302. this.chartPermissionIds = "";
  303. this.isShowJurisdiction = false;
  304. this.listChartPermission.map((item) => (item.IsChoose = false));
  305. this.chartPermissionName = "所有行业";
  306. this.getActivityLabelTypeList()
  307. },
  308. //下拉选择的确定事件
  309. replacementConfirm() {
  310. const arr = [];
  311. const str = [];
  312. this.listChartPermission.forEach((key) => {
  313. if (key.IsChoose) {
  314. arr.push(key.ChartPermissionId);
  315. str.push(key.PermissionName);
  316. }
  317. });
  318. if ((str.length == 6 && this.listChartPermission.length == 6) || str.length <= 0) {
  319. this.chartPermissionName = "所有行业";
  320. } else {
  321. this.chartPermissionName = str.join(",");
  322. }
  323. this.chartPermissionIds = arr.join(",");
  324. this.getActivityLabelTypeList();
  325. this.selectComponent("#industry").toggle(false);
  326. },
  327. //今日明日的点击事件
  328. isActivityDate(id) {
  329. this.selectComponent("#industry").toggle(false);
  330. this.activityTimeList.forEach((item) => {
  331. if (item.Id == id) item.IsChoose = !item.IsChoose;
  332. });
  333. const arr = [];
  334. this.activityTimeList.forEach((item) => item.IsChoose && arr.push(item.Id));
  335. this.whichDay = arr.join(",");
  336. this.getActivityLabelTypeList()
  337. },
  338. //是否有权限的点击事件
  339. async permissioActivity() {
  340. if (!this.$store.state.isAuth && !this.$store.state.isBind) {
  341. this.selectComponent("#industry").toggle(false);
  342. this.isShowJurisdiction = !this.isShowJurisdiction;
  343. this.isGetJurisdiction = this.isShowJurisdiction ? 1 : 2;
  344. await this.getUserSearchContent();
  345. this.selectComponent("#industry").toggle(false);
  346. if(this.isShowJurisdiction){
  347. this.getActivityLabelTypeList()
  348. }else{
  349. this.replacementBtn()
  350. }
  351. }else {
  352. //已授权未绑定
  353. uni.navigateTo({
  354. url: "/pageMy/login/login",
  355. });
  356. }
  357. },
  358. //点击后有权限的
  359. clickPermission(){
  360. if(this.isShowJurisdiction){
  361. const arr = [];
  362. this.listChartPermission.forEach((key) => {
  363. if (key.IsChoose) {
  364. arr.push(key.ChartPermissionId);
  365. }
  366. });
  367. this.chartPermissionIds = arr.join(",");
  368. }
  369. },
  370. loadShare(option) {
  371. if (option && Object.keys(option).length !== 0) {
  372. this.whichDay = option.whichDay || "";
  373. this.chartPermissionIds = option.chartPermissionIds || "";
  374. this.isGetJurisdiction = option.isGetJurisdiction;
  375. this.$nextTick(() => {
  376. let day = this.whichDay ? this.whichDay.split(",").map(Number) : [];
  377. this.activityTimeList.forEach((item) => {
  378. if (day.includes(item.Id)) {
  379. item.IsChoose = true;
  380. }
  381. });
  382. });
  383. }
  384. },
  385. goDetails(key,type='') {
  386. this.$store.dispatch("checkHandle", "/activityPages/themeActivity/themeActivity?title=" + key + "&type=" + type + "&permissionIds=" + this.chartPermissionIds + "&whichDay="+ this.whichDay)
  387. },
  388. //去往搜索事件
  389. goSearch() {
  390. this.$store.dispatch("checkHandle", "/activityPages/activitySearch/activitySearch")
  391. },
  392. },
  393. //load
  394. onLoad(option) {
  395. this.loadShare(option);
  396. this.getUserSearchContent();
  397. this.getActivityLabelTypeList();
  398. },
  399. async onShow() {
  400. await this.$store.dispatch("checkHandle", "noGO");
  401. },
  402. /** 用户点击分享 */
  403. onShareAppMessage: function (res) {
  404. return {
  405. title: this.messageTitle,
  406. path: "/pages/activity/activity?whichDay=" + this.whichDay + "&chartPermissionIds=" + this.chartPermissionIds + "&isGetJurisdiction=" + this.isGetJurisdiction,
  407. };
  408. },
  409. /* 触底 */
  410. onReachBottom: Throttle(function () {
  411. if (this.status === "nomore") return;
  412. this.status = "loading";
  413. this.page_no++;
  414. this.getActivityList();
  415. }),
  416. /* 下拉刷新 */
  417. onPullDownRefresh: Throttle(function () {
  418. this.page_no = 1;
  419. this.refresh = true;
  420. this.tabsActive == 0 ? this.getActivityLabelTypeList() : this.getActivityList();
  421. }),
  422. // 页面滚动事件
  423. onPageScroll() {},
  424. };
  425. </script>
  426. <style scoped lang="scss">
  427. // image{will-change: transform}
  428. .activity-content {
  429. background-color: #f7f7f7;
  430. padding-bottom: 90rpx;
  431. position: relative;
  432. .top-content {
  433. position: sticky;
  434. top: 0;
  435. left: 0;
  436. z-index: 99;
  437. padding-bottom: 2rpx;
  438. background-color: #fff;
  439. .tab {
  440. display: flex;
  441. font-size: 32rpx;
  442. color: #707070;
  443. .tab-item {
  444. flex: 1;
  445. text-align: center;
  446. .scroll-tab-item {
  447. height: 78rpx;
  448. line-height: 48rpx;
  449. position: relative;
  450. .border_act {
  451. position: absolute;
  452. height: 6rpx;
  453. width: 340rpx;
  454. left: 0;
  455. bottom: 0rpx;
  456. }
  457. }
  458. .active {
  459. color: #3385ff;
  460. font-weight: bold;
  461. font-size: 34rpx;
  462. }
  463. }
  464. }
  465. .index-fixed {
  466. margin-top: 40rpx;
  467. width: 100%;
  468. display: flex;
  469. align-items: center;
  470. height: 70rpx;
  471. background: #f6f6f6;
  472. border: 1rpx solid #e5e5e5;
  473. opacity: 1;
  474. border-radius: 35rpx;
  475. padding-left: 34rpx;
  476. color: #8d8d8d;
  477. font-size: 28rpx;
  478. .search_ico {
  479. padding-right: 16rpx;
  480. }
  481. }
  482. }
  483. .screen-item {
  484. position: sticky;
  485. top: 78rpx;
  486. left: 0;
  487. z-index: 99;
  488. background-color: #fff;
  489. height: 111rpx;
  490. padding: 0 34rpx;
  491. font-size: 24rpx;
  492. color: #333;
  493. display: flex;
  494. justify-content: space-between;
  495. align-items: center;
  496. text {
  497. width: 150rpx;
  498. text-align: center;
  499. line-height: 51rpx;
  500. background-color: #f8f8fa;
  501. box-sizing: border-box;
  502. border-radius: 26rpx;
  503. }
  504. .active {
  505. background-color: #3385ff;
  506. color: #fff;
  507. }
  508. }
  509. .select-conyent {
  510. .decide {
  511. background-color: #f8f8fa;
  512. display: flex;
  513. align-items: center;
  514. margin: 0 auto;
  515. height: 110rpx;
  516. width: 100%;
  517. padding-left: 30rpx;
  518. }
  519. .items-box {
  520. width: 40rpx;
  521. }
  522. .menu-items {
  523. background-color: #f8f8fa;
  524. width: 100%;
  525. display: flex;
  526. flex-wrap: wrap;
  527. padding: 30rpx 30rpx 0;
  528. .menu-items-box {
  529. display: flex;
  530. width: 50%;
  531. font-size: 28rpx;
  532. font-weight: 400;
  533. margin-bottom: 40rpx;
  534. }
  535. text {
  536. text-align: left;
  537. }
  538. }
  539. .replacement {
  540. margin: 0rpx 30rpx 20rpx;
  541. display: flex;
  542. background-color: #2c83ff;
  543. height: 60rpx;
  544. font-size: 28rpx;
  545. font-weight: 400;
  546. color: #ffffff;
  547. border-radius: 30rpx;
  548. box-sizing: border-box;
  549. text {
  550. flex: 1;
  551. line-height: 58rpx;
  552. background-color: #2c83ff;
  553. }
  554. .replacement-box {
  555. border: 1rpx solid #2c83ff;
  556. color: #2c83ff;
  557. background: #ffffff;
  558. border-radius: 28rpx 0rpx 28rpx 28rpx;
  559. }
  560. }
  561. }
  562. .nodata_ico {
  563. width: 374rpx;
  564. height: 288rpx;
  565. }
  566. .content-list {
  567. display: flex;
  568. padding: 34rpx;
  569. }
  570. .half {
  571. width: 50%;
  572. }
  573. .activity-ltem {
  574. width: 331rpx;
  575. position: relative;
  576. margin-bottom: 30rpx;
  577. .zindex-one {
  578. position: absolute;
  579. top: 0;
  580. left: 0;
  581. height: 250rpx;
  582. width: 100%;
  583. z-index: 1;
  584. }
  585. .zindex-two {
  586. position: absolute;
  587. top: 0;
  588. left: 0;
  589. width: 100%;
  590. height: 100%;
  591. z-index: 2;
  592. }
  593. .content {
  594. position: sticky;
  595. top: 0;
  596. left: 0;
  597. width: 100%;
  598. padding-bottom: 30rpx;
  599. z-index: 3;
  600. }
  601. .item-img {
  602. width: 100%;
  603. height: 147rpx;
  604. margin-bottom: 30rpx;
  605. font-size: 34rpx;
  606. color: #fff;
  607. padding: 30rpx 0 0 20rpx;
  608. }
  609. .activity-li {
  610. width: 100%;
  611. height: 86rpx;
  612. position: relative;
  613. .item-image{
  614. width: 100%;
  615. height: 100%;
  616. }
  617. .text_oneLine {
  618. position:absolute;
  619. width: 100%;
  620. height: 50rpx;
  621. padding: 0 30rpx;
  622. text-align: center;
  623. font-size:28rpx;
  624. top: 15rpx;
  625. color: #fff;
  626. }
  627. // &::before {
  628. // content: "";
  629. // width: 0;
  630. // height: 0;
  631. // border-top: 8rpx solid transparent;
  632. // border-left: 17rpx solid #fff;
  633. // border-bottom: 8rpx solid transparent;
  634. // margin-right: 10rpx;
  635. // }
  636. }
  637. }
  638. .more {
  639. width: 100%;
  640. text-align: center;
  641. font-size: 34rpx;
  642. color: #3385ff;
  643. margin-top: 90rpx;
  644. }
  645. }
  646. /deep/.van-dropdown-menu {
  647. background-color: #fff;
  648. box-shadow: none !important;
  649. align-items: center !important;
  650. }
  651. /deep/.van-dropdown-menu__item {
  652. box-sizing: border-box;
  653. width: 166rpx;
  654. padding-right: 20rpx;
  655. height: 51rpx;
  656. border-radius: 26rpx;
  657. background: #f8f8fa;
  658. }
  659. /deep/.van-dropdown-item {
  660. margin-top: -10rpx;
  661. }
  662. /deep/[data-index="2"] {
  663. margin-right: 0rpx;
  664. }
  665. /deep/ .van-ellipsis {
  666. font-size: 24rpx;
  667. }
  668. @import "@/activityPages/components/indexActivity.scss";
  669. </style>