activity.vue 24 KB

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