|
@@ -1,9 +1,9 @@
|
|
|
<template>
|
|
|
- <div class="overview">
|
|
|
+ <div ref="homepage" :class="skinMode === 'light' ? 'light-overview' : 'dark-overview'">
|
|
|
<!-- 顶部路由 -->
|
|
|
<div class="menu">
|
|
|
<div class="home" @click="$emit('update:modelNum', 0)">
|
|
|
- <div class="downright"></div>
|
|
|
+ <!-- <div class="downright"></div> -->
|
|
|
<div class="home-box">
|
|
|
<img src="@/assets/imgs/logo.png" alt />
|
|
|
<!-- <span>{{plazas.length>0?formatter(plazaId,plazas):'--'}}</span> -->
|
|
@@ -13,6 +13,10 @@
|
|
|
<div class="home-right">
|
|
|
<span style="color: #8d9399">
|
|
|
<span class="span3">{{ times }}</span>
|
|
|
+ <img @mouseenter="showSwitchTip = true" @mouseleave="delayToHideTip" src="../../assets/images/icons/switch.png">
|
|
|
+ <div class="tip" v-show="showSwitchTip" @mouseenter="cancelHideTip" @mouseleave="showSwitchTip = false" @click="changeSkin" >
|
|
|
+ {{skinMode === 'light' ? '切换深色版':'切换浅色版'}}
|
|
|
+ </div>
|
|
|
</span>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -46,7 +50,7 @@
|
|
|
</section>
|
|
|
</nav>
|
|
|
<main class="container">
|
|
|
- <section class="system-general">
|
|
|
+ <section class="system-general dot-background">
|
|
|
<div class="system-main-title">
|
|
|
<h4 class="section-title">系统概况</h4>
|
|
|
</div>
|
|
@@ -74,10 +78,8 @@
|
|
|
transform: item.expand ? 'rotate(0)' : 'rotate(180deg)',
|
|
|
}"
|
|
|
>
|
|
|
- <img
|
|
|
- v-if="item.showColor"
|
|
|
- src="../../assets/images/icons/arrow.png"
|
|
|
- />
|
|
|
+ <!-- <img v-if="item.showColor" :src="`../../assets/images/icons/${skinMode === 'light'?'arrow':'expand_dark'}.png`" /> -->
|
|
|
+ <img v-if="item.showColor" src="`../../assets/images/icons/arrow.png`" />
|
|
|
<img v-else src="../../assets/images/icons/grey.png" />
|
|
|
</div>
|
|
|
<div class="system-equipments">
|
|
@@ -159,9 +161,8 @@
|
|
|
</section>
|
|
|
<section class="map-box">
|
|
|
<section class="cards-list">
|
|
|
- <div class="card" @click="navToManageNumber">
|
|
|
+ <div class="card dot-background" @click="navToManageNumber">
|
|
|
<div class="card-title">
|
|
|
- <img src="../../assets/images/icons/curve.png" />
|
|
|
<p>上线管理说明书广场数量</p>
|
|
|
</div>
|
|
|
<div class="describe">
|
|
@@ -170,9 +171,8 @@
|
|
|
>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="card" @click="navToIntroduceUpdate">
|
|
|
+ <div class="card dot-background" @click="navToIntroduceUpdate">
|
|
|
<div class="card-title">
|
|
|
- <img src="../../assets/images/icons/amount.png" />
|
|
|
<p>当月说明书更新数量</p>
|
|
|
</div>
|
|
|
<div class="describe">
|
|
@@ -204,18 +204,15 @@
|
|
|
</section>
|
|
|
<section class="ratio-list">
|
|
|
<section
|
|
|
- class="block"
|
|
|
+ class="block dot-background"
|
|
|
:style="panelStyle(item)"
|
|
|
v-for="(item, index) in maintainList"
|
|
|
:key="index"
|
|
|
>
|
|
|
- <h4 class="section-title" @click="toggerPanel(item)">
|
|
|
- {{ item.title
|
|
|
- }}<img
|
|
|
- @mouseover="showToolTip(index, item.title)"
|
|
|
- @mouseout="hideToolTip(index, item.title)"
|
|
|
- src="../../assets/images/icons/notice.png"
|
|
|
- />
|
|
|
+ <h4 class="section-title" @click="toggerPanel(item)" @mouseover="showToolTip(index, item.title)" @mouseout="hideToolTip(index, item.title)" >
|
|
|
+ {{ item.title}}
|
|
|
+ <img v-show="skinMode==='light'" src="../../assets/images/icons/notice.png" />
|
|
|
+ <img v-show="skinMode==='dark'" src="../../assets/images/icons/alert.png" />
|
|
|
</h4>
|
|
|
<transition name="selectDownUpExtendTop">
|
|
|
<div class="tool-tip" v-if="item.showToolTip">
|
|
@@ -266,16 +263,8 @@
|
|
|
</div>
|
|
|
</li>
|
|
|
</ul>
|
|
|
- <div
|
|
|
- class="arrow"
|
|
|
- v-show="item.expand !== 2"
|
|
|
- :style="{
|
|
|
- transform:
|
|
|
- item.expand === 1 ? 'rotate(-90deg)' : 'rotate(90deg)',
|
|
|
- }"
|
|
|
- @click="toggerPanel(item)"
|
|
|
- >
|
|
|
- <img src="../../assets/images/icons/right.png" />
|
|
|
+ <div class="arrow" v-show="item.expand !== 2" :style="{ transform: item.expand === 1 ? 'rotate(180deg)' : 'rotate(0deg)'}" @click="toggerPanel(item)" >
|
|
|
+ <img src="../../assets/images/icons/arrow_d_u.png" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
@@ -402,6 +391,10 @@ import "leaflet-contextmenu";
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
+ tipTimer:null,
|
|
|
+ showSwitchTip:false,
|
|
|
+ mapLayer:null,
|
|
|
+ skinMode:'light',
|
|
|
zoneTotal: 0,
|
|
|
centerTotal: 0,
|
|
|
projectTotal: 0,
|
|
@@ -525,6 +518,41 @@ export default {
|
|
|
window.addEventListener("resize", this.reinitalMap, false);
|
|
|
},
|
|
|
methods: {
|
|
|
+ delayToHideTip() {
|
|
|
+ this.tipTimer = setTimeout(() => {
|
|
|
+ this.showSwitchTip = false
|
|
|
+ }, 500);
|
|
|
+ },
|
|
|
+ cancelHideTip(){
|
|
|
+ clearTimeout(this.tipTimer);
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ *@description 切换皮肤
|
|
|
+ */
|
|
|
+ changeSkin() {
|
|
|
+ const vm = this
|
|
|
+ const mapDom = document.querySelector("#map")
|
|
|
+ const icons = mapDom.querySelectorAll(".my-leaflet-div-icon")
|
|
|
+ if (this.skinMode === 'light') {
|
|
|
+ this.skinMode = 'dark'
|
|
|
+ icons.forEach(dom => {
|
|
|
+ dom.style.color = "#FFF"
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.skinMode = 'light'
|
|
|
+ icons.forEach(dom => {
|
|
|
+ dom.style.color = "#333"
|
|
|
+ })
|
|
|
+ }
|
|
|
+ if (this.mapLayer) {
|
|
|
+ this.mapLayer.setStyle({
|
|
|
+ weight: 1,
|
|
|
+ color: vm.skinMode === "light" ? "#B3D2FF" :"#56a3c2",
|
|
|
+ fillColor: vm.skinMode === "light" ? "#DEECFF" : "#21285c",
|
|
|
+ fillOpacity: vm.skinMode === "light" ? 0.2 : 1
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
downloadExcel() {
|
|
|
let tableContent = document.querySelector("#tableReport").outerHTML;
|
|
|
let blob = new Blob([tableContent], {
|
|
@@ -916,7 +944,7 @@ export default {
|
|
|
if (title === "专维") {
|
|
|
item.overdue_unfinished = item.overdue_unfinished || 0;
|
|
|
if (item.overdue_unfinished > 0 || item.due_num > 0) {
|
|
|
- bg = "linear-gradient(to right, #F54E45 , #F54E45)";
|
|
|
+ bg = this.skinMode ==='light' ? "linear-gradient(to right, #F54E45 , #F54E45)" : 'linear-gradient(to right, #DE944D , #F58300)';
|
|
|
}
|
|
|
// else {
|
|
|
// bg = this.barColors[type]
|
|
@@ -924,7 +952,7 @@ export default {
|
|
|
ratio = ((item.overdue_unfinished + item.due_num) / item.total) * 100;
|
|
|
} else {
|
|
|
if (item.due_num > 0) {
|
|
|
- bg = "linear-gradient(to right, #F54E45 , #F54E45)";
|
|
|
+ bg = this.skinMode ==='light' ? "linear-gradient(to right, #F54E45 , #F54E45)" : 'linear-gradient(to right, #DE944D , #F58300)';
|
|
|
}
|
|
|
// bg = this.barColors[type]
|
|
|
ratio = (item.due_num / item.total) * 100;
|
|
@@ -1118,7 +1146,7 @@ export default {
|
|
|
// dragging: false,
|
|
|
});
|
|
|
let JsonData = require("../../assets/geoData/china.json");
|
|
|
- let layer = L.geoJSON(JsonData.features, {
|
|
|
+ this.mapLayer = L.geoJSON(JsonData.features, {
|
|
|
style: function () {
|
|
|
return {
|
|
|
weight: 1,
|
|
@@ -1127,6 +1155,7 @@ export default {
|
|
|
};
|
|
|
},
|
|
|
}).addTo(myMaps);
|
|
|
+
|
|
|
if (this.currentLevel === 1) {
|
|
|
//1集团
|
|
|
this.pantGroupMap(this.currentZoneData, this.currentSysId);
|
|
@@ -1142,16 +1171,19 @@ export default {
|
|
|
* @Description 清空地图 并添加全国底图
|
|
|
*/
|
|
|
clearAllLayers() {
|
|
|
+ const vm = this
|
|
|
myMaps.eachLayer(function (layer) {
|
|
|
myMaps.removeLayer(layer);
|
|
|
});
|
|
|
let JsonData = require("../../assets/geoData/china.json");
|
|
|
- let layer = L.geoJSON(JsonData.features, {
|
|
|
+ this.mapLayer = L.geoJSON(JsonData.features, {
|
|
|
style: function () {
|
|
|
return {
|
|
|
weight: 1,
|
|
|
- color: "#B3D2FF",
|
|
|
- fillColor: "#DEECFF",
|
|
|
+ color: vm.skinMode === "light" ? "#B3D2FF" :"#56a3c2",
|
|
|
+ // fillColor: vm.skinMode === "light" ? "#DEECFF" : "red",
|
|
|
+ fillColor: vm.skinMode === "light" ? "#DEECFF" : "#21285c",
|
|
|
+ fillOpacity: vm.skinMode === "light" ? 0.2 : 1
|
|
|
};
|
|
|
},
|
|
|
}).addTo(myMaps);
|
|
@@ -1497,10 +1529,11 @@ export default {
|
|
|
type,
|
|
|
zoom
|
|
|
) {
|
|
|
+ let vm =this
|
|
|
let color = this.paintColorByData(num);
|
|
|
let textIcon = L.divIcon({
|
|
|
html: type == "group" ? name : `<div>${name}</div>`,
|
|
|
- className: "my-leaflet-div-icon",
|
|
|
+ className: vm.skinMode==='light'? "my-leaflet-div-icon":"dark-my-leaflet-div-icon",
|
|
|
iconSize: 30,
|
|
|
});
|
|
|
let circleIcon = L.icon({
|
|
@@ -1605,7 +1638,12 @@ export default {
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
-<style scoped lang="less">
|
|
|
+<style scoped lang="less">
|
|
|
+@import "../../assets/css/dark.less";
|
|
|
+@import "../../assets/css/light.less";
|
|
|
+.dark-my-leaflet-div-icon{
|
|
|
+ color: white;
|
|
|
+}
|
|
|
@keyframes selectDownUpExtendTop {
|
|
|
from {
|
|
|
transform: translateY(8px);
|
|
@@ -1632,573 +1670,5 @@ export default {
|
|
|
padding-top: 0;
|
|
|
}
|
|
|
|
|
|
-.overview {
|
|
|
- height: 100vh;
|
|
|
- background: rgba(247, 249, 250, 1);
|
|
|
- .my-dialog {
|
|
|
- position: relative;
|
|
|
- .shut-download {
|
|
|
- position: absolute;
|
|
|
- top: 10px;
|
|
|
- right: 10px;
|
|
|
- width: 90px;
|
|
|
- height: 30px;
|
|
|
- cursor: pointer;
|
|
|
- text-align: center;
|
|
|
- span {
|
|
|
- display: inline-block;
|
|
|
- }
|
|
|
- .download {
|
|
|
- width: 50px;
|
|
|
- border-right: 1px solid #cccccc;
|
|
|
- }
|
|
|
- .shut {
|
|
|
- width: 30px;
|
|
|
- }
|
|
|
- }
|
|
|
- .table-content {
|
|
|
- margin: 0;
|
|
|
- padding-bottom: 40px;
|
|
|
- .table-title {
|
|
|
- height: 56px;
|
|
|
- line-height: 56px;
|
|
|
- border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
|
|
- font-size: 16px;
|
|
|
- font-weight: bold;
|
|
|
- color: #000;
|
|
|
- }
|
|
|
- .table-tabs {
|
|
|
- margin: 16px 0;
|
|
|
- }
|
|
|
- .table-select {
|
|
|
- margin-bottom: 12px;
|
|
|
- }
|
|
|
- table {
|
|
|
- width: 100%;
|
|
|
- thead {
|
|
|
- height: 40px;
|
|
|
- line-height: 40px;
|
|
|
- background: #f8f9fa;
|
|
|
- th {
|
|
|
- font-size: 12px;
|
|
|
- color: #646a73;
|
|
|
- font-weight: normal;
|
|
|
- padding: 0 24px;
|
|
|
- }
|
|
|
- }
|
|
|
- tbody {
|
|
|
- // tr:first-child{
|
|
|
- // font-size:14px;
|
|
|
- // font-weight: bold;
|
|
|
- // color: #1F2429;
|
|
|
- // }
|
|
|
- tr {
|
|
|
- height: 48px;
|
|
|
- line-height: 48px;
|
|
|
- border-bottom: 1px solid #e4e6e7;
|
|
|
- td {
|
|
|
- padding: 0 24px;
|
|
|
- line-height: 22px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .empty-text {
|
|
|
- height: 60px;
|
|
|
- line-height: 60px;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .menu {
|
|
|
- height: 48px;
|
|
|
- min-width: 1366px;
|
|
|
- color: #1f2429;
|
|
|
- font-size: 1.6rem;
|
|
|
- background: rgba(255, 255, 255, 1);
|
|
|
- box-shadow: 0px 2px 10px 0px rgba(31, 35, 41, 0.1);
|
|
|
- overflow: hidden;
|
|
|
- .home {
|
|
|
- width: 265px;
|
|
|
- height: 48px;
|
|
|
- // line-height: 48px;
|
|
|
- text-align: center;
|
|
|
- cursor: pointer;
|
|
|
- color: #ffffff;
|
|
|
- float: left;
|
|
|
- margin-right: 83px;
|
|
|
- // background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
|
|
|
- background: linear-gradient(
|
|
|
- 180deg,
|
|
|
- rgba(54, 156, 247, 1) 0%,
|
|
|
- rgba(2, 91, 170, 1) 100%
|
|
|
- );
|
|
|
- position: relative;
|
|
|
- .downright {
|
|
|
- position: absolute;
|
|
|
- width: 0;
|
|
|
- height: 0;
|
|
|
- border-left: 20px solid transparent;
|
|
|
- border-bottom: 48px solid #fff;
|
|
|
- right: 0px;
|
|
|
- top: 0;
|
|
|
- }
|
|
|
- .home-box {
|
|
|
- height: 100%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- img {
|
|
|
- width: 28px;
|
|
|
- height: 28px;
|
|
|
- margin-left: 20px;
|
|
|
- margin-right: 24px;
|
|
|
- margin-top: -3px;
|
|
|
- }
|
|
|
- span {
|
|
|
- font-size: 2rem;
|
|
|
- font-family: MicrosoftYaHei;
|
|
|
- height: 27px;
|
|
|
- line-height: 27px;
|
|
|
- margin-top: -4px;
|
|
|
- &:after {
|
|
|
- content: "|";
|
|
|
- position: absolute;
|
|
|
- left: 60px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- & > div:nth-of-type(2) {
|
|
|
- & > div {
|
|
|
- line-height: 48px;
|
|
|
- text-align: center;
|
|
|
- //background: url('../assets/images/topbar1.png') no-repeat;
|
|
|
- float: left;
|
|
|
- width: 80px;
|
|
|
- height: 48px;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.2s;
|
|
|
- }
|
|
|
- .is-active {
|
|
|
- color: #025baa;
|
|
|
- font-weight: bolder;
|
|
|
- border-bottom: 2px solid #025baa;
|
|
|
- background: linear-gradient(
|
|
|
- 180deg,
|
|
|
- rgba(2, 91, 170, 0) 0%,
|
|
|
- rgba(2, 91, 170, 0.2) 100%
|
|
|
- );
|
|
|
- }
|
|
|
- }
|
|
|
- .home-right {
|
|
|
- float: right;
|
|
|
- margin-right: 20px;
|
|
|
- line-height: 48px;
|
|
|
- color: #646c73;
|
|
|
- font-size: 1.4rem;
|
|
|
- cursor: pointer;
|
|
|
- display: flex;
|
|
|
- align-content: center;
|
|
|
- img {
|
|
|
- margin-top: -2px;
|
|
|
- }
|
|
|
- .span-out {
|
|
|
- position: relative;
|
|
|
- margin: 0 16px;
|
|
|
- .span2-num {
|
|
|
- position: absolute;
|
|
|
- right: -5px;
|
|
|
- top: 5px;
|
|
|
- display: inline-block;
|
|
|
- width: 18px;
|
|
|
- height: 18px;
|
|
|
- border-radius: 90px;
|
|
|
- font-size: 1.2rem;
|
|
|
- text-align: center;
|
|
|
- line-height: 18px;
|
|
|
- color: #ffffff;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .span1,
|
|
|
- .span2 {
|
|
|
- padding: 0 6px 0 3px;
|
|
|
- }
|
|
|
-
|
|
|
- .span3 {
|
|
|
- padding-left: 3px;
|
|
|
- }
|
|
|
- }
|
|
|
- .navigation {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- height: 50px;
|
|
|
- padding: 0 16px;
|
|
|
- background: white;
|
|
|
- .crumbs {
|
|
|
- span {
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- span:first-child {
|
|
|
- display: inline-block;
|
|
|
- width: auto;
|
|
|
- height: 3rem;
|
|
|
- margin-right: 1.2rem;
|
|
|
- border: 1px solid rgba(195, 199, 203, 1);
|
|
|
- border-radius: 1.4rem;
|
|
|
- padding: 0 2rem;
|
|
|
- text-align: center;
|
|
|
- line-height: 2.8rem;
|
|
|
- font-size: 14px;
|
|
|
- cursor: default;
|
|
|
- }
|
|
|
- span:last-child {
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .container {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- height: calc(100vh - 98px);
|
|
|
- padding: 1.2rem 1.6rem;
|
|
|
- .section-title {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- padding-left: 10px;
|
|
|
- border-left: 4px solid #025baa;
|
|
|
- color: #1f2429;
|
|
|
- font-size: 1.6rem;
|
|
|
- font-weight: bolder;
|
|
|
- line-height: 2rem;
|
|
|
- cursor: pointer;
|
|
|
- img {
|
|
|
- width: 2rem;
|
|
|
- margin-left: 1.2rem;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .system-general {
|
|
|
- width: 25.4%;
|
|
|
- box-sizing: border-box;
|
|
|
- background: white;
|
|
|
- .system-main-title {
|
|
|
- padding: 2rem 0 2.4rem 1.6rem;
|
|
|
- }
|
|
|
- .system-list {
|
|
|
- height: 80vh;
|
|
|
- overflow-y: auto;
|
|
|
- ul {
|
|
|
- li.system-item {
|
|
|
- position: relative;
|
|
|
- display: flex;
|
|
|
- justify-content: flex-start;
|
|
|
- align-items: stretch;
|
|
|
- width: calc(100% - 3.2rem);
|
|
|
- margin-left: 0.8rem;
|
|
|
- margin-bottom: 0.4rem;
|
|
|
- box-sizing: border-box;
|
|
|
- border: 1px solid #eff0f1;
|
|
|
- border-radius: 4px;
|
|
|
- transition: 0.5s;
|
|
|
- cursor: pointer;
|
|
|
- .system-name {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- bottom: 0;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- flex-shrink: 1;
|
|
|
- flex-grow: 1;
|
|
|
- width: 18%;
|
|
|
- height: auto;
|
|
|
- img {
|
|
|
- width: 3.2rem;
|
|
|
- height: 3.2rem;
|
|
|
- margin-bottom: 0.6rem;
|
|
|
- }
|
|
|
- span {
|
|
|
- color: white;
|
|
|
- font-size: 1.4rem;
|
|
|
- font-weight: bolder;
|
|
|
- }
|
|
|
- }
|
|
|
- .system-equipments-container {
|
|
|
- position: relative;
|
|
|
- width: 88%;
|
|
|
- padding: 0.6rem;
|
|
|
- margin-left: 18%;
|
|
|
- .more {
|
|
|
- position: absolute;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- width: 14px;
|
|
|
- height: 14px;
|
|
|
- right: 8px;
|
|
|
- top: 50%;
|
|
|
- border-radius: 7px;
|
|
|
- cursor: pointer;
|
|
|
- transform: rotate(0);
|
|
|
- transform-origin: center;
|
|
|
- z-index: 100;
|
|
|
- transform: translateY(-7px);
|
|
|
- img {
|
|
|
- width: 14px;
|
|
|
- height: 14px;
|
|
|
- }
|
|
|
- }
|
|
|
- .system-equipments {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- .number {
|
|
|
- width: 30%;
|
|
|
- margin-right: 1%;
|
|
|
- background: #eff0f1;
|
|
|
- border-radius: 2px;
|
|
|
- padding: 1.4rem 0 1rem 0.4rem;
|
|
|
- .title {
|
|
|
- display: inline-block;
|
|
|
- position: relative;
|
|
|
- line-height: 1;
|
|
|
- p {
|
|
|
- display: inline-block;
|
|
|
- position: relative;
|
|
|
- color: #1f2429;
|
|
|
- font-size: 1.4rem;
|
|
|
- line-height: 2rem;
|
|
|
- white-space: nowrap;
|
|
|
- text-overflow: ellipsis;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
- span {
|
|
|
- position: absolute;
|
|
|
- top: -1rem;
|
|
|
- right: -2rem;
|
|
|
- padding: 2px 4px;
|
|
|
- border-radius: 0.9rem;
|
|
|
- font-size: 1.2rem;
|
|
|
- color: #f54e45;
|
|
|
- background: #fde3e2;
|
|
|
- }
|
|
|
- }
|
|
|
- p {
|
|
|
- span:first-child {
|
|
|
- color: #1f2429;
|
|
|
- font-size: 1.8rem;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- .amount {
|
|
|
- font-size: bold;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- li.selected {
|
|
|
- border-color: rgba(0, 118, 197, 0.6);
|
|
|
- box-shadow: 0 2px 10px 0px rgba(0, 118, 197, 0.4);
|
|
|
- }
|
|
|
- li:hover {
|
|
|
- border-color: #e4e5e7;
|
|
|
- box-shadow: 0 2px 10px 0px rgba(195, 199, 203, 0.4);
|
|
|
- }
|
|
|
- li:nth-of-type(1),
|
|
|
- li:nth-of-type(4),
|
|
|
- li:nth-of-type(7) {
|
|
|
- .system-name {
|
|
|
- background: linear-gradient(to left, #4064cc, #6c8be2);
|
|
|
- }
|
|
|
- }
|
|
|
- li:nth-of-type(2),
|
|
|
- li:nth-of-type(5),
|
|
|
- li:nth-of-type(6) {
|
|
|
- .system-name {
|
|
|
- background: linear-gradient(to left, #3998db, #70bbef);
|
|
|
- }
|
|
|
- }
|
|
|
- li:nth-of-type(3),
|
|
|
- li:nth-of-type(8) {
|
|
|
- .system-name {
|
|
|
- background: linear-gradient(to left, #30ae88, #53d5b1);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .map-box {
|
|
|
- width: calc(56.6% - 2.4rem);
|
|
|
- margin: 0 12px;
|
|
|
- .cards-list {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- .card {
|
|
|
- width: 50%;
|
|
|
- box-sizing: border-box;
|
|
|
- border-radius: 4px;
|
|
|
- background: white;
|
|
|
- .card-title {
|
|
|
- position: relative;
|
|
|
- height: 5rem;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- padding: 10px 12px;
|
|
|
- color: white;
|
|
|
- font-size: 16px;
|
|
|
- border-radius: 4px;
|
|
|
- background-image: url("../../assets/images/icons/title_bg.png");
|
|
|
- background-position: center center;
|
|
|
- background-size: 100%;
|
|
|
- img {
|
|
|
- width: 2rem;
|
|
|
- height: 2rem;
|
|
|
- margin-right: 1.2rem;
|
|
|
- }
|
|
|
- }
|
|
|
- .describe {
|
|
|
- padding: 2rem 4rem;
|
|
|
- }
|
|
|
- }
|
|
|
- div:first-child.card {
|
|
|
- margin-right: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- div:nth-of-type(1) .img {
|
|
|
- background: rgba(130, 199, 252, 0.14);
|
|
|
- }
|
|
|
- div:nth-of-type(2) .img {
|
|
|
- background: rgba(0, 214, 185, 0.14);
|
|
|
- }
|
|
|
-
|
|
|
- strong {
|
|
|
- color: #1f2429;
|
|
|
- font-size: 2.4rem;
|
|
|
- margin-left: 3rem;
|
|
|
- }
|
|
|
- }
|
|
|
- .map-container {
|
|
|
- position: relative;
|
|
|
- height: 90%;
|
|
|
- #map {
|
|
|
- height: 100%;
|
|
|
- overflow: hidden;
|
|
|
-
|
|
|
- svg {
|
|
|
- pointer-events: none;
|
|
|
- }
|
|
|
- }
|
|
|
- .legend {
|
|
|
- position: absolute;
|
|
|
- left: 1.4rem;
|
|
|
- bottom: 10rem;
|
|
|
- padding: 0.6rem;
|
|
|
- background: white;
|
|
|
- .legend-bar {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- span {
|
|
|
- display: inline-block;
|
|
|
- height: 4px;
|
|
|
- width: 20px;
|
|
|
- margin-right: 12px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .ratio-list {
|
|
|
- width: 18%;
|
|
|
- .block {
|
|
|
- position: relative;
|
|
|
- padding: 1.2rem 1.6rem;
|
|
|
- height: calc((100% - 2rem) / 3);
|
|
|
- border-radius: 4px;
|
|
|
- margin-bottom: 1rem;
|
|
|
- background: white;
|
|
|
- // overflow: auto;
|
|
|
- transition: height 0.3s ease-in-out;
|
|
|
- .section-title {
|
|
|
- font-size: 1.6rem;
|
|
|
- }
|
|
|
- .tool-tip {
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- top: -6.6rem;
|
|
|
- width: 100%;
|
|
|
- border-radius: 4px;
|
|
|
- padding: 0.8rem 1.6rem 1.6rem;
|
|
|
- font-size: 1.4rem;
|
|
|
- line-height: 2.2rem;
|
|
|
- background: white;
|
|
|
- border: 1px solid rgba(151, 151, 151, 0.2);
|
|
|
- filter: drop-shadow(0 2px 4px rgba(31, 35, 41, 0.1));
|
|
|
- .tip-triangle {
|
|
|
- position: absolute;
|
|
|
- position: absolute;
|
|
|
- left: 7.8rem;
|
|
|
- border-style: solid;
|
|
|
- width: 0;
|
|
|
- height: 0;
|
|
|
- bottom: -6px;
|
|
|
- border-width: 6px 6px 0 6px;
|
|
|
- border-color: rgba(247, 249, 250, 1) transparent transparent
|
|
|
- transparent;
|
|
|
- }
|
|
|
- }
|
|
|
- .list {
|
|
|
- margin-top: 1.4rem;
|
|
|
- overflow: hidden;
|
|
|
- height: calc(100% - 7.5rem);
|
|
|
- ul {
|
|
|
- li {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: center;
|
|
|
- margin-bottom: 1.2rem;
|
|
|
- .ratio {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- margin-bottom: 0.5rem;
|
|
|
- span:first-child {
|
|
|
- color: #646c73;
|
|
|
- font-size: 1.4rem;
|
|
|
- }
|
|
|
- }
|
|
|
- .bar {
|
|
|
- position: relative;
|
|
|
- height: 6px;
|
|
|
- border-radius: 3px;
|
|
|
- background: #c3c7cb;
|
|
|
- .inner-bar {
|
|
|
- position: absolute;
|
|
|
- height: 6px;
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
- border-radius: 3px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .arrow {
|
|
|
- position: absolute;
|
|
|
- bottom: 0;
|
|
|
- left: 50%;
|
|
|
- cursor: pointer;
|
|
|
- transform-origin: center center;
|
|
|
- transform: translateX(-50%) rotate(90deg);
|
|
|
- }
|
|
|
- }
|
|
|
- section:last-child.block {
|
|
|
- margin-bottom: 0;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
</style>
|
|
|
|