<template>
|
<div v-loading="pageLoading" class="home-container">
|
<div class="home-content">
|
<div class="home-header">
|
<img class="logo" src="../../assets/images/logo.png" alt="" />
|
<div class="right-date">{{ dateTime }}</div>
|
</div>
|
<div class="home-center-box">
|
<img src="../../assets/images/right-arrow.png" alt="" />
|
<div>车辆管理系统</div>
|
<img src="../../assets/images/left-arrow.png" alt="" />
|
</div>
|
<div class="home-center">
|
<div class="center-icon center-icon-1"></div>
|
<div class="center-icon center-icon-2"></div>
|
<div class="center-icon center-icon-3"></div>
|
<div class="center-icon center-icon-4"></div>
|
<div class="center-content">
|
<div class="center-content-item">
|
<div class="item-label">登记数量</div>
|
<div class="item-value">{{ totalInfo.totalCount }}</div>
|
</div>
|
<div class="center-content-line"></div>
|
<div class="center-content-item">
|
<div class="item-label">区域数量</div>
|
<div class="item-value">{{ totalInfo.totalCurrentCount }}</div>
|
</div>
|
<div class="center-content-line"></div>
|
<div class="center-content-item">
|
<div class="item-label">已发数量</div>
|
<div class="item-value">{{ totalInfo.totalOverCount }}</div>
|
</div>
|
<div class="center-content-line"></div>
|
<div class="center-content-item">
|
<div class="item-label">等待数量</div>
|
<div class="item-value">{{ totalInfo.totalWaitCount }}</div>
|
</div>
|
</div>
|
</div>
|
<div class="home-list">
|
<div v-for="(item, index) in nowList" :key="'item-' + index" class="list-item">
|
<div class="list-item-head">
|
<div class="head-title">
|
<img class="head-title-icon" src="@/assets/images/icon_arrow.png" alt="" />
|
<div class="head-title-text">{{ item.name }}</div>
|
</div>
|
<div class="head-data">
|
<div class="head-data-item">
|
<div class="item-label">登记数量</div>
|
<div class="item-value">{{ item?.vehicleInfoStatistics.currentLevelVehicleCount }}</div>
|
</div>
|
<div class="head-data-item">
|
<div class="item-label">区域数量</div>
|
<div class="item-value">{{ item?.vehicleInfoStatistics.currentVehicleCount }}</div>
|
</div>
|
<div class="head-data-item">
|
<div class="item-label">已发数量</div>
|
<div class="item-value">{{ item?.vehicleInfoStatistics.shippedVehicleCount }}</div>
|
</div>
|
<div class="head-data-item">
|
<div class="item-label">等待数量</div>
|
<div class="item-value">{{ item?.vehicleInfoStatistics.waitingVehicleCount }}</div>
|
</div>
|
</div>
|
</div>
|
<div class="list-item-body">
|
<div class="table-head">
|
<div class="column column1">排队号码</div>
|
<div class="column column2">姓名</div>
|
<div class="column column3">车牌号</div>
|
<div class="column column5">车辆状态</div>
|
<div class="column column6">登记时间</div>
|
</div>
|
<div class="table-body">
|
<div
|
v-for="(ite, ind) in item?.ebVehicleInfoList"
|
:key="'row-' + index + '-' + ind"
|
class="table-body-row"
|
:class="ite.vehicleStatusCode == 1256 ? 'row-active' : ite.vehicleStatusCode == 1257 ? 'row-over' : ''"
|
>
|
<div class="column column1">{{ ite.queueNumber }}</div>
|
<div class="column column2">{{ ite.name }}</div>
|
<div class="column column3">{{ ite.licensePlate }}</div>
|
<div class="column column5">{{ ite.vehicleStatusName }}</div>
|
<div class="column column6">{{ ite.registerTime.substr(11, 5) }}</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
export default {
|
name: 'HomePage',
|
components: {},
|
data() {
|
return {
|
pageLoading: true,
|
systemdate: '', // 系统时间
|
timeTimer: '', // 时间定时器
|
dateTime: '', // 页面时间
|
|
weatherInfo: {
|
// 天气信息
|
weatherIcon: 'icon1',
|
dayWeather: '阴',
|
nightTemp: '10',
|
dayTemp: '20'
|
},
|
|
totalInfo: {}, // 总览数据
|
setTimerOut: '', // 重连延时器
|
|
isShowList: true, // 无列表展示
|
montionList: [], // 所有列表数据
|
nowList: [], // 当前翻页的条数
|
pageTimer: '', // 翻页的定时器
|
childPageTimer: '', // 列表内翻页的定时器
|
params: {
|
page: 1,
|
pageSize: 3,
|
pageTotal: 0,
|
pageTotalTimer: 15000,
|
childPpageTotalTimer: 5000
|
},
|
|
// 重连-弹窗数据
|
reconnectFlag: false, // 失败弹窗标识
|
reconnectFlagWeb: false, // 无法重连弹窗标识
|
reconnectNum: 0, // 重连次数初始值
|
|
isBegin: true, // 是否初次分页
|
heartTimeout: 30000, // 心跳检查时间--
|
heartTimeoutObj: null,
|
heartServerTimeoutObj: null,
|
|
wsUrl: process.env.NODE_ENV === 'development' ? 'ws://localhost:8993/admin/bigscreen' : 'ws://1.15.17.182:9031/admin/bigscreen',
|
// wsUrl: 'wss://car-manager.truekey.mobi//admin/bigscreen',
|
ws: null,
|
lockReconnect: false // 是否连接成功
|
}
|
},
|
created() {},
|
mounted() {
|
// this.wsUrl = this.wsUrl + this.guid()
|
this.createWebSocket()
|
// this.getWeatherCity()
|
// this.getTime()
|
},
|
beforeDestroy: function () {
|
// 销毁所有的定时器
|
|
// 时间定时器
|
if (this.timeTimer) {
|
clearInterval(this.timeTimer)
|
this.timeTimer = null
|
}
|
// 左右翻页定时器
|
if (this.pageTimer) {
|
clearInterval(this.pageTimer)
|
this.pageTimer = null
|
}
|
// 上下翻页定时器
|
if (this.childPageTimer) {
|
clearInterval(this.childPageTimer)
|
this.childPageTimer = null
|
}
|
// socket重连定时器
|
if (this.setTimerOut) {
|
clearInterval(this.setTimerOut)
|
this.setTimerOut = null
|
}
|
|
// 心跳定时器
|
if (this.heartTimeoutObj) {
|
clearTimeout(this.heartTimeoutObj)
|
this.heartTimeoutObj = null
|
}
|
if (this.heartServerTimeoutObj) {
|
clearTimeout(this.heartServerTimeoutObj)
|
this.heartServerTimeoutObj = null
|
}
|
},
|
methods: {
|
S4() {
|
return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
|
},
|
guid() {
|
return this.S4() + this.S4() + '-' + this.S4() + '-' + this.S4() + '-' + this.S4() + '-' + this.S4() + this.S4() + this.S4()
|
},
|
getWeatherCity() {
|
let that = this
|
// var map = new AMap.Map('weatherContainer', {
|
// resizeEnable: true,
|
// center: [116.486409, 39.921489],
|
// zoom: 12
|
// })
|
let cityname = '上海市'
|
AMap.plugin('AMap.CitySearch', function () {
|
var citySearch = new AMap.CitySearch()
|
citySearch.getLocalCity(function (status, result) {
|
if (status === 'complete' && result.info === 'OK') {
|
cityname = result.city
|
setTimeout(() => {
|
that.getWeather(cityname)
|
}, 10)
|
} else {
|
that.getWeather(cityname)
|
}
|
})
|
})
|
},
|
getWeather(cityname) {
|
let that = this
|
AMap.plugin('AMap.Weather', function () {
|
var weather = new AMap.Weather()
|
weather.getForecast(cityname, function (err, data) {
|
if (!err) {
|
const weatherGroups = [
|
{ name: 'icon1', values: ['阴'] },
|
{ name: 'icon2', values: ['晴'] },
|
{ name: 'icon3', values: ['少云', '晴间多云', '多云', '有风', '平静', '微风', '和风', '清风', '强风/劲风', '疾风', '大风', '烈风', '风暴', '狂爆风', '飓风', '热带风暴', '冷', '热'] },
|
{ name: 'icon4', values: ['霾', '中度霾', '重度霾', '严重霾', '雾', '浓雾', '强浓雾', '轻雾', '大雾', '特强浓雾'] },
|
{
|
name: 'icon5',
|
values: [
|
'阵雨',
|
'雷阵雨',
|
'雷阵雨并伴有冰雹',
|
'小雨',
|
'中雨',
|
'大雨',
|
'暴雨',
|
'大暴雨',
|
'特大暴雨',
|
'强阵雨',
|
'强雷阵雨',
|
'极端降雨',
|
'毛毛雨/细雨',
|
'雨',
|
'小雨-中雨',
|
'中雨-大雨',
|
'大雨-暴雨',
|
'暴雨-大暴雨',
|
'大暴雨-特大暴雨'
|
]
|
},
|
{ name: 'icon6', values: ['雨雪天气', '雨夹雪', '阵雨夹雪', '冻雨', '雪', '阵雪', '小雪', '中雪', '大雪', '暴雪', '小雪-中雪', '中雪-大雪', '大雪-暴雪'] },
|
{ name: 'icon7', values: ['浮尘', '扬沙', '沙尘暴', '强沙尘暴', '龙卷风'] },
|
{ name: 'icon8', values: ['未知'] }
|
]
|
let weatherStr = 'icon8'
|
for (const group of weatherGroups) {
|
if (group.values.includes(data?.forecasts?.[0]?.dayWeather)) {
|
weatherStr = group.name
|
}
|
}
|
that.weatherInfo.weatherIcon = weatherStr
|
that.weatherInfo.dayWeather = data?.forecasts?.[0]?.dayWeather
|
that.weatherInfo.nightTemp = data?.forecasts?.[0]?.nightTemp
|
that.weatherInfo.dayTemp = data?.forecasts?.[0]?.dayTemp
|
}
|
})
|
})
|
},
|
// 获取系统时间
|
getTime(time) {
|
if (this.timeTimer) {
|
clearInterval(this.timeTimer)
|
this.timeTimer = null
|
}
|
let newDate = new Date()
|
if (time) {
|
newDate = new Date(time)
|
}
|
this.systemdate = newDate.getTime()
|
this.formatterTime()
|
},
|
formatterTime() {
|
this.timeTimer = setInterval(() => {
|
this.systemdate = this.systemdate + 1000
|
let date = new Date(this.systemdate)
|
let da = date.getFullYear() + '年' + this.get0(date.getMonth() + 1) + '月' + this.get0(date.getDate()) + '日 '
|
let time = this.get0(date.getHours()) + ':' + this.get0(date.getMinutes())
|
this.dateTime = da + time
|
}, 1000)
|
},
|
get0(num) {
|
return num < 10 ? '0' + num : num
|
},
|
createWebSocket: function () {
|
this.lockReconnect = false
|
let that = this
|
try {
|
// console.log('websocket创建连接-----》成功')
|
if ('WebSocket' in window) {
|
that.ws = new WebSocket(that.wsUrl)
|
} else if ('MozWebSocket' in window) {
|
that.ws = new MozWebSocket(that.wsUrl)
|
} else {
|
alert('您的浏览器不支持websocket协议,建议使用新版谷歌、火狐等浏览器，请勿使用IE10以下浏览器，360浏览器请使用极速模式，不要使用兼容模式！')
|
}
|
if (that.ws) {
|
that.initEventHandle()
|
}
|
} catch (e) {
|
// console.log('websocket创建连接-----》失败')
|
that.lockReconnect = false
|
that.reconnect()
|
}
|
},
|
initEventHandle() {
|
let that = this
|
this.ws.onclose = () => {
|
if (that.pageTimer) {
|
clearInterval(that.pageTimer)
|
that.pageTimer = null
|
}
|
if (that.childPageTimer) {
|
clearInterval(that.childPageTimer)
|
that.childPageTimer = null
|
}
|
that.lockReconnect = false
|
// console.log('链接关闭---》33',new Date()),
|
that.reconnect()
|
}
|
this.ws.onerror = function () {
|
that.lockReconnect = false
|
if (that.pageTimer) {
|
clearInterval(that.pageTimer)
|
that.pageTimer = null
|
}
|
if (that.childPageTimer) {
|
clearInterval(that.childPageTimer)
|
that.childPageTimer = null
|
}
|
that.reconnect()
|
}
|
this.ws.onopen = () => {
|
// console.log('websocket链接成功----open',new Date())
|
that.ws.send('open_' + new Date() + Math.floor(Math.random() * 1000)) //发送日志
|
that.heartCheck()
|
}
|
this.ws.onmessage = event => {
|
// console.log('onmessage-----start---')
|
// console.log(event)
|
// console.log('onmessage-----end---')
|
//如果获取到消息，心跳检测重置
|
// console.log('websocket链接成功-----------》22',new Date())
|
that.heartCheck()
|
if (event.data === 'pong') {
|
// console.log('ws-心跳检测成功')
|
} else {
|
var data = JSON.parse(event.data)
|
that.getTime(data?.time)
|
that.dataHandle(data)
|
}
|
}
|
},
|
//没连接上会一直重连，设置延迟避免请求过多
|
reconnect() {
|
if (this.setTimerOut) {
|
clearTimeout(this.setTimerOut)
|
this.setTimerOut = null
|
}
|
this.reconnectNum = this.reconnectNum + 1
|
if (this.lockReconnect) {
|
return
|
}
|
if (this.reconnectNum > 3 && this.reconnectNum <= 240) {
|
this.reconnectFlag = true
|
this.lockReconnect = false
|
this.setTimerOut = setTimeout(() => {
|
this.createWebSocket()
|
}, 10000)
|
} else if (this.reconnectNum > 240) {
|
this.reconnectFlag = false
|
this.reconnectFlagWeb = true
|
this.lockReconnect = false
|
this.setTimerOut = setTimeout(() => {
|
this.createWebSocket()
|
}, 10000)
|
} else {
|
this.setTimerOut = setTimeout(() => {
|
this.createWebSocket()
|
this.isBegin = true
|
this.reconnectFlag = false
|
this.reconnectFlagWeb = false
|
this.lockReconnect = false
|
}, 10000)
|
}
|
},
|
heartCheck() {
|
let that = this
|
if (that.heartTimeoutObj) {
|
clearTimeout(that.heartTimeoutObj)
|
that.heartTimeoutObj = null
|
}
|
if (that.heartServerTimeoutObj) {
|
clearTimeout(that.heartServerTimeoutObj)
|
that.heartServerTimeoutObj = null
|
}
|
that.heartTimeoutObj = setTimeout(function () {
|
//onmessage拿到返回的心跳就说明连接正常
|
// console.log(vm.ws)
|
that.ws.send('ping')
|
that.heartServerTimeoutObj = setTimeout(function () {
|
//如果超过一定时间还没重置，说明后端主动断开了
|
//如果onclose会执行reconnect，我们执行ws.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次
|
that.ws.close()
|
}, that.heartTimeout * 2)
|
}, that.heartTimeout)
|
},
|
dataHandle(data) {
|
this.pageLoading = true
|
if (this.pageTimer) {
|
clearInterval(this.pageTimer)
|
this.pageTimer = null
|
}
|
if (this.childPageTimer) {
|
clearInterval(this.childPageTimer)
|
this.childPageTimer = null
|
}
|
this.totalInfo = data.total
|
this.montionList = []
|
|
let list = data.areaList || []
|
if (list.length > 0) {
|
this.isShowList = true
|
list.map(item => {
|
item.vehicleInfoStatistics = item.value.vehicleInfoStatistics
|
item.ebVehicleInfoList = []
|
item.params = {
|
page: 1,
|
pageSize: 9,
|
pageTotal: 0
|
}
|
item.ebVehicleInfoList = item.value.ebVehicleInfoList.slice(0, item.params.pageSize)
|
item.params.pageTotal = Math.ceil(item.value.ebVehicleInfoList.length / item.params.pageSize)
|
})
|
this.pageLoading = false
|
this.montionList = list
|
// 设置翻页
|
this.params.pageTotal = Math.ceil(this.montionList.length / this.params.pageSize)
|
if (this.params.pageTotal > 1) {
|
if (this.params.page === 1) {
|
this.nowList = this.montionList.slice(0, this.params.pageSize)
|
this.pageScroll()
|
}
|
if (this.pageTimer) {
|
this.openScroll()
|
} else {
|
this.isBegin = true
|
this.openScroll()
|
}
|
} else {
|
this.nowList = this.montionList.slice(0, this.params.pageSize)
|
this.pageScroll()
|
if (this.pageTimer) {
|
clearInterval(this.pageTimer)
|
this.pageTimer = null
|
}
|
}
|
} else {
|
this.pageLoading = false
|
this.isShowList = false
|
this.montionList = []
|
this.nowList = []
|
this.params.page = 1
|
this.params.pageSize = 3
|
this.params.pageTotal = 0
|
// this.params.pageTotalTimer = this.params.pageTotalTimer ? this.params.pageTotalTimer : 15000
|
this.params.pageTotalTimer = 15000
|
this.params.childPpageTotalTimer = 5000
|
if (this.pageTimer) {
|
clearInterval(this.pageTimer)
|
this.pageTimer = null
|
}
|
if (this.childPageTimer) {
|
clearInterval(this.childPageTimer)
|
this.childPageTimer = null
|
}
|
}
|
this.pageLoading = false // 加载中消失
|
this.reconnectFlag = false // 连接失败弹框消失--重连
|
this.reconnectFlagWeb = false // 连接失败弹框消失--挂载
|
this.reconnectNum = 0
|
this.lockReconnect = true
|
},
|
// 数据翻页
|
openScroll() {
|
if (this.params.pageTotal) {
|
if (this.pageTimer) {
|
clearInterval(this.pageTimer)
|
this.pageTimer = null
|
}
|
this.pageTimer = setInterval(() => {
|
// console.log('左右翻页---',this.params.page,this.params.pageTotal)
|
if (this.params.page < this.params.pageTotal) {
|
this.params.page += 1
|
this.nowList = this.montionList.slice((this.params.page - 1) * this.params.pageSize, this.params.page * this.params.pageSize)
|
} else {
|
this.nowList = this.montionList.slice(0, this.params.pageSize)
|
this.params.page = 1
|
}
|
this.pageScroll()
|
}, this.params.pageTotalTimer)
|
}
|
},
|
pageScroll() {
|
if (this.childPageTimer) {
|
clearInterval(this.childPageTimer)
|
this.childPageTimer = null
|
}
|
let list = JSON.parse(JSON.stringify(this.nowList))
|
this.childPageTimer = setInterval(() => {
|
list.map(item => {
|
// console.log('上下翻页---item-page'+item.name+'--',item.params.page,item.params.pageTotal)
|
if (item.params.pageTotal) {
|
if (item.params.page < item.params.pageTotal) {
|
item.params.page += 1
|
item.ebVehicleInfoList = item.value.ebVehicleInfoList.slice((item.params.page - 1) * item.params.pageSize, item.params.page * item.params.pageSize)
|
} else {
|
item.ebVehicleInfoList = item.value.ebVehicleInfoList.slice(0, item.params.pageSize)
|
item.params.page = 1
|
}
|
}
|
})
|
this.nowList = list
|
}, this.params.childPpageTotalTimer)
|
}
|
}
|
}
|
</script>
|
<style scoped lang="scss">
|
/* @import '~@/styles/utils.scss'; */
|
.home-container {
|
width: 100%;
|
height: 100vh;
|
background: url('@/assets/images/bg.png') no-repeat;
|
background-size: 100% 100%;
|
padding-top: 1.3vh;
|
|
.home-header {
|
/* height: px2vh(80); */
|
height: 3.697916vw;
|
padding: 0 2.916667vw;
|
width: 100%;
|
position: relative;
|
background: url('@/assets/images/headBg1.png') no-repeat;
|
background-size: 100% 100%;
|
display: flex;
|
justify-content: space-between;
|
|
.logo {
|
width: 5.552vw;
|
height: 2.057291vw;
|
}
|
.right-date {
|
font-family: PingFang SC, PingFang SC;
|
font-weight: 700;
|
font-size: 1.666667vw;
|
color: #c9cff2;
|
text-align: center;
|
font-style: normal;
|
text-transform: none;
|
}
|
}
|
.home-center-box {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
|
height: 2.777vh;
|
font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
|
font-weight: bold;
|
font-size: 2.037vh;
|
color: #ffffff;
|
letter-spacing: 2px;
|
text-shadow: 0px 6px 6px rgba(0, 0, 0, 0.25);
|
text-align: center;
|
font-style: normal;
|
text-transform: none;
|
|
img {
|
width: 2.473vw;
|
}
|
}
|
.home-center {
|
margin: 0 auto;
|
width: 92.34375vw;
|
height: 11.111111vh;
|
background: url('@/assets/images/centerBg.png') no-repeat;
|
background-size: 100% 100%;
|
position: relative;
|
|
.center-icon {
|
width: 2.864vw;
|
height: 4.074vh;
|
background: url('@/assets/images/icon_horn.png') no-repeat;
|
background-size: 100% 100%;
|
position: absolute;
|
|
&-1 {
|
top: 0;
|
left: 0;
|
}
|
|
&-2 {
|
top: 0;
|
right: 0;
|
transform: scaleX(-1);
|
}
|
|
&-3 {
|
bottom: 0;
|
right: 0;
|
transform: rotate(180deg) scaleY(1);
|
}
|
|
&-4 {
|
bottom: 0;
|
left: 0;
|
transform: scaleY(-1);
|
}
|
}
|
|
.center-content {
|
width: 100%;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
|
&-line {
|
width: 2px;
|
height: 7.87vh;
|
background: url('@/assets/images/line.png') no-repeat;
|
background-size: 100% 100%;
|
}
|
|
&-item {
|
width: 18.2vw;
|
|
.item-label {
|
font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
|
font-weight: 500;
|
font-size: 2.962vh;
|
line-height: 4.074vh;
|
color: #ffffff;
|
opacity: 0.65;
|
text-align: center;
|
font-style: normal;
|
text-transform: none;
|
}
|
|
.item-value {
|
margin-top: 0.925vh;
|
font-family: D-DIN-PRO, D-DIN-PRO;
|
font-weight: bold;
|
font-size: 4.814vh;
|
line-height: 100%;
|
text-align: center;
|
font-style: normal;
|
text-transform: none;
|
color: transparent;
|
background-clip: text;
|
-webkit-background-clip: text;
|
background-image: linear-gradient(180deg, #ffffff 40%, #35b8ee 100%);
|
}
|
}
|
}
|
}
|
|
.home-list {
|
margin-top: 1.0185vh;
|
display: flex;
|
align-items: center;
|
justify-content: flex-start;
|
padding-left: 1.0937vw;
|
|
.list-item {
|
width: 32.6vw;
|
height: 75vh;
|
background: linear-gradient(90deg, rgba(101, 137, 216, 0.25) 0%, rgba(24, 50, 106, 0.25) 100%);
|
overflow: hidden;
|
|
&-head {
|
padding: 1.48148vh;
|
border-bottom: 2px solid rgba(255, 255, 255, 0.25);
|
|
.head-title {
|
display: flex;
|
align-items: center;
|
justify-content: flex-start;
|
|
&-icon {
|
width: 2.037vh;
|
height: 2.037vh;
|
object-fit: contain;
|
display: inline-block;
|
margin-right: 0.677vw;
|
}
|
|
&-text {
|
font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
|
font-weight: bold;
|
font-size: 1.666667vw;
|
color: #ffffff;
|
font-style: normal;
|
text-transform: none;
|
}
|
}
|
|
.head-data {
|
margin-top: 1.48148vh;
|
display: flex;
|
align-items: center;
|
justify-content: space-around;
|
|
&-item {
|
.item-label {
|
font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
|
font-weight: 500;
|
font-size: 1.25vw;
|
line-height: 1;
|
color: #ffffff;
|
opacity: 0.65;
|
text-align: center;
|
font-style: normal;
|
text-transform: none;
|
}
|
|
.item-value {
|
margin-top: 0.74vh;
|
font-family: D-DIN-PRO, D-DIN-PRO;
|
font-weight: bold;
|
font-size: 2.083vw;
|
line-height: 100%;
|
text-align: center;
|
font-style: normal;
|
text-transform: none;
|
color: transparent;
|
background-clip: text;
|
-webkit-background-clip: text;
|
background-image: linear-gradient(180deg, #ffffff 40%, #35b8ee 100%);
|
}
|
}
|
}
|
}
|
|
&-body {
|
padding: 1.388vh 0.5208vw;
|
|
.column1 {
|
width: 5.09vw;
|
}
|
|
.column2 {
|
width: 5vw;
|
}
|
|
.column3 {
|
width: 6vw;
|
}
|
.column5 {
|
width: 5.09vw;
|
}
|
|
.column6 {
|
width: 5.09vw;
|
}
|
|
.table-head {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-around;
|
padding: 1.48148vh 0;
|
|
.column {
|
font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
|
font-weight: 400;
|
font-size: 1.25vw;
|
color: #ffffff;
|
line-height: 2.685vh;
|
text-align: center;
|
font-style: normal;
|
text-transform: none;
|
}
|
}
|
|
.table-body {
|
&-row {
|
display: flex;
|
align-items: center;
|
justify-content: space-around;
|
height: 5vh;
|
|
&:nth-child(odd) {
|
height: 5vh;
|
background: linear-gradient(90deg, rgba(101, 137, 216, 0.25) 0%, rgba(24, 50, 106, 0.25) 100%);
|
}
|
|
&:nth-child(even) {
|
height: 6.4vh;
|
background: transparent;
|
}
|
|
.column {
|
font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
|
font-weight: 400;
|
font-size: 1.25vw;
|
color: rgba(255, 255, 255, 0.7);
|
line-height: 5vh;
|
text-align: center;
|
font-style: normal;
|
text-transform: none;
|
}
|
|
&.row-active {
|
.column {
|
color: #24e727;
|
}
|
}
|
&.row-over {
|
.column {
|
color: #ff1e10;
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
.home-container::-webkit-scrollbar {
|
display: none;
|
}
|
</style>
|
