loveflow
7 months ago
|
After Width: | Height: | Size: 4.5 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 4.2 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 4.3 KiB |
|
After Width: | Height: | Size: 4.5 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 4.6 KiB |
|
After Width: | Height: | Size: 4.4 KiB |
|
After Width: | Height: | Size: 4.6 KiB |
|
After Width: | Height: | Size: 4.5 KiB |
|
After Width: | Height: | Size: 33 KiB |
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 7.5 KiB |
|
After Width: | Height: | Size: 6.8 KiB |
|
After Width: | Height: | Size: 7.2 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 5.4 KiB |
|
After Width: | Height: | Size: 4.6 KiB |
|
After Width: | Height: | Size: 4.5 KiB |
@ -0,0 +1,222 @@
|
|||||||
|
<template>
|
||||||
|
<div style="height: 100%; width: 100%">
|
||||||
|
<g-chart :echartdata="option"></g-chart>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
chartObj: {
|
||||||
|
type: Object,
|
||||||
|
default: () => {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
option: {},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.setOption();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
setOption() {
|
||||||
|
let dataList = this.chartObj.data;
|
||||||
|
let maxArr = [];
|
||||||
|
let maxValue = 0;
|
||||||
|
let xData = [];
|
||||||
|
let yData = [];
|
||||||
|
let total = 0;
|
||||||
|
|
||||||
|
dataList.forEach((item) => {
|
||||||
|
xData.push(item.name);
|
||||||
|
yData.push(item.value);
|
||||||
|
if (maxValue < item.value) {
|
||||||
|
maxValue = item.value;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
dataList.forEach((item) => {
|
||||||
|
maxArr.push(maxValue);
|
||||||
|
total = total + item.value;
|
||||||
|
});
|
||||||
|
if (!total) {
|
||||||
|
total = 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.option = {
|
||||||
|
grid: {
|
||||||
|
left: "14",
|
||||||
|
top: "5%", // 设置条形图的边距
|
||||||
|
right: "0",
|
||||||
|
bottom: "0",
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: "category",
|
||||||
|
inverse: true,
|
||||||
|
data: xData,
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
verticalAlign: "bottom",
|
||||||
|
color: "#299CD4",
|
||||||
|
fontSize: 14,
|
||||||
|
fontFamily: "Microsoft YaHei",
|
||||||
|
align: "left",
|
||||||
|
padding: [0, 0, 5, 7],
|
||||||
|
rich: {
|
||||||
|
index: {
|
||||||
|
padding: [4, 0, 0, 1],
|
||||||
|
color: "#ffffff",
|
||||||
|
},
|
||||||
|
name: {
|
||||||
|
padding: [4, 16, 0, 2],
|
||||||
|
color: "#ffffff",
|
||||||
|
fontSize: 14,
|
||||||
|
},
|
||||||
|
rate: {
|
||||||
|
align: "right",
|
||||||
|
color: "rgba(255,255,255,0.9)",
|
||||||
|
fontSize: 12,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
formatter: (name, index) => {
|
||||||
|
const _index = index + 1;
|
||||||
|
if (dataList.length) {
|
||||||
|
const item = dataList.filter((item) => item.name == name)[0];
|
||||||
|
return `{index|${_index}.} {name|${name}}`;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
offset: 0,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
// 内
|
||||||
|
type: "bar",
|
||||||
|
barWidth: 6,
|
||||||
|
itemStyle: {
|
||||||
|
color: (params) => {
|
||||||
|
var color = {
|
||||||
|
type: "linear",
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
x2: 1,
|
||||||
|
y2: 0,
|
||||||
|
colorStops: [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: this.chartObj.color[0], // 0% 处的颜色
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: this.chartObj.color[1], // 100% 处的颜色
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
return color;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
data: dataList,
|
||||||
|
z: 2,
|
||||||
|
animationEasing: "elasticOut",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
// 外边框
|
||||||
|
type: "pictorialBar",
|
||||||
|
symbol: "rect",
|
||||||
|
symbolBoundingData: maxValue,
|
||||||
|
barWidth: 1,
|
||||||
|
itemStyle: {
|
||||||
|
barBorderRadius: 10,
|
||||||
|
normal: {
|
||||||
|
color: "none",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
padding: [-20, 0, 0, -30],
|
||||||
|
textStyle: {
|
||||||
|
rich: {
|
||||||
|
value: {
|
||||||
|
width: 54,
|
||||||
|
padding: [4, 10, 0, -60],
|
||||||
|
color: "#9CE0FF",
|
||||||
|
fontSize: 14,
|
||||||
|
},
|
||||||
|
rate: {
|
||||||
|
fontSize: 14,
|
||||||
|
color: "#9CE0FF",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
formatter: (params) => {
|
||||||
|
var text = `{value|${params.data}}{rate|${(
|
||||||
|
(params.data * 100) /
|
||||||
|
total
|
||||||
|
).toFixed(0)}%}`; // `{{f|(params.data / total) * 100 + %}`;
|
||||||
|
return text;
|
||||||
|
},
|
||||||
|
|
||||||
|
rich: {
|
||||||
|
a: {
|
||||||
|
color: "#9CE0FF",
|
||||||
|
fontSize: 16,
|
||||||
|
align: "right",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
position: "right",
|
||||||
|
distance: 1, // 向右偏移位置
|
||||||
|
show: true,
|
||||||
|
},
|
||||||
|
data: yData,
|
||||||
|
z: 0,
|
||||||
|
animationEasing: "elasticOut",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "外框",
|
||||||
|
type: "pictorialBar",
|
||||||
|
symbol: "rect",
|
||||||
|
symbolBoundingData: maxValue,
|
||||||
|
barGap: "-100%", // 设置外框粗细
|
||||||
|
data: maxArr,
|
||||||
|
barWidth: 6,
|
||||||
|
itemStyle: {
|
||||||
|
color: "rgba(255,255,255,0.06)", // 填充色
|
||||||
|
label: {
|
||||||
|
// 标签显示位置
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
z: 0,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
chartObj: {
|
||||||
|
handler(newval) {
|
||||||
|
this.setOption();
|
||||||
|
},
|
||||||
|
deep: true,
|
||||||
|
// immediate: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
@ -0,0 +1,572 @@
|
|||||||
|
<template>
|
||||||
|
<div class="inSecurityDetail">
|
||||||
|
<div class="screenRow screenTopRow">
|
||||||
|
<div class="screenLeft mr18">
|
||||||
|
<colWrap class="mb14" title="企业三防异常分析"></colWrap>
|
||||||
|
|
||||||
|
<colWrap class="" title="技防数据概览">
|
||||||
|
<el-row :gutter="16">
|
||||||
|
<el-col :span="6" v-for="item in jssjList" :key="item.name">
|
||||||
|
<div class="line">
|
||||||
|
<div class="icon">
|
||||||
|
<img :src="item.icon" />
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<div class="name">{{ item.name }}</div>
|
||||||
|
<div class="value">
|
||||||
|
{{ item.value }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</colWrap>
|
||||||
|
</div>
|
||||||
|
<div class="screenMid mr18"></div>
|
||||||
|
<div class="screenRight">
|
||||||
|
<colWrap class="mb14" title="企业应急预案与应急演练异常分析"></colWrap>
|
||||||
|
<colWrap class="" title="部门检查及系统研判异常分析"></colWrap>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="screenRow screenBtmRow">
|
||||||
|
<div class="screenBLeft mr18">
|
||||||
|
<colWrap class="mr18" title="应急预案">
|
||||||
|
<div class="yjYuAn">
|
||||||
|
<div class="line" v-for="(item, index) in yjList" :key="item.name">
|
||||||
|
<div class="item">
|
||||||
|
<div class="icon">{{ index + 1 }}</div>
|
||||||
|
<div class="name">{{ item.name }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="value">{{ item.value.toLocaleString() }}份</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</colWrap>
|
||||||
|
<colWrap class="" title="人防数据概览">
|
||||||
|
<div class="rfShuJu">
|
||||||
|
<div class="line" v-for="item in zbrList" :key="item.name">
|
||||||
|
<div class="icon">
|
||||||
|
<img :src="item.icon" />
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<div class="name">{{ item.name }}</div>
|
||||||
|
<div class="value">{{ item.value.toLocaleString() }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</colWrap>
|
||||||
|
</div>
|
||||||
|
<div class="screenBMid mr18">
|
||||||
|
<colWrap class="mr18" title="物防数据概览">
|
||||||
|
<div class="wfsjWrap">
|
||||||
|
<div class="xfsjHead">
|
||||||
|
<div class="xfsjIcon"></div>
|
||||||
|
<div class="xfsjTitle">消防物品</div>
|
||||||
|
</div>
|
||||||
|
<div class="xfsjBody">
|
||||||
|
<el-row :gutter="16">
|
||||||
|
<el-col :span="12" v-for="item in xfwpList" :key="item.name">
|
||||||
|
<div class="line">
|
||||||
|
<div class="icon">
|
||||||
|
<img :src="item.icon" />
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<div class="name">{{ item.name }}</div>
|
||||||
|
<div class="value">
|
||||||
|
{{ item.value.toLocaleString() }}<span>套</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="wfsjWrap">
|
||||||
|
<div class="xfsjHead">
|
||||||
|
<div class="xfsjIcon"></div>
|
||||||
|
<div class="xfsjTitle">反恐防爆</div>
|
||||||
|
</div>
|
||||||
|
<div class="xfsjBody">
|
||||||
|
<el-row :gutter="16">
|
||||||
|
<el-col :span="12" v-for="item in fkfbList" :key="item.name">
|
||||||
|
<div class="line">
|
||||||
|
<div class="icon">
|
||||||
|
<img :src="item.icon" />
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<div class="name">{{ item.name }}</div>
|
||||||
|
<div class="value">
|
||||||
|
{{ item.value.toLocaleString() }}<span>套</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</colWrap>
|
||||||
|
<colWrap class="" title="重点岗位人员身份">
|
||||||
|
<div class="zdgwWrap">
|
||||||
|
<div class="line" v-for="item in zdgwList" :key="item.name">
|
||||||
|
<div class="icon">
|
||||||
|
<img :src="item.icon" />
|
||||||
|
</div>
|
||||||
|
<div class="name">
|
||||||
|
{{ item.name }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</colWrap>
|
||||||
|
</div>
|
||||||
|
<div class="screenBRight">
|
||||||
|
<colWrap class="mr18" title="案件信息">
|
||||||
|
<barOne :chartObj="barOneObj"></barOne>
|
||||||
|
</colWrap>
|
||||||
|
<colWrap class="" title="企业整改异常分析"></colWrap>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import colWrap from "../components/colWrap.vue";
|
||||||
|
import barOne from "../components/bar.vue";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: { colWrap, barOne },
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
title: "",
|
||||||
|
yjList: [
|
||||||
|
{
|
||||||
|
name: "消防应急预案",
|
||||||
|
value: 32145,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "食品卫生应急预案",
|
||||||
|
value: 32145,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "停水停电应急预案",
|
||||||
|
value: 32145,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "防范被盗应急预案",
|
||||||
|
value: 32145,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "自然灾害应急预案",
|
||||||
|
value: 32145,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "作业事故应急预案",
|
||||||
|
value: 32145,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "反恐防暴应急预案",
|
||||||
|
value: 32145,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
zbrList: [
|
||||||
|
{
|
||||||
|
name: "值班人员",
|
||||||
|
value: 32145,
|
||||||
|
icon: require("@/assets/images/topic/stzbr.png"),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "巡逻人员",
|
||||||
|
value: 32145,
|
||||||
|
icon: require("@/assets/images/topic/stxlr.png"),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "应急处理人员",
|
||||||
|
value: 32145,
|
||||||
|
icon: require("@/assets/images/topic/styjr.png"),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
xfwpList: [
|
||||||
|
{
|
||||||
|
name: "消火栓",
|
||||||
|
value: 32145,
|
||||||
|
icon: require("@/assets/images/topic/xhs.png"),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "灭火器",
|
||||||
|
value: 32145,
|
||||||
|
icon: require("@/assets/images/topic/mhq.png"),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "逃生绳",
|
||||||
|
value: 32145,
|
||||||
|
icon: require("@/assets/images/topic/tss.png"),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "防毒面具",
|
||||||
|
value: 32145,
|
||||||
|
icon: require("@/assets/images/topic/fdmj.png"),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
fkfbList: [
|
||||||
|
{
|
||||||
|
name: "防爆桶",
|
||||||
|
value: 32145,
|
||||||
|
icon: require("@/assets/images/topic/fbt.png"),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "盾牌钢叉",
|
||||||
|
value: 32145,
|
||||||
|
icon: require("@/assets/images/topic/dpgc.png"),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "防刺服",
|
||||||
|
value: 32145,
|
||||||
|
icon: require("@/assets/images/topic/fcf.png"),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "防爆警棍",
|
||||||
|
value: 32145,
|
||||||
|
icon: require("@/assets/images/topic/fbjg.png"),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
jssjList: [
|
||||||
|
{
|
||||||
|
name: "视频监控",
|
||||||
|
value: 32145,
|
||||||
|
icon: require("@/assets/images/topic/spjk.png"),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "人行闸机",
|
||||||
|
value: 32145,
|
||||||
|
icon: require("@/assets/images/topic/rxzj.png"),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "楼宇对讲",
|
||||||
|
value: 32145,
|
||||||
|
icon: require("@/assets/images/topic/lydj.png"),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "人脸门禁",
|
||||||
|
value: 32145,
|
||||||
|
icon: require("@/assets/images/topic/rlmj.png"),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "电子脉冲",
|
||||||
|
value: 32145,
|
||||||
|
icon: require("@/assets/images/topic/dzmc.png"),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "人脸摄像头",
|
||||||
|
value: 32145,
|
||||||
|
icon: require("@/assets/images/topic/rlsxt.png"),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "车辆闸道",
|
||||||
|
value: 32145,
|
||||||
|
icon: require("@/assets/images/topic/rlmj.png"),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "指纹识别",
|
||||||
|
value: 32145,
|
||||||
|
icon: require("@/assets/images/topic/zwsb.png"),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "周界报警",
|
||||||
|
value: 32145,
|
||||||
|
icon: require("@/assets/images/topic/zjbj.png"),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "紧急报警",
|
||||||
|
value: 32145,
|
||||||
|
icon: require("@/assets/images/topic/jjbj.png"),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
zdgwList: [
|
||||||
|
{
|
||||||
|
name: "危险品领用人员",
|
||||||
|
icon: require("@/assets/images/topic/wxpl.png"),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "危险品保管人员",
|
||||||
|
icon: require("@/assets/images/topic/wxpb.png"),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "危险品使用人员",
|
||||||
|
icon: require("@/assets/images/topic/wxps.png"),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "危险品技术资质人员",
|
||||||
|
icon: require("@/assets/images/topic/wxpj.png"),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
barOneObj: {
|
||||||
|
data: [
|
||||||
|
{ name: "民事案件", value: 1123 },
|
||||||
|
{ name: "刑事案件", value: 808 },
|
||||||
|
{ name: "行政案件", value: 703 },
|
||||||
|
{ name: "经济案件", value: 613 },
|
||||||
|
{ name: "非诉讼案件", value: 933 },
|
||||||
|
],
|
||||||
|
color: ["#FFDE9C", "#0E9FF7"],
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.title = this.$route.query.cmy;
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import "@/loveflow/assets/index.scss";
|
||||||
|
.inSecurityDetail {
|
||||||
|
height: 100%;
|
||||||
|
padding: 16px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
overflow: hidden;
|
||||||
|
.screenRow {
|
||||||
|
display: flex;
|
||||||
|
.screenLeft {
|
||||||
|
height: 100%;
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
/* .el-row {
|
||||||
|
margin-top: -10px;
|
||||||
|
padding-top: vw(6);
|
||||||
|
background-color: rgba(108, 151, 149, 0.2);
|
||||||
|
} */
|
||||||
|
.line {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
height: vw(50);
|
||||||
|
padding: vw(2) vw(6);
|
||||||
|
margin-bottom: vw(6);
|
||||||
|
background: url("~@/assets/images/topic/strfsj.png") no-repeat center
|
||||||
|
center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
.icon {
|
||||||
|
margin-right: 6px;
|
||||||
|
width: vw(34);
|
||||||
|
height: vw(36);
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.item {
|
||||||
|
.name {
|
||||||
|
margin-bottom: 2px;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: vw(14);
|
||||||
|
color: #d0deee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.value {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: vw(18);
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.screenMid {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.screenRight {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.screenBLeft {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
.yjYuAn {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
justify-content: space-between;
|
||||||
|
height: 100%;
|
||||||
|
padding-bottom: 12px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
.line {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
height: vw(48);
|
||||||
|
padding: 0 12px;
|
||||||
|
.item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
.icon {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
margin-right: 4px;
|
||||||
|
width: vw(18);
|
||||||
|
height: vw(18);
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: vw(14);
|
||||||
|
color: #9cffc8;
|
||||||
|
border: solid 1px #9cffc8;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
.name {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: vw(14);
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.value {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: vw(16);
|
||||||
|
color: #9cffc8;
|
||||||
|
}
|
||||||
|
&:nth-child(odd) {
|
||||||
|
background-color: rgba(108, 128, 151, 0.1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.rfShuJu {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
justify-content: space-between;
|
||||||
|
height: 100%;
|
||||||
|
padding-bottom: 12px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
.line {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
height: vw(96);
|
||||||
|
padding: 0 12px;
|
||||||
|
background: url("~@/assets/images/topic/strfsj.png") no-repeat center
|
||||||
|
center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
.icon {
|
||||||
|
margin-right: 4px;
|
||||||
|
width: vw(76);
|
||||||
|
height: vw(76);
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.item {
|
||||||
|
.name {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: vw(16);
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.value {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: vw(18);
|
||||||
|
color: #f3fff9;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.screenBMid {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
.wfsjWrap {
|
||||||
|
height: 50%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
.xfsjHead {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
height: 30px;
|
||||||
|
background: url("~@/assets/images/topic/fsT.png") no-repeat center
|
||||||
|
center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
.xfsjIcon {
|
||||||
|
width: 34px;
|
||||||
|
height: 36px;
|
||||||
|
background: url("~@/assets/images/topic/fsIcon.png") no-repeat
|
||||||
|
center center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
.xfsjTitle {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #d9e7ff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.xfsjBody {
|
||||||
|
flex: 1;
|
||||||
|
.line {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: vw(10);
|
||||||
|
height: vw(60);
|
||||||
|
padding: 0 12px;
|
||||||
|
background: url("~@/assets/images/topic/strfsj.png") no-repeat
|
||||||
|
center center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
.icon {
|
||||||
|
margin-right: 6px;
|
||||||
|
width: vw(34);
|
||||||
|
height: vw(36);
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.item {
|
||||||
|
.name {
|
||||||
|
margin-bottom: 2px;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: vw(14);
|
||||||
|
color: #d0deee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.value {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: vw(16);
|
||||||
|
color: #ffffff;
|
||||||
|
span {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.zdgwWrap {
|
||||||
|
padding-bottom: 12px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
height: 100%;
|
||||||
|
.line {
|
||||||
|
height: vw(70);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: url("~@/assets/images/topic/zdgwb.png") no-repeat center
|
||||||
|
center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
.icon {
|
||||||
|
width: vw(35);
|
||||||
|
width: vw(34);
|
||||||
|
margin-right: vw(6);
|
||||||
|
}
|
||||||
|
.name {
|
||||||
|
font-size: vw(16);
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.screenBRight {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.screenTopRow {
|
||||||
|
height: 54%;
|
||||||
|
padding-bottom: 14px;
|
||||||
|
}
|
||||||
|
.screenBtmRow {
|
||||||
|
height: 46%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||