liyingang
10 months ago
parent
c55eb888ee
commit
c588892b12
16 changed files with 1116 additions and 405 deletions
@ -0,0 +1,91 @@ |
|||||||
|
<template> |
||||||
|
<!-- <u-action-sheet :actions="sheetActions" cancelText="取消" round="8" :show="show" @select="handleSelect" |
||||||
|
@close="handleClose"></u-action-sheet> --> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
name: 'map-navigation', |
||||||
|
data() { |
||||||
|
return { |
||||||
|
show: false, |
||||||
|
actions: [{ |
||||||
|
name: '高德地图', |
||||||
|
packageName: 'com.autonavi.minimap', |
||||||
|
isTrue: false, |
||||||
|
getAppUrl: (name, latitude, longitude) => { |
||||||
|
return `androidamap://viewMap?sourceApplication=隐患排查&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0` |
||||||
|
} |
||||||
|
}, { |
||||||
|
name: '百度地图', |
||||||
|
packageName: 'com.baidu.BaiduMap', |
||||||
|
isTrue: false, |
||||||
|
getAppUrl: (name, latitude, longitude) => { |
||||||
|
return `baidumap://map/marker?location=${latitude},${longitude}&title=${name}&content=${name}&src=andr.baidu.openAPIdemo&coord_type=gcj02` |
||||||
|
} |
||||||
|
}, { |
||||||
|
name: '腾讯地图', |
||||||
|
packageName: 'com.tencent.map', |
||||||
|
isTrue: false, |
||||||
|
getAppUrl: (name, latitude, longitude, referer) => { |
||||||
|
return `qqmap://map/geocoder?coord=${latitude},${longitude}&title${name}&addr=${name}=&referer=${referer}` |
||||||
|
} |
||||||
|
}], |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
sheetActions() { |
||||||
|
return this.actions.filter(item => item.isTrue).map(item => item.name) |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.getAppList() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
open({ |
||||||
|
name, |
||||||
|
latitude, |
||||||
|
longitude |
||||||
|
}) { |
||||||
|
if (!this.sheetActions.length) { |
||||||
|
this.$.toast('您当前未安装地图APP') |
||||||
|
} else { |
||||||
|
uni.showActionSheet({ |
||||||
|
itemList: this.sheetActions, |
||||||
|
success: ({ |
||||||
|
tapIndex |
||||||
|
}) => { |
||||||
|
const appList = this.actions.filter(item => item.isTrue) |
||||||
|
const url = encodeURI(appList[tapIndex].getAppUrl(name, latitude, |
||||||
|
longitude)) |
||||||
|
plus.runtime.openURL(url, (err) => { |
||||||
|
console.log(err) |
||||||
|
}) |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
}, |
||||||
|
handleSelect(index) { |
||||||
|
console.log(index) |
||||||
|
}, |
||||||
|
handleClose() { |
||||||
|
this.show = false |
||||||
|
}, |
||||||
|
getAppList() { |
||||||
|
this.actions = this.actions.map(item => ({ |
||||||
|
...item, |
||||||
|
isTrue: plus.runtime.isApplicationExist({ |
||||||
|
pname: item.packageName |
||||||
|
}) |
||||||
|
})) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.u-popup { |
||||||
|
flex: 0 !important; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,650 @@ |
|||||||
|
<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 |
||||||
|
} |
||||||
|
}, |
||||||
|
created() { |
||||||
|
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) |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
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> |
||||||
|
After Width: | Height: | Size: 27 KiB |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
Loading…
Reference in new issue