jiangyy
4 years ago
8 changed files with 763 additions and 1 deletions
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
@ -0,0 +1,744 @@ |
|||||
|
<template> |
||||
|
<div class="warning-box"> |
||||
|
<cpt-card> |
||||
|
<div class="card-title"> |
||||
|
<img class="title-icon" src="../../../../assets/img/shuju/title-tip.png" /> |
||||
|
<div class="title-label"> |
||||
|
<el-dropdown trigger="click"> |
||||
|
<span class="el-dropdown-link"> |
||||
|
全部网格<i class="el-icon-caret-bottom el-icon--right"></i> |
||||
|
</span> |
||||
|
<el-dropdown-menu slot="dropdown"> |
||||
|
<el-dropdown-item>黄金糕</el-dropdown-item> |
||||
|
<el-dropdown-item>狮子头</el-dropdown-item> |
||||
|
<el-dropdown-item>螺蛳粉</el-dropdown-item> |
||||
|
<el-dropdown-item>双皮奶</el-dropdown-item> |
||||
|
<el-dropdown-item>蚵仔煎</el-dropdown-item> |
||||
|
</el-dropdown-menu> |
||||
|
</el-dropdown> |
||||
|
</div> |
||||
|
<!-- <div class="title-time"> |
||||
|
<div class="title-time-label">选择时间</div> |
||||
|
<div class=""> |
||||
|
<el-date-picker |
||||
|
v-model="value2" |
||||
|
type="month" |
||||
|
placeholder="选择月"> |
||||
|
</el-date-picker> |
||||
|
</div> |
||||
|
</div> --> |
||||
|
</div> |
||||
|
<div class="card-echart"> |
||||
|
<div class="card-left"> |
||||
|
<div class="card-left-title">党员年龄统计</div> |
||||
|
<div class="card-flex"> |
||||
|
<div class="echart-wr"> |
||||
|
<div class="echart-cicle"></div> |
||||
|
<div id="echartOrg" class="echart-org"></div> |
||||
|
</div> |
||||
|
<div class="echarts-tips echarts-tips-wd50"> |
||||
|
<div class="tips-lists"> |
||||
|
<div v-for="item in ageItem" :key="item.value" class="tips-items"> |
||||
|
<div class="tips-items-title" :class="'tips-items-title' + item.value"> |
||||
|
{{ item.name }} |
||||
|
</div> |
||||
|
<div class="tips-items-num"> |
||||
|
<div class="tips-item-count">{{item.value}}</div> |
||||
|
<div class="tips-item-has">25%</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
<div class="warning-box-bottom"> |
||||
|
<screen-table |
||||
|
:headerList="headerList" |
||||
|
:tableData="tableData" |
||||
|
:visibleLoading="visibleLoading" |
||||
|
:operate="false" |
||||
|
></screen-table> |
||||
|
<div class="pagination"> |
||||
|
<el-pagination |
||||
|
:current-page="pageNo" |
||||
|
:page-size="pageSize" |
||||
|
background |
||||
|
layout="prev, pager, next" |
||||
|
@size-change="pageSizeChangeHandleNew" |
||||
|
@current-change="pageCurrentChangeHandleNew" |
||||
|
:total="total" |
||||
|
> |
||||
|
</el-pagination> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="card-left"> |
||||
|
<div class="card-left-title">党员学历统计</div> |
||||
|
<div class="card-flex"> |
||||
|
<div class="echart-wr echart-wr100"> |
||||
|
<div class="echart-cicle echart-cicle0"></div> |
||||
|
<div id="echartType" class="echart-org"></div> |
||||
|
</div> |
||||
|
<div v-if="false" class="echarts-tips"> |
||||
|
<div class="tips-list"> |
||||
|
<div v-for="item in eduItem" :key="item.value" class="tips-item"> |
||||
|
<div class="tips-item-icon" :style="'background:' + item.color"></div> |
||||
|
<div class="tips-item-text">{{item.name}}</div> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="warning-box-bottom"> |
||||
|
<screen-table |
||||
|
:headerList="headerList" |
||||
|
:tableData="tableData" |
||||
|
:visibleLoading="visibleLoading" |
||||
|
:operate="false" |
||||
|
></screen-table> |
||||
|
<div class="pagination"> |
||||
|
<el-pagination |
||||
|
:current-page="pageNo" |
||||
|
:page-size="pageSize" |
||||
|
background |
||||
|
layout="prev, pager, next" |
||||
|
@size-change="pageSizeChangeHandleNew" |
||||
|
@current-change="pageCurrentChangeHandleNew" |
||||
|
:total="total" |
||||
|
> |
||||
|
</el-pagination> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
|
||||
|
</cpt-card> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { requestPost } from "@/js/dai/request"; |
||||
|
import screenTable from "../components/screen-table/index"; |
||||
|
import cptCard from "@/views/modules/visual/cpts/card"; |
||||
|
import nextTick from "dai-js/tools/nextTick"; |
||||
|
|
||||
|
import * as echarts from 'echarts'; |
||||
|
export default { |
||||
|
name: "warning-box", |
||||
|
components: { |
||||
|
cptCard, |
||||
|
screenTable, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
warningList: [], |
||||
|
headerList: [ |
||||
|
{ title: "序号", coulmn: 'index' }, |
||||
|
{ title: "姓名", coulmn: 'gridName' }, |
||||
|
{ title: "年龄", coulmn: 'buildingName' }, |
||||
|
{ title: "手机号码", coulmn: 'neighborhoodName' } |
||||
|
], |
||||
|
tableData: [ |
||||
|
// [1,'商丘路社区第一网格','商丘路小区','2号楼','杨颖、王平、刘佳敏、丁辉、杨萍'], |
||||
|
], |
||||
|
value2: '', |
||||
|
visibleLoading: true, |
||||
|
pageNo: 1, |
||||
|
pageSize: 10, |
||||
|
total: 0, |
||||
|
activeIndex: 0, |
||||
|
activeLevel: "1", |
||||
|
eduItem: [ |
||||
|
{ |
||||
|
name: '小学', |
||||
|
value: 0, |
||||
|
color: 'rgba(27, 81, 255, 1)' |
||||
|
}, { |
||||
|
name: '初中', |
||||
|
value: 1, |
||||
|
color: 'rgba(0, 229, 237, 1)' |
||||
|
}, { |
||||
|
name: '高中', |
||||
|
value: 2, |
||||
|
color: 'rgba(120, 0, 255, 1)' |
||||
|
}, { |
||||
|
name: '中专', |
||||
|
value: 3, |
||||
|
color: 'rgba(255, 120, 0, 1)' |
||||
|
}, { |
||||
|
name: '大专', |
||||
|
value: 4, |
||||
|
color: 'rgba(255, 186, 0, 1)' |
||||
|
}, { |
||||
|
name: '本科', |
||||
|
value: 5, |
||||
|
color: 'rgba(22, 215, 131, 1)' |
||||
|
}, { |
||||
|
name: '硕士', |
||||
|
value: 6, |
||||
|
color: 'rgba(42, 0, 255, 1)' |
||||
|
}, { |
||||
|
name: '博士', |
||||
|
value: 7, |
||||
|
color: 'rgba(198, 0, 255, 1)' |
||||
|
}, { |
||||
|
name: '其他', |
||||
|
value: 8, |
||||
|
color: 'rgba(255, 42, 0, 1)' |
||||
|
} |
||||
|
], |
||||
|
ageItem: [ |
||||
|
{ |
||||
|
name: '50岁以下', |
||||
|
value: 1, |
||||
|
color: 'rgba(27, 81, 255, 1)' |
||||
|
}, { |
||||
|
name: '50-59岁', |
||||
|
value: 2, |
||||
|
color: 'rgba(0, 229, 237, 1)' |
||||
|
}, { |
||||
|
name: '60-69岁', |
||||
|
value: 3, |
||||
|
color: 'rgba(120, 0, 255, 1)' |
||||
|
}, { |
||||
|
name: '70-79岁', |
||||
|
value: 4, |
||||
|
color: 'rgba(255, 120, 0, 1)' |
||||
|
}, { |
||||
|
name: '80岁以上', |
||||
|
value: 5, |
||||
|
color: 'rgba(255, 186, 0, 1)' |
||||
|
} |
||||
|
], |
||||
|
|
||||
|
}; |
||||
|
}, |
||||
|
async mounted() { |
||||
|
await nextTick(100); |
||||
|
this.initCharts() |
||||
|
this.initChartType() |
||||
|
this.getBuildingwarnlist(); |
||||
|
}, |
||||
|
methods: { |
||||
|
initCharts() { |
||||
|
const eId = document.getElementById('echartOrg') |
||||
|
let _charts = echarts.init(eId) |
||||
|
let option = { |
||||
|
tooltip: { |
||||
|
show: false, |
||||
|
trigger: 'item' |
||||
|
}, |
||||
|
legend: { |
||||
|
show: false, |
||||
|
orient: 'vertical', |
||||
|
top: '40%', |
||||
|
left: 'right', |
||||
|
textStyle: { |
||||
|
color: '#fff' |
||||
|
} |
||||
|
}, |
||||
|
title: { |
||||
|
text: '12000', //图形标题，配置在中间对应效果图的80% |
||||
|
subtext: '总数', |
||||
|
left: "center", |
||||
|
top: "center", |
||||
|
textStyle: { |
||||
|
color: "#fff", |
||||
|
fontSize: 28, |
||||
|
align: "center" |
||||
|
}, |
||||
|
subtextStyle: { |
||||
|
fontSize: 16, |
||||
|
color: '#fff' |
||||
|
} |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
// name: 'Access From', |
||||
|
type: 'pie', |
||||
|
// center: ['10%', '50%'], |
||||
|
radius: ['40%', '60%'], |
||||
|
avoidLabelOverlap: true, |
||||
|
// top: top + '%', |
||||
|
// height: '80%', |
||||
|
left: 'center', |
||||
|
width: 400, |
||||
|
label: { |
||||
|
show: true, |
||||
|
position: 'outer', |
||||
|
alignTo: 'edge', |
||||
|
formatter: '{a|{c}}\n{r|}\n{name|{b}}', |
||||
|
minMargin: 5, |
||||
|
edgeDistance: 20, |
||||
|
lineHeight: 15, |
||||
|
color: '#fff', |
||||
|
fontSize: 12, |
||||
|
// padding: [5], |
||||
|
distanceToLabelLine: 10, |
||||
|
rich: { |
||||
|
name: { |
||||
|
padding: [0, 6, 0, 6] |
||||
|
}, |
||||
|
a: { |
||||
|
fontSize: 15, |
||||
|
color: '#fff', |
||||
|
padding: [0, 6, 0, 6] |
||||
|
}, |
||||
|
r: { |
||||
|
backgroundColor: 'auto', |
||||
|
borderRadius: 6, |
||||
|
width: 6, |
||||
|
height: 6, |
||||
|
// padding: [3, 3, 0, -12] |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
emphasis: { |
||||
|
label: { |
||||
|
show: true, |
||||
|
fontSize: '14', |
||||
|
fontWeight: 'bold' |
||||
|
} |
||||
|
}, |
||||
|
labelLine: { |
||||
|
show: true, |
||||
|
length: 20, |
||||
|
length2: 0, |
||||
|
maxSurfaceAngle: 80, |
||||
|
lineStyle: { |
||||
|
cap: 'round' |
||||
|
} |
||||
|
}, |
||||
|
labelLayout: function (params) { |
||||
|
const isLeft = params.labelRect.x < _charts.getWidth() / 2; |
||||
|
const points = params.labelLinePoints; |
||||
|
// Update the end point. |
||||
|
points[2][0] = isLeft |
||||
|
? params.labelRect.x |
||||
|
: params.labelRect.x + params.labelRect.width; |
||||
|
return { |
||||
|
labelLinePoints: points |
||||
|
}; |
||||
|
}, |
||||
|
data: this.ageItem |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
option && _charts.setOption(option); |
||||
|
|
||||
|
}, |
||||
|
initChartType() { |
||||
|
const eId = document.getElementById('echartType') |
||||
|
let _charts = echarts.init(eId) |
||||
|
let option = { |
||||
|
tooltip: { |
||||
|
trigger: 'item' |
||||
|
}, |
||||
|
legend: { |
||||
|
show: true, |
||||
|
orient: 'vertical', |
||||
|
top: '20%', |
||||
|
right: 0, |
||||
|
textStyle: { |
||||
|
width: 90, |
||||
|
color: '#fff', |
||||
|
rich: { |
||||
|
a: { |
||||
|
width: 90 |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
formatter: name => { |
||||
|
for (let a = 0; a < this.eduItem.length; a++) { |
||||
|
// this.data 这个数据中有名称和次数 |
||||
|
if (this.eduItem[a].name === name) { |
||||
|
//两个名称进行对比，取出对应的次数 |
||||
|
let params1 = name + "\n"; //然后return你需要的legend格式即可 |
||||
|
console.log(params1); |
||||
|
let tmp = params1.split("\n"); |
||||
|
let res = "" + params1; |
||||
|
for (let i in tmp) { |
||||
|
res = res.replace(tmp[i], ""); |
||||
|
} |
||||
|
return res + params1; |
||||
|
} |
||||
|
} |
||||
|
// var target; |
||||
|
// for(var i = 0; i < this.eduItem.length; i++){ |
||||
|
// if(i == this.eduItem.length && parseFloat(this.eduItem[i].value * 100).toFixed(2) < parseFloat(0.01)){ |
||||
|
// target = " (<0.01" |
||||
|
// break; |
||||
|
// } |
||||
|
// if(name == this.eduItem[i].name){ |
||||
|
// target = " (" + (this.eduItem[i].value * 100).toFixed(2) + "" |
||||
|
// break; |
||||
|
// } |
||||
|
// } |
||||
|
// var arr = [ |
||||
|
// '{a|' + name + target + '%)}', |
||||
|
// ] |
||||
|
// return arr.join('\n'); |
||||
|
} |
||||
|
}, |
||||
|
title: { |
||||
|
text: '12000', //图形标题，配置在中间对应效果图的80% |
||||
|
subtext: '总数', |
||||
|
left: 196, |
||||
|
top: "center", |
||||
|
textAlign: 'center', |
||||
|
textStyle: { |
||||
|
color: "#fff", |
||||
|
fontSize: 28, |
||||
|
align: "center" |
||||
|
}, |
||||
|
subtextStyle: { |
||||
|
fontSize: 16, |
||||
|
color: '#fff', |
||||
|
align: 'center' |
||||
|
} |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
// name: 'Access From', |
||||
|
type: 'pie', |
||||
|
// center: ['50%', '50%'], |
||||
|
radius: ['40%', '60%'], |
||||
|
avoidLabelOverlap: true, |
||||
|
// top: top + '%', |
||||
|
// height: '80%', |
||||
|
// left: 0, |
||||
|
width: 400, |
||||
|
label: { |
||||
|
position: 'outside', |
||||
|
alignTo: 'edge', |
||||
|
formatter: '{a|{c}}\n{r|}\n{name|{b}}', |
||||
|
minMargin: 5, |
||||
|
edgeDistance: 20, |
||||
|
lineHeight: 15, |
||||
|
color: '#fff', |
||||
|
fontSize: 15, |
||||
|
rich: { |
||||
|
name: { |
||||
|
padding: [0, 6, 0, 6] |
||||
|
}, |
||||
|
a: { |
||||
|
fontSize: 15, |
||||
|
color: '#fff', |
||||
|
padding: [0, 6, 0, 6] |
||||
|
}, |
||||
|
r: { |
||||
|
backgroundColor: 'auto', |
||||
|
borderRadius: 6, |
||||
|
width: 6, |
||||
|
height: 6, |
||||
|
// padding: [3, 3, 0, -12] |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
emphasis: { |
||||
|
label: { |
||||
|
show: true, |
||||
|
fontSize: '14', |
||||
|
fontWeight: 'bold' |
||||
|
} |
||||
|
}, |
||||
|
labelLine: { |
||||
|
show: true, |
||||
|
length: 20, |
||||
|
length2: 0, |
||||
|
maxSurfaceAngle: 80 |
||||
|
}, |
||||
|
labelLayout: function (params) { |
||||
|
const isLeft = params.labelRect.x < _charts.getWidth() / 2; |
||||
|
const points = params.labelLinePoints; |
||||
|
// Update the end point. |
||||
|
points[2][0] = isLeft |
||||
|
? params.labelRect.x |
||||
|
: params.labelRect.x + params.labelRect.width; |
||||
|
return { |
||||
|
labelLinePoints: points |
||||
|
}; |
||||
|
}, |
||||
|
data: this.eduItem |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
option && _charts.setOption(option); |
||||
|
|
||||
|
}, |
||||
|
onClickList(index, level) { |
||||
|
this.activeIndex = index; |
||||
|
this.activeLevel = level; |
||||
|
this.pageNo = 1; |
||||
|
this.getUserwarnlist(); |
||||
|
}, |
||||
|
//具体人员列表 |
||||
|
async getUserwarnlist() { |
||||
|
const { activeIndex, activeLevel, warningList } = this; |
||||
|
const reqItem = warningList[activeIndex]; |
||||
|
let tableData = []; |
||||
|
const url = "/epmetuser/statsresiwarn/userwarnlist"; |
||||
|
let params = { |
||||
|
configId: reqItem.configId, |
||||
|
buildingIdList: reqItem["buildingIdList" + activeLevel], |
||||
|
pageNo: this.pageNo, |
||||
|
pageSize: this.pageSize, |
||||
|
}; |
||||
|
const { data, code, msg } = await requestPost(url, params); |
||||
|
if (code === 0) { |
||||
|
tableData = data.list.map((item, index) => { |
||||
|
return { |
||||
|
...item, |
||||
|
index: index + 1, |
||||
|
residentNames: item.residentNames || "暂无" |
||||
|
} |
||||
|
}); |
||||
|
this.tableData = tableData; |
||||
|
this.total = data.total; |
||||
|
} else { |
||||
|
} |
||||
|
}, |
||||
|
// 【人员预警】 楼宇预警数量列表 |
||||
|
async getBuildingwarnlist() { |
||||
|
const url = "/epmetuser/statsresiwarn/buildingwarnlist"; |
||||
|
let params = { |
||||
|
agencyId: this.$store.state.user.agencyId, |
||||
|
}; |
||||
|
const { data, code, msg } = await requestPost(url, params); |
||||
|
if (code === 0) { |
||||
|
this.warningList = data; |
||||
|
this.visibleLoading = false; |
||||
|
this.getUserwarnlist(); |
||||
|
} else { |
||||
|
} |
||||
|
}, |
||||
|
pageSizeChangeHandleNew(val) { |
||||
|
this.pageNo = 1; |
||||
|
this.pageSize = val; |
||||
|
}, |
||||
|
pageCurrentChangeHandleNew(val) { |
||||
|
this.pageNo = val; |
||||
|
this.getUserwarnlist(); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style |
||||
|
lang="scss" |
||||
|
src="@/assets/scss/modules/visual/warning.scss" |
||||
|
scoped |
||||
|
></style> |
||||
|
<style lang="scss" scoped> |
||||
|
.card-title { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
cursor: pointer; |
||||
|
.title-icon { |
||||
|
display: block; |
||||
|
width: 46px; |
||||
|
height: 34px; |
||||
|
box-sizing: border-box; |
||||
|
margin-right: 6px; |
||||
|
} |
||||
|
::v-deep .el-dropdown { |
||||
|
font-size: 18px; |
||||
|
color: #fff; |
||||
|
font-weight: 800; |
||||
|
} |
||||
|
.title-time { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
box-sizing: border-box; |
||||
|
margin-left: 30px; |
||||
|
font-size: 14px; |
||||
|
color: #fff; |
||||
|
.title-time-label { |
||||
|
margin-right: 10px; |
||||
|
} |
||||
|
::v-deep .el-date-editor--month { |
||||
|
width: 100px; |
||||
|
.el-input__inner { |
||||
|
width: 100px; |
||||
|
height: 24px; |
||||
|
box-sizing: border-box; |
||||
|
padding: 0; |
||||
|
font-size: 14px; |
||||
|
color: #fff; |
||||
|
line-height: 24px; |
||||
|
text-align: center; |
||||
|
background: #06186D; |
||||
|
border: 1px solid #1A64CC; |
||||
|
border-radius: 2px; |
||||
|
} |
||||
|
.el-input__prefix { |
||||
|
display: none; |
||||
|
} |
||||
|
.el-input__suffix { |
||||
|
right: 0; |
||||
|
.el-input__icon { |
||||
|
line-height: 24px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.card-echart { |
||||
|
display: flex; |
||||
|
margin-top: 40px; |
||||
|
height: 100%; |
||||
|
.card-left { |
||||
|
position: relative; |
||||
|
flex: 1; |
||||
|
// display: flex; |
||||
|
height: 100%; |
||||
|
.card-flex { |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.card-left-title { |
||||
|
position: relative; |
||||
|
padding-left: 40px; |
||||
|
font-size: 16px; |
||||
|
font-weight: 500; |
||||
|
color: #fff; |
||||
|
} |
||||
|
.card-left-title::after { |
||||
|
content: ''; |
||||
|
position: absolute; |
||||
|
top: 50%; |
||||
|
left: 20px; |
||||
|
width: 12px; |
||||
|
height: 12px; |
||||
|
box-sizing: border-box; |
||||
|
margin-top: -6px; |
||||
|
background: #2865FA; |
||||
|
border-radius: 50%; |
||||
|
} |
||||
|
.echart-wr { |
||||
|
position: relative; |
||||
|
flex-shrink: 0; |
||||
|
width: 50%; |
||||
|
height: 320px; |
||||
|
box-sizing: border-box; |
||||
|
.echart-org { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
.echart-cicle { |
||||
|
position: absolute; |
||||
|
top: 50%; |
||||
|
left: 50%; |
||||
|
width: 240px; |
||||
|
height: 240px; |
||||
|
box-sizing: border-box; |
||||
|
margin-top: -120px; |
||||
|
margin-left: -120px; |
||||
|
border: 1px dashed rgba(0, 96, 240, 1); |
||||
|
border-radius: 50%; |
||||
|
} |
||||
|
.echart-cicle0 { |
||||
|
left: 80px; |
||||
|
margin-left: 0; |
||||
|
} |
||||
|
} |
||||
|
.echart-wr100 { |
||||
|
width: 70%; |
||||
|
} |
||||
|
.echarts-tips { |
||||
|
width: 40%; |
||||
|
// flex: 1; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
} |
||||
|
.echarts-tips-wd50 { |
||||
|
width: 320px; |
||||
|
} |
||||
|
.tips-list, .tips-item, .tips-lists, .tips-items-num { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
.tips-list { |
||||
|
// width: 100%; |
||||
|
// height: 100%; |
||||
|
flex-wrap: wrap; |
||||
|
// justify-content: center; |
||||
|
.tips-item { |
||||
|
// flex: 1; |
||||
|
width: 50%; |
||||
|
margin-top: 20px; |
||||
|
// margin-right: 40px; |
||||
|
cursor: pointer; |
||||
|
.tips-item-icon { |
||||
|
width: 20px; |
||||
|
height: 10px; |
||||
|
box-sizing: border-box; |
||||
|
margin-right: 8px; |
||||
|
background: #1B51FF; |
||||
|
border-radius: 2px; |
||||
|
} |
||||
|
.tips-item-text { |
||||
|
font-size: 16px; |
||||
|
color: #D2E7FF; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.tips-lists { |
||||
|
width: 100%; |
||||
|
box-sizing: border-box; |
||||
|
padding: 30px 0 0 30px; |
||||
|
flex-wrap: wrap; |
||||
|
.tips-items { |
||||
|
margin-bottom: 30px; |
||||
|
margin-right: 40px; |
||||
|
// width: 50%; |
||||
|
cursor: pointer; |
||||
|
.tips-items-title { |
||||
|
position: relative; |
||||
|
width: 100px; |
||||
|
height: 26px; |
||||
|
box-sizing: border-box; |
||||
|
padding-left: 6px; |
||||
|
font-size: 16px; |
||||
|
color: #EFF0F1; |
||||
|
background: url('../../../../assets/img/shuju/measure/zi@2x.png') no-repeat left bottom; |
||||
|
&1 { |
||||
|
background: url('../../../../assets/img/shuju/measure/huang@2x.png') no-repeat left bottom; |
||||
|
} |
||||
|
&2 { |
||||
|
background: url('../../../../assets/img/shuju/measure/lan@2x.png') no-repeat left bottom; |
||||
|
} |
||||
|
&3 { |
||||
|
background: url('../../../../assets/img/shuju/measure/lanlv@2x.png') no-repeat left bottom; |
||||
|
} |
||||
|
&4 { |
||||
|
background: url('../../../../assets/img/shuju/measure/lv@2x.png') no-repeat left bottom; |
||||
|
} |
||||
|
} |
||||
|
.tips-items-num { |
||||
|
justify-content: space-between; |
||||
|
box-sizing: border-box; |
||||
|
margin-top: 10px; |
||||
|
// padding-right: 30px; |
||||
|
font-size: 20px; |
||||
|
.tips-item-has { |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.warning-box-bottom { |
||||
|
height: calc(100% - 500px); |
||||
|
box-sizing: border-box; |
||||
|
margin: 0; |
||||
|
padding: 0 30px; |
||||
|
// overflow-y: scroll; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue