You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
843 lines
18 KiB
843 lines
18 KiB
<template>
|
|
<view>
|
|
<view class="bkg">
|
|
<view class="top">
|
|
<svg xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 750 320"
|
|
preserveAspectRatio="xMinYMin meet">
|
|
<defs>
|
|
<linearGradient id="bkg-color" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" style="stop-color: rgb(222, 89, 75);" />
|
|
<stop offset="100%" style="stop-color:rgb(185,48,40);" />
|
|
</linearGradient>
|
|
<linearGradient id="bkg-cir" x1="44%" y1="0%" x2="56%" y2="100%">
|
|
<stop offset="0%" style="stop-color: rgb(231,145,141, 0.3);" />
|
|
<stop offset="60%" style="stop-color:rgb(185, 48, 40, 0);" />
|
|
</linearGradient>
|
|
</defs>
|
|
<path d="m 0 0 L 0 254 C 264 172 ,460 454, 750 200 L 750 0 z" fill="url(#bkg-color)"></path>
|
|
<circle r="118" cx="536" cy="238" fill="url(#bkg-cir)"></circle>
|
|
</svg>
|
|
</view>
|
|
|
|
<img class="stage" :src="stage" alt="">
|
|
<img class="grass1" :src="grass1" alt="">
|
|
<img class="grass2" :src="grass2" alt="">
|
|
<img class="cloud1" :src="cloud1" alt="">
|
|
<img class="cloud2" :src="cloud2" alt="">
|
|
<img class="shuibaxian" :src="shuibaxian" alt="">
|
|
</view>
|
|
|
|
<view class="container">
|
|
<view class="user-info">
|
|
<view class="user-info-avatar">
|
|
<img class="avatar" :src="userInfo.headimgurl ? userInfo.headimgurl : logo" alt="">
|
|
|
|
</view>
|
|
|
|
<view class="user-info__text">
|
|
<view class="name">
|
|
{{ userInfo.name || 'xx' }}
|
|
</view>
|
|
<view class="club">
|
|
{{ userInfo.study_audio_department ? userInfo.study_audio_department.name : '' }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="panel1">
|
|
<view class="left">
|
|
<view class="num">{{answercount}}</view>
|
|
<view class="text">已答次数</view>
|
|
</view>
|
|
<view class="right">
|
|
<view class="num">{{ userInfo.score || 0 }}</view>
|
|
<view class="text">最高得分</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="panel2">
|
|
<view class="top">
|
|
<view @click="toanswer">
|
|
<img :src="pencil" alt="">
|
|
<view class="text">参与答题</view>
|
|
</view>
|
|
<view @click='torecord'>
|
|
<img :src="record" alt="">
|
|
<view class="text">答题记录</view>
|
|
</view>
|
|
<view @click="toCer">
|
|
<img :src="collect" alt="">
|
|
<view class="text">我的证书</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="bottom">
|
|
<view class="row" @click="showtips=true">
|
|
<u-icon name="info-circle-fill" color="#de242f" size="40rpx"></u-icon>
|
|
<view class="text">活动须知</view>
|
|
<u-icon name="arrow-right" color="#333" size="38rpx"></u-icon>
|
|
</view>
|
|
<view class="row">
|
|
<u-icon name="gift-fill" :color="open_win?'#de242f':'#999999'" size="40rpx"></u-icon>
|
|
<view class="text">中奖情况</view>
|
|
<text v-if="open_win" @click='openWins'>查看</text>
|
|
<text v-else>暂未开始</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 未获得证书 -->
|
|
<view class="norecord tips" v-if="showRecord">
|
|
<view class="tipwrap">
|
|
<view class='tiptop'>
|
|
</view>
|
|
<view class="tipicon"></view>
|
|
<view class="tiptitle">
|
|
<u-image :fade="false" :src="norecordtitle" width="318rpx" height="32rpx"></u-image>
|
|
</view>
|
|
<view class="tipcenter">
|
|
<view>得分<span>100</span>分的可获得“优秀之星”证书</view>
|
|
<view>您还有<span>{{maxCount-answercount}}</span>次答题机会<text v-if="maxCount-answercount>0">，加油吧！</text></view>
|
|
</view>
|
|
<view class="answerBtn">
|
|
<view v-if="maxCount-answercount>0" @click="toanswer">去答题</view>
|
|
<view :style="maxCount-answercount<1?'width:45%':''" @click="showRecord=false">知道了</view>
|
|
</view>
|
|
<view class="tipbottom"></view>
|
|
</view>
|
|
</view>
|
|
<!-- 未获得奖品 -->
|
|
<view class="nowin tips" v-if="showNowin">
|
|
<view class="tipwrap">
|
|
<view class='tiptop'>
|
|
</view>
|
|
<view class="tipicon"></view>
|
|
<view class="tiptitle">
|
|
<u-image :fade="false" :src="nowintitle" width="254rpx" height="32rpx"></u-image>
|
|
</view>
|
|
<view class="tipcenter">
|
|
<view style="padding-top:60rpx">
|
|
感谢您的参与！
|
|
</view>
|
|
</view>
|
|
<view class="answerBtn">
|
|
<view style="width:45%" @click="showNowin=false">知道了</view>
|
|
</view>
|
|
<view class="tipbottom"></view>
|
|
</view>
|
|
</view>
|
|
<!-- <view class="norecord nowin" v-if="showNowin">
|
|
<view class="norecordwrap nowinwrap">
|
|
<view class="norecordtip nowintip">
|
|
感谢您的参与！
|
|
</view>
|
|
<view class="answerBtn">
|
|
<view style="width:30%" @click="showNowin=false">知道了</view>
|
|
</view>
|
|
</view>
|
|
</view> -->
|
|
<!-- 获得奖品 -->
|
|
<view class="win tips" v-if="showwin">
|
|
<view class="tipwrap">
|
|
<view class='tiptop'>
|
|
</view>
|
|
<view class="tipicon"></view>
|
|
<view class="tiptitle">
|
|
<u-image :fade="false" :src="wintitle" width="222rpx" height="32rpx"></u-image>
|
|
</view>
|
|
<view class="tipcenter">
|
|
<!-- <view class="winimg">
|
|
<u-image :fade="false" :src="winimg" width="100rpx" height="100rpx"></u-image>
|
|
</view> -->
|
|
<view class="norecordtip wintip">
|
|
<view>{{userInfo.company_name?userInfo.company_name:''}}</view>
|
|
<view>请保持通话畅通，工作人员会与您联系</view>
|
|
|
|
</view>
|
|
</view>
|
|
<view class="answerBtn">
|
|
<view style="width:45%" @click="showwin=false">知道了</view>
|
|
</view>
|
|
<view class="tipbottom"></view>
|
|
</view>
|
|
</view>
|
|
<!-- <view class="norecord win" v-if="showwin">
|
|
<view class="norecordwrap winwrap">
|
|
<view class="winimg">
|
|
<u-image :fade="false" :src="winimg" width="100rpx" height="100rpx"></u-image>
|
|
</view>
|
|
<view class="norecordtip wintip">
|
|
请保持通话畅通，工作人员会与您联系
|
|
</view>
|
|
<view class="answerBtn">
|
|
<view style="width:45%" @click="showwin=false">知道了</view>
|
|
</view>
|
|
</view>
|
|
</view> -->
|
|
<!-- 活动须知 -->
|
|
<view class="norecord tips" v-if="showtips">
|
|
<view class="tipwrap">
|
|
<view class='tiptop'>
|
|
</view>
|
|
<view class="tipicon"></view>
|
|
<view class="tiptitle">
|
|
<u-image :fade="false" :src="tiptitle" width="125rpx" height="30rpx"></u-image>
|
|
</view>
|
|
<view class="tipcenter" style="text-align: left;">
|
|
<view>
|
|
<view v-html="active_tip"></view>
|
|
</view>
|
|
</view>
|
|
<view class="answerBtn">
|
|
<view style="width:30%" @click="showtips=false">知道了</view>
|
|
</view>
|
|
<view class="tipbottom"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
src: "http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg",
|
|
stage:require("../../static/me/bkg-back.png"),
|
|
grass1:require("../../static/me/grass1.png"),
|
|
grass2:require("../../static/me/grass2.png"),
|
|
cloud1:require("../../static/me/cloud1.png"),
|
|
cloud2:require("../../static/me/cloud2.png"),
|
|
shuibaxian:require("../../static/me/shuibaxian.png"),
|
|
logo:require("../../static/headimg.png"),
|
|
pencil:require("../../static/me/pencil.png"),
|
|
record:require("../../static/me/record.png"),
|
|
collect:require("../../static/me/collect.png"),
|
|
norecordtitle:require("../../static/norecordtitle.png"),
|
|
nowintitle:require("../../static/nowintitle.png"),
|
|
wintitle:require("../../static/wintitle.png"),
|
|
userInfo: {},
|
|
answercount:0,
|
|
showRecord:false,
|
|
showNowin:false,
|
|
showwin:false,
|
|
showtips:false,
|
|
winimg:require('../../static/index/logo2.png'),
|
|
tiptitle:require('../../static/tiptitle.png'),
|
|
isEnd:true,
|
|
active_tip:'',
|
|
maxCount:2,
|
|
open_win:false,
|
|
};
|
|
},
|
|
methods: {
|
|
openWins(){
|
|
if(this.userInfo.pid===1){
|
|
this.showwin = true
|
|
}else{
|
|
this.showNowin = true
|
|
}
|
|
|
|
},
|
|
toanswer(){
|
|
if(!this.isEnd){
|
|
this.util.toast("请在规定时间内进行答题")
|
|
return
|
|
}
|
|
if(this.answercount>=this.maxCount){
|
|
this.util.toast(`每人只有${this.maxCount}次答题机会`)
|
|
return
|
|
}else{
|
|
uni.navigateTo({
|
|
url:'/pages/answer/index'
|
|
})
|
|
}
|
|
},
|
|
torecord(){
|
|
if(this.answercount==0){
|
|
this.util.toast("您还未答题")
|
|
return
|
|
}else{
|
|
uni.navigateTo({
|
|
url:'/pages/record/index'
|
|
})
|
|
}
|
|
},
|
|
toCer(){
|
|
if(this.answercount==0){
|
|
this.util.toast("您还未答题")
|
|
return
|
|
}else{
|
|
if(this.userInfo.score===0||this.userInfo.score<100){
|
|
this.showRecord = true
|
|
}else{
|
|
uni.navigateTo({
|
|
url:'/pages/certificate/certificate'
|
|
})
|
|
}
|
|
|
|
}
|
|
},
|
|
getUserInfo () {
|
|
let that = this
|
|
this.util.request({
|
|
api: '/api/mobile/user/show',
|
|
method: 'GET',
|
|
utilSuccess: (res) => {
|
|
console.log(res)
|
|
that.userInfo = res;
|
|
uni.setStorageSync("userInfo",res)
|
|
if(that.util.isNull(res.mobile)){
|
|
uni.redirectTo({
|
|
url : '/pages/index/index'
|
|
})
|
|
}
|
|
},
|
|
utilFail: (res) => {
|
|
this.util.toast(res)
|
|
// uni.clearStorageSync()
|
|
// uni.redirectTo({
|
|
// url : '/pages/index/index'
|
|
// })
|
|
}
|
|
})
|
|
},
|
|
getQuestion(){
|
|
let that = this
|
|
this.util.request({
|
|
api: '/api/mobile/quiz/get-questions',
|
|
data: {
|
|
activity_tag:'bbfc'
|
|
},
|
|
method: 'GET',
|
|
utilSuccess: function(res) {
|
|
that.answercount = res.ask_count
|
|
|
|
},
|
|
utilFail: function(res) {
|
|
that.util.toast(res)
|
|
}
|
|
})
|
|
},
|
|
},
|
|
onLoad() {
|
|
this.getUserInfo()
|
|
this.getQuestion()
|
|
this.isEnd = uni.getStorageSync('isEnd')
|
|
this.active_tip = uni.getStorageSync('active_tip')
|
|
// this.open_win = true
|
|
let configs = uni.getStorageSync("activeConfig")?uni.getStorageSync("activeConfig").config:[]
|
|
configs.map(item=>{
|
|
if(item.key=='answer_total'){
|
|
this.maxCount = parseInt(item.value)
|
|
}
|
|
if(item.key=='open_win'){
|
|
this.open_win = item.value==1?true:false
|
|
}
|
|
})
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.bkg {
|
|
background: #fdf5f5;
|
|
z-index: 0;
|
|
position: fixed;
|
|
// inset: 0 0 0 0;
|
|
top:0;
|
|
left:0;
|
|
height: 100%;
|
|
.top {
|
|
height: 30vh;
|
|
width: 100%;
|
|
|
|
svg {
|
|
height: 100%;
|
|
}
|
|
}
|
|
.stage {
|
|
width: 100vw;
|
|
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
}
|
|
.grass1 {
|
|
width: 110rpx;
|
|
object-fit: contain;
|
|
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
}
|
|
.grass2 {
|
|
width: 110rpx;
|
|
object-fit: contain;
|
|
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
}
|
|
.cloud1 {
|
|
width: 92rpx;
|
|
object-fit: contain;
|
|
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 407rpx;
|
|
}
|
|
.cloud2 {
|
|
width: 78rpx;
|
|
object-fit: contain;
|
|
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 304rpx;
|
|
}
|
|
.shuibaxian {
|
|
width: 86vw;
|
|
object-fit: cover;
|
|
|
|
position: absolute;
|
|
bottom: 50rpx;
|
|
left: 7vw;
|
|
}
|
|
}
|
|
// .norecord{
|
|
// position: absolute;
|
|
// top:0;
|
|
// left:0;
|
|
// width:100%;
|
|
// height:100%;
|
|
// background-color: rgba(0,0,0,0.7);
|
|
// z-index:9;
|
|
// .norecordwrap{
|
|
// background: url(../../static/norecord.png);
|
|
// width:483rpx;
|
|
// height:602rpx;
|
|
// background-size: 100% 100%;
|
|
// font-size: 28rpx;
|
|
// position: absolute;
|
|
// top:50%;
|
|
// left:50%;
|
|
// transform: translate(-50%,-50%);
|
|
// .norecordtip{
|
|
// line-height: 1.8;
|
|
// text-align: center;
|
|
// position: absolute;
|
|
// top: 270rpx;
|
|
// width: 100%;
|
|
// font-size: 28rpx;
|
|
// & span{
|
|
// color:#d22425
|
|
// }
|
|
// }
|
|
// .answerBtn{
|
|
// text-align: center;
|
|
// position: absolute;
|
|
// top: 390rpx;
|
|
// left: 0rpx;
|
|
// width:100%;
|
|
// text-align: center;
|
|
// & > view{
|
|
// color:#333;
|
|
// padding:10rpx 40rpx;
|
|
// margin:10rpx;
|
|
// font-size: 28rpx;
|
|
// border-radius: 5rpx;
|
|
// display: inline-block;
|
|
// background-color: #fff;
|
|
// box-shadow: 1rpx 7rpx 18rpx 0rpx rgba(235,107,85,0.78);
|
|
// border-radius: 5rpx 5rpx 5rpx 5rpx;
|
|
// }
|
|
// & > view:last-child{
|
|
// color:#fff;
|
|
// background: linear-gradient(90deg, #E73928, #F07963);
|
|
// }
|
|
|
|
// }
|
|
// }
|
|
// }
|
|
// .nowin{
|
|
// .nowinwrap{
|
|
// background: url(../../static/nowin.png);
|
|
// width:483rpx;
|
|
// height:643rpx;
|
|
// background-size: 100% 100%;
|
|
// .tipwrap{
|
|
|
|
// .nowintip{
|
|
// top:320rpx;
|
|
// }
|
|
// .answerBtn{
|
|
// top:420rpx
|
|
// }
|
|
// }
|
|
|
|
// }
|
|
// }
|
|
// .win{
|
|
// .winwrap{
|
|
// background: url(../../static/win.png);
|
|
// width:483rpx;
|
|
// height:587rpx;
|
|
// background-size: 100% 100%;
|
|
// .winimg{
|
|
// position: absolute;
|
|
// width: 100%;
|
|
// text-align: center;
|
|
// top: 240rpx;
|
|
// ::v-deep .u-image{
|
|
// margin:0 auto;
|
|
// }
|
|
// }
|
|
// .wintip{
|
|
// top:350rpx;
|
|
// }
|
|
// .answerBtn{
|
|
// top:400rpx
|
|
// }
|
|
// }
|
|
// }
|
|
.tips{
|
|
position: absolute;
|
|
top:0;
|
|
left:0;
|
|
width:100%;
|
|
height:100%;
|
|
background-color: rgba(0,0,0,0.7);
|
|
z-index:9;
|
|
.tipwrap{
|
|
width:83%;
|
|
// background: #fff;
|
|
font-size: 28rpx;
|
|
position: absolute;
|
|
top:50%;
|
|
left:50%;
|
|
transform: translate(-50%,-50%);
|
|
.tiptitle{
|
|
width:100%;
|
|
text-align: center;
|
|
margin-top:-40rpx;
|
|
::v-deep .u-image{
|
|
margin:0 auto
|
|
}
|
|
}
|
|
.tiptop{
|
|
background: url(../../static/tiptop.png);
|
|
background-size: 100% 100%;
|
|
width:100%;
|
|
height:180rpx;
|
|
}
|
|
.tipicon{
|
|
background: url(../../static/tipicon.png);
|
|
background-size: 100% 100%;
|
|
width:112rpx;
|
|
height:157rpx;
|
|
position: absolute;
|
|
top: -40rpx;
|
|
left: 260rpx;
|
|
}
|
|
.tipcenter{
|
|
background-color: #fff;
|
|
min-height:200rpx;
|
|
line-height: 1.8;
|
|
width: 100%;
|
|
box-sizing: content-box;
|
|
margin-top:-5rpx;
|
|
padding-top:40rpx;
|
|
text-align: left;
|
|
& > view{
|
|
padding: 20px;
|
|
padding-bottom:0;
|
|
}
|
|
}
|
|
.tipbottom{
|
|
background: url(../../static/tipbottom.png);
|
|
background-size: 100% 100%;
|
|
width:100%;
|
|
height:130rpx;
|
|
margin-top:-5rpx;
|
|
// position: absolute;
|
|
// bottom:0;
|
|
// left:0;
|
|
}
|
|
.answerBtn{
|
|
text-align: center;
|
|
padding-bottom:40rpx;
|
|
background-color: #fff;
|
|
width:100%;
|
|
text-align: center;
|
|
margin-top: -5rpx;
|
|
padding-top: 40rpx;
|
|
position: relative;
|
|
top:0;
|
|
left:0;
|
|
& > view{
|
|
box-shadow: 1rpx 7rpx 18rpx 0rpx rgba(235,107,85,0.3);
|
|
color:#333;
|
|
padding:16rpx 70rpx;
|
|
margin:10rpx;
|
|
font-size: 28rpx;
|
|
border-radius: 10rpx;
|
|
display: inline-block;
|
|
|
|
}
|
|
& > view:last-child{
|
|
color:#fff;
|
|
background: linear-gradient(90deg, #E73928, #F07963);
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
.norecord{
|
|
.tipwrap{
|
|
.tipicon{
|
|
background: url(../../static/tipicon.png);
|
|
background-size: 100% 100%;
|
|
width:112rpx;
|
|
height:157rpx;
|
|
position: absolute;
|
|
top: -60rpx;
|
|
left: 260rpx;
|
|
}
|
|
.tiptitle{
|
|
margin-top:-10rpx;
|
|
background-color: #fff;
|
|
}
|
|
.tipcenter{
|
|
text-align: center;
|
|
min-height:120rpx;
|
|
& >view:last-child{
|
|
padding-top:0;
|
|
|
|
}
|
|
& span{
|
|
color:#E73928
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
.nowin{
|
|
.tipwrap{
|
|
|
|
.tipicon{
|
|
background: url(../../static/nowinicon.png);
|
|
background-size: 100% 100%;
|
|
width:103rpx;
|
|
height:200rpx;
|
|
position: absolute;
|
|
top: -80rpx;
|
|
left: 240rpx;
|
|
}
|
|
.tiptitle{
|
|
margin-top:-10rpx;
|
|
background-color: #fff;
|
|
}
|
|
.tipcenter{
|
|
text-align: center;
|
|
min-height:120rpx;
|
|
}
|
|
}
|
|
|
|
}
|
|
.win{
|
|
.tipwrap{
|
|
.tipicon{
|
|
background: url(../../static/winicon.png);
|
|
background-size: 100% 100%;
|
|
width:175rpx;
|
|
height:141rpx;
|
|
position: absolute;
|
|
top: -40rpx;
|
|
left: 230rpx;
|
|
}
|
|
.tiptitle{
|
|
margin-top:-10rpx;
|
|
background-color: #fff;
|
|
|
|
}
|
|
.tipcenter{
|
|
text-align: center;
|
|
min-height:120rpx;
|
|
::v-deep .u-image{
|
|
margin:0 auto;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.container {
|
|
|
|
position: relative;
|
|
z-index: 1;
|
|
|
|
.user-info {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 82rpx 0 0 54rpx;
|
|
.user-info-avatar{
|
|
width: 121rpx;
|
|
height: 121rpx;
|
|
border-radius: 100%;
|
|
// object-fit: contain;
|
|
// border: 1rpx solid #fff;
|
|
// box-sizing: border-box;
|
|
}
|
|
.avatar {
|
|
width: 121rpx;
|
|
height: 121rpx;
|
|
border-radius: 100%;
|
|
// object-fit: contain;
|
|
// border: 1rpx solid #fff;
|
|
// box-sizing: border-box;
|
|
}
|
|
&__text {
|
|
color: #fff;
|
|
|
|
margin-left: 32rpx;
|
|
.name {
|
|
font-size: 36rpx;
|
|
font-weight: 500;
|
|
word-break: keep-all;
|
|
line-height: 42rpx;
|
|
}
|
|
.club {
|
|
font-size: 26rpx;
|
|
font-weight: 400;
|
|
|
|
margin-top: 13rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin panel {
|
|
width: 658rpx;
|
|
background: #fff;
|
|
box-sizing: border-box;
|
|
border-radius: 40rpx;
|
|
filter: drop-shadow(0 0 7.5px rgba(226,54,50,0.1));
|
|
margin: auto;
|
|
|
|
.num {
|
|
font-size: 52rpx;
|
|
text-transform: uppercase;
|
|
color: #ff0000;
|
|
font-weight: bold;
|
|
}
|
|
.text {
|
|
font-size: 28rpx;
|
|
text-transform: uppercase;
|
|
color: #666666;
|
|
}
|
|
}
|
|
|
|
.panel1 {
|
|
@include panel;
|
|
|
|
height: 164rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 73rpx auto 0 auto;
|
|
& > view {
|
|
flex: 1;
|
|
text-align: center;
|
|
|
|
&:nth-child(1) {
|
|
|
|
position: relative;
|
|
|
|
&::after {
|
|
content: "";
|
|
height: 91rpx;
|
|
width: 2rpx;
|
|
background: #989898;
|
|
opacity: 0.302;
|
|
transform: translateY(-50%);
|
|
|
|
position: absolute;
|
|
right: 0;
|
|
top: 50%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.panel2 {
|
|
@include panel;
|
|
height: 689rpx;
|
|
|
|
margin-top: 30rpx;
|
|
padding: 0 46rpx 0 42rpx;
|
|
.top {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
padding-top: 50rpx;
|
|
padding-bottom: 46rpx;
|
|
position: relative;
|
|
& > view {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
img {
|
|
height: 60rpx;
|
|
object-fit: contain;
|
|
|
|
margin-bottom: 24rpx;
|
|
}
|
|
}
|
|
&::after {
|
|
content: "";
|
|
background: #989898;
|
|
opacity: 0.302;
|
|
height: 2rpx;
|
|
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
}
|
|
|
|
.bottom {
|
|
|
|
.row {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
padding: 34rpx 4rpx 34rpx 23rpx;
|
|
position: relative;
|
|
|
|
&::after {
|
|
content: "";
|
|
height: 2rpx;
|
|
background: #989898;
|
|
opacity: 0.302;
|
|
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
.text {
|
|
flex: 1;
|
|
|
|
padding-left: 20rpx;
|
|
}
|
|
text {
|
|
font-size: 28rpx;
|
|
text-transform: uppercase;
|
|
color: #666666;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|