unicom
/
jtjsc-front
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

修改交通服务页面样式

master
zhulibin 4 months ago
parent
718a1fde17
commit
d215663635
1 changed files with 132 additions and 103 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. 235
      src/views/jxzt/Jczh.vue

235
src/views/jxzt/Jczh.vue
View File

@ -14,10 +14,13 @@
</div> </div>
<div v-for="(item,index) in left1Data" style="width: 100%;top:50px;"> <div v-for="(item,index) in left1Data" style="width: 100%;top:50px;">
<div style="width: 50%; float:left;"> <div style="width: 50%; float:left;">
<div style="font-size: calc(100vw*14/1920); font-weight:bold; text-align: center; letter-spacing: 0.04em; line-height: 1.5em; margin: 0 10px;"> <div
style="font-size: 14px; font-weight:bold; text-align: center; letter-spacing: 0.04em; line-height: 1.5em; margin: 0 10px;">
{{ item.name }} {{ item.name }}
</div> </div>
<div style="font-size: calc(100vw*12/1920); font-weight: normal; letter-spacing: 0.04em; line-height: 1.5em;">{{ item.time }}</div> <div style="font-size: 12px; font-weight: normal; letter-spacing: 0.04em; line-height: 1.5em;">
{{ item.time }}
</div>
<div class="left-content-detail"> <div class="left-content-detail">
{{ item.content != null ? item.content : "" }} {{ item.content != null ? item.content : "" }}
</div> </div>
@ -33,10 +36,13 @@
</div> </div>
<div v-for="(item,index) in left2Data" style="width: 100%;top:50px;"> <div v-for="(item,index) in left2Data" style="width: 100%;top:50px;">
<div style="width: 50%; float:left;"> <div style="width: 50%; float:left;">
<div style="font-size: calc(100vw*14/1920); font-weight:bold; text-align: center; letter-spacing: 0.04em; line-height: 1.5em; margin: 0 10px;"> <div
style="font-size: 14px; font-weight:bold; text-align: center; letter-spacing: 0.04em; line-height: 1.5em; margin: 0 10px;">
{{ item.name }} {{ item.name }}
</div> </div>
<div style="font-size: calc(100vw*12/1920); font-weight: normal; letter-spacing: 0.04em; line-height: 1.5em;">{{ item.time }}</div> <div style="font-size: 12px; font-weight: normal; letter-spacing: 0.04em; line-height: 1.5em;">
{{ item.time }}
</div>
<div class="left-content-detail"> <div class="left-content-detail">
{{ item.content != null ? item.content : "" }} {{ item.content != null ? item.content : "" }}
</div> </div>
@ -53,10 +59,13 @@
</div> </div>
<div v-for="(item,index) in left3Data" style="width: 100%;top:50px;"> <div v-for="(item,index) in left3Data" style="width: 100%;top:50px;">
<div style="width: 50%; float:left;"> <div style="width: 50%; float:left;">
<div style="font-size: calc(100vw*14/1920); font-weight:bold; text-align: center; letter-spacing: 0.04em; line-height: 1.5em; margin: 0 10px;"> <div
style="font-size: 14px; font-weight:bold; text-align: center; letter-spacing: 0.04em; line-height: 1.5em; margin: 0 10px;">
{{ item.name }} {{ item.name }}
</div> </div>
<div style="font-size: calc(100vw*12/1920); font-weight: normal; letter-spacing: 0.04em; line-height: 1.5em;">{{ item.time }}</div> <div style="font-size: 12px; font-weight: normal; letter-spacing: 0.04em; line-height: 1.5em;">
{{ item.time }}
</div>
<div class="left-content-detail"> <div class="left-content-detail">
{{ item.content != null ? item.content : "" }} {{ item.content != null ? item.content : "" }}
</div> </div>
@ -68,7 +77,7 @@
</div> </div>
<!--中间--> <!--中间-->
<div class=" " style="width: 30%; height: 100%; float:left; margin-left: 2%; margin-right:2%;"> <div class=" " style="width: 30%; height: 95%; float:left; margin-left: 1%; margin-right:1%;">
<div style="width: 100%; height: 100%; float:left;"> <div style="width: 100%; height: 100%; float:left;">
<div class="center-content"></div> <div class="center-content"></div>
@ -90,8 +99,8 @@
<span v-bind:class="{ active: isPolice }" @click="businessPolice">省公安厅</span> <span v-bind:class="{ active: isPolice }" @click="businessPolice">省公安厅</span>
</div> </div>
<div style="width: 100%;height: 95%;float: left;"> <div style="width: 100%;height: 95%;float: left;">
<div style="float: left;font-size: calc(100vw*12/1920);color: #FFFFFF;margin: 1% 2%">{{ ywData.time }}</div> <div style="float: left;font-size: 12px;color: #FFFFFF;margin: 1% 2%">{{ ywData.time }}</div>
<div style="white-space: pre-wrap; float: left;font-size: calc(100vw*12/1920);color: #84ACE8;margin: 0 2%;text-align: left;">{{ ywData.content }}</div> <div class="conter-content"> {{ ywData.content }} </div>
</div> </div>
</div> </div>
</div> </div>
@ -99,27 +108,27 @@
<div class="z-file"> <div class="z-file">
<div class="z-file-t" style="margin-left: 0.5%"> <div class="z-file-t" style="margin-left: 0.5%">
<div class="z-file-ts"><img style="width: 100%;height: 100%" src="../../assets/img/cxlwt.png"></div> <div class="z-file-ts"><img style="width: 100%;height: 100%" src="../../assets/img/cxlwt.png"></div>
<div style="float: left;width: 100%;height: 20%; font-size: calc(100vw*14/1920);">畅行瞭望台</div> <div style="float: left;width: 100%;height: 20%; font-size: 14px;">畅行瞭望台</div>
</div> </div>
<div class="z-file-t"> <div class="z-file-t">
<div class="z-file-ts"><img style="width: 100%;height: 100%" src="../../assets/img/ssjh.png"></div> <div class="z-file-ts"><img style="width: 100%;height: 100%" src="../../assets/img/ssjh.png"></div>
<div style="float: left;width: 100%;height: 20%; font-size: calc(100vw*14/1920);">三省交辉</div> <div style="float: left;width: 100%;height: 20%; font-size: 14px;">三省交辉</div>
</div> </div>
<div class="z-file-t"> <div class="z-file-t">
<div class="z-file-ts"><img style="width: 100%;height: 100%" src="../../assets/img/stlj.png"></div> <div class="z-file-ts"><img style="width: 100%;height: 100%" src="../../assets/img/stlj.png"></div>
<div style="float: left;width: 100%;height: 20%; font-size: calc(100vw*14/1920);">省途亮绩</div> <div style="float: left;width: 100%;height: 20%; font-size: 14px;">省途亮绩</div>
</div> </div>
<div class="z-file-t"> <div class="z-file-t">
<div class="z-file-ts"><img style="width: 100%;height: 100%" src="../../assets/img/jczh.png"></div> <div class="z-file-ts"><img style="width: 100%;height: 100%" src="../../assets/img/jczh.png"></div>
<div style="float: left;width: 100%;height: 20%; font-size: calc(100vw*14/1920);">交畅智汇</div> <div style="float: left;width: 100%;height: 20%; font-size: 14px;">交畅智汇</div>
</div> </div>
<div class="z-file-t"> <div class="z-file-t">
<div class="z-file-ts"><img style="width: 100%;height: 100%" src="../../assets/img/yjlh.png"></div> <div class="z-file-ts"><img style="width: 100%;height: 100%" src="../../assets/img/yjlh.png"></div>
<div style="float: left;width: 100%;height: 20%; font-size:calc(100vw*14/1920);">应急领航</div> <div style="float: left;width: 100%;height: 20%; font-size: 14px;">应急领航</div>
</div> </div>
<div class="z-file-t"> <div class="z-file-t">
<div class="z-file-ts"><img style="width: 100%;height: 100%" src="../../assets/img/jwjd.png"></div> <div class="z-file-ts"><img style="width: 100%;height: 100%" src="../../assets/img/jwjd.png"></div>
<div style="float: left;width: 100%;height: 20%; font-size: calc(100vw*14/1920);">吉问吉答</div> <div style="float: left;width: 100%;height: 20%; font-size: 14px;">吉问吉答</div>
</div> </div>
</div> </div>
</div> </div>
@ -132,28 +141,36 @@
<div class="right-echarts"> <div class="right-echarts">
<div class="right-echarts-child"> <div class="right-echarts-child">
<div style="width:100%; height: 10%; margin-top:5%;"><img style="width:90%; height: 100%;" src="../../assets/img/rx.png"> <div style="width:100%; height: 10%; margin-top:5%;"><img style="width:80%; height: 100%;"
src="../../assets/img/rx.png">
</div>
<div id="right1Chart" style="width:100%; height: 73%"></div>
<div style="width:100%; height: 10%"><img style="width:80%;" src="../../assets/img/right-bottom.png">
</div> </div>
<div id="right1Chart" style="width:100%; height: 75%"></div>
<div style="width:100%; height: 10%"><img style="width:90%;" src="../../assets/img/right-bottom.png"></div>
</div> </div>
<div class="right-echarts-child"> <div class="right-echarts-child">
<div style="width:100%; height: 10%; margin-top:5%;"><img style="width:90%; height: 100%;" src="../../assets/img/rxs.png"></div> <div style="width:100%; height: 10%; margin-top:5%;"><img style="width:80%; height: 100%;"
<div id="right2Chart" style="width:100%; height: 75%"></div> src="../../assets/img/rxs.png"></div>
<div style="width:100%; height: 10%"><img style="width:90%;" src="../../assets/img/right-bottom.png"></div> <div id="right2Chart" style="width:100%; height: 73%"></div>
<div style="width:100%; height: 10%"><img style="width:80%;" src="../../assets/img/right-bottom.png">
</div>
</div> </div>
</div> </div>
<div class="right-echarts"> <div class="right-echarts">
<div class="right-echarts-child"> <div class="right-echarts-child">
<div style="width:100%; height: 10%; margin-top:5%;"><img style="width:90%; height: 100%;" src="../../assets/img/tjzxx.png"></div> <div style="width:100%; height: 10%; margin-top:5%;"><img style="width:80%; height: 100%;"
<div id="right3Chart" style="width:100%; height: 75%"></div> src="../../assets/img/tjzxx.png"></div>
<div style="width:100%; height: 10%"><img style="width:90%;" src="../../assets/img/right-bottom.png"></div> <div id="right3Chart" style="width:100%; height: 73%"></div>
<div style="width:100%; height: 10%"><img style="width:80%;" src="../../assets/img/right-bottom.png">
</div>
</div> </div>
<div class="right-echarts-child"> <div class="right-echarts-child">
<div style="width:100%; height: 10%; margin-top:5%;"><img style="width:90%; height: 100%;" src="../../assets/img/wlyq.png"></div> <div style="width:100%; height: 10%; margin-top:5%;"><img style="width:80%; height: 100%;"
<div id="right4Chart" style="width:100%; height: 75%"></div> src="../../assets/img/wlyq.png"></div>
<div style="width:100%; height: 10%"><img style="width:90%;" src="../../assets/img/right-bottom.png"></div> <div id="right4Chart" style="width:100%; height: 73%"></div>
<div style="width:100%; height: 10%"><img style="width:80%;" src="../../assets/img/right-bottom.png">
</div>
</div> </div>
</div> </div>
@ -170,7 +187,7 @@ import ScaleBox from "vue2-scale-box";
export default { export default {
name: "drain", name: "drain",
components: {getEchartInstance,ScaleBox}, components: {getEchartInstance, ScaleBox},
data() { data() {
return { return {
isActive: true,//月 isActive: true,//月
@ -214,12 +231,12 @@ export default {
content: ' 根据《交通运输部关于印发交通运输系统“平安交通”创建活动实施方案的通知》（交安监发〔2013〕116号）部署，交通运输系统开展了为期5年的“平安交通”创建活动。目前，“平安交通”建设已进入关键阶段，各部门、各单位要结合安全生产责任体系、隐患排查治理、风险管理、安全诚信、企业标准化等工作，坚持问题导向、目标导向，聚焦重点领域，全面推进“平安交通”建设。\n' content: ' 根据《交通运输部关于印发交通运输系统“平安交通”创建活动实施方案的通知》（交安监发〔2013〕116号）部署，交通运输系统开展了为期5年的“平安交通”创建活动。目前，“平安交通”建设已进入关键阶段，各部门、各单位要结合安全生产责任体系、隐患排查治理、风险管理、安全诚信、企业标准化等工作，坚持问题导向、目标导向，聚焦重点领域，全面推进“平安交通”建设。\n'
}, },
], ],
ywData:{ ywData: {
time:'2024/6/11', time: '2024/6/11',
content:'对省十四届人大三次会议第0233号代表建议的答复\n'+ content: '对省十四届人大三次会议第0233号代表建议的答复\n' +
'徐凤娟代表：\n' + '徐凤娟代表：\n' +
' 您在省十四届人大三次会议上提出的《关于延长出租车驾驶员从业年龄的建议》收悉，经认真研究，现答复如下：\n' + ' 您在省十四届人大三次会议上提出的《关于延长出租车驾驶员从业年龄的建议》收悉，经认真研究，现答复如下：\n' +
' 首先，感谢您对出租汽车驾驶员从业资格管理工作的关心和支持。近年来，省委省政府、省交通运输厅高度重视道路运输从业资格“放管服”工作，于2023年，在全国率先实施出租汽车驾驶员从业资格考试省内异地约考，破解驾驶员报名难、考试难问题。拟于2024年7月1日前，实施出租汽车驾驶员巡游和网络预约从业资格“两考合一”，方便出租汽车驾驶员在巡游和网络预约两种业态之间从事经营活动，为人民群众在道路运输从业、就业、创业、择业创造良好环境。\n' + ' 首先，感谢您对出租汽车驾驶员从业资格管理工作的关心和支持。近年来，省委省政府、省交通运输厅高度重视道路运输从业资格“放管服”工作，于2023年，在全国率先实施出租汽车驾驶员从业资格考试省内异地约考，破解驾驶员报名难、考试难问题。拟于2024年7月1日前，实施出租汽车驾驶员巡游和网络预约从业资格“两考合一”，方便出租汽车驾驶员在巡游和网络预约两种业态之间从事经营活动，为人民群众在道路运输从业、就业、创业、择业创造良好环境。 根据《交通运输部关于印发交通运输系统“平安交通”创建活动实施方案的通知》（交安监发〔2013〕116号）部署，交通运输系统开展了为期5年的“平安交通”创建活动。目前，“平安交通”建设已进入关键阶段，各部门、各单位要结合安全生产责任体系、隐患排查治理、风险管理、安全诚信、企业标准化等工作，坚持问题导向、目标导向，聚焦重点领域，全面推进“平安交通”建设。\n\n' +
'' ''
}, },
} }
@ -271,41 +288,35 @@ export default {
this.getYwData('gat'); this.getYwData('gat');
}, },
//获取业务摘要信息 //获取业务摘要信息
getYwData(item){ getYwData(item) {
if (item === 'szf'){ if (item === 'szf') {
//调用方法获取数据给ywData赋值 //调用方法获取数据给ywData赋值
this.ywData.time = '2024-06-11'; this.ywData.time = '2024-06-11';
// this.ywData.content = ''; // this.ywData.content = '';
}else if (item === 'sjj'){ } else if (item === 'sjj') {
//调用方法获取数据给ywData赋值 //调用方法获取数据给ywData赋值
this.ywData.time = '2024/06/11'; this.ywData.time = '2024/06/11';
// this.ywData.content = ''; // this.ywData.content = '';
}else{ } else {
//调用方法获取数据给ywData赋值 //调用方法获取数据给ywData赋值
this.ywData.time = '2024-06-11'; this.ywData.time = '2024-06-11';
// this.ywData.content = ''; // this.ywData.content = '';
} }
}, },
conterChart(item) { conterChart(item) {
function fontSize(res){
let clientWidth = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
if (!clientWidth) return;
let fontSize = (clientWidth/1920);
return res*fontSize;
}
let myChart = getEchartInstance("conterChart"); let myChart = getEchartInstance("conterChart");
let data = [];//年月 let data = [];//年月
let zfData = [];//省政府 let zfData = [];//省政府
let sjjData = [];//市场监督管理局 let sjjData = [];//市场监督管理局
let gatData = [];//省公安厅 let gatData = [];//省公安厅
if (item === 'year'){ if (item === 'year') {
//调用查询年数据方法 //调用查询年数据方法
//给data，zfData，sjjData，gatData赋值 //给data，zfData，sjjData，gatData赋值
data = ['2019年', '2020', '2021年', '2022年', '2023年', '2024年'] data = ['2019年', '2020', '2021年', '2022年', '2023年', '2024年']
zfData = [150, 232, 201, 154, 190, 330] zfData = [150, 232, 201, 154, 190, 330]
sjjData = [320, 332, 301, 334, 390, 230] sjjData = [320, 332, 301, 334, 390, 230]
gatData = [120, 132, 101, 134, 190, 130] gatData = [120, 132, 101, 134, 190, 130]
}else{ } else {
//调用查询月数据方法 //调用查询月数据方法
//给data，zfData，sjjData，gatData赋值 //给data，zfData，sjjData，gatData赋值
data = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'] data = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
@ -320,16 +331,16 @@ export default {
// color:'#ccc',//'red'，字体颜色 // color:'#ccc',//'red'，字体颜色
// fontStyle:'normal',//'italic'(倾斜) | 'oblique'(倾斜体) ，字体风格 // fontStyle:'normal',//'italic'(倾斜) | 'oblique'(倾斜体) ，字体风格
// fontWeight:'normal',//'bold'(粗体) | 'bolder'(粗体) | 'lighter'(正常粗细) ，字体粗细 // fontWeight:'normal',//'bold'(粗体) | 'bolder'(粗体) | 'lighter'(正常粗细) ，字体粗细
fontSize: fontSize(18),//字体大小 fontSize: 18,//字体大小
lineHeight: 18,//字体行高 lineHeight: 18,//字体行高
color:'#84ACE8', color: '#84ACE8',
}, },
textAlign: 'auto',//整体（包括 text 和 subtext）的水平对齐 textAlign: 'auto',//整体（包括 text 和 subtext）的水平对齐
textVerticalAlign: 'auto',//整体（包括 text 和 subtext）的垂直对齐 textVerticalAlign: 'auto',//整体（包括 text 和 subtext）的垂直对齐
padding: 0,//[5,10] | [ 5,6, 7, 8] ,标题内边距 padding: 0,//[5,10] | [ 5,6, 7, 8] ,标题内边距
left: '5%',//'5' | '5%'，title 组件离容器左侧的距离 left: '20px',//'5' | '5%'，title 组件离容器左侧的距离
right: 'auto',//'title 组件离容器右侧的距离 right: 'auto',//'title 组件离容器右侧的距离
top: '5%',//title 组件离容器上侧的距离 top: '20px',//title 组件离容器上侧的距离
bottom: 'auto',//title 组件离容器下侧的距离 bottom: 'auto',//title 组件离容器下侧的距离
}, },
tooltip: { tooltip: {
@ -337,10 +348,14 @@ export default {
}, },
legend: { legend: {
data: ['省政府', '市场监督管理局', '省公安厅'], data: ['省政府', '市场监督管理局', '省公安厅'],
textStyle:{ textStyle: {
color:'#84ACE8', color: '#84ACE8',
fontSize: fontSize(12),//字体大小 fontSize: 12,//字体大小
}, },
left: '35%',//'5' | '5%'，title 组件离容器左侧的距离
right: 'auto',//'title 组件离容器右侧的距离
top: '12px',//title 组件离容器上侧的距离
bottom: 'auto',//title 组件离容器下侧的距离
}, },
grid: { grid: {
left: '3%', left: '3%',
@ -446,15 +461,15 @@ export default {
// align: "left", // align: "left",
// itemGap: 20, //数据上下的距离 // itemGap: 20, //数据上下的距离
// icon: "circle", //圆形小点展示，默认为方形，去掉就是方形展示 // icon: "circle", //圆形小点展示，默认为方形，去掉就是方形展示
itemWidth: 10, // 设置宽度 itemWidth: 14, // 设置宽度
itemHeight: 10, // 设置高度 itemHeight: 14, // 设置高度
// data: data, // data: data,
// top:'5%', // top:'5%',
bottom: '0%', bottom: '0%',
left: 'center', left: 'center',
textStyle: { textStyle: {
color: "#84ACE8", color: "#84ACE8",
fontSize:10, fontSize: 14,
} }
}, },
series: [ series: [
@ -470,7 +485,7 @@ export default {
emphasis: { emphasis: {
label: { label: {
show: true, show: true,
fontSize: 16, fontSize: 20,
fontWeight: 'bold' fontWeight: 'bold'
} }
}, },
@ -528,15 +543,15 @@ export default {
// align: "left", // align: "left",
// itemGap: 20, //数据上下的距离 // itemGap: 20, //数据上下的距离
// icon: "circle", //圆形小点展示，默认为方形，去掉就是方形展示 // icon: "circle", //圆形小点展示，默认为方形，去掉就是方形展示
itemWidth: 10, // 设置宽度 itemWidth: 14, // 设置宽度
itemHeight: 10, // 设置高度 itemHeight: 14, // 设置高度
// data: data, // data: data,
// top:'5%', // top:'5%',
bottom: '0%', bottom: '0%',
left: 'center', left: 'center',
textStyle: { textStyle: {
color: "#84ACE8", color: "#84ACE8",
fontSize:10, fontSize: 14,
} }
}, },
series: [ series: [
@ -553,7 +568,7 @@ export default {
emphasis: { emphasis: {
label: { label: {
show: true, show: true,
fontSize: 16, fontSize: 20,
fontWeight: 'bold' fontWeight: 'bold'
} }
}, },
@ -609,15 +624,15 @@ export default {
// align: "left", // align: "left",
// itemGap: 20, //数据上下的距离 // itemGap: 20, //数据上下的距离
// icon: "circle", //圆形小点展示，默认为方形，去掉就是方形展示 // icon: "circle", //圆形小点展示，默认为方形，去掉就是方形展示
itemWidth: 10, // 设置宽度 itemWidth: 14, // 设置宽度
itemHeight: 10, // 设置高度 itemHeight: 14, // 设置高度
// data: data, // data: data,
// top:'5%', // top:'5%',
bottom: '0%', bottom: '0%',
left: 'center', left: 'center',
textStyle: { textStyle: {
color: "#84ACE8", color: "#84ACE8",
fontSize:10, fontSize: 14,
} }
}, },
series: [ series: [
@ -633,7 +648,7 @@ export default {
emphasis: { emphasis: {
label: { label: {
show: true, show: true,
fontSize: 16, fontSize: 20,
fontWeight: 'bold' fontWeight: 'bold'
} }
}, },
@ -689,15 +704,15 @@ export default {
// align: "left", // align: "left",
// itemGap: 20, //数据上下的距离 // itemGap: 20, //数据上下的距离
// icon: "circle", //圆形小点展示，默认为方形，去掉就是方形展示 // icon: "circle", //圆形小点展示，默认为方形，去掉就是方形展示
itemWidth: 10, // 设置宽度 itemWidth: 14, // 设置宽度
itemHeight: 10, // 设置高度 itemHeight: 14, // 设置高度
// data: data, // data: data,
// top:'5%', // top:'5%',
bottom: '0%', bottom: '0%',
left: 'center', left: 'center',
textStyle: { textStyle: {
color: "#84ACE8", color: "#84ACE8",
fontSize:10, fontSize: 14,
} }
}, },
series: [ series: [
@ -713,7 +728,7 @@ export default {
emphasis: { emphasis: {
label: { label: {
show: true, show: true,
fontSize: 16, fontSize: 20,
fontWeight: 'bold' fontWeight: 'bold'
} }
}, },
@ -741,15 +756,15 @@ export default {
<style scoped> <style scoped>
html, body{ html, body {
width: 100%; width: 100%;
height: 1080px; height: 100%;
margin-top: 0; margin-top: 0;
} }
.all { .all {
width: 100%; width: 100%;
height: calc(100vh - 80px); height: 92%;
color: #FFFFFF; color: #FFFFFF;
background-image: url('../../assets/img/bj.png'); background-image: url('../../assets/img/bj.png');
background-repeat: no-repeat; background-repeat: no-repeat;
@ -761,7 +776,7 @@ html, body{
width: 32%; width: 32%;
height: 100%; height: 100%;
float: left; float: left;
margin-left: 1%; margin-left: 2%;
} }
.left-all-wai { .left-all-wai {
@ -790,35 +805,35 @@ html, body{
float: left; float: left;
background: linear-gradient(0deg, rgba(32, 49, 65, 0.7) 0%, rgba(32, 49, 65, 0) 100%); background: linear-gradient(0deg, rgba(32, 49, 65, 0.7) 0%, rgba(32, 49, 65, 0) 100%);
box-sizing: border-box; box-sizing: border-box;
border: calc(100vw*2/1920) solid; border: 1px solid;
border-image: linear-gradient(0deg, #52A5E7 0%, rgba(82, 165, 231, 0) 100%) 2; border-image: linear-gradient(0deg, #52A5E7 0%, rgba(82, 165, 231, 0) 100%) 2;
} }
.left-guoJzc { .left-guoJzc {
width: 100%; width: 30%;
height: 100%; height: 100%;
margin-left: 30%; margin-left: 35%;
background-image: url('../../assets/img/gjzc.png'); background-image: url('../../assets/img/gjzc.png');
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 40% 100%; background-size: 100% 100%;
} }
.left-sJzc { .left-sJzc {
width: 100%; width: 30%;
height: 100%; height: 100%;
margin-left: 30%; margin-left: 35%;
background-image: url('../../assets/img/sjzc.png'); background-image: url('../../assets/img/sjzc.png');
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 40% 100%; background-size: 100% 100%;
} }
.left-benTzd { .left-benTzd {
width: 100%; width: 30%;
height: 100%; height: 100%;
margin-left: 30%; margin-left: 35%;
background-image: url('../../assets/img/btzd.png'); background-image: url('../../assets/img/btzd.png');
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 40% 100%; background-size: 100% 100%;
} }
.left-yeWzy { .left-yeWzy {
@ -832,17 +847,17 @@ html, body{
.left-content-detail { .left-content-detail {
white-space: pre-wrap; white-space: pre-wrap;
margin-left: 2%; margin-left: 2%;
font-size: calc(100vw*12/1920); font-size: 12px;
color: #84ACE8; color: #84ACE8;
letter-spacing: 0em; letter-spacing: 0em;
//text-overflow: -o-ellipsis-lastline;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
display: -webkit-box; display: -webkit-box;
line-height: 1.5em; line-height: 1.5em;
-webkit-line-clamp: 8; -webkit-line-clamp: 8;
//line-clamp: 12;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
//line-clamp: 12;
//text-overflow:-o-ellipsis-lastline;
} }
.ckgd { .ckgd {
@ -853,7 +868,7 @@ html, body{
background-image: url('../../assets/img/ckgd.png'); background-image: url('../../assets/img/ckgd.png');
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 80%; background-size: 100% 80%;
cursor:pointer; cursor: pointer;
} }
.center-content { .center-content {
@ -862,7 +877,7 @@ html, body{
background-image: url('../../assets/img/hyxt.png'); background-image: url('../../assets/img/hyxt.png');
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
font-size: calc(100vw*20/1920); font-size: 16px;
} }
.right-content { .right-content {
@ -871,7 +886,7 @@ html, body{
background-image: url('../../assets/img/bxjy.png'); background-image: url('../../assets/img/bxjy.png');
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
font-size: calc(100vw*20/1920); font-size: 16px;
} }
.right-echarts { .right-echarts {
@ -881,7 +896,7 @@ html, body{
} }
.right-echarts-child { .right-echarts-child {
width: 46%; width: 48%;
height: 100%; height: 100%;
margin-left: 2%; margin-left: 2%;
float: left; float: left;
@ -910,31 +925,45 @@ html, body{
height: 30%; height: 30%;
background: linear-gradient(0deg, rgba(32, 49, 65, 0.7) 0%, rgba(32, 49, 65, 0) 100%); background: linear-gradient(0deg, rgba(32, 49, 65, 0.7) 0%, rgba(32, 49, 65, 0) 100%);
box-sizing: border-box; box-sizing: border-box;
border: calc(100vw*2/1920) solid; border: 1px solid;
border-image: linear-gradient(0deg, #52A5E7 0%, rgba(82, 165, 231, 0) 100%) 2; border-image: linear-gradient(0deg, #52A5E7 0%, rgba(82, 165, 231, 0) 100%) 2;
} }
.conter-content {
white-space: pre-wrap;
float: left;
font-size: 12px;
color: #84ACE8;
margin: 0 2%;
text-align: left;
overflow: hidden;
display: -webkit-box;
line-height: 1.5em;
-webkit-line-clamp: 11;
-webkit-box-orient: vertical;
}
.select_time { .select_time {
cursor:pointer; cursor: pointer;
position:relative; position: relative;
float: right; float: right;
background: #1e3d64; background: #1e3d64;
margin-top: 2%; margin-top: 2%;
//position: absolute;
z-index: 999; z-index: 999;
border-radius: calc(100vh*2/1080) calc(100vh*2/1080); border-radius: 2px 2px;
border: #52A5E7 calc(100vw*1/1920) solid; border: #52A5E7 1px solid;
//position: absolute;
} }
.select_time span { .select_time span {
display: block; display: block;
width: calc(100vw*30/1920); width: 30px;
height: calc(100vh*20/1080); height: 20px;
float: left; float: left;
text-align: center; text-align: center;
line-height: calc(100vh*20/1080); line-height: 20px;
color: #FFFFFF; color: #FFFFFF;
font-size: calc(100vw*14/1920); font-size: 14px;
} }
.select_time .active { .select_time .active {
@ -942,10 +971,9 @@ html, body{
color: #FFFFFF; color: #FFFFFF;
} }
.ywzy { .ywzy {
cursor:pointer; cursor: pointer;
position:relative; position: relative;
float: left; float: left;
z-index: 999; z-index: 999;
color: #84ACE8; color: #84ACE8;
@ -959,12 +987,13 @@ html, body{
float: left; float: left;
text-align: center; text-align: center;
color: #84ACE8; color: #84ACE8;
font-size: calc(100vw*16/1920); font-size: 16px;
margin-left: 2%; margin-left: 2%;
} }
.ywzy .active { .ywzy .active {
color: #FFFFFF; color: #FFFFFF;
font-weight: bold; font-weight: bold;
border-bottom: #30AEF5 calc(100vw*2/1920) solid; border-bottom: #30AEF5 2px solid;
} }
</style> </style>

Write Preview
Loading…
Cancel
Save