补餐屏
This commit is contained in:
17792275749
+5
-1
@@ -2,7 +2,11 @@ module.exports = {
|
||||
plugins: [
|
||||
require('postcss-pxtorem')({
|
||||
rootValue:({ file }) => {
|
||||
if (file.includes('userRanking') || file.includes('dietaryNutritionTips') || file.includes('restaurantAndCafeteriaCombined')) {
|
||||
if (
|
||||
file.includes('userRanking') ||
|
||||
file.includes('dietaryNutritionTips') ||
|
||||
file.includes('restaurantAndCafeteriaCombined')
|
||||
) {
|
||||
return 108;
|
||||
} else {
|
||||
return 192;
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 659 B |
Binary file not shown.
|
After Width: | Height: | Size: 596 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 584 B |
@@ -173,14 +173,10 @@ const routes = [
|
||||
];
|
||||
|
||||
const router = new VueRouter({
|
||||
// mode: 'history',
|
||||
base: process.env.BASE_URL,
|
||||
routes
|
||||
});
|
||||
|
||||
// http://192.168.1.210/gateway/local/zhstapi/zhst/tv/rankingList?number=9
|
||||
// http://vip.shuziweidao.com/shuwei-zhct/swLargeScreenFood/rankingList?type=1
|
||||
|
||||
router.beforeEach((to, from, next) => {
|
||||
if (to.meta && to.meta.rootValue) {
|
||||
window.POSTCSS_PXTOREM_ROOT_VALUE = to.meta.rootValue;
|
||||
|
||||
@@ -1,163 +1,215 @@
|
||||
<template>
|
||||
<div id="mealSurplusInformation">
|
||||
<div class="title">
|
||||
<div>{{ restName }}</div>
|
||||
<div>餐品余量信息</div>
|
||||
<div>{{ times }} | {{ dinnerType }}</div>
|
||||
<div class="header">
|
||||
<div class="times">{{ times }}</div>
|
||||
<div class="title">餐厅后厨智能看板</div>
|
||||
<div class="meal">当前餐次：{{ dinnerType }} {{ mealTime }}</div>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<template v-for="(item, index) in list">
|
||||
<div :class="['list', 'warning' + item.warningStatus]" @click="clickFood">
|
||||
<div class="index">{{ index < 9 ? '0' + (index + 1) : (index + 1)}}</div>
|
||||
<template v-if="item.warningStatus === 2">
|
||||
<div class="none">
|
||||
<div class="name">{{ item.foodName }} <template v-if="selectedIndex === index">选中</template></div>
|
||||
<div class="accumulate">累计出餐 {{ item.initial }} kg</div>
|
||||
<div class="content_l">
|
||||
<template v-for="item in nutritionFoodList">
|
||||
<div :class="['content_l_list', item.class]">
|
||||
<div class="content_l_list_name">
|
||||
<div></div>
|
||||
<div>{{ item.foodName }}</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="info">
|
||||
<div class="info_">
|
||||
<div class="info_l">
|
||||
<template v-if="item.relativeUrl">
|
||||
<img :src="item.relativeUrl" />
|
||||
</template>
|
||||
</div>
|
||||
<div class="info_r">
|
||||
<div class="name">{{ item.foodName }} <template v-if="selectedIndex === index">选中</template></div>
|
||||
<div class="accumulate">累计出餐 {{ item.initial }} kg</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content_l_list_margin">
|
||||
当前余量
|
||||
<countTo
|
||||
:endVal="item.marginWeight_kg"
|
||||
separator=""
|
||||
:decimals="3"
|
||||
:duration="300"
|
||||
/>
|
||||
kg
|
||||
</div>
|
||||
<div class="remaining">
|
||||
<div class="remaining_">
|
||||
<template v-if="item.warningStatus === 0">当前余量 <span>{{ item.surplus }}</span> kg</template>
|
||||
<template v-if="item.warningStatus === 1">余量预警 <span>{{ item.surplus }}</span> kg 请备餐</template>
|
||||
</div>
|
||||
<div class="content_l_list_status">
|
||||
<template v-if="item.class === 'normal'">
|
||||
<div class="content_l_list_status_icon"></div>
|
||||
<div class="content_l_list_status_text">累计出餐</div>
|
||||
</template>
|
||||
<template v-if="item.class === 'warning'">
|
||||
<div class="content_l_list_status_icon"></div>
|
||||
<div class="content_l_list_status_text">餐品制作中</div>
|
||||
</template>
|
||||
<template v-if="item.class === 'danger'">
|
||||
<div class="content_l_list_status_icon"></div>
|
||||
<div class="content_l_list_status_text">低于阈值，请补餐</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
<div class="content_l_list_progress">
|
||||
<div :style="{'width': item.progress}"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- <div class="content_l_list warning">-->
|
||||
<!-- <div class="content_l_list_name">-->
|
||||
<!-- <div></div>-->
|
||||
<!-- <div>重庆歌乐山辣子鸡</div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="content_l_list_margin">当前余量 <span>1.84</span> kg</div>-->
|
||||
<!-- <div class="content_l_list_status">-->
|
||||
<!-- <div class="content_l_list_status_icon"></div>-->
|
||||
<!-- <div class="content_l_list_status_text">餐品制作中</div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="content_l_list_progress">-->
|
||||
<!-- <div></div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="content_l_list danger">-->
|
||||
<!-- <div class="content_l_list_name">-->
|
||||
<!-- <div></div>-->
|
||||
<!-- <div>重庆歌乐山辣子鸡</div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="content_l_list_margin">当前余量 <span>1.84</span> kg</div>-->
|
||||
<!-- <div class="content_l_list_status">-->
|
||||
<!-- <div class="content_l_list_status_icon"></div>-->
|
||||
<!-- <div class="content_l_list_status_text">低于阈值，请补餐</div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="content_l_list_progress">-->
|
||||
<!-- <div></div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="content_l_list normal">-->
|
||||
<!-- <div class="content_l_list_name">-->
|
||||
<!-- <div></div>-->
|
||||
<!-- <div>重庆歌乐山辣子鸡</div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="content_l_list_margin">当前余量 <span>1.84</span> kg</div>-->
|
||||
<!-- <div class="content_l_list_status">-->
|
||||
<!-- <div class="content_l_list_status_text">累计出餐</div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="content_l_list_progress">-->
|
||||
<!-- <div></div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
<div class="content_r">
|
||||
<div class="content_r_title">
|
||||
<div></div>
|
||||
<div>当餐菜品生产计划</div>
|
||||
</div>
|
||||
</template>
|
||||
<div class="content_r_content">
|
||||
<div class="content_r_content_table">
|
||||
<div class="content_r_content_table_head">
|
||||
<div>未制作</div>
|
||||
<div style="color: #F8A45A">{{ recipeFoodNotMadeList.length }}</div>
|
||||
</div>
|
||||
<div class="content_r_content_table_body">
|
||||
<template v-for="item in recipeFoodNotMadeList">
|
||||
<div style="color: #FFFFFF">
|
||||
<div>{{ item }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content_r_content_table">
|
||||
<div class="content_r_content_table_head">
|
||||
<div>已制作</div>
|
||||
<div style="color: #5AF186">{{ recipeFoodProducedList.length }}</div>
|
||||
</div>
|
||||
<div class="content_r_content_table_body">
|
||||
<template v-for="item in recipeFoodProducedList">
|
||||
<div style="color: #869CC5">
|
||||
<div>{{ item.foodName }}</div>
|
||||
<div>{{ item.foodWeight_kg }}kg</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {httpRequest} from "@/XMLHttpRequest";
|
||||
import {getServeUrl} from "@/utils/serveUrl";
|
||||
import {token} from "@/utils/token";
|
||||
import countTo from "vue-count-to";
|
||||
import {getCurrentTime} from "@/utils/times";
|
||||
import {httpRequest} from "@/XMLHttpRequest";
|
||||
|
||||
export default {
|
||||
name: "mealSurplusInformation",
|
||||
components: {
|
||||
countTo
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
timer: null,
|
||||
times: getCurrentTime(),
|
||||
|
||||
restName: "",
|
||||
dinnerType: "",
|
||||
list: [],
|
||||
dinnerType: "", // 餐次
|
||||
mealTime: "", // 餐次的时间
|
||||
|
||||
cols: 5,
|
||||
selectedIndex: null
|
||||
nutritionFoodList: [], // 菜品数据
|
||||
recipeFoodNotMadeList: [], // 食谱菜品未制作
|
||||
recipeFoodProducedList: [], // 食谱菜品已制作
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getTime();
|
||||
this.requestFoodReplenishWarningList();
|
||||
this.getKitchenInfo();
|
||||
},
|
||||
methods: {
|
||||
getTime() {
|
||||
let this_ = this;
|
||||
this_.times = getCurrentTime();
|
||||
setTimeout(function () {
|
||||
this_.getTime();
|
||||
}, 1000)
|
||||
},
|
||||
|
||||
setTimePlay() {
|
||||
let this_ = this;
|
||||
setTimeout(function () {
|
||||
this_.requestFoodReplenishWarningList();
|
||||
}, 10000);
|
||||
},
|
||||
|
||||
requestFoodReplenishWarningList() {
|
||||
let this_ = this;
|
||||
getKitchenInfo() {
|
||||
let params = {};
|
||||
let url = getServeUrl('ctRequest') + '/shuwei-zhct/swLargeScreenFood/foodReplenishWarningList';
|
||||
httpRequest('GET', url, params, {
|
||||
'Authorization': token
|
||||
}).then(function(res) {
|
||||
if (res.success) {
|
||||
this_.restName = res.data.restName;
|
||||
this_.dinnerType = res.data.dinnerType;
|
||||
if(res.data.voList && res.data.voList.length) {
|
||||
res.data.voList.map(item => {
|
||||
item.relativeUrl = item.relativeUrl.replace("https", "http");
|
||||
})
|
||||
httpRequest("GET", "https://dev.yixiong-tech.com:8081/terminal/neglect/large-screen/kitchen/info", params, {
|
||||
"authorization": "57ee87183f2a4fa59683ec9ef41c8f5d"
|
||||
}).then((res) => {
|
||||
this.dinnerType = "";
|
||||
this.mealTime = "";
|
||||
this.nutritionFoodList = [];
|
||||
this.recipeFoodNotMadeList = [];
|
||||
this.recipeFoodProducedList = [];
|
||||
if (res.code === "00000" && res.data) {
|
||||
this.dinnerType = res.data.dinnerType;
|
||||
if (res.data.mealTimeStart && res.data.mealTimeEnd) {
|
||||
this.mealTime = res.data.mealTimeStart + ' - ' + res.data.mealTimeEnd;
|
||||
}
|
||||
if (res.data.nutritionFoodList && res.data.nutritionFoodList.length) {
|
||||
res.data.nutritionFoodList.map(item => {
|
||||
if (item.marginWeight >= item.warningWeight) {
|
||||
item.class = "normal";
|
||||
}
|
||||
if (item.marginWeight < item.warningWeight && item.marginWeight >= item.dangerWeight) {
|
||||
item.class = "warning";
|
||||
}
|
||||
if (item.marginWeight < item.dangerWeight) {
|
||||
item.class = "danger";
|
||||
}
|
||||
item.marginWeight_kg = item.marginWeight / 1000;
|
||||
item.progress = (1 - item.marginWeight / item.foodWeight) * 100 + '%';
|
||||
});
|
||||
this.nutritionFoodList = res.data.nutritionFoodList;
|
||||
}
|
||||
if (res.data.recipeFoodNotMadeList && res.data.recipeFoodNotMadeList.length) {
|
||||
this.recipeFoodNotMadeList = res.data.recipeFoodNotMadeList;
|
||||
}
|
||||
if (res.data.recipeFoodProducedList && res.data.recipeFoodProducedList.length) {
|
||||
res.data.recipeFoodProducedList.map(item => {
|
||||
item.foodWeight_kg = item.foodWeight / 1000;
|
||||
});
|
||||
this.recipeFoodProducedList = res.data.recipeFoodProducedList;
|
||||
}
|
||||
this_.list = res.data.voList;
|
||||
|
||||
this_.setTimePlay();
|
||||
} else {
|
||||
console.error(res.message);
|
||||
}
|
||||
}).catch(function(error) {
|
||||
location.reload();
|
||||
console.error('GET request error:', error);
|
||||
});
|
||||
},
|
||||
|
||||
selectFood(key) {
|
||||
let cols = this.cols;
|
||||
let list = this.list;
|
||||
let selectedIndex = this.selectedIndex === null ? 0 : this.selectedIndex;
|
||||
let rows = Math.ceil(list.length / cols);
|
||||
// 19 上
|
||||
if(key === 19) {
|
||||
this.selectedIndex = selectedIndex - cols >= 0 ? selectedIndex - cols : selectedIndex;
|
||||
}
|
||||
// 21 左
|
||||
if(key === 21) {
|
||||
this.selectedIndex = selectedIndex % cols !== 0 ? selectedIndex - 1 : selectedIndex;
|
||||
}
|
||||
// 22 右
|
||||
if(key === 22) {
|
||||
this.selectedIndex = (selectedIndex + 1) % cols !== 0 && selectedIndex + 1 < list.length ? selectedIndex + 1 : selectedIndex;
|
||||
}
|
||||
// 20 下
|
||||
if(key === 20) {
|
||||
this.selectedIndex = selectedIndex + cols < rows * cols ? selectedIndex + cols : selectedIndex;
|
||||
}
|
||||
},
|
||||
|
||||
clickFood() {
|
||||
let { selectedIndex, list } = this;
|
||||
let this_ = this;
|
||||
let params = {
|
||||
foodId: list[selectedIndex].foodId
|
||||
};
|
||||
let url = getServeUrl('ctRequest') + '/shuwei-zhct/swLargeScreenFood/updateStatusByFoodId';
|
||||
httpRequest('GET', url, params, {
|
||||
'Authorization': token
|
||||
}).then(function(res) {
|
||||
if (res.success) {
|
||||
this_.list[selectedIndex].warningStatus = res.data;
|
||||
} else {
|
||||
console.error(res.message);
|
||||
}
|
||||
}).catch(function(error) {
|
||||
location.reload();
|
||||
console.error('GET request error:', error);
|
||||
});
|
||||
}).then(() => {}).finally(() => {
|
||||
setTimeout(() => {
|
||||
this.getKitchenInfo();
|
||||
}, 10000)
|
||||
})
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
window.selectFood = this.selectFood;
|
||||
window.clickFood = this.clickFood;
|
||||
this.timer = setInterval(() => {
|
||||
this.times = getCurrentTime();
|
||||
}, 1000);
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.timer) {
|
||||
clearInterval(this.timer);
|
||||
this.timer = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -165,243 +217,369 @@ export default {
|
||||
#mealSurplusInformation {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background-color: #000A14;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
padding: 0 24px 24px;
|
||||
box-sizing: border-box;
|
||||
font-family: PingFangSC-Medium;
|
||||
background-color: #051836;
|
||||
|
||||
.title {
|
||||
.header {
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
padding: 0 24px;
|
||||
box-sizing: border-box;
|
||||
height: 96px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
|
||||
> div:nth-of-type(1) {
|
||||
flex: 1;
|
||||
color: #FFFFFF;
|
||||
.times {
|
||||
color: #869CC5;
|
||||
height: 96px;
|
||||
font-size: 18px;
|
||||
height: 18px;
|
||||
line-height: 18px;
|
||||
line-height: 96px;
|
||||
}
|
||||
|
||||
> div:nth-of-type(2) {
|
||||
flex: 1;
|
||||
.title {
|
||||
color: #FFFFFF;
|
||||
height: 96px;
|
||||
font-size: 40px;
|
||||
height: 40px;
|
||||
font-weight: bold;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
line-height: 96px;
|
||||
}
|
||||
|
||||
> div:nth-of-type(3) {
|
||||
flex: 1;
|
||||
color: #FFFFFF;
|
||||
.meal {
|
||||
color: #869CC5;
|
||||
height: 96px;
|
||||
font-size: 18px;
|
||||
height: 18px;
|
||||
line-height: 18px;
|
||||
text-align: right;
|
||||
line-height: 96px;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
padding: 0 24px;
|
||||
box-sizing: border-box;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
.list {
|
||||
overflow: hidden;
|
||||
width: 355px;
|
||||
height: 216px;
|
||||
position: relative;
|
||||
margin-bottom: 24px;
|
||||
margin-right: calc((100% - 355px * 5) / 4);
|
||||
border-radius: 12px;
|
||||
border: 2px solid #5272D9;
|
||||
background-color: #1A3467;
|
||||
.content_l {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
column-gap: 24px;
|
||||
row-gap: 24px;
|
||||
|
||||
.index {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: 0;
|
||||
left: 0;
|
||||
color: #FFFFFF;
|
||||
font-size: 22px;
|
||||
line-height: 50px;
|
||||
padding-left: 10px;
|
||||
.content_l_list {
|
||||
width: 336px;
|
||||
height: 222px;
|
||||
padding: 24px 24px 0;
|
||||
border-radius: 12px;
|
||||
box-sizing: border-box;
|
||||
font-weight: bold;
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-image: url("@/assets/images/mealSurplusInformation/index.png");
|
||||
}
|
||||
|
||||
.none {
|
||||
height: 100%;
|
||||
padding-top: 70px;
|
||||
box-sizing: border-box;
|
||||
background-color: #0F1A29;
|
||||
|
||||
.name {
|
||||
color: #5A6478;
|
||||
width: 100%;
|
||||
height: 28px;
|
||||
font-size: 28px;
|
||||
line-height: 28px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.accumulate {
|
||||
color: #5A6478;
|
||||
width: 100%;
|
||||
height: 16px;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
line-height: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
width: 100%;
|
||||
padding: 22px 18px 0;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 24px;
|
||||
|
||||
.info_ {
|
||||
.content_l_list_name {
|
||||
width: 100%;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
margin-bottom: 28px;
|
||||
|
||||
.info_l {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
overflow: hidden;
|
||||
border-radius: 10px;
|
||||
margin-right: 10px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
> div:nth-of-type(1) {
|
||||
width: 6px;
|
||||
height: 24px;
|
||||
border-radius: 3px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.info_r {
|
||||
padding-top: 10px;
|
||||
> div:nth-of-type(2) {
|
||||
flex: 1;
|
||||
width: 0;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.name {
|
||||
width: 100%;
|
||||
color: #FFFFFF;
|
||||
font-size: 28px;
|
||||
height: 28px;
|
||||
font-weight: bold;
|
||||
line-height: 28px;
|
||||
margin-bottom: 16px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
.content_l_list_margin {
|
||||
width: 100%;
|
||||
height: 34px;
|
||||
font-size: 24px;
|
||||
line-height: 34px;
|
||||
text-align: center;
|
||||
margin-bottom: 22px;
|
||||
|
||||
span {
|
||||
font-size: 34px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.content_l_list_status {
|
||||
width: 200px;
|
||||
height: 36px;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 6px;
|
||||
margin: 0 auto 16px;
|
||||
|
||||
.content_l_list_status_icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.content_l_list_status_text {
|
||||
height: 16px;
|
||||
font-size: 16px;
|
||||
line-height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.content_l_list_progress {
|
||||
width: 100%;
|
||||
height: 12px;
|
||||
border-radius: 6px;
|
||||
|
||||
> div {
|
||||
height: 12px;
|
||||
transition: .3s;
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
&.normal {
|
||||
background-color: #1A3467;
|
||||
border: 2px solid #5272D9;
|
||||
|
||||
.content_l_list_name {
|
||||
> div:nth-of-type(1) {
|
||||
background-color: #5272D9;
|
||||
}
|
||||
|
||||
.accumulate {
|
||||
width: 100%;
|
||||
color: #9DA8BA;
|
||||
font-size: 16px;
|
||||
height: 16px;
|
||||
line-height: 16px;
|
||||
> div:nth-of-type(2) {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
.content_l_list_margin {
|
||||
color: #FFFFFF;
|
||||
|
||||
span {
|
||||
color: #5AF186;
|
||||
}
|
||||
}
|
||||
|
||||
.content_l_list_status {
|
||||
.content_l_list_status_text {
|
||||
color: #869CC5;
|
||||
}
|
||||
}
|
||||
|
||||
.content_l_list_progress {
|
||||
background-color: rgba(90, 241, 134, .3);
|
||||
|
||||
> div {
|
||||
background-color: #5AF186;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.warning {
|
||||
background-color: #402200;
|
||||
border: 2px solid #5E4728;
|
||||
|
||||
.content_l_list_name {
|
||||
> div:nth-of-type(1) {
|
||||
background-color: #F8A45A;
|
||||
}
|
||||
|
||||
> div:nth-of-type(2) {
|
||||
color: #F6BD9E;
|
||||
}
|
||||
}
|
||||
|
||||
.content_l_list_margin {
|
||||
color: #F6BD9E;
|
||||
|
||||
span {
|
||||
color: #F8A45A;
|
||||
}
|
||||
}
|
||||
|
||||
.content_l_list_status {
|
||||
background-color: #5A2F00;
|
||||
|
||||
.content_l_list_status_icon {
|
||||
background-image: url("@/assets/images/mealSurplusInformation/warning_status_icon.png");
|
||||
}
|
||||
|
||||
.content_l_list_status_text {
|
||||
color: #F6BD9E;
|
||||
}
|
||||
}
|
||||
|
||||
.content_l_list_progress {
|
||||
background-color: rgba(248, 164, 90, .3);
|
||||
|
||||
> div {
|
||||
background-color: #F8A45A;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.danger {
|
||||
background-color: #220203;
|
||||
border: 2px solid #FF3232;
|
||||
|
||||
.content_l_list_name {
|
||||
> div:nth-of-type(1) {
|
||||
background-color: #FF3232;
|
||||
}
|
||||
|
||||
> div:nth-of-type(2) {
|
||||
color: #FFC8C8;
|
||||
}
|
||||
}
|
||||
|
||||
.content_l_list_margin {
|
||||
color: #FFC8C8;
|
||||
|
||||
span {
|
||||
color: #FF3232;
|
||||
}
|
||||
}
|
||||
|
||||
.content_l_list_status {
|
||||
background-color: #5A0A0A;
|
||||
|
||||
.content_l_list_status_icon {
|
||||
background-image: url("@/assets/images/mealSurplusInformation/danger_status_icon.png");
|
||||
}
|
||||
|
||||
.content_l_list_status_text {
|
||||
color: #FF6464;
|
||||
}
|
||||
}
|
||||
|
||||
.content_l_list_progress {
|
||||
background-color: rgba(200, 50, 50, .3);
|
||||
|
||||
> div {
|
||||
background-color: #FF3232;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.remaining {
|
||||
.content_r {
|
||||
width: 432px;
|
||||
height: 100%;
|
||||
padding: 24px;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
border-radius: 12px;
|
||||
box-sizing: border-box;
|
||||
border: 2px solid #2F415F;
|
||||
background-color: #051836;
|
||||
|
||||
.content_r_title {
|
||||
width: 100%;
|
||||
padding: 0 10px;
|
||||
box-sizing: border-box;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
margin-bottom: 22px;
|
||||
|
||||
.remaining_ {
|
||||
color: #FFFFFF;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
width: 100%;
|
||||
height: 76px;
|
||||
line-height: 76px;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
background-color: #0A2049;
|
||||
> div:nth-of-type(1) {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-right: 12px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
background-image: url("@/assets/images/mealSurplusInformation/content_r_icon.png");
|
||||
}
|
||||
|
||||
span {
|
||||
color: #B1FF89;
|
||||
}
|
||||
> div:nth-of-type(2) {
|
||||
flex: 1;
|
||||
height: 24px;
|
||||
color: #5272D9;
|
||||
line-height: 24px;
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-of-type(5n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
.content_r_content {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
|
||||
@keyframes warn_animation {
|
||||
0% {
|
||||
border: 2px solid #5272D9;
|
||||
background-color: #1A3467;
|
||||
}
|
||||
50% {
|
||||
border: 2px solid #DC2828;
|
||||
background-color: #7F1520;
|
||||
}
|
||||
100% {
|
||||
border: 2px solid #5272D9;
|
||||
background-color: #1A3467;
|
||||
}
|
||||
}
|
||||
.content_r_content_table {
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
|
||||
@keyframes accumulate_animation {
|
||||
0% {
|
||||
color: #9DA8BA;
|
||||
}
|
||||
50% {
|
||||
color: #FFC8C8;
|
||||
}
|
||||
100% {
|
||||
color: #9DA8BA;
|
||||
}
|
||||
}
|
||||
.content_r_content_table_head {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
padding: 0 24px;
|
||||
box-sizing: border-box;
|
||||
justify-content: space-between;
|
||||
border-radius: 6px;
|
||||
background-color: #2F415F;
|
||||
margin-bottom: 30px;
|
||||
|
||||
@keyframes remaining_animation {
|
||||
0% {
|
||||
background-color: #0A2049;
|
||||
}
|
||||
50% {
|
||||
background-color: #DC2828;
|
||||
}
|
||||
100% {
|
||||
background-color: #0A2049;
|
||||
}
|
||||
}
|
||||
> div {
|
||||
color: #FFFFFF;
|
||||
height: 48px;
|
||||
font-size: 18px;
|
||||
line-height: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
.warning1 {
|
||||
animation: warn_animation 1s infinite;
|
||||
.content_r_content_table_body {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
|
||||
.accumulate {
|
||||
animation: accumulate_animation 1s infinite;
|
||||
> div {
|
||||
flex: none;
|
||||
width: 50%;
|
||||
padding-left: 24px;
|
||||
box-sizing: border-box;
|
||||
height: 18px;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: flex-end;
|
||||
margin-bottom: 22px;
|
||||
|
||||
> div:nth-of-type(1) {
|
||||
height: 18px;
|
||||
font-size: 18px;
|
||||
line-height: 18px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
> div:nth-of-type(2) {
|
||||
height: 14px;
|
||||
font-size: 14px;
|
||||
line-height: 14px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.remaining_ {
|
||||
animation: remaining_animation 1s infinite;
|
||||
}
|
||||
}
|
||||
|
||||
.warning2 {
|
||||
border: 2px solid #263249 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user