parent
b65874d947
commit
25e1156048
3 changed files with 449 additions and 405 deletions
@ -1,402 +1,444 @@ |
|||||||
<template> |
<template> |
||||||
<view id="page"> |
<view id="page"> |
||||||
<view class="header Box"> |
<view class="header Box"> |
||||||
<view class="title">道路交通安全隐患</view> |
<view class="title">道路交通安全隐患</view> |
||||||
<view class="title">排查助手</view> |
<view class="title">排查助手</view> |
||||||
<view class="desc">洞察隐患 智能守护 科技之眼照亮安全之路</view> |
<view class="desc">洞察隐患 智能守护 科技之眼照亮安全之路</view> |
||||||
<view class="total Flex Flex_C_S-B PositionR"> |
<view class="total Flex Flex_C_S-B PositionR"> |
||||||
<view class="left Flex"> |
<view class="left Flex"> |
||||||
<view class="info"> |
<view class="info"> |
||||||
<view class="name">待办</view> |
<view class="name">待办</view> |
||||||
<view class="number">{{ totalData.Unconfirmed }}</view> |
<view class="number">{{ totalData.Unconfirmed }}</view> |
||||||
</view> |
</view> |
||||||
<image style="width: 160rpx" mode="widthFix" :src="$.imgSrc + '/need.png'" class="need"></image> |
<image style="width: 160rpx" mode="widthFix" :src="$.imgSrc + '/need.png'" class="need"></image> |
||||||
<view class="bottom PositionA Flex Flex_C_S-A TextCenter blur"> |
<view class="bottom PositionA Flex Flex_C_S-A TextCenter blur"> |
||||||
<view class="item Flex_C_S-Center"> |
<view class="item Flex_C_S-Center"> |
||||||
<text>超期</text> |
<text>超期</text> |
||||||
<text style="margin-left: 10rpx;color: #CC2936;">{{ totalData.Delay }}</text> |
<text style="margin-left: 10rpx;color: #CC2936;">{{ totalData.Delay }}</text> |
||||||
</view> |
</view> |
||||||
<view class="item Flex_C_S-Center"> |
<view class="item Flex_C_S-Center"> |
||||||
<text>临期</text> |
<text>临期</text> |
||||||
<text style="margin-left: 10rpx;color: #E68A0B;">{{ totalData.Dying }}</text> |
<text style="margin-left: 10rpx;color: #E68A0B;">{{ totalData.Dying }}</text> |
||||||
</view> |
</view> |
||||||
</view> |
</view> |
||||||
</view> |
</view> |
||||||
<view class="right"> |
<view class="right"> |
||||||
<view class="current_mouth Flex Flex_C_S-B blur"> |
<view class="current_mouth Flex Flex_C_S-B blur"> |
||||||
<image style="width: 80rpx" mode="widthFix" :src="$.imgSrc + '/mouth.png'" class="video"></image> |
<image style="width: 80rpx" mode="widthFix" :src="$.imgSrc + '/mouth.png'" class="video"> |
||||||
<text class="name">本月上报</text> |
</image> |
||||||
<text class="number">{{ totalData.MonthReport }}</text> |
<text class="name">本月上报</text> |
||||||
</view> |
<text class="number">{{ totalData.MonthReport }}</text> |
||||||
<view class="finish Flex Flex_C_S-B blur"> |
</view> |
||||||
<image style="width: 80rpx" mode="widthFix" :src="$.imgSrc + '/finish.png'" class="video"></image> |
<view class="finish Flex Flex_C_S-B blur"> |
||||||
<text class="name">已完成</text> |
<image style="width: 80rpx" mode="widthFix" :src="$.imgSrc + '/finish.png'" class="video"> |
||||||
<text class="number">{{ totalData.Finished }}</text> |
</image> |
||||||
</view> |
<text class="name">已完成</text> |
||||||
</view> |
<text class="number">{{ totalData.Finished }}</text> |
||||||
</view> |
</view> |
||||||
</view> |
</view> |
||||||
<view class="con" @click="konw"> |
</view> |
||||||
<image class="bg" src="/static/know.png" /> |
</view> |
||||||
<view class="con-box"> |
<view class="con" @click="konw"> |
||||||
<text style="font-family: Source Han Sans CN, Source Han Sans CN;color: #363F4D;font-weight: 500;">交通隐患排查知识库</text> |
<image class="bg" src="/static/know.png" /> |
||||||
<view class="icon"> |
<view class="con-box"> |
||||||
<uni-icons type="right" size="18" color="#fff" /> |
<text |
||||||
</view> |
style="font-family: Source Han Sans CN, Source Han Sans CN;color: #363F4D;font-weight: 500;">交通隐患排查知识库</text> |
||||||
</view> |
<view class="icon"> |
||||||
</view> |
<uni-icons type="right" size="18" color="#fff" /> |
||||||
<view class="Width100 Box BorderBox"> |
</view> |
||||||
<view class="list_title">待办任务</view> |
</view> |
||||||
<view class="Content MarginAuto BorderBox"> |
</view> |
||||||
<no-data v-if="isEmpty" /> |
<view class="Width100 Box BorderBox"> |
||||||
<view v-else class="List Width100 BorderBox"> |
<view class="list_title">待办任务</view> |
||||||
<view class="Unit FontBold BorderBox Width100 MarginT_30rpx BG_FFFFFF" |
<view class="Content MarginAuto BorderBox"> |
||||||
v-for="item in list" :key='item.id' @click='handleClick(item)'> |
<no-data v-if="isEmpty" /> |
||||||
<image class="imgleft" :src="item.imgurl || '/static/logo.png'" mode="widthFix"></image> |
<view v-else class="List Width100 BorderBox"> |
||||||
<view class="right"> |
<view class="Unit FontBold BorderBox Width100 MarginT_30rpx BG_FFFFFF" v-for="item in list" |
||||||
<view class="title">{{ item.name }}</view> |
:key='item.id' @click='handleClick(item)'> |
||||||
<view class="type"> |
<image class="imgleft" :src="item.imgurl || '/static/logo.png'" mode="widthFix"></image> |
||||||
<text>排查</text> |
<view class="right"> |
||||||
<text>{{ item.deadlineStatus || '--' }}</text> |
<view class="title">{{ item.name }}</view> |
||||||
</view> |
<view class="type"> |
||||||
</view> |
<text>排查</text> |
||||||
<view class="trapezoidal" v-if="item.deadlineType == 1"> |
<text>{{ item.deadlineStatus || '--' }}</text> |
||||||
超期 |
</view> |
||||||
</view> |
</view> |
||||||
<view class="trapezoidal lin" v-if="item.deadlineType == 2"> |
<view class="trapezoidal" v-if="item.deadlineType == 1"> |
||||||
临期 |
超期 |
||||||
</view> |
</view> |
||||||
</view> |
<view class="trapezoidal lin" v-if="item.deadlineType == 2"> |
||||||
</view> |
临期 |
||||||
</view> |
</view> |
||||||
</view> |
</view> |
||||||
</view> |
</view> |
||||||
</template> |
<u-loadmore :status="loadmorestatus" v-show="!isEmpty" /> |
||||||
|
</view> |
||||||
<script> |
</view> |
||||||
import NoData from "../../components/no-data.vue"; |
</view> |
||||||
export default { |
</template> |
||||||
// 组件 |
|
||||||
components: { |
<script> |
||||||
NoData |
import NoData from "../../components/no-data.vue"; |
||||||
}, |
export default { |
||||||
data() { |
// 组件 |
||||||
return { |
components: { |
||||||
$: this.$, |
NoData |
||||||
// 公用的js |
}, |
||||||
bgUrl1: '', // 登录信息背景图 |
data() { |
||||||
list: [], |
return { |
||||||
isEmpty: false, |
$: this.$, |
||||||
isMore: true, |
// 公用的js |
||||||
page: 1, |
bgUrl1: '', // 登录信息背景图 |
||||||
tab: 1, |
list: [], |
||||||
totalData: { |
isEmpty: false, |
||||||
UnderInvestigation: 0, |
isMore: true, |
||||||
InGovernance: 0, |
page: 1, |
||||||
Finished: 0, |
tab: 1, |
||||||
MonthReport: 0, |
totalData: { |
||||||
Dying: 0, |
UnderInvestigation: 0, |
||||||
Delay: 0, |
InGovernance: 0, |
||||||
} |
Finished: 0, |
||||||
} |
MonthReport: 0, |
||||||
}, |
Dying: 0, |
||||||
// 页面加载 |
Delay: 0, |
||||||
onLoad(e) { |
}, |
||||||
this.getData() |
loadmorestatus: 'loading', |
||||||
this.getList() |
} |
||||||
}, |
}, |
||||||
// 计算属性 |
// 页面加载 |
||||||
computed: {}, |
onLoad(e) { |
||||||
// 方法 |
this.getData() |
||||||
methods: { |
this.getList() |
||||||
getData() { |
}, |
||||||
const data = this.$.getData('token') |
// 计算属性 |
||||||
this.$request.globalRequest('/hiddenDanger/highDanger/getHighDangerStatusNum', { nuserid: data }, 'GET').then(res => { |
computed: {}, |
||||||
if (res.code === 200) { |
// 方法 |
||||||
res.result.forEach(item => { |
methods: { |
||||||
this.totalData[item.status] = item.count |
getData() { |
||||||
}) |
const data = this.$.getData('token') |
||||||
} else { |
this.$request.globalRequest('/hiddenDanger/highDanger/getHighDangerStatusNum', { |
||||||
this.$.toast(res.message) |
nuserid: data |
||||||
} |
}, 'GET').then(res => { |
||||||
}) |
if (res.code === 200) { |
||||||
}, |
res.result.forEach(item => { |
||||||
getList() { |
this.totalData[item.status] = item.count |
||||||
let datas = { |
}) |
||||||
nuserid:this.$.getData('token'), |
} else { |
||||||
status: '0', |
this.$.toast(res.message) |
||||||
} |
} |
||||||
this.$request.globalRequest(`/hiddenDanger/highDanger/getHigDangerDealt?pageNum=${this.page}&pageSize=${10}`, datas, 'POST').then(res => { |
}) |
||||||
if (res.code === 200) { |
}, |
||||||
if (res.result.total === 0) { |
getList() { |
||||||
this.isEmpty = true; |
let datas = { |
||||||
return false |
nuserid: this.$.getData('token'), |
||||||
} |
status: '0', |
||||||
this.list.push(...res.result.list) |
} |
||||||
if (this.list.length >= res.result.total) { |
this.loadmorestatus = 'loading' |
||||||
this.isMore = false |
this.$request.globalRequest( |
||||||
} |
`/hiddenDanger/highDanger/getHigDangerDealt?pageNum=${this.page}&pageSize=${10}`, datas, 'POST') |
||||||
} else { |
.then(res => { |
||||||
this.$.toast(res.message) |
this.loadmorestatus = 'loadmore' |
||||||
} |
if (res.code === 200) { |
||||||
}) |
if (res.result.total === 0) { |
||||||
}, |
this.isEmpty = true; |
||||||
handleClick(row) { |
return false |
||||||
console.log(row) |
} |
||||||
this.$.open('/pages/map/index?businessId=' + row.businessId) |
this.list.push(...res.result.list) |
||||||
}, |
if (this.list.length >= res.result.total) { |
||||||
konw(){ |
this.isMore = false |
||||||
this.$.open('/pages/knowledge/index') |
this.loadmorestatus = 'nomore' |
||||||
}, |
} |
||||||
// 跳转页面 |
} else { |
||||||
skipPage(even) { |
this.$.toast(res.message) |
||||||
// this.$.open(even) |
} |
||||||
}, |
}).catch((err) => { |
||||||
}, |
this.loadmorestatus = 'nomore' |
||||||
onReady() {}, |
}) |
||||||
// 页面卸载 |
}, |
||||||
onUnload() { |
handleClick(row) { |
||||||
|
console.log(row) |
||||||
}, |
this.$.open('/pages/map/index?businessId=' + row.businessId) |
||||||
// 触发下拉刷新 |
}, |
||||||
onPullDownRefresh() { |
konw() { |
||||||
// 延迟关闭刷新动画 |
this.$.open('/pages/knowledge/index') |
||||||
setTimeout(() => { |
}, |
||||||
uni.stopPullDownRefresh(); |
// 跳转页面 |
||||||
}, 1500); |
skipPage(even) { |
||||||
}, |
// this.$.open(even) |
||||||
// 页面上拉触底事件的处理函数 |
}, |
||||||
onReachBottom() { |
}, |
||||||
if (this.isMore) { |
onReady() {}, |
||||||
this.page++ |
// 页面卸载 |
||||||
this.getList() |
onUnload() { |
||||||
} |
|
||||||
}, |
}, |
||||||
} |
// 触发下拉刷新 |
||||||
</script> |
onPullDownRefresh() { |
||||||
|
// 延迟关闭刷新动画 |
||||||
<style> |
setTimeout(() => { |
||||||
</style> |
uni.stopPullDownRefresh(); |
||||||
<style lang="scss" scoped> |
}, 1500); |
||||||
page { |
}, |
||||||
background: #F6F8FA; |
// 页面上拉触底事件的处理函数 |
||||||
} |
onReachBottom() { |
||||||
|
if (this.isMore) { |
||||||
.header { |
this.page++ |
||||||
background: url("../../static/home_bg.png") no-repeat; |
this.getList() |
||||||
background-size: cover; |
} |
||||||
height: 500rpx; |
}, |
||||||
color: #FFFFFF; |
} |
||||||
padding:calc(var(--status-bar-height) + 40rpx) 20rpx 20rpx; |
</script> |
||||||
.title { |
|
||||||
font-family: Tensentype MeiHeiJ, Tensentype MeiHeiJ; |
<style> |
||||||
font-weight: bold; |
</style> |
||||||
font-size: 24px; |
<style lang="scss" scoped> |
||||||
line-height: 28px; |
page { |
||||||
letter-spacing: 2px; |
background: #F6F8FA; |
||||||
text-shadow: 0px 4px 0px rgba(255,255,255,0.16); |
} |
||||||
text-align: left; |
|
||||||
font-style: normal; |
.header { |
||||||
text-transform: none; |
background: url("../../static/home_bg.png") no-repeat; |
||||||
} |
background-size: cover; |
||||||
.desc { |
height: 500rpx; |
||||||
margin-top: 20rpx; |
color: #FFFFFF; |
||||||
font-family: Source Han Sans CN, Source Han Sans CN; |
padding: calc(var(--status-bar-height) + 40rpx) 20rpx 20rpx; |
||||||
} |
|
||||||
.total { |
.title { |
||||||
margin-top: 40rpx; |
font-family: Tensentype MeiHeiJ, Tensentype MeiHeiJ; |
||||||
.number { |
font-weight: bold; |
||||||
font-size: 20px; |
font-size: 24px; |
||||||
font-weight: bold; |
line-height: 28px; |
||||||
color: #363F4D; |
letter-spacing: 2px; |
||||||
} |
text-shadow: 0px 4px 0px rgba(255, 255, 255, 0.16); |
||||||
.name { |
text-align: left; |
||||||
font-size: 16px; |
font-style: normal; |
||||||
color: #363F4D; |
text-transform: none; |
||||||
font-weight: bold; |
} |
||||||
} |
|
||||||
.left { |
.desc { |
||||||
width: 40%; |
margin-top: 20rpx; |
||||||
height: 100%; |
font-family: Source Han Sans CN, Source Han Sans CN; |
||||||
padding: 20rpx 20rpx 70rpx; |
} |
||||||
border-radius: 10rpx; |
|
||||||
background: linear-gradient( 180deg, #F0D9B4 0%, #F6F6F6 100%); |
.total { |
||||||
overflow: hidden; |
margin-top: 40rpx; |
||||||
.info { |
|
||||||
padding-left: 20rpx; |
.number { |
||||||
padding-top: 20rpx; |
font-size: 20px; |
||||||
flex: 1; |
font-weight: bold; |
||||||
.number { |
color: #363F4D; |
||||||
font-size: 20px; |
} |
||||||
} |
|
||||||
.name { |
.name { |
||||||
font-size: 18px; |
font-size: 16px; |
||||||
} |
color: #363F4D; |
||||||
} |
font-weight: bold; |
||||||
.bottom { |
} |
||||||
bottom: 0; |
|
||||||
border-radius:0 0 10rpx 10px; |
.left { |
||||||
width: calc(36% + 40rpx); |
width: 40%; |
||||||
left: 0; |
height: 100%; |
||||||
font-size: 16px; |
padding: 20rpx 20rpx 70rpx; |
||||||
text-align: center; |
border-radius: 10rpx; |
||||||
height: 80rpx; |
background: linear-gradient(180deg, #F0D9B4 0%, #F6F6F6 100%); |
||||||
line-height: 80rpx; |
overflow: hidden; |
||||||
color: #363F4D; |
|
||||||
} |
.info { |
||||||
} |
padding-left: 20rpx; |
||||||
.right { |
padding-top: 20rpx; |
||||||
flex: 1; |
flex: 1; |
||||||
padding:0 20rpx; |
|
||||||
margin-left: 20rpx; |
.number { |
||||||
display: flex; |
font-size: 20px; |
||||||
flex-direction: column; |
} |
||||||
justify-content: center; |
|
||||||
align-items: center; |
.name { |
||||||
.current_mouth { |
font-size: 18px; |
||||||
margin-bottom: 20rpx; |
} |
||||||
} |
} |
||||||
.current_mouth,.finish { |
|
||||||
flex: 1; |
.bottom { |
||||||
border-radius: 10rpx; |
bottom: 0; |
||||||
padding: 20rpx; |
border-radius: 0 0 10rpx 10px; |
||||||
width: 100%; |
width: calc(36% + 40rpx); |
||||||
} |
left: 0; |
||||||
} |
font-size: 16px; |
||||||
|
text-align: center; |
||||||
} |
height: 80rpx; |
||||||
} |
line-height: 80rpx; |
||||||
|
color: #363F4D; |
||||||
.img { |
} |
||||||
width: 40rpx; |
} |
||||||
height: 40rpx; |
|
||||||
margin-left: 30rpx; |
.right { |
||||||
} |
flex: 1; |
||||||
.trapezoidal { |
padding: 0 20rpx; |
||||||
position: relative; |
margin-left: 20rpx; |
||||||
display: inline-block; |
display: flex; |
||||||
min-width: 2em; |
flex-direction: column; |
||||||
text-align: center; |
justify-content: center; |
||||||
padding: 3rpx 20rpx 3rpx 18rpx; |
align-items: center; |
||||||
} |
|
||||||
|
.current_mouth { |
||||||
.trapezoidal::before, |
margin-bottom: 20rpx; |
||||||
.trapezoidal::after { |
} |
||||||
content: ''; |
|
||||||
position: absolute; |
.current_mouth, |
||||||
top: 0; |
.finish { |
||||||
left: 0%; |
flex: 1; |
||||||
width: 100%; |
border-radius: 10rpx; |
||||||
height: 100%; |
padding: 20rpx; |
||||||
border-radius: 0rpx 0 0 0; |
width: 100%; |
||||||
background: #FF1111; |
} |
||||||
z-index: -1; |
} |
||||||
transform-origin: bottom; |
|
||||||
transform: skew(18deg); |
} |
||||||
border: 0rpx solid #333; |
} |
||||||
box-sizing: border-box; |
|
||||||
} |
.img { |
||||||
|
width: 40rpx; |
||||||
.trapezoidal::after { |
height: 40rpx; |
||||||
left: auto; |
margin-left: 30rpx; |
||||||
right: 0; |
} |
||||||
transform: skew(-0deg); |
|
||||||
border-radius: 0 0rpx 0 0; |
.trapezoidal { |
||||||
background-color: #FF1111; |
position: relative; |
||||||
border-left: 0 none; |
display: inline-block; |
||||||
} |
min-width: 2em; |
||||||
.lin::before,.lin::after { |
text-align: center; |
||||||
background-color: #E68A0B; |
padding: 3rpx 20rpx 3rpx 18rpx; |
||||||
} |
} |
||||||
.list_title { |
|
||||||
font-size: 20px; |
.trapezoidal::before, |
||||||
background: linear-gradient( 180deg, #FFFFFF 0%, rgba(255,255,255,0) 100%); |
.trapezoidal::after { |
||||||
border-radius: 24px 24px 0px 0px; |
content: ''; |
||||||
padding: 20rpx 30rpx 0; |
position: absolute; |
||||||
font-family: Source Han Sans CN, Source Han Sans CN; |
top: 0; |
||||||
} |
left: 0%; |
||||||
|
width: 100%; |
||||||
.Box { |
height: 100%; |
||||||
.Content { |
border-radius: 0rpx 0 0 0; |
||||||
width: calc(100% - 48rpx); |
background: #FF1111; |
||||||
padding-bottom: 100rpx; |
z-index: -1; |
||||||
} |
transform-origin: bottom; |
||||||
|
transform: skew(18deg); |
||||||
.Unit { |
border: 0rpx solid #333; |
||||||
padding: 12rpx; |
box-sizing: border-box; |
||||||
display: flex; |
} |
||||||
justify-content: space-between; |
|
||||||
align-items: center; |
.trapezoidal::after { |
||||||
position: relative; |
left: auto; |
||||||
box-shadow: 1px 1px 3px #ccc; |
right: 0; |
||||||
.trapezoidal { |
transform: skew(-0deg); |
||||||
position: absolute; |
border-radius: 0 0rpx 0 0; |
||||||
top: 0px; |
background-color: #FF1111; |
||||||
right: 0px; |
border-left: 0 none; |
||||||
color: #ffffff; |
} |
||||||
font-size: 14px; |
|
||||||
font-weight: normal; |
.lin::before, |
||||||
z-index: 1; |
.lin::after { |
||||||
} |
background-color: #E68A0B; |
||||||
image { |
} |
||||||
width: 200rpx; |
|
||||||
} |
.list_title { |
||||||
.right { |
font-size: 20px; |
||||||
flex: 1; |
background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%); |
||||||
padding-left: 30rpx; |
border-radius: 24px 24px 0px 0px; |
||||||
.title { |
padding: 20rpx 30rpx 0; |
||||||
font-size: 16px; |
font-family: Source Han Sans CN, Source Han Sans CN; |
||||||
} |
} |
||||||
.type { |
|
||||||
font-size: 14px; |
.Box { |
||||||
color: #666; |
.Content { |
||||||
font-weight: normal; |
width: calc(100% - 48rpx); |
||||||
text { |
padding-bottom: 100rpx; |
||||||
margin-right: 20rpx; |
} |
||||||
} |
|
||||||
} |
.Unit { |
||||||
} |
padding: 12rpx; |
||||||
} |
display: flex; |
||||||
} |
justify-content: space-between; |
||||||
.con { |
align-items: center; |
||||||
width: 100%; |
position: relative; |
||||||
height: 240rpx; |
box-shadow: 1px 1px 3px #ccc; |
||||||
padding: 30rpx; |
|
||||||
box-sizing: border-box; |
.trapezoidal { |
||||||
position: relative; |
position: absolute; |
||||||
z-index: 999; |
top: 0px; |
||||||
background-size: 100% 100%; |
right: 0px; |
||||||
display: flex; |
color: #ffffff; |
||||||
align-items: center; |
font-size: 14px; |
||||||
.bg { |
font-weight: normal; |
||||||
position: absolute; |
z-index: 1; |
||||||
top: 0; |
} |
||||||
right: 0; |
|
||||||
width: 100%; |
image { |
||||||
height: 100%; |
width: 200rpx; |
||||||
} |
} |
||||||
.con-box { |
|
||||||
width: 100%; |
.right { |
||||||
padding: 0 20rpx; |
flex: 1; |
||||||
box-sizing: border-box; |
padding-left: 30rpx; |
||||||
height: 80%; |
|
||||||
background: linear-gradient(to right, #8FB4F2 0%, #BCD2F2 100%); |
.title { |
||||||
z-index: -1; |
font-size: 16px; |
||||||
position: relative; |
} |
||||||
border-radius: 8rpx; |
|
||||||
display: flex; |
.type { |
||||||
align-items: center; |
font-size: 14px; |
||||||
.icon { |
color: #666; |
||||||
display: flex; |
font-weight: normal; |
||||||
justify-content: center; |
|
||||||
align-items: center; |
text { |
||||||
background: rgba(255,255,255,0.3); |
margin-right: 20rpx; |
||||||
color: #fff; |
} |
||||||
border-radius: 10%; |
} |
||||||
width: 40rpx; |
} |
||||||
height: 40rpx; |
} |
||||||
margin-left: 20rpx; |
} |
||||||
} |
|
||||||
} |
.con { |
||||||
} |
width: 100%; |
||||||
</style> |
height: 240rpx; |
||||||
|
padding: 30rpx; |
||||||
|
box-sizing: border-box; |
||||||
|
position: relative; |
||||||
|
z-index: 999; |
||||||
|
background-size: 100% 100%; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
|
||||||
|
.bg { |
||||||
|
position: absolute; |
||||||
|
top: 0; |
||||||
|
right: 0; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
.con-box { |
||||||
|
width: 100%; |
||||||
|
padding: 0 20rpx; |
||||||
|
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> |
Loading…
Reference in new issue