123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965 |
- <template>
- <view class="conbox">
- <view class="container">
- <!-- 背景 -->
- <image src="../../merchant/static/images/darw/bg.png" class="cont" mode=""></image>
- <image src="../../merchant/static/images/darw/caidai.png" class="caidai" mode=""></image>
- <view class="header">
- <view class="header-title">
- <view class="left">
- 次数: <text style="color: #E4431A;">{{chishu}}</text>
- </view>
- <view class="right" @click="getmyPrize">
- 我的奖品 >
- </view>
- </view>
- </view>
- <view class="main">
- <view class="canvas-container">
- <view :animation="animationData" class="canvas-content" id="zhuanpano" style="">
- <!-- <view :animation="animationData" class="canvas-content" id="zhuanpano" :style="[{transform:'rotate('+runDeg+')'}]"> -->
- <!-- <canvas class="canvas" canvas-id="canvas"></canvas> -->
- <view class="canvas-line">
- <view class="canvas-litem" v-for="(item,index1) in awardsList" :key="index1"
- :style="[{transform:'rotate('+item.lineTurn+')'}]"></view>
- </view>
- <view class="canvas-list">
- <view class="canvas-item" :style="[{zIndex:index2}]" v-for="(iteml,index2) in awardsList"
- :key="index2">
- <view class="canvas-item-text" :style="[{transform:'rotate('+iteml.turn+')'}]">
- <text class="text-1">{{iteml.award}}</text>
- <image class="canvas-item-text-img" src="../../merchant/static/images/darw/xiaolian.png" v-if="iteml.type ==0"></image>
- <image v-else class="canvas-item-text-img" src="../../merchant/static/images/darw/youhuiquan.png"></image>
- </view>
- </view>
- </view>
- </view>
- <view @tap="playReward" class="canvas-btn" v-bind:class="btnDisabled">开始 </view>
- </view>
- </view>
- <!-- 现金抽奖 -->
- <view class="typecheckbox">
- <!-- <view :class="mold==1?'left active':'left'" @click="choosetype(1)">
- 幸运抽奖
- </view>
- <view :class="mold==2?'left active':'left' " @click="choosetype(2)">
- 现金抽奖
- </view> -->
- </view>
- <!-- 规则 -->
- <view class="guize">
- <view class="title">
- 规则说明
- </view>
- <view class="g_item">
- {{rule}}
- </view>
- <!-- <view class="g_item">
- 2.用户点击大转盘抽奖按钮,有积分和现金两种方式可参与抽奖,没抽一次消耗1次抽奖机会
- </view>
- <view class="g_item">
- 3.用户获得的奖品,可在我的道具里查看
- </view> -->
- </view>
-
- <!-- 我的奖品 -->
- <view class="shadowbox" v-if="r_flg" @click="closeshadow">
- <view class="myrewards" @click.stop="openshadow">
- <view class="title">
- 我的奖品
- </view>
- <view class="itembox">
- <view class="item" v-for="(items,i) in myPrizelist" :key="i">
- <text class="left">{{items.title}}</text>
- <text class="right">{{items.createtime}}</text>
- </view>
- </view>
- </view>
- </view>
- </view>
- <uni-popup ref="popup" type="top">
- <view class="popup-content">
- <image class="page-title"
- src="../../merchant/static/images/darw/core-wrap1.png" mode=""></image>
- <view class="page-title-text">
- <view class="page-title-text1 ">
- <text style="font-size: 36rpx;">中奖啦!</text>
- <view class="text-2 ft26" style="margin-top: 10rpx;">
- 获得{{darw_title}}
- </view>
- </view>
- </view>
- <view class="page-title-close" @click="close">
- <image src="../../static/images/shanchu.png" mode=""></image>
- </view>
- </view>
- </uni-popup>
-
- </view>
-
-
- </template>
- <script>
- // #ifdef H5
- import getWXSign from "@/static/js/config.js";
- // #endif
-
- export default {
- data() {
- return {
- awardsConfig: {
- chance: true, //是否有抽奖机会
- lists: [], //奖品列表
- },
- awardsList: {},
- animationData: {},
- btnDisabled: '',
- thanksarr: [], //存储谢谢参与的索引
- chishu: 0,
- mold: 1,
- r_flg: 0,
- myPrizelist: [],
- card_num: "",
- user_token: '',
- power_id: '',
- rule:"",
- content:"",
- darw_title:"",super_id:""
- }
- },
- onLoad: function(e) {
- // 获取奖品列表
- function getUrlParam(paraName) {
- let url = window.location.href;
- var arrObj = url.split("?");
- if (arrObj.length > 1) {
- var arr;
- for (var i = 0; i < arrObj.length; i++) {
- arr = arrObj[i].split("=");
- console.log(arr)
- if (arr != null && arr[0] == paraName) {
- return arr[1];
- }
- }
- return "";
- } else {
- return "";
- }
- }
- this.card_num = getUrlParam('card_num');
- this.http(getUrlParam('card_num'));
- },
-
- onReady: function(e) {
- },
-
- methods: {
- http(card_num) {
- this.request({
- url: "funeng/scan",
- data: {
- card_num: card_num,
- },
- }).then(res => {
- if (res.code == '200') {
- this.power_id = res.data.id;
- this.super_id=res.data.super_id;
- this.content = res.data.way_power.replace(/<br\s*\/?\s*>/ig, "\n");
- this.http_rule();
- if (res.data.type == 7) {
- if(res.data.wx_state==1){
- uni.setNavigationBarTitle({
- title: res.data.wx_title
- });
- }
- this.wxShare(res);
- }
- if(uni.getStorageSync("user_token")){
- this.user_token=uni.getStorageSync("user_token");
- this.initdata(this.user_token);
- }else{
- this.isweb();
- }
- }
- }).catch((res) => {
- uni.showToast({
- title: res.message,
- icon: 'none',
- duration:5000,
- })
- });
- },
- wxShare(res) {
- var imgUrl = res.data.wximg_url ? res.data.wximg_url : getApp().globalData.URL + res.data.wx_img;
- let super_id=this.super_id;
- getWXSign(super_id).then(r => {
- console.log(r, "imgURL")
- if (r) {
- if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {
- this.$wx.updateAppMessageShareData({
- title: res.data.wx_title ? res.data.wx_title : "", // 分享标题
- desc: res.data.wx_desc ? res.data.wx_desc : "", // 分享描述
- link: window.location.href, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
- imgUrl: imgUrl, // 分享图标
- success: (res) => {
- // 设置成功
- console.log("设置成功", res)
- }
- })
- this.$wx.updateTimelineShareData({
- title: res.data.wx_title, // 分享标题
- link: window.location.href, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
- imgUrl: imgUrl, // 分享图标
- success: (res) => {
- // 设置成功
- console.log("设置成功", res)
- }
- })
- } else {
- // alert("pc")
- this.$wx.onMenuShareTimeline({
- title: res.data.wx_title, // 分享标题
- desc: res.data.wx_desc, // 分享描述
- link: window.location.href, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
- imgUrl: imgUrl, // 分享图标
- success: (res) => {
- // 设置成功
- console.log("设置成功", res)
- }
- })
- this.$wx.onMenuShareAppMessage({
- title: res.data.wx_title, // 分享标题
- desc: res.data.wx_desc, // 分享描述
- link: window.location.href, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
- imgUrl: imgUrl, // 分享图标
- success: (res) => {
- // 设置成功
- console.log("设置成功", res)
- }
- })
- }
- }
- })
- },
-
- http_rule() {
- this.request({
- url: "game/gameRule",
- data: {
- power_id: this.power_id,
- token:this.user_token,
- },
- is_agent:'member',
- }).then(res => {
- if (res.code == '200') {
- this.rule = res.data;
- }
- })
- },
-
- // 公众号授权
- isweb() {
- let id=this.power_id;
- function GetRequest() {
- var url = location.search; //获取url中"?"符后的字串
- var theRequest = new Object();
- if (url.indexOf("?") != -1) {
- //判断是否有参数
- var str = url.substr(1); //从第一个字符开始 因为第0个是?号 获取所有除问号的所有符串
- var strs = str.split("&");
- console.log(strs)
- for (var i = 0; i < strs.length; i++) {
- theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1]);
- }
- }
- return theRequest;
- }
- if (GetRequest().code) {
- //发起网络请求
- this.request({
- url: "wechat/webLogin",
- data: {
- code: GetRequest().code,
- type:3,
- },
- is_agent:'member',
- }).then(res => {
- console.log(res, "res")
- this.user_token = res.data.token;
- uni.setStorageSync("user_token",res.data.token)
- this.initdata(res.data.token)
- }).catch((res) => {
- console.log("message", res)
- if (res.message == "获取openid失败") {
- return
- }
- uni.showToast({
- title: res.message,
- icon: 'none'
- })
- });
- } else {
- this.gzhurl(id);
- }
- },
-
- gzhurl(id) {
- this.request({
- url: "wechat/getLoginUrl",
- data: {
- type: 3,
- power_id: id,
- card_num: this.card_num,
- super_id:this.super_id,
- },
- is_agent:'member',
- }).then(res => {
- if (res.data.url) {
- window.location.href = res.data.url
- }
- }).catch((res) => {
- console.log("message", res)
- });
- },
-
- // 查看奖品
- getmyPrize() {
- let user_token=this.user_token,power_id=this.power_id;
- uni.navigateTo({
- url:`./prize?token=${user_token}&power_id=${power_id}`
- })
- return;
- },
- openshadow() {
- this.r_flg = 1
- },
- closeshadow() {
- this.r_flg = 0
- },
- close(){
- this.$refs.popup.close();
- },
- // 初始化抽奖数据
- initdata: function(token) {
- let that = this;
- this.request({
- url: "game/prizeList",
- data: {
- card_num:this.card_num,
- token,
- },
- is_agent:'member',
- }).then(res => {
- console.log(res, "res")
- if (res.code === '200') {
- that.awardsConfig = res.data;
- that.chishu = res.data.luckdraw;
- // 获取奖品的个数
- let awarrlength = that.awardsConfig.lists.length
- // push 谢谢参与奖项
- for (var i = 0; i <= 3 * 2; i++) {
- if (i % 3 == 0) {
- that.thanksarr.push(i)
- that.awardsConfig.lists.splice(i, 0, {
- title: '谢谢参与',
- type: 0
- });
- }
- }
- // 为每一项追加index属性
- that.awardsConfig.lists.forEach(function(element, index) {
- element.index = index
- })
- // 画转盘
- that.drawAwardRoundel();
- }
- }).catch((res) => {
- if(res.code==1004){
- uni.removeStorageSync("user_token")
- this.gzhurl(this.power_id);
- }else{
- uni.showToast({
- title: res.message,
- icon: 'none'
- })
- }
- });
- },
-
- //画抽奖圆盘
- drawAwardRoundel: function() {
- // 拿到奖品列表
- var awards = this.awardsConfig.lists;
- var awardsList = [];
- // 每份奖品所占角度
- var turnNum = 1 / awards.length * 360; // 文字旋转 turn 值
- // 奖项列表
- for (var i = 0; i < awards.length; i++) {
- awardsList.push({
- turn: i * turnNum + 'deg', //每个奖品块旋转的角度
- lineTurn: i * turnNum + turnNum / 2 + 'deg', //奖品分割线的旋转角度
- award: awards[i].title, //奖品的名字,
- type: awards[i].type,
- id: awards[i].type,
- });
- }
- this.btnDisabled = this.chishu ? '' : 'disabled';
- this.awardsList = awardsList;
- },
-
- playReward: function() {
- var that = this;
- if (this.chishu == 0) {
- uni.showToast({
- title: '抽奖次数已经用完',
- icon: 'none'
- })
- return
- }
- this.request({
- url: "game/getPrize",
- data: {
- token: this.user_token,
- power_id: this.power_id,
- },
- is_agent:'member',
- }).then(res => {
- console.log(res, "res")
- if (res.code === '200') {
- this.playRewards(res.data);
- }
- }).catch((res) => {
- uni.showToast({
- title: res.message,
- icon: 'none'
- })
- });
- let content = this.content;
- if (!document.queryCommandSupported('copy')) {
- // 不支持
- return false
- }
- let textarea = document.createElement("textarea")
- textarea.value = content
- textarea.readOnly = "readOnly"
- document.body.appendChild(textarea)
- textarea.select() // 选择对象
- textarea.setSelectionRange(0, content.length) //核心
- let result = document.execCommand("copy") // 执行浏览器复制命令
- textarea.remove();
- return result
- },
- copy(e) {
- let content = this.content;
- if (!document.queryCommandSupported('copy')) {
- // 不支持
- return false
- }
- let textarea = document.createElement("textarea")
- textarea.value = content
- textarea.readOnly = "readOnly"
- document.body.appendChild(textarea)
- textarea.select() // 选择对象
- textarea.setSelectionRange(0, content.length) //核心
- let result = document.execCommand("copy") // 执行浏览器复制命令
- textarea.remove();
- return result
- },
-
- //发起抽奖
- playRewards: function(data) {
- var that = this
- // 获取奖品
- var awardIndex = 3
- that.awardsList.forEach(function(element, index) {
- if (element.award == data.title) {
- awardIndex = index
- }
- })
- //中奖index
- var awardsNum = that.awardsConfig.lists;
- // var awardIndex = 1 || Math.round(Math.random() * (awardsNum.length - 1)); //随机数
- var runNum = 4; //旋转8周
- var duration = 4000; //时长
- // 旋转角度
- that.runDeg = that.runDeg || 0;
- let preDeg = that.runDeg
- that.runDeg = that.runDeg + (360 - that.runDeg % 360) + (360 * runNum - awardIndex * (360 / awardsNum.length)) + 1
- //创建动画
- if (process.env.VUE_APP_PLATFORM == 'h5') {
- // document.styleSheets[0]
- document.getElementById('zhuanpano').style = 'animation:rotate_before 4s 0ms ease forwards;'
- if (document.styleSheets[0].cssRules.length > 0) {
- Array.from(document.styleSheets[0].cssRules).forEach(function(element, index) {
- if (element.name == 'rotate_before') {
- // 删除上次插入的动画
- document.styleSheets[0].deleteRule(index)
- }
- })
- }
- // console.log(document.styleSheets[0].cssRules)
- // console.log("@keyframes rotate_before{from{ transform: rotate("+preDeg+"deg); }to{ transform: rotate("+that.runDeg+"deg);}}")
- // 插入定义的动画
- document.styleSheets[0].insertRule("@keyframes rotate_before{from{ transform: rotate(" + preDeg +
- "deg); }to{ transform: rotate(" + that.runDeg + "deg);}}", 8);
- } else {
- var animationRun = uni.createAnimation({
- duration: duration,
- timingFunction: 'ease'
- })
- animationRun.rotate(that.runDeg).step();
- that.animationData = animationRun.export();
- }
- that.btnDisabled = 'disabled';
- // 中奖提示
- var awardsConfig = that.awardsConfig;
- var awardType = awardsConfig.lists[awardIndex].type;
- that.chishu = that.chishu - 1;
- if (awardType != 0) {
-
- setTimeout(function() {
- this.$refs.popup.open();
- this.darw_title=awardsConfig.lists[awardIndex].title;
-
- that.btnDisabled = '';
- setTimeout(function() {
- document.getElementById('zhuanpano').style = ''
- }, 500)
- // uni.showModal({
- // title: '恭喜',
- // showCancel: false,
- // success: function() {
- // setTimeout(function() {
- // document.getElementById('zhuanpano').style = ''
- // }, 500)
- // }
- // });
- }.bind(that), duration);
-
- } else {
- setTimeout(function() {
- that.btnDisabled = '';
- uni.showToast({
- title: '很遗憾!没中奖',
- image: '../../merchant/static/images/darw/yh.png',
- duration:3000
- })
- setTimeout(function() {
- document.getElementById('zhuanpano').style = ''
- }, 500)
- // uni.showModal({
- // title: '很遗憾',
- // content: '没中奖 ' + (awardsConfig.lists[awardIndex].title),
- // showCancel: false,
- // success: function() {
- // setTimeout(function() {
- // document.getElementById('zhuanpano').style = ''
- // }, 500)
- // }
- // });
- }.bind(that), duration);
-
- }
- },
- }
- }
- </script>
- <style scoped>
-
- .popup-content {
- width: 100%;
- margin-top: 200rpx;
- text-align: center;
- position: relative;
- }
-
- .page-title {
- width: 100%;
- height:600rpx;
- position: absolute;
- top: 80rpx;
- left: 0px;
- z-index: 500;
- }
-
- .page-title-close {
- width: 100%;
- height:100rpx;
- position: absolute;
- top: 600rpx;
- left: 0px;
- z-index: 500;
- text-align: center;
- }
- .page-title-close image{
- width: 60rpx;
- height:60rpx;
- }
-
- .page-title-text{
- position: absolute;
- top: 375rpx;
- z-index: 501;
- width: 100%;
- text-align: center;
- color: yellow;
- }
-
- .page-title-text1{
- width:300rpx;
- margin: 0 auto;
- }
-
- .text-1{
- display: block;
- width: 200rpx;
- }
- .conbox {
- width: 750upx;
- height: 100vh;
- overflow-x: hidden;
- overflow-y: scroll;
- }
- .container,
- image.cont {
- width: 750upx;
- min-height: 100vh;
- height: auto;
- position: relative;
- }
- image.cont {
- height: 100%;
- position: absolute;
- z-index: 0;
- }
- image.caidai {
- position: absolute;
- top: 0;
- left: 0;
- width: 750upx;
- height: 1024upx;
- }
- .header {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- /* height: 246upx; */
- padding-top: 48upx;
- padding-bottom: 40upx;
- box-sizing: border-box;
- position: relative;
- z-index: 3;
- }
- .header-title {
- width: 100%;
- height: 60upx;
- display: flex;
- align-items: center;
- padding: 0 48upx;
- box-sizing: border-box;
- justify-content: space-between;
- }
- .header-title>view {
- padding: 8upx 16upx;
- border: 1px solid #d89720;
- color: #d89720;
- font-size: 28upx;
- border-radius: 26upx;
- }
- /* 转盘 */
- .canvas-container {
- margin: 0 auto;
- position: relative;
- width: 600upx;
- height: 600upx;
- background: url(../../merchant/static/images/darw/circle.png) no-repeat;
- background-size: cover;
- border-radius: 50%;
- }
- .canvas {
- width: 100%;
- height: 100%;
- display: block !important;
- border-radius: 50%;
- }
- .canvas-content {
- position: absolute;
- left: 0;
- top: 0;
- z-index: 1;
- display: block;
- width: 600upx;
- height: 600upx;
- border-radius: inherit;
- /* background-clip: padding-box; */
- /* background-color: #ffcb3f; */
- }
- .canvas-element {
- position: relative;
- z-index: 1;
- width: inherit;
- height: inherit;
- border-radius: 50%;
- }
- .canvas-list {
- position: absolute;
- left: 0;
- top: 0;
- width: inherit;
- height: inherit;
- z-index: 9999;
- }
- .canvas-item {
- position: absolute;
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;
- color: #e4370e;
- /* text-shadow: 0 1upx 1upx rgba(255, 255, 255, 0.6); */
- }
- .canvas-item-text {
- position: relative;
- display: block;
- padding-top: 46upx;
- margin: 0 auto;
- text-align: center;
- -webkit-transform-origin: 50% 300upx;
- transform-origin: 50% 300upx;
- display: flex;
- flex-direction: column;
- align-items: center;
- color: #FB778B;
- }
- .canvas-item-text text {
- font-size: 30upx;
- }
- .canvas-item-text-img {
- width: 50upx;
- height: 50upx;
- margin-top: 56upx;
- }
- /* 分隔线 */
- .canvas-line {
- position: absolute;
- left: 0;
- top: 0;
- width: inherit;
- height: inherit;
- z-index: 99;
- }
- .canvas-litem {
- position: absolute;
- left: 300upx;
- top: 0;
- width: 3upx;
- height: 300upx;
- background-color: rgba(228, 55, 14, 0.4);
- overflow: hidden;
- -webkit-transform-origin: 50% 300upx;
- transform-origin: 50% 300upx;
- }
- /**
- * 抽奖按钮
- */
- .canvas-btn {
- position: absolute;
- left: 260upx;
- top: 260upx;
- z-index: 4;
- width: 80upx;
- height: 80upx;
- border-radius: 50%;
- color: #f4e9cc;
- background-color: #e44025;
- line-height: 80upx;
- text-align: center;
- font-size: 26upx;
- text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);
- box-shadow: 0 3px 5px rgba(0, 0, 0, 0.6);
- text-decoration: none;
- }
- .canvas-btn::after {
- position: absolute;
- display: block;
- content: ' ';
- left: 12upx;
- top: -44upx;
- width: 0;
- height: 0;
- overflow: hidden;
- border-width: 30upx;
- border-style: solid;
- border-color: transparent;
- border-bottom-color: #e44025;
- }
- .canvas-btn.disabled {
- pointer-events: none;
- background: #b07a7b;
- color: #ccc;
- }
- .canvas-btn.disabled::after {
- border-bottom-color: #b07a7b;
- }
- .canvas-btn-table {
- color: #A83FDB;
- width: 120upx;
- text-align: center;
- position: absolute;
- left: 240upx;
- top: 360upx;
- font-size: 26upx;
- background-color: #FFFFFF;
- opacity: 0.9;
- }
- .typecheckbox {
- width: 100%;
- position: relative;
- z-index: 3;
- display: flex;
- justify-content: space-between;
- padding: 20upx;
- box-sizing: border-box;
- color: #fff;
- font-size: 28upx;
- top: -120upx;
- flex-direction: column;
- height: 180upx;
- align-items: flex-end;
- /* padding-top: 46upx; */
- }
- .typecheckbox view {
- border: 1px solid #FF3637;
- background: transparent;
- color: #FF3637;
- display: flex;
- height: 60upx;
- width: 140upx;
- border-radius: 50upx;
- align-items: center;
- justify-content: center;
- display: flex;
- margin-left: 20upx;
- }
- .typecheckbox view.active {
- background: #FF3637;
- color: #fff;
- }
- .guize {
- width: 502upx;
- min-height: 300upx;
- display: flex;
- flex-direction: column;
- position: relative;
- z-index: 3;
- background-image: linear-gradient(-180deg, #F48549 0%, #F2642E 100%);
- border: 18upx solid #E4431A;
- border-radius: 16px;
- margin: 0 auto;
- margin-top: -104upx;
- padding: 48upx;
- /* box-sizing: border-box; */
- color: #fff;
- }
- .guize .title {
- text-align: center;
- margin-bottom: 28upx;
- }
- .guize .g_item {
- font-family: PingFang-SC-Medium;
- font-size: 24upx;
- color: #FFFFFF;
- letter-spacing: 0.5px;
- text-align: justify;
- line-height: 20px;
- word-break: break-all;
- }
- .shadowbox {
- width: 750upx;
- height: 100vh;
- position: fixed;
- top: 0;
- left: 0;
- z-index: 999;
- background: rgba(0, 0, 0, .6);
- display: flex;
- justify-content: center;
- align-items: center;
- }
- .myrewards {
- width: 600upx;
- min-height: 80upx;
- background: #FFEEDF;
- border: 10upx solid #F2692F;
- color: #333;
- font-size: 24upx;
- font-family: PingFang-SC-Medium;
- border-radius: 40upx;
- padding-bottom: 20upx;
- }
- .myrewards .title {
- font-family: PingFang-SC-Bold;
- font-size: 16px;
- color: #E4431A;
- letter-spacing: 0.57px;
- display: flex;
- padding-top: 36upx;
- justify-content: center;
- }
- .myrewards .itembox {
- max-height: 320upx;
- overflow-y: auto;
- }
- .myrewards .item {
- width: 100%;
- height: 66upx;
- padding: 0 32upx;
- box-sizing: border-box;
- display: flex;
- align-items: center;
- justify-content: space-between;
- }
- </style>
|