|
|
@@ -1,32 +1,34 @@
|
|
|
<template>
|
|
|
<div class="home container">
|
|
|
<div class="part1">
|
|
|
- <div class="super-title " style="margin-top:240px ;">青浦区“一张图”区级节点</div>
|
|
|
- <div class="title-sub ">以二三维一体化引擎为核心,构建政务时空数据治理与应用服务生态,赋能城市精细化治理</div>
|
|
|
- <div class="part1-1">
|
|
|
- <div class="part1-1-1">
|
|
|
- <div class="number-container">
|
|
|
- <span class="text">调用总数</span>
|
|
|
- <span v-for="(num, index) in totalCall" :key="index">
|
|
|
- <span v-if="num.indexOf(',') > -1">
|
|
|
- <span class="separator">,</span>
|
|
|
- </span>
|
|
|
- <span v-else>
|
|
|
- <span class="number-item">{{ num }}</span>
|
|
|
+ <div>
|
|
|
+ <div class="super-title">青浦区“一张图”区级节点</div>
|
|
|
+ <div class="title-sub ">以二三维一体化引擎为核心,构建政务时空数据治理与应用服务生态,赋能城市精细化治理</div>
|
|
|
+ <div class="part1-1">
|
|
|
+ <div class="part1-1-1">
|
|
|
+ <div class="number-container">
|
|
|
+ <span class="text">调用总数</span>
|
|
|
+ <span v-for="(num, index) in totalCall" :key="index">
|
|
|
+ <span v-if="num.indexOf(',') > -1">
|
|
|
+ <span class="separator">,</span>
|
|
|
+ </span>
|
|
|
+ <span v-else>
|
|
|
+ <span class="number-item">{{ num }}</span>
|
|
|
+ </span>
|
|
|
</span>
|
|
|
- </span>
|
|
|
- <span class="text">次</span>
|
|
|
+ <span class="text">次</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="part1-1-2">
|
|
|
- <div class="call-count-container">
|
|
|
- <div class="line"></div>
|
|
|
- <div>
|
|
|
- <span class="text1">昨日调用量</span>
|
|
|
- <span class="count">{{ lastDayCall }}</span>
|
|
|
- <span class="text2">次</span>
|
|
|
+ <div class="part1-1-2">
|
|
|
+ <div class="call-count-container">
|
|
|
+ <div class="line"></div>
|
|
|
+ <div>
|
|
|
+ <span class="text1">昨日调用量</span>
|
|
|
+ <span class="count">{{ lastDayCall }}</span>
|
|
|
+ <span class="text2">次</span>
|
|
|
+ </div>
|
|
|
+ <div class="line"></div>
|
|
|
</div>
|
|
|
- <div class="line"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -97,7 +99,7 @@
|
|
|
<Back />
|
|
|
</el-icon>
|
|
|
</el-button>
|
|
|
- <el-date-picker v-model="chartMluTimeRange" type="daterange" range-separator="到" start-placeholder="开始日期"
|
|
|
+ <el-date-picker v-model="chartMluTimeRange" :clearable="false" type="daterange" range-separator="到" start-placeholder="开始日期"
|
|
|
end-placeholder="结束日期" @change="chartMluFocus()" />
|
|
|
</span>
|
|
|
</div>
|
|
|
@@ -213,15 +215,17 @@
|
|
|
:style="`background-image: url(${useCaseItem.picture})`">
|
|
|
<div class="use-case-empty"></div>
|
|
|
<div class="use-case-text">
|
|
|
- <el-tag v-for="item in useCaseItem.tags" :key="item" color="#e2e4f4" size="lager" effect="dark" round>
|
|
|
+ <el-tag v-for="item in useCaseItem.tags" style="margin-right: 5px;" :key="item" color="#e2e4f4" size="lager" effect="dark" round>
|
|
|
<span class="blue">
|
|
|
{{ item }}
|
|
|
</span>
|
|
|
</el-tag>
|
|
|
<span class="third-title">
|
|
|
- {{ useCaseItem.title }}
|
|
|
+ <span style="padding: 10px 0px;">
|
|
|
+ {{ useCaseItem.title }}
|
|
|
+ </span>
|
|
|
</span>
|
|
|
- <p class="font grey">
|
|
|
+ <p class="font grey" style="padding-top: 0px !important;">
|
|
|
{{ useCaseItem.text }}
|
|
|
</p>
|
|
|
</div>
|
|
|
@@ -339,9 +343,9 @@
|
|
|
<div class="darkblue-background image-background col"
|
|
|
:style="`background-Image:url('${require('@/assets/images/common/home-bg4.png')}');`">
|
|
|
<div class="row" style="margin-top: auto;">
|
|
|
- <ElButton type="primary">
|
|
|
+ <!-- <ElButton type="primary">
|
|
|
了解更多
|
|
|
- </ElButton>
|
|
|
+ </ElButton> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
@@ -442,7 +446,7 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="darkblue-background col" style="height: 1400px;">
|
|
|
+ <div class="darkblue-background col" style="height: auto;">
|
|
|
<div class="super-title grey">
|
|
|
<div>全链路运行监督</div>
|
|
|
<div>据驱动优化决策</div>
|
|
|
@@ -626,6 +630,11 @@ export default {
|
|
|
tooltip: {
|
|
|
trigger: "axis", // 坐标轴触发提示
|
|
|
axisPointer: { type: "shadow" },
|
|
|
+ backgroundColor: "rgba(0, 25, 50, 0.8)",
|
|
|
+ borderColor: "#1E90FF",
|
|
|
+ textStyle: {
|
|
|
+ color: "#fff",
|
|
|
+ },
|
|
|
},
|
|
|
xAxis: {
|
|
|
type: "category",
|
|
|
@@ -640,7 +649,7 @@ export default {
|
|
|
splitLine: {
|
|
|
lineStyle: {
|
|
|
type: "dashed", // 虚线网格
|
|
|
- color: "#fff",
|
|
|
+ color: "#113761",
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
@@ -667,11 +676,11 @@ export default {
|
|
|
trigger: 'axis',
|
|
|
show: true,
|
|
|
formatter: '{b}: {c}',
|
|
|
- backgroundColor: 'rgba(50, 50, 50, 0.7)',
|
|
|
- borderColor: '#333',
|
|
|
+ backgroundColor: "rgba(0, 25, 50, 0.8)",
|
|
|
+ borderColor: "#1E90FF",
|
|
|
textStyle: {
|
|
|
- color: '#fff'
|
|
|
- }
|
|
|
+ color: "#fff",
|
|
|
+ },
|
|
|
},
|
|
|
title: {
|
|
|
text: '所有委办',
|
|
|
@@ -695,7 +704,8 @@ export default {
|
|
|
xAxis: [
|
|
|
{
|
|
|
type: 'value',
|
|
|
- axisLine: { lineStyle: { color: "#fff" } }
|
|
|
+ // axisLine: { lineStyle: { color: "#fff" } },
|
|
|
+ splitLine: { show: false }, // 隐藏分割线
|
|
|
}
|
|
|
],
|
|
|
yAxis: [
|
|
|
@@ -991,6 +1001,7 @@ export default {
|
|
|
|
|
|
.middle {
|
|
|
text-align: center;
|
|
|
+ margin-top: 20px;
|
|
|
}
|
|
|
|
|
|
.darkblue-background,
|
|
|
@@ -1036,15 +1047,15 @@ export default {
|
|
|
|
|
|
.lighter-container {
|
|
|
background-color: #eeeeee0b;
|
|
|
- padding: 10px;
|
|
|
+ padding: 20px;
|
|
|
margin: 15px;
|
|
|
vertical-align: middle;
|
|
|
- border-radius: 3%;
|
|
|
+ border-radius: 10px;
|
|
|
}
|
|
|
|
|
|
.lightblue-container {
|
|
|
- border-radius: 3%;
|
|
|
- padding: 10px;
|
|
|
+ border-radius: 10px;
|
|
|
+ padding: 20px;
|
|
|
margin: 15px;
|
|
|
background: linear-gradient(to bottom,
|
|
|
#215476 0%,
|
|
|
@@ -1155,10 +1166,12 @@ export default {
|
|
|
|
|
|
.third-title {
|
|
|
font-size: 18px;
|
|
|
- margin-top: 10px;
|
|
|
- padding-left: 10px;
|
|
|
+ align-items: center;
|
|
|
display: flex;
|
|
|
font-weight: bold;
|
|
|
+ i{
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.top-list {
|
|
|
@@ -1200,19 +1213,19 @@ export default {
|
|
|
|
|
|
.use-case-empty {
|
|
|
width: 100%;
|
|
|
- height: 40%;
|
|
|
+ height: 50%;
|
|
|
}
|
|
|
|
|
|
.use-case-text {
|
|
|
padding: 15px;
|
|
|
width: 100%;
|
|
|
- height: 60%;
|
|
|
+ height: 50%;
|
|
|
border-radius: 10px;
|
|
|
box-sizing: border-box;
|
|
|
background: linear-gradient(to bottom,
|
|
|
#377f7f 0%,
|
|
|
#377f7f 80%,
|
|
|
- #347cac 100%);
|
|
|
+ #205161 100%);
|
|
|
|
|
|
.third-title {
|
|
|
padding: 0;
|
|
|
@@ -1222,7 +1235,7 @@ export default {
|
|
|
|
|
|
.six-router {
|
|
|
width: 30%;
|
|
|
- height: 300px;
|
|
|
+ // height: 300px;
|
|
|
font-size: 28px;
|
|
|
|
|
|
.third-title {
|
|
|
@@ -1231,8 +1244,10 @@ export default {
|
|
|
}
|
|
|
|
|
|
.circle-number {
|
|
|
- display: block;
|
|
|
- background-color: #eeeeee1d;
|
|
|
+ // display: block;
|
|
|
+ margin-right: 10px;
|
|
|
+ background-color: #eeeeee00;
|
|
|
+ border: 1px solid #2272d4;
|
|
|
}
|
|
|
|
|
|
.block-page-router {
|
|
|
@@ -1256,10 +1271,12 @@ export default {
|
|
|
|
|
|
.grey {
|
|
|
color: rgb(192, 192, 192);
|
|
|
+ padding: 20px 0px;
|
|
|
}
|
|
|
|
|
|
.lightgrey {
|
|
|
color: rgb(229, 229, 229);
|
|
|
+ padding: 20px 0px
|
|
|
}
|
|
|
|
|
|
#echart1 {
|
|
|
@@ -1273,7 +1290,7 @@ export default {
|
|
|
}
|
|
|
|
|
|
.container {
|
|
|
- width: 1920px;
|
|
|
+ width: 100%;
|
|
|
margin: 0 auto;
|
|
|
}
|
|
|
|
|
|
@@ -1281,13 +1298,18 @@ export default {
|
|
|
position: relative;
|
|
|
|
|
|
.part1 {
|
|
|
- height: 810px;
|
|
|
- background: url(~@/assets/images/common/home-bg1.png) no-repeat center;
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100vh - 120px);
|
|
|
+ background: url(~@/assets/images/common/home-bg1.png);
|
|
|
+ background-size: 100% auto;
|
|
|
position: relative;
|
|
|
overflow: hidden;
|
|
|
+ display: grid;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
|
|
|
.part1-1 {
|
|
|
- width: 1000px;
|
|
|
+ width: 100%;
|
|
|
height: 200px;
|
|
|
//background: #09284c;
|
|
|
margin: 0 auto;
|
|
|
@@ -1309,7 +1331,10 @@ export default {
|
|
|
.number-item {
|
|
|
width: 57px;
|
|
|
height: 70px;
|
|
|
- background-color: #007bff;
|
|
|
+ background-color: rgb(10 71 137 / 70%);
|
|
|
+ border: 1px solid #2663a5;
|
|
|
+ box-shadow: 0 4px 20px #2663a5;
|
|
|
+ border-radius: 10px;
|
|
|
color: white;
|
|
|
display: flex;
|
|
|
justify-content: center;
|