You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1045 lines
28 KiB
1045 lines
28 KiB
<template> |
|
<div class="container_box"> |
|
<div class="top_con"> |
|
<div class="left_con"> |
|
<div class="left_txt"> |
|
<div class="time_text">{{ time }}</div> |
|
<div class="bittom_left"> |
|
<div class="week_txt"> |
|
<span>{{ date }}</span |
|
><span style="margin-left: 0.1rem">{{ week }}</span> |
|
</div> |
|
<div class="uodate_time">数据更新时间:<span class="time_txt">2023/01/17</span></div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="center_con"> |
|
<div class="con_title">莒县物流服务中心</div> |
|
</div> |
|
<div class="right_con"> |
|
<div class="right_txt"> |
|
<div class="left"> |
|
<img src="~@/assets/img/pos.png" alt="" /> |
|
<div class="pos_text">日照市莒县</div> |
|
</div> |
|
<div class="bottom_right"> |
|
<img src="~@/assets/img/weather.png" alt="" /> |
|
<div> |
|
<span>{{ temp }}℃</span> |
|
<span>{{ weather }}</span> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="left_box"> |
|
<div class="left_top"> |
|
<div class="top_title"> |
|
<div class="left_tit"> |
|
<span class="txt_name">{{ activeName }}</span> |
|
<span class="name">{{ acctiEng }}</span> |
|
</div> |
|
<div class="right_tit"> |
|
<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> |
|
<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); |
|
return num; |
|
}, |
|
getWeek(e) { |
|
let arr = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"]; |
|
this.week = arr[e]; |
|
}, |
|
getTime() { |
|
//获取当前时间 |
|
this.timer = setInterval(() => { |
|
var date = new Date(); |
|
var year = date.getFullYear(); //当前年份 |
|
var month = date.getMonth(); //当前月份 |
|
var data = date.getDate(); //天 |
|
var hours = date.getHours(); //小时 |
|
var minute = date.getMinutes(); //分 |
|
var second = date.getSeconds(); //秒 |
|
this.day = date.getDay(); //获取当前星期几 |
|
this.getWeek(this.day); |
|
this.time = this.fn(hours) + ":" + this.fn(minute) + ":" + this.fn(second); |
|
this.date = year + "/" + (month + 1) + "/" + data; |
|
}, 1000); |
|
}, |
|
}, |
|
}; |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
@import "~@/assets/font/font.css"; |
|
.container_box { |
|
width: 100%; |
|
height: 100%; |
|
position: absolute; |
|
background: url(~@/assets/img/background.jpg); |
|
background-size: 100% 100%; |
|
position: relative; |
|
z-index: 9; |
|
|
|
.top_con { |
|
width: 100%; |
|
height: 10%; |
|
display: flex; |
|
align-items: center; |
|
position: absolute; |
|
top: 0; |
|
|
|
.left_con { |
|
width: 20%; |
|
display: flex; |
|
justify-content: space-between; |
|
height: 100%; |
|
align-items: center; |
|
|
|
.left_txt { |
|
display: flex; |
|
width: 100%; |
|
flex-direction: column; |
|
height: 55%; |
|
justify-content: space-between; |
|
|
|
.time_text { |
|
display: flex; |
|
margin-left: 0.38rem; |
|
font-size: 0.34rem; |
|
font-family: "04B"; |
|
color: #ffffff; |
|
box-shadow: -4px 5px 10px 0px rgb(64 49 49 / 56%); |
|
} |
|
|
|
.bittom_left { |
|
display: flex; |
|
justify-content: space-between; |
|
|
|
.week_txt { |
|
font-size: 0.14rem; |
|
letter-spacing: 0px; |
|
color: #ffffff; |
|
margin-left: 0.38rem; |
|
} |
|
|
|
.uodate_time { |
|
font-family: "FZSK"; |
|
font-size: 0.14rem; |
|
font-weight: normal; |
|
font-stretch: normal; |
|
letter-spacing: 0px; |
|
color: #ffffff; |
|
box-shadow: -1px 2px 3px 0px rgb(64 49 49 / 60%); |
|
opacity: 0.8; |
|
color: #fff; |
|
.time_txt { |
|
font-size: 0.16rem; |
|
font-family: "04B"; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
.center_con { |
|
width: 60%; |
|
height: 80%; |
|
text-align: center; |
|
|
|
.con_title { |
|
font-family: "FZSK"; |
|
font-size: 0.44rem; |
|
font-weight: normal; |
|
font-style: italic; |
|
font-stretch: normal; |
|
letter-spacing: 0px; |
|
color: #ffffff; |
|
// box-shadow: -0.04rem 0.05rem 0.1rem 0px |
|
// rgba(64, 49, 49, 0.56); |
|
} |
|
} |
|
|
|
.right_con { |
|
width: 17%; |
|
height: 100%; |
|
display: flex; |
|
align-items: center; |
|
margin-left: 3%; |
|
|
|
.right_txt { |
|
width: 100%; |
|
height: 53%; |
|
display: flex; |
|
justify-content: space-between; |
|
|
|
.left { |
|
display: flex; |
|
align-items: flex-end; |
|
img { |
|
width: 0.13rem; |
|
height: 0.16rem; |
|
margin-right: 0.1rem; |
|
} |
|
|
|
.pos_text { |
|
font-family: "FZSK"; |
|
font-size: 0.16rem; |
|
color: #ddecff; |
|
} |
|
} |
|
|
|
.bottom_right { |
|
display: flex; |
|
align-items: center; |
|
margin-right: 0.38rem; |
|
img { |
|
width: 0.8rem; |
|
height: 0.8rem; |
|
} |
|
div { |
|
height: 100%; |
|
font-family: "FZSK"; |
|
font-size: 0.16rem; |
|
color: #ffffff; |
|
display: flex; |
|
flex-direction: column; |
|
justify-content: space-between; |
|
} |
|
} |
|
} |
|
div { |
|
font-size: 0.16rem; |
|
color: #fff; |
|
} |
|
} |
|
} |
|
|
|
.left_box { |
|
width: 24%; |
|
height: 80%; |
|
position: absolute; |
|
top: 14%; |
|
left: 3%; |
|
|
|
.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; |
|
} |
|
} |
|
} |
|
|
|
.left_top { |
|
width: 100%; |
|
height: 57%; |
|
|
|
.top_title { |
|
.left_tit { |
|
width: 50%; |
|
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; |
|
} |
|
} |
|
} |
|
|
|
.cen_con { |
|
width: 100%; |
|
height: 89%; |
|
margin-top: 0.18rem; |
|
|
|
.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; |
|
color: #fff; |
|
font-family: "FZSK"; |
|
font-size: 0.16rem; |
|
color: #ffffff; |
|
} |
|
} |
|
|
|
.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; /* 文字填充颜色变透明 */ |
|
} |
|
} |
|
} |
|
|
|
.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>
|
|
|