You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
832 lines
21 KiB
832 lines
21 KiB
<template>
|
|
<div class="webindex">
|
|
<div class="zongcons">
|
|
<div class="maps">
|
|
<div class="wenboxs">
|
|
<div class="wenbox">
|
|
<div class="tubiao"><span class="myiconfont icon-shishijiance1 tolzi"></span></div>
|
|
<div class="tos">
|
|
<div class="tit nums">河北仓库<span class="num">3</span>家</div>
|
|
<div class="tit nums">货物数<span class="num">4575</span>个</div>
|
|
</div>
|
|
</div>
|
|
<div class="wenbox">
|
|
<div class="tubiao"><span class="myiconfont icon-louyuzidonghua tolzi"></span></div>
|
|
<div class="tos">
|
|
<div class="tit nums">湖北仓库<span class="num">3</span>家</div>
|
|
<div class="tit nums">货物数<span class="num">2575</span>个</div>
|
|
</div>
|
|
</div>
|
|
<div class="wenbox">
|
|
<div class="tubiao"><span class="myiconfont icon-shebeitaizhang tolzi"></span></div>
|
|
<div class="tos">
|
|
<div class="tit nums">黑龙江<span class="num">3</span>家</div>
|
|
<div class="tit nums">货物数<span class="num">4575</span>个</div>
|
|
</div>
|
|
</div>
|
|
<div class="wenbox">
|
|
<div class="tubiao"><span class="myiconfont icon-zhihuilouyu tolzi"></span></div>
|
|
<div class="tos">
|
|
<div class="tit nums">上海仓库<span class="num">1</span>家</div>
|
|
<div class="tit nums">货物数<span class="num">123</span>个</div>
|
|
</div>
|
|
</div>
|
|
<div class="wenbox">
|
|
<div class="tubiao"><span class="myiconfont icon-rizhi2 tolzi"></span></div>
|
|
<div class="tos">
|
|
<div class="tit nums">江苏仓库<span class="num">1</span>家</div>
|
|
<div class="tit nums">货物数<span class="num">126</span>个</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
<home-map style="height:600px"></home-map>
|
|
</div>
|
|
<!-- 第3行 -->
|
|
<div class="con">
|
|
<!-- 第1 -->
|
|
<div class="news">
|
|
<div class="title">
|
|
<div class="newstits">报警信息</div>
|
|
<div class="more" @click="toMore()">更多></div>
|
|
</div>
|
|
<div class="content">
|
|
<div class="newsli" v-for="(item, index) in Datalist" :key="index" @click="toinfo()">
|
|
<div class="dot">•</div>
|
|
<div class="tit">{{ item.name }}</div>
|
|
<div class="time">{{ item.createTime }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 第1 -->
|
|
<div class="news">
|
|
<div class="title">
|
|
<div class="newstits">提醒任务</div>
|
|
<div class="more" @click="toMoreb()">更多></div>
|
|
</div>
|
|
<div class="content">
|
|
<div class="newsli" v-for="(item, index) in Datalista" :key="index" @click="toinfo()">
|
|
<div class="dot">•</div>
|
|
<div class="tit">{{ item.title }}</div>
|
|
<div class="time">{{ item.createTime }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- -->
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="rightbars tops">
|
|
<!-- 第1个 -->
|
|
|
|
<!-- <div class="topboxs">
|
|
<div class="topbox">
|
|
<div class="toptitle">入侵报警</div>
|
|
<div class="mids">
|
|
<div class="lefts">
|
|
<div class="icon myiconfont iconbox iconbox_yellow"></div>
|
|
</div>
|
|
<div class="rights">
|
|
<div class="note">正常：<span class="bluezi">26</span></div>
|
|
<div class="note">离线：<span class="huizi">12</span></div>
|
|
<div class="note">报警：<span class="redzi">11</span></div>
|
|
</div>
|
|
<div class="bar">
|
|
<pie-chartrenyuan :chart-data="ruqinbaojing_Chart"></pie-chartrenyuan>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> -->
|
|
<!-- 第2个 -->
|
|
<div class="topboxs">
|
|
<div class="topbox">
|
|
<div class="toptitle">视频监控</div>
|
|
<div class="mids">
|
|
<div class="lefts">
|
|
<div class="icon myiconfont iconbox iconbox_blue"></div>
|
|
</div>
|
|
<div class="rights">
|
|
<div class="note">正常：<span class="bluezi">{{ statusDataSp.online == null ? 0 : statusDataSp.online }}</span></div>
|
|
<div class="note">离线：<span class="huizi">{{ statusDataSp.offline == null ? 0 : statusDataSp.offline }}</span>
|
|
</div>
|
|
<div class="note"><span class="redzi"></span></div>
|
|
</div>
|
|
<div class="bar">
|
|
<pie-chartrenyuan :chart-data="shipinjiankong_Chart"></pie-chartrenyuan>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 第3个 -->
|
|
<div class="topboxs">
|
|
<div class="topbox">
|
|
<div class="toptitle">门禁管理</div>
|
|
<div class="mids">
|
|
<div class="lefts">
|
|
<div class="icon myiconfont iconbox iconbox_zi"></div>
|
|
</div>
|
|
<div class="rights">
|
|
<div class="note">正常：<span class="bluezi">38</span></div>
|
|
<div class="note">离线：<span class="huizi">15</span></div>
|
|
<!-- <div class="note">报警：<span class="redzi">12</span></div> -->
|
|
</div>
|
|
<div class="bar">
|
|
<pie-chartrenyuan :chart-data="menjinguanli_Chart"></pie-chartrenyuan>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 第4个 -->
|
|
<div class="topboxs">
|
|
<div class="topbox">
|
|
<div class="toptitle">电子围栏</div>
|
|
<div class="mids">
|
|
<div class="lefts">
|
|
<div class="icon myiconfont iconbox iconbox_red"></div>
|
|
</div>
|
|
<div class="rights">
|
|
<div class="note">正常：<span class="bluezi">{{ statusDataWl.online == null ? 0 : statusDataWl.online }}</span></div>
|
|
<div class="note">离线：<span class="huizi">{{ statusDataWl.offline == null ? 0 : statusDataWl.offline }}</span></div>
|
|
<!-- <div class="note">报警：<span class="redzi">11</span></div> -->
|
|
</div>
|
|
<div class="bar">
|
|
<pie-chartrenyuan :chart-data="dianziweilan_Chart"></pie-chartrenyuan>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 11 -->
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import VueStomp from 'vue-stomp'
|
|
import Vue from 'vue'
|
|
Vue.use(VueStomp)
|
|
import { login1 } from '@/api/system/user/login.js'
|
|
import * as echarts from "echarts";
|
|
import PieChartrenyuan from '@/views/echarts/components/PieChartrenyuan'
|
|
import HomeMap from '@/views/dashboard/components/HomeMap'
|
|
import { getCallPolicePage } from '@/api/callPolice/callPolice'
|
|
import { getInfoPage, getUnread, ws } from '@/api/yInfo/yInfo'
|
|
import { getStatusCount } from '@/api/device/device'
|
|
import { init } from 'events';
|
|
// 1.1入侵报警饼图
|
|
const ruqinbaojing_Chart = {
|
|
// seriesName: '入侵报警',
|
|
unit: '次',
|
|
color: ['#34ffff', '#34abff', '#4c6eff'],
|
|
Data: {
|
|
seriesData: [
|
|
{ value: 56, name: '正常' },
|
|
{ value: 39, name: '离线' },
|
|
{ value: 28, name: '报警' }
|
|
]
|
|
},
|
|
label: {
|
|
normal: {
|
|
position: 'inner',
|
|
show: false
|
|
}
|
|
},
|
|
|
|
// radius: ['50%', '55%']
|
|
}
|
|
// 1.2视频监控饼图
|
|
const shipinjiankong_Chart = {
|
|
// seriesName: '视频监控',
|
|
unit: '次',
|
|
color: ['#fe7f02', '#049f51'],
|
|
Data: {
|
|
seriesData: [
|
|
{ value: 39, name: '正常' },
|
|
{ value: 19, name: '离线' },
|
|
// { value: 12, name: '报警' }
|
|
]
|
|
},
|
|
label: {
|
|
normal: {
|
|
position: 'inner',
|
|
show: false
|
|
}
|
|
},
|
|
|
|
// radius: ['50%', '55%']
|
|
}
|
|
// 1.3门禁管理饼图
|
|
const menjinguanli_Chart = {
|
|
// seriesName: '门禁管理',
|
|
unit: '次',
|
|
color: ['#FCCE10',
|
|
'#E87C25',
|
|
'#C1232B'],
|
|
Data: {
|
|
seriesData: [
|
|
{ value: 38, name: '正常' },
|
|
{ value: 15, name: '离线' },
|
|
// { value: 12, name: '报警' }
|
|
]
|
|
},
|
|
label: {
|
|
normal: {
|
|
position: 'inner',
|
|
show: false,
|
|
layoutAnimation: false
|
|
}
|
|
},
|
|
}
|
|
// 1.4电子围栏饼图
|
|
const dianziweilan_Chart = {
|
|
// seriesName: '电子围栏',
|
|
unit: '次',
|
|
color: ['#9BCA63',
|
|
'#FAD860',
|
|
'#F3A43B'],
|
|
Data: {
|
|
seriesData: [
|
|
{ value: 24, name: '正常' },
|
|
{ value: 8, name: '离线' },
|
|
{ value: 16, name: '报警' }
|
|
]
|
|
},
|
|
label: {
|
|
normal: {
|
|
position: 'inner',
|
|
show: false
|
|
}
|
|
},
|
|
|
|
// radius: ['50%', '55%']
|
|
}
|
|
// 1.电子巡更饼图
|
|
const dianzixungeng_Chart = {
|
|
// seriesName: '电子巡更',
|
|
unit: '次',
|
|
color: ['#60C0DD',
|
|
'#D7504B',
|
|
'#C6E579'],
|
|
Data: {
|
|
seriesData: [
|
|
{ value: 39, name: '正常' },
|
|
{ value: 16, name: '离线' },
|
|
{ value: 12, name: '报警' }
|
|
]
|
|
},
|
|
label: {
|
|
normal: {
|
|
position: 'inner',
|
|
show: false
|
|
}
|
|
},
|
|
|
|
// radius: ['50%', '55%']
|
|
}
|
|
export default {
|
|
name: 'index',
|
|
components: {
|
|
PieChartrenyuan, HomeMap,
|
|
},
|
|
created() {
|
|
var _self = this
|
|
// setInterval(function () {
|
|
// _self.getMessage();
|
|
// }, 20000)
|
|
|
|
this.init()
|
|
},
|
|
data() {
|
|
return {
|
|
ruqinbaojing_Chart: ruqinbaojing_Chart, // 1.1
|
|
shipinjiankong_Chart: shipinjiankong_Chart,
|
|
menjinguanli_Chart: menjinguanli_Chart,
|
|
dianziweilan_Chart: dianziweilan_Chart,
|
|
dianzixungeng_Chart: dianzixungeng_Chart,
|
|
token: '',
|
|
statusDataSp: {},
|
|
statusDataWl: {},
|
|
Datalista: [],
|
|
Datalist: [],
|
|
}
|
|
},
|
|
methods: {
|
|
toDoMessagge() {
|
|
// 先查询未读信息
|
|
// getUnread().then((response) => {
|
|
// console.log('-------------查询未读信息结果：' + response.data)
|
|
// if (response.code === 20000 && response.data) {
|
|
// this.$store.dispatch('app/setSysMessageCount', response.data)
|
|
this.$store.dispatch('app/setSysMessageCount', "11111")
|
|
// } else {
|
|
// this.$store.dispatch('app/setSysMessageCount', 0)
|
|
// }
|
|
// })
|
|
},
|
|
responseCallback(frame) {
|
|
var data = JSON.parse(frame.body)
|
|
// 语音播放
|
|
// this.bofang1(data)
|
|
// 报警
|
|
this.$notify({
|
|
title: '订单消息',
|
|
dangerouslyUseHTMLString: true,
|
|
// message: "<img src='/image/yujing.png'>" + data.createTime,
|
|
// message: "<img src='/image/yujing.png'><span>32123312</span>",
|
|
message: "<div style='display: flex;flex-direction: row;flex-wrap: nowrap;justify-content: flex-start;align-items:center;margin: 0 auto;height:60px;line-height: 60px;'><img style='width:40px;height:40px;margin: 0 10px 0 0;' src='/image/yujing.png'>" + "<span style='display: inline-block;margin: 0 0px 0 0;height:40px;line-height: 40px;font-weight: bold;'>" + data.callType + "</span></div>",
|
|
position: 'bottom-right',
|
|
onClick: () => {
|
|
// this.playText(data.createTime)
|
|
// this.getServicePageLists()
|
|
},
|
|
duration: 3000,
|
|
})
|
|
|
|
// this.$store.dispatch('app/setSysMessageCount', this.sysmesCount + 1)
|
|
},
|
|
onConnected(frame) {
|
|
// 订阅广播系统通知
|
|
this.$stompClient.subscribe(
|
|
'/topic/subscribe',
|
|
this.responseCallback,
|
|
this.onFailed
|
|
)
|
|
//
|
|
// 订阅点对点 通过用户id指定用户
|
|
// this.$stompClient.subscribe(
|
|
// '/user/' + this.userId + '/queue/subscribewarn',
|
|
// this.responseCallback,
|
|
// this.onFailed
|
|
// )
|
|
},
|
|
onFailed(frame) {
|
|
console.log('gongzuotai连接ws失败： ' + JSON.stringify(frame))
|
|
},
|
|
connectSrv() {
|
|
var headers = {}
|
|
// console.log('ws', ws)
|
|
this.connetWM(ws, headers, this.onConnected, this.onFailed)
|
|
},
|
|
onConnected(frame) {
|
|
// 订阅广播系统通知
|
|
this.$stompClient.subscribe(
|
|
'/topic/subscribe',
|
|
this.responseCallback,
|
|
this.onFailed
|
|
)
|
|
// 订阅点对点 通过用户id指定用户
|
|
// this.$stompClient.subscribe(
|
|
// '/user/' + this.userId + '/queue/subscribewarn',
|
|
// this.responseCallback,
|
|
// this.onFailed
|
|
// )
|
|
},
|
|
init() {
|
|
this.toDoMessagge()
|
|
this.timer = setInterval(this.toDoMessagge, 60000)
|
|
this.connectSrv()
|
|
getStatusCount({ deviceType: 1 }).then(res => {
|
|
this.statusDataSp = res.data
|
|
this.shipinjiankong_Chart.Data.seriesData = []
|
|
var offline = this.statusDataSp.offline == null ? 0 : this.statusDataSp.offline
|
|
var online = this.statusDataSp.online == null ? 0 : this.statusDataSp.online
|
|
var obj = { name: '正常', value: online }
|
|
var obj1 = { name: '离线', value: offline }
|
|
this.shipinjiankong_Chart.Data.seriesData.push(obj)
|
|
this.shipinjiankong_Chart.Data.seriesData.push(obj1)
|
|
})
|
|
getStatusCount({ deviceType: 2 }).then(res => {
|
|
this.statusDataWl = res.data
|
|
this.dianziweilan_Chart.Data.seriesData = []
|
|
var offline = this.statusDataWl.offline == null ? 0 : this.statusDataWl.offline
|
|
var online = this.statusDataWl.online == null ? 0 : this.statusDataWl.online
|
|
var obj = { name: '正常', value: online }
|
|
var obj1 = { name: '离线', value: offline }
|
|
this.dianziweilan_Chart.Data.seriesData.push(obj)
|
|
this.dianziweilan_Chart.Data.seriesData.push(obj1)
|
|
})
|
|
getCallPolicePage({ current: 1, size: 5 }).then((res) => {
|
|
console.log(res)
|
|
if (res.code == 200) {
|
|
this.Datalist = res.data.records
|
|
} else {
|
|
this.Datalist = []
|
|
}
|
|
})
|
|
getInfoPage({ current: 1, size: 5 }).then((res) => {
|
|
this.listLoading = false
|
|
if (res.code == 200) {
|
|
this.Datalista = res.data.records
|
|
} else {
|
|
this.Datalista = []
|
|
}
|
|
})
|
|
},
|
|
toMore() {
|
|
this.$router.push({
|
|
path: '/baojingchaxun/baojingchaxunList',
|
|
})
|
|
},
|
|
toMoreb() {
|
|
this.$router.push({
|
|
path: '/xiaoxi/xiaoxiList',
|
|
})
|
|
},
|
|
getMessage() {
|
|
|
|
this.$notify({
|
|
title: '报警消息',
|
|
dangerouslyUseHTMLString: true,
|
|
// // message: "<img src='" + warningIcon + "'>" + data.messageContent,
|
|
// message: "<img style='width:40px;height:40px;margin: 0 10px 0 0;' src='/image/yujing.png'>" + "<span style='display: inline-block;margin: 0 0px 0 0;height:40px;line-height: 40px;font-weight: bold;'>新的报警待处理</span>",
|
|
|
|
message: " <div style='display: flex;flex-direction: row;flex-wrap: nowrap;justify-content: flex-start;align-items:center;margin: 0 auto;height:60px;line-height: 60px;'><img style='width:40px;height:40px;margin: 0 10px 0 0;' src='/image/yujing.png'>" + "<span style='display: inline-block;margin: 0 0px 0 0;height:40px;line-height: 40px;font-weight: bold;'>新的报警待处理</span></div>",
|
|
position: 'bottom-right',
|
|
onClick: () => {
|
|
this.$router.push({
|
|
path: '/xiaoxi/xiaoxiList',
|
|
})
|
|
// alert("这是一条新订单")
|
|
// this.playText('你有一条报警信息未读')
|
|
// this.getServicePageLists()
|
|
},
|
|
duration: 3000,
|
|
})
|
|
},
|
|
// getToken(){
|
|
// let params = {
|
|
// password: "329653",
|
|
// roleSid: "",
|
|
// token: "",
|
|
// userName: "15097329653",
|
|
// verifyCode: ""
|
|
// }
|
|
// login1(params).then(res => {
|
|
// this.token = res.data.token
|
|
// window.sessionStorage.setItem('token', res.data.token)
|
|
// })
|
|
// }
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.zongcons {
|
|
margin: 0;
|
|
padding: 0;
|
|
flex: 1;
|
|
width: 100%;
|
|
height: calc(100% - 160px);
|
|
}
|
|
|
|
.rightbars {}
|
|
|
|
.zongcons .maps {
|
|
width: 100%;
|
|
height: 605px;
|
|
padding: 40px 0 0 100px;
|
|
text-align: right;
|
|
}
|
|
|
|
.webindex {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: nowrap;
|
|
justify-content: flex-start;
|
|
align-items: flex-start;
|
|
width: 100%;
|
|
padding: 20px;
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
background: radial-gradient(#fff, #f5f7f4, #fff);
|
|
}
|
|
|
|
.tops {
|
|
width: 470px;
|
|
// display: flex;
|
|
// flex-direction: row;
|
|
// flex-wrap: nowrap;
|
|
// justify-content: flex-start;align-items: flex-start;
|
|
padding: 0 0 0 20px;
|
|
margin: 0px;
|
|
}
|
|
|
|
.tops .topboxs {
|
|
width: 100%;
|
|
|
|
padding: 0px 0px 15px 0 !important;
|
|
|
|
}
|
|
|
|
.topbox {
|
|
// width: 25%;
|
|
//margin: 20px 20 0 0 !important;
|
|
background-color: #fff;
|
|
box-shadow: 0px 0px 10px #E9E9E9;
|
|
border-radius: 5px;
|
|
padding: 20px 10px 21px 10px;
|
|
}
|
|
|
|
// .tops .topbox:last-of-type {
|
|
// margin: 0;
|
|
// }
|
|
.topbox .toptitle {
|
|
font-size: 20px;
|
|
padding: 10px 20px;
|
|
font-weight: bold;
|
|
color: #333;
|
|
font-size: 16px;
|
|
border-bottom: 1px solid #ececee;
|
|
}
|
|
|
|
.topbox .mids {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: nowrap;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
margin: 0;
|
|
padding: 35px 20px 38px 20px;
|
|
// padding: 20px ;
|
|
}
|
|
|
|
.topbox .mids .lefts {
|
|
width: 100px;
|
|
}
|
|
|
|
.topbox .mids .lefts .iconbox {
|
|
border-radius: 10px;
|
|
line-height: 80px;
|
|
width: 80px;
|
|
height: 80px;
|
|
color: #fff;
|
|
font-size: 36px;
|
|
text-align: center;
|
|
}
|
|
|
|
.iconbox_red {
|
|
background-color: #df2f07;
|
|
}
|
|
|
|
.iconbox_yellow {
|
|
background-color: #ff7521;
|
|
}
|
|
|
|
|
|
.iconbox_green {
|
|
background-color: #07C160;
|
|
}
|
|
|
|
.iconbox_blue {
|
|
background-color: #3f9bfa;
|
|
}
|
|
|
|
.iconbox_zi {
|
|
background-color: #6421ff;
|
|
}
|
|
|
|
.iconbox_fen {
|
|
background-color: #9b2efb;
|
|
}
|
|
|
|
.topbox .mids .rights {
|
|
flex: 1;
|
|
padding: 2px 0 2px 10px;
|
|
}
|
|
|
|
.topbox .mids .rights .note {
|
|
color: #333;
|
|
font-size: 14px;
|
|
padding: 0 0 3px 0;
|
|
}
|
|
|
|
.topbox .mids .rights .note span {
|
|
font-size: 20px;
|
|
padding: 0 5px;
|
|
}
|
|
|
|
/* 饼图部分 */
|
|
.tbars {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: nowrap;
|
|
justify-content: flex-start;
|
|
align-items: flex-start;
|
|
margin: 0;
|
|
padding: 20px 0 0 0;
|
|
}
|
|
|
|
.tbar {
|
|
width: 25%;
|
|
margin: 0 20px 0 0;
|
|
background-color: #fff;
|
|
box-shadow: 0px 0px 10px #E9E9E9;
|
|
border-radius: 5px;
|
|
padding: 10px;
|
|
}
|
|
|
|
.tbar:last-of-type {
|
|
margin: 0;
|
|
}
|
|
|
|
.tbar0 {
|
|
border-bottom: 0px solid #032ab8;
|
|
}
|
|
|
|
.tbar .title {
|
|
font-size: 20px;
|
|
padding: 10px 20px;
|
|
font-weight: bold;
|
|
color: #333;
|
|
font-size: 16px;
|
|
border-bottom: 1px solid #ececee;
|
|
}
|
|
|
|
.tbar .title span {
|
|
padding: 0 10px 0 0;
|
|
}
|
|
|
|
.tbar .bar {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: nowrap;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
margin: 0;
|
|
padding: 0px;
|
|
height: 190px;
|
|
|
|
}
|
|
|
|
.con {
|
|
padding: 10px 0 0 0;
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: nowrap;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
.news {
|
|
width: calc(100% / 2);
|
|
margin: 0 20px 0 0;
|
|
background-color: #fff;
|
|
box-shadow: 0px 0px 10px #E9E9E9;
|
|
border-radius: 5px;
|
|
padding: 10px;
|
|
}
|
|
|
|
.news:last-of-type {
|
|
margin: 0;
|
|
}
|
|
|
|
.news .title {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: nowrap;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 10px 10px 10px 20px;
|
|
border-bottom: 1px solid #ececee;
|
|
}
|
|
|
|
.news .title .newstits {
|
|
font-weight: bold;
|
|
color: #333;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.news .title .more {
|
|
text-align: right;
|
|
cursor: pointer;
|
|
color: #6c6a6a;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.news .content {
|
|
padding: 10px 0;
|
|
height: 120px;
|
|
// height:160px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.news .content .newsli {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: nowrap;
|
|
justify-content: space-between;
|
|
margin: 0px 0px;
|
|
padding: 5px 10px;
|
|
border-bottom: 1px solid #ececee;
|
|
}
|
|
|
|
.news .content .newsli .dot {
|
|
padding: 0px 8px 0 0;
|
|
font-size: 18px;
|
|
height: 25px;
|
|
line-height: 25px;
|
|
color: #047cf7;
|
|
}
|
|
|
|
.news .content .newsli .tit {
|
|
padding: 0px 0;
|
|
font-size: 14px;
|
|
flex: 3;
|
|
height: 25px;
|
|
overflow: hidden;
|
|
line-height: 25px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
// .news .content .newsli .tel{padding: 10px 0;color: #84d1f5;flex: 1;text-align: center;}
|
|
.news .content .newsli .time {
|
|
padding: 0px 0;
|
|
color: #666666;
|
|
text-align: right;
|
|
font-size: 14px;
|
|
width: 200px;
|
|
height: 25px;
|
|
line-height: 25px;
|
|
}
|
|
|
|
/////
|
|
|
|
.wenboxs {
|
|
padding: 20px;
|
|
margin: 0;
|
|
position: absolute;
|
|
z-index: 600;
|
|
top: 20px;
|
|
left: 20px;
|
|
// background-color: rgba($color: #ffffff, $alpha: 0.7);
|
|
// box-shadow: 0px 0px 6px #0d27c2;
|
|
background-color: #fff;
|
|
box-shadow: 0px 0px 10px #E9E9E9;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.wenboxs .wenbox {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: nowrap;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
margin: 0;
|
|
font-size: 18px;
|
|
color: #8d8e90;
|
|
padding: 10px;
|
|
border-bottom: 1px solid #E9E9E9;
|
|
}
|
|
|
|
.wenboxs .wenbox:last-of-type {
|
|
border-bottom: 0px solid #E9E9E9;
|
|
}
|
|
|
|
.wenbox .tubiao {
|
|
margin: 0 5px;
|
|
font-size: 18px;
|
|
// color: #b7d8fa;
|
|
padding: 0 5px 0 0;
|
|
}
|
|
|
|
.wenbox .tubiao .tolzi {
|
|
color: #3f9bfa;
|
|
font-size: 40px;
|
|
}
|
|
|
|
.bluezi {
|
|
// color: #042d6a;
|
|
font-size: 18px !important;
|
|
}
|
|
|
|
.wenbox .tos {
|
|
margin: 0;
|
|
font-size: 14px;
|
|
color: #474848;
|
|
padding: 0;
|
|
text-align: left;
|
|
}
|
|
|
|
.wenbox .tos .tit {
|
|
margin: 0;
|
|
font-size: 14px;
|
|
// color: #6f7172;
|
|
padding: 0 0 10px 0;
|
|
}
|
|
|
|
.wenbox .tos .nums {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.wenbox .tos .nums .num {
|
|
font-size: 20px;
|
|
padding: 0 5px;
|
|
font-weight: bold;
|
|
display: inline-block;
|
|
color: #fc6f04;
|
|
}
|
|
</style>
|
|
|