activity.vue 23 KB

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