903 lines
19 KiB
Vue
903 lines
19 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="#000000" 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="avatar">
|
||
<image :src="pageData.user_img" lazy-load mode="aspectFill"></image>
|
||
</view> -->
|
||
<view class="lv">LV.{{ pageData.quan_yi_level.level }}</view>
|
||
|
||
<view class="rule-btn" @click="toRule">
|
||
<uni-icons type="info-filled" color="#8A8A8A"></uni-icons>
|
||
</view>
|
||
|
||
|
||
<view class="" style="position: absolute; top: 90rpx; left: 32rpx;">
|
||
<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">
|
||
<view class="progress">
|
||
<cmd-progress :percent="pageData.quan_yi_level.jindu" :show-info="false"
|
||
stroke-color="#FF862D;" :strokeWidth="5"></cmd-progress>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="buy" @click="$c.to({ type: 3, url: '/pages/shouye/index' })">
|
||
<text>去购买</text>
|
||
</view>
|
||
|
||
</view>
|
||
|
||
<view v-if="pageData" class="prize-card">
|
||
|
||
<view class="mask flex">
|
||
<view class="prize-item1" :key="-1">
|
||
<view class=""></view>
|
||
|
||
<view class="center" style="color: #333333; font-size: 24rpx;">
|
||
普通奖励
|
||
</view>
|
||
|
||
<!-- 高级奖励暂时隐藏 -->
|
||
<!-- <view v-if="hasAnyGaoJiang" class="center" style="color: #333333; font-size: 24rpx;">
|
||
高级奖励
|
||
</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 v-if="hasAnyGaoJiang" class="prize center" @click="preview(item)" style="background: #FFFFFF;">
|
||
<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 }}<text
|
||
class="ml10">({{ item.ywcCount }}/{{ item.number }})</text></view>
|
||
|
||
<view class="num">欧气值
|
||
<text>+{{ item.zNumber }}</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>
|
||
</view> -->
|
||
</view>
|
||
|
||
<view class="task-r">
|
||
<view v-if="item.isComplete == 0" class="btn act" @click="toPage(item.id)">
|
||
<text>去完成</text>
|
||
</view>
|
||
|
||
<view v-if="item.isComplete == 1" class="btn" style="background-color: #333333; color: #D8FD24;"
|
||
@click="completeTask(item)">
|
||
<text>待领取</text>
|
||
</view>
|
||
|
||
<view v-if="item.isComplete == 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="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>
|
||
<view class="close icon" @click="$refs.detailPop.close()">
|
||
<image :src="$img('/static/common/close.png')" lazy-load></image>
|
||
</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 align-center" :style="{
|
||
backgroundImage: `url(${$img1('common/jixuchou.png')})`
|
||
}" @click="$refs.resPop.close()">
|
||
<text>确定</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { getEquity, receiveEquity, getTaskList, receiveTaskReward, getUser } from '@/common/server/user.js';
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
tabList: [{
|
||
id: 1,
|
||
title: '每日任务'
|
||
},
|
||
{
|
||
id: 2,
|
||
title: '每周任务'
|
||
}
|
||
],
|
||
tabCur: 0,
|
||
pageData: '',
|
||
taskList: [],
|
||
curLvId: '',
|
||
previewData: '',
|
||
prizeRes: ''
|
||
}
|
||
},
|
||
|
||
computed: {
|
||
// 判断是否有任何等级配置了高级奖励
|
||
hasAnyGaoJiang() {
|
||
if (!this.pageData || !this.pageData.level_list) return false;
|
||
return this.pageData.level_list.some(item => item.gao_jiang && item.gao_jiang.length > 0);
|
||
}
|
||
},
|
||
|
||
onLoad(options) {
|
||
this.getData()
|
||
this.tabChange(this.tabCur)
|
||
},
|
||
|
||
onReady() {
|
||
},
|
||
|
||
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()
|
||
},
|
||
|
||
async doReceive(item) {
|
||
try {
|
||
const res = await receiveEquity(item.id);
|
||
if (res.status == 1) {
|
||
this.prizeRes = res.data
|
||
|
||
this.$refs.resPop.open()
|
||
|
||
this.getData()
|
||
}
|
||
} catch (error) {
|
||
console.error('领取权益失败:', error);
|
||
}
|
||
},
|
||
|
||
async completeTask(item) {
|
||
try {
|
||
const res = await receiveTaskReward(item.id);
|
||
if (res.status == 1) {
|
||
this.$c.toast({
|
||
title: res.msg,
|
||
duration: 500,
|
||
success: () => {
|
||
this.getData()
|
||
this.tabChange(this.tabCur)
|
||
}
|
||
})
|
||
}
|
||
} catch (error) {
|
||
console.error('领取任务奖励失败:', error);
|
||
}
|
||
},
|
||
|
||
async getTask() {
|
||
try {
|
||
const res = await getTaskList(this.tabList[this.tabCur].id);
|
||
if (res.status == 1) {
|
||
this.taskList = res.data.taskList
|
||
}
|
||
} catch (error) {
|
||
console.error('获取任务列表失败:', error);
|
||
}
|
||
},
|
||
|
||
async getData() {
|
||
try {
|
||
const res = await getEquity();
|
||
console.log('[equity] API响应:', JSON.stringify(res.data?.quan_yi_level));
|
||
if (res.status == 1) {
|
||
const qyLevel = res.data.quan_yi_level;
|
||
console.log('[equity] 等级信息:', {
|
||
level: qyLevel.level,
|
||
ou_qi: qyLevel.ou_qi,
|
||
next_ou_qi: qyLevel.next_ou_qi,
|
||
cha: qyLevel.cha,
|
||
jindu: qyLevel.jindu
|
||
});
|
||
this.curLvId = `prize-item${qyLevel.level}`
|
||
this.pageData = res.data
|
||
}
|
||
} catch (error) {
|
||
console.error('获取权益信息失败:', error);
|
||
}
|
||
},
|
||
|
||
async getUserInfo() {
|
||
try {
|
||
const res = await getUser();
|
||
if (res.status == 1) {
|
||
this.userInfo = res.data.userinfo
|
||
}
|
||
} catch (error) {
|
||
console.error('获取用户信息失败:', error);
|
||
}
|
||
},
|
||
|
||
tabChange(i) {
|
||
this.tabCur = i
|
||
|
||
this.getTask()
|
||
},
|
||
|
||
//跳转页面
|
||
toPage(id) {
|
||
if (id == 1) {
|
||
this.$c.to({
|
||
url: '/pages/user/tui-guang'
|
||
})
|
||
} else {
|
||
this.$c.to({
|
||
type: 3,
|
||
url: '/pages/shouye/index'
|
||
})
|
||
}
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.content {
|
||
padding: 30rpx;
|
||
background: linear-gradient(180deg, #5FCDFF 0%, #F5F5F5 100%);
|
||
min-height: 100vh;
|
||
|
||
.user-card {
|
||
margin: 40rpx auto 0;
|
||
width: 686rpx;
|
||
height: 150rpx;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
padding: 38rpx 40rpx 48rpx 52rpx;
|
||
background: #FFFFFF;
|
||
|
||
.avatar {
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
background: #9d9d9d;
|
||
border: 1px solid #cccccc;
|
||
border-radius: 50%;
|
||
overflow: hidden;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.lv {
|
||
position: absolute;
|
||
left: 32rpx;
|
||
top: 24rpx;
|
||
font-weight: 700;
|
||
font-size: 48rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
.need {
|
||
margin-top: 10rpx;
|
||
font-size: 16rpx;
|
||
font-weight: 400;
|
||
color: #4C4C4C;
|
||
}
|
||
|
||
.progress-buy {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-top: 8rpx;
|
||
|
||
.progress {
|
||
width: 430rpx;
|
||
height: 14rpx;
|
||
|
||
::v-deep.cmd-progress-inner {
|
||
background: #CCCCCC;
|
||
}
|
||
}
|
||
}
|
||
|
||
.buy {
|
||
position: absolute;
|
||
top: 48rpx;
|
||
right: 32rpx;
|
||
width: 150rpx;
|
||
height: 60rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background: #03D8F4;
|
||
border-radius: 16rpx;
|
||
|
||
text {
|
||
font-size: 20rpx;
|
||
color: #404040;
|
||
}
|
||
}
|
||
|
||
.rule-btn {
|
||
position: absolute;
|
||
left: 142rpx;
|
||
top: 36rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 28rpx;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
|
||
.common_bg {}
|
||
|
||
.prize-card {
|
||
margin: 20rpx auto 0;
|
||
width: 686rpx;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
background-color: #FFFFFF;
|
||
border-radius: 16rpx;
|
||
|
||
.mask {
|
||
overflow: auto;
|
||
}
|
||
|
||
.prize-list {
|
||
white-space: nowrap;
|
||
width: calc(100% - 140rpx);
|
||
border-radius: 20rpx;
|
||
height: 280rpx;
|
||
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;
|
||
}
|
||
|
||
>view:nth-child(2) {
|
||
width: 100%;
|
||
height: 154rpx;
|
||
font-weight: 400;
|
||
font-size: 36rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
>view:nth-child(3) {
|
||
width: 100%;
|
||
height: 152rpx;
|
||
font-weight: 400;
|
||
font-size: 36rpx;
|
||
color: #F4E1CF;
|
||
}
|
||
}
|
||
|
||
.prize-item {
|
||
display: inline-flex;
|
||
flex-flow: column;
|
||
align-items: center;
|
||
width: 144rpx;
|
||
height: 100%;
|
||
box-sizing: border-box;
|
||
// background-color: #FFFFFF;
|
||
|
||
.lv {
|
||
width: 100%;
|
||
height: 46rpx;
|
||
line-height: 46rpx;
|
||
text-align: center;
|
||
font-size: 24rpx;
|
||
font-weight: 400;
|
||
color: #4C4C4C;
|
||
}
|
||
|
||
.prize {
|
||
background: #FFFFFF;
|
||
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: #333333;
|
||
}
|
||
|
||
&.out {
|
||
.prize {
|
||
background: none;
|
||
|
||
image {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
}
|
||
}
|
||
|
||
.line {
|
||
background: none;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.task {
|
||
margin: 30rpx auto 0;
|
||
width: 690rpx;
|
||
background: #FFFFFF;
|
||
box-sizing: border-box;
|
||
padding: 0 30rpx 20rpx;
|
||
border-radius: 16rpx;
|
||
|
||
.task-tab {
|
||
padding: 30rpx 0;
|
||
|
||
.task-tab-item {
|
||
position: relative;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #8A8A8A;
|
||
|
||
>text {
|
||
width: 140rpx;
|
||
height: 60rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
>image {
|
||
width: 39rpx;
|
||
height: 42rpx;
|
||
}
|
||
|
||
&.act {
|
||
font-weight: 400;
|
||
color: #333333;
|
||
|
||
&::before {
|
||
content: '';
|
||
display: block;
|
||
width: 32rpx;
|
||
height: 4rpx;
|
||
background: #333333;
|
||
border-radius: 30rpx;
|
||
position: absolute;
|
||
left: 50%;
|
||
bottom: 4rpx;
|
||
transform: translateX(-50%);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.task-item {
|
||
padding: 20rpx 0;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.task-l {
|
||
.title {
|
||
font-size: 24rpx;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
}
|
||
|
||
.num {
|
||
margin: 20rpx 0 4rpx;
|
||
font-size: 20rpx;
|
||
font-weight: 400;
|
||
color: #8A8A8A;
|
||
|
||
}
|
||
|
||
.progress {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 24rpx;
|
||
font-weight: 400;
|
||
color: #cccccc;
|
||
|
||
.progress-inner {
|
||
width: 300rpx;
|
||
margin-right: 6rpx;
|
||
|
||
::v-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;
|
||
font-size: 24rpx;
|
||
background: rgba(10, 6, 15, 0);
|
||
border-radius: 16rpx;
|
||
|
||
&.act {
|
||
background: #E6F791;
|
||
border: 0;
|
||
|
||
text {
|
||
font-weight: 400;
|
||
color: #333333;
|
||
}
|
||
}
|
||
|
||
&.dis {
|
||
background: #D1D1D1;
|
||
|
||
text {
|
||
color: #999999;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.close {
|
||
position: absolute;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
bottom: -86rpx;
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
}
|
||
|
||
.detail-pop {
|
||
width: 650rpx;
|
||
display: flex;
|
||
flex-flow: column nowrap;
|
||
align-items: center;
|
||
position: relative;
|
||
box-sizing: border-box;
|
||
padding: 1rpx 30rpx 30rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 30rpx;
|
||
|
||
|
||
|
||
.icon {}
|
||
|
||
.title {
|
||
margin-top: 50rpx;
|
||
width: 380rpx;
|
||
height: 60rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-weight: 600;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
|
||
|
||
&.act {
|
||
text {
|
||
font-size: 32rpx;
|
||
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: 20rpx;
|
||
font-weight: 500;
|
||
color: #8A8A8A;
|
||
|
||
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: #FFF1AF;
|
||
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-weight: 400;
|
||
color: #222222;
|
||
}
|
||
}
|
||
|
||
.item-title {
|
||
width: 100%;
|
||
margin-top: 10rpx;
|
||
text-align: center;
|
||
font-size: 20rpx;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
}
|
||
}
|
||
}
|
||
|
||
.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;
|
||
|
||
.res-pop-hd {
|
||
width: 380rpx;
|
||
height: 104rpx;
|
||
background: url($imgurl+'common/gxhd.png') no-repeat 0 0 / 100% 100%;
|
||
}
|
||
|
||
&-main {
|
||
width: 660rpx;
|
||
height: 430rpx;
|
||
margin: 40rpx 0 0;
|
||
box-sizing: border-box;
|
||
background: #FFFFFF;
|
||
border-radius: 16rpx;
|
||
|
||
>view {
|
||
>view {
|
||
font-weight: 400;
|
||
font-size: 36rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
>image {
|
||
width: 130rpx;
|
||
height: 130rpx;
|
||
}
|
||
|
||
>text {
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #333333;
|
||
}
|
||
}
|
||
}
|
||
|
||
&-ft {
|
||
width: 750rpx;
|
||
margin-top: 40rpx;
|
||
|
||
.ft-btn {
|
||
width: 220rpx;
|
||
height: 72rpx;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #333333;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |