868 lines
18 KiB
Vue
868 lines
18 KiB
Vue
<!--
|
||
* @Date: 2023-11-17 15:19:49
|
||
* @LastEditTime: 2023-12-02 17:20:01
|
||
* @Description: content
|
||
-->
|
||
<template>
|
||
<view class="content">
|
||
<uni-nav-bar left-icon="left" title="权益中心" color="#fff" backgroundColor="transparent" :fixed="true"
|
||
:statusBar="true" :border="false" @clickLeft="$c.back"></uni-nav-bar>
|
||
<view class="">
|
||
<view v-if="pageData" class="user-card br20">
|
||
<view class="align-center justify-between">
|
||
<view class="align-center">
|
||
<view class="avatar">
|
||
<image :src="pageData.user_img" lazy-load mode="aspectFill"></image>
|
||
</view>
|
||
<view class="lv ml20">LV.{{ pageData.quan_yi_level.level }}</view>
|
||
</view>
|
||
<view class="rule-btn" @click="toRule">
|
||
<uni-icons type="info-filled" color="#FFFFFF"></uni-icons>
|
||
<text>说明</text>
|
||
</view>
|
||
</view>
|
||
<view class="align-center justify-between" style="margin-top: 60rpx;">
|
||
<view class="">
|
||
<view class="need">
|
||
<template v-if="pageData.quan_yi_level.cha >= 0">
|
||
差{{ pageData.quan_yi_level.cha }}欧气值升级
|
||
</template>
|
||
<template v-else-if="pageData.quan_yi_level.cha == -1">已满级</template>
|
||
</view>
|
||
<view class="progress-buy mt20">
|
||
<view class="progress">
|
||
<cmd-progress :percent="pageData.quan_yi_level.jindu" :show-info="false"
|
||
stroke-color="#FFFFFF;" :strokeWidth="5"></cmd-progress>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="buy" @click="$c.to({ type: 3, url: '/pages/shouye/index' })">
|
||
<text>去购买</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view v-if="pageData" class="prize-card">
|
||
|
||
<view class="mask flex">
|
||
<view class="prize-item1" :key="-1">
|
||
<view class=""></view>
|
||
|
||
<view class="ziti center">
|
||
普通</br>
|
||
奖励
|
||
</view>
|
||
|
||
<view class="ziti center">
|
||
高级</br>
|
||
奖励
|
||
</view>
|
||
<view class="get-btn">
|
||
|
||
</view>
|
||
</view>
|
||
<scroll-view class="prize-list" scroll-x :scroll-into-view="curLvId">
|
||
<view class="prize-item" v-for="(item, i) in pageData.level_list" :key="i"
|
||
:id="`prize-item${item.level}`">
|
||
<view class="lv">{{ item.level }}级</view>
|
||
|
||
<view class="prize center" @click="preview(item)">
|
||
<image :src="$img1('my/quan.png')" mode="aspectFit"></image>
|
||
</view>
|
||
|
||
<view class="prize center" @click="preview(item)" style="background: linear-gradient( 141deg, rgba(255,242,222,0.24) 0%, rgba(249,219,172,0.19) 100%);">
|
||
<image :src="$img1('my/liwu.png')" mode="aspectFit"></image>
|
||
</view>
|
||
<view v-if="item.is_ling == 1 && item.pu_jiang.length>0" class="get-btn center" @click="doReceive(item)">
|
||
领取
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
|
||
|
||
<view class="task">
|
||
<view class="task-tab center">
|
||
<view class="task-tab-item align-end" v-for="(item, i) in tabList" :key="i" :class="{
|
||
act: tabCur == i
|
||
}" @click="tabChange(i)">
|
||
<image v-if="i == 0" :src="$img1('index/ljLeft.png')"></image>
|
||
<text class="center">{{ item.title }}</text>
|
||
<image v-if="i == 1" :src="$img1('index/ljRight.png')"></image>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="task-item" v-for="(item, i) in taskList" :key="i">
|
||
<view class="task-l">
|
||
<view class="title">{{ item.title }}</view>
|
||
|
||
<view class="num">欧气值
|
||
<text>+{{ item.z_number }}</text>
|
||
</view>
|
||
|
||
<view class="progress">
|
||
<view class="progress-inner">
|
||
<cmd-progress :percent="item.percentage" :show-info="false"
|
||
stroke-color="#B07AF3;"
|
||
:strokeWidth="8"></cmd-progress>
|
||
</view>
|
||
<text class="ml10">{{ item.ywc_count }}/{{ item.number }}</text>
|
||
|
||
</view>
|
||
</view>
|
||
|
||
<view class="task-r">
|
||
<view v-if="item.is_complete == 0" class="btn act" @click="$c.to({ type: 3, url: '/pages/shouye/index' })">
|
||
<text>去完成</text>
|
||
</view>
|
||
|
||
<view v-if="item.is_complete == 1" class="btn act" @click="completeTask(item)">
|
||
<text>待领取</text>
|
||
</view>
|
||
|
||
<view v-if="item.is_complete == 2" class="btn dis">
|
||
<text>已领取</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<uni-popup ref="detailPop" type="center" mask-background-color="rgba(0,0,0,0.9)">
|
||
<view v-if="previewData" class="detail-pop">
|
||
<view class="close icon" @click="$refs.detailPop.close()">
|
||
<image :src="$img('/static/img/close2.png')" lazy-load></image>
|
||
</view>
|
||
<view class="title">
|
||
{{ previewData.level }}级普通奖励
|
||
</view>
|
||
<view class="prize-desc">
|
||
<view>只有等级达到了当前等级，方可领取下方奖励哦~</view>
|
||
|
||
<view>每一级奖励只可领取一次，领取后请在有效期内使用!</view>
|
||
</view>
|
||
<scroll-view class="jiang-list" scroll-x>
|
||
<view class="jiang-item" v-for="(item, i) in previewData.pu_jiang" :key="i">
|
||
<view class="pic">
|
||
<image :src="$img1('my/quan.png')" mode="aspectFit"></image>
|
||
|
||
<!-- <view v-if="item.z_num" class="num">×{{ item.z_num }}</view> -->
|
||
</view>
|
||
|
||
<view class="item-title hang1">{{ item.title }}</view>
|
||
</view>
|
||
</scroll-view>
|
||
<view class="border" v-if="previewData.gao_jiang.length>0"></view>
|
||
<template v-if="previewData.gao_jiang.length>0">
|
||
<view class="title" style="color: #F5C783;">
|
||
<text>{{ previewData.level }}级高级奖励</text>
|
||
</view>
|
||
<view class="prize-desc">
|
||
<view>完成任务后您将从以下奖品中随机获得一件</view>
|
||
</view>
|
||
|
||
<scroll-view class="jiang-list" scroll-x>
|
||
<view class="jiang-item" v-for="(item, i) in previewData.gao_jiang" :key="i">
|
||
<view class="pic">
|
||
<image :src="item.imgurl" lazy-load></image>
|
||
|
||
<!-- <view v-if="item.z_num" class="num">×{{ item.z_num }}</view> -->
|
||
</view>
|
||
<view class="item-title hang1">{{ item.title }}</view>
|
||
</view>
|
||
</scroll-view>
|
||
</template>
|
||
|
||
</view>
|
||
</uni-popup>
|
||
|
||
<uni-popup ref="resPop" type="center" mask-background-color="rgba(0,0,0,0.8)">
|
||
<view class="res-pop common_bg column center">
|
||
<view class="res-pop-hd"></view>
|
||
<view class="res-pop-main justify-evenly align-center">
|
||
<view class="column align-center" v-for="(item, i) in prizeRes" :key="i">
|
||
<view class="ziti">
|
||
<text v-if="i==0">普通奖励</text>
|
||
<text v-if="i==1" style="color: #F4C783;">高级奖励</text>
|
||
</view>
|
||
<image :src="i==1?$img1('my/liwu.png'):$img1('my/quan.png')" mode="aspectFit"></image>
|
||
<text class="mt10">{{item.title}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="res-pop-ft mt20 center">
|
||
<view class="ft-btn common_bg justify-center" :style="{
|
||
backgroundImage: `url(${$img1('common/jixuchou.png')})`
|
||
}" @click="$refs.resPop.close()">
|
||
<text>确定</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
tabList: [{
|
||
id: 1,
|
||
title: '每日任务'
|
||
},
|
||
{
|
||
id: 2,
|
||
title: '每周任务'
|
||
}
|
||
],
|
||
tabCur: 0,
|
||
pageData: '',
|
||
taskList: [],
|
||
curLvId: '',
|
||
previewData: '',
|
||
prizeRes: ''
|
||
}
|
||
},
|
||
|
||
onLoad(options) {
|
||
// this.getUserInfo()
|
||
this.getData()
|
||
this.tabChange(this.tabCur)
|
||
},
|
||
|
||
onReady() {
|
||
// this.$refs.detailPop.open()
|
||
// this.$refs.resPop.open()
|
||
},
|
||
|
||
methods: {
|
||
toRule() {
|
||
uni.setStorageSync('_qy_rule', this.pageData.danye_list)
|
||
|
||
this.$c.to({
|
||
url: '/package/mine/qy-rule'
|
||
})
|
||
},
|
||
|
||
preview(item) {
|
||
this.previewData = item
|
||
this.$refs.detailPop.open()
|
||
},
|
||
|
||
doReceive(item) {
|
||
this.req({
|
||
url: 'quan_yi_ling',
|
||
data: {
|
||
id: item.id
|
||
},
|
||
success: res => {
|
||
if (res.status == 1) {
|
||
this.prizeRes = res.data
|
||
|
||
this.$refs.resPop.open()
|
||
|
||
this.getData()
|
||
}
|
||
}
|
||
})
|
||
},
|
||
|
||
completeTask(item) {
|
||
this.req({
|
||
url: 'ling_task',
|
||
data: {
|
||
task_list_id: item.id
|
||
},
|
||
success: res => {
|
||
if (res.status == 1) {
|
||
this.$c.toast({
|
||
title: res.msg,
|
||
duration: 500,
|
||
success: () => {
|
||
this.getData()
|
||
this.tabChange(this.tabCur)
|
||
}
|
||
})
|
||
}
|
||
}
|
||
})
|
||
},
|
||
|
||
getTask() {
|
||
this.req({
|
||
url: 'task_list',
|
||
data: {
|
||
type: this.tabList[this.tabCur].id
|
||
},
|
||
success: res => {
|
||
if (res.status == 1) {
|
||
this.taskList = res.data.task_list
|
||
}
|
||
}
|
||
})
|
||
},
|
||
|
||
getData() {
|
||
this.req({
|
||
url: 'quan_yi',
|
||
data: {},
|
||
Loading: true,
|
||
success: res => {
|
||
if (res.status == 1) {
|
||
this.curLvId = `prize-item${res.data.quan_yi_level.level}`
|
||
|
||
this.pageData = res.data
|
||
}
|
||
}
|
||
})
|
||
},
|
||
|
||
getUserInfo() {
|
||
this.req({
|
||
url: 'user',
|
||
data: {},
|
||
Loading: true,
|
||
success: res => {
|
||
if (res.status == 1) {
|
||
this.userInfo = res.data.userinfo
|
||
}
|
||
}
|
||
})
|
||
},
|
||
|
||
tabChange(i) {
|
||
this.tabCur = i
|
||
|
||
this.getTask()
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.content {
|
||
padding: 30rpx;
|
||
|
||
.user-card {
|
||
margin: 40rpx auto 0;
|
||
width: 710rpx;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
padding: 38rpx 40rpx 48rpx 52rpx;
|
||
background: linear-gradient(138deg, #7C3CCB 7%, #E1C8FF 100%);
|
||
|
||
.avatar {
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
background: #9d9d9d;
|
||
border: 1px solid #cccccc;
|
||
border-radius: 50%;
|
||
overflow: hidden;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.lv {
|
||
font-weight: 700;
|
||
font-size: 68rpx;
|
||
color: #F4C783;
|
||
}
|
||
|
||
.need {
|
||
margin-top: 10rpx;
|
||
font-size: 24rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.progress-buy {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.progress {
|
||
width: 430rpx;
|
||
height: 14rpx;
|
||
|
||
/deep/.cmd-progress-inner {
|
||
background: rgba(255, 255, 255, 0.5);
|
||
}
|
||
}
|
||
}
|
||
|
||
.buy {
|
||
width: 150rpx;
|
||
height: 60rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background: #FFFFFF;
|
||
border-radius: 27rpx;
|
||
|
||
text {
|
||
font-size: 28rpx;
|
||
color: #894DD3;
|
||
}
|
||
}
|
||
|
||
.rule-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 28rpx;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
|
||
.common_bg {}
|
||
|
||
.prize-card {
|
||
margin: 20rpx auto 0;
|
||
width: 690rpx;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
|
||
.mask {
|
||
overflow: auto;
|
||
}
|
||
|
||
.prize-list {
|
||
white-space: nowrap;
|
||
width: calc(100% - 140rpx);
|
||
border-radius: 20rpx;
|
||
height: 460rpx;
|
||
margin-top: -3rpx;
|
||
}
|
||
|
||
.prize-item1{
|
||
display: inline-flex;
|
||
flex-direction: column;
|
||
width: 140rpx;
|
||
height: 100%;
|
||
box-sizing: border-box;
|
||
>view:nth-child(1){
|
||
width: 100%;
|
||
height: 46rpx;
|
||
line-height: 46rpx;
|
||
text-align: center;
|
||
font-size: 24rpx;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
background: #B07AF3;
|
||
}
|
||
>view:nth-child(2){
|
||
width: 100%;
|
||
height: 154rpx;
|
||
font-weight: 400;
|
||
font-size: 36rpx;
|
||
color: #FFFFFF;
|
||
background: #3B3941;
|
||
}
|
||
>view:nth-child(3){
|
||
width: 100%;
|
||
height: 152rpx;
|
||
font-weight: 400;
|
||
font-size: 36rpx;
|
||
color: #F4E1CF;
|
||
background: linear-gradient( 141deg, rgba(255,242,222,0.24) 0%, rgba(249,219,172,0.19) 100%);
|
||
}
|
||
}
|
||
.prize-item {
|
||
display: inline-flex;
|
||
flex-flow: column;
|
||
align-items: center;
|
||
width: 144rpx;
|
||
height: 100%;
|
||
box-sizing: border-box;
|
||
|
||
.lv {
|
||
width: 100%;
|
||
height: 46rpx;
|
||
line-height: 46rpx;
|
||
text-align: center;
|
||
font-size: 24rpx;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
background: #B07AF3;
|
||
}
|
||
|
||
.prize {
|
||
background: #3B3941;
|
||
width: 144rpx;
|
||
height: 154rpx;
|
||
|
||
image {
|
||
width: 86rpx;
|
||
height: 86rpx;
|
||
}
|
||
}
|
||
|
||
.get-btn {
|
||
margin-top: 30rpx;
|
||
width: 104rpx;
|
||
height: 56rpx;
|
||
background: url($imgurl+'common/jixuchou.png') no-repeat 0 0 / 100% 100%;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #7825DE;
|
||
}
|
||
|
||
&.out {
|
||
.prize {
|
||
background: none;
|
||
|
||
image {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
}
|
||
}
|
||
|
||
.line {
|
||
background: none;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.task {
|
||
margin: 30rpx auto 0;
|
||
width: 690rpx;
|
||
background: #313133;
|
||
box-sizing: border-box;
|
||
padding: 0 30rpx 20rpx;
|
||
|
||
.task-tab {
|
||
padding: 30rpx 0;
|
||
|
||
.task-tab-item {
|
||
position: relative;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #FFFFFF;
|
||
|
||
>text{
|
||
width: 140rpx;
|
||
height: 40rpx;
|
||
text-align: center;
|
||
}
|
||
>image{
|
||
width: 39rpx;
|
||
height: 42rpx;
|
||
}
|
||
&.act {
|
||
font-weight: 400;
|
||
font-size: 32rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
}
|
||
|
||
.task-item {
|
||
padding: 20rpx 0;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.task-l {
|
||
.title {
|
||
font-size: 32rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.num {
|
||
margin: 20rpx 0 4rpx;
|
||
font-size: 26rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #cccccc;
|
||
>text{
|
||
color: #B07AF3;
|
||
}
|
||
}
|
||
|
||
.progress {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 24rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #cccccc;
|
||
|
||
.progress-inner {
|
||
width: 300rpx;
|
||
margin-right: 6rpx;
|
||
|
||
/deep/.cmd-progress-inner {
|
||
background: #F0F0F0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.task-r {
|
||
flex: 1;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
padding-left: 30rpx;
|
||
|
||
.btn {
|
||
width: 128rpx;
|
||
height: 60rpx;
|
||
border-radius: 56rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background: rgba(10, 6, 15, 0);
|
||
border-radius: 30rpx;
|
||
border: 1px solid #E830E7;
|
||
|
||
&.act {
|
||
background: #B07AF3;
|
||
border: 0;
|
||
|
||
text {
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
|
||
&.dis {
|
||
background: #D1D1D1;
|
||
text {
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.detail-pop {
|
||
width: 650rpx;
|
||
display: flex;
|
||
flex-flow: column nowrap;
|
||
align-items: center;
|
||
position: relative;
|
||
box-sizing: border-box;
|
||
padding: 1rpx 30rpx 30rpx;
|
||
background: #1F1927;
|
||
border: 2rpx solid #D3AFFF;
|
||
border-radius: 30rpx;
|
||
|
||
.close {
|
||
position: absolute;
|
||
right: 26rpx;
|
||
top: 26rpx;
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
}
|
||
|
||
.icon {}
|
||
|
||
.title {
|
||
margin-top: 50rpx;
|
||
width: 380rpx;
|
||
height: 60rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-family: YouSheBiaoTiHei;
|
||
font-weight: 400;
|
||
font-size: 44rpx;
|
||
color: #FFFFFF;
|
||
|
||
|
||
&.act {
|
||
text {
|
||
font-size: 32rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: transparent;
|
||
|
||
background: linear-gradient(90deg,
|
||
#6adeff 0%,
|
||
#7ab5ff 50%,
|
||
#ff7feb 100%);
|
||
background-clip: text;
|
||
}
|
||
}
|
||
}
|
||
|
||
.common_bg {}
|
||
|
||
.prize-desc {
|
||
margin-top: 40rpx;
|
||
text-align: center;
|
||
|
||
font-size: 24rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #dddddd;
|
||
|
||
view+view {
|
||
margin-top: 10rpx;
|
||
}
|
||
}
|
||
|
||
.jiang-list {
|
||
width: auto;
|
||
max-width: 100%;
|
||
white-space: nowrap;
|
||
margin-top: 40rpx;
|
||
// width: 500rpx;
|
||
|
||
.jiang-item {
|
||
width: 150rpx;
|
||
display: inline-block;
|
||
margin-left: 30rpx;
|
||
|
||
&:first-child {
|
||
margin-left: 0;
|
||
}
|
||
|
||
.pic {
|
||
width: 100%;
|
||
height: 150rpx;
|
||
background: #111111;
|
||
border: 1px solid #666666;
|
||
border-radius: 10rpx;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
position: relative;
|
||
overflow: hidden;
|
||
|
||
image {
|
||
width: 110rpx;
|
||
height: 110rpx;
|
||
}
|
||
|
||
.num {
|
||
padding: 0 14rpx;
|
||
height: 32rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
background: linear-gradient(90deg, #729fdb 0%, #d0dbff 100%);
|
||
position: absolute;
|
||
left: 0;
|
||
bottom: 0;
|
||
z-index: 1;
|
||
border-radius: 0 10rpx 0 10rpx;
|
||
|
||
font-size: 20rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #222222;
|
||
}
|
||
}
|
||
|
||
.item-title {
|
||
width: 100%;
|
||
margin-top: 10rpx;
|
||
text-align: center;
|
||
|
||
font-size: 24rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #dddddd;
|
||
}
|
||
}
|
||
}
|
||
|
||
.border {
|
||
margin-top: 40rpx;
|
||
|
||
width: 570rpx;
|
||
height: 1rpx;
|
||
background: #666666;
|
||
}
|
||
|
||
.detail-list {
|
||
margin-top: 30rpx;
|
||
width: 580rpx;
|
||
max-height: 400rpx;
|
||
|
||
.list-content {
|
||
display: flex;
|
||
flex-flow: row wrap;
|
||
justify-content: space-evenly;
|
||
|
||
.list-item {
|
||
width: 150rpx;
|
||
height: 150rpx;
|
||
background: #111111;
|
||
border: 1px solid #666666;
|
||
border-radius: 10rpx;
|
||
overflow: hidden;
|
||
margin: 0 0 30rpx;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.res-pop {
|
||
width: 100%;
|
||
height: 100vh;
|
||
position: relative;
|
||
background: url($imgurl+'common/yb.png') no-repeat 0 0 / 100% 100%;
|
||
|
||
.res-pop-hd {
|
||
width: 380rpx;
|
||
height: 104rpx;
|
||
background: url($imgurl+'common/gxhd.png') no-repeat 0 0 / 100% 100%;
|
||
}
|
||
&-main{
|
||
width: 750rpx;
|
||
height: 430rpx;
|
||
margin: 40rpx 0 0;
|
||
box-sizing: border-box;
|
||
background: #1F1927;
|
||
>view{
|
||
>view{
|
||
font-weight: 400;
|
||
font-size: 36rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
>image{
|
||
width: 130rpx;
|
||
height: 130rpx;
|
||
}
|
||
>text{
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
}
|
||
&-ft {
|
||
width: 750rpx;
|
||
margin-top: 40rpx;
|
||
|
||
.ft-btn {
|
||
width: 244rpx;
|
||
height: 116rpx;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #7825DE;
|
||
>text{
|
||
margin-top: 36rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |