|
|
|
|
<template>
|
|
|
|
|
<view class="index-pers">
|
|
|
|
|
<view class="index-pers-content">
|
|
|
|
|
<view class="index-pers-title font-family-TMB">
|
|
|
|
|
洞察隐患 智能守护
|
|
|
|
|
</view>
|
|
|
|
|
<view class="index-pers-desc font-family-SR">
|
|
|
|
|
科技之眼照亮安全之路
|
|
|
|
|
</view>
|
|
|
|
|
<view class="index-pers-pc index-pers-content" v-if="curLogin === 1">
|
|
|
|
|
<view class="left-content" @click="handleToTab('Investigated')">
|
|
|
|
|
<view class="left-content-label font-family-SM">
|
|
|
|
|
待排查
|
|
|
|
|
</view>
|
|
|
|
|
<view class="left-content-value font-family-ASB">
|
|
|
|
|
{{pageData.Investigated || 0}}
|
|
|
|
|
</view>
|
|
|
|
|
<view class="left-content-bg">
|
|
|
|
|
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="right-content">
|
|
|
|
|
<view class="right-content-item">
|
|
|
|
|
<view class="right-content-item-label font-family-SM">
|
|
|
|
|
超期
|
|
|
|
|
</view>
|
|
|
|
|
<view class="right-content-item-value cq-color font-family-ASB">
|
|
|
|
|
{{pageData.PcDelay || 0}}
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="right-content-item">
|
|
|
|
|
<view class="right-content-item-label font-family-SM">
|
|
|
|
|
临期
|
|
|
|
|
</view>
|
|
|
|
|
<view class="right-content-item-value lq-color font-family-ASB">
|
|
|
|
|
{{pageData.PcDying || 0}}
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<view class="index-pers-zl index-pers-content" v-if="curLogin === 2">
|
|
|
|
|
<view class="left-content" @click="handleToTab('Government')">
|
|
|
|
|
<view class="left-content-label font-family-SM">
|
|
|
|
|
待治理
|
|
|
|
|
</view>
|
|
|
|
|
<view class="left-content-value font-family-ASB">
|
|
|
|
|
{{pageData.Government || 0}}
|
|
|
|
|
</view>
|
|
|
|
|
<view class="left-content-bg">
|
|
|
|
|
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="right-content">
|
|
|
|
|
<view class="right-content-item">
|
|
|
|
|
<view class="right-content-item-label font-family-SM">
|
|
|
|
|
超期
|
|
|
|
|
</view>
|
|
|
|
|
<view class="right-content-item-value cq-color font-family-ASB">
|
|
|
|
|
{{pageData.ZlDelay || 0}}
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="right-content-item">
|
|
|
|
|
<view class="right-content-item-label font-family-SM">
|
|
|
|
|
临期
|
|
|
|
|
</view>
|
|
|
|
|
<view class="right-content-item-value lq-color font-family-ASB">
|
|
|
|
|
{{pageData.ZlDying || 0}}
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<view class="index-pers-pczl index-pers-content" v-if="curLogin === 3">
|
|
|
|
|
<view class="left-content basic-content" @click="handleToTab('Investigated')">
|
|
|
|
|
<view class="left-content-bg basic-content-bg">
|
|
|
|
|
|
|
|
|
|
</view>
|
|
|
|
|
<view class="basic-content-top">
|
|
|
|
|
<view class="basic-content-top-label font-family-SM">
|
|
|
|
|
待排查
|
|
|
|
|
</view>
|
|
|
|
|
<view class="basic-content-top-value font-family-ASB">
|
|
|
|
|
{{pageData.Investigated || 0}}
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="basic-content-bottom">
|
|
|
|
|
<view class="basic-content-bottom-item">
|
|
|
|
|
<view class="basic-content-bottom-item-label font-family-SM">
|
|
|
|
|
超期
|
|
|
|
|
</view>
|
|
|
|
|
<view class="basic-content-bottom-item-value cq-color font-family-ASB">
|
|
|
|
|
{{pageData.PcDelay || 0}}
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="basic-content-bottom-item">
|
|
|
|
|
<view class="basic-content-bottom-item-label font-family-SM">
|
|
|
|
|
临期
|
|
|
|
|
</view>
|
|
|
|
|
<view class="basic-content-bottom-item-value lq-color font-family-ASB">
|
|
|
|
|
{{pageData.PcDying || 0}}
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="right-content basic-content" @click="handleToTab('Government')">
|
|
|
|
|
<view class="right-content-bg basic-content-bg">
|
|
|
|
|
|
|
|
|
|
</view>
|
|
|
|
|
<view class="basic-content-top">
|
|
|
|
|
<view class="basic-content-top-label font-family-SM">
|
|
|
|
|
待治理
|
|
|
|
|
</view>
|
|
|
|
|
<view class="basic-content-top-value font-family-ASB">
|
|
|
|
|
{{pageData.Government || 0}}
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="basic-content-bottom">
|
|
|
|
|
<view class="basic-content-bottom-item">
|
|
|
|
|
<view class="basic-content-bottom-item-label font-family-SM">
|
|
|
|
|
超期
|
|
|
|
|
</view>
|
|
|
|
|
<view class="basic-content-bottom-item-value cq-color font-family-ASB">
|
|
|
|
|
{{pageData.ZlDelay || 0}}
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="basic-content-bottom-item">
|
|
|
|
|
<view class="basic-content-bottom-item-label font-family-SM">
|
|
|
|
|
临期
|
|
|
|
|
</view>
|
|
|
|
|
<view class="basic-content-bottom-item-value lq-color font-family-ASB">
|
|
|
|
|
{{pageData.ZlDying || 0}}
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<view class="index-pers-sp index-pers-content" v-if="curLogin === 4">
|
|
|
|
|
<view class="left-content" @click="handleToTab('Approve')">
|
|
|
|
|
<view class="left-content-bg">
|
|
|
|
|
|
|
|
|
|
</view>
|
|
|
|
|
<view class="left-content-label font-family-SM">
|
|
|
|
|
待审批
|
|
|
|
|
</view>
|
|
|
|
|
<view class="left-content-value font-family-ASB">
|
|
|
|
|
{{pageData.Approve || 0}}
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="right-content">
|
|
|
|
|
<view class="right-content-item" @click="handleToTab('Investigated')">
|
|
|
|
|
<view class="right-content-item-top">
|
|
|
|
|
<view class="right-content-item-top-label font-family-SM">
|
|
|
|
|
待排查
|
|
|
|
|
</view>
|
|
|
|
|
<view class="right-content-item-top-value font-family-ASB">
|
|
|
|
|
{{pageData.Investigated || 0}}
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="right-content-item-bottom">
|
|
|
|
|
<view class="right-content-item-bottom-item">
|
|
|
|
|
<view class="right-content-item-bottom-item-label font-family-SM">
|
|
|
|
|
超期
|
|
|
|
|
</view>
|
|
|
|
|
<view class="right-content-item-bottom-item-value cq-color font-family-ASB">
|
|
|
|
|
{{pageData.PcDelay || 0}}
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="right-content-item-bottom-item">
|
|
|
|
|
<view class="right-content-item-bottom-item-label font-family-SM">
|
|
|
|
|
临期
|
|
|
|
|
</view>
|
|
|
|
|
<view class="right-content-item-bottom-item-value lq-color font-family-ASB">
|
|
|
|
|
{{pageData.PcDying || 0}}
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="right-content-item" @click="handleToTab('Government')">
|
|
|
|
|
<view class="right-content-item-top">
|
|
|
|
|
<view class="right-content-item-top-label font-family-SM">
|
|
|
|
|
待治理
|
|
|
|
|
</view>
|
|
|
|
|
<view class="right-content-item-top-value font-family-ASB">
|
|
|
|
|
{{pageData.Government || 0}}
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="right-content-item-bottom">
|
|
|
|
|
<view class="right-content-item-bottom-item">
|
|
|
|
|
<view class="right-content-item-bottom-item-label font-family-SM">
|
|
|
|
|
超期
|
|
|
|
|
</view>
|
|
|
|
|
<view class="right-content-item-bottom-item-value cq-color font-family-ASB">
|
|
|
|
|
{{pageData.ZlDelay || 0}}
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="right-content-item-bottom-item">
|
|
|
|
|
<view class="right-content-item-bottom-item-label font-family-SM">
|
|
|
|
|
临期
|
|
|
|
|
</view>
|
|
|
|
|
<view class="right-content-item-bottom-item-value lq-color font-family-ASB">
|
|
|
|
|
{{pageData.ZlDying || 0}}
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<view class="con" @click="konw">
|
|
|
|
|
<image class="bg" src="/static/know.png" />
|
|
|
|
|
<view class="con-box">
|
|
|
|
|
<text class="font-family-SM" style="color: #363F4D;font-weight: 500;">交通隐患排查知识库</text>
|
|
|
|
|
<view class="icon">
|
|
|
|
|
<uni-icons type="right" size="18" color="#fff" />
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
export default {
|
|
|
|
|
name: 'index-pers',
|
|
|
|
|
props: {
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
pageData: []
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
computed: {
|
|
|
|
|
curLogin() {
|
|
|
|
|
const myRoles = this.$.getData('userInfo').role || []
|
|
|
|
|
if (myRoles.includes('领导')) {
|
|
|
|
|
return 4
|
|
|
|
|
}
|
|
|
|
|
if (myRoles.includes('排查人员') && myRoles.includes('治理人员')) {
|
|
|
|
|
return 3
|
|
|
|
|
}
|
|
|
|
|
if (myRoles.includes('治理人员')) {
|
|
|
|
|
return 2
|
|
|
|
|
}
|
|
|
|
|
if (myRoles.includes('排查人员')) {
|
|
|
|
|
return 1
|
|
|
|
|
}
|
|
|
|
|
return 0
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
refresh() {
|
|
|
|
|
const data = this.$.getData('token')
|
|
|
|
|
this.$request.globalRequest('/hiddenDanger/highDanger/getHighDangerStatusNum', {
|
|
|
|
|
nuserid: data
|
|
|
|
|
}, 'GET').then(res => {
|
|
|
|
|
if (res.code === 200) {
|
|
|
|
|
this.pageData = res.result.reduce((obj, item) => {
|
|
|
|
|
const {
|
|
|
|
|
status,
|
|
|
|
|
count = 0
|
|
|
|
|
} = item
|
|
|
|
|
obj[status] = count
|
|
|
|
|
return obj
|
|
|
|
|
}, {})
|
|
|
|
|
} else {
|
|
|
|
|
this.$.toast(res.message)
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
konw() {
|
|
|
|
|
this.$.open('/pages/knowledge/index')
|
|
|
|
|
},
|
|
|
|
|
handleToTab(routeKey) {
|
|
|
|
|
console.log(routeKey)
|
|
|
|
|
if (routeKey === 'Investigated') {
|
|
|
|
|
uni.setStorageSync('MyPCtabIndex', 1)
|
|
|
|
|
this.$.openTab('/pages/investigation/index')
|
|
|
|
|
}
|
|
|
|
|
if (routeKey === 'Government') {
|
|
|
|
|
uni.setStorageSync('MyZLtabIndex', 1)
|
|
|
|
|
this.$.openTab('/pages/governance/index')
|
|
|
|
|
}
|
|
|
|
|
if (routeKey === 'Approve') {
|
|
|
|
|
uni.setStorageSync('MySPtabIndex', 1)
|
|
|
|
|
this.$.openTab('/pages/approve/index')
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
.index-pers {
|
|
|
|
|
position: relative;
|
|
|
|
|
color: #fff;
|
|
|
|
|
padding: calc(var(--status-bar-height) + 40rpx) 20rpx 0rpx;
|
|
|
|
|
|
|
|
|
|
.cq-color {
|
|
|
|
|
color: rgba(204, 41, 54, 1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.lq-color {
|
|
|
|
|
color: rgba(230, 138, 11, 1)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&::after {
|
|
|
|
|
content: '';
|
|
|
|
|
position: absolute;
|
|
|
|
|
height: 100%;
|
|
|
|
|
width: 100%;
|
|
|
|
|
left: 0;
|
|
|
|
|
top: 0;
|
|
|
|
|
z-index: 1;
|
|
|
|
|
background: url("../../static/home_bg.png") no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&-content {
|
|
|
|
|
position: relative;
|
|
|
|
|
z-index: 2;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&-title {
|
|
|
|
|
// font-weight: bold;
|
|
|
|
|
font-size: 24px;
|
|
|
|
|
line-height: 28px;
|
|
|
|
|
letter-spacing: 2px;
|
|
|
|
|
text-shadow: 0px 4px 0px rgba(255, 255, 255, 0.16);
|
|
|
|
|
text-align: left;
|
|
|
|
|
font-style: normal;
|
|
|
|
|
text-transform: none;
|
|
|
|
|
color: #fff;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&-desc {
|
|
|
|
|
margin-top: 20rpx;
|
|
|
|
|
letter-spacing: 11rpx;
|
|
|
|
|
color: #fff;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&-content {
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
color: rgba(54, 63, 77, 1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&-pc,
|
|
|
|
|
&-zl {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
height: 190rpx;
|
|
|
|
|
|
|
|
|
|
.left-content {
|
|
|
|
|
position: relative;
|
|
|
|
|
height: 100%;
|
|
|
|
|
width: 53%;
|
|
|
|
|
background: linear-gradient(180deg, #80CBFF 0%, #F0F5FA 100%);
|
|
|
|
|
border-radius: 9px 9px 9px 9px;
|
|
|
|
|
|
|
|
|
|
&-bg {
|
|
|
|
|
height: 160rpx;
|
|
|
|
|
width: 160rpx;
|
|
|
|
|
background: url("/static/index/pc.png") no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: 15rpx;
|
|
|
|
|
top: 15rpx;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&-label {
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
padding: 18px 0 0 15px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&-value {
|
|
|
|
|
font-size: 26px;
|
|
|
|
|
padding: 3px 0 0 15px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.right-content {
|
|
|
|
|
flex: 1;
|
|
|
|
|
margin-left: 12px;
|
|
|
|
|
height: 100%;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
&-item {
|
|
|
|
|
height: 46%;
|
|
|
|
|
width: calc(100% - 40px);
|
|
|
|
|
padding: 0 20px;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
background: rgba(255, 255, 255, .3);
|
|
|
|
|
border-radius: 9px 9px 9px 9px;
|
|
|
|
|
backdrop-filter: blur(4px);
|
|
|
|
|
|
|
|
|
|
&-value {
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
&-zl {
|
|
|
|
|
.left-content {
|
|
|
|
|
background: linear-gradient(180deg, #F0D9B4 0%, #F6F6F6 100%);
|
|
|
|
|
|
|
|
|
|
&-bg {
|
|
|
|
|
background: url("/static/index/zl.png") no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
width: 90px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&-pczl {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
height: 280rpx;
|
|
|
|
|
|
|
|
|
|
.basic-content {
|
|
|
|
|
flex: 1;
|
|
|
|
|
position: relative;
|
|
|
|
|
height: 100%;
|
|
|
|
|
color: rgba(54, 63, 77, 1);
|
|
|
|
|
|
|
|
|
|
&-bg {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 16rpx;
|
|
|
|
|
right: 0rpx;
|
|
|
|
|
width: 90px;
|
|
|
|
|
height: 90px;
|
|
|
|
|
z-index: 1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&-top {
|
|
|
|
|
height: 54px;
|
|
|
|
|
padding: 18px 15px;
|
|
|
|
|
|
|
|
|
|
&-label {
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&-value {
|
|
|
|
|
font-size: 26px;
|
|
|
|
|
color: rgba(54, 63, 77, 1);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&-bottom {
|
|
|
|
|
height: 50px;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
padding: 0 15px;
|
|
|
|
|
background: rgba(255, 255, 255, 0.1);
|
|
|
|
|
border-radius: 9px 9px 9px 9px;
|
|
|
|
|
position: relative;
|
|
|
|
|
z-index: 2;
|
|
|
|
|
backdrop-filter: blur(4px);
|
|
|
|
|
|
|
|
|
|
&-item {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
&-label {
|
|
|
|
|
margin-right: 5px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&-value {
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.left-content {
|
|
|
|
|
background: linear-gradient(180deg, #80CBFF 0%, #EBF1F7 100%);
|
|
|
|
|
border-radius: 9px 9px 9px 9px;
|
|
|
|
|
margin-right: 12px;
|
|
|
|
|
|
|
|
|
|
&-bg {
|
|
|
|
|
background: url("/static/index/pc.png") no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.right-content {
|
|
|
|
|
background: linear-gradient(180deg, #F0D9B4 0%, #F6F6F6 100%);
|
|
|
|
|
border-radius: 9px 9px 9px 9px;
|
|
|
|
|
|
|
|
|
|
&-bg {
|
|
|
|
|
background: url("/static/index/zl.png") no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
width: 100px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&-sp {
|
|
|
|
|
color: rgba(54, 63, 77, 1);
|
|
|
|
|
height: 370rpx;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
.left-content {
|
|
|
|
|
position: relative;
|
|
|
|
|
height: 100%;
|
|
|
|
|
width: 42%;
|
|
|
|
|
background: linear-gradient(180deg, #F0D9B4 0%, #FFFEFC 100%);
|
|
|
|
|
border-radius: 9px 9px 9px 9px;
|
|
|
|
|
|
|
|
|
|
&-label {
|
|
|
|
|
padding: 18px 0 0 15px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&-value {
|
|
|
|
|
padding: 0 0 0 15px;
|
|
|
|
|
font-size: 30px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&-bg {
|
|
|
|
|
width: 160px;
|
|
|
|
|
height: 95px;
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
background: url('/static/index/sp.png') no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.right-content {
|
|
|
|
|
margin-left: 12px;
|
|
|
|
|
flex: 1;
|
|
|
|
|
height: 100%;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
|
|
|
|
&-item {
|
|
|
|
|
height: 47%;
|
|
|
|
|
width: 100%;
|
|
|
|
|
background: rgba(255, 255, 255, .4);
|
|
|
|
|
border-radius: 9px 9px 9px 9px;
|
|
|
|
|
backdrop-filter: blur(4px);
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
|
|
|
|
&-top {
|
|
|
|
|
height: 45px;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
padding: 0 15px;
|
|
|
|
|
width: calc(100% - 30px);
|
|
|
|
|
|
|
|
|
|
&-value {
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&-bottom {
|
|
|
|
|
flex: 1;
|
|
|
|
|
height: 35px;
|
|
|
|
|
background-color: rgba(255, 255, 255, 0.2);
|
|
|
|
|
backdrop-filter: blur(4px);
|
|
|
|
|
border-radius: 0px 0px 9px 9px;
|
|
|
|
|
padding: 0 15px;
|
|
|
|
|
width: calc(100% - 30px);
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
|
|
|
|
&-item {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
&-label {
|
|
|
|
|
margin-right: 14rpx;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&-value {
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.con {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 240rpx;
|
|
|
|
|
padding: 16rpx 0;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
position: relative;
|
|
|
|
|
z-index: 999;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
background: transparent;
|
|
|
|
|
|
|
|
|
|
.bg {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.con-box {
|
|
|
|
|
width: 100%;
|
|
|
|
|
padding: 0 50rpx;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
height: 80%;
|
|
|
|
|
background: linear-gradient(to right, #8FB4F2 0%, #BCD2F2 100%);
|
|
|
|
|
z-index: -1;
|
|
|
|
|
position: relative;
|
|
|
|
|
border-radius: 8rpx;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
.icon {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
background: rgba(255, 255, 255, 0.3);
|
|
|
|
|
color: #fff;
|
|
|
|
|
border-radius: 10%;
|
|
|
|
|
width: 40rpx;
|
|
|
|
|
height: 40rpx;
|
|
|
|
|
margin-left: 20rpx;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
