960 lines
24 KiB
Vue
960 lines
24 KiB
Vue
<template>
|
|
<div id="index" ref="appRef">
|
|
<!-- <div
|
|
class="bg"
|
|
:style="{
|
|
backgroundImage:
|
|
'url(' + require(`../assets/${backgroundPic.index}.png`) + ')',
|
|
}"
|
|
> -->
|
|
<div class="bg">
|
|
<!-- <div class="body-header"></div> -->
|
|
<div class="body-left"></div>
|
|
<div class="body-right"></div>
|
|
<div class="body-bottom"></div>
|
|
<dv-loading v-if="loading">Loading...</dv-loading>
|
|
<div v-else class="host-body">
|
|
<headerIndex :cdata="{ title: '首页', margin: '40px auto' }" :isShow="false" />
|
|
|
|
<div class="body-box">
|
|
<!-- 第三行数据 -->
|
|
<div class="content-box">
|
|
<!-- <div>
|
|
<dv-border-box-12>
|
|
<emergencyLeft />
|
|
</dv-border-box-12>
|
|
</div> -->
|
|
|
|
<!-- <div class="leftTravel">
|
|
<indexLeft />
|
|
</div>
|
|
|
|
|
|
<div class="rightTravel">
|
|
<indexRight />
|
|
</div> -->
|
|
<!-- <div class="food-content-box">
|
|
<div>
|
|
<div class="data-block-bk">
|
|
<div class="data-tit-bg">总巡查接警占比</div>
|
|
<div class="tabs_datag" style="margin: 9px 0 0 17px;">
|
|
<ul style="justify-content: flex-start;">
|
|
<li>昨日</li>
|
|
<li>本月</li>
|
|
<li>本年</li>
|
|
</ul>
|
|
</div>
|
|
<div class="data-flex" style="height: auto;">
|
|
<WaterChart />
|
|
<span class="data1-text">
|
|
<li><i>1000</i><span>电话联络量</span></li>
|
|
<li><i>236</i><span>真警数量</span></li>
|
|
<li>
|
|
<i style="color: #50d8fa">30%</i><span>真警占比</span>
|
|
</li>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="data-block-bk mar-top">
|
|
<div class="data-tit-bg">本周/月/季度巡查</div>
|
|
<div class="">
|
|
<HoriBar />
|
|
</div>
|
|
</div>
|
|
<div class="data-block-bk mar-top">
|
|
<div class="data-tit-bg">巡查轨迹</div>
|
|
<div class="tabs_datag" style="margin: 9px 0 0 17px;">
|
|
<ul style="justify-content: flex-start;">
|
|
<li>本周</li>
|
|
<li>本月</li>
|
|
<li>本年</li>
|
|
</ul>
|
|
</div>
|
|
<div class="data-flex" style="height: auto;">
|
|
<PieChart />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
|
|
</div>
|
|
|
|
<div class="rightIndex">
|
|
<div class="data-block-bk">
|
|
<div class="data-tit-bg">总巡防设备记录</div>
|
|
<div class="data-flex">
|
|
<Chart :cdata="xdata" />
|
|
</div>
|
|
</div>
|
|
<div class="data-block-bk mar-top">
|
|
<div class="data-tit-bg">总巡防管路记录</div>
|
|
<Chart :cdata="cdata" />
|
|
</div>
|
|
<div class="data-block-bk mar-top" style="height: 316px;">
|
|
<div class="data-tit-bg">总巡防异动记录</div>
|
|
<div class="tabs_datag">
|
|
<ul>
|
|
<li>本周</li>
|
|
<li>本月</li>
|
|
<li>本年</li>
|
|
</ul>
|
|
</div>
|
|
<ul class="data-exce">
|
|
<li><span>异动信息</span><span>无巡查</span></li>
|
|
<li><span>异动信息</span><span>无巡查</span></li>
|
|
<li><span>异动信息</span><span>无巡查</span></li>
|
|
<li><span>异动信息</span><span>无巡查</span></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div> -->
|
|
</div>
|
|
<!-- 第四行数据 -->
|
|
<div class="bottom-box">
|
|
<!-- <dv-border-box-13> </dv-border-box-13>
|
|
<dv-border-box-12> </dv-border-box-12> -->
|
|
</div>
|
|
<div class="footer-nav">
|
|
<!-- <div class="carChange" v-show="carChangeShow">
|
|
<div class="carMange" @click="goPage(0)">车辆管理</div>
|
|
<div class="carMange" >车辆资产管理</div>
|
|
</div> -->
|
|
|
|
<div class="baseBlock green" @click="goPage(7)">
|
|
<p>绿色双碳</p>
|
|
</div>
|
|
<div class="baseBlock land" @click="goPage(1)">
|
|
<p>房地资源</p>
|
|
</div>
|
|
<!-- <div class="baseBlock carAdmin" @mouseover="mouseOver"
|
|
@mouseleave="mouseLeave"> -->
|
|
<div
|
|
class="baseBlock carAdmin"
|
|
@mouseover="mouseOver"
|
|
@mouseleave="mouseLeave"
|
|
>
|
|
<div class="carChange" v-show="carChangeShow">
|
|
<!-- <div class="carChange"> -->
|
|
<div class="carMange" @click="goPage(0)">
|
|
<div class="zhihui">车辆管理</div>
|
|
<!-- <span>车辆管理</span> -->
|
|
</div>
|
|
<div class="carMange2" @click="goPage(8)">
|
|
<div class="zhihui">智慧出行</div>
|
|
</div>
|
|
</div>
|
|
<p>车辆管理</p>
|
|
</div>
|
|
<!-- <div class="baseBlock fire" @click="goPage(2)"> -->
|
|
<div class="baseBlock fire">
|
|
<p>消防安全</p>
|
|
</div>
|
|
<div class="baseBlock quanjing" @click="goPage(9)">
|
|
<p>360全景</p>
|
|
</div>
|
|
<div class="baseBlock travel" @click="goPage(5)">
|
|
<p>出行安全</p>
|
|
</div>
|
|
<div class="baseBlock wisdom" @click="goPage(3)">
|
|
<p>智慧工地</p>
|
|
</div>
|
|
<div class="baseBlock food" @click="goPage(4)">
|
|
<p>食品安全</p>
|
|
</div>
|
|
<!-- <div class="baseBlock emergency" @click="goPage(6)"> -->
|
|
<div class="baseBlock emergency">
|
|
<p>应急保障</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import drawMixin from "../utils/drawMixin";
|
|
import { formatTime } from "../utils/index.js";
|
|
import indexLeft from "./index/indexLeft";
|
|
import indexRight from "./index/indexRight";
|
|
import headerIndex from "../components/layout/header";
|
|
import centerLeft1 from "./centerLeft1";
|
|
import centerLeft2 from "./centerLeft2";
|
|
import centerRight1 from "./centerRight1";
|
|
import centerRight2 from "./centerRight2";
|
|
import center from "./center";
|
|
import bottomLeft from "./bottomLeft";
|
|
import bottomRight from "./bottomRight";
|
|
import Chart from "./index/chart.vue";
|
|
import HoriBar from "./index/horiBar.vue";
|
|
import PieChart from "./index/pieChart.vue";
|
|
import LineChart from "./index/lineChart.vue";
|
|
import WaterChart from "./index/waterChart.vue";
|
|
// import { url } from "inspector";
|
|
|
|
export default {
|
|
mixins: [drawMixin],
|
|
data() {
|
|
return {
|
|
backgroundPic: {
|
|
index: "bird-bg",
|
|
},
|
|
cdata: {
|
|
dataSH: [
|
|
{ name: "管路1", value: 80 },
|
|
{ name: "管路2", value: 50 },
|
|
{ name: "管路3", value: 70 },
|
|
{ name: "管路4", value: 30 },
|
|
{ name: "管路5", value: 20 },
|
|
{ name: "管路6", value: 65 },
|
|
{ name: "管路7", value: 73 },
|
|
],
|
|
},
|
|
xdata: {
|
|
dataSH: [
|
|
{ name: "设备1", value: 61 },
|
|
{ name: "设备2", value: 22 },
|
|
{ name: "设备3", value: 15 },
|
|
{ name: "设备4", value: 82 },
|
|
{ name: "设备5", value: 53 },
|
|
{ name: "设备6", value: 80 },
|
|
{ name: "设备7", value: 40 },
|
|
],
|
|
},
|
|
carChangeShow: false,
|
|
timing: null,
|
|
loading: true,
|
|
dateDay: null,
|
|
dateYear: null,
|
|
dateWeek: null,
|
|
weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
|
|
decorationColor: ["#568aea", "#000000"],
|
|
};
|
|
},
|
|
components: {
|
|
headerIndex,
|
|
centerLeft1,
|
|
centerLeft2,
|
|
centerRight1,
|
|
centerRight2,
|
|
center,
|
|
bottomLeft,
|
|
bottomRight,
|
|
indexRight,
|
|
indexLeft,
|
|
Chart,
|
|
HoriBar,
|
|
PieChart,
|
|
LineChart,
|
|
WaterChart,
|
|
},
|
|
mounted() {
|
|
this.timeFn();
|
|
this.cancelLoading();
|
|
},
|
|
beforeDestroy() {
|
|
clearInterval(this.timing);
|
|
},
|
|
methods: {
|
|
goPage(val) {
|
|
if (val == 0) {
|
|
console.log("车辆管理-主场景");
|
|
this.$router.push("/car");
|
|
} else if (val == 1) {
|
|
console.log("房地资源-主场景");
|
|
this.$router.push("/land");
|
|
} else if (val == 2) {
|
|
console.log("消防安全-主场景");
|
|
this.$router.push("/fire");
|
|
} else if (val == 3) {
|
|
console.log("智慧工地-主场景");
|
|
this.$router.push("/wisdom");
|
|
} else if (val == 4) {
|
|
console.log("食品安全-主场景");
|
|
this.$router.push("/food");
|
|
} else if (val == 5) {
|
|
console.log("出行安全-主场景");
|
|
this.$router.push("/travel");
|
|
} else if (val == 6) {
|
|
console.log("应急保障-主场景");
|
|
this.$router.push("/emergency");
|
|
} else if (val == 8) {
|
|
console.log("智慧出行-主场景");
|
|
this.$router.push("/carTravel");
|
|
} else if (val == 9) {
|
|
console.log("360全景-主场景");
|
|
} else {
|
|
console.log("绿色双碳-主场景");
|
|
this.$router.push("/green");
|
|
}
|
|
},
|
|
mouseOver() {
|
|
// this.active = "background-color:black";
|
|
// // 操作dom 获取p标签改变其样式
|
|
// var acps = this.$refs.acp
|
|
// acps.style.color = "red"
|
|
this.carChangeShow = true;
|
|
},
|
|
// 移出
|
|
mouseLeave() {
|
|
// this.active = "";
|
|
// this.$refs.acp.style=''
|
|
this.carChangeShow = false;
|
|
},
|
|
timeFn() {
|
|
this.timing = setInterval(() => {
|
|
this.dateDay = formatTime(new Date(), "HH: mm: ss");
|
|
this.dateYear = formatTime(new Date(), "yyyy-MM-dd");
|
|
this.dateWeek = this.weekday[new Date().getDay()];
|
|
}, 1000);
|
|
},
|
|
cancelLoading() {
|
|
setTimeout(() => {
|
|
this.loading = false;
|
|
}, 500);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import "../assets/scss/index.scss";
|
|
.body-left {
|
|
background: url("../assets/left.png") no-repeat !important;
|
|
}
|
|
.body-right {
|
|
background: url("../assets/right.png") no-repeat !important;
|
|
}
|
|
|
|
.body-bottom {
|
|
background: url("../assets/down.png") no-repeat !important;
|
|
}
|
|
.leftTravel {
|
|
position: absolute;
|
|
left: 2%;
|
|
}
|
|
.rightTravel {
|
|
position: absolute;
|
|
right: 2%;
|
|
}
|
|
.food-content-box {
|
|
display: grid;
|
|
grid-template-columns: 2.3fr 5fr 1.8fr;
|
|
margin: -45px 50px;
|
|
}
|
|
.rightIndex {
|
|
position: absolute;
|
|
right: 2%;
|
|
}
|
|
.data-block-bk {
|
|
border: 2px solid #29a3d3a1;
|
|
// background: #11223289;
|
|
background: rgba(16, 29, 37, 0.8);
|
|
// height: 280px;
|
|
.data-tit-bg {
|
|
height: 22px;
|
|
width: 430px;
|
|
padding: 16px 0px 16px 41px;
|
|
margin: 2px 0 0 0px;
|
|
font-size: 15px;
|
|
line-height: 9px;
|
|
font-weight: 700;
|
|
color: #a8ddf4;
|
|
background: url("../assets/tit.png") no-repeat -10px 10px;
|
|
background-size: contain;
|
|
}
|
|
.data-flex {
|
|
display: flex;
|
|
justify-content: center;
|
|
// padding: 20px;
|
|
}
|
|
}
|
|
$box-height: 410px;
|
|
$box-width: 300px;
|
|
.mar-top {
|
|
margin: 15px 0 0 0;
|
|
}
|
|
.bg-color-black {
|
|
height: $box-height - 30px;
|
|
border-radius: 10px;
|
|
}
|
|
.times_info {
|
|
// width: 232px;
|
|
// height: 360px;
|
|
padding: 16px 20px;
|
|
background: #112232b0;
|
|
.times_tit {
|
|
font-size: 14px;
|
|
color: #97c6d9;
|
|
text-align: left;
|
|
margin: 0px 0 12px 8px;
|
|
}
|
|
ul {
|
|
// display: flex;
|
|
// flex-direction: row;
|
|
// justify-content: space-between;
|
|
li {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
// width: 200px;
|
|
padding: 0 8px;
|
|
margin: 0 0 15px 0;
|
|
span {
|
|
width: 128px;
|
|
text-align: left;
|
|
float: left;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.right_h {
|
|
width: 101px;
|
|
float: left;
|
|
}
|
|
.right_flex {
|
|
display: flex;
|
|
}
|
|
.right_bot {
|
|
margin: 12px 0 2px 0;
|
|
}
|
|
.right_text {
|
|
font-size: 12px;
|
|
color: #fff;
|
|
}
|
|
.right_desc {
|
|
font-size: 12px;
|
|
color: #91a3ab;
|
|
}
|
|
.times_info2 {
|
|
height: 263px;
|
|
width: 220px;
|
|
padding: 16px 16px;
|
|
background: #112232b0;
|
|
.times_tit {
|
|
font-size: 14px;
|
|
color: #97c6d9;
|
|
text-align: left;
|
|
margin: 0px 0 12px 8px;
|
|
}
|
|
ul {
|
|
// display: flex;
|
|
// flex-direction: row;
|
|
// justify-content: space-between;
|
|
li {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
// width: 200px;
|
|
padding: 0 8px;
|
|
margin: 0 0 15px 0;
|
|
span {
|
|
width: 128px;
|
|
text-align: left;
|
|
float: left;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.footer-nav {
|
|
position: absolute;
|
|
// bottom: -100px;
|
|
// height: 200px;
|
|
// bottom: -6px;
|
|
bottom: -35px;
|
|
left: 50%;
|
|
margin: auto;
|
|
transform: scale(1, 1) translate(-50%, -50%);
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
width: 1178px;
|
|
.carChange {
|
|
position: absolute;
|
|
bottom: 95px;
|
|
left: 21%;
|
|
}
|
|
.carMange {
|
|
width: 100px;
|
|
height: 50px;
|
|
background: url("../assets/indexCar.png") no-repeat 0px -25px;
|
|
display: inline-block;
|
|
cursor: pointer;
|
|
// color: ;
|
|
.zhihui {
|
|
width: 50px;
|
|
height: 45px;
|
|
margin-right: 31px;
|
|
margin-top: -13px;
|
|
/* padding: 10px; */
|
|
display: inline-block;
|
|
}
|
|
}
|
|
.carMange2 {
|
|
// margin-left: 15px;
|
|
width: 100px;
|
|
height: 50px;
|
|
background: url("../assets/indexCar.png") no-repeat 0px -25px;
|
|
display: inline-block;
|
|
cursor: pointer;
|
|
margin-left: -31px;
|
|
// color: ;
|
|
.zhihui {
|
|
width: 50px;
|
|
height: 45px;
|
|
margin-right: 31px;
|
|
margin-top: -13px;
|
|
/* padding: 10px; */
|
|
display: inline-block;
|
|
}
|
|
}
|
|
.baseBlock {
|
|
cursor: pointer;
|
|
color: #68bff4;
|
|
font-size: 20px;
|
|
width: 120px;
|
|
height: 100px;
|
|
text-align: center;
|
|
letter-spacing: 3px;
|
|
}
|
|
.baseBlock:hover {
|
|
cursor: pointer;
|
|
color: #c7fcff;
|
|
font-size: 20px;
|
|
width: 120px;
|
|
height: 100px;
|
|
text-align: center;
|
|
letter-spacing: 3px;
|
|
}
|
|
.carAdmin {
|
|
background: url("../assets/index/car.png") no-repeat 0px -25px;
|
|
background-size: cover;
|
|
}
|
|
.carAdmin:hover {
|
|
background: url("../assets/index/car_hot.png") no-repeat 0px -25px;
|
|
background-size: cover;
|
|
}
|
|
.land {
|
|
background: url("../assets/index/land.png") no-repeat 0px -25px;
|
|
background-size: cover;
|
|
}
|
|
.land:hover {
|
|
background: url("../assets/index/land_hot.png") no-repeat 0px -25px;
|
|
background-size: cover;
|
|
}
|
|
.fire {
|
|
// background: url("../assets/index/fire.png") no-repeat 0px -25px;
|
|
background: url("../assets/index/fire_display.png") no-repeat 0px -25px;
|
|
background-size: cover;
|
|
color: #c7fcff;
|
|
}
|
|
.fire:hover {
|
|
// background: url("../assets/index/fire_hot.png") no-repeat 0px -25px;
|
|
// background-size: cover;
|
|
color: #c7fcff;
|
|
}
|
|
.wisdom {
|
|
background: url("../assets/index/wisdom.png") no-repeat 0px -25px;
|
|
background-size: cover;
|
|
}
|
|
|
|
.wisdom:hover {
|
|
background: url("../assets/index/wisdom_hot.png") no-repeat 0px -25px;
|
|
background-size: cover;
|
|
}
|
|
.food {
|
|
background: url("../assets/index/food.png") no-repeat 0px -25px;
|
|
background-size: cover;
|
|
}
|
|
.food:hover {
|
|
background: url("../assets/index/food_hot.png") no-repeat 0px -25px;
|
|
background-size: cover;
|
|
}
|
|
.travel {
|
|
background: url("../assets/index/travel.png") no-repeat 0px -25px;
|
|
background-size: cover;
|
|
}
|
|
.travel:hover {
|
|
background: url("../assets/index/travel_hot.png") no-repeat 0px -25px;
|
|
background-size: cover;
|
|
}
|
|
.emergency {
|
|
// background: url("../assets/index/emergency.png") no-repeat 0px -25px;
|
|
background: url("../assets/index/emergency_display.png") no-repeat 0px -25px;
|
|
background-size: cover;
|
|
color: #c7fcff;
|
|
}
|
|
.emergency:hover {
|
|
// background: url("../assets/index/emergency_hot.png") no-repeat 0px -25px;
|
|
// background-size: cover;
|
|
color: #c7fcff;
|
|
}
|
|
.green {
|
|
background: url("../assets/index/green.png") no-repeat;
|
|
background-size: cover;
|
|
}
|
|
.green:hover {
|
|
background: url("../assets/index/green_hot.png") no-repeat;
|
|
background-size: cover;
|
|
}
|
|
p {
|
|
margin: 90px 0 0 0;
|
|
}
|
|
.quanjing {
|
|
// background: url("../assets/index/360.png") no-repeat 0px -25px;
|
|
background: url("../assets/index/360.png") no-repeat 0px -35px;
|
|
// width: 150px;
|
|
// height: 120px;
|
|
// background-size: 150px 120px;
|
|
width: 155px;
|
|
height: 130px;
|
|
background-size: 150px 130px;
|
|
margin-top: -17px;
|
|
p {
|
|
margin: 110px 0 0 0;
|
|
}
|
|
}
|
|
|
|
.quanjing:hover {
|
|
background: url("../assets/index/360_hot.png") no-repeat 0px -35px;
|
|
// width: 150px;
|
|
// height: 120px;
|
|
// background-size: 150px 120px;
|
|
width: 155px;
|
|
height: 130px;
|
|
background-size: 150px 130px;
|
|
margin-top: -17px;
|
|
p {
|
|
margin: 110px 0 0 0;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
<style lang="scss">
|
|
.timeStle {
|
|
width: 150px !important;
|
|
color: #0e8bff;
|
|
input {
|
|
background: transparent;
|
|
border: 0;
|
|
height: 23px;
|
|
line-height: 23px;
|
|
color: #0e8bff;
|
|
padding: 0 3px;
|
|
}
|
|
.el-input__inner {
|
|
padding: 0 3px;
|
|
}
|
|
.el-input__inner:hover {
|
|
color: #0e8bff;
|
|
}
|
|
.el-input__prefix {
|
|
display: none;
|
|
top: -8px;
|
|
left: 2px;
|
|
}
|
|
.el-input__suffix {
|
|
top: -8px;
|
|
}
|
|
}
|
|
</style>
|
|
<style lang="scss" scoped>
|
|
@import "../assets/scss/index.scss";
|
|
.food-content-box {
|
|
display: grid;
|
|
grid-template-columns: 2.3fr 5fr 1.8fr;
|
|
margin: -48px 50px;
|
|
}
|
|
.float_time {
|
|
float: right;
|
|
margin: -23px 10px 0 0;
|
|
font-size: 13px;
|
|
padding: 2px 8px;
|
|
background: #0b4471;
|
|
border: 1px solid #0e8bff;
|
|
color: #0e8bff;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.leftt_bg {
|
|
width: 70px;
|
|
float: left;
|
|
border-right: 1px solid aqua;
|
|
margin: 0 8px 0 0;
|
|
padding: 0 6px 0 0;
|
|
.left_arrow {
|
|
cursor: pointer;
|
|
font-size: 13px;
|
|
letter-spacing: 1px;
|
|
padding: 3px 0 0 8px;
|
|
margin: 10px 0 23px 0;
|
|
width: 66px;
|
|
height: 26px;
|
|
background: url("../assets/fire/blue.png");
|
|
}
|
|
.left_arrow1 {
|
|
cursor: pointer;
|
|
font-size: 13px;
|
|
letter-spacing: 1px;
|
|
margin: 10px 0 23px 0;
|
|
padding: 3px 0 0 8px;
|
|
width: 66px;
|
|
height: 26px;
|
|
background: url("../assets/fire/red.png");
|
|
}
|
|
.left_arrow:hover {
|
|
cursor: pointer;
|
|
font-size: 13px;
|
|
letter-spacing: 1px;
|
|
margin: 10px 0 23px 0;
|
|
padding: 3px 0 0 8px;
|
|
width: 66px;
|
|
height: 26px;
|
|
background: url("../assets/fire/red.png");
|
|
}
|
|
}
|
|
.right_h {
|
|
width: 101px;
|
|
float: left;
|
|
}
|
|
.right_flex {
|
|
display: flex;
|
|
}
|
|
.right_bot {
|
|
margin: 12px 0 2px 0;
|
|
}
|
|
.right_text {
|
|
font-size: 12px;
|
|
color: #fff;
|
|
}
|
|
.right_desc {
|
|
font-size: 12px;
|
|
color: #91a3ab;
|
|
}
|
|
.times_info {
|
|
// width: 232px;
|
|
// height: 360px;
|
|
padding: 16px 20px;
|
|
background: #112232b0;
|
|
.times_tit {
|
|
font-size: 14px;
|
|
color: #97c6d9;
|
|
text-align: left;
|
|
margin: 0px 0 12px 8px;
|
|
}
|
|
ul {
|
|
// display: flex;
|
|
// flex-direction: row;
|
|
// justify-content: space-between;
|
|
li {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
// width: 200px;
|
|
padding: 0 8px;
|
|
margin: 0 0 15px 0;
|
|
span {
|
|
width: 128px;
|
|
text-align: left;
|
|
float: left;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.times_info2 {
|
|
height: 263px;
|
|
width: 220px;
|
|
padding: 16px 16px;
|
|
background: #112232b0;
|
|
.times_tit {
|
|
font-size: 14px;
|
|
color: #97c6d9;
|
|
text-align: left;
|
|
margin: 0px 0 12px 8px;
|
|
}
|
|
ul {
|
|
// display: flex;
|
|
// flex-direction: row;
|
|
// justify-content: space-between;
|
|
li {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
// width: 200px;
|
|
padding: 0 8px;
|
|
margin: 0 0 15px 0;
|
|
span {
|
|
width: 128px;
|
|
text-align: left;
|
|
float: left;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.out_nums {
|
|
font-size: 12px;
|
|
color: #dbdbdc;
|
|
// display: flex;
|
|
margin: 0 0 6px 0;
|
|
}
|
|
.times_nums {
|
|
display: flex;
|
|
i {
|
|
font-style: normal;
|
|
font-size: 18px;
|
|
color: #ffc426;
|
|
}
|
|
span {
|
|
font-size: 12px;
|
|
color: #fff;
|
|
}
|
|
}
|
|
.times_precent {
|
|
display: flex;
|
|
i {
|
|
font-style: normal;
|
|
font-size: 15px;
|
|
color: #ffc426;
|
|
}
|
|
span {
|
|
font-size: 12px;
|
|
color: #fff;
|
|
}
|
|
}
|
|
.data-block-bk {
|
|
border: 2px solid #29a3d3a1;
|
|
// background: #11223289;
|
|
background: rgba(16, 29, 37, 0.8);
|
|
// height: 280px;
|
|
.data-tit-bg {
|
|
height: 22px;
|
|
width: 430px;
|
|
padding: 16px 0px 16px 41px;
|
|
margin: 2px 0 0 0px;
|
|
font-size: 15px;
|
|
line-height: 9px;
|
|
font-weight: 700;
|
|
color: #a8ddf4;
|
|
background: url("../assets/tit.png") no-repeat -10px 10px;
|
|
background-size: contain;
|
|
}
|
|
.data-flex {
|
|
display: flex;
|
|
justify-content: center;
|
|
// padding: 20px;
|
|
}
|
|
}
|
|
$box-height: 410px;
|
|
$box-width: 300px;
|
|
.mar-top {
|
|
margin: 15px 0 0 0;
|
|
}
|
|
.bg-color-black {
|
|
height: $box-height - 30px;
|
|
border-radius: 10px;
|
|
}
|
|
.text {
|
|
color: #c3cbde;
|
|
}
|
|
.body-box {
|
|
.dv-scr-board {
|
|
// width: 270px;
|
|
height: 450px;
|
|
}
|
|
}
|
|
.dv-padd {
|
|
// line-height: 19px;
|
|
padding: 10px 10px 0 30px;
|
|
}
|
|
.center_block {
|
|
width: 260px;
|
|
height: 265px;
|
|
|
|
.cen_block {
|
|
width: 195px;
|
|
height: 148px;
|
|
background: url("../assets/foodSafe/card.png");
|
|
margin: auto;
|
|
cursor: pointer;
|
|
.cen_tit {
|
|
color: rgba(255, 255, 255, 0.826);
|
|
font-weight: 570;
|
|
font-size: 14px;
|
|
text-align: center;
|
|
letter-spacing: 1px;
|
|
padding: 22px 0 3px 0;
|
|
}
|
|
.cen_bg {
|
|
width: 128px;
|
|
height: 81px;
|
|
margin: auto;
|
|
}
|
|
}
|
|
|
|
.cen_map {
|
|
width: 35px;
|
|
height: 45px;
|
|
background: url("../assets/foodSafe/map.png");
|
|
margin: auto;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
.center_block:hover {
|
|
width: 260px;
|
|
height: 265px;
|
|
.cen_block {
|
|
width: 195px;
|
|
height: 148px;
|
|
background: url("../assets/foodSafe/card_hot.png");
|
|
margin: auto;
|
|
cursor: pointer;
|
|
}
|
|
.cen_map {
|
|
width: 99px;
|
|
height: 106px;
|
|
background: url("../assets/foodSafe/map_hot.png");
|
|
margin: -32px auto 0 auto;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
.data-exce {
|
|
li {
|
|
height: 40px;
|
|
width: 402px;
|
|
margin: 10px auto 20px auto;
|
|
background: url("../assets/fire/firesafe.png");
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
span {
|
|
margin: 10px 20px 10px 62px;
|
|
}
|
|
}
|
|
}
|
|
.data1-text {
|
|
margin: 18px 0 0 0;
|
|
li {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-end;
|
|
margin: 20px 0;
|
|
i {
|
|
color: #046afb;
|
|
font-style: normal;
|
|
font-size: 28px;
|
|
margin: 0 20px 0 0;
|
|
font-weight: bold;
|
|
text-align: right;
|
|
}
|
|
span {
|
|
width: 120px;
|
|
color: #91a3ab;
|
|
text-align: left;
|
|
}
|
|
}
|
|
}
|
|
.c_posi {
|
|
position: absolute;
|
|
}
|
|
</style>
|