727 lines
24 KiB
Vue
727 lines
24 KiB
Vue
<template>
|
||
<div class="container">
|
||
<div class="topdiv">
|
||
<div class="dateTimeClass">
|
||
<span style="color:#D8E2FF;font-size: 24px;margin-top: 12px;">{{dateTime}}</span>
|
||
</div>
|
||
<div class="titlediv">
|
||
经研院食安公示
|
||
</div>
|
||
<div class="hourTimeClass">
|
||
<span style="color:#D8E2FF;font-size: 24px;margin-top: 12px;">{{hourTime}}</span>
|
||
</div>
|
||
</div>
|
||
<div class="titlediv2">
|
||
健康晨检
|
||
</div>
|
||
<div class="fegexian" style="margin-top: 10px;"></div>
|
||
|
||
<div class="contentclass">
|
||
<table style="width: 100%;height: 100%;">
|
||
<tr>
|
||
<td>晨检</td>
|
||
<td>手部检测</td>
|
||
<td>脸部检测</td>
|
||
<td>健康证</td>
|
||
</tr>
|
||
<tr style="height: 100%;width: 100%;">
|
||
<td rowspan="5" style="height: 250px;width: 25%;">
|
||
<div style="width: 100%;height: 100%;">
|
||
<div style="height: 100%;" ref="chartone"></div>
|
||
</div>
|
||
</td>
|
||
<td rowspan="5" style="height: 100%;width: 25%;">
|
||
<div style="width: 100%;height: 100%;">
|
||
<div style="height: 100%;" ref="charttwo"></div>
|
||
</div>
|
||
</td>
|
||
<td rowspan="5" style="height: 100%;width: 25%;">
|
||
<div style="width: 100%;height: 100%;">
|
||
<div style="height: 100%;" ref="chartthree"></div>
|
||
</div>
|
||
</td>
|
||
<td rowspan="5" style="height: 100%;width: 25%;">
|
||
<div style="width: 100%;height: 100%;">
|
||
<div style="height: 100%;" ref="chartfour"></div>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
<tr></tr>
|
||
<tr></tr>
|
||
<tr></tr>
|
||
<tr></tr>
|
||
<tr>
|
||
<td>晨检正常：{{morningCheckNum}}人</td>
|
||
<td>晨检正常：{{handCheckNum}}人</td>
|
||
<td>晨检正常：{{faceCheckNum}}人</td>
|
||
<td>正常：{{healthNum}}人</td>
|
||
</tr>
|
||
<tr>
|
||
<td>晨检异常：{{morningCheckAbno}}人</td>
|
||
<td>晨检异常：{{handCheckAbno}}人</td>
|
||
<td>晨检异常：{{faceCheckAbno}}人</td>
|
||
<td>过期：{{healthAbno}}人</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
|
||
<div class="partthree">
|
||
<div class="partthree_title"><span>AI巡检记录</span></div>
|
||
<div class="fegexian" style="margin: 10px auto;"></div>
|
||
<div style="width: 100%; height: auto;">
|
||
<carousel :per-page="3" :mouse-drag="true" :paginationActive="false" :autoplay="true" :autoplay-timeout="5000" :loop="true" >
|
||
<slide v-for="(item, index) in inspectionRecord" :key="index">
|
||
<div style="padding: 5%;;width: 100%; height: 90%;overflow: hidden;">
|
||
<img style="width: 100%; height: 100%; object-fit: cover;" :src="item.picUrl"/>
|
||
</div>
|
||
</slide>
|
||
</carousel>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="width: 96%;height: auto;margin: 1% auto;display: flex;justify-content: space-between;">
|
||
<div class="container2">
|
||
<div class="partthree_title"><span>证照公示</span></div>
|
||
<div class="partthree_title2"><div class="fegexian2" style="width: 80%;"></div></div>
|
||
<div style="width: 90%;height: 260px;margin: 10px auto;text-align: center;">
|
||
<img style="width: 100%; height: 250px; object-fit: cover;" :src="certificatePic[0]"/>
|
||
</div>
|
||
</div>
|
||
<div class="container2">
|
||
<div class="partthree_title"><span>厨师公示</span></div>
|
||
<div class="partthree_title2"><div class="fegexian2" style="width: 80%;"></div></div>
|
||
<div style="width: 90%;height: 260px;margin: 10px auto;text-align: center;">
|
||
<carousel :per-page="3" :mouse-drag="false" :navigationEnabled="false" :autoplay="true" :autoplay-timeout="5000" :loop="true" >
|
||
<slide v-for="(item, index) in cookCertificate" :key="index">
|
||
<div style="padding: 5%;;width: 100%; height: 250px;overflow: hidden;">
|
||
<img style="width: 100%; height: 90%; object-fit: cover;" :src="item.picUrl"/>
|
||
<div style="color: #D8E2FF;height: 10%;text-align: center;">{{item.staffname}}</div>
|
||
</div>
|
||
</slide>
|
||
</carousel>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="width: 90%;height: auto;margin: 1% auto;">
|
||
<div class="partthree_title"><span>重点区域监控</span></div>
|
||
<div class="partthree_title2"><div class="fegexian2" style="margin-top: 2px;width: 80%;"></div></div>
|
||
<div style="width: 100%;height: 800px;margin-top: 1%;">
|
||
<videoMonitoring></videoMonitoring>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import videoMonitoring from './videoMonitoring.vue'
|
||
import Vue from 'vue'
|
||
import VueCarousel from 'vue-carousel';
|
||
Vue.use(VueCarousel);
|
||
import * as echarts from 'echarts';
|
||
import axios from 'axios';
|
||
import Cookies from 'js-cookie';
|
||
import { getCertificatePicInfoApi,getCookCertificateInfoApi,getAIRewordInfoApi,getMorningCheckInfoApi } from "@/api/view";
|
||
export default {
|
||
name: "Index",
|
||
components: {
|
||
videoMonitoring // 注册子组件
|
||
},
|
||
data() {
|
||
return {
|
||
// 版本号
|
||
version: "24.7.1",
|
||
currentSeat:300,
|
||
mealNum:0,
|
||
dateTime:'',//日期
|
||
hourTime:'',//时分秒
|
||
settimenum:0,
|
||
|
||
morningCheckNum:0, //晨检数
|
||
morningCheckPerc:0,//晨检比
|
||
morningCheckAbno:0,//晨检异常数
|
||
|
||
handCheckNum:0, //手晨检数
|
||
handCheckPerc:0,//手晨检比
|
||
handCheckAbno:0,//手晨检异常数
|
||
|
||
faceCheckNum:0, //脸晨检数
|
||
faceCheckPerc:0,//脸晨检比
|
||
faceCheckAbno:0,//脸晨检异常数
|
||
|
||
healthNum:0, //健康证数
|
||
healthPerc:0,//健康证比
|
||
healthAbno:0,//健康证异常数
|
||
dataForm:{},
|
||
inspectionRecord:[//AI巡检记录
|
||
],
|
||
cookCertificate:[//厨师证
|
||
],
|
||
//证照公示
|
||
certificatePic:["http://sgwpdm.ah.sgcc.com.cn/canteen/lnyst/378915229716713472/dishes/ce0e4591db7e439a9951e8c48be92d31.png"],
|
||
angle:0
|
||
};
|
||
},
|
||
created() {
|
||
},
|
||
mounted() {
|
||
this.getCurrentTime(); // 组件挂载后获取时间
|
||
this.initData();// 你的业务逻辑
|
||
setTimeout(()=>{
|
||
var elements = document.querySelectorAll(".VueCarousel-pagination");
|
||
elements.forEach(function(el) {
|
||
el.style.display="none";
|
||
});
|
||
},1000);
|
||
setInterval(this.getCurrentTime, 1000); // 每秒更新时间
|
||
this.timer = setInterval(() => {
|
||
this.settimenum=this.settimenum+1;
|
||
this.getUserFlage();//判断是否需要获取token
|
||
this.initData(); // 你的业务逻辑
|
||
var elements = document.querySelectorAll(".VueCarousel-pagination");
|
||
elements.forEach(function(el) {
|
||
el.style.display="none";
|
||
});
|
||
}, 1000000);
|
||
},
|
||
beforeDestroy() {
|
||
clearInterval(this.timer); // 必须清除定时器！
|
||
},
|
||
methods: {
|
||
refrespage(){
|
||
this.$router.go(0);
|
||
return;
|
||
},
|
||
getCurrentTime() {
|
||
const now = new Date();
|
||
const year = now.getFullYear();
|
||
const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份是从0开始的
|
||
const day = String(now.getDate()).padStart(2, '0');
|
||
const hours = String(now.getHours()).padStart(2, '0');
|
||
const minutes = String(now.getMinutes()).padStart(2, '0');
|
||
const seconds = String(now.getSeconds()).padStart(2, '0');
|
||
this.dateTime = year+'-'+month+'-'+day;
|
||
this.hourTime = hours+':'+minutes+':'+seconds;
|
||
},
|
||
initData(){
|
||
this.dataForm.type=1;
|
||
getMorningCheckInfoApi(this.dataForm).then(res => {
|
||
console.log("morningCheckNum",res)
|
||
this.morningCheckNum=res.data.morningCheckNum;
|
||
this.morningCheckAbno=res.data.morningCheckAbno;
|
||
this.handCheckNum=res.data.handCheckNum;
|
||
this.handCheckAbno=res.data.handCheckAbno;
|
||
this.faceCheckNum=res.data.faceCheckNum;
|
||
this.faceCheckAbno=res.data.faceCheckAbno;
|
||
this.healthNum=res.data.healthNum;
|
||
this.healthAbno=res.data.healthAbno;
|
||
|
||
this.initChartOne();
|
||
this.initChartTwo();
|
||
this.initChartThree();
|
||
this.initChartFour();
|
||
});
|
||
getAIRewordInfoApi(this.dataForm).then(res => {
|
||
this.inspectionRecord=res.data;
|
||
});
|
||
getCookCertificateInfoApi(this.dataForm).then(res => {
|
||
console.log("cookCertificate",res);
|
||
this.cookCertificate=res.data;
|
||
});
|
||
getCertificatePicInfoApi(this.dataForm).then(res => {
|
||
this.certificatePic[0]=res.data.picUrl;
|
||
});
|
||
},
|
||
getUserFlage(){
|
||
if(this.settimenum>60){
|
||
this.settimenum=0;
|
||
//重新获取token,每十分钟
|
||
this.reloadUser();
|
||
}
|
||
},
|
||
reloadUser(){
|
||
this.loginForm.loginMethod =Cookies.get('loginMethodd');
|
||
this.loginForm.username = Cookies.get('usernamed');
|
||
this.loginForm.password = Cookies.get('passwordd');
|
||
this.$store.dispatch('Login', this.loginForm)
|
||
.then(res => {
|
||
this.loading = false
|
||
// this.$router.push({ path:'/view' });
|
||
// setTimeout(()=>{
|
||
// location.reload();
|
||
// },1000)
|
||
})
|
||
},
|
||
goTarget(href) {
|
||
window.open(href, "_blank");
|
||
},
|
||
initChartOne() {
|
||
if(this.morningCheckNum==0){
|
||
this.morningCheckPerc=0;
|
||
}else{
|
||
this.morningCheckPerc=(this.morningCheckNum-this.morningCheckAbno)/(this.morningCheckNum)*100;
|
||
}
|
||
// 基于准备好的dom，初始化echarts实例
|
||
this.chartOne = echarts.init(this.$refs.chartone);
|
||
// 绘制图表
|
||
this.chartOne.setOption({
|
||
title: {
|
||
text:this.morningCheckPerc.toFixed(2) +'%',
|
||
subtext: '合格率',
|
||
x: 'center',
|
||
y: 'center',
|
||
subtextStyle: {
|
||
fontSize: 15,
|
||
color: '#fff'
|
||
},
|
||
textStyle: {
|
||
fontWeight: 'normal',
|
||
color: '#0580f2',
|
||
fontSize: '15'
|
||
}
|
||
},
|
||
color: ['rgba(176, 212, 251, 1)'],
|
||
legend: {
|
||
show: false,
|
||
itemGap: 12,
|
||
data: ['01', '02']
|
||
},
|
||
series: [{
|
||
name: 'Line 1',
|
||
type: 'pie',
|
||
clockWise: true,
|
||
radius: ['50%', '66%'],
|
||
itemStyle: {
|
||
normal: {
|
||
label: {
|
||
show: false
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
}
|
||
}
|
||
},
|
||
hoverAnimation: false,
|
||
data: [{
|
||
value: this.morningCheckNum-this.morningCheckAbno,
|
||
name: '01',
|
||
itemStyle: {
|
||
normal: {
|
||
color: { // 完成的圆环的颜色
|
||
colorStops: [{
|
||
offset: 0,
|
||
color: '#00cefc' // 0% 处的颜色
|
||
}, {
|
||
offset: 1,
|
||
color: '#367bec' // 100% 处的颜色
|
||
}]
|
||
},
|
||
label: {
|
||
show: false
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
}
|
||
}
|
||
}
|
||
}, {
|
||
name: '02',
|
||
value: this.morningCheckAbno
|
||
}]
|
||
}]
|
||
});
|
||
},
|
||
initChartTwo() {
|
||
if(this.handCheckNum==0){
|
||
this.handCheckPerc=0;
|
||
}else{
|
||
this.handCheckPerc=(this.handCheckNum-this.handCheckAbno)/(this.handCheckNum)*100;
|
||
}
|
||
// 基于准备好的dom，初始化echarts实例
|
||
this.chartTwo = echarts.init(this.$refs.charttwo);
|
||
// 绘制图表
|
||
this.chartTwo.setOption({
|
||
title: {
|
||
text:this.handCheckPerc.toFixed(2) +'%',
|
||
subtext: '合格率',
|
||
x: 'center',
|
||
y: 'center',
|
||
subtextStyle: {
|
||
fontSize: 15,
|
||
color: '#fff'
|
||
},
|
||
textStyle: {
|
||
fontWeight: 'normal',
|
||
color: '#0580f2',
|
||
fontSize: '15'
|
||
}
|
||
},
|
||
color: ['rgba(176, 212, 251, 1)'],
|
||
legend: {
|
||
show: false,
|
||
itemGap: 12,
|
||
data: ['01', '02']
|
||
},
|
||
series: [{
|
||
name: 'Line 1',
|
||
type: 'pie',
|
||
clockWise: true,
|
||
radius: ['50%', '66%'],
|
||
itemStyle: {
|
||
normal: {
|
||
label: {
|
||
show: false
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
}
|
||
}
|
||
},
|
||
hoverAnimation: false,
|
||
data: [{
|
||
value: this.handCheckNum-this.handCheckAbno,
|
||
name: '01',
|
||
itemStyle: {
|
||
normal: {
|
||
color: { // 完成的圆环的颜色
|
||
colorStops: [{
|
||
offset: 0,
|
||
color: '#00cefc' // 0% 处的颜色
|
||
}, {
|
||
offset: 1,
|
||
color: '#367bec' // 100% 处的颜色
|
||
}]
|
||
},
|
||
label: {
|
||
show: false
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
}
|
||
}
|
||
}
|
||
}, {
|
||
name: '02',
|
||
value: this.handCheckAbno
|
||
}]
|
||
}]
|
||
});
|
||
},
|
||
initChartThree() {
|
||
if(this.faceCheckNum==0){
|
||
this.faceCheckPerc=0;
|
||
}else{
|
||
this.faceCheckPerc=(this.faceCheckNum-this.faceCheckAbno)/(this.faceCheckNum)*100;
|
||
}
|
||
// 基于准备好的dom，初始化echarts实例
|
||
this.chartThree = echarts.init(this.$refs.chartthree);
|
||
// 绘制图表
|
||
this.chartThree.setOption({
|
||
title: {
|
||
text:this.faceCheckPerc.toFixed(2) +'%',
|
||
subtext: '合格率',
|
||
x: 'center',
|
||
y: 'center',
|
||
subtextStyle: {
|
||
fontSize: 15,
|
||
color: '#fff'
|
||
},
|
||
textStyle: {
|
||
fontWeight: 'normal',
|
||
color: '#0580f2',
|
||
fontSize: '15'
|
||
}
|
||
},
|
||
color: ['rgba(176, 212, 251, 1)'],
|
||
legend: {
|
||
show: false,
|
||
itemGap: 12,
|
||
data: ['01', '02']
|
||
},
|
||
series: [{
|
||
name: 'Line 1',
|
||
type: 'pie',
|
||
clockWise: true,
|
||
radius: ['50%', '66%'],
|
||
itemStyle: {
|
||
normal: {
|
||
label: {
|
||
show: false
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
}
|
||
}
|
||
},
|
||
hoverAnimation: false,
|
||
data: [{
|
||
value: this.faceCheckNum-this.faceCheckAbno,
|
||
name: '01',
|
||
itemStyle: {
|
||
normal: {
|
||
color: { // 完成的圆环的颜色
|
||
colorStops: [{
|
||
offset: 0,
|
||
color: '#00cefc' // 0% 处的颜色
|
||
}, {
|
||
offset: 1,
|
||
color: '#367bec' // 100% 处的颜色
|
||
}]
|
||
},
|
||
label: {
|
||
show: false
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
}
|
||
}
|
||
}
|
||
}, {
|
||
name: '02',
|
||
value: this.faceCheckAbno
|
||
}]
|
||
}]
|
||
});
|
||
},
|
||
initChartFour() {
|
||
if(this.healthNum==0){
|
||
this.healthPerc=0;
|
||
}else{
|
||
this.healthPerc=((this.healthNum)-(this.healthAbno))/(this.healthNum)*100;
|
||
}
|
||
// 基于准备好的dom，初始化echarts实例
|
||
this.chartFour = echarts.init(this.$refs.chartfour);
|
||
// 绘制图表
|
||
this.chartFour.setOption({
|
||
title: {
|
||
text:this.healthPerc.toFixed(2) +'%',
|
||
subtext: '合格率',
|
||
x: 'center',
|
||
y: 'center',
|
||
subtextStyle: {
|
||
fontSize: 15,
|
||
color: '#fff'
|
||
},
|
||
textStyle: {
|
||
fontWeight: 'normal',
|
||
color: '#0580f2',
|
||
fontSize: '15'
|
||
}
|
||
},
|
||
color: ['rgba(176, 212, 251, 1)'],
|
||
legend: {
|
||
show: false,
|
||
itemGap: 12,
|
||
data: ['01', '02']
|
||
},
|
||
series: [{
|
||
name: 'Line 1',
|
||
type: 'pie',
|
||
clockWise: true,
|
||
radius: ['50%', '66%'],
|
||
itemStyle: {
|
||
normal: {
|
||
label: {
|
||
show: false
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
}
|
||
}
|
||
},
|
||
hoverAnimation: false,
|
||
data: [{
|
||
value: this.healthNum-this.healthAbno,
|
||
name: '01',
|
||
itemStyle: {
|
||
normal: {
|
||
color: { // 完成的圆环的颜色
|
||
colorStops: [{
|
||
offset: 0,
|
||
color: '#00cefc' // 0% 处的颜色
|
||
}, {
|
||
offset: 1,
|
||
color: '#367bec' // 100% 处的颜色
|
||
}]
|
||
},
|
||
label: {
|
||
show: false
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
}
|
||
}
|
||
}
|
||
}, {
|
||
name: '02',
|
||
value: this.healthAbno
|
||
}]
|
||
}]
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.container {
|
||
height: 100%;
|
||
width: 100%;
|
||
background-image: url("../assets/images/background.jpg");
|
||
background-size: cover; /* 覆盖整个div */
|
||
background-position: center; /* 图片居中 */
|
||
overflow-y: auto; /* 仅垂直滚动 */
|
||
display: flex;
|
||
width: 100%;
|
||
justify-content: center; /* 水平居中 */
|
||
flex-wrap: wrap;
|
||
}
|
||
.topdiv{
|
||
width: 96%;
|
||
margin: 0 auto;
|
||
background-image: url("../assets/images/canteen1.png");
|
||
background-size: 100% 100%; /* 覆盖整个div */
|
||
background-position: center; /* 图片居中 */
|
||
height: 180px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding-top: 3%;
|
||
margin-bottom: 2%;
|
||
}
|
||
.titlediv{
|
||
display: flex;
|
||
width: 40%;
|
||
justify-content: center; /* 水平居中 */
|
||
font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
|
||
font-weight: 600;
|
||
font-size: 32px;
|
||
color: #E1EFFF;
|
||
}
|
||
.dateTimeClass{
|
||
display: flex;
|
||
// justify-content: center; /* 水平居中 */
|
||
color:#fff;
|
||
width:30%;
|
||
font-size: 26px;
|
||
}
|
||
.hourTimeClass{
|
||
display: flex;
|
||
justify-content: flex-end; /* 水平居中 */
|
||
color:#fff;
|
||
width:30%;
|
||
font-size: 26px;
|
||
}
|
||
.titlediv2{
|
||
display: flex;
|
||
width: 100%;
|
||
justify-content: center; /* 水平居中 */
|
||
align-items: flex-start; /* 垂直靠上 */
|
||
color:#fff;
|
||
font-size: 28px;
|
||
background-image: url("../assets/images/caidanline.png");
|
||
background-size: cover; /* 覆盖整个div */
|
||
background-position:bottom; /* 图片居中 */
|
||
}
|
||
.contentclass{
|
||
display: flex;
|
||
width: 100%;
|
||
justify-content: center; /* 水平居中 */
|
||
flex-wrap: wrap;
|
||
color:#fff;
|
||
margin-bottom: 2%;
|
||
}
|
||
.fegexian{
|
||
width: 49%;
|
||
height: 5px;
|
||
background-image: url("../assets/images/caidanline.png");
|
||
background-size: cover; /* 覆盖整个div */
|
||
background-position: center; /* 图片居中 */
|
||
}
|
||
.fegexian2{
|
||
width: 40%;
|
||
height: 5px;
|
||
background-image: url("../assets/images/caidanline.png");
|
||
background-size: cover; /* 覆盖整个div */
|
||
background-position: center; /* 图片居中 */
|
||
}
|
||
.dishclass{
|
||
font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
|
||
font-weight: normal;
|
||
font-size: 24px;
|
||
color: #D8E2FF;
|
||
text-align: left;
|
||
font-style: normal;
|
||
text-transform: none;
|
||
}
|
||
.dishclass span{
|
||
background-image: linear-gradient(0deg, rgba(111,169,255,0.5) 30%, #6FA9FF 86%);
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
color: transparent; /* 或者使用 text-fill-color: transparent; */
|
||
}
|
||
.dishcontentclass{
|
||
display: flex;
|
||
align-items: flex-end;
|
||
flex-wrap: wrap;
|
||
margin-top: 1%;
|
||
font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
|
||
font-weight: normal;
|
||
font-size: 22px;
|
||
color: #D8E2FF;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
.dishcontentrefclass{
|
||
margin-left: 5%;
|
||
margin-top: 3%;
|
||
}
|
||
.partthree{
|
||
height: auto;
|
||
width: 96%;
|
||
margin: 1% auto;
|
||
margin-bottom: 2%;
|
||
}
|
||
.partthree_title{
|
||
display: flex;
|
||
color:#fff;
|
||
font-size: 25px;
|
||
justify-content: center; /* 水平居中 */
|
||
}
|
||
.partthree_title2{
|
||
display: flex;
|
||
height: 30px;
|
||
width: 100%;
|
||
margin-top: 1%;
|
||
justify-content: center; /* 水平居中 */
|
||
}
|
||
.container2 {
|
||
height: auto;
|
||
width: 50%;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: center; /* 水平居中 */
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
|
||
|
||
table, th, td {
|
||
// border: 1px solid #fff;
|
||
// border-collapse: collapse; /* 可选，用于合并相邻单元格的边框 */
|
||
text-align: center;
|
||
}
|
||
.big-number {
|
||
font-size: 30px;
|
||
font-family: 'Arial', sans-serif;
|
||
color: #fff;
|
||
padding: 5px;
|
||
border-radius: 10px;
|
||
display: inline-flex;
|
||
}
|
||
.digit {
|
||
margin: 0 5px;
|
||
text-shadow: 0 0 10px rgba(255,255,255,0.5);
|
||
}
|
||
</style>
|
||
|