|
@@ -1,62 +1,69 @@
|
|
|
<template>
|
|
|
- <div class="MenuDiet">
|
|
|
+ <div class="MenuDiet1" :style="'font-size:' + fontSize + 'px'">
|
|
|
<br v-if="load" />
|
|
|
<br v-if="load" />
|
|
|
<van-skeleton title v-if="load" :row="10" />
|
|
|
<van-empty v-if="!list.length && !load" description="今日休息" />
|
|
|
- <template
|
|
|
- v-if="
|
|
|
- list.length &&
|
|
|
- list[value1] &&
|
|
|
- list[value1].child &&
|
|
|
- list[value1].child.length
|
|
|
- "
|
|
|
- >
|
|
|
- <div v-for="(item, i) in list[value1].child" :key="i">
|
|
|
- <br />
|
|
|
- <van-cell-group inset :border="false">
|
|
|
- <van-cell
|
|
|
- :style="
|
|
|
- 'padding: 5px 16px;font-size: 18px; color: #fff;background-color: ' +
|
|
|
- (i % 2 === 1 ? '#FFB07B' : '#74BBFF') +
|
|
|
- ';'
|
|
|
- "
|
|
|
- :title="item.meal"
|
|
|
- ></van-cell>
|
|
|
- <div v-if="item.varietyOfDishes && item.varietyOfDishes.length">
|
|
|
- <van-cell v-for="(v, p) in item.varietyOfDishes" :key="p">
|
|
|
- <template #title>
|
|
|
- <div
|
|
|
- class="p"
|
|
|
- :style="
|
|
|
- 'background-color:' + (i % 2 === 1 ? '#FFB07B' : '#74BBFF')
|
|
|
- "
|
|
|
- ></div>
|
|
|
- <span
|
|
|
- v-text="v.title"
|
|
|
- class="title"
|
|
|
- style="vertical-align: middle"
|
|
|
- ></span>
|
|
|
- </template>
|
|
|
- <template #label>
|
|
|
- <span>{{ v.value.join("、") }}</span>
|
|
|
- </template>
|
|
|
- </van-cell>
|
|
|
+ <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
|
|
|
+ <van-swipe-item
|
|
|
+ v-for="(v, index) in list"
|
|
|
+ :key="index"
|
|
|
+ style="width: 100vw;max-width: 1920px;margin: 0 auto; height: 100vh"
|
|
|
+ >
|
|
|
+ <h4 style="text-align: center;margin-top: 15px;">{{v.text}}</h4>
|
|
|
+ <template
|
|
|
+ v-if="
|
|
|
+ list.length &&
|
|
|
+ list[index] &&
|
|
|
+ list[index].child &&
|
|
|
+ list[index].child.length
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <div v-for="(item, i) in list[index].child" :key="i">
|
|
|
+ <br />
|
|
|
+ <van-cell-group inset :border="false">
|
|
|
+ <van-cell
|
|
|
+ :style="
|
|
|
+ 'padding: 5px 16px; color: #fff;background-color: ' +
|
|
|
+ (i % 2 === 1 ? '#FFB07B' : '#74BBFF') +
|
|
|
+ ';'
|
|
|
+ "
|
|
|
+ :title="item.meal"
|
|
|
+ ></van-cell>
|
|
|
+ <div v-if="item.varietyOfDishes && item.varietyOfDishes.length">
|
|
|
+ <van-cell v-for="(v, p) in item.varietyOfDishes" :key="p">
|
|
|
+ <template #title>
|
|
|
+ <div
|
|
|
+ class="p"
|
|
|
+ :style="
|
|
|
+ 'background-color:' +
|
|
|
+ (i % 2 === 1 ? '#FFB07B' : '#74BBFF')
|
|
|
+ "
|
|
|
+ ></div>
|
|
|
+ <span
|
|
|
+ v-text="v.title"
|
|
|
+ class="title"
|
|
|
+ style="vertical-align: middle"
|
|
|
+ ></span>
|
|
|
+ </template>
|
|
|
+ <template #label>
|
|
|
+ <span>{{ v.value.join("、") }}</span>
|
|
|
+ </template>
|
|
|
+ </van-cell>
|
|
|
+ </div>
|
|
|
+ </van-cell-group>
|
|
|
</div>
|
|
|
+ </template>
|
|
|
+ <van-cell-group v-if="list.length" :border="false">
|
|
|
+ <template #title>
|
|
|
+ <div class="t">
|
|
|
+ <span>【温馨提示】</span>
|
|
|
+ <p>每日菜品可能会临时调整,以现场提供的实际菜品为准哦~</p>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
</van-cell-group>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
|
|
|
- <van-swipe-item>1</van-swipe-item>
|
|
|
+ </van-swipe-item>
|
|
|
</van-swipe>
|
|
|
- <van-cell-group v-if="list.length" :border="false">
|
|
|
- <template #title>
|
|
|
- <div class="t">
|
|
|
- <span>【温馨提示】</span>
|
|
|
- <p>每日菜品可能会临时调整,以现场提供的实际菜品为准哦~</p>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </van-cell-group>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
@@ -77,24 +84,25 @@ import "vant/lib/empty/style/index";
|
|
|
import "vant/lib/cell/style/index";
|
|
|
import "vant/lib/cell-group/style/index";
|
|
|
|
|
|
-import { menulist } from "../api/index";
|
|
|
+import { menuWeekList } from "../api/index";
|
|
|
|
|
|
export default {
|
|
|
- name: "MenuDiet",
|
|
|
+ name: "MenuDiet1",
|
|
|
data() {
|
|
|
return {
|
|
|
load: false,
|
|
|
list: [],
|
|
|
- option1: [
|
|
|
- { text: "今天(2022/02/11)", value: 0 },
|
|
|
- { text: "明天(2022/02/12)", value: 1 },
|
|
|
- ],
|
|
|
- value1: 0,
|
|
|
+ fontSize: 22,
|
|
|
};
|
|
|
},
|
|
|
mounted() {
|
|
|
this.load = true;
|
|
|
- menulist()
|
|
|
+ this.fontSize = (document.body.offsetWidth / 20).toFixed(2) - 0;
|
|
|
+ if (document.body.offsetWidth > 1920 || this.fontSize > 30)
|
|
|
+ this.fontSize = 30;
|
|
|
+ console.log(this.fontSize);
|
|
|
+ document.documentElement.style.fontSize = this.fontSize + "px";
|
|
|
+ menuWeekList()
|
|
|
.then(r => {
|
|
|
this.list = (r || []).map((v, i) => {
|
|
|
v.value = i;
|
|
@@ -108,11 +116,7 @@ export default {
|
|
|
document.title = "菜单";
|
|
|
},
|
|
|
computed: {},
|
|
|
- methods: {
|
|
|
- change(v) {
|
|
|
- this.value1 = v;
|
|
|
- },
|
|
|
- },
|
|
|
+ methods: {},
|
|
|
beforeUnmount: function () {
|
|
|
localStorage.token = "";
|
|
|
},
|
|
@@ -128,19 +132,27 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style>
|
|
|
-.MenuDiet {
|
|
|
+.MenuDiet1 {
|
|
|
+ width: 100%;
|
|
|
+ max-width: 1920px;
|
|
|
+ margin: 0 auto;
|
|
|
min-height: 100%;
|
|
|
font-weight: 400;
|
|
|
box-sizing: border-box;
|
|
|
background-color: #fff;
|
|
|
}
|
|
|
-.MenuDiet .van-sidebar {
|
|
|
+.MenuDiet1 .van-sidebar {
|
|
|
width: 100px;
|
|
|
}
|
|
|
-.MenuDiet .van-cell-group {
|
|
|
+.MenuDiet1 .van-cell {
|
|
|
+ min-height: 3rem;
|
|
|
+ font-size: 1rem;
|
|
|
+ line-height: 1.5rem
|
|
|
+}
|
|
|
+.MenuDiet1 .van-cell-group {
|
|
|
box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.08);
|
|
|
}
|
|
|
-.MenuDiet .main {
|
|
|
+.MenuDiet1 .main {
|
|
|
width: calc(100% - 100px);
|
|
|
height: 100%;
|
|
|
overflow-y: scroll;
|
|
@@ -149,14 +161,14 @@ export default {
|
|
|
padding: 5px;
|
|
|
float: right;
|
|
|
}
|
|
|
-.MenuDiet .van-sidebar-item--select::before {
|
|
|
+.MenuDiet1 .van-sidebar-item--select::before {
|
|
|
background-color: #e42417;
|
|
|
}
|
|
|
-.MenuDiet .meal {
|
|
|
+.MenuDiet1 .meal {
|
|
|
font-weight: 600;
|
|
|
- font-size: 18px;
|
|
|
+ font-size: 0.95rem;
|
|
|
}
|
|
|
-.MenuDiet .p {
|
|
|
+.MenuDiet1 .p {
|
|
|
display: inline-block;
|
|
|
width: 5px;
|
|
|
height: 5px;
|
|
@@ -165,31 +177,31 @@ export default {
|
|
|
vertical-align: middle;
|
|
|
margin-right: 9px;
|
|
|
}
|
|
|
-.MenuDiet .title {
|
|
|
+.MenuDiet1 .title {
|
|
|
font-weight: bold;
|
|
|
- font-size: 16px;
|
|
|
+ font-size: 0.9rem;
|
|
|
}
|
|
|
-.MenuDiet .t {
|
|
|
+.MenuDiet1 .t {
|
|
|
text-align: center;
|
|
|
line-height: 20px;
|
|
|
- font-size: 13px;
|
|
|
+ font-size: 0.7rem;
|
|
|
}
|
|
|
-.MenuDiet .t span {
|
|
|
+.MenuDiet1 .t span {
|
|
|
color: #fa6400;
|
|
|
}
|
|
|
-.MenuDiet .van-tabs__line {
|
|
|
+.MenuDiet1 .van-tabs__line {
|
|
|
border-radius: 2px;
|
|
|
}
|
|
|
-.MenuDiet .van-cell__label {
|
|
|
+.MenuDiet1 .van-cell__label {
|
|
|
color: #555555;
|
|
|
padding-left: 14px;
|
|
|
- font-size: 16px;
|
|
|
+ font-size: 0.85rem;
|
|
|
line-height: 1.5em;
|
|
|
}
|
|
|
-.MenuDiet .van-tab {
|
|
|
- font-size: 19px;
|
|
|
+.MenuDiet1 .van-tab {
|
|
|
+ font-size: 1rem;
|
|
|
}
|
|
|
-.MenuDiet .van-tab--active .van-tab__text {
|
|
|
+.MenuDiet1 .van-tab--active .van-tab__text {
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
</style>
|