|
|
@@ -6,101 +6,29 @@
|
|
|
* @FilePath: \web-pc\src\pages\big-screen\view\indexs\index.vue
|
|
|
-->
|
|
|
<template>
|
|
|
- <div class="winseaview-view">
|
|
|
- <div class="host-body">
|
|
|
- <div class="d-flex jc-center title_wrap">
|
|
|
- <div class="zuojuxing"></div>
|
|
|
- <div class="youjuxing"></div>
|
|
|
- <div class="guang"></div>
|
|
|
- <div class="d-flex jc-center">
|
|
|
- <div class="title">
|
|
|
- <span class="title-text">易粮易运大数据分析平台</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="timers ">
|
|
|
-
|
|
|
- {{ dateYear }} {{ dateWeek }} {{ dateDay }}
|
|
|
- <i class=" blq-icon-shezhi02" style="margin-left:10px" @click="showSetting"></i>
|
|
|
+<div class="winseaview-view">
|
|
|
+ <div class="host-body">
|
|
|
+ <div class="d-flex jc-center title_wrap">
|
|
|
+ <div class="zuojuxing"></div>
|
|
|
+ <div class="youjuxing"></div>
|
|
|
+ <div class="guang"></div>
|
|
|
+ <div class="d-flex jc-center">
|
|
|
+ <div class="title">
|
|
|
+ <span class="title-text">易粮易运大数据分析平台</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="contents ">
|
|
|
- <div class="contetn_left">
|
|
|
- <div class="pagetab">
|
|
|
- <!-- <div class="item">实时监测</div> -->
|
|
|
+ <div class="timers ">
|
|
|
|
|
|
- </div>
|
|
|
- <ItemWrap class="contetn_left-top contetn_lr-item" title="在途信息统计">
|
|
|
- <LeftTop :listData="leftTopDataList"/>
|
|
|
- </ItemWrap>
|
|
|
- <ItemWrap class="contetn_left-center contetn_lr-item" title="合营比例">
|
|
|
- <LeftCenter />
|
|
|
- </ItemWrap>
|
|
|
- <ItemWrap class="contetn_left-bottom contetn_lr-item" title="在途信息" style="padding: 0 10px 16px 10px">
|
|
|
- <LeftBottom />
|
|
|
- </ItemWrap>
|
|
|
- </div>
|
|
|
- <div class="contetn_center">
|
|
|
- <div class="maptitle">
|
|
|
- <div class="zuo"></div>
|
|
|
- <span class="titletext">库点流向分布</span>
|
|
|
- <div class="you"></div>
|
|
|
- </div>
|
|
|
- <dv-border-box-13>
|
|
|
- <div id="china-map"></div>
|
|
|
- </dv-border-box-13>
|
|
|
- <dv-border-box-1 class="center_bottom">
|
|
|
- <div class="center_bottom_content">
|
|
|
-
|
|
|
- <div class="row1">
|
|
|
- <div class="item_title">
|
|
|
- <!-- <div class="zuo"></div> -->
|
|
|
- <span class="title-inner"> 头寸</span>
|
|
|
- <!-- <div class="you"></div> -->
|
|
|
- </div>
|
|
|
- <div>123123吨</div>
|
|
|
- </div>
|
|
|
- <div class="row2 ">
|
|
|
- <div class="item_title">
|
|
|
- <span class="title-inner"> 实际库存</span>
|
|
|
- <div>123123吨</div>
|
|
|
- </div>
|
|
|
- <div class="item_title">
|
|
|
- <div class="title-inner">采购待执行（吨）</div>
|
|
|
- <div>123123吨</div>
|
|
|
- </div>
|
|
|
- <div class="item_title">
|
|
|
- <div class="title-inner">销售待执行（吨）</div>
|
|
|
- <div>123123吨</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </dv-border-box-1>
|
|
|
- <!-- <CenterMap class="contetn_center_top" /> -->
|
|
|
- <!-- <ItemWrap class="contetn_center-bottom" title="安装计划">
|
|
|
- <CenterBottom />
|
|
|
- </ItemWrap> -->
|
|
|
- </div>
|
|
|
- <div class="contetn_right">
|
|
|
- <ItemWrap class="contetn_left-bottom contetn_lr-item" title="出入库分布">
|
|
|
- <RightTop />
|
|
|
- </ItemWrap>
|
|
|
- <ItemWrap class="contetn_left-bottom contetn_lr-item" title="库存排名" style="padding: 0 10px 16px 10px">
|
|
|
- <RightCenter />
|
|
|
- </ItemWrap>
|
|
|
- <ItemWrap class="contetn_left-bottom contetn_lr-item" title="最新合同 ">
|
|
|
- <RightBottom />
|
|
|
- </ItemWrap>
|
|
|
+ {{ dateYear }} {{ dateWeek }} {{ dateDay }}
|
|
|
+ <i class=" blq-icon-shezhi02" style="margin-left:10px" @click="showSetting"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+
|
|
|
+</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import {
|
|
|
- gChartsData,
|
|
|
-} from '@/model/home/index'
|
|
|
import { formatTime } from '../../utils/index.js';
|
|
|
import LeftTop from './left-top.vue'
|
|
|
import LeftCenter from './left-center.vue';
|
|
|
@@ -116,13 +44,12 @@ export default {
|
|
|
LeftBottom,
|
|
|
// CenterMap,
|
|
|
RightTop,
|
|
|
- RightCenter,
|
|
|
- RightBottom
|
|
|
+ RightCenter,
|
|
|
+ RightBottom
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- leftTopDataList:[],
|
|
|
- timing: null,
|
|
|
+ timing: null,
|
|
|
loading: true,
|
|
|
dateDay: null,
|
|
|
dateYear: null,
|
|
|
@@ -138,27 +65,19 @@ export default {
|
|
|
},
|
|
|
created() {
|
|
|
},
|
|
|
+
|
|
|
mounted() {
|
|
|
- gChartsData({
|
|
|
- compId: localStorage.getItem('ws-pf_compId'),
|
|
|
- loadingstatus: 1,
|
|
|
- seachMoth: '2022'
|
|
|
- }).toPromise().then(res => {
|
|
|
- console.log('··············', res)
|
|
|
- this.leftTopDataList = res[2].biViewInfoList
|
|
|
- this.timeFn();
|
|
|
- this.cancelLoading();
|
|
|
+ this.timeFn();
|
|
|
+ this.cancelLoading();
|
|
|
this.china_map();
|
|
|
-
|
|
|
- })
|
|
|
-
|
|
|
},
|
|
|
- beforeDestroy() {
|
|
|
+ beforeDestroy() {
|
|
|
clearInterval(this.timing);
|
|
|
},
|
|
|
methods: {
|
|
|
//中国地图
|
|
|
china_map() {
|
|
|
+ debugger
|
|
|
let mapChart = this.$echarts.init(document.getElementById('china-map')); //图表初始化，china-map是绑定的元素
|
|
|
window.onresize = mapChart.resize; //如果容器变大小，自适应从新构图
|
|
|
let series = []; //存放循环配置项
|
|
|
@@ -517,8 +436,8 @@ export default {
|
|
|
};
|
|
|
mapChart.setOption(option); //生成图表
|
|
|
},
|
|
|
- showSetting() {
|
|
|
- this.$refs.setting.init()
|
|
|
+ showSetting(){
|
|
|
+ this.$refs.setting.init()
|
|
|
},
|
|
|
timeFn() {
|
|
|
this.timing = setInterval(() => {
|
|
|
@@ -536,273 +455,269 @@ export default {
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
-// &.pageisScale {
|
|
|
-// position: absolute;
|
|
|
-// top: 50%;
|
|
|
-// left: 50%;
|
|
|
-// transform: translate(-50%, -50%);
|
|
|
-// transform-origin: left top;
|
|
|
-// }
|
|
|
-.winseaview-view {
|
|
|
- background: #03050C
|
|
|
-}
|
|
|
-
|
|
|
-.bg {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- padding: 16px 16px 10px 16px;
|
|
|
- box-sizing: border-box;
|
|
|
- background-image: url("../../assets/images/pageBg.png");
|
|
|
- background-size: cover;
|
|
|
- background-position: center center;
|
|
|
-}
|
|
|
-
|
|
|
-.host-body {
|
|
|
-
|
|
|
- .title_wrap {
|
|
|
- height: 60px;
|
|
|
- background-image: url("../../assets/images/top.png");
|
|
|
- background-size: cover;
|
|
|
- background-position: center center;
|
|
|
- position: relative;
|
|
|
- margin-bottom: 4px;
|
|
|
-
|
|
|
- .guang {
|
|
|
- position: absolute;
|
|
|
- bottom: -26px;
|
|
|
- background-image: url("../../assets/images/guang.png");
|
|
|
- background-position: 80px center;
|
|
|
- width: 100%;
|
|
|
- height: 56px;
|
|
|
- }
|
|
|
-
|
|
|
- .zuojuxing,
|
|
|
- .youjuxing {
|
|
|
- position: absolute;
|
|
|
- top: -2px;
|
|
|
- width: 140px;
|
|
|
- height: 6px;
|
|
|
- background-image: url("../../assets/images/headers/juxing1.png");
|
|
|
- }
|
|
|
-
|
|
|
- .zuojuxing {
|
|
|
-
|
|
|
- left: 11%;
|
|
|
- }
|
|
|
-
|
|
|
- .youjuxing {
|
|
|
- right: 11%;
|
|
|
- transform: rotate(180deg);
|
|
|
- }
|
|
|
-
|
|
|
- .timers {
|
|
|
- position: absolute;
|
|
|
- right: 0;
|
|
|
- top: 30px;
|
|
|
- font-size: 18px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
+ // &.pageisScale {
|
|
|
+ // position: absolute;
|
|
|
+ // top: 50%;
|
|
|
+ // left: 50%;
|
|
|
+ // transform: translate(-50%, -50%);
|
|
|
+ // transform-origin: left top;
|
|
|
+ // }
|
|
|
+ .winseaview-view{
|
|
|
+ background:#03050C
|
|
|
+ }
|
|
|
|
|
|
- .blq-icon-shezhi02 {
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
+ .bg {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ padding: 16px 16px 10px 16px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background-image: url("../../assets/images/pageBg.png");
|
|
|
+ background-size: cover;
|
|
|
+ background-position: center center;
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .title {
|
|
|
- position: relative;
|
|
|
- // width: 500px;
|
|
|
- text-align: center;
|
|
|
- background-size: cover;
|
|
|
- color: transparent;
|
|
|
- height: 60px;
|
|
|
- line-height: 46px;
|
|
|
+ .host-body {
|
|
|
+
|
|
|
+ .title_wrap {
|
|
|
+ height: 60px;
|
|
|
+ background-image: url("../../assets/images/top.png");
|
|
|
+ background-size: cover;
|
|
|
+ background-position: center center;
|
|
|
+ position: relative;
|
|
|
+ margin-bottom: 4px;
|
|
|
+
|
|
|
+ .guang {
|
|
|
+ position: absolute;
|
|
|
+ bottom: -26px;
|
|
|
+ background-image: url("../../assets/images/guang.png");
|
|
|
+ background-position: 80px center;
|
|
|
+ width: 100%;
|
|
|
+ height: 56px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .zuojuxing,
|
|
|
+ .youjuxing {
|
|
|
+ position: absolute;
|
|
|
+ top: -2px;
|
|
|
+ width: 140px;
|
|
|
+ height: 6px;
|
|
|
+ background-image: url("../../assets/images/headers/juxing1.png");
|
|
|
+ }
|
|
|
+
|
|
|
+ .zuojuxing {
|
|
|
+
|
|
|
+ left: 11%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .youjuxing {
|
|
|
+ right: 11%;
|
|
|
+ transform: rotate(180deg);
|
|
|
+ }
|
|
|
+
|
|
|
+ .timers {
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 30px;
|
|
|
+ font-size: 18px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .blq-icon-shezhi02 {
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .title-text {
|
|
|
- font-size: 38px;
|
|
|
- font-weight: 900;
|
|
|
- letter-spacing: 6px;
|
|
|
- width: 100%;
|
|
|
- background: linear-gradient(92deg, #0072FF 0%, #00EAFF 48.8525390625%, #01AAFF 100%);
|
|
|
- -webkit-background-clip: text;
|
|
|
- -webkit-text-fill-color: transparent;
|
|
|
+ .title {
|
|
|
+ position: relative;
|
|
|
+ // width: 500px;
|
|
|
+ text-align: center;
|
|
|
+ background-size: cover;
|
|
|
+ color: transparent;
|
|
|
+ height: 60px;
|
|
|
+ line-height: 46px;
|
|
|
+
|
|
|
+ .title-text {
|
|
|
+ font-size: 38px;
|
|
|
+ font-weight: 900;
|
|
|
+ letter-spacing: 6px;
|
|
|
+ width: 100%;
|
|
|
+ background: linear-gradient(92deg, #0072FF 0%, #00EAFF 48.8525390625%, #01AAFF 100%);
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ -webkit-text-fill-color: transparent;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
-}
|
|
|
|
|
|
|
|
|
.index_home {
|
|
|
- .pagetab {
|
|
|
- position: absolute;
|
|
|
- top: -35px;
|
|
|
- display: flex;
|
|
|
-
|
|
|
- .item {
|
|
|
- width: 130px;
|
|
|
- height: 36px;
|
|
|
- border-radius: 18px 0px 0px 18px;
|
|
|
- color: #00FBF8;
|
|
|
- text-indent: 26px;
|
|
|
- line-height: 36px;
|
|
|
- font-size: 16px;
|
|
|
- margin-right: 20px;
|
|
|
- background: linear-gradient(to right, rgba(76, 245, 255, .5), rgba(76, 245, 255, 0));
|
|
|
+ .pagetab {
|
|
|
+ position: absolute;
|
|
|
+ top: -35px;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ width: 130px;
|
|
|
+ height: 36px;
|
|
|
+ border-radius: 18px 0px 0px 18px;
|
|
|
+ color: #00FBF8;
|
|
|
+ text-indent: 26px;
|
|
|
+ line-height: 36px;
|
|
|
+ font-size: 16px;
|
|
|
+ margin-right: 20px;
|
|
|
+ background: linear-gradient(to right, rgba(76, 245, 255, .5), rgba(76, 245, 255, 0));
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
}
|
|
|
|
|
|
.setting {
|
|
|
- position: fixed;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- z-index: 999;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
-
|
|
|
- .left_shu {
|
|
|
- color: #000;
|
|
|
- font-weight: 900;
|
|
|
- position: relative;
|
|
|
- text-indent: 10px;
|
|
|
- padding: 16px 0 10px 0;
|
|
|
-
|
|
|
- &::before {
|
|
|
- display: block;
|
|
|
- content: " ";
|
|
|
- height: 16px;
|
|
|
- width: 4px;
|
|
|
- border-radius: 2px;
|
|
|
- background: #0072FF;
|
|
|
- position: absolute;
|
|
|
- left: 0px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .setting_dislog {
|
|
|
- background-color: rgba($color: #000000, $alpha: .5);
|
|
|
- position: absolute;
|
|
|
+ position: fixed;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
- z-index: 0;
|
|
|
- right: 0;
|
|
|
+ z-index: 999;
|
|
|
top: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .setting_inner {
|
|
|
- box-sizing: border-box;
|
|
|
- background: #FFF;
|
|
|
- width: 340px;
|
|
|
- height: 100%;
|
|
|
- position: absolute;
|
|
|
- right: 0px;
|
|
|
- top: 0;
|
|
|
- z-index: 1;
|
|
|
- color: #000000;
|
|
|
- box-shadow: 0 8px 10px -5px rgba(0, 0, 0, .2), 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12);
|
|
|
-
|
|
|
- .setting_header {
|
|
|
- font-size: 20px;
|
|
|
- color: rgb(0, 0, 0);
|
|
|
- font-weight: 900;
|
|
|
- text-align: center;
|
|
|
- line-height: 40px;
|
|
|
+ left: 0;
|
|
|
+
|
|
|
+ .left_shu {
|
|
|
+ color: #000;
|
|
|
+ font-weight: 900;
|
|
|
+ position: relative;
|
|
|
+ text-indent: 10px;
|
|
|
+ padding:16px 0 10px 0 ;
|
|
|
+ &::before {
|
|
|
+ display: block;
|
|
|
+ content: " ";
|
|
|
+ height: 16px;
|
|
|
+ width: 4px;
|
|
|
+ border-radius: 2px;
|
|
|
+ background: #0072FF;
|
|
|
+ position: absolute;
|
|
|
+ left: 0px;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- .setting_body {
|
|
|
- padding: 0px 16px;
|
|
|
- box-sizing: border-box;
|
|
|
- position: relative;
|
|
|
+ .setting_dislog {
|
|
|
+ background-color: rgba($color: #000000, $alpha: .5);
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ z-index: 0;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
}
|
|
|
|
|
|
- .setting_item {
|
|
|
- font-size: 14px;
|
|
|
- line-height: 1.5;
|
|
|
+ .setting_inner {
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: #FFF;
|
|
|
+ width: 340px;
|
|
|
+ height: 100%;
|
|
|
+ position: absolute;
|
|
|
+ right: 0px;
|
|
|
+ top: 0;
|
|
|
+ z-index: 1;
|
|
|
+ color: #000000;
|
|
|
+ box-shadow: 0 8px 10px -5px rgba(0, 0, 0, .2), 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12);
|
|
|
+
|
|
|
+ .setting_header {
|
|
|
+ font-size: 20px;
|
|
|
+ color: rgb(0, 0, 0);
|
|
|
+ font-weight: 900;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 40px;
|
|
|
+ }
|
|
|
|
|
|
- // display: flex;
|
|
|
- .setting_label {
|
|
|
- color: #555454;
|
|
|
- }
|
|
|
+ .setting_body {
|
|
|
+ padding: 0px 16px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
|
|
|
- .setting_label_tip {
|
|
|
- font-size: 12px;
|
|
|
- color: #838282;
|
|
|
- }
|
|
|
+ .setting_item {
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 1.5;
|
|
|
+
|
|
|
+ // display: flex;
|
|
|
+ .setting_label {
|
|
|
+ color: #555454;
|
|
|
+ }
|
|
|
+ .setting_label_tip{
|
|
|
+ font-size: 12px;
|
|
|
+ color: #838282;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .setting_inner {
|
|
|
- animation: rtl-drawer-out .3s;
|
|
|
- }
|
|
|
+ .setting_inner {
|
|
|
+ animation: rtl-drawer-out .3s;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
|
|
|
.settingShow {
|
|
|
- .setting_inner {
|
|
|
- animation: rtl-drawer-in .3s 1ms;
|
|
|
- }
|
|
|
+ .setting_inner {
|
|
|
+ animation: rtl-drawer-in .3s 1ms;
|
|
|
+ }
|
|
|
|
|
|
}
|
|
|
|
|
|
.yh-setting-fade-enter-active {
|
|
|
- animation: yh-setting-fade-in .3s;
|
|
|
+ animation: yh-setting-fade-in .3s;
|
|
|
}
|
|
|
|
|
|
.yh-setting-fade-leave-active {
|
|
|
|
|
|
- animation: yh-setting-fade-out .3s;
|
|
|
+ animation: yh-setting-fade-out .3s;
|
|
|
|
|
|
}
|
|
|
|
|
|
@keyframes yh-setting-fade-in {
|
|
|
- 0% {
|
|
|
- opacity: 0;
|
|
|
- }
|
|
|
+ 0% {
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
|
|
|
- 100% {
|
|
|
- opacity: 1;
|
|
|
- }
|
|
|
+ 100% {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
@keyframes yh-setting-fade-out {
|
|
|
- 0% {
|
|
|
- opacity: 1;
|
|
|
+ 0% {
|
|
|
+ opacity: 1;
|
|
|
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
- 100% {
|
|
|
- opacity: 0;
|
|
|
- }
|
|
|
+ 100% {
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
|
|
|
@keyframes rtl-drawer-in {
|
|
|
- 0% {
|
|
|
- transform: translate(100%, 0)
|
|
|
- }
|
|
|
+ 0% {
|
|
|
+ transform: translate(100%, 0)
|
|
|
+ }
|
|
|
|
|
|
- 100% {
|
|
|
- -webkit-transform: translate(0, 0);
|
|
|
- transform: translate(0, 0)
|
|
|
- }
|
|
|
+ 100% {
|
|
|
+ -webkit-transform: translate(0, 0);
|
|
|
+ transform: translate(0, 0)
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
@keyframes rtl-drawer-out {
|
|
|
- 0% {
|
|
|
- transform: translate(0, 0)
|
|
|
- }
|
|
|
+ 0% {
|
|
|
+ transform: translate(0, 0)
|
|
|
+ }
|
|
|
|
|
|
- 100% {
|
|
|
- transform: translate(100%, 0)
|
|
|
- }
|
|
|
+ 100% {
|
|
|
+ transform: translate(100%, 0)
|
|
|
+ }
|
|
|
}
|
|
|
-
|
|
|
// 内容
|
|
|
.contents {
|
|
|
width: 100%;
|
|
|
- display: flex;
|
|
|
- min-height: calc(100% - 60px);
|
|
|
- justify-content: space-between;
|
|
|
-
|
|
|
+ display: flex;
|
|
|
+ min-height: calc(100% - 60px);
|
|
|
+ justify-content: space-between;
|
|
|
.contetn_left,
|
|
|
.contetn_right {
|
|
|
width: 540px;
|
|
|
@@ -842,109 +757,65 @@ export default {
|
|
|
justify-content: space-around;
|
|
|
position: relative;
|
|
|
|
|
|
-
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
@keyframes rotating {
|
|
|
- 0% {
|
|
|
- -webkit-transform: rotate(0) scale(1);
|
|
|
- transform: rotate(0) scale(1);
|
|
|
- }
|
|
|
-
|
|
|
- 50% {
|
|
|
- -webkit-transform: rotate(180deg) scale(1.1);
|
|
|
- transform: rotate(180deg) scale(1.1);
|
|
|
- }
|
|
|
-
|
|
|
- 100% {
|
|
|
- -webkit-transform: rotate(360deg) scale(1);
|
|
|
- transform: rotate(360deg) scale(1);
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-#china-map {
|
|
|
- height: 540px;
|
|
|
- width: 100%;
|
|
|
- top: 0;
|
|
|
+ 0% {
|
|
|
+ -webkit-transform: rotate(0) scale(1);
|
|
|
+ transform: rotate(0) scale(1);
|
|
|
+ }
|
|
|
+ 50% {
|
|
|
+ -webkit-transform: rotate(180deg) scale(1.1);
|
|
|
+ transform: rotate(180deg) scale(1.1);
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ -webkit-transform: rotate(360deg) scale(1);
|
|
|
+ transform: rotate(360deg) scale(1);
|
|
|
+ }
|
|
|
}
|
|
|
-
|
|
|
-.maptitle {
|
|
|
- height: 60px;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- padding-top: 10px;
|
|
|
- box-sizing: border-box;
|
|
|
-
|
|
|
- .titletext {
|
|
|
- font-size: 28px;
|
|
|
- font-weight: 900;
|
|
|
- letter-spacing: 6px;
|
|
|
- background: linear-gradient(92deg,
|
|
|
- #0072ff 0%,
|
|
|
- #00eaff 48.8525390625%,
|
|
|
- #01aaff 100%);
|
|
|
- -webkit-background-clip: text;
|
|
|
- -webkit-text-fill-color: transparent;
|
|
|
- margin: 0 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .zuo,
|
|
|
- .you {
|
|
|
- background-size: 100% 100%;
|
|
|
- width: 29px;
|
|
|
- height: 20px;
|
|
|
- margin-top: 8px;
|
|
|
- }
|
|
|
-
|
|
|
- .zuo {
|
|
|
- background: url("../../assets/images/xiezuo.png") no-repeat;
|
|
|
- }
|
|
|
-
|
|
|
- .you {
|
|
|
- background: url("../../assets/images/xieyou.png") no-repeat;
|
|
|
+ #china-map {
|
|
|
+ height: 540px;
|
|
|
+ width: 100%;
|
|
|
+ top: 0;
|
|
|
}
|
|
|
-}
|
|
|
-
|
|
|
-.center_bottom {
|
|
|
- color: #fff;
|
|
|
- font-size: 30px;
|
|
|
-}
|
|
|
-
|
|
|
-.center_bottom_content {
|
|
|
- padding: 20px;
|
|
|
- box-sizing: border-box;
|
|
|
-}
|
|
|
-
|
|
|
-.item_title {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-}
|
|
|
+
|
|
|
+ .maptitle {
|
|
|
+ height: 60px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ padding-top: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
|
-.zuo,
|
|
|
-.you {
|
|
|
- width: 58px;
|
|
|
- height: 14px;
|
|
|
- background-image: url("../../assets/images/titles/zuo.png");
|
|
|
-}
|
|
|
+ .titletext {
|
|
|
+ font-size: 28px;
|
|
|
+ font-weight: 900;
|
|
|
+ letter-spacing: 6px;
|
|
|
+ background: linear-gradient(92deg,
|
|
|
+ #0072ff 0%,
|
|
|
+ #00eaff 48.8525390625%,
|
|
|
+ #01aaff 100%);
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ -webkit-text-fill-color: transparent;
|
|
|
+ margin: 0 10px;
|
|
|
+ }
|
|
|
|
|
|
-.you {
|
|
|
- transform: rotate(180deg);
|
|
|
-}
|
|
|
+ .zuo,
|
|
|
+ .you {
|
|
|
+ background-size: 100% 100%;
|
|
|
+ width: 29px;
|
|
|
+ height: 20px;
|
|
|
+ margin-top: 8px;
|
|
|
+ }
|
|
|
|
|
|
-.title-inner {
|
|
|
- font-weight: 900;
|
|
|
- letter-spacing: 2px;
|
|
|
- background: linear-gradient(92deg,
|
|
|
- #0072ff 0%,
|
|
|
- #00eaff 48.8525390625%,
|
|
|
- #01aaff 100%);
|
|
|
- -webkit-background-clip: text;
|
|
|
- -webkit-text-fill-color: transparent;
|
|
|
-}
|
|
|
+ .zuo {
|
|
|
+ background: url("../../assets/images/xiezuo.png") no-repeat;
|
|
|
+ }
|
|
|
|
|
|
-.row1 {
|
|
|
- display: flex
|
|
|
-}
|
|
|
+ .you {
|
|
|
+ background: url("../../assets/images/xieyou.png") no-repeat;
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|
