index.vue 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895
  1. <template>
  2. <view style="background-image: linear-gradient(#ff8e0c,#ffc555 80%,#ff8e0c); width: 100%; height: 100%;">
  3. <!-- #ifdef MP-ALIPAY -->
  4. <u-navbar title="免费抽奖" :border="true" :placeholder="true" :autoBack="true" bgColor="#fff" leftIconSize="0" />
  5. <!-- #endif -->
  6. <!-- #ifndef MP-ALIPAY -->
  7. <view v-if="pagesNum > 1">
  8. <u-navbar title="免费抽奖" :border="true" :placeholder="true" :autoBack="true" bgColor="#fff" />
  9. </view>
  10. <view v-else>
  11. <u-navbar leftIconSize="0" :placeholder="true" bgColor="#fff" title="免费抽奖">
  12. <view class="nav-left flex" slot="left" @click="toActivity">
  13. <u-icon name="arrow-left" size="20" color="#333"></u-icon>
  14. </view>
  15. </u-navbar>
  16. </view>
  17. <!-- #endif -->
  18. <view class="wrap">
  19. <!-- 参与人 -->
  20. <view class="wrap-fakeNum">
  21. <view class="fakeNum">{{info.fakeNum}}人已参与</view>
  22. </view>
  23. <!-- 距离开奖时间 -->
  24. <view v-if="info.status && JSON.parse(info.status).value == 3" class="wrap-date">
  25. <view class="wrap-date-on">
  26. <view class="wrap-date-on-line" style="right: 30rpx;"></view>距离开奖
  27. <view class="wrap-date-on-line" style="left: 30rpx;"></view>
  28. </view>
  29. <u-count-down :time="activityTime" format="DD:HH:mm:ss" autoStart millisecond @change="onChange">
  30. <view class="wrap-date-date">
  31. <text>{{timeData.days}}天</text>
  32. <text>{{ timeData.hours>=10?timeData.hours:'0'+timeData.hours }}:</text>
  33. <text>{{ timeData.minutes>=10?timeData.minutes:'0'+timeData.minutes }}:</text>
  34. <text>{{ timeData.seconds>=10?timeData.seconds:'0'+timeData.seconds }}</text>
  35. </view>
  36. </u-count-down>
  37. </view>
  38. <!-- 距离开始时间 -->
  39. <view v-if="info.status && JSON.parse(info.status).value == 2" class="wrap-date">
  40. <view class="wrap-date-on">
  41. <view class="wrap-date-on-line" style="right: 30rpx;"></view>距离开始
  42. <view class="wrap-date-on-line" style="left: 30rpx;"></view>
  43. </view>
  44. <u-count-down :time="activityTimeTwo" format="DD:HH:mm:ss" autoStart millisecond @change="onChange">
  45. <view class="wrap-date-date">
  46. <text>{{timeData.days}}天</text>
  47. <text>{{ timeData.hours>=10?timeData.hours:'0'+timeData.hours }}:</text>
  48. <text>{{ timeData.minutes>=10?timeData.minutes:'0'+timeData.minutes }}:</text>
  49. <text>{{ timeData.seconds>=10?timeData.seconds:'0'+timeData.seconds }}</text>
  50. </view>
  51. </u-count-down>
  52. </view>
  53. <!-- 一等奖 -->
  54. <view v-for="(item,index) in awardsList" :key="index">
  55. <view class="wrap-fixed" v-for="(itemTwo,index) in item.prizeList" :key="index"
  56. v-if="item.name == '一等奖'">
  57. <view class="wrap-fixed-effectstwo">
  58. <view class="effectsthree">
  59. <navigator
  60. :url="JSON.parse(itemTwo.prizeType).value == 'goods' ? `/packagePrize/goods/detail?id=${ itemTwo.refId }`:JSON.parse(itemTwo.prizeType).value == 'coin' ?`/packagePrize/goods/detail?id=424`:`/packagePrize/goods/detail?id=425`"
  61. hover-class="none">
  62. <view class="effectsthree-width">
  63. <image src="../static/activity/effectsthree.png"></image>
  64. <view class="effectsthree-width-name">
  65. {{item.name}}
  66. </view>
  67. </view>
  68. <view class="effectsthree-position">{{item.quantity}}个名额 </view>
  69. <view class="effectsthree-positionTwo">
  70. <view>
  71. <image :src="itemTwo.picUrl" mode="aspectFit"></image>
  72. </view>
  73. <view class="textone ells-one"
  74. v-if="itemTwo.prizeType && JSON.parse(itemTwo.prizeType).value == 'coin'">
  75. {{itemTwo.title}}x{{itemTwo.value}}
  76. </view>
  77. <view class="textone ells-one" v-else> {{itemTwo.title}} </view>
  78. <view class="texttwo ells-one"
  79. v-if="itemTwo.prizeType && JSON.parse(itemTwo.prizeType).value != 'coin'">
  80. ¥{{$numberFormat(itemTwo.value)}} </view>
  81. </view>
  82. </navigator>
  83. </view>
  84. <view class="effectstwo"></view>
  85. </view>
  86. </view>
  87. </view>
  88. <!-- 非一等奖 -->
  89. <view v-for="(item,index) in awardsList" :key="index">
  90. <view v-if="item.name != '一等奖'">
  91. <view class="wrap-award">
  92. <view class="effectsthree">
  93. <view class="effectsthree-width">
  94. <image src="../static/activity/effectsthree.png" mode="scaleToFill"></image>
  95. <view class="effectsthree-width-name">
  96. {{item.name}}
  97. </view>
  98. </view>
  99. <view class="effectsthree-position">{{item.quantity}}个名额 </view>
  100. <view style="padding-top: 120rpx;"></view>
  101. <view class="effectsthree-positionTwo" v-for="(itemTwo,index) in item.prizeList"
  102. :key="index">
  103. <navigator
  104. :url="JSON.parse(itemTwo.prizeType).value == 'goods' ? `/packagePrize/goods/detail?id=${ itemTwo.refId }`:JSON.parse(itemTwo.prizeType).value == 'coin' ?`/packagePrize/goods/detail?id=424`:`/packagePrize/goods/detail?id=425`"
  105. hover-class="none">
  106. <view class="flex">
  107. <view>
  108. <image :src="itemTwo.picUrl" mode="aspectFit" class="imatwo"></image>
  109. </view>
  110. <view>
  111. <view class="textone ells-one"
  112. v-if="itemTwo.prizeType && JSON.parse(itemTwo.prizeType).value == 'coin'">
  113. {{itemTwo.title}}x{{itemTwo.value}}
  114. </view>
  115. <view class="textone ells-one" v-else> {{itemTwo.title}}</view>
  116. <view class="texttwo ells-one"
  117. v-if="itemTwo.prizeType && JSON.parse(itemTwo.prizeType).value != 'coin'">
  118. ¥{{$numberFormat(itemTwo.value)}} </view>
  119. </view>
  120. </view>
  121. </navigator>
  122. </view>
  123. </view>
  124. <view v-if="item.prizeList.length > 1 " class="wrap-award-explain">以上奖品随机获得一件</view>
  125. </view>
  126. </view>
  127. </view>
  128. <!-- 我的抽奖码 -->
  129. <!-- 抽奖码 -->
  130. <view class="wrap-description">
  131. <view class="wrap-description-code"> 我的抽奖码</view>
  132. <view v-if="info.codeList.length > 0" class="wrap-description-codetwo">
  133. <view class="codeList" v-for="(item,index) in info.codeList">
  134. <view class="codeList-bottom">{{item}}</view>
  135. </view>
  136. </view>
  137. <view v-else class="wrap-description-codethree">
  138. <view class="codethree">
  139. <image src="../static/activity/off.png" mode="scaleToFill" class="codeimg"></image>
  140. </view>
  141. <text class="codesix">还没有抽奖码</text>
  142. </view>
  143. <view class="wrap-description-codesix" v-if="info.codeList && info.codeList.length > 0">再获取1个抽奖码可超过当前
  144. <view class="view">{{ (info.codeList.length + 4)*5 > 80 ? 80 : (info.codeList.length + 4)*5}}%
  145. </view>的人
  146. </view>
  147. <view class="wrap-description-codesixtwo">每邀请一位好友助力成功,即可获得1个抽奖码</view>
  148. <view class="wrap-description-codesixtwo">抽奖码越多中奖概率越大</view>
  149. </view>
  150. <!-- 关注公众号 -->
  151. <!-- #ifdef MP-WEIXIN -->
  152. <view class="wrap-account" @click="toWeixin">
  153. <view class="wrap-account-view">
  154. <image src="../static/activity/logo.png" mode=""></image>
  155. <text>关注盲票公众号,获取中奖提醒</text>
  156. <view>去关注</view>
  157. </view>
  158. </view>
  159. <!-- #endif -->
  160. <!-- 图文介绍 -->
  161. <view v-if="description" class="wrap-descriptiontwo">
  162. <view style="padding: 36rpx 24rpx 36rpx;">图文介绍</view>
  163. <u-parse :content="description" :selectable="true"></u-parse>
  164. </view>
  165. </view>
  166. <!-- #ifdef MP-WEIXIN -->
  167. <view class="footer-fixed">
  168. <view class="flex btn">
  169. <button v-if="info.codeType == 2 && info.codeList.length < 1" type="default" @click="exChange"
  170. open-type="share">分享给好友,参与抽奖</button>
  171. <button v-if="info.codeType == 1 && info.codeList.length < 1" type="default"
  172. @click="exChangeCode">立即参与抽奖</button>
  173. <button
  174. v-if="info.codeType == 1 && info.codeList.length >= 1 || info.codeType == 2 && info.codeList.length >= 1"
  175. type="default" @click="exChange" open-type="share">分享给好友,提升中奖概率</button>
  176. <!--<u-count-down v-else :time="activityTimeTwo" format="DD:HH:mm:ss" autoStart millisecond
  177. @change="onChange">
  178. <button class="buttoncol" type="default">
  179. 开始倒计时:{{timeData.days}}&nbsp;天{{ timeData.hours>=10?timeData.hours:'0'+timeData.hours}}&nbsp;:{{timeData.minutes>=10?timeData.minutes:'0'+timeData.minutes}}&nbsp;:{{timeData.seconds>=10?timeData.seconds:'0'+timeData.seconds}}
  180. </button>
  181. </u-count-down> -->
  182. </view>
  183. </view>
  184. <!-- #endif -->
  185. <!-- #ifdef H5 || MP-ALIPAY -->
  186. <view class="footer-fixed">
  187. <view class="flex btn">
  188. <button type="default" v-if="info.codeType == 1 && info.codeList.length < 1"
  189. @click="exChangeCode">立即参与抽奖</button>
  190. <button type="default" class="buttoncol" v-else>请在微信“盲票”小程序分享助力</button>
  191. </view>
  192. </view>
  193. <!-- #endif -->
  194. <!-- <u-popup :show="popupShow" mode="bottom" @close="close" closeable>
  195. <view class="popupcode">获取抽奖码</view>
  196. <view class="popupcodetwo">
  197. <view class="popupcodetwo-view">邀请好友助力,获取抽奖码</view>
  198. <text class="popupcodetwo-text">每邀请一位好友助力成功,即可获得1个抽奖码,没有上限</text>
  199. </view>
  200. <view class="popupcodethree" style="">
  201. <button type="default" class="popupcodethree-default" open-type="share">立即邀请好友助力</button>
  202. </view>
  203. </u-popup> -->
  204. <!-- <u-popup v-if="info.status && JSON.parse(info.status).value == 4" mode="bottom" @close="close" closeable> -->
  205. <!-- 助力邀请弹框组件 -->
  206. <activity-help :activity-show="activityShow" :inviteCode="inviteCodeTa" :marketingId="marketingId"
  207. @close="close" @exChange='exChange' @success="toActivity"
  208. v-if="activityShow && info.status && JSON.parse(info.status).value == 3" />
  209. <!-- 活动结束弹框 -->
  210. <u-popup v-if="info.status && JSON.parse(info.status).value == 4 || info.isOn == -1" show="true" mode="center"
  211. @close="close" round="11">
  212. <view style="text-align: center;width: 600rpx; height: 500rpx;">
  213. <view style="color: #666;margin-top: 110rpx;font-size: 40rpx;">来晚了,活动已结束</view>
  214. <view style="color: #666;margin-top: 50rpx;font-size: 36rpx;">点击前往查看新的免费抽奖活动</view>
  215. <button @click="toActivity" type="default"
  216. style="background-color: #FF8000;color: #fff; width: 300rpx;margin-top: 70rpx;">确定</button>
  217. </view>
  218. </u-popup>
  219. </view>
  220. </template>
  221. <script>
  222. import env from '../../config/env.js'
  223. import $http from '@/utils/request.js'
  224. import log from '@/common/log.js'
  225. import appId from '@/config/appId.js'
  226. import ActivityHelp from '@/components/activity-help/activity-help.vue'
  227. import {
  228. formatRichText
  229. } from '@/utils/util.js'
  230. export default {
  231. components: {
  232. ActivityHelp
  233. },
  234. data() {
  235. return {
  236. popupShow: false,
  237. id: '',
  238. description: '', //富文本
  239. info: {}, //列表
  240. timeData: {}, //时间
  241. awardsList: [], //奖品
  242. inviteCode: '', //邀请码
  243. activityTime: 0,
  244. activityTimeTwo: 0,
  245. pagesNum: "",
  246. activityShow: false, //助力邀请弹框
  247. inviteCodeTa: '', //邀请码
  248. marketingId: '', //活动id
  249. userInfo: '', //uid
  250. }
  251. },
  252. onLoad(opthios) {
  253. if (opthios.id) {
  254. this.id = opthios.id
  255. }
  256. if (opthios.userId) {
  257. console.log(opthios);
  258. console.log('opthios', opthios.userId);
  259. uni.setStorageSync('shareUid', opthios.userId != 'undefined' ? opthios.userId : null)
  260. if (opthios.userId === undefined || opthios.userId === 'undefined') {
  261. uni.getSystemInfo({
  262. success(res) {
  263. log.error(
  264. `基础库:${ res.SDKVersion },设备:${ res.model }-${ res.system },页面:/packageOperate/activity/index.vue.`
  265. )
  266. }
  267. })
  268. }
  269. }
  270. if (opthios.type) {
  271. uni.setStorageSync('shareType', opthios.type)
  272. }
  273. /**
  274. * 免费活动邀请助力分享跳转接收参数
  275. * inviteCodeTa: 邀请码
  276. * marketingId: 活动id
  277. * */
  278. if (opthios.inviteCode && opthios.marketingId) {
  279. this.inviteCodeTa = opthios.inviteCode
  280. this.marketingId = opthios.marketingId
  281. this.id = opthios.marketingId
  282. this.activityShow = true
  283. }
  284. this.getDetail()
  285. },
  286. onShow() {
  287. this.pagesNum = getCurrentPages().length
  288. this.getBaseInfo()
  289. },
  290. methods: {
  291. toActivity() {
  292. uni.reLaunch({
  293. url: `/pages/activity/index`
  294. })
  295. },
  296. getDetail() {
  297. uni.showLoading({
  298. title: '加载中'
  299. });
  300. $http.post(`/api/v1/mp/user/marketing/detail/${this.id}`, {}).then(res => {
  301. uni.hideLoading();
  302. if (res.code == 0) {
  303. this.info = res.data
  304. let awardsList = res.data.awardsList
  305. awardsList.forEach(item => {
  306. item.prizeList.forEach(itemTwo => {
  307. itemTwo.picUrl = (env.filePublic + itemTwo.picUrl.split(',')[0] +
  308. '?imageView2/2/w/750')
  309. })
  310. })
  311. this.awardsList = awardsList
  312. // 处理富文本
  313. // #ifndef MP-ALIPAY
  314. const description = res.data.description.replaceAll(".jpg\"", ".jpg?imageView2/2/w/750\"")
  315. .replaceAll(".jpeg\"", ".jpeg?imageView2/2/w/750\"").replaceAll(".png\"",
  316. ".png?imageView2/2/w/750\"");
  317. this.description = formatRichText(description);
  318. // #endif
  319. // #ifdef MP-ALIPAY
  320. res.data.description.split(".jpg\"").join(".jpg?imageView2/2/w/750\"")
  321. res.data.description.split(".jpeg\"").join(".jpeg?imageView2/2/w/750\"")
  322. res.data.description.split(".png\"").join(".png?imageView2/2/w/750\"")
  323. this.description = formatRichText(res.data.description);
  324. // #endif
  325. let timestamp = parseInt(new Date().getTime())
  326. this.activityTime = this.info.endTime - timestamp
  327. this.activityTimeTwo = this.info.startTime - timestamp
  328. }
  329. }).catch(() => {
  330. uni.hideLoading();
  331. })
  332. $http.post('/api/v1/mp/user/marketing/inviteCode', {}).then(res => {
  333. if (res.code == 0) {
  334. this.inviteCode = res.data
  335. }
  336. })
  337. },
  338. onChange(e) {
  339. this.timeData = e
  340. },
  341. exChange() {
  342. //弹出层打开
  343. // this.popupShow = true
  344. if (appId == 1) {
  345. //微信盲票小程序
  346. uni.requestSubscribeMessage({
  347. tmplIds: ['9nEWOqAiu9VujgFyQT0jeGI2xTNHm9cbJB8d7cY_dVg',
  348. 'aRcsZ69DlAdXKml7ciXMFIX2BJFyXpiytI2sQyk4Dmw',
  349. ],
  350. success(res) {}
  351. })
  352. }else if (appId == 2) {
  353. //微信码上快购小程序
  354. uni.requestSubscribeMessage({
  355. tmplIds: ['b2mMyGHeNQ03D3CZl3iUkDxY0F94ytRAUWgoCKq2Nik',
  356. 'bEdEYrjbE6r0647j8o9bgWqSrIqcRJLmaiqqxYkg1-Y',
  357. ],
  358. success(res) {}
  359. })
  360. }
  361. },
  362. //立即参与抽奖
  363. exChangeCode() {
  364. $http.post(`/api/v1/mp/user/marketing/generateCode/${this.id}`, { appSource: appId }).then(res => {
  365. if (res.code == 0) {
  366. this.getDetail()
  367. setTimeout(() => {
  368. uni.$u.toast('参与成功,您已获得1个抽奖码');
  369. }, 500)
  370. }
  371. })
  372. this.exChange()
  373. },
  374. close() {
  375. //弹出层收起
  376. // this.popupShow = false
  377. // 关闭支付弹框
  378. this.activityShow = false
  379. this.getDetail()
  380. },
  381. //公众号
  382. toWeixin() {
  383. uni.navigateTo({
  384. url: `/packageOperate/activity/wxofficial`
  385. })
  386. },
  387. getBaseInfo() {
  388. $http.post('/api/v1/mp/user/getLoginUserinfo', {
  389. appSource: appId
  390. }).then(res => {
  391. uni.hideLoading();
  392. if (res.code == 0) {
  393. this.userInfo = res.data
  394. }
  395. })
  396. },
  397. },
  398. onShareAppMessage(res) {
  399. console.log(this.userInfo.userId);
  400. return {
  401. title: '超值宝贝免费抽,参与活动仅需3秒',
  402. path: `/packageOperate/activity/index?marketingId=${ this.info.id }&inviteCode=${ this.inviteCode }&userId=${ this.userInfo.userId?this.userInfo.userId:null }&type=1`,
  403. imageUrl: 'https://mp-public-1310078123.cos.ap-shanghai.myqcloud.com/v2/free_draw_bkg.jpeg',
  404. }
  405. },
  406. //分享朋友圈
  407. onShareTimeline() {
  408. console.log(this.userInfo.userId);
  409. return {
  410. title: '超值宝贝免费抽,参与活动仅需3秒',
  411. imageUrl: 'https://mp-public-1310078123.cos.ap-shanghai.myqcloud.com/v2/free_draw_bkg.jpeg',
  412. query: `marketingId=${ this.info.id }&inviteCode=${ this.inviteCode }&userId=${ this.userInfo.userId?this.userInfo.userId:null }&type=1`
  413. }
  414. }
  415. }
  416. </script>
  417. <style lang="scss" scoped>
  418. .popupcode {
  419. height: 98rpx;
  420. width: 100%;
  421. background-color: #F8832C;
  422. text-align: center;
  423. line-height: 98rpx;
  424. color: #fff;
  425. font-size: 32rpx;
  426. }
  427. .popupcodetwo {
  428. padding: 30rpx 20rpx;
  429. &-view {
  430. color: #101010;
  431. line-height: 50rpx;
  432. font-size: 30rpx;
  433. }
  434. &-text {
  435. color: #8c8c8c;
  436. font-size: 26rpx;
  437. }
  438. }
  439. .popupcodethree {
  440. padding: 0rpx 20rpx 50rpx;
  441. &-default {
  442. background-color: #FCE9DB;
  443. color: #fff;
  444. border: 2rpx solid #F8832C;
  445. color: #F9832C;
  446. border-radius: 22rpx;
  447. }
  448. }
  449. .wrap {
  450. // 设置ios刘海屏底部横线安全区域
  451. // padding-bottom: constant(safe-area-inset-bottom);
  452. // padding-bottom: env(safe-area-inset-bottom);
  453. padding-bottom: 200rpx;
  454. background: url(../static/activity/effectsone.png) no-repeat 100% 0%;
  455. background-size: 100%;
  456. &-fakeNum {
  457. margin-top: 46rpx;
  458. .fakeNum {
  459. line-height: 66rpx;
  460. text-align: center;
  461. width: 266rpx;
  462. height: 76rpx;
  463. background: url(../static/activity/rectangle.png) no-repeat center center;
  464. background-size: 266rpx 76rpx;
  465. margin: 0 auto;
  466. color: #A13D01;
  467. font-size: 30rpx;
  468. }
  469. }
  470. &-date {
  471. text-align: center;
  472. width: 100%;
  473. font-family: YouSheBiaoTiHei;
  474. color: #FFFFFF;
  475. &-on {
  476. display: inline-block;
  477. font-size: 76rpx;
  478. line-height: 68rpx;
  479. &-line {
  480. display: inline-block;
  481. width: 68rpx;
  482. height: 2rpx;
  483. overflow: hidden;
  484. background-color: #fff;
  485. position: relative;
  486. bottom: 25rpx;
  487. }
  488. }
  489. &-date {
  490. font-size: 52rpx;
  491. }
  492. }
  493. &-fixed {
  494. height: 630rpx;
  495. margin: 30rpx 30rpx;
  496. &-effectstwo {
  497. border-radius: 20rpx;
  498. width: 100%;
  499. height: 100%;
  500. background: url(../static/activity/effectstwo.png) no-repeat center center;
  501. .effectsthree {
  502. position: relative;
  503. height: 400rpx;
  504. width: 100%;
  505. z-index: 10;
  506. &-width {
  507. position: absolute;
  508. width: 175rpx;
  509. height: 175rpx;
  510. margin: 0;
  511. image {
  512. width: 100%;
  513. height: 100%;
  514. }
  515. &-name {
  516. position: relative;
  517. left: 10rpx;
  518. top: -160rpx;
  519. transform: rotateZ(-45deg);
  520. color: #fff;
  521. font-size: 26rpx;
  522. }
  523. }
  524. &-position {
  525. position: absolute;
  526. // z-index: 1;
  527. width: 180rpx;
  528. height: 62rpx;
  529. background-image: linear-gradient(to right, #FAE08A, #FFC45A);
  530. border-radius: 17rpx;
  531. line-height: 62rpx;
  532. text-align: center;
  533. color: #A13D01;
  534. font-size: 30rpx;
  535. top: 20rpx;
  536. right: 20rpx;
  537. }
  538. &-positionTwo {
  539. width: 100%;
  540. height: 100%;
  541. text-align: center;
  542. image {
  543. width: 350rpx;
  544. height: 350rpx;
  545. margin-top: 70rpx;
  546. }
  547. .textone {
  548. width: 70%;
  549. margin: 0 auto;
  550. margin-top: 80rpx;
  551. color: #333333;
  552. font-size: 30rpx;
  553. line-height: 40rpx;
  554. }
  555. .texttwo {
  556. color: #FC531E;
  557. font-size: 30rpx;
  558. line-height: 34rpx;
  559. }
  560. }
  561. }
  562. .effectstwo {
  563. position: relative;
  564. bottom: 120rpx;
  565. margin-left: 17.5%;
  566. width: 65%;
  567. height: 65%;
  568. background: url(../static/activity/effectssix.png) no-repeat 100% center;
  569. background-size: 100%;
  570. }
  571. }
  572. }
  573. &-award {
  574. padding-bottom: 50rpx;
  575. // height: 2230rpx;
  576. border-radius: 18rpx;
  577. margin: 30rpx 30rpx;
  578. background-color: #fff;
  579. .effectsthree {
  580. position: relative;
  581. // height: 400rpx;
  582. // width: 100%;
  583. // z-index: 10;
  584. &-width {
  585. position: absolute;
  586. width: 175rpx;
  587. height: 175rpx;
  588. margin: 0;
  589. image {
  590. width: 100%;
  591. height: 100%;
  592. }
  593. &-name {
  594. position: relative;
  595. left: 10rpx;
  596. top: -160rpx;
  597. transform: rotateZ(-45deg);
  598. color: #fff;
  599. font-size: 26rpx;
  600. }
  601. }
  602. &-position {
  603. position: absolute;
  604. z-index: 1;
  605. width: 180rpx;
  606. height: 62rpx;
  607. background-image: linear-gradient(to right, #FAE08A, #FFC45A);
  608. border-radius: 17rpx;
  609. line-height: 62rpx;
  610. text-align: center;
  611. color: #A13D01;
  612. font-size: 30rpx;
  613. top: 20rpx;
  614. right: 20rpx;
  615. }
  616. &-positionTwo {
  617. width: 100%;
  618. height: 220rpx;
  619. // text-align: center;
  620. padding: 0 62rpx;
  621. justify-content: flex-start;
  622. .imatwo {
  623. width: 150rpx;
  624. height: 150rpx;
  625. }
  626. .textone {
  627. color: #333333;
  628. font-size: 30rpx;
  629. margin-left: 20rpx;
  630. line-height: 75rpx;
  631. }
  632. .texttwo {
  633. margin-left: 20rpx;
  634. color: #FC531E;
  635. font-size: 28rpx;
  636. line-height: 75rpx;
  637. }
  638. .imgone {
  639. width: 449rpx;
  640. height: 280rpx;
  641. position: relative;
  642. bottom: 80rpx;
  643. margin-left: 0%;
  644. z-index: 0;
  645. // width: 45%;
  646. // height: 45%;
  647. }
  648. }
  649. }
  650. &-explain {
  651. margin-top: 30rpx;
  652. text-align: center;
  653. color: #999999;
  654. font-size: 30rpx;
  655. }
  656. }
  657. &-description {
  658. min-height: 200rpx;
  659. background-color: #fff;
  660. margin: 30rpx 30rpx;
  661. border-radius: 18rpx;
  662. padding-bottom: 40rpx;
  663. &-code {
  664. font-size: 30rpx;
  665. color: #333;
  666. padding: 36rpx 24rpx;
  667. }
  668. &-codetwo {
  669. text-align: center;
  670. margin-top: 20rpx;
  671. margin-bottom: 40rpx;
  672. .codeList {
  673. text-align: center;
  674. margin-bottom: 40rpx;
  675. &-bottom {
  676. margin: 0 auto;
  677. width: 526rpx;
  678. height: 70rpx;
  679. background-color: #F8832C;
  680. color: #fff;
  681. border-radius: 12rpx;
  682. font-size: 36rpx;
  683. line-height: 70rpx;
  684. }
  685. }
  686. }
  687. &-codethree {
  688. text-align: center;
  689. .codethree {
  690. margin-left: 80rpx;
  691. .codeimg {
  692. width: 200rpx;
  693. height: 200rpx;
  694. }
  695. }
  696. .codesix {
  697. line-height: 1rpx;
  698. color: #F8832C;
  699. font-size: 30rpx;
  700. display: inline-block;
  701. margin-bottom: 80rpx;
  702. }
  703. }
  704. &-codesix {
  705. padding: 10rpx 0;
  706. text-align: center;
  707. line-height: 60rpx;
  708. font-size: 28rpx;
  709. font-weight: bold;
  710. color: #666666;
  711. margin-bottom: 20rpx;
  712. .view {
  713. font-size: 28rpx;
  714. color: #F9822C;
  715. display: inline-block;
  716. }
  717. }
  718. &-codesixtwo {
  719. margin: 0 auto;
  720. width: 600rpx;
  721. font-size: 26rpx;
  722. color: #999;
  723. line-height: 40rpx;
  724. // padding-bottom: 40rpx;
  725. text-align: center;
  726. }
  727. }
  728. &-descriptiontwo {
  729. margin: 30rpx;
  730. border-radius: 18rpx;
  731. overflow: hidden;
  732. background-color: #fff;
  733. }
  734. &-account {
  735. height: 100rpx;
  736. border-radius: 22rpx;
  737. background-color: #fff;
  738. margin: 30rpx 30rpx 0 30rpx;
  739. text-align: center;
  740. &-view {
  741. padding: 0 20rpx;
  742. image {
  743. width: 64rpx;
  744. height: 64rpx;
  745. vertical-align: -50%;
  746. }
  747. text {
  748. line-height: 100rpx;
  749. margin: 20rpx;
  750. font-size: 30rpx;
  751. color: #333333;
  752. }
  753. view {
  754. text-align: center;
  755. border-radius: 6rpx;
  756. display: inline-block;
  757. height: 44rpx;
  758. line-height: 44rpx;
  759. font-size: 26rpx;
  760. width: 112rpx;
  761. color: #f9822c;
  762. background-color: #fff;
  763. border: 2rpx solid #f9822c;
  764. }
  765. }
  766. }
  767. }
  768. .data-btn {
  769. float: left;
  770. text {
  771. display: inline-block;
  772. width: 60rpx;
  773. }
  774. }
  775. .footer-fixed {
  776. position: fixed;
  777. bottom: var(--window-bottom);
  778. left: 0;
  779. right: 0;
  780. z-index: 11;
  781. box-shadow: 0 -4rpx 40rpx 0 rgba(151, 151, 151, 0.24);
  782. background: #fff;
  783. // 设置ios刘海屏底部横线安全区域
  784. padding-bottom: constant(safe-area-inset-bottom);
  785. padding-bottom: env(safe-area-inset-bottom);
  786. .btn {
  787. padding: 20rpx 0;
  788. ::v-deep button {
  789. width: 640rpx;
  790. height: 90rpx;
  791. line-height: 90rpx;
  792. font-size: 34rpx;
  793. color: #fff;
  794. background-color: #f9822c;
  795. border: none;
  796. border-radius: 48rpx;
  797. }
  798. }
  799. .buttoncol {
  800. background-color: #555;
  801. }
  802. }
  803. </style>