提交

src/views/MenuDiet1.vue

@@ -4,68 +4,57 @@
     <br v-if="load" />
     <van-skeleton title v-if="load" :row="10" />
     <van-nav-bar v-if="!load" title="广电中心食堂本周菜单" />
-    <van-swipe class="my-swipe" :autoplay="10000" 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"
-      >
-        <div style="text-align: center; font-size: 1.5rem; margin-top: 15px">
-          {{ v.text }}
-        </div>
-        <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="
-                  '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>
+    <van-tabs
+      line-height="4"
+      line-width="16"
+      title-active-color="#FA6400"
+      color="#FA6400"
+      v-if="list.length"
+      :active="value1"
+      :before-change="change"
+    >
+      <van-tab :title="item.text" v-for="(item, index) in list" :key="index">
+        <div v-for="(item, i) in list[index].child" :key="i">
+          <br />
+          <van-cell-group inset :border="false">
+            <van-cell
+              :style="
+                '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>
-          </template>
-        </van-cell-group>
-      </van-swipe-item>
-    </van-swipe>
+          </van-cell-group>
+        </div>
+      </van-tab>
+    </van-tabs>
+
+    <div class="t">
+      <span>【温馨提示】</span>
+      <p>每日菜品可能会临时调整,以现场提供的实际菜品为准哦~</p>
+    </div>
   </div>
 </template>
 
@@ -75,18 +64,18 @@ import {
   Cell as vanCell,
   CellGroup as vanCellGroup,
   Skeleton as vanSkeleton,
-  Swipe as vanSwipe,
-  SwipeItem as vanSwipeItem,
+  Tab as vanTab,
+  Tabs as vanTabs,
   NavBar as vanNavBar,
 } from "vant";
 import "vant/lib/nav-bar/style/index";
-import "vant/lib/swipe/style/index";
-import "vant/lib/swipe-item/style/index";
+import "vant/lib/tab/style/index";
+import "vant/lib/tabs/style/index";
 import "vant/lib/skeleton/style/index";
 import "vant/lib/cell/style/index";
 import "vant/lib/cell-group/style/index";
 
-import { menuWeekList } from "../api/index";
+import { menulist } from "../api/index";
 
 export default {
   name: "MenuDiet1",
@@ -95,6 +84,7 @@ export default {
       load: false,
       list: [],
       fontSize: 22,
+      value1: 0
     };
   },
   mounted() {
@@ -103,7 +93,7 @@ export default {
     if (document.body.offsetWidth > 1920 || this.fontSize > 36)
       this.fontSize = 36;
     document.documentElement.style.fontSize = this.fontSize + "px";
-    menuWeekList()
+    menulist()
       .then(r => {
         this.list = r || [];
         localStorage.menuWeekList = JSON.stringify(this.list);
@@ -118,6 +108,10 @@ export default {
   },
   computed: {},
   methods: {
+    
+    change(v) {
+      this.value1 = v;
+    },
   },
   beforeUnmount: function () {
     localStorage.token = "";
@@ -126,8 +120,8 @@ export default {
     vanCell,
     vanSkeleton,
     vanCellGroup,
-    vanSwipeItem,
-    vanSwipe,
+    vanTab,
+    vanTabs,
     vanNavBar,
   },
 };
@@ -203,6 +197,11 @@ export default {
 .MenuDiet1 .van-tab {
   font-size: 1rem;
 }
+.MenuDiet1 .van-tabs--line .van-tabs__wrap,
+.MenuDiet1 .van-tab__text{
+    height: 1.5em;
+    line-height: 1.5em;
+}
 .MenuDiet1 .van-tab--active .van-tab__text {
   font-weight: bold;
 }