activity.vue 25 KB

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