jianguan
/
supervise-monitor-ui
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

预警列表

master
1181364@qq.com 2 years ago
parent
d70a309238
commit
334827a712
3 changed files with 572 additions and 293 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      public/image/yujing.png
  2. 248
      src/layout/components/Navbar.vue
  3. 617
      src/views/index.vue

BIN
public/image/yujing.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

248
src/layout/components/Navbar.vue
View File

@ -1,19 +1,47 @@
<template> <template>
<div> <div>
<div class="navbar"> <div class="navbar">
<p class="breadcrumb-container"><img src="@/assets/loginImg/logo.png" style="width: 45px;height: 45px;margin-right: 10px;"/>汇融云眼贷后监管平台</p> <p class="breadcrumb-container"><img src="@/assets/loginImg/logo.png"
<!-- <h3 class="breadcrumb-container">汇融银行供应链贷后监管平台</h3> --> style="width: 45px;height: 45px;margin-right: 10px;" />汇融云眼贷后监管平台</p>
<!-- <h3 class="breadcrumb-container">汇融银行供应链贷后监管平台</h3> -->
<div class="right-menu"> <div class="right-menu">
<!-- <p>{{Orgname}} {{departmentName}} 欢迎, {{name}}</p>--> <!-- <p>{{Orgname}} {{departmentName}} 欢迎, {{name}}</p>-->
<p>欢迎您，{{name}}</p> <p>欢迎您，{{name}}</p>
<el-badge :value="6" class="item"> <el-badge :value="6" class="item">
<img src="@/assets/images/info.png"> <img src="@/assets/images/info.png" @click="getMessageInfoList">
</el-badge> </el-badge>
<!-- <img src="@/assets/images/dy.png" @click="logout"> --> <!-- <img src="@/assets/images/dy.png" @click="logout"> -->
<span class="backToHome" @click="logout"><i class="el-icon-back"></i>返回首页</span> <span class="backToHome" @click="logout"><i class="el-icon-back"></i>返回首页</span>
</div> </div>
</div> </div>
<el-footer class="footer" height="40px">Copyright © {{ year }} 技术支持集团 All Rights Reserved</el-footer> <el-footer class="footer" height="40px">Copyright © {{ year }} 技术支持集团 All Rights Reserved</el-footer>
<div v-show="visible">
<div class="webswrap" @click="handleReturn()"></div>
<div class="webs">
<div class="closes" @click="handleReturn()">
<span class="el-icon-circle-close close"></span>
</div>
<div class="web tabgongzuo-form">
<el-tabs v-model="activeTypeName" @tab-click="xiaoxiTypeClick">
<el-tab-pane v-for="(ite, index) in xiaoxiType" :key="index" :label="ite.label" :name="ite.value">
<div class="lanmus">
<ul>
<li v-for="(item, indedx) in list" :key="indedx">
<div style="border:1px red solid;width:23px;height:23px">
<image src="/image/yujing.jpg" width="100%" />
</div>
<div class="btnbox" @click.stop.prevent="LookDetils(item)">
{{ item.messageContent }}--{{item.createTime}}
</div>
</li>
</ul>
</div>
</el-tab-pane>
</el-tabs>
</div>
</div>
</div>
</div> </div>
</template> </template>
@ -21,11 +49,25 @@
export default { export default {
data() { data() {
return { return {
activeTypeName: 0,
xiaoxiType: [
{ label: '已读', value: '1' },
{ label: '未读', value: '2' }
],
list: [
{ messageContent: '电梯系统：电梯门异常关闭', createTime: '2023-05-25' },
{ messageContent: '电梯系统：电梯门异常关闭', createTime: '2023-05-25' },
{ messageContent: '电梯系统：电梯门异常关闭', createTime: '2023-05-25' },
{ messageContent: '电梯系统：电梯门异常关闭', createTime: '2023-05-25' },
{ messageContent: '电梯系统：电梯门异常关闭', createTime: '2023-05-25' },
{ messageContent: '电梯系统：电梯门异常关闭', createTime: '2023-05-25' },
],
visible: false,
Orgname: '', Orgname: '',
departmentName: '', departmentName: '',
name: '', name: '',
year:'', year: '',
pNameAndDepartmentNameAndPostName:'' pNameAndDepartmentNameAndPostName: ''
} }
}, },
mounted() { mounted() {
@ -37,6 +79,17 @@
this.year = nowDate.getFullYear() this.year = nowDate.getFullYear()
}, },
methods: { methods: {
xiaoxiTypeClick(tab, event) {
console.log('77777777777777', tab, event)
this.$set(this, 'activeTypeName', tab.name)
// this.getList(tab.name)
},
handleReturn() {
this.visible = false;
},
getMessageInfoList() {
this.visible = true
},
logout() { logout() {
// this.$router.push({ path: '/home' }) // this.$router.push({ path: '/home' })
window.opener = null window.opener = null
@ -70,15 +123,15 @@
} }
} }
.breadcrumb-container { .breadcrumb-container {
display: flex; display: flex;
align-items: center; align-items: center;
color: #fff; color: #fff;
font-size: 26px; font-size: 26px;
line-height: 60px; line-height: 60px;
margin: 0; margin: 0;
float: left; float: left;
} }
.right-menu { .right-menu {
float: right; float: right;
@ -168,15 +221,172 @@
font-size: 14px; font-size: 14px;
color: #666; color: #666;
} }
::v-deep .el-badge__content{position: relative;
::v-deep .el-badge__content {
position: relative;
height: 20px; height: 20px;
line-height: 20px; line-height: 20px;
padding: 0 6px; padding: 0 6px;
} }
::v-deep .el-badge__content.is-fixed { ::v-deep .el-badge__content.is-fixed {
position: absolute; position: absolute;
top: 17px; top: 17px;
right: 14px; right: 14px;
} }
</style>
.app-web {
z-index: 900;
}
.webswrap {
background-color: rgba(51, 51, 48, 0.6);
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 999;
}
.webs {
z-index: 1000;
/* background: url('/dapingmu/dapingmu_box.png') center top no-repeat;
background-size: 100% 100%; */
background-image: linear-gradient(#7c070a, #7b060a, #7c070a) !important;
/* background-image: linear-gradient(
to right,
rgba(105,3,6,0.9) 0%,
rgba(123,6,10,0.9) 25%,
rgba(123,6,10,0.9) 75%,
rgba(105,3,6,0.9) 100%); */
// border: 1px solid #9c070c;
border: 1px solid #9c4f07;
position: fixed;
top: 50px;
right: 10px;
bottom: 10px;
/* bottom: 10px; */
overflow-y: auto !important;
overflow-x: hidden;
width: 300px;
min-height: 400px;
margin: 0;
padding: 0;
}
.top {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #9c070c;
}
.top .title {
color: #f7ee02;
font-size: 16px;
font-weight: bold;
}
.closes {
text-align: right;
padding: 10px;
position: absolute;
right: 10px;
top: 10px;
z-index: 900;
}
.close {
font-size: 18px;
color: #fff;
}
.web {
padding: 10px;
text-align: center;
}
/* .lanmus{border-bottom: 1px solid #9c070c;} */
ul,
li {
list-style: none;
}
.lanmus ul {
margin: 0;
padding: 0;
/* display: flex;flex-direction: row;flex-wrap: wrap;justify-content: flex-start; */
}
.lanmus li {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: center;
color: #fae1e1;
text-align: left;
border-bottom: 1px solid #9f0608 !important;
cursor: pointer;
}
.lanmus li .iconfont {}
.lanmus li .btnbox {
flex: 1;
/* background-image: linear-gradient(#7c070a, #7b060a, #7c070a) !important; border-radius: 10px;*/
/* border-bottom: 1px solid #9f0608 !important; */
font-size: 12px;
color: #fae1e1;
margin: 5px;
text-align: left;
padding: 5px;
}
.lanmus li .btnbox:hover {
background-image: linear-gradient(#7b060a, #9c070c, #7b060a) !important;
color: #f7ebc3;
}
/* el-tabs样式 */
.tabgongzuo-form {
/* padding: 0; */
color: #4cc6f4;
>>>.el-tabs__nav-wrap::after {
background-color: #aa1e0a !important;
}
/* 设置滑块颜色 */
>>>.el-tabs__active-bar {
background-color: #13fbfe !important;
color: #13fbfe !important;
}
/* 设置滑块停止位置 */
>>>.el-tabs__active-bar.is-top {
position: absolute !important;
z-index: 1;
}
/* 设置当前选中样式 */
>>>.el-tabs__item.is-active {
color: #13fbfe !important;
z-index: 2;
}
/* 设置未被选中样式 */
>>>.el-tabs__item {
box-sizing: border-box;
position: relative !important;
color: #fff !important;
z-index: 2;
}
}
</style>

617
src/views/index.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="webindex"> <div class="webindex">
<div class="tops"> <div class="tops">
<!-- 第1个 --> <!-- 第1个 -->
<div class="topbox"> <div class="topbox">
@ -10,8 +10,8 @@
</div> </div>
<div class="rights"> <div class="rights">
<div class="note">正常：<span class="bluezi">26</span></div> <div class="note">正常：<span class="bluezi">26</span></div>
<div class="note">离线：<span class="huizi">12</span></div> <div class="note">离线：<span class="huizi">12</span></div>
<div class="note">报警：<span class="redzi">11</span></div> <div class="note">报警：<span class="redzi">11</span></div>
</div> </div>
</div> </div>
</div> </div>
@ -24,8 +24,8 @@
</div> </div>
<div class="rights"> <div class="rights">
<div class="note">正常：<span class="bluezi">36</span></div> <div class="note">正常：<span class="bluezi">36</span></div>
<div class="note">离线：<span class="huizi">16</span></div> <div class="note">离线：<span class="huizi">16</span></div>
<div class="note"><span class="redzi"></span></div> <div class="note"><span class="redzi"></span></div>
</div> </div>
</div> </div>
</div> </div>
@ -38,8 +38,8 @@
</div> </div>
<div class="rights"> <div class="rights">
<div class="note">正常：<span class="bluezi">38</span></div> <div class="note">正常：<span class="bluezi">38</span></div>
<div class="note">离线：<span class="huizi">15</span></div> <div class="note">离线：<span class="huizi">15</span></div>
<div class="note">报警：<span class="redzi">12</span></div> <div class="note">报警：<span class="redzi">12</span></div>
</div> </div>
</div> </div>
</div> </div>
@ -52,8 +52,8 @@
</div> </div>
<div class="rights"> <div class="rights">
<div class="note">正常：<span class="bluezi">26</span></div> <div class="note">正常：<span class="bluezi">26</span></div>
<div class="note">离线：<span class="huizi">12</span></div> <div class="note">离线：<span class="huizi">12</span></div>
<div class="note">报警：<span class="redzi">11</span></div> <div class="note">报警：<span class="redzi">11</span></div>
</div> </div>
</div> </div>
</div> </div>
@ -66,8 +66,8 @@
</div> </div>
<div class="rights"> <div class="rights">
<div class="note">正常：<span class="bluezi">39</span></div> <div class="note">正常：<span class="bluezi">39</span></div>
<div class="note">离线：<span class="huizi">15</span></div> <div class="note">离线：<span class="huizi">15</span></div>
<div class="note">报警：<span class="redzi">12</span></div> <div class="note">报警：<span class="redzi">12</span></div>
</div> </div>
</div> </div>
</div> </div>
@ -86,7 +86,7 @@
<div class="tbar"> <div class="tbar">
<div class="title"><span class="iconfont icon-jiating greenzi"></span>视频监控</div> <div class="title"><span class="iconfont icon-jiating greenzi"></span>视频监控</div>
<div class="bar"> <div class="bar">
<pie-chartrenyuan :chart-data="shipinjiankong_Chart" ></pie-chartrenyuan> <pie-chartrenyuan :chart-data="shipinjiankong_Chart"></pie-chartrenyuan>
</div> </div>
</div> </div>
<!-- 第1个图表 --> <!-- 第1个图表 -->
@ -96,7 +96,7 @@
<pie-chartrenyuan :chart-data="ruqinbaojing_Chart"></pie-chartrenyuan> <pie-chartrenyuan :chart-data="ruqinbaojing_Chart"></pie-chartrenyuan>
</div> </div>
</div> </div>
<!-- 第1个图表 --> <!-- 第1个图表 -->
<div class="tbar"> <div class="tbar">
<div class="title"><span class="iconfont icon-jiating greenzi"></span>电子围栏</div> <div class="title"><span class="iconfont icon-jiating greenzi"></span>电子围栏</div>
<div class="bar"> <div class="bar">
@ -113,7 +113,7 @@
</div> </div>
<!-- 第3行 --> <!-- 第3行 -->
<div class="con"> <div class="con">
<!-- 第1 --> <!-- 第1 -->
<div class="news"> <div class="news">
<div class="title"> <div class="title">
<div class="newstits">提醒任务</div> <div class="newstits">提醒任务</div>
@ -127,8 +127,8 @@
</div> </div>
</div> </div>
</div> </div>
<!-- 第1 --> <!-- 第1 -->
<div class="news"> <div class="news">
<div class="title"> <div class="title">
<div class="newstits">待办</div> <div class="newstits">待办</div>
<div class="more" @click="toMore()">更多></div> <div class="more" @click="toMore()">更多></div>
@ -170,295 +170,364 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import {login1} from '@/api/system/user/login.js' import { login1 } from '@/api/system/user/login.js'
import * as echarts from "echarts"; import * as echarts from "echarts";
import PieChartrenyuan from '@/views/echarts/components/PieChartrenyuan' import PieChartrenyuan from '@/views/echarts/components/PieChartrenyuan'
// 1.1入侵报警饼图 // 1.1入侵报警饼图
const ruqinbaojing_Chart = { const ruqinbaojing_Chart = {
// seriesName: '入侵报警', // seriesName: '入侵报警',
unit: '次', unit: '次',
color: ['#fe7f02', '#049f51', '#fdc004'], color: ['#fe7f02', '#049f51', '#fdc004'],
Data: { Data: {
seriesData: [ seriesData: [
{ value: 39, name: '正常' }, { value: 39, name: '正常' },
{ value: 16, name: '离线' }, { value: 16, name: '离线' },
{ value: 12, name: '报警' } { value: 12, name: '报警' }
] ]
}, },
label: { label: {
normal: { normal: {
position: 'inner', position: 'inner',
show: false show: false
} }
}, },
// radius: ['50%', '55%'] // radius: ['50%', '55%']
} }
// 1.2视频监控饼图 // 1.2视频监控饼图
const shipinjiankong_Chart = { const shipinjiankong_Chart = {
// seriesName: '视频监控', // seriesName: '视频监控',
unit: '次', unit: '次',
color: ['#fe7f02', '#049f51', '#fdc004'], color: ['#fe7f02', '#049f51', '#fdc004'],
Data: { Data: {
seriesData: [ seriesData: [
{ value: 39, name: '正常' }, { value: 39, name: '正常' },
{ value: 16, name: '离线' }, { value: 16, name: '离线' },
// { value: 12, name: '报警' } // { value: 12, name: '报警' }
] ]
}, },
label: { label: {
normal: { normal: {
position: 'inner', position: 'inner',
show: false show: false
} }
}, },
// radius: ['50%', '55%'] // radius: ['50%', '55%']
} }
export default { export default {
name: 'index', name: 'index',
components: { components: {
PieChartrenyuan PieChartrenyuan
}, },
created() {
var _self = this
// setInterval(function () {
// _self.getMessage();
// }, 5000)
},
data() { data() {
return { return {
ruqinbaojing_Chart: ruqinbaojing_Chart, // 1.1 ruqinbaojing_Chart: ruqinbaojing_Chart, // 1.1
shipinjiankong_Chart:shipinjiankong_Chart, shipinjiankong_Chart: shipinjiankong_Chart,
token:'', token: '',
Datalista: [ Datalista: [
{ title: '您有新任务了', createTime: '2023-05-23' }, { title: '您有新任务了', createTime: '2023-05-23' },
{ title: '您有新任务了', createTime: '2023-05-23' }, { title: '您有新任务了', createTime: '2023-05-23' },
{ title: '您有新任务了', createTime: '2023-05-23' }, { title: '您有新任务了', createTime: '2023-05-23' },
{ title: '您有新任务了', createTime: '2023-05-23' }, { title: '您有新任务了', createTime: '2023-05-23' },
{ title: '您有新任务了', createTime: '2023-05-23' }, { title: '您有新任务了', createTime: '2023-05-23' },
], ],
Datalist: [ Datalist: [
{ title: '您有新消息了', createTime: '2023-05-23' }, { title: '您有新消息了', createTime: '2023-05-23' },
{ title: '您有新消息了', createTime: '2023-05-23' }, { title: '您有新消息了', createTime: '2023-05-23' },
{ title: '您有新消息了', createTime: '2023-05-23' }, { title: '您有新消息了', createTime: '2023-05-23' },
{ title: '您有新消息了', createTime: '2023-05-23' }, { title: '您有新消息了', createTime: '2023-05-23' },
{ title: '您有新消息了', createTime: '2023-05-23' }, { title: '您有新消息了', createTime: '2023-05-23' },
], ],
} }
}, },
methods:{ methods: {
// getToken(){ getMessage() {
// let params = { this.$notify({
// password: "329653", title: '报警消息',
// roleSid: "", dangerouslyUseHTMLString: true,
// token: "", // // message: "<img src='" + warningIcon + "'>" + data.messageContent,
// userName: "15097329653", message: "<img style='width:50px' src='/image/yujing.png'>" + "新的报警待处理",
// verifyCode: "" position: 'bottom-right',
// } onClick: () => {
// login1(params).then(res => { alert("这是一条新订单")
// this.token = res.data.token // this.playText('你有一条报警信息未读')
// window.sessionStorage.setItem('token', res.data.token) // 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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.webindex { .webindex {
width: 100%; padding: 20px; width: 100%;
padding: 20px;
height: 100%; height: 100%;
background: radial-gradient(#fff,#f5f7f4, #fff); background: radial-gradient(#fff, #f5f7f4, #fff);
} }
.tops { .tops {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: nowrap; flex-wrap: nowrap;
justify-content: flex-start;align-items: flex-start; justify-content: flex-start;
padding: 0px; align-items: flex-start;
margin: 0px; padding: 0px;
} margin: 0px;
.tops .topbox { }
width: 25%;
margin: 0 20px 0 0; .tops .topbox {
background-color: #fff; width: 25%;
box-shadow:0px 0px 10px #E9E9E9;border-radius: 5px; margin: 0 20px 0 0;
padding: 10px; background-color: #fff;
} box-shadow: 0px 0px 10px #E9E9E9;
.tops .topbox:last-of-type { border-radius: 5px;
margin: 0; padding: 10px;
} }
.tops .topbox .toptitle {
font-size: 20px; .tops .topbox:last-of-type {
padding: 10px 20px; margin: 0;
font-weight: bold; color: #333;font-size: 16px; }
border-bottom: 1px solid #ececee;
} .tops .topbox .toptitle {
.tops .topbox .mids { font-size: 20px;
display: flex; padding: 10px 20px;
flex-direction: row; font-weight: bold;
flex-wrap: nowrap; color: #333;
justify-content: flex-start;align-items: center; font-size: 16px;
margin: 0; border-bottom: 1px solid #ececee;
padding: 20px ; }
}
.tops .topbox .mids .lefts{width: 100px;} .tops .topbox .mids {
.tops .topbox .mids .lefts .iconbox { display: flex;
border-radius: 10px; flex-direction: row;
line-height: 80px; flex-wrap: nowrap;
width: 80px; justify-content: flex-start;
height: 80px; align-items: center;
color: #fff; margin: 0;
font-size: 36px;text-align: center; padding: 20px;
} }
.tops .topbox .mids .lefts {
width: 100px;
}
.tops .topbox .mids .lefts .iconbox {
border-radius: 10px;
line-height: 80px;
width: 80px;
height: 80px;
color: #fff;
font-size: 36px;
text-align: center;
}
.iconbox_red { .iconbox_red {
background-color: #df2f07; background-color: #df2f07;
} }
.iconbox_yellow { .iconbox_yellow {
background-color: #ff7521; background-color: #ff7521;
} }
.iconbox_green { .iconbox_green {
background-color: #07C160; background-color: #07C160;
} }
.iconbox_blue {
background-color: #3f9bfa; .iconbox_blue {
} background-color: #3f9bfa;
.iconbox_zi { }
background-color: #6421ff;
} .iconbox_zi {
background-color: #6421ff;
.iconbox_fen { }
background-color: #9b2efb;
} .iconbox_fen {
.tops .topbox .mids .rights {flex: 1; background-color: #9b2efb;
padding: 2px 0 2px 10px; }
}
.tops .topbox .mids .rights .note { .tops .topbox .mids .rights {
color: #333; flex: 1;
font-size: 14px; padding: 2px 0 2px 10px;
padding: 0 0 3px 0; }
}
.tops .topbox .mids .rights .note span { .tops .topbox .mids .rights .note {
font-size: 20px; color: #333;
padding: 0 5px; font-size: 14px;
} padding: 0 0 3px 0;
}
/* 饼图部分 */
.tbars { .tops .topbox .mids .rights .note span {
display: flex; font-size: 20px;
flex-direction: row; padding: 0 5px;
flex-wrap: nowrap; }
justify-content: flex-start;align-items: flex-start;
margin: 0; /* 饼图部分 */
padding: 20px 0 0 0; .tbars {
} display: flex;
.tbar { flex-direction: row;
width: 25%; flex-wrap: nowrap;
margin: 0 20px 0 0; justify-content: flex-start;
background-color: #fff; align-items: flex-start;
box-shadow:0px 0px 10px #E9E9E9;border-radius: 5px; margin: 0;
padding: 10px; padding: 20px 0 0 0;
} }
.tbar:last-of-type {
margin: 0; .tbar {
} width: 25%;
.tbar0 { margin: 0 20px 0 0;
border-bottom: 0px solid #032ab8; background-color: #fff;
} box-shadow: 0px 0px 10px #E9E9E9;
.tbar .title { border-radius: 5px;
font-size: 20px; padding: 10px;
padding: 10px 20px; }
font-weight: bold; color: #333;font-size: 16px;
border-bottom: 1px solid #ececee; .tbar:last-of-type {
} margin: 0;
.tbar .title span { }
padding: 0 10px 0 0;
} .tbar0 {
.tbar .bar { border-bottom: 0px solid #032ab8;
display: flex; }
flex-direction: row;
flex-wrap: nowrap; .tbar .title {
justify-content: flex-start;align-items: center; font-size: 20px;
margin: 0; padding: 10px 20px;
padding: 0px; font-weight: bold;
height: 190px; color: #333;
font-size: 16px;
} border-bottom: 1px solid #ececee;
.con { }
padding: 20px 0;
display: flex; .tbar .title span {
flex-direction: row; padding: 0 10px 0 0;
flex-wrap: nowrap; }
justify-content: space-around;
} .tbar .bar {
.news { display: flex;
width: 25%; flex-direction: row;
margin: 0 20px 0 0; flex-wrap: nowrap;
background-color: #fff; justify-content: flex-start;
box-shadow:0px 0px 10px #E9E9E9;border-radius: 5px; align-items: center;
padding: 10px; margin: 0;
} padding: 0px;
.news:last-of-type { height: 190px;
margin: 0;
} }
.news .title {
display: flex; .con {
flex-direction: row; padding: 20px 0;
flex-wrap: nowrap; display: flex;
justify-content: space-between; flex-direction: row;
align-items: center; flex-wrap: nowrap;
padding: 10px 10px 10px 20px; justify-content: space-around;
border-bottom: 1px solid #ececee; }
}
.news {
.news .title .newstits { width: 25%;
font-weight: bold; color: #333;font-size: 16px; margin: 0 20px 0 0;
} background-color: #fff;
box-shadow: 0px 0px 10px #E9E9E9;
.news .title .more {text-align: right; border-radius: 5px;
cursor: pointer;color: #6c6a6a;font-size: 14px; padding: 10px;
} }
.news .content { .news:last-of-type {
padding: 10px 0; margin: 0;
height: 210px; }
overflow: hidden;
} .news .title {
display: flex;
.news .content .newsli { flex-direction: row;
display: flex; flex-wrap: nowrap;
flex-direction: row; justify-content: space-between;
flex-wrap: nowrap; align-items: center;
justify-content: space-between; padding: 10px 10px 10px 20px;
margin: 0px 0px; border-bottom: 1px solid #ececee;
padding: 5px 10px; }
border-bottom: 1px solid #ececee;
} .news .title .newstits {
.news .content .newsli .dot { font-weight: bold;
padding: 0px 8px 0 0; color: #333;
font-size: 18px; font-size: 16px;
height: 25px; }
line-height: 25px;color: #047cf7;
} .news .title .more {
.news .content .newsli .tit { text-align: right;
padding: 0px 0; cursor: pointer;
font-size: 14px; color: #6c6a6a;
flex: 3; font-size: 14px;
height: 25px; }
overflow: hidden;
line-height: 25px; .news .content {
cursor: pointer; padding: 10px 0;
} height: 210px;
overflow: hidden;
// .news .content .newsli .tel{padding: 10px 0;color: #84d1f5;flex: 1;text-align: center;} }
.news .content .newsli .time {
padding: 0px 0; .news .content .newsli {
color: #666666; display: flex;
text-align: right;font-size: 14px; flex-direction: row;
width: 100px; flex-wrap: nowrap;
height: 25px; justify-content: space-between;
line-height: 25px; margin: 0px 0px;
} padding: 5px 10px;
</style> 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: 100px;
height: 25px;
line-height: 25px;
}
</style>
Write Preview
Loading…
Cancel
Save