|
@@ -1,112 +1,223 @@
|
|
|
<template>
|
|
|
- <div class="main-data logistics-assets-operation">
|
|
|
+ <div class="main-data logistics-assets-operation" @click="showAssets" @mouseover="showAssets">
|
|
|
<!-- <div class="title-area">后勤资产</div> -->
|
|
|
<div class="content-area">
|
|
|
- <div class="content-left">
|
|
|
- <div class="content-title">
|
|
|
- <span class="title">后勤资产总数</span>
|
|
|
- </div>
|
|
|
- <div class="content">
|
|
|
- <div class="total-cont">
|
|
|
- <div class="total">203836</div>
|
|
|
- <div class="unit">个</div>
|
|
|
- </div>
|
|
|
- <div class="charts-cont">
|
|
|
- <pie-chart
|
|
|
- v-if="show"
|
|
|
- :chart-data="pieData"
|
|
|
- :legend="pieLegend"
|
|
|
- :center="pieCenter"
|
|
|
- width="240px"
|
|
|
- height="240px"
|
|
|
- />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="content-right" @click="showAssets" @mouseover="showAssets">
|
|
|
- <div class="content-title">
|
|
|
- <span class="title">赋码贴签情况</span>
|
|
|
- </div>
|
|
|
- <div class="content">
|
|
|
- <div class="device-cont">
|
|
|
- <div class="title">楼宇设备</div>
|
|
|
- <div class="device-info">
|
|
|
- <div class="device-item">
|
|
|
- <img src="@/assets/images/logistics_guarantee/img_5.png" class="icon" alt="" />
|
|
|
- <div class="rate">
|
|
|
- <div class="rate-data">
|
|
|
- <div class="data">100</div>
|
|
|
- <div class="unit">%</div>
|
|
|
+ <div class="dialog-left">
|
|
|
+ <div class="dialog-list">
|
|
|
+ <div class="dialog-item wid100">
|
|
|
+ <div class="content-title">
|
|
|
+ <span class="title">赋码贴签</span>
|
|
|
+ </div>
|
|
|
+ <div class="content">
|
|
|
+ <div class="device-cont">
|
|
|
+ <div class="device-info">
|
|
|
+ <div class="device-item1">
|
|
|
+ <img src="@/assets/images/logistics_guarantee/boxhigh.png" class="icon" alt="" />
|
|
|
+ <div class="rate">
|
|
|
+ <div class="rate-data">
|
|
|
+ <div class="data">100</div>
|
|
|
+ <div class="unit">%</div>
|
|
|
+ </div>
|
|
|
+ <div class="desc">赋码率</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="desc">赋码率</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="device-item">
|
|
|
- <img src="@/assets/images/logistics_guarantee/img_5.png" class="icon" alt="" />
|
|
|
- <div class="rate">
|
|
|
- <div class="rate-data">
|
|
|
- <div class="data">100</div>
|
|
|
- <div class="unit">%</div>
|
|
|
+ <div class="device-item1">
|
|
|
+ <img src="@/assets/images/logistics_guarantee/boxhigh.png" class="icon" alt="" />
|
|
|
+ <div class="rate">
|
|
|
+ <div class="rate-data">
|
|
|
+ <div class="data">100</div>
|
|
|
+ <div class="unit">%</div>
|
|
|
+ </div>
|
|
|
+ <div class="desc">贴签率</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="device-item1">
|
|
|
+ <pie-chart
|
|
|
+ position="left"
|
|
|
+ :chart-data="pieData"
|
|
|
+ :legend="pieLegend"
|
|
|
+
|
|
|
+ :center="['35%','40%']"
|
|
|
+ width="220px"
|
|
|
+ height="180px"
|
|
|
+ />
|
|
|
</div>
|
|
|
- <div class="desc">贴签率</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
|
|
|
- <div class="device-cont">
|
|
|
- <div class="title">服务设备</div>
|
|
|
- <div class="device-info">
|
|
|
- <div class="device-item">
|
|
|
- <img src="@/assets/images/logistics_guarantee/img_5.png" class="icon" alt="" />
|
|
|
- <div class="rate">
|
|
|
- <div class="rate-data">
|
|
|
- <div class="data">100</div>
|
|
|
- <div class="unit">%</div>
|
|
|
- </div>
|
|
|
- <div class="desc">赋码率</div>
|
|
|
+ <div class="dialog-list">
|
|
|
+ <div class="dialog-item wid100">
|
|
|
+ <div class="content-title">
|
|
|
+ <span class="title">资产台账</span>
|
|
|
+ </div>
|
|
|
+ <div class="content">
|
|
|
+ <div class="leftNav">
|
|
|
+ <div
|
|
|
+ :class="['model', 0 == curIndex ? 'cur' : '']"
|
|
|
+ @click="chooseTab(0, 'main')"
|
|
|
+ >
|
|
|
+ 楼宇资产占比
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ :class="['model', 1 == curIndex ? 'cur' : '']"
|
|
|
+ @click="chooseTab(1, 'service')"
|
|
|
+ >
|
|
|
+ 服务资产占比
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ :class="['model', 2 == curIndex ? 'cur' : '']"
|
|
|
+ @click="chooseTab(2, 'logistics')"
|
|
|
+ >
|
|
|
+ 办公资产占比
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="device-item1" v-if="showTab === 'main'">
|
|
|
+ <pie-chart
|
|
|
+ position="left"
|
|
|
+ :chart-data="lyData"
|
|
|
+ :legend="lyLegend"
|
|
|
+ :center="['30%','60%']"
|
|
|
+ width="400px"
|
|
|
+ height="180px"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="device-item1" v-else-if="showTab === 'service'">
|
|
|
+ <pie-chart
|
|
|
+ position="left"
|
|
|
+ :chart-data="fwData"
|
|
|
+ :legend="fwLegend"
|
|
|
+ :center="['30%','60%']"
|
|
|
+ width="400px"
|
|
|
+ height="180px"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="device-item1" v-else-if="showTab === 'logistics'">
|
|
|
+ <pie-chart
|
|
|
+ position="left"
|
|
|
+ :chart-data="bgData"
|
|
|
+ :legend="bgLegend"
|
|
|
+ :center="['30%','60%']"
|
|
|
+ width="400px"
|
|
|
+ height="180px"
|
|
|
+ />
|
|
|
</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="content">
|
|
|
+ <div class="total-cont">
|
|
|
+ <span class="title">资产存量</span>
|
|
|
</div>
|
|
|
- <div class="device-item">
|
|
|
- <img src="@/assets/images/logistics_guarantee/img_5.png" class="icon" alt="" />
|
|
|
- <div class="rate">
|
|
|
- <div class="rate-data">
|
|
|
- <div class="data">100</div>
|
|
|
- <div class="unit">%</div>
|
|
|
+ <div class="rightList1">
|
|
|
+ <div class="left-list">
|
|
|
+ <div class="left-info">
|
|
|
+ <div class="name">
|
|
|
+ <div> <img src="@/assets/images/service_new/liveSwin.png"></div>
|
|
|
+ <div>楼宇</div>
|
|
|
+ </div>
|
|
|
+ <div class="num">56<span class="unit">m²</span></div>
|
|
|
</div>
|
|
|
- <div class="desc">贴签率</div>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ <div class="left-list">
|
|
|
+ <div class="left-info">
|
|
|
+ <div class="name">
|
|
|
+ <div> <img src="@/assets/images/service_new/liveSwin.png"></div>
|
|
|
+ <div>服务</div>
|
|
|
+ </div>
|
|
|
+ <div class="num">51<span class="unit">m²</span></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="left-list">
|
|
|
+ <div class="left-info">
|
|
|
+ <div class="name">
|
|
|
+ <div> <img src="@/assets/images/service_new/liveSwin.png"></div>
|
|
|
+ <div>办公</div>
|
|
|
+ </div>
|
|
|
+ <div class="num">48<span class="unit">m²</span></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
- <div class="device-cont">
|
|
|
- <div class="title">办公物资</div>
|
|
|
- <div class="device-info">
|
|
|
- <div class="device-item">
|
|
|
- <img src="@/assets/images/logistics_guarantee/img_5.png" class="icon" alt="" />
|
|
|
- <div class="rate">
|
|
|
- <div class="rate-data">
|
|
|
- <div class="data">100</div>
|
|
|
- <div class="unit">%</div>
|
|
|
+ <div class="content">
|
|
|
+ <div class="total-cont">
|
|
|
+ <span class="title">资产新增数量</span>
|
|
|
+ </div>
|
|
|
+ <div class="rightList1">
|
|
|
+ <div class="left-list">
|
|
|
+ <div class="left-info">
|
|
|
+ <div class="name">
|
|
|
+ <div> <img src="@/assets/images/service_new/liveSwin.png"></div>
|
|
|
+ <div>楼宇</div>
|
|
|
+ </div>
|
|
|
+ <div class="num">56<span class="unit">m²</span></div>
|
|
|
</div>
|
|
|
- <div class="desc">赋码率</div>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ <div class="left-list">
|
|
|
+ <div class="left-info">
|
|
|
+ <div class="name">
|
|
|
+ <div> <img src="@/assets/images/service_new/liveSwin.png"></div>
|
|
|
+ <div>服务</div>
|
|
|
+ </div>
|
|
|
+ <div class="num">51<span class="unit">m²</span></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="left-list">
|
|
|
+ <div class="left-info">
|
|
|
+ <div class="name">
|
|
|
+ <div> <img src="@/assets/images/service_new/liveSwin.png"></div>
|
|
|
+ <div>办公</div>
|
|
|
+ </div>
|
|
|
+ <div class="num">48<span class="unit">m²</span></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="content">
|
|
|
+ <div class="total-cont">
|
|
|
+ <span class="title">资产报废数量</span>
|
|
|
</div>
|
|
|
- <div class="device-item">
|
|
|
- <img src="@/assets/images/logistics_guarantee/img_5.png" class="icon" alt="" />
|
|
|
- <div class="rate">
|
|
|
- <div class="rate-data">
|
|
|
- <div class="data">100</div>
|
|
|
- <div class="unit">%</div>
|
|
|
+ <div class="rightList1">
|
|
|
+ <div class="left-list">
|
|
|
+ <div class="left-info">
|
|
|
+ <div class="name">
|
|
|
+ <div> <img src="@/assets/images/service_new/liveSwin.png"></div>
|
|
|
+ <div>楼宇</div>
|
|
|
+ </div>
|
|
|
+ <div class="num">56<span class="unit">m²</span></div>
|
|
|
</div>
|
|
|
- <div class="desc">贴签率</div>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ <div class="left-list">
|
|
|
+ <div class="left-info">
|
|
|
+ <div class="name">
|
|
|
+ <div> <img src="@/assets/images/service_new/liveSwin.png"></div>
|
|
|
+ <div>服务</div>
|
|
|
+ </div>
|
|
|
+ <div class="num">51<span class="unit">m²</span></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="left-list">
|
|
|
+ <div class="left-info">
|
|
|
+ <div class="name">
|
|
|
+ <div> <img src="@/assets/images/service_new/liveSwin.png"></div>
|
|
|
+ <div>办公</div>
|
|
|
+ </div>
|
|
|
+ <div class="num">48<span class="unit">m²</span></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+
|
|
|
</div>
|
|
|
+
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
@@ -136,27 +247,84 @@ export default {
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- show:true,
|
|
|
+ curIndex: 0,
|
|
|
+ showTab: "main",
|
|
|
pieData: [
|
|
|
- { value: 117813, name: "办公物资" },
|
|
|
- { value: 21851, name: "楼宇资源" },
|
|
|
- { value: 1801, name: "房产资源" },
|
|
|
- { value: 3738, name: "服务设备" },
|
|
|
- { value: 1056, name: "土地资源" },
|
|
|
- { value: 314, name: "车辆资源" },
|
|
|
+ { value: 24.15, name: "楼宇" },
|
|
|
+ { value: 24.15, name: "办公" },
|
|
|
+ { value: 24.15, name: "服务" },
|
|
|
],
|
|
|
pieLegend: {
|
|
|
- bottom: 0,
|
|
|
- orient: "horizontal",
|
|
|
- right: 0,
|
|
|
+ top: 25,
|
|
|
+ orient: "vertical",
|
|
|
+ right: 15,
|
|
|
+ itemWidth: 8, // 设置图例标记的宽度
|
|
|
+ itemHeight: 8, // 设置图例标记的高度
|
|
|
+ textStyle: {
|
|
|
+ color: "#FFF",
|
|
|
+ },
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ //楼宇资产占比
|
|
|
+ lyData: [
|
|
|
+ { value: 24.15, name: "电梯" },
|
|
|
+ { value: 24.15, name: "电气" },
|
|
|
+ { value: 44.15, name: "楼宇通风" },
|
|
|
+ { value: 24.15, name: "供热采暖" },
|
|
|
+ { value: 24.15, name: "消防" },
|
|
|
+ { value: 24.15, name: "给排水" },
|
|
|
+ ],
|
|
|
+ lyLegend: {
|
|
|
+ top: 25,
|
|
|
+ orient: "vertical",
|
|
|
+ left: 200,
|
|
|
+ itemWidth: 8, // 设置图例标记的宽度
|
|
|
+ itemHeight: 8, // 设置图例标记的高度
|
|
|
+ textStyle: {
|
|
|
+ color: "#FFF",
|
|
|
+ },
|
|
|
+
|
|
|
+ },
|
|
|
+ //服务资产占比
|
|
|
+ fwData: [
|
|
|
+ { value: 24.15, name: "电梯" },
|
|
|
+ { value: 24.15, name: "电气" },
|
|
|
+ { value: 44.15, name: "楼宇通风" },
|
|
|
+ // { value: 24.15, name: "供热采暖" },
|
|
|
+ // { value: 24.15, name: "消防" },
|
|
|
+ // { value: 24.15, name: "给排水" },
|
|
|
+ ],
|
|
|
+ fwLegend: {
|
|
|
+ top: 25,
|
|
|
+ orient: "vertical",
|
|
|
+ left: 200,
|
|
|
+ itemWidth: 8, // 设置图例标记的宽度
|
|
|
+ itemHeight: 8, // 设置图例标记的高度
|
|
|
+ textStyle: {
|
|
|
+ color: "#FFF",
|
|
|
+ },
|
|
|
+
|
|
|
+ },
|
|
|
+ //办公资产占比
|
|
|
+ bgData: [
|
|
|
+ { value: 24.15, name: "电梯" },
|
|
|
+ { value: 24.15, name: "电气" },
|
|
|
+ { value: 44.15, name: "楼宇通风" },
|
|
|
+ { value: 24.15, name: "供热采暖" },
|
|
|
+
|
|
|
+ ],
|
|
|
+ bgLegend: {
|
|
|
+ top: 25,
|
|
|
+ orient: "vertical",
|
|
|
+ left: 200,
|
|
|
itemWidth: 8, // 设置图例标记的宽度
|
|
|
itemHeight: 8, // 设置图例标记的高度
|
|
|
textStyle: {
|
|
|
color: "#FFF",
|
|
|
},
|
|
|
+
|
|
|
},
|
|
|
- pieCenter: ["50%", "40%"],
|
|
|
- pieRadius: ["35%", "50%"],
|
|
|
};
|
|
|
},
|
|
|
created() {
|
|
@@ -166,6 +334,11 @@ export default {
|
|
|
beforeDestroy() {},
|
|
|
mounted() {},
|
|
|
methods: {
|
|
|
+ //切换菜单
|
|
|
+ chooseTab(index) {
|
|
|
+ this.curIndex = index;
|
|
|
+ this.showTab = this.tabs[index].tab;
|
|
|
+ },
|
|
|
|
|
|
//点击显示
|
|
|
showAssets(){
|
|
@@ -203,7 +376,7 @@ export default {
|
|
|
.content-title {
|
|
|
width: 230px;
|
|
|
height: 26px;
|
|
|
- background: url("../../../assets/images/main/title_pro.png") no-repeat !important;
|
|
|
+ background: url("../../../assets/images/main/title_pro_long.png") no-repeat !important;
|
|
|
background-size: 100% 100%;
|
|
|
font-family: "PingFangSC";
|
|
|
font-size: 16px;
|
|
@@ -270,25 +443,79 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
.total-cont{
|
|
|
- width:100%;
|
|
|
- padding-top:20px;
|
|
|
- padding-left: 15px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .total{
|
|
|
- font-size: 24px;
|
|
|
- color: #19FCDE;
|
|
|
- font-weight: bold;
|
|
|
- font-family: "electronicFont";
|
|
|
+ width: 100%;
|
|
|
+ height: 35px;
|
|
|
+ background: url("../../../assets/images/main/lightLone.png") no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ font-family: "PingFangSC";
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #ffffff;
|
|
|
+ padding-left: 25px;
|
|
|
+ padding-top: 8px;
|
|
|
+ .line{
|
|
|
+ width: 1px;
|
|
|
+ height: 45px;
|
|
|
+ opacity: 1;
|
|
|
+ background: rgba(25, 252, 222, 0.2);
|
|
|
}
|
|
|
- .unit{
|
|
|
- font-size: 12px;
|
|
|
- color: #00FFFF;
|
|
|
- font-weight: 500;
|
|
|
- position: relative;
|
|
|
- top:4px;
|
|
|
- left:2px;
|
|
|
+
|
|
|
+ .total-list{
|
|
|
+ width:auto;
|
|
|
+
|
|
|
+ .total-top{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .img{
|
|
|
+ display: block;
|
|
|
+ width: 14px !important;
|
|
|
+ height: 14px !important;
|
|
|
+ }
|
|
|
+ .total-top-info{
|
|
|
+ padding-left: 6px;
|
|
|
+
|
|
|
+ .name{
|
|
|
+ font-size:14px;
|
|
|
+ color:#FFFFFF;
|
|
|
+ }
|
|
|
+ .desc{
|
|
|
+ font-size:8px;
|
|
|
+ color:#FFFFFF;
|
|
|
+ opacity: 0.4;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .total-bot{
|
|
|
+ width:100%;
|
|
|
+ padding-top:6px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .num-list{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding-right:15px;
|
|
|
+
|
|
|
+ .num{
|
|
|
+ font-size: 26px;
|
|
|
+ color: #00FFFF;
|
|
|
+ font-weight: bold;
|
|
|
+ font-family: "electronicFont";
|
|
|
+ }
|
|
|
+ .unit{
|
|
|
+ font-size: 12px;
|
|
|
+ color: #00FFFF;
|
|
|
+ font-weight: 500;
|
|
|
+ position: relative;
|
|
|
+ top:3px;
|
|
|
+ left:2px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .num-list:last-child{
|
|
|
+ padding-right: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
@@ -312,11 +539,11 @@ export default {
|
|
|
align-items: center;
|
|
|
padding-top:15px;
|
|
|
|
|
|
- .device-item {
|
|
|
+ .device-item1 {
|
|
|
position: relative;
|
|
|
img {
|
|
|
- width: 117px;
|
|
|
- height: 68px;
|
|
|
+ width: 95px;
|
|
|
+ height: 88px;
|
|
|
}
|
|
|
.rate {
|
|
|
display: flex;
|
|
@@ -334,27 +561,128 @@ export default {
|
|
|
align-items: baseline;
|
|
|
color: #00ffff;
|
|
|
.data {
|
|
|
- font-size: 30px;
|
|
|
+ font-size: 35px;
|
|
|
font-family: "electronicFont";
|
|
|
+ text-shadow:
|
|
|
+ 0px 0px 0 #bbb,
|
|
|
+ -1px -1px 0 #bbb,
|
|
|
+ 0px -1px 0 #bbb,
|
|
|
+ -1px 1px 0 #bbb;
|
|
|
+ transform: translateZ(1px);
|
|
|
+ transform: translate3d(0, 0, 1px);
|
|
|
}
|
|
|
.unit {
|
|
|
font-size: 12px;
|
|
|
}
|
|
|
}
|
|
|
.desc {
|
|
|
- font-size: 12px;
|
|
|
+ font-size: 14px;
|
|
|
text-align: center;
|
|
|
+ margin-top: 18px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ .content {
|
|
|
+ margin-top: 10px;
|
|
|
+ padding-left: 20px;
|
|
|
+ }
|
|
|
+ .dialog-left{
|
|
|
+ width: 520px;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ .dialog-list{
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between !important;
|
|
|
+ margin-bottom:20px;
|
|
|
+
|
|
|
+ .dialog-item{
|
|
|
+ width: calc(50% - 20px);
|
|
|
+ }
|
|
|
+
|
|
|
+ .dialog-item-cont{
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ margin-top:40px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .wid100{
|
|
|
+ width:100%;
|
|
|
|
|
|
- ::-webkit-scrollbar {
|
|
|
- width: 3px;
|
|
|
- height: 3px;
|
|
|
+ .content-title{
|
|
|
+ width:100%;
|
|
|
+ background: url("../../../assets/images/main/title_pro_long.png") no-repeat;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
+ //左边菜单
|
|
|
+ .rightList1{
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ padding: 15px;
|
|
|
+ .left-list{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ margin-right: 60px;
|
|
|
+ img{
|
|
|
+ display: block;
|
|
|
+ width:20px;
|
|
|
+ height:20px;
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+ .left-info{
|
|
|
+ padding-left:12px;
|
|
|
|
|
|
+ .num{
|
|
|
+ font-size: 30px;
|
|
|
+ color:#00FFFF;
|
|
|
+ font-family: "electronicFont";
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: baseline;
|
|
|
+ .unit{
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .name{
|
|
|
+ display: flex;
|
|
|
+ font-size: 14px;
|
|
|
+ color:#FFFFFF;
|
|
|
+ font-family: 'fashionZh';
|
|
|
+ padding-top:4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .leftNav{
|
|
|
+ display: flex;
|
|
|
+ .model {
|
|
|
+ margin-right: 15px;
|
|
|
+ width: 130px;
|
|
|
+ height: 45px;
|
|
|
+ line-height: 30px;
|
|
|
+ text-align: center;
|
|
|
+ font-family: "PingFangSc";
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ background: url("../../../assets/images/main/choose_bg_long.png") no-repeat;
|
|
|
+ // background-size: 95% 95%;
|
|
|
+ color: #CED6D6;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .model:last-child {
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+ .cur {
|
|
|
+ color: #05FEFE;
|
|
|
+ // background: url("../../../../assets/images/main/menu_chooe.png") no-repeat;
|
|
|
+ }
|
|
|
+ }
|
|
|
::-webkit-scrollbar-thumb {
|
|
|
//滑块部分
|
|
|
// border-radius: 5px;
|