683 lines
23 KiB
Vue
683 lines
23 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 style="height: auto;width: 100%;margin-bottom: 40px;">
|
||
<div class="partthree_title"><span>健康晨检</span></div>
|
||
<div class="partthree_title2"><div class="fegexian2" style="margin-top: 2px;"></div></div>
|
||
<div class="contentclass">
|
||
<table style="width: 100%;height: 100%;">
|
||
<tr>
|
||
<td>晨检</td>
|
||
<td>健康证</td>
|
||
</tr>
|
||
<tr style="height: 100%;width: 100%;">
|
||
<!-- 图表容器：统一设置固定宽高+100%填充，避免尺寸偏差 -->
|
||
<td rowspan="5" style="width: 50%;">
|
||
<div style="width: 100%;height: 240px;display: flex;align-items: center;justify-content: center;">
|
||
<div ref="chartone" style="width: 90%;height: 90%;"></div>
|
||
</div>
|
||
</td>
|
||
<td rowspan="5" style="width: 50%;">
|
||
<div style="width: 100%;height: 240px;display: flex;align-items: center;justify-content: center;">
|
||
<div ref="chartfour" style="width: 90%;height: 90%;"></div>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
<tr></tr>
|
||
<tr></tr>
|
||
<tr></tr>
|
||
<tr></tr>
|
||
<tr>
|
||
<td>晨检正常：{{Number(morningCheckNum)-Number(morningCheckAbno)}}人</td>
|
||
<td>正常：{{Number(healthNum)-Number(healthAbno)}}人</td>
|
||
</tr>
|
||
<tr>
|
||
<td>晨检异常：{{morningCheckAbno}}人</td>
|
||
<td>过期：{{healthAbno}}人</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
<div style="height: auto;width: 100%;margin-bottom: 40px;">
|
||
<div class="partthree_title"><span>今日菜品</span></div>
|
||
<div class="partthree_title2"><div class="fegexian2" style="margin-top: 2px;"></div></div>
|
||
<div class="contentclass">
|
||
<div style="width: 80%;border: 1px solid rgba(191,191,255,0.04);margin-top: 10px;">
|
||
<div class="dishclass">
|
||
<img src="../assets/images/Frame1.png"/><span>早餐供应</span><img src="../assets/images/breakfast.png" style="float: right;"/>
|
||
</div>
|
||
<div class="dishcontentclass">
|
||
<template v-if="onedataList.length>0">
|
||
<template v-for="(group, groupIndex) in groupedBreakfastList">
|
||
<div class="dishcontentrefclass" v-for="item in group.dishes" :key="item.id || item.dishesName">
|
||
{{item.dishesName}}
|
||
</div>
|
||
</template>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
<div style="width: 80%;border: 2px solid rgba(191,191,255,0.04);margin-top: 10px;">
|
||
<div class="dishclass">
|
||
<img src="../assets/images/Frame2.png"/><span>午餐供应</span><img src="../assets/images/lunch.png" style="float: right;"/>
|
||
</div>
|
||
<div class="dishcontentclass">
|
||
<template v-if="twodataList.length>0">
|
||
<div v-for="(group, groupIndex) in groupedLunchList" :key="groupIndex" style="width: 100%;display: flex;align-items: baseline;">
|
||
<div class="dishtypeclass" v-if="group.dishes.length>0 && group.typeName" :key="'type-' + groupIndex">
|
||
{{getDisplayTypeName(group.typeName)}}
|
||
</div>
|
||
<div style="width: 80%;display: flex;align-items: center;flex-wrap: wrap;">
|
||
<div class="dishcontentrefclass" style="width: 30%;" v-for="item in group.dishes" :key="item.id || item.dishesName">
|
||
{{item.dishesName}}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
<div style="width: 80%;border: 2px solid rgba(191,191,255,0.04);margin-top: 10px;">
|
||
<div class="dishclass">
|
||
<img src="../assets/images/Frame.png"/><span>晚餐供应</span><img src="../assets/images/dinner.png" style="float: right;"/>
|
||
</div>
|
||
<div class="dishcontentclass">
|
||
<template v-if="fourdataList.length>0">
|
||
<div class="dishcontentrefclass" v-for="item in fourdataList" :key="item.id || item.dishesName">
|
||
{{item.dishesName}}
|
||
</div>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="height: auto;width: 90%;margin: 0 auto;">
|
||
<div class="partthree_title"><span>证件公示(健康证)</span></div>
|
||
<div class="partthree_title2"><div class="fegexian2" style="margin-top: 2px;"></div></div>
|
||
<div style="width: 100%; height:100%; ">
|
||
<carousel :per-page="4" :mouse-drag="true" :autoplay="true" :autoplay-timeout="4000" :loop="true" >
|
||
<slide v-for="(item, index) in staffNums" :key="index">
|
||
<div style="padding: 10px;;width: 240px;overflow: hidden;">
|
||
<img style="width: 240px; object-fit: cover;" :src="item.healthCertFrontImg"/>
|
||
</div>
|
||
</slide>
|
||
</carousel>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import Vue from 'vue'
|
||
import VueCarousel from 'vue-carousel';
|
||
Vue.use(VueCarousel);
|
||
import axios from 'axios';
|
||
import Cookies from 'js-cookie';
|
||
import { getCurrentRecipeListApi,getCertificateListApi,getMorningCheckInfoApi } from "@/api/view";
|
||
import * as echarts from 'echarts';
|
||
|
||
export default {
|
||
name: "Index",
|
||
data() {
|
||
return {
|
||
version: "24.7.1",
|
||
mealNum:0,
|
||
dateTime:'',
|
||
hourTime:'',
|
||
countTime:0,
|
||
sysTime:0,
|
||
timer:null,
|
||
timer2:null,
|
||
morningCheckNum:0, //晨检数
|
||
morningCheckPerc:0,//晨检比
|
||
morningCheckAbno:0,//晨检异常数
|
||
|
||
healthNum:0, //健康证数
|
||
healthPerc:0,//健康证比
|
||
healthAbno:0,//健康证异常数
|
||
|
||
onedataList:[{"dishesName":"无菜单","salePrice":""}],
|
||
twodataList:[{"dishesName":"无菜单","salePrice":""}],
|
||
threedataList:[{"dishesName":"无菜单","salePrice":""}],
|
||
fourdataList:[{"dishesName":"无菜单","salePrice":""}],
|
||
fivedataList:[{"dishesName":"无菜单","salePrice":""}],
|
||
staffNums:[],
|
||
dataForm:{type:1},
|
||
angle:0,
|
||
queryParams: {
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
key:"2",
|
||
applyDate:"",
|
||
areaId:null,
|
||
canteenId:null,
|
||
stallId:null,
|
||
recipeName:"",
|
||
},
|
||
// 存储图表实例，用于销毁和resize
|
||
chartOne: null,
|
||
chartFour: null
|
||
};
|
||
},
|
||
created() {
|
||
},
|
||
mounted() {
|
||
this.handleLogin()
|
||
window.addEventListener('popstate', this.handlePopState);
|
||
this.getMorningCheck()
|
||
this.timer = setInterval(() => {
|
||
this.initData();
|
||
}, 600000);
|
||
this.timer2 = setInterval(this.getCurrentTime, 1000);
|
||
setTimeout(()=>{
|
||
this.initData();
|
||
},1500)
|
||
|
||
// ------------ 1. 禁止左右滑动：添加事件监听 ------------
|
||
document.addEventListener('touchstart', this.handleTouchStart);
|
||
document.addEventListener('touchmove', this.handleTouchMove, { passive: false });
|
||
document.addEventListener('wheel', this.handleWheel, { passive: false });
|
||
// 监听窗口resize，确保图表自适应
|
||
window.addEventListener('resize', this.handleWindowResize);
|
||
},
|
||
beforeDestroy() {
|
||
window.removeEventListener('popstate', this.handlePopState);
|
||
clearInterval(this.timer);
|
||
clearInterval(this.timer2);
|
||
|
||
// ------------ 移除滑动事件监听 ------------
|
||
document.removeEventListener('touchstart', this.handleTouchStart);
|
||
document.removeEventListener('touchmove', this.handleTouchMove);
|
||
document.removeEventListener('wheel', this.handleWheel);
|
||
window.removeEventListener('resize', this.handleWindowResize);
|
||
|
||
// 销毁图表实例，避免内存泄漏
|
||
if (this.chartOne) this.chartOne.dispose();
|
||
if (this.chartFour) this.chartFour.dispose();
|
||
},
|
||
computed: {
|
||
groupedBreakfastList() {
|
||
if (!this.onedataList || this.onedataList.length === 0) {
|
||
return [];
|
||
}
|
||
const hasTypeName = this.onedataList.some(item => item.dishesTypeName);
|
||
if (!hasTypeName) {
|
||
return [{ typeName: '', dishes: this.onedataList, isBreakfastMingdang: false }];
|
||
}
|
||
const typeMap = {};
|
||
this.onedataList.forEach(item => {
|
||
const typeName = item.dishesTypeName || '其他';
|
||
if (!typeMap[typeName]) typeMap[typeName] = [];
|
||
typeMap[typeName].push(item);
|
||
});
|
||
const result = [];
|
||
if (typeMap['早餐-明档']) {
|
||
result.push({ typeName: '早餐-明档', dishes: typeMap['早餐-明档'], isBreakfastMingdang: true });
|
||
delete typeMap['早餐-明档'];
|
||
}
|
||
if (typeMap['早餐明档']) {
|
||
result.push({ typeName: '早餐明档', dishes: typeMap['早餐明档'], isBreakfastMingdang: true });
|
||
delete typeMap['早餐明档'];
|
||
}
|
||
Object.keys(typeMap).forEach(typeName => {
|
||
if (typeMap[typeName].length > 0) {
|
||
result.push({ typeName, dishes: typeMap[typeName], isBreakfastMingdang: false });
|
||
}
|
||
});
|
||
return result;
|
||
},
|
||
groupedLunchList() {
|
||
if (!this.twodataList || this.twodataList.length === 0) return [];
|
||
const hasTypeName = this.twodataList.some(item => item.dishesTypeName);
|
||
if (!hasTypeName) return [{ typeName: '', dishes: this.twodataList }];
|
||
const typeMap = {};
|
||
this.twodataList.forEach(item => {
|
||
const typeName = item.dishesTypeName || '其他';
|
||
if (!typeMap[typeName]) typeMap[typeName] = [];
|
||
typeMap[typeName].push(item);
|
||
});
|
||
const lunchOrder = ['午餐-荤菜', '午餐-炒菜', '午餐-素菜', '午餐-汤类', '午餐-五谷杂粮', '荤菜', '炒菜', '素菜', '汤类', '五谷杂粮','杂粮'];
|
||
const result = [];
|
||
lunchOrder.forEach(typeName => {
|
||
if (typeMap[typeName]?.length > 0) {
|
||
result.push({ typeName, dishes: typeMap[typeName] });
|
||
delete typeMap[typeName];
|
||
}
|
||
});
|
||
Object.keys(typeMap).forEach(typeName => {
|
||
if (typeMap[typeName].length > 0) result.push({ typeName, dishes: typeMap[typeName] });
|
||
});
|
||
return result;
|
||
},
|
||
groupedAfternoonTeaList() {
|
||
if (!this.threedataList || this.threedataList.length === 0) return [];
|
||
const hasTypeName = this.threedataList.some(item => item.dishesTypeName);
|
||
if (!hasTypeName) return [{ typeName: '', dishes: this.threedataList }];
|
||
const typeMap = {};
|
||
this.threedataList.forEach(item => {
|
||
const typeName = item.dishesTypeName || '其他';
|
||
if (!typeMap[typeName]) typeMap[typeName] = [];
|
||
typeMap[typeName].push(item);
|
||
});
|
||
return Object.keys(typeMap).map(typeName => ({ typeName, dishes: typeMap[typeName] }));
|
||
},
|
||
groupedDinnerList() {
|
||
if (!this.fourdataList || this.fourdataList.length === 0) return [];
|
||
const hasTypeName = this.fourdataList.some(item => item.dishesTypeName);
|
||
if (!hasTypeName) return [{ typeName: '', dishes: this.fourdataList }];
|
||
const typeMap = {};
|
||
this.fourdataList.forEach(item => {
|
||
const typeName = item.dishesTypeName || '其他';
|
||
if (!typeMap[typeName]) typeMap[typeName] = [];
|
||
typeMap[typeName].push(item);
|
||
});
|
||
return Object.keys(typeMap).map(typeName => ({ typeName, dishes: typeMap[typeName] }));
|
||
},
|
||
groupedNightSnackList() {
|
||
if (!this.fivedataList || this.fivedataList.length === 0) return [];
|
||
const hasTypeName = this.fivedataList.some(item => item.dishesTypeName);
|
||
if (!hasTypeName) return [{ typeName: '', dishes: this.fivedataList }];
|
||
const typeMap = {};
|
||
this.fivedataList.forEach(item => {
|
||
const typeName = item.dishesTypeName || '其他';
|
||
if (!typeMap[typeName]) typeMap[typeName] = [];
|
||
typeMap[typeName].push(item);
|
||
});
|
||
return Object.keys(typeMap).map(typeName => ({ typeName, dishes: typeMap[typeName] }));
|
||
}
|
||
},
|
||
methods: {
|
||
// ------------ 2. 禁止左右滑动相关方法 ------------
|
||
handlePopState(event) {
|
||
event.preventDefault();
|
||
},
|
||
// 记录触摸起始位置
|
||
handleTouchStart(e) {
|
||
this.touchStartX = e.touches[0].clientX;
|
||
this.touchStartY = e.touches[0].clientY;
|
||
},
|
||
// 阻止横向滑动
|
||
handleTouchMove(e) {
|
||
if (!this.touchStartX || !this.touchStartY) return;
|
||
const diffX = e.touches[0].clientX - this.touchStartX;
|
||
const diffY = e.touches[0].clientY - this.touchStartY;
|
||
// 横向滑动距离大于纵向，阻止默认行为（避免浏览器前进/后退）
|
||
if (Math.abs(diffX) > Math.abs(diffY)) {
|
||
e.preventDefault();
|
||
}
|
||
},
|
||
// 阻止横向滚轮
|
||
handleWheel(e) {
|
||
if (e.deltaX !== 0) {
|
||
e.preventDefault();
|
||
}
|
||
},
|
||
// 窗口resize时，图表自适应
|
||
handleWindowResize() {
|
||
if (this.chartOne) this.chartOne.resize();
|
||
if (this.chartFour) this.chartFour.resize();
|
||
},
|
||
|
||
// 原有业务方法
|
||
handleLogin(){
|
||
let param = {
|
||
code: "",
|
||
loginType: "PHONE_PASSWORD",
|
||
password: "e07e2a30f7431f4aa173e8ba4e97fedc",
|
||
phoneUuid: "",
|
||
username: "60064de642247faee1559140f80c7246",
|
||
uuid: "",
|
||
verificationCode: ""
|
||
}
|
||
this.$store.dispatch('Login',param).then(res => {}).catch(() => {})
|
||
},
|
||
refrespage(){
|
||
this.$router.go(0);
|
||
return;
|
||
},
|
||
getMorningCheck(){
|
||
getMorningCheckInfoApi({type:1}).then(res => {
|
||
this.morningCheckNum=res.data.morningCheckNum;
|
||
this.morningCheckAbno=res.data.morningCheckAbno;
|
||
this.healthNum=res.data.healthNum;
|
||
this.healthAbno=res.data.healthAbno;
|
||
this.sysTime=Number(res.data.thisTime)
|
||
// 确保DOM渲染完成后初始化图表
|
||
this.$nextTick(() => {
|
||
this.initChartOne();
|
||
this.initChartFour();
|
||
});
|
||
});
|
||
},
|
||
getCurrentTime() {
|
||
this.countTime = this.countTime+1000;
|
||
var nowTime = this.countTime+this.sysTime
|
||
const now = new Date(nowTime);
|
||
const year = now.getFullYear();
|
||
const month = String(now.getMonth() + 1).padStart(2, '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.queryParams.applyDate=this.dateTime;
|
||
getCurrentRecipeListApi(this.queryParams).then(response => {
|
||
if(response.rows!=null&&response.rows.length>0){
|
||
const datas= response.rows[0].detail.detailList;
|
||
if(datas!=null&&datas.length>0){
|
||
datas.map((item,index)=>{
|
||
if("1"==item.mealtimeType){
|
||
if(item.dishesList!=null&&item.dishesList.length>0){
|
||
this.onedataList=item.dishesList;
|
||
}
|
||
}else if("2"==item.mealtimeType){
|
||
if(item.dishesList!=null&&item.dishesList.length>0){
|
||
this.twodataList=item.dishesList;
|
||
}
|
||
}else if("3"==item.mealtimeType){
|
||
if(item.dishesList!=null&&item.dishesList.length>0){
|
||
this.threedataList=item.dishesList;
|
||
}
|
||
}else if("4"==item.mealtimeType){
|
||
if(item.dishesList!=null&&item.dishesList.length>0){
|
||
this.fourdataList=item.dishesList;
|
||
}
|
||
}else if(""==item.mealtimeType){
|
||
if(item.dishesList!=null&&item.dishesList.length>0){
|
||
this.fivedataList=item.dishesList;
|
||
}
|
||
}
|
||
})
|
||
}
|
||
}
|
||
});
|
||
this.queryParams.pageNum=1;
|
||
this.queryParams.pageSize=20;
|
||
getCertificateListApi(this.queryParams).then(res => {
|
||
this.staffNums=res.rows;
|
||
});
|
||
},
|
||
goTarget(href) {
|
||
window.open(href, "_blank");
|
||
},
|
||
// ------------ 3. 图表初始化（统一配置，确保大小一致） ------------
|
||
initChartOne() {
|
||
this.morningCheckPerc = this.morningCheckNum == 0 ? 0 : ((this.morningCheckNum - this.morningCheckAbno) / this.morningCheckNum * 100).toFixed(2);
|
||
// 确保容器存在再初始化
|
||
if (!this.$refs.chartone) return;
|
||
this.chartOne = echarts.init(this.$refs.chartone);
|
||
// 统一图表配置
|
||
const option = {
|
||
title: {
|
||
text: `${this.morningCheckPerc}%`,
|
||
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 },
|
||
series: [{
|
||
name: 'Line 1',
|
||
type: 'pie',
|
||
clockWise: true,
|
||
radius: ['76%', '96%'], // 统一环形大小
|
||
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' }, { offset: 1, color: '#367bec' }]
|
||
}
|
||
}
|
||
}
|
||
},
|
||
{ name: '02', value: this.morningCheckAbno }
|
||
]
|
||
}]
|
||
};
|
||
this.chartOne.setOption(option);
|
||
},
|
||
initChartFour() {
|
||
this.healthPerc = this.healthNum == 0 ? 0 : ((this.healthNum - this.healthAbno) / this.healthNum * 100).toFixed(2);
|
||
if (!this.$refs.chartfour) return;
|
||
this.chartFour = echarts.init(this.$refs.chartfour);
|
||
// 完全复用左边图表的配置，仅修改数据
|
||
const option = {
|
||
title: {
|
||
text: `${this.healthPerc}%`,
|
||
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 },
|
||
series: [{
|
||
name: 'Line 1',
|
||
type: 'pie',
|
||
clockWise: true,
|
||
radius: ['76%', '96%'], // 与左边图表统一
|
||
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' }, { offset: 1, color: '#367bec' }]
|
||
}
|
||
}
|
||
}
|
||
},
|
||
{ name: '02', value: this.healthAbno }
|
||
]
|
||
}]
|
||
};
|
||
this.chartFour.setOption(option);
|
||
},
|
||
closeView(){
|
||
Cookies.remove('password')
|
||
this.$router.push({ path:'/login' });
|
||
},
|
||
getDisplayTypeName(typeName) {
|
||
if (!typeName) return '';
|
||
return typeName.replace(/^(早餐-|午餐-|下午茶-|晚餐-|夜宵-)/, '');
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
/* ------------ 4. 禁止横向滚动样式 ------------ */
|
||
html, body, #app, .container {
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow-x: hidden !important; /* 关键：禁止横向滚动 */
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.container {
|
||
height: 100%;
|
||
width: 100%;
|
||
background-image: url("../assets/images/background.jpg");
|
||
background-size: cover;
|
||
background-position: center;
|
||
overflow-y: hidden; /* 保留垂直滚动（如果内容超出屏幕） */
|
||
// display: flex;
|
||
// justify-content: center;
|
||
// flex-wrap: wrap;
|
||
}
|
||
.topdiv{
|
||
width: 100%;
|
||
display: flex;
|
||
background-image: url("../assets/images/canteen1.png");
|
||
background-size: cover;
|
||
background-position: center;
|
||
height: 5%;
|
||
margin-bottom: 20px;
|
||
}
|
||
.titlediv{
|
||
display: flex;
|
||
width: 40%;
|
||
justify-content: center;
|
||
font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
|
||
font-weight: normal;
|
||
font-size: 34px;
|
||
color: #E1EFFF;
|
||
}
|
||
.dateTimeClass{
|
||
display: flex;
|
||
justify-content: center;
|
||
color:#fff;
|
||
width:30%;
|
||
align-items: center;
|
||
}
|
||
.hourTimeClass{
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color:#fff;
|
||
width:30%;
|
||
}
|
||
.titlediv2{
|
||
display: flex;
|
||
width: 100%;
|
||
// height: 10px;
|
||
justify-content: center;
|
||
align-items: flex-start;
|
||
color:#fff;
|
||
font-size: 28px;
|
||
// background-image: url("../assets/images/caidanline.png");
|
||
// background-size: cover;
|
||
// background-position:bottom;
|
||
}
|
||
.contentclass{
|
||
display: flex;
|
||
width: 100%;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
color:#fff;
|
||
}
|
||
.fegexian{
|
||
width: 50%;
|
||
height: 5px;
|
||
// background-image: url("../assets/images/caidanline.png");
|
||
// background-size: cover;
|
||
// background-position: center;
|
||
}
|
||
.fegexian2{
|
||
width: 50%;
|
||
height: 5px;
|
||
background-image: url("../assets/images/caidanline.png");
|
||
background-size: cover;
|
||
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;
|
||
display: flex;
|
||
align-items: center;
|
||
margin: 1%;
|
||
}
|
||
.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;
|
||
}
|
||
.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;
|
||
padding-bottom: 1%;
|
||
}
|
||
.dishcontentrefclass{
|
||
width: 22%;
|
||
margin-left: 2%;
|
||
margin-right: 1%;
|
||
margin-bottom: 10px;
|
||
}
|
||
.dishtypeclass{
|
||
width: 20%;
|
||
margin-left: 2%;
|
||
margin-bottom: 1%;
|
||
font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
|
||
font-weight: bold;
|
||
font-size: 24px;
|
||
color: #6FA9FF;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
.partthree{
|
||
height: 100%;
|
||
width: 85%;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
}
|
||
.partthree_title{
|
||
display: flex;
|
||
color:#fff;
|
||
font-size: 25px;
|
||
justify-content: center;
|
||
margin-bottom: 5px;
|
||
}
|
||
.partthree_title2{
|
||
display: flex;
|
||
height: 20px;
|
||
width: 100%;
|
||
justify-content: 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);
|
||
}
|
||
table, th, td {
|
||
text-align: center;
|
||
}
|
||
</style>
|