|
|
|
|
@ -36,46 +36,445 @@ |
|
|
|
|
<div class="left_top"> |
|
|
|
|
<div class="top_title"> |
|
|
|
|
<div class="left_tit"> |
|
|
|
|
<span class="txt_name">收件量</span> |
|
|
|
|
<span class="name">RECEIVING</span> |
|
|
|
|
<span class="txt_name">{{ activeName }}</span> |
|
|
|
|
<span class="name">{{ acctiEng }}</span> |
|
|
|
|
</div> |
|
|
|
|
<div class="right_tit"> |
|
|
|
|
<div class="title_txt">收</div> |
|
|
|
|
<div class="title_txt">发</div> |
|
|
|
|
<div class="title_txt">到</div> |
|
|
|
|
<div class="title_txt">派</div> |
|
|
|
|
<div class="title_txt">签</div> |
|
|
|
|
<div class="title_txt" :class="isActive == 1 ? 'active' : ''" @click="changeBtn(1)"> |
|
|
|
|
收 |
|
|
|
|
</div> |
|
|
|
|
<div class="title_txt" :class="isActive == 2 ? 'active' : ''" @click="changeBtn(2)"> |
|
|
|
|
发 |
|
|
|
|
</div> |
|
|
|
|
<div class="title_txt" :class="isActive == 3 ? 'active' : ''" @click="changeBtn(3)"> |
|
|
|
|
到 |
|
|
|
|
</div> |
|
|
|
|
<div class="title_txt" :class="isActive == 4 ? 'active' : ''" @click="changeBtn(4)"> |
|
|
|
|
派 |
|
|
|
|
</div> |
|
|
|
|
<div class="title_txt" :class="isActive == 5 ? 'active' : ''" @click="changeBtn(5)"> |
|
|
|
|
签 |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="cen_con"> |
|
|
|
|
<div class="table_line1"> |
|
|
|
|
<div class="table_item">排名</div> |
|
|
|
|
<div class="table_item">乡镇</div> |
|
|
|
|
<div class="table_item">运单量</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="swiper-container swiper1"> |
|
|
|
|
<div class="swiper-wrapper"> |
|
|
|
|
<div class="swiper-slide" v-for="(item, index) in slideList" :key="index"> |
|
|
|
|
<div class="table_con"> |
|
|
|
|
<div |
|
|
|
|
class="table_line" |
|
|
|
|
v-for="item1 in item.arr" |
|
|
|
|
:key="item1.no" |
|
|
|
|
:class="item1.no <= 3 ? 'ac_no' : ''" |
|
|
|
|
> |
|
|
|
|
<div class="table_item">{{ item1.no }}</div> |
|
|
|
|
<div class="table_item">{{ item1.name }}</div> |
|
|
|
|
<div class="table_item">{{ item1.count }}</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="left_bottom"> |
|
|
|
|
<div class="top_title"> |
|
|
|
|
<div class="left_tit"> |
|
|
|
|
<span class="txt_name">村点信息</span> |
|
|
|
|
<span class="name">VILLAGE INFORMATION</span> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="table_box"> |
|
|
|
|
<div class="table_line1"> |
|
|
|
|
<div class="table_item">站点名称</div> |
|
|
|
|
<div class="table_item">上行</div> |
|
|
|
|
<div class="table_item">下行</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="swiper-container swiper2"> |
|
|
|
|
<div class="swiper-wrapper"> |
|
|
|
|
<div class="swiper-slide" v-for="(item, index) in villList" :key="index"> |
|
|
|
|
<div class="table_con" :class="item.arr.length < 5 ? 'tab_con' : ''"> |
|
|
|
|
<div class="table_line" v-for="item1 in item.arr" :key="item1.name"> |
|
|
|
|
<div class="table_item">{{ item1.name }}</div> |
|
|
|
|
<div class="table_item">{{ item1.upData }}</div> |
|
|
|
|
<div class="table_item">{{ item1.downData }}</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="left_bottom"></div> |
|
|
|
|
</div> |
|
|
|
|
<div class="center_top"></div> |
|
|
|
|
<div class="center_bottom"></div> |
|
|
|
|
<div class="map_wrap"> |
|
|
|
|
<a |
|
|
|
|
@click="backMap" |
|
|
|
|
href="javascript:;" |
|
|
|
|
style=" |
|
|
|
|
position: absolute; |
|
|
|
|
right: 10px; |
|
|
|
|
top: 10px; |
|
|
|
|
color: #fff; |
|
|
|
|
font-size: 0.16rem; |
|
|
|
|
z-index: 99; |
|
|
|
|
" |
|
|
|
|
>回到原点</a |
|
|
|
|
> |
|
|
|
|
<PathMap ref="pathMap"></PathMap> |
|
|
|
|
</div> |
|
|
|
|
<div class="right_box"> |
|
|
|
|
<div class="right_top"> |
|
|
|
|
<div class="top_title"> |
|
|
|
|
<div class="left_tit"> |
|
|
|
|
<span class="txt_name">派件入库量占比</span> |
|
|
|
|
<span class="name">PROPORTION</span> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="right_cen"> |
|
|
|
|
<div class="top_title"> |
|
|
|
|
<div class="left_tit"> |
|
|
|
|
<span class="txt_name">车辆行驶里程</span> |
|
|
|
|
<span class="name">VEHICLE MILEAGE</span> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<CarMile @doMap="doMap"></CarMile> |
|
|
|
|
</div> |
|
|
|
|
<div class="right_bottom"> |
|
|
|
|
<div class="top_title"> |
|
|
|
|
<div class="left_tit"> |
|
|
|
|
<span class="txt_name">车辆报警</span> |
|
|
|
|
<span class="name">VEHICLE ALARM</span> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<CarWarn></CarWarn> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
import axios from "axios"; |
|
|
|
|
import * as XLSX from "xlsx/xlsx.mjs"; |
|
|
|
|
import Swiper from "swiper"; |
|
|
|
|
import "swiper/css/swiper.min.css"; |
|
|
|
|
import { queryWeath } from "@/api/base"; |
|
|
|
|
import PathMap from "../components/pathMap"; |
|
|
|
|
import CarMile from "../components/carMile"; |
|
|
|
|
import CarWarn from "../components/carWarn"; |
|
|
|
|
export default { |
|
|
|
|
components: { |
|
|
|
|
PathMap, |
|
|
|
|
CarMile, |
|
|
|
|
CarWarn, |
|
|
|
|
}, |
|
|
|
|
data() { |
|
|
|
|
return { |
|
|
|
|
timer: null, |
|
|
|
|
day: "", |
|
|
|
|
time: "", |
|
|
|
|
date: "", |
|
|
|
|
week: "", |
|
|
|
|
isFullFlag: false, |
|
|
|
|
isSupport: false, |
|
|
|
|
dayData: [], |
|
|
|
|
monthData: [], |
|
|
|
|
totalData: [], |
|
|
|
|
active: 1, |
|
|
|
|
xData: [], |
|
|
|
|
yData1: [], |
|
|
|
|
yData2: [], |
|
|
|
|
villageData: [], |
|
|
|
|
villList: [], |
|
|
|
|
mySwiper: null, |
|
|
|
|
temp: "", |
|
|
|
|
weather: "", |
|
|
|
|
slideList: [ |
|
|
|
|
{ |
|
|
|
|
arr: [], |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
arr: [], |
|
|
|
|
}, |
|
|
|
|
], |
|
|
|
|
shouData: [], |
|
|
|
|
faData: [], |
|
|
|
|
daoData: [], |
|
|
|
|
paiData: [], |
|
|
|
|
qianData: [], |
|
|
|
|
isActive: 1, |
|
|
|
|
activeName: "收件量", |
|
|
|
|
acctiEng: "RECEIVING", |
|
|
|
|
dateTime: "", |
|
|
|
|
// isSlide:false |
|
|
|
|
pieChart: null, |
|
|
|
|
trendCharts: null, |
|
|
|
|
chartData: [], |
|
|
|
|
pieData: [], |
|
|
|
|
RealData: [], |
|
|
|
|
borderData: [], |
|
|
|
|
startColor: [ |
|
|
|
|
"#0e94eb", |
|
|
|
|
"#c440ef", |
|
|
|
|
"#efb013", |
|
|
|
|
"#2fda07", |
|
|
|
|
"#d8ef13", |
|
|
|
|
"#2e4af8", |
|
|
|
|
"#0eebc4", |
|
|
|
|
"#f129b1", |
|
|
|
|
"#17defc", |
|
|
|
|
"#f86363", |
|
|
|
|
], |
|
|
|
|
borderStartColor: [ |
|
|
|
|
"#0077c5", |
|
|
|
|
"#a819d7", |
|
|
|
|
"#c99002", |
|
|
|
|
"#24bc00", |
|
|
|
|
"#b6cb04", |
|
|
|
|
"#112ee2", |
|
|
|
|
"#00bd9c", |
|
|
|
|
"#ce078f", |
|
|
|
|
"#00b2cd", |
|
|
|
|
"#ec3c3c", |
|
|
|
|
], |
|
|
|
|
mapData: [], |
|
|
|
|
datas: [], |
|
|
|
|
geoCoordMap: { |
|
|
|
|
棋山镇: [118.895378, 35.877537], |
|
|
|
|
东莞镇: [118.972146, 35.991826], |
|
|
|
|
安庄镇: [118.815076, 35.812024], |
|
|
|
|
果庄乡: [118.769212, 35.77904], //果庄乡 |
|
|
|
|
洛河镇: [118.833803, 35.753576], //洛河镇 |
|
|
|
|
库山乡: [118.979909, 35.92304], //库山乡 |
|
|
|
|
招贤镇: [118.929219, 35.723248], //招贤镇 |
|
|
|
|
桑园镇: [119.046012, 35.678553], //桑园镇 |
|
|
|
|
阎庄镇: [118.834585, 35.670621], //阎庄镇 |
|
|
|
|
莒县电子商务公共服务中心: [118.901658, 35.60688], |
|
|
|
|
店子集镇: [118.914151, 35.5844], |
|
|
|
|
城阳街道: [118.82472, 35.583488], //城阳街道 |
|
|
|
|
峤山镇: [118.946005, 35.657339], //峤山镇 |
|
|
|
|
龙山镇: [119.003747, 35.515955], |
|
|
|
|
陵阳镇: [118.890825, 35.545056], |
|
|
|
|
寨里河镇: [118.931584, 35.469982], |
|
|
|
|
莒县经济开发区: [118.851312, 35.626514], |
|
|
|
|
浮来山镇: [118.744789, 35.596051], |
|
|
|
|
刘官庄镇: [118.801123, 35.522202], |
|
|
|
|
长岭镇: [118.844125, 35.484677], |
|
|
|
|
小店镇: [118.81007, 35.422484], |
|
|
|
|
夏庄镇: [118.700674, 35.419525], |
|
|
|
|
}, |
|
|
|
|
}; |
|
|
|
|
}, |
|
|
|
|
created() { |
|
|
|
|
this.getTime(); |
|
|
|
|
}, |
|
|
|
|
mounted() { |
|
|
|
|
this.readExcelFile("http://192.168.1.35:8080/excel/wuliu.xlsx"); |
|
|
|
|
queryWeath().then((res) => { |
|
|
|
|
this.temp = res.result.now.temp; |
|
|
|
|
this.weather = res.result.now.text; |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
backMap() { |
|
|
|
|
this.$refs.pathMap.backMap(); |
|
|
|
|
}, |
|
|
|
|
//触发定位地图 |
|
|
|
|
doMap(item) { |
|
|
|
|
this.$refs.pathMap.queryDingwei(item.deviceId); |
|
|
|
|
}, |
|
|
|
|
readExcelFile(url) { |
|
|
|
|
axios |
|
|
|
|
.get(url, { |
|
|
|
|
responseType: "arraybuffer", |
|
|
|
|
}) |
|
|
|
|
.then((res) => { |
|
|
|
|
// console.log(res); |
|
|
|
|
let data = new Uint8Array(res); |
|
|
|
|
// console.log(data); |
|
|
|
|
let wb = XLSX.read(data, { |
|
|
|
|
type: "array", |
|
|
|
|
}); |
|
|
|
|
// console.log(wb); |
|
|
|
|
let sheets = wb.Sheets; // 获取文档数据 |
|
|
|
|
// console.log(sheets); |
|
|
|
|
this.content = this.transformSheets(sheets); |
|
|
|
|
// this.$message('读取成功'); |
|
|
|
|
}) |
|
|
|
|
.catch((err) => { |
|
|
|
|
this.$message.error(err); |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
transformSheets(sheets) { |
|
|
|
|
const content1 = []; |
|
|
|
|
for (const key in sheets) { |
|
|
|
|
content1.push(XLSX.utils.sheet_to_json(sheets[key])); |
|
|
|
|
} |
|
|
|
|
console.log(content1); |
|
|
|
|
this.dayData.push( |
|
|
|
|
{ name: "收件量", data: content1[0][0].日总收件量, huanbi: content1[0][0].收件量日总环比 }, |
|
|
|
|
{ name: "发件量", data: content1[0][0].日总发件量, huanbi: content1[0][0].发件量日总环比 }, |
|
|
|
|
{ name: "到件量", data: content1[0][0].日总到件量, huanbi: content1[0][0].到件量日总环比 }, |
|
|
|
|
{ name: "派件量", data: content1[0][0].日总派件量, huanbi: content1[0][0].派件量日总环比 }, |
|
|
|
|
{ name: "签件量", data: content1[0][0].日总签件量, huanbi: content1[0][0].签件量日总环比 } |
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
this.monthData.push( |
|
|
|
|
{ name: "收件量", data: content1[0][0].月总收件量, huanbi: content1[0][0].收件量月总环比 }, |
|
|
|
|
{ name: "发件量", data: content1[0][0].月总发件量, huanbi: content1[0][0].发件量月总环比 }, |
|
|
|
|
{ name: "到件量", data: content1[0][0].月总到件量, huanbi: content1[0][0].到件量月总环比 }, |
|
|
|
|
{ name: "派件量", data: content1[0][0].月总派件量, huanbi: content1[0][0].派件量月总环比 }, |
|
|
|
|
{ name: "签件量", data: content1[0][0].月总签件量, huanbi: content1[0][0].签件量月总环比 } |
|
|
|
|
); |
|
|
|
|
this.totalData = this.dayData; |
|
|
|
|
content1[1].map((item) => { |
|
|
|
|
this.xData.unshift(item.日期.substring(item.日期.length - 5).replace(".", "-")); |
|
|
|
|
this.yData1.push(item.到件量); |
|
|
|
|
this.yData2.push(item.派件量); |
|
|
|
|
}); |
|
|
|
|
// this.dateTime = content1[0][0].日期.replaceAll(".", "/"); |
|
|
|
|
this.dateTime = content1[0][0].日期.replace(/\D/g, "/"); |
|
|
|
|
// this.$message.success(content1[0][0].日期); |
|
|
|
|
content1[3].map((item) => { |
|
|
|
|
this.villageData.push({ name: item.村点名称, upData: item.上行, downData: item.下行 }); |
|
|
|
|
}); |
|
|
|
|
for (var i = 0, len = this.villageData.length; i < len; i += 7) { |
|
|
|
|
this.villList.push({ arr: this.villageData.slice(i, i + 7) }); |
|
|
|
|
} |
|
|
|
|
content1[2].map((item, index) => { |
|
|
|
|
this.mapData.push({ name: item.名称, value: item.收件量 }); |
|
|
|
|
this.datas.push([ |
|
|
|
|
{ name: item.名称, value: item.收件量 }, |
|
|
|
|
{ name: "莒县电子商务公共服务中心" }, |
|
|
|
|
]); |
|
|
|
|
this.shouData.push({ name: item.名称, count: item.收件量 }); |
|
|
|
|
this.shouData = this.shouData.sort(function (a, b) { |
|
|
|
|
return b.count - a.count; |
|
|
|
|
}); |
|
|
|
|
this.faData.push({ name: item.名称, count: item.发件量 }); |
|
|
|
|
this.faData = this.faData.sort(function (a, b) { |
|
|
|
|
return b.count - a.count; |
|
|
|
|
}); |
|
|
|
|
this.daoData.push({ name: item.名称, count: item.到件量 }); |
|
|
|
|
this.daoData = this.daoData.sort(function (a, b) { |
|
|
|
|
return b.count - a.count; |
|
|
|
|
}); |
|
|
|
|
this.paiData.push({ name: item.名称, count: item.派件量 }); |
|
|
|
|
this.paiData = this.paiData.sort(function (a, b) { |
|
|
|
|
return b.count - a.count; |
|
|
|
|
}); |
|
|
|
|
this.qianData.push({ name: item.名称, count: item.签件量 }); |
|
|
|
|
this.qianData = this.qianData.sort(function (a, b) { |
|
|
|
|
return b.count - a.count; |
|
|
|
|
}); |
|
|
|
|
}); |
|
|
|
|
content1[0].map((item) => { |
|
|
|
|
this.pieData.push({ |
|
|
|
|
name: item.快递名称, |
|
|
|
|
value: item.收件量, |
|
|
|
|
percent: (item.收件量 / content1[0][0].日总收件量).toFixed(4) * 100, |
|
|
|
|
}); |
|
|
|
|
}); |
|
|
|
|
console.log(this.pieData); |
|
|
|
|
this.shouData.map((item, index) => { |
|
|
|
|
if (index <= 10) { |
|
|
|
|
this.slideList[0].arr.push({ no: index + 1, name: item.name, count: item.count }); |
|
|
|
|
} else { |
|
|
|
|
this.slideList[1].arr.push({ no: index + 1, name: item.name, count: item.count }); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
this.$nextTick(() => { |
|
|
|
|
// this.createChart(); |
|
|
|
|
// this.createCharts(); |
|
|
|
|
// this.createCharts1(); |
|
|
|
|
// this.run(); |
|
|
|
|
// this.run1(); |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
run() { |
|
|
|
|
this.mySwiper = new Swiper(".swiper1", { |
|
|
|
|
loop: true, // 循环模式选项 |
|
|
|
|
autoplay: { |
|
|
|
|
delay: 10000, //10秒切换一次 |
|
|
|
|
disableOnInteraction: false, |
|
|
|
|
}, |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
changeBtn(val) { |
|
|
|
|
this.isActive = val; |
|
|
|
|
this.slideList = [{ arr: [] }, { arr: [] }]; |
|
|
|
|
this.isSlide = false; |
|
|
|
|
if (val == 1) { |
|
|
|
|
this.activeName = "收件量"; |
|
|
|
|
this.acctiEng = "RECEIVING"; |
|
|
|
|
this.shouData.map((item, index) => { |
|
|
|
|
if (index <= 10) { |
|
|
|
|
this.slideList[0].arr.push({ no: index + 1, name: item.name, count: item.count }); |
|
|
|
|
} else { |
|
|
|
|
this.slideList[1].arr.push({ no: index + 1, name: item.name, count: item.count }); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
} else if (val == 2) { |
|
|
|
|
this.activeName = "发件量"; |
|
|
|
|
this.acctiEng = "SENDING"; |
|
|
|
|
this.faData.map((item, index) => { |
|
|
|
|
if (index <= 10) { |
|
|
|
|
this.slideList[0].arr.push({ no: index + 1, name: item.name, count: item.count }); |
|
|
|
|
} else { |
|
|
|
|
this.slideList[1].arr.push({ no: index + 1, name: item.name, count: item.count }); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
} else if (val == 3) { |
|
|
|
|
this.activeName = "到件量"; |
|
|
|
|
this.acctiEng = "ARRIVING"; |
|
|
|
|
this.daoData.map((item, index) => { |
|
|
|
|
if (index <= 10) { |
|
|
|
|
this.slideList[0].arr.push({ no: index + 1, name: item.name, count: item.count }); |
|
|
|
|
} else { |
|
|
|
|
this.slideList[1].arr.push({ no: index + 1, name: item.name, count: item.count }); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
} else if (val == 4) { |
|
|
|
|
this.acctiEng = "ASSIGNING"; |
|
|
|
|
this.activeName = "派件量"; |
|
|
|
|
this.paiData.map((item, index) => { |
|
|
|
|
if (index <= 10) { |
|
|
|
|
this.slideList[0].arr.push({ no: index + 1, name: item.name, count: item.count }); |
|
|
|
|
} else { |
|
|
|
|
this.slideList[1].arr.push({ no: index + 1, name: item.name, count: item.count }); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
} else if (val == 5) { |
|
|
|
|
this.activeName = "签件量"; |
|
|
|
|
this.acctiEng = "RECEIVING"; |
|
|
|
|
this.qianData.map((item, index) => { |
|
|
|
|
if (index <= 10) { |
|
|
|
|
this.slideList[0].arr.push({ no: index + 1, name: item.name, count: item.count }); |
|
|
|
|
} else { |
|
|
|
|
this.slideList[1].arr.push({ no: index + 1, name: item.name, count: item.count }); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
// if(this.slideList){ |
|
|
|
|
// this.isSlide = true; |
|
|
|
|
// } |
|
|
|
|
this.$nextTick(() => { |
|
|
|
|
// console.log(this.slideList) |
|
|
|
|
this.mySwiper.destroy(); |
|
|
|
|
|
|
|
|
|
this.run(); |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
fn(str) { |
|
|
|
|
let num = null; |
|
|
|
|
str >= 10 ? (num = str) : (num = "0" + str); |
|
|
|
|
@ -257,17 +656,72 @@ export default { |
|
|
|
|
top: 14%; |
|
|
|
|
left: 3%; |
|
|
|
|
|
|
|
|
|
.left_top { |
|
|
|
|
.top_title { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 55%; |
|
|
|
|
height: 0.38rem; |
|
|
|
|
background: url(~@/assets/img/tit_bag.png); |
|
|
|
|
background-size: 100% 100%; |
|
|
|
|
display: flex; |
|
|
|
|
|
|
|
|
|
.top_title { |
|
|
|
|
.left_tit { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 10%; |
|
|
|
|
background: url(~@/assets/img/tit_bag.png); |
|
|
|
|
background-size: 100% 100%; |
|
|
|
|
height: 100%; |
|
|
|
|
font-size: 0.1rem; |
|
|
|
|
color: #fff; |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
|
|
|
|
|
.txt_name { |
|
|
|
|
margin: 0 0.1rem 0 0.6rem; |
|
|
|
|
font-family: "FZSK"; |
|
|
|
|
font-size: 0.22rem; |
|
|
|
|
letter-spacing: 0px; |
|
|
|
|
color: #ffffff; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.name { |
|
|
|
|
font-family: "FZSK"; |
|
|
|
|
color: #ffffff; |
|
|
|
|
box-shadow: -4px 5px 10px 0px rgba(39, 8, 8, 0.81); |
|
|
|
|
opacity: 0.6; |
|
|
|
|
margin-bottom: 0.1rem; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.right_tit { |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
margin-right: 0.18rem; |
|
|
|
|
position: relative; |
|
|
|
|
|
|
|
|
|
.title_txt { |
|
|
|
|
width: 0.42rem; |
|
|
|
|
height: 0.32rem; |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
justify-content: center; |
|
|
|
|
background: url(~@/assets/img/bg.png); |
|
|
|
|
background-size: 100% 100%; |
|
|
|
|
cursor: pointer; |
|
|
|
|
|
|
|
|
|
&.active { |
|
|
|
|
background: url(~@/assets/img/active_bg.png); |
|
|
|
|
background-size: 100% 100%; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
div { |
|
|
|
|
font-size: 0.18rem; |
|
|
|
|
color: #fff; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.left_top { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 57%; |
|
|
|
|
|
|
|
|
|
.top_title { |
|
|
|
|
.left_tit { |
|
|
|
|
width: 50%; |
|
|
|
|
height: 100%; |
|
|
|
|
@ -292,39 +746,300 @@ export default { |
|
|
|
|
margin-bottom: 0.1rem; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.right_tit { |
|
|
|
|
.cen_con { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 89%; |
|
|
|
|
margin-top: 0.18rem; |
|
|
|
|
|
|
|
|
|
.table_line1 { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 0.38rem; |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
margin-right: 0.18rem; |
|
|
|
|
position: relative; |
|
|
|
|
background: url(~@/assets/img/tab_bg.png); |
|
|
|
|
background-size: 100% 100%; |
|
|
|
|
|
|
|
|
|
.title_txt { |
|
|
|
|
width: 0.4rem; |
|
|
|
|
height: 0.3rem; |
|
|
|
|
margin: 0 0.03rem; |
|
|
|
|
.table_item { |
|
|
|
|
width: 33%; |
|
|
|
|
height: 100%; |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
justify-content: center; |
|
|
|
|
align-items: center; |
|
|
|
|
color: #fff; |
|
|
|
|
font-family: "FZSK"; |
|
|
|
|
font-size: 0.16rem; |
|
|
|
|
color: #ffffff; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
&::after { |
|
|
|
|
content: ""; |
|
|
|
|
width: 0.4rem; |
|
|
|
|
height: 0.3rem; |
|
|
|
|
position: absolute; |
|
|
|
|
border: solid 1px #127cff; |
|
|
|
|
top: 50%; |
|
|
|
|
transform: skew(-10deg) translateY(-50%); |
|
|
|
|
.swiper-container { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 88%; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.table_con { |
|
|
|
|
height: 100%; |
|
|
|
|
} |
|
|
|
|
.table_line { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 8.6%; |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
|
|
|
|
|
&.ac_no { |
|
|
|
|
height: 10%; |
|
|
|
|
background: url(~@/assets/img/tab1.png); |
|
|
|
|
background-size: 100% 100%; |
|
|
|
|
|
|
|
|
|
div { |
|
|
|
|
font-family: "FZSK"; |
|
|
|
|
font-size: 0.18rem; |
|
|
|
|
letter-spacing: 0px; |
|
|
|
|
background-image: linear-gradient( |
|
|
|
|
to bottom, |
|
|
|
|
#fceece, |
|
|
|
|
#e39054 |
|
|
|
|
); /* 线性渐变背景，方向向上 */ |
|
|
|
|
-webkit-background-clip: text; /* 背景被裁剪成文字的前景色 */ |
|
|
|
|
-webkit-text-fill-color: transparent; /* 文字填充颜色变透明 */ |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
&:nth-child(2) { |
|
|
|
|
background: url(~@/assets/img/tab2.png); |
|
|
|
|
background-size: 100% 100%; |
|
|
|
|
div { |
|
|
|
|
background-image: linear-gradient( |
|
|
|
|
to bottom, |
|
|
|
|
#cefce7, |
|
|
|
|
#16da85 |
|
|
|
|
); /* 线性渐变背景，方向向上 */ |
|
|
|
|
-webkit-background-clip: text; /* 背景被裁剪成文字的前景色 */ |
|
|
|
|
-webkit-text-fill-color: transparent; /* 文字填充颜色变透明 */ |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
&:nth-child(3) { |
|
|
|
|
background: url(~@/assets/img/tab3.png); |
|
|
|
|
background-size: 100% 100%; |
|
|
|
|
div { |
|
|
|
|
background-image: linear-gradient( |
|
|
|
|
to bottom, |
|
|
|
|
#cef6fc, |
|
|
|
|
#1ca4f2 |
|
|
|
|
); /* 线性渐变背景，方向向上 */ |
|
|
|
|
-webkit-background-clip: text; /* 背景被裁剪成文字的前景色 */ |
|
|
|
|
-webkit-text-fill-color: transparent; /* 文字填充颜色变透明 */ |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
div { |
|
|
|
|
font-size: 0.18rem; |
|
|
|
|
.table_item { |
|
|
|
|
width: 33%; |
|
|
|
|
height: 100%; |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: center; |
|
|
|
|
align-items: center; |
|
|
|
|
color: #fff; |
|
|
|
|
font-size: 0.14rem; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// div{ |
|
|
|
|
// font-size: 0.18rem; |
|
|
|
|
// color: #fff; |
|
|
|
|
// } |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.left_bottom { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 38%; |
|
|
|
|
margin-top: 2%; |
|
|
|
|
|
|
|
|
|
.table_box { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 88%; |
|
|
|
|
margin-top: 0.15rem; |
|
|
|
|
// overflow-y: auto; |
|
|
|
|
|
|
|
|
|
.swiper2 { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 92%; |
|
|
|
|
|
|
|
|
|
.swiper-wrapper { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 100%; |
|
|
|
|
|
|
|
|
|
.swiper-slide { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 100%; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.table_con { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 100%; |
|
|
|
|
display: flex; |
|
|
|
|
flex-direction: column; |
|
|
|
|
justify-content: space-between; |
|
|
|
|
align-items: center; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.tab_con { |
|
|
|
|
height: 55%; |
|
|
|
|
} |
|
|
|
|
.table_line1 { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 0.38rem; |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
background: url(~@/assets/img/tab_bg.png); |
|
|
|
|
background-size: 100% 100%; |
|
|
|
|
|
|
|
|
|
.table_item { |
|
|
|
|
width: 33%; |
|
|
|
|
height: 100%; |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: center; |
|
|
|
|
align-items: center; |
|
|
|
|
font-family: "FZSK"; |
|
|
|
|
font-size: 0.16rem; |
|
|
|
|
color: #ffffff; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.table_line { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 0.4rem; |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
|
|
|
|
|
.table_item { |
|
|
|
|
width: 33%; |
|
|
|
|
height: 100%; |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: center; |
|
|
|
|
align-items: center; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
div { |
|
|
|
|
font-size: 0.14rem; |
|
|
|
|
color: #fff; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.center_top { |
|
|
|
|
width: 44%; |
|
|
|
|
height: 12%; |
|
|
|
|
background: red; |
|
|
|
|
position: absolute; |
|
|
|
|
left: 28%; |
|
|
|
|
top: 15%; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.center_bottom { |
|
|
|
|
width: 44%; |
|
|
|
|
height: 25%; |
|
|
|
|
background: red; |
|
|
|
|
position: absolute; |
|
|
|
|
left: 28%; |
|
|
|
|
bottom: 6%; |
|
|
|
|
z-index: 11; |
|
|
|
|
} |
|
|
|
|
.right_box { |
|
|
|
|
width: 24%; |
|
|
|
|
height: 80%; |
|
|
|
|
position: absolute; |
|
|
|
|
top: 14%; |
|
|
|
|
right: 2%; |
|
|
|
|
|
|
|
|
|
.top_title { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 0.38rem; |
|
|
|
|
background: url(~@/assets/img/tit_bag.png); |
|
|
|
|
background-size: 100% 100%; |
|
|
|
|
display: flex; |
|
|
|
|
|
|
|
|
|
.left_tit { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 100%; |
|
|
|
|
font-size: 0.1rem; |
|
|
|
|
color: #fff; |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
|
|
|
|
|
.txt_name { |
|
|
|
|
margin: 0 0.1rem 0 0.6rem; |
|
|
|
|
font-family: "FZSK"; |
|
|
|
|
font-size: 0.22rem; |
|
|
|
|
letter-spacing: 0px; |
|
|
|
|
color: #ffffff; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.name { |
|
|
|
|
font-family: "FZSK"; |
|
|
|
|
color: #ffffff; |
|
|
|
|
box-shadow: -4px 5px 10px 0px rgba(39, 8, 8, 0.81); |
|
|
|
|
opacity: 0.6; |
|
|
|
|
margin-bottom: 0.1rem; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.right_tit { |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
margin-right: 0.18rem; |
|
|
|
|
position: relative; |
|
|
|
|
|
|
|
|
|
.title_txt { |
|
|
|
|
width: 0.42rem; |
|
|
|
|
height: 0.32rem; |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
justify-content: center; |
|
|
|
|
background: url(~@/assets/img/bg.png); |
|
|
|
|
background-size: 100% 100%; |
|
|
|
|
cursor: pointer; |
|
|
|
|
|
|
|
|
|
&.active { |
|
|
|
|
background: url(~@/assets/img/active_bg.png); |
|
|
|
|
background-size: 100% 100%; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
div { |
|
|
|
|
font-size: 0.18rem; |
|
|
|
|
color: #fff; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.right_top { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 34%; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.right_cen { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 33%; |
|
|
|
|
} |
|
|
|
|
.right_bottom { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 33%; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.map_wrap { |
|
|
|
|
position: absolute; |
|
|
|
|
left: 5.2rem; |
|
|
|
|
top: 2.6rem; |
|
|
|
|
width: 8.82rem; |
|
|
|
|
height: 4.2rem; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|
|
jinna
3 years ago
