From 14d2c3e579c2fff1b9e5fc9d9d23bd0bff340a1a Mon Sep 17 00:00:00 2001
From: D <3066417822@qq.com>
Date: Mon, 14 Aug 2023 20:38:10 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0geek=E6=A8=A1=E6=9D=BF?=
 =?UTF-8?q?=E5=BA=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitignore                                    |   4 +-
 .../geek-commodity/geek-commodity.vue         | 127 +++++
 .../components/geek-menu/geek-menu.vue}       |  30 +-
 .../components/geek-order/geek-order.vue      | 147 ++++++
 .../geek-statistic/geek-statistic.vue}        |   4 -
 src/pages.json                                |  18 +-
 src/pages/index.vue                           |  58 +--
 src/pages/template.config.js                  |  36 +-
 src/pages_geek/pages/index/index.vue          |  91 ++++
 src/pages_template/pages/comment/index.vue    |   2 +-
 src/pages_template/pages/index/index.vue      |  38 --
 src/pages_template/pages/login/index2.vue     |  37 +-
 src/pages_template/pages/mallMenu/index1.vue  | 321 ++++++------
 src/pages_template/pages/mallMenu/index2.vue  | 476 +++++++++---------
 14 files changed, 867 insertions(+), 522 deletions(-)
 create mode 100644 src/components/geek-xd/components/geek-commodity/geek-commodity.vue
 rename src/{pages_template/components/circle-menu.vue => components/geek-xd/components/geek-menu/geek-menu.vue} (66%)
 create mode 100644 src/components/geek-xd/components/geek-order/geek-order.vue
 rename src/{pages_template/components/statistic.vue => components/geek-xd/components/geek-statistic/geek-statistic.vue} (96%)
 create mode 100644 src/pages_geek/pages/index/index.vue
 delete mode 100644 src/pages_template/pages/index/index.vue

diff --git a/.gitignore b/.gitignore
index a61968e..c0e638e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,6 @@
 .hbuilderx
 unpackage
 dist
-node_modules
\ No newline at end of file
+node_modules
+
+manifest.json
\ No newline at end of file
diff --git a/src/components/geek-xd/components/geek-commodity/geek-commodity.vue b/src/components/geek-xd/components/geek-commodity/geek-commodity.vue
new file mode 100644
index 0000000..53385d8
--- /dev/null
+++ b/src/components/geek-xd/components/geek-commodity/geek-commodity.vue
@@ -0,0 +1,127 @@
+<template>
+    <view class="card" :class="type" @click="$emit('click')">
+        <image class="img" :src="img"/>
+        <view class="right">
+            <view class="title">{{ title }}</view>
+            <view class="subTitle">{{ subTitle }}</view>
+            <view class="price">￥ {{ price }}</view>
+        </view>
+    </view>
+</template>
+
+
+<script setup>
+const props = defineProps({
+    img: {
+        type: String,
+        default: ''
+    },
+    title: {
+        type: String,
+        default: ''
+    },
+    subTitle: {
+        type: String,
+        default: ''
+    },
+    price: {
+        type: Number,
+        default: 0
+    },
+    type: {
+        type: String,
+        default: 'line'
+    }
+})
+</script>
+
+<style lang="scss" scoped>
+.card {
+    padding: 0;
+    border-radius: 10px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    height: 240rpx;
+    width: 700rpx;
+    padding: 20rpx;
+    margin: 10rpx;
+    position: relative;
+
+    .img {
+        height: 200rpx;
+        width: 200rpx;
+    }
+
+    .right {
+        position: absolute;
+        top: 20rpx;
+        left: 240rpx;
+        height: 200rpx;
+
+        .title {
+            width: 400rpx;
+            font-size: 35rpx;
+        }
+
+        .subTitle {
+            width: 400rpx;
+            margin-top: 10rpx;
+            font-size: 20rpx;
+            color: rgb(87, 87, 87);
+        }
+
+        .price {
+            position: absolute;
+            font-size: 40rpx;
+            color: red;
+            bottom: 10rpx;
+            width: 400rpx;
+        }
+    }
+}
+
+.rect {
+    
+    border-radius: 10px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    height: 500rpx;
+    width: 350rpx;
+    padding: 0px;
+    margin: 10rpx;
+    position: relative;
+    display: inline-block;
+
+    .img {
+        border-radius: 10px 10px 0 0;
+        height: 350rpx;
+        width: 350rpx;
+    }
+
+    .right {
+        padding: 20rpx;
+        position: absolute;
+        height: 160rpx;
+        width: 350rpx;
+        top: 350rpx;
+        left: 20rpx;
+        .title {
+            width: 330rpx;
+            font-size: 25rpx;
+        }
+
+        .subTitle {
+            width: 330rpx;
+            margin-top: 10rpx;
+            font-size: 20rpx;
+            color: rgb(87, 87, 87);
+        }
+
+        .price {
+            position: absolute;
+            font-size: 30rpx;
+            color: red;
+            bottom: 10rpx;
+            width: 330rpx;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages_template/components/circle-menu.vue b/src/components/geek-xd/components/geek-menu/geek-menu.vue
similarity index 66%
rename from src/pages_template/components/circle-menu.vue
rename to src/components/geek-xd/components/geek-menu/geek-menu.vue
index bc477ee..e172fec 100644
--- a/src/pages_template/components/circle-menu.vue
+++ b/src/components/geek-xd/components/geek-menu/geek-menu.vue
@@ -1,5 +1,5 @@
 <template>
-    <view class="menu" :style="menuStyle"  @click="$emit('click')">
+    <view class="menu" :class="type" :style="menuStyle" @click="$emit('click')">
         <image :src="icon" :style="imageStyle"></image>
     </view>
     <view class="title" :style="titleStype">{{ label }}</view>
@@ -24,6 +24,10 @@ const props = defineProps({
     labelColor: {
         type: String,
         default: '#515151'
+    },
+    type: {
+        type: String,
+        default: 'circle'
     }
 })
 const menuStyle = computed(() => {
@@ -35,12 +39,12 @@ const menuStyle = computed(() => {
 
 const imageStyle = computed(() => {
     return {
-        width: `${props.size}rpx`,
-        height: `${props.size}rpx`
+        width: `${props.size + (props.type === 'rect' ? 20 : 0)}rpx`,
+        height: `${props.size + (props.type === 'rect' ? 20 : 0)}rpx`
     }
 })
 
-const titleStype = computed(()=>{
+const titleStype = computed(() => {
     return {
         width: `${props.size + 40}rpx`,
         color: props.labelColor
@@ -50,9 +54,25 @@ const titleStype = computed(()=>{
   
 <style lang="scss" scoped>
 .menu {
+    padding: 20rpx;
+}
+
+.circle {
+    padding: 20rpx;
     border-radius: 10000px;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    padding: 20rpx;
+
+    &:active {
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
+    }
+}
+
+.rect {
+    padding: 0rpx;
+
+    &:active {
+        opacity: 0.5;
+    }
 }
 
 .title {
diff --git a/src/components/geek-xd/components/geek-order/geek-order.vue b/src/components/geek-xd/components/geek-order/geek-order.vue
new file mode 100644
index 0000000..3450f85
--- /dev/null
+++ b/src/components/geek-xd/components/geek-order/geek-order.vue
@@ -0,0 +1,147 @@
+<template>
+    <view class="geek-card" @click="$emit('click')">
+        <view class="geek-header">
+            <view class="geek-shop">{{ shop }} > </view>
+            <view class="geek-status">{{ status }}</view>
+        </view>
+        <view class="geek-content">
+            <image class="geek-img" :src="img"></image>
+            <view class="geek-label">{{ label }}</view>
+        </view>
+        <view class="geek-footer">
+            <view class="geek-more" @click="$emit('more')">更多</view>
+            <view class="geek-buttonGroup">
+                <view class="geek-btn" @click="$emit('sell')">卖了换钱</view>
+                <view class="geek-btn" @click="$emit('return')">退换/售后</view>
+                <view class="geek-buy" @click="$emit('again')">再次购买</view>
+            </view>
+        </view>
+    </view>
+</template>
+<script setup>
+
+const props = defineProps({
+    shop: {
+        type: String,
+        default: ''
+    },
+    status: {
+        type: String,
+        default: ''
+    },
+    img: {
+        type: String,
+        default: ''
+    },
+    label: {
+        type: String,
+        default: ''
+    },
+    price: {
+        type: Number,
+        default: 0
+    },
+    type: {
+        type: String,
+        default: 'line'
+    }
+})
+</script>
+<style lang="scss" scoped>
+.geek-card {
+    border: 1rpx solid rgb(183, 183, 183);
+    position: relative;
+    padding: 0;
+    border-radius: 10px;
+    height: 320rpx;
+    width: 700rpx;
+    padding: 20rpx;
+    margin: 20rpx;
+
+    .geek-header {
+        .geek-shop {
+            font-size: 28rpx;
+            font-weight: 600;
+        }
+
+        .geek-status {
+            width: 100rpx;
+            text-align: center;
+            position: absolute;
+            top: 30rpx;
+            right: 30rpx;
+            font-size: 25rpx;
+        }
+
+    }
+
+    .geek-content {
+        .geek-label {
+            position: absolute;
+            top: 100rpx;
+            width: 500rpx;
+            left: 180rpx;
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        .geek-img {
+            position: absolute;
+            border-radius: 10px;
+            height: 160rpx;
+            width: 160rpx;
+            top: 70rpx;
+            left: 10rpx;
+        }
+    }
+
+    .geek-footer {
+        width: 660rpx;
+        position: absolute;
+        bottom: 10rpx;
+        font-size: 25rpx;
+
+        .geek-more {
+            margin-bottom: 20rpx;
+        }
+
+        .geek-buttonGroup {
+
+            position: absolute;
+            right: 10rpx;
+            bottom: 0;
+
+            .geek-btn {
+                border: 1rpx solid black;
+                width: 150rpx;
+                height: 50rpx;
+                border-radius: 100px;
+                display: inline-block;
+                margin: 10rpx;
+                padding: 6rpx;
+                text-align: center;
+
+            }
+
+            .geek-buy {
+                color: red;
+                border: 1rpx solid red;
+                width: 150rpx;
+                height: 50rpx;
+                border-radius: 100px;
+                display: inline-block;
+                margin: 10rpx;
+                padding: 6rpx;
+                text-align: center;
+            }
+
+
+
+        }
+    }
+
+}
+</style>
\ No newline at end of file
diff --git a/src/pages_template/components/statistic.vue b/src/components/geek-xd/components/geek-statistic/geek-statistic.vue
similarity index 96%
rename from src/pages_template/components/statistic.vue
rename to src/components/geek-xd/components/geek-statistic/geek-statistic.vue
index 478a7d3..dc8ac3f 100644
--- a/src/pages_template/components/statistic.vue
+++ b/src/components/geek-xd/components/geek-statistic/geek-statistic.vue
@@ -7,10 +7,6 @@
 import { computed } from 'vue';
 
 const props = defineProps({
-    icon: {
-        type: String,
-        default: ''
-    },
     label: {
         type: String,
         default: "订单数量"
diff --git a/src/pages.json b/src/pages.json
index 3fa3b4c..672dacc 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -4,7 +4,9 @@
       "^u--(.*)": "uview-plus/components/u-$1/u-$1.vue",
       "^up-(.*)": "uview-plus/components/u-$1/u-$1.vue",
       "^u-([^-].*)": "uview-plus/components/u-$1/u-$1.vue",
-      "qiun-(.*)": "@/components/qiun-data-charts/components/qiun-$1/qiun-$1.vue"
+      "qiun-(.*)": "@/components/qiun-data-charts/components/qiun-$1/qiun-$1.vue",
+      "geek-(.*)": "@/components/geek-xd/components/geek-$1/geek-$1.vue",
+      "gx-(.*)": "@/components/geek-xd/components/geek-$1/geek-$1.vue"
     }
   },
   "pages": [
@@ -103,12 +105,6 @@
     {
       "root": "pages_template/pages",
       "pages": [
-        {
-          "path": "index/index",
-          "style": {
-            "pageOrientation": "auto"
-          }
-        },
         {
           "path": "wxCenter/index",
           "style": {
@@ -230,6 +226,14 @@
           }
         }
       ]
+    },
+    {
+      "root": "pages_geek/pages",
+      "pages": [
+        {
+          "path": "index/index"
+        }
+      ]
     }
   ],
   "tabBar": {
diff --git a/src/pages/index.vue b/src/pages/index.vue
index aca28ab..c839312 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -13,41 +13,35 @@
   </view>
 </template>
 
-<script>
-export default {
-  data() {
-    return {
-      chartData: {},
+<script setup>
+import { ref, onMounted } from 'vue';
+
+const chartData = ref({});
+
+onMounted(() => { getServerData() });
+
+function getServerData() {
+  // 模拟从服务器获取数据时的延时
+  setTimeout(() => {
+    let res = {
+      categories: ['2016', '2017', '2018', '2019', '2020', '2021'],
+      series: [
+        {
+          name: '目标值',
+          data: [35, 36, 31, 33, 13, 34],
+        },
+        {
+          name: '完成量',
+          data: [18, 27, 21, 24, 6, 28],
+        },
+      ],
     };
-  },
-  onReady() {
-    this.getServerData();
-  },
-  methods: {
-    getServerData() {
-      //模拟从服务器获取数据时的延时
-      setTimeout(() => {
-        let res = {
-          categories: ["2016", "2017", "2018", "2019", "2020", "2021"],
-          series: [
-            {
-              name: "目标值",
-              data: [35, 36, 31, 33, 13, 34]
-            },
-            {
-              name: "完成量",
-              data: [18, 27, 21, 24, 6, 28]
-            }
-          ]
-        };
-        this.chartData = JSON.parse(JSON.stringify(res));
-      }, 500);
-    },
-  }
-};
+    chartData.value = JSON.parse(JSON.stringify(res));
+  }, 500);
+}
 </script>
 
-<style>
+<style scoped>
 .content {
   display: flex;
   flex-direction: column;
diff --git a/src/pages/template.config.js b/src/pages/template.config.js
index 494d5f8..d10bc50 100644
--- a/src/pages/template.config.js
+++ b/src/pages/template.config.js
@@ -1,4 +1,16 @@
 export default [
+	{
+		groupName: '组件',
+		groupName_en: 'Page',
+		list: [
+			{
+				path: '/pages_geek/pages/index/index',
+				icon: 'wxCenter',
+				title: '组件展示',
+				title_en: 'index',
+			},
+		]
+	},
 	{
 		groupName: '部件',
 		groupName_en: 'Parts',
@@ -14,13 +26,19 @@ export default [
 				icon: 'citySelect',
 				title: 'CitySelect 城市选择',
 				title_en: 'CitySelect',
-			}, 
+			},
 			{
 				path: '/pages_template/pages/submitBar/index',
 				icon: 'submitBar',
 				title: 'SubmitBar 提交订单栏',
 				title_en: 'SubmitBar',
-			}
+			},
+			{
+				path: '/pages_template/pages/keyboardPay/index',
+				icon: 'keyboardPay',
+				title: 'KeyboardPay 自定义键盘支付模板',
+				title_en: 'KeyboardPay',
+			},
 		]
 	},
 	{
@@ -57,24 +75,12 @@ export default [
 		groupName: '页面',
 		groupName_en: 'Page',
 		list: [
-			{
-				path: '/pages_template/pages/index/index',
-				icon: 'wxCenter',
-				title: '组件展示',
-				title_en: 'index',
-			},
 			{
 				path: '/pages_template/pages/wxCenter/index',
 				icon: 'wxCenter',
 				title: 'WxCenter 仿微信个人中心',
 				title_en: 'WxCenter',
 			},
-			{
-				path: '/pages_template/pages/keyboardPay/index',
-				icon: 'keyboardPay',
-				title: 'KeyboardPay 自定义键盘支付模板',
-				title_en: 'KeyboardPay',
-			},
 			{
 				path: '/pages_template/pages/mallMenu/index1',
 				icon: 'mall_menu_1',
@@ -115,5 +121,5 @@ export default [
 				title_en: 'Address',
 			},
 		]
-	}
+	},
 ]
\ No newline at end of file
diff --git a/src/pages_geek/pages/index/index.vue b/src/pages_geek/pages/index/index.vue
new file mode 100644
index 0000000..79bbc8c
--- /dev/null
+++ b/src/pages_geek/pages/index/index.vue
@@ -0,0 +1,91 @@
+<template>
+  <uni-section class="mb-10" title="数值板" sub-title="statistic" type="line"></uni-section>
+  <u-row gutter="0">
+    <u-col span="6">
+      <geek-statistic label="订单数量(个)" labelColor="#1f1f1f" :number="0" numberColor="red" />
+    </u-col>
+    <u-col span="6">
+      <geek-statistic label="交易金额(元)" labelColor="#1f1f1f" :number="0" numberColor="red" />
+    </u-col>
+  </u-row>
+
+  <uni-section class="mb-10" title="菜单" sub-title="menu" type="line"></uni-section>
+  <u-row>
+    <u-col :span="2.1" :offset="0.3" v-for="menu, index in menus" :key="index">
+      <geek-menu :icon="menu.icon" :label="menu.label" :size="60" @click="modal.msg(menu.label)" type="circle" />
+    </u-col>
+  </u-row>
+  <u-row>
+    <u-col :span="2.1" :offset="0.3" v-for="menu, index in menus" :key="index">
+      <geek-menu :icon="menu.icon" :label="menu.label" :size="60" @click="modal.msg(menu.label)" type="rect" />
+    </u-col>
+  </u-row>
+
+  <uni-section class="mb-10" title="商品列表" sub-title="commodity" type="line"></uni-section>
+  <geek-commodity v-for="item, index in commodityList" :key="index" :price="item.price" :title="item.title"
+    :sub-title="item.subTitle" :img="item.img" type="line" @click="modal.msg(item.title)" />
+  <geek-commodity v-for="item, index in commodityList" :key="index" :price="item.price" :title="item.title"
+    :sub-title="item.subTitle" :img="item.img" type="rect" @click="modal.msg(item.title)" />
+
+
+  <uni-section class="mb-10" title="订单列表" sub-title="order" type="line"></uni-section>
+  <geek-order v-for="item, index in orderList" :img="item.img" :label="item.title" :shop="item.shop" :status="item.status"
+    :price="item.price" @more="modal.msg('更多')" @again="modal.msg('再次购买')" @return="modal.msg('退换')"
+    @sell="modal.msg('卖了换钱')"></geek-order>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from 'vue';
+import modal from '@/plugins/modal.js'
+
+const menus = reactive([
+  { icon: "/static/images/icon/rocket.png", label: '抢单' },
+  { icon: "/static/images/icon/phone.png", label: '回访' },
+  { icon: "/static/images/icon/message.png", label: '消息' },
+  { icon: "/static/images/icon/dialogue.png", label: '公告' },
+  { icon: "/static/images/icon/knowledge.png", label: '知识库' }
+]);
+
+const commodityList = reactive([
+  {
+    img: '/static/images/banner/banner01.jpg',
+    title: '商品1',
+    subTitle: '商品1简介',
+    price: 100,
+  },
+  {
+    img: '/static/images/banner/banner02.jpg',
+    title: '商品2',
+    subTitle: '商品2简介',
+    price: 300,
+  },
+  {
+    img: '/static/images/banner/banner03.jpg',
+    title: '商品3',
+    subTitle: '商品3简介',
+    price: 200,
+  }
+])
+
+
+const orderList = [
+  {
+    shop: 'geek自营旗舰店',
+    status: '完成',
+    img: '/static/images/banner/banner01.jpg',
+    title: '商品1',
+    subTitle: '商品1简介',
+    price: 100,
+  },
+  {
+    shop: 'geek自营旗舰店',
+    status: '已取消',
+    img: '/static/images/banner/banner03.jpg',
+    title: '商商商商商商商商商商商商商商商商商商商商商商商商商商商商商商商商商商品3',
+    subTitle: '商品3简介',
+    price: 200,
+  }
+]
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/pages_template/pages/comment/index.vue b/src/pages_template/pages/comment/index.vue
index 34b856f..55497ce 100644
--- a/src/pages_template/pages/comment/index.vue
+++ b/src/pages_template/pages/comment/index.vue
@@ -45,7 +45,7 @@ export default {
 		// 跳转到全部回复
 		toAllReply() {
 			uni.navigateTo({
-				url: '/pages/template/comment/reply'
+				url: '/pages_template/pages/comment/reply'
 			});
 		},
 		// 点赞
diff --git a/src/pages_template/pages/index/index.vue b/src/pages_template/pages/index/index.vue
deleted file mode 100644
index c6d5e55..0000000
--- a/src/pages_template/pages/index/index.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<template>
-  <uni-section class="mb-10" title="数值板" sub-title="statistic" type="line"></uni-section>
-  <u-row gutter="0">
-    <u-col span="6">
-      <statistic label="订单数量(个)" labelColor="#1f1f1f" number="0" numberColor="red" />
-    </u-col>
-    <u-col span="6">
-      <statistic label="交易金额(元)" labelColor="#1f1f1f" number="0" numberColor="red" />
-    </u-col>
-  </u-row>
-
-  <uni-section class="mb-10" title="圆形菜单" sub-title="circle-menu" type="line"></uni-section>
-  <u-row>
-    <u-col :span="2.1" :offset="0.3" v-for="menu, index in menus" :key="index">
-      <circleMenu :icon="menu.icon" :label="menu.label" :size="60" @click="modal.msg(menu.label)"></circleMenu>
-    </u-col>
-  </u-row>
-</template>
-
-<script setup>
-import { ref, reactive, onMounted } from 'vue';
-import circleMenu from '../../components/circle-menu'
-import statistic from '../../components/statistic.vue';
-import modal from '@/plugins/modal.js'
-
-
-// 菜单板块
-const menus = reactive(
-  [
-    { icon: "/static/images/icon/rocket.png", label: '抢单' },
-    { icon: "/static/images/icon/phone.png", label: '回访' },
-    { icon: "/static/images/icon/message.png", label: '消息' },
-    { icon: "/static/images/icon/dialogue.png", label: '公告' },
-    { icon: "/static/images/icon/knowledge.png", label: '知识库' }
-  ]);
-</script>
-
-<style lang="scss" scoped></style>
diff --git a/src/pages_template/pages/login/index2.vue b/src/pages_template/pages/login/index2.vue
index cc6f0bb..8e80287 100644
--- a/src/pages_template/pages/login/index2.vue
+++ b/src/pages_template/pages/login/index2.vue
@@ -36,22 +36,22 @@
 		<!-- 登录 -->
 		<view v-else>
 			<view class="container">
-				<view class="cover slide-top1" :style="'animation-play-state:' + play3">
+				<view class="cover slide-top1" :style="'animation-play-state:' + play[2]">
 					<view class="masking slide-top" :class="[collapsedClass, { animating: isAnimating }]" ref="fixedView"
-						:style="'animation-play-state:' + play1">
+						:style="'animation-play-state:' + play[0]">
 						<uni-row>
 							<text class="text-first">欢迎使用</text>
 							<text class="text-second">校园访客</text>
 							<text class="text-third">预约系统</text>
-							<view :class="{ active: isActive === true, button: isActive !== true }" @click="play"
-								:style="'animation-play-state:' + play2">
+							<view :class="{ active: isActive === true, button: isActive !== true }" @click="startplay"
+								:style="'animation-play-state:' + play[1]">
 								<uni-row>
 									<text class="text-fifth">访客登录</text>
 								</uni-row>
 							</view>
-							<view class="shadow1" :style="'animation-play-state:' + play2" />
-							<view class="shadow2" :style="'animation-play-state:' + play2" />
-							<view class="shadow3" :style="'animation-play-state:' + play2" />
+							<view class="shadow1" :style="'animation-play-state:' + play[1]" />
+							<view class="shadow2" :style="'animation-play-state:' + play[1]" />
+							<view class="shadow3" :style="'animation-play-state:' + play[1]" />
 
 							<image
 								style="width: 100%;height: 1050rpx;opacity: 0.05;border-radius: 0 0 400rpx 400rpx;position: absolute;"
@@ -80,15 +80,11 @@ export default {
 			isFixedViewVisible: true,
 			animationType: "up", // 可选值：right 或 up
 			isAnimating: false, // 控制动画执行状态
-			play1: "paused",
-			play2: "paused",
-			play3: "paused",
-
+			play: ["paused", "paused", "paused"],
 			page: "index",
 
 			codeUrl: "",
 			captchaEnabled: true,
-			globalConfig: getApp().globalData.config,
 			loginForm: {
 				username: "admin",
 				password: "admin123",
@@ -107,30 +103,29 @@ export default {
 	},
 	methods: {
 		login() {
-			this.play3 = "running"
+			this.play[2] = "running"
 			setTimeout(() => { this.page = 'login' }, 1000)
 
 		},
 		back() {
 			this.page = 'index'
-			this.play1 = "paused"
-			this.play2 = "paused"
-			this.play3 = "paused"
-			console.log("index")
+			this.play[0] = "paused"
+			this.play[1] = "paused"
+			this.play[2] = "paused"
 		},
-		play() {
-			this.play2 = "running"
+		startplay() {
+			this.play[1] = "running"
 			this.isActive = true;
 			setTimeout(() => { this.isActive = false; }, 300);
 			if (this.isAnimating) { return; }
 			this.isAnimating = false; // 开始动画执行
-			this.play1 = "running"
+			this.play[0] = "running"
 			this.isFixedViewVisible = !this.isFixedViewVisible;
 			let fixedView = this.$refs.fixedView;
 			if (fixedView)
 				fixedView.addEventListener('transitionend', () => { this.isAnimating = false; }, { once: true });
 
-			setTimeout(() => { uni.navigateBack({delta: 1 }); }, 1000)
+			setTimeout(() => { uni.navigateBack({ delta: 1 }); }, 1000)
 		},
 
 
diff --git a/src/pages_template/pages/mallMenu/index1.vue b/src/pages_template/pages/mallMenu/index1.vue
index 6e1d7f8..b6d677e 100644
--- a/src/pages_template/pages/mallMenu/index1.vue
+++ b/src/pages_template/pages/mallMenu/index1.vue
@@ -8,22 +8,24 @@
 		</view>
 		<view class="u-menu-wrap">
 			<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop">
-				<view v-for="(item,index) in tabbar" :key="index" class="u-tab-item" :class="[current==index ? 'u-tab-item-active' : '']"
-				 :data-current="index" @tap.stop="swichMenu(index)">
-					<text class="u-line-1">{{item.name}}</text>
+				<view v-for="(item, index) in tabbar" :key="index" class="u-tab-item"
+					:class="[current == index ? 'u-tab-item-active' : '']" :data-current="index"
+					@tap.stop="swichMenu(index)">
+					<text class="u-line-1">{{ item.name }}</text>
 				</view>
 			</scroll-view>
-			<block v-for="(item,index) in tabbar" :key="index">
-				<scroll-view scroll-y class="right-box" v-if="current==index">
+			<block v-for="(item, index) in tabbar" :key="index">
+				<scroll-view scroll-y class="right-box" v-if="current == index">
 					<view class="page-view">
 						<view class="class-item">
 							<view class="item-title">
-								<text>{{item.name}}</text>
+								<text>{{ item.name }}</text>
 							</view>
 							<view class="item-container">
-								<view class="thumb-box" v-for="(item1, index1) in item.foods" :key="index1">
+								<view class="thumb-box" v-for="(item1, index1) in item.foods" :key="index1"
+									@click="clickMenu(item1)">
 									<image class="item-menu-image" :src="item1.icon" mode=""></image>
-									<view class="item-menu-name">{{item1.name}}</view>
+									<view class="item-menu-name">{{ item1.name }}</view>
 								</view>
 							</view>
 						</view>
@@ -35,172 +37,169 @@
 </template>
 
 <script>
-	import classifyData from "@/pages_template/common/classify.data.js";
-	export default {
-		data() {
-			return {
-				tabbar: classifyData,
-				scrollTop: 0, //tab标题的滚动条位置
-				current: 0, // 预设当前项的值
-				menuHeight: 0, // 左边菜单的高度
-				menuItemHeight: 0, // 左边菜单item的高度
+import classifyData from "@/pages_template/common/classify.data.js";
+export default {
+	data() {
+		return {
+			tabbar: classifyData,
+			scrollTop: 0, //tab标题的滚动条位置
+			current: 0, // 预设当前项的值
+			menuHeight: 0, // 左边菜单的高度
+			menuItemHeight: 0, // 左边菜单item的高度
+		}
+	},
+	methods: {
+		// 点击左边的栏目切换
+		async swichMenu(index) {
+			if (index == this.current) return;
+			this.current = index;
+			// 如果为0，意味着尚未初始化
+			if (this.menuHeight == 0 || this.menuItemHeight == 0) {
+				await this.getElRect('menu-scroll-view', 'menuHeight');
+				await this.getElRect('u-tab-item', 'menuItemHeight');
 			}
+			// 将菜单菜单活动item垂直居中
+			this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
 		},
-		computed: {
-			
+		// 获取一个目标元素的高度
+		getElRect(elClass, dataVal) {
+			new Promise((resolve, reject) => {
+				const query = uni.createSelectorQuery().in(this);
+				query.select('.' + elClass).fields({ size: true }, res => {
+					// 如果节点尚未生成，res值为null，循环调用执行
+					if (!res) {
+						setTimeout(() => {
+							this.getElRect(elClass);
+						}, 10);
+						return;
+					}
+					this[dataVal] = res.height;
+				}).exec();
+			})
 		},
-		methods: {
-			getImg() {
-				return Math.floor(Math.random() * 35);
-			},
-			// 点击左边的栏目切换
-			async swichMenu(index) {
-				if(index == this.current) return ;
-				this.current = index;
-				// 如果为0，意味着尚未初始化
-				if(this.menuHeight == 0 || this.menuItemHeight == 0) {
-					await this.getElRect('menu-scroll-view', 'menuHeight');
-					await this.getElRect('u-tab-item', 'menuItemHeight');
-				}
-				// 将菜单菜单活动item垂直居中
-				this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
-			},
-			// 获取一个目标元素的高度
-			getElRect(elClass, dataVal) {
-				new Promise((resolve, reject) => {
-					const query = uni.createSelectorQuery().in(this);
-					query.select('.' + elClass).fields({size: true},res => {
-						// 如果节点尚未生成，res值为null，循环调用执行
-						if(!res) {
-							setTimeout(() => {
-								this.getElRect(elClass);
-							}, 10);
-							return ;
-						}
-						this[dataVal] = res.height;
-					}).exec();
-				})
-			}
+		clickMenu(menu) {
+			console.log(menu);
 		}
 	}
+}
 </script>
 
 <style lang="scss" scoped>
-	.u-wrap {
-		height: calc(100vh);
-		/* #ifdef H5 */
-		height: calc(100vh - var(--window-top));
-		/* #endif */
-		display: flex;
-		flex-direction: column;
-	}
+.u-wrap {
+	height: calc(100vh);
+	/* #ifdef H5 */
+	height: calc(100vh - var(--window-top));
+	/* #endif */
+	display: flex;
+	flex-direction: column;
+}
 
-	.u-search-box {
-		padding: 18rpx 30rpx;
-	}
+.u-search-box {
+	padding: 18rpx 30rpx;
+}
 
-	.u-menu-wrap {
-		flex: 1;
-		display: flex;
-		overflow: hidden;
-	}
+.u-menu-wrap {
+	flex: 1;
+	display: flex;
+	overflow: hidden;
+}
 
-	.u-search-inner {
-		background-color: rgb(234, 234, 234);
-		border-radius: 100rpx;
-		display: flex;
-		align-items: center;
-		padding: 10rpx 16rpx;
-	}
+.u-search-inner {
+	background-color: rgb(234, 234, 234);
+	border-radius: 100rpx;
+	display: flex;
+	align-items: center;
+	padding: 10rpx 16rpx;
+}
 
-	.u-search-text {
-		font-size: 26rpx;
-		color: $u-tips-color;
-		margin-left: 10rpx;
-	}
+.u-search-text {
+	font-size: 26rpx;
+	color: $u-tips-color;
+	margin-left: 10rpx;
+}
 
-	.u-tab-view {
-		width: 200rpx;
-		height: 100%;
-	}
+.u-tab-view {
+	width: 200rpx;
+	height: 100%;
+}
 
-	.u-tab-item {
-		height: 110rpx;
-		background: #f6f6f6;
-		box-sizing: border-box;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		font-size: 26rpx;
-		color: #444;
-		font-weight: 400;
-		line-height: 1;
-	}
-	
-	.u-tab-item-active {
-		position: relative;
-		color: #000;
-		font-size: 30rpx;
-		font-weight: 600;
-		background: #fff;
-	}
-	
-	.u-tab-item-active::before {
-		content: "";
-		position: absolute;
-		border-left: 4px solid $u-primary;
-		height: 32rpx;
-		left: 0;
-		top: 39rpx;
-	}
+.u-tab-item {
+	height: 110rpx;
+	background: #f6f6f6;
+	box-sizing: border-box;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 26rpx;
+	color: #444;
+	font-weight: 400;
+	line-height: 1;
+}
 
-	.u-tab-view {
-		height: 100%;
-	}
-	
-	.right-box {
-		background-color: rgb(250, 250, 250);
-	}
-	
-	.page-view {
-		padding: 16rpx;
-	}
-	
-	.class-item {
-		margin-bottom: 30rpx;
-		background-color: #fff;
-		padding: 16rpx;
-		border-radius: 8rpx;
-	}
-	
-	.item-title {
-		font-size: 26rpx;
-		color: $u-main-color;
-		font-weight: bold;
-	}
-	
-	.item-menu-name {
-		font-weight: normal;
-		font-size: 24rpx;
-		color: $u-main-color;
-	}
-	
-	.item-container {
-		display: flex;
-		flex-wrap: wrap;
-	}
-	
-	.thumb-box {
-		width: 33.333333%;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		flex-direction: column;
-		margin-top: 20rpx;
-	}
-	
-	.item-menu-image {
-		width: 120rpx;
-		height: 120rpx;
-	}
+.u-tab-item-active {
+	position: relative;
+	color: #000;
+	font-size: 30rpx;
+	font-weight: 600;
+	background: #fff;
+}
+
+.u-tab-item-active::before {
+	content: "";
+	position: absolute;
+	border-left: 4px solid $u-primary;
+	height: 32rpx;
+	left: 0;
+	top: 39rpx;
+}
+
+.u-tab-view {
+	height: 100%;
+}
+
+.right-box {
+	background-color: rgb(250, 250, 250);
+}
+
+.page-view {
+	padding: 16rpx;
+}
+
+.class-item {
+	margin-bottom: 30rpx;
+	background-color: #fff;
+	padding: 16rpx;
+	border-radius: 8rpx;
+}
+
+.item-title {
+	font-size: 26rpx;
+	color: $u-main-color;
+	font-weight: bold;
+}
+
+.item-menu-name {
+	font-weight: normal;
+	font-size: 24rpx;
+	color: $u-main-color;
+}
+
+.item-container {
+	display: flex;
+	flex-wrap: wrap;
+}
+
+.thumb-box {
+	width: 33.333333%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-direction: column;
+	margin-top: 20rpx;
+}
+
+.item-menu-image {
+	width: 120rpx;
+	height: 120rpx;
+}
 </style>
diff --git a/src/pages_template/pages/mallMenu/index2.vue b/src/pages_template/pages/mallMenu/index2.vue
index 0418b3b..0cc28a5 100644
--- a/src/pages_template/pages/mallMenu/index2.vue
+++ b/src/pages_template/pages/mallMenu/index2.vue
@@ -8,22 +8,24 @@
 		</view>
 		<view class="u-menu-wrap">
 			<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop"
-			 :scroll-into-view="itemId">
-				<view v-for="(item,index) in tabbar" :key="index" class="u-tab-item" :class="[current == index ? 'u-tab-item-active' : '']"
-				 @tap.stop="swichMenu(index)">
-					<text class="u-line-1">{{item.name}}</text>
+				:scroll-into-view="itemId">
+				<view v-for="(item, index) in tabbar" :key="index" class="u-tab-item"
+					:class="[current == index ? 'u-tab-item-active' : '']" @tap.stop="swichMenu(index)">
+					<text class="u-line-1">{{ item.name }}</text>
 				</view>
 			</scroll-view>
-			<scroll-view :scroll-top="scrollRightTop" scroll-y scroll-with-animation class="right-box" @scroll="rightScroll">
+			<scroll-view :scroll-top="scrollRightTop" scroll-y scroll-with-animation class="right-box"
+				@scroll="rightScroll">
 				<view class="page-view">
-					<view class="class-item" :id="'item' + index" v-for="(item , index) in tabbar" :key="index">
+					<view class="class-item" :id="'item' + index" v-for="(item, index) in tabbar" :key="index">
 						<view class="item-title">
-							<text>{{item.name}}</text>
+							<text>{{ item.name }}</text>
 						</view>
 						<view class="item-container">
-							<view class="thumb-box" v-for="(item1, index1) in item.foods" :key="index1">
+							<view class="thumb-box" v-for="(item1, index1) in item.foods" :key="index1"
+								@click="clickMenu(item1)">
 								<image class="item-menu-image" :src="item1.icon" mode=""></image>
-								<view class="item-menu-name">{{item1.name}}</view>
+								<view class="item-menu-name">{{ item1.name }}</view>
 							</view>
 						</view>
 					</view>
@@ -33,259 +35,259 @@
 	</view>
 </template>
 <script>
-	import classifyData from '@/pages_template/common/classify.data.js';
-	export default {
-		data() {
-			return {
-				scrollTop: 0, //tab标题的滚动条位置
-				oldScrollTop: 0,
-				current: 0, // 预设当前项的值
-				menuHeight: 0, // 左边菜单的高度
-				menuItemHeight: 0, // 左边菜单item的高度
-				itemId: '', // 栏目右边scroll-view用于滚动的id
-				tabbar: classifyData,
-				menuItemPos: [],
-				arr: [],
-				scrollRightTop: 0, // 右边栏目scroll-view的滚动条高度
-				timer: null, // 定时器
-				
+import classifyData from '@/pages_template/common/classify.data.js';
+export default {
+	data() {
+		return {
+			scrollTop: 0, //tab标题的滚动条位置
+			oldScrollTop: 0,
+			current: 0, // 预设当前项的值
+			menuHeight: 0, // 左边菜单的高度
+			menuItemHeight: 0, // 左边菜单item的高度
+			itemId: '', // 栏目右边scroll-view用于滚动的id
+			tabbar: classifyData,
+
+			arr: [],
+			scrollRightTop: 0, // 右边栏目scroll-view的滚动条高度
+			timer: null, // 定时器
+
+		}
+	},
+	onReady() {
+		this.getMenuItemTop()
+	},
+	methods: {
+		// 点击左边的栏目切换
+		async swichMenu(index) {
+			if (this.arr.length == 0) {
+				await this.getMenuItemTop();
 			}
-		},
-		onLoad() {
-			
-		},
-		onReady() {
-			this.getMenuItemTop()
-		},
-		methods: {
-			// 点击左边的栏目切换
-			async swichMenu(index) {
-				if(this.arr.length == 0) {
-					await this.getMenuItemTop();
-				}
-				if (index == this.current) return;
-				this.scrollRightTop = this.oldScrollTop;
-				this.$nextTick(()=>{
-					this.scrollRightTop = this.arr[index];
-					this.current = index;
-					this.leftMenuStatus(index);
-				})
-			},
-			// 获取一个目标元素的高度
-			getElRect(elClass, dataVal) {
-				new Promise((resolve, reject) => {
-					const query = uni.createSelectorQuery().in(this);
-					query.select('.' + elClass).fields({
-						size: true
-					}, res => {
-						// 如果节点尚未生成，res值为null，循环调用执行
-						if (!res) {
-							setTimeout(() => {
-								this.getElRect(elClass);
-							}, 10);
-							return;
-						}
-						this[dataVal] = res.height;
-						resolve();
-					}).exec();
-				})
-			},
-			// 观测元素相交状态
-			async observer() {
-				this.tabbar.map((val, index) => {
-					let observer = uni.createIntersectionObserver(this);
-					// 检测右边scroll-view的id为itemxx的元素与right-box的相交状态
-					// 如果跟.right-box底部相交，就动态设置左边栏目的活动状态
-					observer.relativeTo('.right-box', {
-						top: 0
-					}).observe('#item' + index, res => {
-						if (res.intersectionRatio > 0) {
-							let id = res.id.substring(4);
-							this.leftMenuStatus(id);
-						}
-					})
-				})
-			},
-			// 设置左边菜单的滚动状态
-			async leftMenuStatus(index) {
+			if (index == this.current) return;
+			this.scrollRightTop = this.oldScrollTop;
+			this.$nextTick(() => {
+				this.scrollRightTop = this.arr[index];
 				this.current = index;
-				// 如果为0，意味着尚未初始化
-				if (this.menuHeight == 0 || this.menuItemHeight == 0) {
-					await this.getElRect('menu-scroll-view', 'menuHeight');
-					await this.getElRect('u-tab-item', 'menuItemHeight');
-				}
-				// 将菜单活动item垂直居中
-				this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
-			},
-			// 获取右边菜单每个item到顶部的距离
-			getMenuItemTop() {
-				new Promise(resolve => {
-					let selectorQuery = uni.createSelectorQuery();
-					selectorQuery.selectAll('.class-item').boundingClientRect((rects) => {
-						// 如果节点尚未生成，rects值为[](因为用selectAll，所以返回的是数组)，循环调用执行
-						if(!rects.length) {
-							setTimeout(() => {
-								this.getMenuItemTop();
-							}, 10);
-							return ;
-						}
-						rects.forEach((rect) => {
-							// 这里减去rects[0].top，是因为第一项顶部可能不是贴到导航栏(比如有个搜索框的情况)
-							this.arr.push(rect.top - rects[0].top);
-							resolve();
-						})
-					}).exec()
-				})
-			},
-			// 右边菜单滚动
-			async rightScroll(e) {
-				this.oldScrollTop = e.detail.scrollTop;
-				if(this.arr.length == 0) {
-					await this.getMenuItemTop();
-				}
-				if(this.timer) return ;
-				if(!this.menuHeight) {
-					await this.getElRect('menu-scroll-view', 'menuHeight');
-				}
-				setTimeout(() => { // 节流
-					this.timer = null;
-					// scrollHeight为右边菜单垂直中点位置
-					let scrollHeight = e.detail.scrollTop + this.menuHeight / 2;
-					for (let i = 0; i < this.arr.length; i++) {
-						let height1 = this.arr[i];
-						let height2 = this.arr[i + 1];
-						// 如果不存在height2，意味着数据循环已经到了最后一个，设置左边菜单为最后一项即可
-						if (!height2 || scrollHeight >= height1 && scrollHeight < height2) {
-							this.leftMenuStatus(i);
-							return ;
-						}
+				this.leftMenuStatus(index);
+			})
+		},
+		// 获取一个目标元素的高度
+		getElRect(elClass, dataVal) {
+			new Promise((resolve, reject) => {
+				const query = uni.createSelectorQuery().in(this);
+				query.select('.' + elClass).fields({
+					size: true
+				}, res => {
+					// 如果节点尚未生成，res值为null，循环调用执行
+					if (!res) {
+						setTimeout(() => {
+							this.getElRect(elClass);
+						}, 10);
+						return;
 					}
-				}, 10)
+					this[dataVal] = res.height;
+					resolve();
+				}).exec();
+			})
+		},
+		// 观测元素相交状态
+		async observer() {
+			this.tabbar.map((val, index) => {
+				let observer = uni.createIntersectionObserver(this);
+				// 检测右边scroll-view的id为itemxx的元素与right-box的相交状态
+				// 如果跟.right-box底部相交，就动态设置左边栏目的活动状态
+				observer.relativeTo('.right-box', {
+					top: 0
+				}).observe('#item' + index, res => {
+					if (res.intersectionRatio > 0) {
+						let id = res.id.substring(4);
+						this.leftMenuStatus(id);
+					}
+				})
+			})
+		},
+		// 设置左边菜单的滚动状态
+		async leftMenuStatus(index) {
+			this.current = index;
+			// 如果为0，意味着尚未初始化
+			if (this.menuHeight == 0 || this.menuItemHeight == 0) {
+				await this.getElRect('menu-scroll-view', 'menuHeight');
+				await this.getElRect('u-tab-item', 'menuItemHeight');
 			}
+			// 将菜单活动item垂直居中
+			this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
+		},
+		// 获取右边菜单每个item到顶部的距离
+		getMenuItemTop() {
+			new Promise(resolve => {
+				let selectorQuery = uni.createSelectorQuery();
+				selectorQuery.selectAll('.class-item').boundingClientRect((rects) => {
+					// 如果节点尚未生成，rects值为[](因为用selectAll，所以返回的是数组)，循环调用执行
+					if (!rects.length) {
+						setTimeout(() => {
+							this.getMenuItemTop();
+						}, 10);
+						return;
+					}
+					rects.forEach((rect) => {
+						// 这里减去rects[0].top，是因为第一项顶部可能不是贴到导航栏(比如有个搜索框的情况)
+						this.arr.push(rect.top - rects[0].top);
+						resolve();
+					})
+				}).exec()
+			})
+		},
+		// 右边菜单滚动
+		async rightScroll(e) {
+			this.oldScrollTop = e.detail.scrollTop;
+			if (this.arr.length == 0) {
+				await this.getMenuItemTop();
+			}
+			if (this.timer) return;
+			if (!this.menuHeight) {
+				await this.getElRect('menu-scroll-view', 'menuHeight');
+			}
+			setTimeout(() => { // 节流
+				this.timer = null;
+				// scrollHeight为右边菜单垂直中点位置
+				let scrollHeight = e.detail.scrollTop + this.menuHeight / 2;
+				for (let i = 0; i < this.arr.length; i++) {
+					let height1 = this.arr[i];
+					let height2 = this.arr[i + 1];
+					// 如果不存在height2，意味着数据循环已经到了最后一个，设置左边菜单为最后一项即可
+					if (!height2 || scrollHeight >= height1 && scrollHeight < height2) {
+						this.leftMenuStatus(i);
+						return;
+					}
+				}
+			}, 10)
+		},
+		clickMenu(menu) {
+			console.log(menu);
 		}
 	}
+}
 </script>
 
 <style lang="scss" scoped>
-	.u-wrap {
-		height: calc(100vh);
-		/* #ifdef H5 */
-		height: calc(100vh - var(--window-top));
-		/* #endif */
-		display: flex;
-		flex-direction: column;
-	}
+.u-wrap {
+	height: calc(100vh);
+	/* #ifdef H5 */
+	height: calc(100vh - var(--window-top));
+	/* #endif */
+	display: flex;
+	flex-direction: column;
+}
 
-	.u-search-box {
-		padding: 18rpx 30rpx;
-	}
+.u-search-box {
+	padding: 18rpx 30rpx;
+}
 
-	.u-menu-wrap {
-		flex: 1;
-		display: flex;
-		overflow: hidden;
-	}
+.u-menu-wrap {
+	flex: 1;
+	display: flex;
+	overflow: hidden;
+}
 
-	.u-search-inner {
-		background-color: rgb(234, 234, 234);
-		border-radius: 100rpx;
-		display: flex;
-		align-items: center;
-		padding: 10rpx 16rpx;
-	}
+.u-search-inner {
+	background-color: rgb(234, 234, 234);
+	border-radius: 100rpx;
+	display: flex;
+	align-items: center;
+	padding: 10rpx 16rpx;
+}
 
-	.u-search-text {
-		font-size: 26rpx;
-		color: $u-tips-color;
-		margin-left: 10rpx;
-	}
+.u-search-text {
+	font-size: 26rpx;
+	color: $u-tips-color;
+	margin-left: 10rpx;
+}
 
-	.u-tab-view {
-		width: 200rpx;
-		height: 100%;
-	}
+.u-tab-view {
+	width: 200rpx;
+	height: 100%;
+}
 
-	.u-tab-item {
-		height: 110rpx;
-		background: #f6f6f6;
-		box-sizing: border-box;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		font-size: 26rpx;
-		color: #444;
-		font-weight: 400;
-		line-height: 1;
-	}
+.u-tab-item {
+	height: 110rpx;
+	background: #f6f6f6;
+	box-sizing: border-box;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 26rpx;
+	color: #444;
+	font-weight: 400;
+	line-height: 1;
+}
 
-	.u-tab-item-active {
-		position: relative;
-		color: #000;
-		font-size: 30rpx;
-		font-weight: 600;
-		background: #fff;
-	}
+.u-tab-item-active {
+	position: relative;
+	color: #000;
+	font-size: 30rpx;
+	font-weight: 600;
+	background: #fff;
+}
 
-	.u-tab-item-active::before {
-		content: "";
-		position: absolute;
-		border-left: 4px solid $u-primary;
-		height: 32rpx;
-		left: 0;
-		top: 39rpx;
-	}
+.u-tab-item-active::before {
+	content: "";
+	position: absolute;
+	border-left: 4px solid $u-primary;
+	height: 32rpx;
+	left: 0;
+	top: 39rpx;
+}
 
-	.u-tab-view {
-		height: 100%;
-	}
+.u-tab-view {
+	height: 100%;
+}
 
-	.right-box {
-		background-color: rgb(250, 250, 250);
-	}
+.right-box {
+	background-color: rgb(250, 250, 250);
+}
 
-	.page-view {
-		padding: 16rpx;
-	}
+.page-view {
+	padding: 16rpx;
+}
 
-	.class-item {
-		margin-bottom: 30rpx;
-		background-color: #fff;
-		padding: 16rpx;
-		border-radius: 8rpx;
-	}
+.class-item {
+	margin-bottom: 30rpx;
+	background-color: #fff;
+	padding: 16rpx;
+	border-radius: 8rpx;
+}
 
-	.class-item:last-child {
-		min-height: 100vh;
-	}
+.class-item:last-child {
+	min-height: 100vh;
+}
 
-	.item-title {
-		font-size: 26rpx;
-		color: $u-main-color;
-		font-weight: bold;
-	}
+.item-title {
+	font-size: 26rpx;
+	color: $u-main-color;
+	font-weight: bold;
+}
 
-	.item-menu-name {
-		font-weight: normal;
-		font-size: 24rpx;
-		color: $u-main-color;
-	}
+.item-menu-name {
+	font-weight: normal;
+	font-size: 24rpx;
+	color: $u-main-color;
+}
 
-	.item-container {
-		display: flex;
-		flex-wrap: wrap;
-	}
+.item-container {
+	display: flex;
+	flex-wrap: wrap;
+}
 
-	.thumb-box {
-		width: 33.333333%;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		flex-direction: column;
-		margin-top: 20rpx;
-	}
+.thumb-box {
+	width: 33.333333%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-direction: column;
+	margin-top: 20rpx;
+}
 
-	.item-menu-image {
-		width: 120rpx;
-		height: 120rpx;
-	}
+.item-menu-image {
+	width: 120rpx;
+	height: 120rpx;
+}
 </style>