index.vue 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971
  1. <template>
  2. <view class="active-detail">
  3. <!-- 自定义导航栏 -->
  4. <u-navbar :leftText='title' fixed safeAreaInsetTop :placeholder='true' :bgColor="bgColor" @leftClick='back'>
  5. </u-navbar>
  6. <!-- 背景图 -->
  7. <view class="active-detail-img">
  8. <image style="width: 100%; height: 720rpx;" :src="activeDeatil.banners" mode=""></image>
  9. </view>
  10. <!--投票数 -->
  11. <view class="vote">
  12. <view class="vote-detail">
  13. <!-- 原版
  14. <view class="vote-detail-top">
  15. <text style="width: 80rpx; height: 2rpx; background-color: rgba(204, 204, 204, .7); "></text>
  16. <view class="vote-detail-top-main">
  17. <text>
  18. 距活动结束:
  19. </text>
  20. <view class="time">
  21. <text>还剩</text>
  22. <view class="shijian">{{countdownh}}</view>
  23. <text>时</text>
  24. <view class="shijian">{{countdownm}}</view>
  25. <text>分</text>
  26. <view class="shijian">{{countdowns}}</view>
  27. <text>秒</text>
  28. </view>
  29. </view>
  30. <text style="width: 80rpx; height: 2rpx; background-color: rgba(204, 204, 204, .7); "></text>
  31. </view>
  32. -->
  33. <!-- 改版 -->
  34. <view class="vote-detail-top-main1">
  35. <view>
  36. 距活动结束
  37. <text v-if="countdownh>0">{{countdownd}}</text>
  38. <text>{{countdownh}}</text>
  39. <text>{{countdownm}}</text>
  40. <text>{{countdowns}}</text>
  41. </view>
  42. </view>
  43. <view class="vote-detail-btn">
  44. <view class="vote-detail-btn-item">
  45. <text class="vote-detail-btn-item-num">{{activeDeatil.project_num}}</text>
  46. <text class="vote-detail-btn-item-text">投票项</text>
  47. </view>
  48. <view style="width: 2rpx;height: 52rpx;background-color: #ccc;"></view>
  49. <view class="vote-detail-btn-item">
  50. <text class="vote-detail-btn-item-num">{{activeDeatil.vote_num}}</text>
  51. <text class="vote-detail-btn-item-text">累计投票</text>
  52. </view>
  53. <view style="width: 2rpx;height: 52rpx;background-color: #ccc;"></view>
  54. <view class="vote-detail-btn-item">
  55. <text class="vote-detail-btn-item-num">{{activeDeatil.view_num}}</text>
  56. <text class="vote-detail-btn-item-text">访问量</text>
  57. </view>
  58. </view>
  59. </view>
  60. </view>
  61. <!-- 分段栏 -->
  62. <view style="width: 100%;height: 16rpx;background-color:#F0F0F0 ;"></view>
  63. <!-- 排行榜 -->
  64. <view class="rank">
  65. <view class="tab_nav">
  66. <view class="navTitle" v-for="(item,index) in rankList" :key="index">
  67. <view class="navTitle-item">
  68. <view :class="{'active':isActive === index}" @click="checked(index)">
  69. {{item.title}}
  70. </view>
  71. </view>
  72. </view>
  73. </view>
  74. <view class="rank-search" v-if="isActive==0">
  75. <u-input placeholder="输入IHG酒店名称或编号" border='none' v-model="search" @input='searchText'>
  76. <template slot="suffix" style='margin-right:40rpx;'>
  77. <u-image :showLoading="true" :showError='true' src="/static/icon/search.png" width="40rpx"
  78. height="32rpx"></u-image>
  79. </template>
  80. </u-input>
  81. </view>
  82. <!-- 地区分类 -->
  83. <view class="tab_area" v-if="isActive==0">
  84. <view class="areaTitle" v-for="(item,index) in areaList" :key="index"
  85. @click="checkedArea(index,item.id)">
  86. <view class="areaTitle-item">
  87. <view :class="{'active-area':isActiveArea === index}">
  88. {{item.name}}
  89. </view>
  90. </view>
  91. </view>
  92. </view>
  93. </view>
  94. <!-- 查询结果 -->
  95. <view class="List" v-if="isActive==0">
  96. <view class="ListItem" v-for="(item,index) in voteList" :key="index" @click="goVoteDetail(item.id)">
  97. <image :src="item.cover_img" style="width: 640rpx;height:420rpx;border-radius: 12rpx; "></image>
  98. <view class="kudosicon" :style="{backgroundImage:'url('+hotelImageUrl+')'}">
  99. <text
  100. style="width: 36rpx;height: 52rpx; display: flex;align-items: center;justify-content: center;color: #FFF;font-size: 24rpx;font-weight: bold; ">{{item.sort}}</text>
  101. </view>
  102. <view class="nav">
  103. <view class="events">
  104. <text>{{item.project_name}}</text>
  105. </view>
  106. <view class="voteStatus">
  107. <text v-if="item.ticket_num>=0">{{item.ticket_num + item.virtual_ticket_num }}票</text>
  108. </view>
  109. </view>
  110. <view class="foot" @click.stop="goVoteDetail(item.id)">
  111. <text>{{activeDeatil.vote_name}}</text>
  112. </view>
  113. </view>
  114. </view>
  115. <view class="rank-detail" :style="{backgroundImage:'url('+backImageUrl+')'}" v-if="isActive==1">
  116. <view class="rank-detail-rank" v-if="rankItemList[0].logo">
  117. <image style="width: 92rpx; height: 92rpx; border-radius: 50%; " :src="rankItemList[0].logo" mode="">
  118. </image>
  119. <text class="rank-detail-rank-text">{{rankItemList[0].project_name}}</text>
  120. <view class="rank-detail-rank-data">
  121. <image style="width: 26rpx;height: 24rpx; margin-right: 10rpx; " src="/static/icon/votes01.png"
  122. mode=""></image>
  123. <text>{{rankItemList[0].ticket_num + rankItemList[0].virtual_ticket_num }}</text>
  124. </view>
  125. </view>
  126. <view class="rank-detail-rank rank-detail-rankS" v-if="rankItemList[1].logo">
  127. <image style="width: 92rpx; height: 92rpx; border-radius: 50%; " :src="rankItemList[1].logo" mode="">
  128. </image>
  129. <text class="rank-detail-rank-text">{{rankItemList[1].project_name}}</text>
  130. <view class="rank-detail-rank-data">
  131. <image style="width: 26rpx;height: 24rpx; margin-right: 10rpx; " src="/static/icon/votes01.png"
  132. mode=""></image>
  133. <text>{{rankItemList[1].ticket_num + rankItemList[1].virtual_ticket_num }}</text>
  134. </view>
  135. </view>
  136. <view class="rank-detail-rank rank-detail-rankT" v-if="rankItemList[2].logo">
  137. <image style="width: 92rpx; height: 92rpx; border-radius: 50%; " :src="rankItemList[2].logo" mode="">
  138. </image>
  139. <text class="rank-detail-rank-text">{{rankItemList[2].project_name}}</text>
  140. <view class="rank-detail-rank-data">
  141. <image style="width: 26rpx;height: 24rpx; margin-right: 10rpx; " src="/static/icon/votes01.png"
  142. mode=""></image>
  143. <text>{{rankItemList[2].ticket_num + rankItemList[2].virtual_ticket_num }}</text>
  144. </view>
  145. </view>
  146. </view>
  147. <!-- 具体排名(4-10) -->
  148. <view class="rank-other" v-if="isActive==1">
  149. <view class="rank-other-item" v-for="(item,index) in rankItemList" v-if="index>2" :key="index">
  150. <view class="rank-other-item-left">
  151. <text>{{index+1}}</text>
  152. </view>
  153. <view class="rank-other-item-main">
  154. <image
  155. style="width: 112rpx;height: 112rpx;margin-left: 24rpx; margin-right: 16rpx;border-radius: 50%; "
  156. :src="item.logo" mode=""></image>
  157. <text class="rank-other-item-main-text">{{item.project_name}}</text>
  158. </view>
  159. <view class="rank-other-item-right">
  160. <image style="width: 26rpx;height: 24rpx; margin-right: 8rpx; " src="/static/icon/votes02.png"
  161. mode=""></image>
  162. <text>{{item.ticket_num + item.virtual_ticket_num }}</text>
  163. </view>
  164. </view>
  165. </view>
  166. <view class="introduce" v-if="isActive==2">
  167. <view class="introduce-top">
  168. <text class="introduce-top-rule1"></text>
  169. <text style="margin-right: 8rpx; margin-left: 12rpx; ">活动规则</text>
  170. <text class="introduce-top-rule2"></text>
  171. </view>
  172. <view class="introduce-main">
  173. <view v-html="activeDeatil.rule"></view>
  174. </view>
  175. <!-- 分割线 -->
  176. <view
  177. style="width: 94%; height: 2rpx; background-color:rgba(240, 240, 240, .7);margin: 64rpx auto 80rpx; ">
  178. </view>
  179. <view class=" introduce-top">
  180. <text class="introduce-top-rule1"></text>
  181. <text style="margin-right: 8rpx; margin-left: 12rpx; ">活动介绍</text>
  182. <text class="introduce-top-rule2"></text>
  183. </view>
  184. <view class="introduce-btn-text">
  185. <view v-html="activeDeatil.details"></view>
  186. </view>
  187. <!-- 分割线 -->
  188. <view
  189. style="width: 94%; height: 2rpx; background-color:rgba(240, 240, 240, .7);margin: 64rpx auto 80rpx; ">
  190. </view>
  191. <view class=" introduce-top">
  192. <text class="introduce-top-rule1"></text>
  193. <text style="margin-right: 8rpx; margin-left: 12rpx; ">活动声明</text>
  194. <text class="introduce-top-rule2"></text>
  195. </view>
  196. <!-- 声明 -->
  197. <view class="introduce-btn">
  198. <view v-html="activeDeatil.statement"></view>
  199. </view>
  200. </view>
  201. <!-- 触底 -->
  202. <view class="home-bottom" v-if="isActive==0">
  203. <uni-load-more :status="status" color="#CCCCCC" :content-text="contentText" />
  204. </view>
  205. </view>
  206. </template>
  207. <script>
  208. import util from './../../../utils/util.js'
  209. export default {
  210. data() {
  211. return {
  212. //自定义导航栏
  213. bgColor: '#fff',
  214. title: '',
  215. //排行榜
  216. rankItemList: [],
  217. //活动结束倒计时
  218. endTime: '',
  219. countdownd:"",
  220. countdownh: '',
  221. countdownm: '',
  222. countdowns: '',
  223. timer: null, //重复执行
  224. // 搜索
  225. search: '',
  226. // 活动id
  227. id: '',
  228. // 活动详情
  229. activeDeatil: '',
  230. // 投票列表
  231. voteList: [],
  232. //酒店排名背景图片
  233. hotelImageUrl: require('../../../static/icon/tip01.png'),
  234. //排行榜背景图片
  235. backImageUrl: 'http://t9.9026.com/imgs/rank01.png',
  236. rankList: [{
  237. title: '投票'
  238. },
  239. {
  240. title: '排行榜'
  241. }, {
  242. title: '活动介绍'
  243. }
  244. ],
  245. areaList: [],
  246. //激活指定table菜单
  247. isActive: 0,
  248. isActiveArea: 0,
  249. status: 'noMore',
  250. contentText: {
  251. contentdown: '查看更多',
  252. contentrefresh: '加载中',
  253. contentnomore: '—— 已经到底啦 ——'
  254. },
  255. }
  256. },
  257. onShow() {
  258. this.admin = this.$store.getters.userInfo
  259. console.log(this.admin);
  260. },
  261. onLoad(o) {
  262. this.id = o.id
  263. this.getList(o.id)
  264. this.getActiveDetail(o.id)
  265. this.getCategoryList(o.id)
  266. },
  267. onUnload(){
  268. clearInterval(this.timer)
  269. },
  270. methods: {
  271. //返回上一级
  272. back() {
  273. uni.navigateBack()
  274. },
  275. showtime(time) {
  276. let nowtime = new Date(), //获取当前时间
  277. // endtime = new Date("2021/12/10"); //定义结束时间
  278. endtime = new Date(time); //定义结束时间
  279. // let lefttime = endtime.getTime() - nowtime.getTime(), //距离结束时间的毫秒数
  280. // leftd = Math.floor(lefttime / (1000 * 60 * 60 * 24)), //计算天数
  281. // lefth = Math.floor((lefttime / (1000 * 60 * 60) % 24) + leftd * 24) < 10 ? "0" + Math.floor((lefttime /
  282. // (1000 * 60 * 60) % 24) + leftd * 24) : Math.floor((lefttime / (1000 * 60 * 60) % 24) + leftd *
  283. // 24), //计算小时数
  284. // leftm = Math.floor(lefttime / (1000 * 60) % 60) < 10 ? "0" + Math.floor(lefttime / (1000 * 60) % 60) :
  285. // Math.floor(lefttime / (1000 * 60) % 60), //计算分钟数
  286. // lefts = Math.floor(lefttime / 1000 % 60) < 10 ? "0" + Math.floor(lefttime / 1000 % 60) : Math.floor(
  287. // lefttime / 1000 % 60); //计算秒数
  288. const lefttime = (endtime.getTime() - nowtime.getTime()) / 1000;
  289. const leftd = Math.floor(lefttime / (60 * 60 * 24));
  290. const lefth = Math.floor((lefttime - leftd * 86400) / (60 * 60));
  291. const leftm = Math.floor((lefttime - leftd * 86400 - lefth * 3600) / 60);
  292. const lefts = Math.floor(lefttime - leftd * 86400 - lefth * 3600 - leftm*60);
  293. this.countdownd = leftd
  294. this.countdownh = lefth //返回倒计时的字符串
  295. this.countdownm = leftm //返回倒计时的字符串
  296. this.countdowns = lefts //返回倒计时的字符串
  297. // 倒计时结束时,显示00:00:00
  298. if (lefttime < 0) {
  299. this.countdownh = this.countdownm = this.countdowns = "00"
  300. }
  301. },
  302. // 获取活动项目列表
  303. getList(id) {
  304. this.$api.active.getActiveProjectList({
  305. activity_id: id,
  306. page: 0,
  307. }).then(res => {
  308. console.log(res, "活动项目列表")
  309. if (res.code == 0) {
  310. this.voteList = JSON.parse(JSON.stringify(res.data.data))
  311. this.rankItemList = res.data.data.sort((a, b) => {
  312. return (b.ticket_num + b.virtual_ticket_num) - (a.ticket_num + a
  313. .virtual_ticket_num)
  314. })
  315. console.log(this.rankItemList, '--->rankItemList');
  316. }
  317. })
  318. },
  319. // 获取活动详情
  320. getActiveDetail(id) {
  321. this.$api.active.getActiveDetail({
  322. activity_id: id
  323. }).then(res => {
  324. console.log(res, "活动详情")
  325. if (res.code == 0) {
  326. this.title = res.data.title
  327. this.activeDeatil = res.data
  328. // this.endTime = res.data.end_time
  329. this.endTime = (()=>{
  330. const endT = res.data?.end_time ? res.data.end_time : "";
  331. return endT.replace(/-/g, "/");
  332. })()
  333. this.timer = setInterval(() => {
  334. this.showtime(this.endTime)
  335. }, 100);
  336. }
  337. })
  338. },
  339. // 获取活动投票项分类
  340. getCategoryList(id) {
  341. this.$api.category.getCategoryList({
  342. page: 1,
  343. type: 3,
  344. activity_id: id
  345. }).then(res => {
  346. console.log(res, "活动投票项分类")
  347. if (res.code == 0) {
  348. this.areaList = res.data.data
  349. console.log(this.areaList, '---->this.areaList');
  350. this.areaList.unshift({
  351. name: '全部'
  352. })
  353. }
  354. })
  355. },
  356. //获取地区的投票项
  357. getAreaList(category_id) {
  358. this.$api.active.getActiveProjectList({
  359. activity_id: this.id,
  360. category_id,
  361. page: 0,
  362. }).then(res => {
  363. if (res.code == 0) {
  364. this.voteList = res.data.data
  365. }
  366. })
  367. },
  368. //购票详情
  369. goVoteDetail(id) {
  370. if (this.admin == undefined) {
  371. uni.navigateTo({
  372. url: '/pages/login/login'
  373. })
  374. } else {
  375. uni.navigateTo({
  376. url: '/pages/index/vote-detail/index?id=' + id
  377. })
  378. }
  379. },
  380. // 搜索防抖
  381. searchText: util.debounce(function() {
  382. this.goSearch()
  383. }, 1000),
  384. // 搜索
  385. goSearch() {
  386. this.$api.active.getActiveProjectList({
  387. activity_id: this.id,
  388. page: 0,
  389. keyword: this.search
  390. }).then(res => {
  391. console.log(res, "搜索活动项目列表")
  392. if (res.code == 0) {
  393. this.voteList = res.data.data
  394. //回到地区分类全部
  395. this.isActiveArea = 0
  396. }
  397. })
  398. },
  399. //投票/排行榜/活动介绍切换
  400. checked(index) {
  401. this.isActive = index
  402. },
  403. //地区分类切换
  404. checkedArea(index, id) {
  405. this.isActiveArea = index
  406. if (index == 0) {
  407. this.getList(this.id)
  408. } else {
  409. this.getAreaList(id)
  410. }
  411. },
  412. }
  413. }
  414. </script>
  415. <style lang="scss" scoped>
  416. $pageColor:#F9F9F9;
  417. $bgColor:#FFFFFF;
  418. @mixin flexlayout {
  419. display: flex;
  420. align-items: center;
  421. justify-content: center;
  422. }
  423. .active-detail {
  424. height: 100%;
  425. background: #F9F9F9;
  426. }
  427. .home-bottom {
  428. background-color: #fff;
  429. padding-bottom: 84rpx;
  430. }
  431. .rank-search {
  432. margin-top: 80rpx;
  433. ::v-deep .u-input {
  434. width: 690rpx !important;
  435. height: 68rpx !important;
  436. background: #F1F1F1;
  437. border-radius: 74rpx;
  438. }
  439. ::v-deep .u-input__content__field-wrapper {
  440. padding-left: 36rpx;
  441. }
  442. ::v-deep .u-input__content__field-wrapper__field {
  443. color: #999999 !important;
  444. font-size: 28rpx !important;
  445. }
  446. }
  447. .introduce {
  448. width: 100%;
  449. background-color: #fff;
  450. position: relative;
  451. top: -176rpx;
  452. padding-bottom: 50rpx;
  453. position: relative;
  454. .introduce-top {
  455. height: 32rpx;
  456. display: flex;
  457. align-items: center;
  458. justify-content: center;
  459. font-size: 32rpx;
  460. font-weight: bold;
  461. letter-spacing: 2rpx;
  462. .introduce-top-rule1 {
  463. width: 56rpx;
  464. height: 4rpx;
  465. background: linear-gradient(90deg, #FFFFFF 0%, #D9A94D 100%);
  466. }
  467. .introduce-top-rule2 {
  468. width: 56rpx;
  469. height: 4rpx;
  470. background: linear-gradient(-90deg, #FFFFFF 0%, #D9A94D 100%);
  471. }
  472. }
  473. .introduce-main {
  474. margin-top: 46rpx;
  475. padding: 0 30rpx;
  476. font-size: 28rpx;
  477. font-weight: bold;
  478. color: #333;
  479. .introduce-main-start {
  480. margin-bottom: 24rpx;
  481. }
  482. .introduce-main-rule {
  483. display: flex;
  484. align-items: flex-start;
  485. justify-content: flex-start;
  486. .introduce-main-rule-left {
  487. display: flex;
  488. flex-direction: column;
  489. align-items: flex-start;
  490. justify-content: flex-start;
  491. margin-left: 75rpx;
  492. }
  493. }
  494. }
  495. .introduce-btn-text {
  496. padding: 0 30rpx;
  497. margin-top: 40rpx;
  498. // text-indent: 2em;
  499. font-size: 28rpx;
  500. color: #333;
  501. font-weight: bold;
  502. line-height: 56rpx;
  503. }
  504. .introduce-btn {
  505. margin-top: 40rpx;
  506. padding: 0 30rpx;
  507. padding-bottom: 80rpx;
  508. width: 100%;
  509. display: flex;
  510. font-size: 28rpx;
  511. color: #333;
  512. font-weight: bold;
  513. }
  514. }
  515. //地区切换
  516. .tab_area {
  517. margin-top: 48rpx;
  518. width: 100%;
  519. display: flex;
  520. justify-content: flex-start;
  521. align-items: center;
  522. font-family: PingFang-SC-Heavy, PingFang-SC;
  523. overflow-x: scroll;
  524. }
  525. .area_nav .areaTitle {
  526. width: 140rpx;
  527. height: 52rpx;
  528. background-color: #F1F1F1;
  529. border-radius: 26rpx;
  530. flex: none;
  531. display: flex;
  532. justify-content: center;
  533. align-items: center;
  534. }
  535. .areaTitle-item {
  536. width: 140rpx;
  537. height: 52rpx;
  538. background-color: #F1F1F1;
  539. border-radius: 26rpx;
  540. font-size: 24rpx;
  541. color: #999;
  542. display: flex;
  543. justify-content: center;
  544. align-items: center;
  545. margin-right: 16rpx;
  546. }
  547. .active-area {
  548. width: 100%;
  549. height: 52rpx;
  550. border-radius: 26rpx;
  551. background-color: #FF6200;
  552. color: #fff;
  553. display: flex;
  554. justify-content: center;
  555. align-items: center;
  556. }
  557. .rank {
  558. height: 340rpx;
  559. background-color: #fff;
  560. padding: 40rpx 30rpx 0;
  561. //菜单切换
  562. .tab_nav {
  563. width: 100%;
  564. display: flex;
  565. justify-content: space-around;
  566. align-items: center;
  567. font-family: PingFang-SC-Heavy, PingFang-SC;
  568. }
  569. .tab_nav .navTitle {
  570. width: 30%;
  571. flex: none;
  572. font-size: 32rpx;
  573. color: #666;
  574. position: relative;
  575. display: flex;
  576. justify-content: center;
  577. align-items: center;
  578. }
  579. .navTitle-item {
  580. height: 40rpx;
  581. }
  582. .active {
  583. color: #333333;
  584. font-weight: bold;
  585. font-size: 40rpx;
  586. &::after {
  587. display: inline-block;
  588. content: '';
  589. width: 156rpx;
  590. height: 24rpx;
  591. background: linear-gradient(180deg, rgba(249, 231, 219, 0) 0%, #F3C063 100%);
  592. border-radius: 12rpx;
  593. position: absolute;
  594. bottom: -22rpx;
  595. left: 25rpx;
  596. }
  597. }
  598. }
  599. .vote {
  600. height: 322rpx;
  601. background-color: #fcfcfd;
  602. .vote-detail {
  603. position: relative;
  604. top: -40rpx;
  605. margin: 0 auto;
  606. width: 690rpx;
  607. height: 310rpx;
  608. background: #FFFFFF;
  609. box-shadow: 0px 20rpx 40rpx 0px rgba(220, 222, 229, 0.4);
  610. border-radius: 16rpx;
  611. padding: 40rpx 26rpx 0;
  612. .vote-detail-top {
  613. display: flex;
  614. align-items: center;
  615. justify-content: space-between;
  616. .vote-detail-top-main {
  617. flex: 1;
  618. margin-left: 20rpx;
  619. color: #333;
  620. font-size: 28rpx;
  621. display: flex;
  622. align-items: center;
  623. justify-content: flex-start;
  624. .time {
  625. display: flex;
  626. align-items: center;
  627. justify-content: flex-start;
  628. }
  629. }
  630. }
  631. .vote-detail-btn {
  632. margin-top: 75rpx;
  633. padding: 0 38rpx;
  634. display: flex;
  635. align-items: center;
  636. justify-content: space-between;
  637. .vote-detail-btn-item {
  638. display: flex;
  639. flex-direction: column;
  640. align-items: center;
  641. justify-content: space-between;
  642. font-size: 28rpx;
  643. color: #333;
  644. .vote-detail-btn-item-num {
  645. font-size: 44rpx;
  646. font-weight: bold;
  647. }
  648. .vote-detail-btn-item-text {
  649. margin-top: 20rpx;
  650. }
  651. }
  652. }
  653. }
  654. }
  655. .active-detail-img {
  656. width: 100%;
  657. height: 720rpx;
  658. }
  659. .rank-detail {
  660. width: 100%;
  661. height: 592rpx;
  662. position: relative;
  663. top: -176rpx;
  664. background-repeat: no-repeat;
  665. background-position: center;
  666. background-size: cover;
  667. .rank-detail-rank {
  668. position: relative;
  669. top: 80rpx;
  670. display: flex;
  671. flex-direction: column;
  672. align-items: center;
  673. justify-content: center;
  674. .rank-detail-rank-text {
  675. width: 182rpx;
  676. height: 76rpx;
  677. display: flex;
  678. align-items: center;
  679. justify-content: center;
  680. text-align: center;
  681. font-size: 26rpx;
  682. color: #333;
  683. margin: 16rpx 0 52rpx;
  684. }
  685. .rank-detail-rank-data {
  686. width: 136rpx;
  687. height: 56rpx;
  688. background: #141414;
  689. border-radius: 8rpx;
  690. display: flex;
  691. align-items: center;
  692. justify-content: center;
  693. font-size: 24rpx;
  694. font-weight: bold;
  695. color: #fff;
  696. }
  697. }
  698. .rank-detail-rankS {
  699. position: relative;
  700. top: -155rpx;
  701. left: -230rpx;
  702. }
  703. .rank-detail-rankT {
  704. position: relative;
  705. top: -390rpx;
  706. left: 230rpx;
  707. }
  708. }
  709. .rank-other {
  710. position: relative;
  711. top: -204rpx;
  712. width: 100%;
  713. padding: 48rpx 30rpx 80rpx;
  714. background-color: #fff;
  715. border-radius: 32rpx 32rpx 0px 0px;
  716. .rank-other-item {
  717. margin-bottom: 24rpx;
  718. padding: 0 24rpx;
  719. height: 176rpx;
  720. background: #FFFFFF;
  721. box-shadow: 0px 4rpx 24rpx -10rpx rgba(101, 95, 90, 0.3);
  722. border-radius: 16rpx;
  723. display: flex;
  724. align-items: center;
  725. justify-content: space-between;
  726. .rank-other-item-left {
  727. width: 48rpx;
  728. height: 48rpx;
  729. border: 3rpx solid #E6E6E6;
  730. border-radius: 50%;
  731. font-size: 24rpx;
  732. color: #858494;
  733. display: flex;
  734. align-items: center;
  735. justify-content: center;
  736. }
  737. .rank-other-item-main {
  738. flex: 1;
  739. display: flex;
  740. align-items: center;
  741. justify-content: flex-start;
  742. .rank-other-item-main-text {
  743. width: 282rpx;
  744. height: 80rpx;
  745. font-size: 28rpx;
  746. color: #333;
  747. line-height: 40rpx;
  748. margin-top: 40rpx;
  749. }
  750. }
  751. .rank-other-item-right {
  752. width: 132rpx;
  753. height: 48rpx;
  754. background: rgba(255, 98, 0, 0.22);
  755. border-radius: 24rpx;
  756. display: flex;
  757. align-items: center;
  758. justify-content: center;
  759. font-size: 24rpx;
  760. color: #FF6200;
  761. font-weight: bold;
  762. }
  763. }
  764. }
  765. .List {
  766. padding: 0 30rpx;
  767. padding-top: 20rpx;
  768. padding-bottom: 32rpx;
  769. .ListItem {
  770. position: relative;
  771. margin-bottom: 40rpx;
  772. width: 100%;
  773. height: 665rpx;
  774. background: $bgColor;
  775. box-shadow: 0rpx 12rpx 40rpx 0rpx rgba(220, 222, 229, 0.4);
  776. border-radius: 24rpx;
  777. padding: 20rpx 26rpx 26rpx 24rpx;
  778. .kudosicon {
  779. background-repeat: no-repeat;
  780. background-size: 36rpx 52rpx;
  781. position: absolute;
  782. top: 20rpx;
  783. left: 60rpx;
  784. @include flexlayout() image {
  785. width: 32rpx;
  786. height: 28rpx;
  787. }
  788. }
  789. .nav {
  790. display: flex;
  791. align-items: center;
  792. justify-content: space-between;
  793. .events {
  794. text {
  795. margin-top: 10rpx;
  796. font-size: 30rpx;
  797. font-family: PingFang-SC-Bold, PingFang-SC;
  798. font-weight: bold;
  799. color: #333333;
  800. }
  801. }
  802. .voteStatus {
  803. width: 126rpx;
  804. height: 48rpx;
  805. background: #FFFFFF;
  806. border-radius: 6rpx;
  807. border: 2rpx solid #A18353;
  808. font-size: 30rpx;
  809. color: #A18353;
  810. margin-top: 20rpx;
  811. display: flex;
  812. align-items: center;
  813. justify-content: center;
  814. }
  815. }
  816. .foot {
  817. margin-top: 24rpx;
  818. width: 100%;
  819. height: 84rpx;
  820. background: linear-gradient(338deg, #FF6200 0%, #FF9D4F 100%);
  821. border-radius: 12rpx;
  822. display: flex;
  823. align-items: center;
  824. justify-content: center;
  825. font-weight: bold;
  826. color: #fff;
  827. }
  828. }
  829. }
  830. .vote-detail-top-main1{
  831. display: flex;
  832. align-items: center;
  833. justify-content: space-around;
  834. height:22px;
  835. line-height: 22px;
  836. &::before,&::after{
  837. content: " ";
  838. height: 0.5px;
  839. width: 80rpx;
  840. background-color: rgba(0,0,0,0.2);
  841. }
  842. >view{
  843. width: 250px;
  844. font-size: 30rpx;
  845. display: flex;
  846. align-items: center;
  847. justify-content: center;
  848. text{
  849. width: 22px;
  850. margin-left: 15px;
  851. height:inherit;
  852. line-height: inherit;
  853. display: flex;
  854. justify-content: center;
  855. align-items: center;
  856. border-radius: 3px;
  857. background-color: #000;
  858. color: #fff;
  859. &::before{
  860. content: ":";
  861. width: 0px;
  862. line-height: inherit;
  863. background-color: transparent;
  864. color: rgba(0,0,0,0.7);
  865. transform: translateX(-11px);
  866. }
  867. }
  868. }
  869. }
  870. </style>