From 00567505c20e5b44bb4fa9281507c76e93555b98 Mon Sep 17 00:00:00 2001
From: weipengfei <2187978347@qq.com>
Date: Fri, 5 Apr 2024 13:44:36 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development                   |   2 +-
 src/api/shop.js                    |  22 +++
 src/api/store.js                   |  43 +++--
 src/components/pay.vue             | 288 +++++++++++++++++++++++++++++
 src/layout/index.vue               |   4 +
 src/layout/myAside.vue             |   5 +
 src/layout/myHeader.vue            |   2 +-
 src/router/index.js                |  13 +-
 src/utils/axios.js                 |   8 +-
 src/utils/ws.js                    |  32 ++++
 src/views/home/component/order.vue |  24 ++-
 src/views/home/component/pay.vue   | 182 ------------------
 src/views/home/component/pupop.vue |  61 ++++--
 src/views/home/component/shop.vue  |  75 ++++++--
 src/views/home/index.vue           |  52 ++++--
 src/views/login/index.vue          |   6 +
 src/views/notFound/index.vue       |  24 +++
 src/views/order/index.vue          | 213 ++++++++++++++++-----
 src/views/shop/index.vue           | 178 ++++++++++++++++++
 19 files changed, 933 insertions(+), 301 deletions(-)
 create mode 100644 src/api/shop.js
 create mode 100644 src/components/pay.vue
 create mode 100644 src/utils/ws.js
 delete mode 100644 src/views/home/component/pay.vue
 create mode 100644 src/views/notFound/index.vue
 create mode 100644 src/views/shop/index.vue

diff --git a/.env.development b/.env.development
index e856970..60a7958 100644
--- a/.env.development
+++ b/.env.development
@@ -1,2 +1,2 @@
-VITE_BASE_URL = 'http://192.168.1.16:8324'
+VITE_BASE_URL = 'http://192.168.1.22:8324'
 # VITE_BASE_URL = 'https://crmeb-test.shop.lihaink.cn'
\ No newline at end of file
diff --git a/src/api/shop.js b/src/api/shop.js
new file mode 100644
index 0000000..9b61767
--- /dev/null
+++ b/src/api/shop.js
@@ -0,0 +1,22 @@
+import request from '@/utils/axios.js'
+
+/**
+  * @description 商品列表
+  */
+export function storeListApi(id, data) {
+    return request.get(`server/${id}/product/lst`, { params: data })
+}
+
+/**
+  * @description 商品详情
+  */
+export function getAttrValue(id, data) {
+  return request.get(`store/product/detail/${id}`, { params: data })
+}
+
+/**
+  * @description 免审编辑
+  */
+export function userFreeTrialApi(id, data) {
+  return request.post(`user_free_trial/${id}`, data)
+}
diff --git a/src/api/store.js b/src/api/store.js
index 316713a..7b2e8c4 100644
--- a/src/api/store.js
+++ b/src/api/store.js
@@ -1,12 +1,5 @@
 import request from '@/utils/axios.js'
 
-/**
-  * @description 商品列表
-  */
-export function storeListApi(id, data) {
-    return request.get(`server/${id}/product/lst`, { params: data })
-}
-
 /**
   * @description 加入购物车
   */
@@ -22,7 +15,7 @@ export function cartListApi(data) {
 }
 
 /**
-  * @description 购物数量加减
+  * @description 编辑购物车数据
   */
 export function cartChangeApi(id, data) {
   return request.post(`user/cart/change/${id}`, data)
@@ -50,23 +43,37 @@ export function orderCreateApi(data) {
   return request.post(`v2/order/create`, data)
 }
 
+/**
+  * @description 重新支付
+  */
+export function orderPayApi(id, data) {
+  return request.post(`order/pay/${id}`, data)
+}
+
 /**
   * @description 订单状态
   */
-export function orderStatusApi(id) {
-  return request.get(`micropay_query`, { params: { order_id: id } })
+export function orderStatusApi(data) {
+  return request.get(`micropay_query`, { params: data })
 }
 
 /**
   * @description 订单列表
   */
-export function orderListApi(data) {
-  return request.get(`/order/list`, { params: data })
+export function orderListApi(id, data) {
+  return request.get(`admin/${id}/order_list`, { params: data })
 }
 
-// /**
-//   * @description 购物车数量
-//   */
-// export function cartListApi(id, data) {
-//   return request.get(`count`, { params: data })
-// }
\ No newline at end of file
+/**
+  * @description 未支付订单列表
+  */
+export function groupOrderListApi(id, data) {
+  return request.get(`admin/${id}/group_order_list`, { params: data })
+}
+
+/**
+  * @description 提单
+  */
+export function orderLadingApi(data) {
+  return request.get(`order_lading`, { params: data })
+}
\ No newline at end of file
diff --git a/src/components/pay.vue b/src/components/pay.vue
new file mode 100644
index 0000000..6b0a0ef
--- /dev/null
+++ b/src/components/pay.vue
@@ -0,0 +1,288 @@
+<script setup>
+import { ref, watch, nextTick } from "vue";
+import { orderCreateApi, orderStatusApi, orderPayApi } from "@/api/store.js";
+import { ElMessage } from "element-plus";
+
+const drawer = ref(false);
+const active = ref(1);
+const input = ref("");
+const codeRef = ref("");
+
+const cancelClick = () => {
+  beforeClose();
+};
+
+const open = () => {
+  nextTick(() => {
+    setTimeout(() => {
+      loading.value = false;
+      input.value = "";
+      reLoad.value = true;
+      codeRef.value.focus();
+    }, 300);
+  });
+};
+
+const form = ref({});
+const cart_id = ref([]);
+const setForm = (e) => {
+  form.value = e.data;
+  cart_id.value = e.cart_id;
+};
+
+const setRePay = (e) => {
+  form.value.total_price = e.price;
+  order_id.value = e.order_id;
+};
+
+const emit = defineEmits(["paySuccess"]);
+
+const reLoad = ref(false);
+
+let timeout = 0; //刷新间隔
+
+const order_id = ref("");
+// 支付
+const handleEnter = () => {
+  loading.value = true;
+  codeRef.value.blur();
+  if (order_id.value) orderPay(order_id.value);
+  else
+    orderCreateApi({
+      address_id: "",
+      key: form.value.key,
+      cart_id: cart_id.value,
+      pay_type: "micropay",
+      auth_code: input.value,
+      source: 300,
+    })
+      .then((res) => {
+        if (res.status==200&& res.message=='支付成功') {
+          drawer.value = false;
+          ElMessage({
+            message: res.message,
+            type: "success",
+          });
+          beforeClose();
+        } else {
+          order_id.value = res.data.group_order_id;
+          count.value = 0;
+          timeout = 0;
+          getOrderStatus(res.data.group_order_sn);
+        }
+      })
+      .catch((err) => {
+        loading.value = false;
+        nextTick(() => {
+          codeRef.value.focus();
+        });
+      });
+};
+
+const orderPay = (id) => {
+  orderPayApi(id, {
+    type: "micropay",
+    auth_code: input.value,
+  })
+    .then((res) => {
+      if (res.data.status == "success") {
+        drawer.value = false;
+        ElMessage({
+          message: res.message,
+          type: "success",
+        });
+        beforeClose();
+      } else {
+        order_id.value = res.data.group_order_id;
+        count.value = 0;
+        timeout = 0;
+        getOrderStatus(res.data.group_order_sn);
+      }
+    })
+    .catch((err) => {
+      input.value = "";
+      loading.value = false;
+      nextTick(() => {
+        codeRef.value.focus();
+      });
+    });
+};
+
+const count = ref(0); // 累计请求3次, 如果3次都失败, 则只能重新支付
+const getOrderStatus = (id) => {
+  count.value++;
+  timeout+=5000;
+  orderStatusApi({
+    order_sn: id,
+  })
+    .then((res) => {
+      if (res.data.paid == 1 || res.message == "支付成功") {
+        ElMessage({
+          message: res.message,
+          type: "success",
+        });
+        beforeClose();
+      } else {
+        ElMessage({
+          message: res.message,
+          type: "error",
+        });
+        input.value = "";
+        loading.value = false;
+        nextTick(() => {
+          codeRef.value.focus();
+        });
+      }
+    })
+    .catch((err) => {
+      if (reLoad.value && count.value < 3)
+        setTimeout(() => {
+          getOrderStatus(id);
+        }, timeout);
+      else {
+        input.value = "";
+        loading.value = false;
+        nextTick(() => {
+          codeRef.value.focus();
+        });
+      }
+    });
+};
+
+const beforeClose = () => {
+  reLoad.value = false;
+  loading.value = false;
+  input.value = "";
+  codeRef.value.blur();
+  emit("paySuccess");
+  drawer.value = false;
+};
+
+const loading = ref(false);
+
+defineExpose({
+  drawer,
+  setForm,
+  setRePay
+});
+</script>
+
+<template>
+  <el-drawer
+    :size="800"
+    v-model="drawer"
+    direction="rtl"
+    @open="open"
+    :before-close="beforeClose"
+  >
+    <template #header>
+      <h4>选择支付方式</h4>
+    </template>
+    <template #default>
+      <div class="dra-body">
+        <div class="header">
+          <div
+            class="left"
+            :class="{ active: active == 1 }"
+            @click="active = 1"
+          >
+            微信
+          </div>
+          <div
+            class="right"
+            :class="{ active: active == 2 }"
+            @click="active = 2"
+          >
+            现金收款
+          </div>
+        </div>
+        <div style="color: #999; padding: 2rem 0 0.3rem 0">应收金额(元):</div>
+        <div style="color: #f5222d; padding-bottom: 2rem">
+          ¥<span style="font-size: 1.6rem">{{ form.total_price }}</span>
+        </div>
+        <div
+          v-loading="loading"
+          element-loading-text="支付中"
+          class="card1"
+          v-if="active == 1"
+        >
+          <el-input
+            ref="codeRef"
+            v-model="input"
+            autofocus
+            class="code-input"
+            placeholder="请点击输入框聚焦扫码或输入编码号"
+            @keyup.enter="handleEnter"
+          />
+          <div class="tips"></div>
+        </div>
+        <div class="card2" v-else>
+          <div>现金收款正在开发中</div>
+          <!-- <el-input ref="codeRef" v-model="input" autofocus class="code-input" placeholder="请点击输入框输入金额" /> -->
+        </div>
+      </div>
+    </template>
+    <template #footer>
+      <div style="width: 100%; display: flex; justify-content: center">
+        <el-button class="cancel-btn" @click="cancelClick">取消收款</el-button>
+      </div>
+    </template>
+  </el-drawer>
+</template>
+
+<style lang="scss" scoped>
+.dra-body {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  .header {
+    width: 25rem;
+    display: flex;
+    & > div {
+      flex: 1;
+      border: 1px solid #ccc;
+      text-align: center;
+      padding: 0.6rem 0;
+      cursor: pointer;
+    }
+    .left {
+      border-right: none;
+      border-radius: 5rem 0 0 5rem;
+    }
+    .right {
+      border-left: none;
+      border-radius: 0 5rem 5rem 0;
+    }
+    .active {
+      background-color: #1890ff;
+      color: #fff;
+      transition: 300ms;
+      border-color: #1890ff;
+    }
+  }
+  .card1 {
+    .code-input {
+      width: 100%;
+      height: 3rem;
+    }
+    .tips {
+      width: 38rem;
+      height: 16rem;
+      background: url("https://multi-store.crmeb.net/view_cashier/img/alipay.d0e0aa1f.png");
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+    }
+  }
+}
+
+.cancel-btn {
+  width: 60%;
+  border-color: #1890ff;
+  color: #1890ff;
+  border-radius: 5rem;
+  height: 3rem;
+  font-size: 1.2rem;
+}
+</style>
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 7f2b3b9..8ebbb8e 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -1,6 +1,10 @@
 <script setup>
 import myHeader from "./myHeader.vue";
 import myAside from "./myAside.vue";
+import { initWS } from "@/utils/ws";
+
+const ws = initWS('eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiIxMjcuMC4wLjE6ODMyNCIsImF1ZCI6IjEyNy4wLjAuMTo4MzI0IiwiaWF0IjoxNzEyMTI4NDczLCJuYmYiOjE3MTIxMjg0NzMsImV4cCI6MTcxMjE1MDA3MywianRpIjpbMzAsIm1lciJdfQ.1HO_Ax3wxW-gloTRn6Psy4KYEdv8kuEqlgTJSl4G4Wk');
+
 </script>
 
 <template>
diff --git a/src/layout/myAside.vue b/src/layout/myAside.vue
index 053e9d1..2353d58 100644
--- a/src/layout/myAside.vue
+++ b/src/layout/myAside.vue
@@ -21,6 +21,10 @@ const navTo = (name) => {
             <el-icon size="30"><DataLine /></el-icon>
             <div>订单</div>
         </div>
+        <div class="list-item" :class="{'active': route.name=='shop'}" @click="navTo('shop')">
+            <el-icon size="30"><ShoppingBag /></el-icon>
+            <div>商品</div>
+        </div>
     </div>
 </template>
 
@@ -35,6 +39,7 @@ const navTo = (name) => {
         width: 4.5rem;
         height: 4.5rem;
         border-radius: 0.7rem;
+        cursor: pointer;
         display: flex;
         flex-direction: column;
         justify-content: center;
diff --git a/src/layout/myHeader.vue b/src/layout/myHeader.vue
index 6ff53b5..5698cd8 100644
--- a/src/layout/myHeader.vue
+++ b/src/layout/myHeader.vue
@@ -36,7 +36,7 @@ const onLogout = () => {
 <template>
   <div class="my-card">
     <div class="card-header">
-      <el-image
+      <el-image loading="lazy"
         src="https://multi-store.crmeb.net/uploads/attach/store/2024/03/20240314/6cea2e0fd02480fc6fb62a9783a9ac43.png"
       ></el-image>
       <div class="card-title">里海收银系统</div>
diff --git a/src/router/index.js b/src/router/index.js
index 86ac836..7d2bfa2 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -19,7 +19,12 @@ const routes = [
           path: '/order',
           name: 'order',
           component: () => import('@/views/order/index.vue'),
-      }
+      },
+      {
+        path: '/shop',
+        name: 'shop',
+        component: () => import('@/views/shop/index.vue'),
+    }
     ]
   },
   {
@@ -27,6 +32,12 @@ const routes = [
     name: 'login',
     component: () => import('@/views/login/index.vue'),
   },
+  // 注意：通配符路由要放在最后
+  {
+    path: '/:catchAll(.*)',
+    name: 'notFound',
+    component: () => import('@/views/notFound/index.vue') // 使用 404 页面组件
+  }
 ];
 
 const router = createRouter({
diff --git a/src/utils/axios.js b/src/utils/axios.js
index b589d29..30c265e 100644
--- a/src/utils/axios.js
+++ b/src/utils/axios.js
@@ -5,7 +5,7 @@ import { useUserStore } from "../store/user";
 
 const request = axios.create({
     baseURL: import.meta.env.VITE_BASE_URL + '/api',
-    timeout: 5000
+    timeout: 10000
 })
 
 // 请求拦截器
@@ -30,7 +30,7 @@ request.interceptors.request.use(
 request.interceptors.response.use(
     response => {
         // 对响应数据做些什么，例如解析数据、统一处理错误等
-        if (response.data.status === 401 || response.data.status === 4000) {   
+        if (response.data.status === 401 || response.data.status === 40000) {   
             const router = useRouter();
             ElMessage({
                 message: response.data.message,
@@ -41,7 +41,7 @@ request.interceptors.response.use(
                 userStore.setUserInfo({});
                 userStore.setToken('');
                 router.push('/login');
-            }, 1000);
+            }, 800);
         }
         if (response.data.status === 400) {   
             ElMessage({
@@ -55,7 +55,7 @@ request.interceptors.response.use(
         // 处理响应错误
         console.error(error);
         ElMessage({
-            message: error,
+            message: error.response?.data?.message || error, 
             type: 'error',
         })
         return Promise.reject(error);
diff --git a/src/utils/ws.js b/src/utils/ws.js
new file mode 100644
index 0000000..c02b954
--- /dev/null
+++ b/src/utils/ws.js
@@ -0,0 +1,32 @@
+
+export const initWS = (token)=>{
+    let ws = new WebSocket('ws://192.168.1.22:8324?type=mer&token='+token);
+
+    ws.onopen = function (e) {
+        console.log('WebSocket 连接已建立');
+        // 开始发送心跳
+        startHeartbeat();
+    }
+
+    ws.onclose = () => {
+        console.log('WebSocket 连接已关闭');
+        // 停止发送心跳
+        stopHeartbeat();
+    };
+
+    let heartbeatTimer = null;
+    // 开始发送心跳
+    const startHeartbeat = () => {
+        heartbeatTimer = setInterval(() => {
+            console.log('发送心跳消息');
+            ws.send(JSON.stringify({ type: 'heartbeat' }));
+        }, 30*1000);
+    }
+
+    // 停止发送心跳
+    const stopHeartbeat = () => {
+        clearInterval(heartbeatTimer);
+    }
+
+    return ws;
+}
\ No newline at end of file
diff --git a/src/views/home/component/order.vue b/src/views/home/component/order.vue
index 09c854d..9f834ee 100644
--- a/src/views/home/component/order.vue
+++ b/src/views/home/component/order.vue
@@ -43,7 +43,7 @@ const getList = () => {
 };
 getList();
 
-const emit = defineEmits(["goPay"]);
+const emit = defineEmits(["goPay","editAttr"]);
 
 const goPay = () => {
   emit("goPay");
@@ -60,9 +60,20 @@ const changeCartNum = (val, old) => {
   });
 };
 
+const editAttr = (data)=>{
+  emit("editPupop", data);
+}
+
+const editItem = (id, data)=>{
+  cartChangeApi(id, data).then((res) => {
+    getList()
+  });
+}
+
 defineExpose({
   getList,
   list,
+  editItem
 });
 </script>
 
@@ -79,7 +90,7 @@ defineExpose({
     <div class="order-list">
       <el-empty v-if="list.length == 0" description="请点击右侧添加商品" />
       <div v-else class="order-item" v-for="(item, index) in list" :key="index">
-        <el-image
+        <el-image loading="lazy"
           class="order-item-img"
           :src="
             (item.productAttr && item.productAttr.image) || item.product.image
@@ -90,7 +101,9 @@ defineExpose({
             <div class="title">{{ item.spu.store_name }}</div>
             <div class="delete" @click="deleteOne(item.cart_id)">删除</div>
           </div>
-          <div class="order-item-sku">设备规格</div>
+          <div class="order-item-sku">
+            <span style="display: flex;align-items: center;" @click="editAttr(item)">商品规格: {{ item.productAttr.sku || '默认规格' }}<el-icon size="16" style="margin-left: 0.2rem;"><ArrowDown /></el-icon></span>
+          </div>
           <div class="order-item-price">
             <div>
               ¥<span>{{ item.productAttr.price }}</span>
@@ -127,11 +140,11 @@ defineExpose({
           </div>
         </div>
         <div class="update-price">
-          <el-button class="btn" type="primary">改价</el-button>
+          <!-- <el-button class="btn" type="primary">改价</el-button> -->
         </div>
       </div>
       <div class="order-btn">
-        <el-button class="btn" type="primary" @click="goPay"
+        <el-button class="btn" type="primary" @click="goPay" :disabled="list.length == 0"
           >立即结账</el-button
         >
       </div>
@@ -203,6 +216,7 @@ defineExpose({
           }
         }
         .order-item-sku {
+          cursor: pointer;
           font-size: 0.8rem;
           color: #999;
         }
diff --git a/src/views/home/component/pay.vue b/src/views/home/component/pay.vue
deleted file mode 100644
index a4a3d1c..0000000
--- a/src/views/home/component/pay.vue
+++ /dev/null
@@ -1,182 +0,0 @@
-
-<script setup>
-import { ref, watch, nextTick } from "vue";
-import { orderCreateApi, orderStatusApi } from "@/api/store.js";
-import { ElMessage} from 'element-plus';
-
-const drawer = ref(false);
-const active = ref(1);
-const input = ref("");
-const codeRef = ref("");
-
-const cancelClick = () => {
-  codeRef.value.blur();
-  drawer.value = false;
-};
-
-const open = ()=>{
-    nextTick(()=>{
-        setTimeout(()=>{
-            loading.value = false;
-            input.value = "";
-            codeRef.value.focus();
-        },300)
-    })
-}
-
-const form = ref({});
-const cart_id = ref([]);
-const setForm = (e) => {
-    form.value = e.data;
-    cart_id.value = e.cart_id;
-    console.log(e, cart_id.value);
-}
-
-const emit = defineEmits(['paySuccess']);
-
-// 支付
-const handleEnter = ()=>{
-    loading.value = true;
-    codeRef.value.blur();
-    orderCreateApi({
-        address_id: "",
-        key: form.value.key,
-        cart_id: cart_id.value,
-        pay_type: 'micropay',
-        auth_code: input.value,
-        source: 300
-    }).then(res=>{
-        if(res.data.status=='success'){
-            drawer.value = false;
-            ElMessage({
-                message: '支付成功',
-                type: 'success',
-            })
-            loading.value = false;
-            input.value = "";
-            emit('paySuccess');
-        }else {
-            getOrderStatus(res.data.result.order_id)
-        }
-    })
-}
-
-const getOrderStatus = (id)=>{
-    orderStatusApi(id).then(res=>{
-        if(res.data.paid==1){
-            ElMessage({
-                message: '支付成功',
-                type: 'success',
-            })
-            loading.value = false;
-        }else {
-            ElMessage({
-                message: '支付失败',
-                type: 'error',
-            })
-            loading.value = false;
-        }
-    }).catch(err=>{
-        setTimeout(()=>{
-            getOrderStatus(id);
-        }, 5000)
-    })
-}
-
-const loading = ref(false);
-
-defineExpose({
-  drawer,
-  setForm
-});
-</script>
-
-<template>
-    <el-drawer :size="800" v-model="drawer" direction="rtl" @open="open">
-      <template #header>
-        <h4>选择支付方式</h4>
-      </template>
-      <template #default>
-        <div class="dra-body">
-          <div class="header">
-              <div class="left" :class="{'active': active==1}" @click="active=1">微信</div>
-              <div class="right" :class="{'active': active==2}" @click="active=2">现金收款</div>
-          </div>
-          <div style="color: #999;padding: 2rem 0 0.3rem 0;">应收金额(元): </div>
-          <div style="color: #f5222d;padding-bottom: 2rem;">¥<span style="font-size: 1.6rem;">{{ form.total_price }}</span></div>
-          <div v-loading="loading" element-loading-text="支付中" class="card1" v-if="active==1">
-              <el-input ref="codeRef" v-model="input" autofocus class="code-input" placeholder="请点击输入框聚焦扫码或输入编码号" @keyup.enter="handleEnter"/>
-              <div class="tips"></div>
-          </div>
-          <div class="card2" v-else>
-            <div>现金收款正在开发中</div>
-              <!-- <el-input ref="codeRef" v-model="input" autofocus class="code-input" placeholder="请点击输入框输入金额" /> -->
-          </div>
-        </div>
-      </template>
-      <template #footer>
-        <div style="width: 100%;display: flex;justify-content: center;">
-          <el-button class="cancel-btn" @click="cancelClick">取消收款</el-button>
-        </div>
-      </template>
-    </el-drawer>
-  </template>
-  
-
-<style lang="scss" scoped>
-.dra-body {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-    text-align: center;
-  .header{
-    width: 25rem;
-    display: flex;
-    &>div{
-        flex: 1;
-        border: 1px solid #ccc;
-        text-align: center; 
-        padding: 0.6rem 0;
-        cursor: pointer;
-    }
-    .left{
-        border-right: none;
-        border-radius: 5rem 0 0 5rem;
-    }
-    .right{
-        border-left: none;
-        border-radius: 0 5rem 5rem 0;
-    }
-    .active{
-        background-color: #1890ff;
-        color: #fff;
-        transition: 300ms;
-        border-color: #1890ff;
-    }
-  }
-  .card1{
-    .code-input{
-        width: 100%;
-        height: 3rem;
-    }
-    .tips {
-        width: 38rem;
-        height: 16rem;
-        background: url("https://multi-store.crmeb.net/view_cashier/img/alipay.d0e0aa1f.png");
-        background-size: 100% 100%;
-        background-repeat: no-repeat;
-    }
-  }
-  
-}
-
-.cancel-btn{
-    width: 60%;
-    border-color: #1890ff;
-    color: #1890ff;
-    border-radius: 5rem;
-    height: 3rem;
-    font-size: 1.2rem;
-}
-</style>
diff --git a/src/views/home/component/pupop.vue b/src/views/home/component/pupop.vue
index 48b42df..118a202 100644
--- a/src/views/home/component/pupop.vue
+++ b/src/views/home/component/pupop.vue
@@ -1,6 +1,7 @@
 <script setup>
 import { ref } from 'vue'
 import { ElMessageBox } from 'element-plus'
+import { getAttrValue } from "@/api/shop.js"
 
 const dialogVisible = ref(false)
 
@@ -8,15 +9,50 @@ const show = (e)=>{
     dialogVisible.value = e;
 }
 
+const form = ref({});
+const active = ref(null);
+const loading = ref(false);
+const mode = ref('add');
+const editForm = ref({});
+const setForm = (data, type='add')=>{
+    mode.value = type;
+    if(type == 'add'){
+        form.value = data;
+        active.value = data.attr[0];
+    }
+    else {
+        loading.value = true;
+        editForm.value = data;
+        getAttrValue(data.product_id).then(res=>{
+            res.data.attrValue = JSON.parse(JSON.stringify(res.data.attr))
+            res.data.attr = Object.keys(res.data.sku)
+            form.value = res.data;
+            active.value = res.data.attr[0];
+            loading.value = false;
+        }).catch(err=>{
+            loading.value = false;
+        })
+    }
+}
+
 const emit = defineEmits(['changeItem'])
 
 const changeItem = ()=>{
-    emit('changeItem', item, change);
-    dialogVisible = false
+    if(mode.value == 'add') emit('changeItem', form.value, active.value);
+    else emit('editItem', editForm.value.cart_id, {
+        cart_num: editForm.value.cart_num,
+        product_attr_unique: form.value.sku[active.value].unique,
+    });
+    dialogVisible.value = false
+}
+
+const changeActive = (item)=>{
+    active.value = item;
 }
 
 defineExpose({
-    show
+    show,
+    setForm
 })
 
 </script>
@@ -27,30 +63,28 @@ defineExpose({
     title="商品规格"
     width="650"
   >
-    <div class="shop">
-        <div class="shop-info">
+    <div class="shop" v-loading="loading">
+        <div class="shop-info" v-if="form.sku">
             <div class="shop-info-left">
-                <el-image src="https://multi-store.crmeb.net/uploads/attach/2024/03/01/8149b6d6bfc22ad622ec478528310c43.jpg"></el-image>
+                <el-image loading="lazy" :src="form.sku[active]?.image || form.image"></el-image>
             </div>
             <div class="shop-info-right">
-                <div class="shop-info-right-top">香奈儿（Chanel）五号香水（经典）50ml（礼盒装）送女 香奈儿（Chanel）五号香水（经典）50ml（礼盒装）送女  香奈儿（Chanel）五号香水（经典）50ml（礼盒装）送女香奈儿（Chanel）五号香水（经典）50ml（礼盒装）送女</div>
-                <div class="shop-info-right-center">库存100</div>
-                <div class="shop-info-right-price">¥<span>{{0.10}}</span></div>
+                <div class="shop-info-right-top">{{ form.store_name }}</div>
+                <div class="shop-info-right-center">库存{{ form.sku[active]?.stock || 0 }}</div>
+                <div class="shop-info-right-price">¥<span>{{form.sku[active]?.price || form.price}}</span></div>
             </div>
         </div>
         <div class="shop-sku">
             <div class="title">产品</div>
             <div class="sku">
                 <el-space wrap :size="20">
-                    <div class="sku-item sku-item_active">大</div>
-                    <div class="sku-item">中</div>
-                    <div class="sku-item">小</div>
+                    <div class="sku-item " :class="{'sku-item_active': active==item}" @click="changeActive(item)" v-for="(item, index) in form.attr" :key="index">{{ item || '默认规格' }}</div>
                 </el-space>
                 
             </div>
         </div>
     </div>
-    <template #footer>
+    <template #footer v-if="!(mode != 'add' && form.attr && form.attr.length==1)">
       <div class="dialog-footer">
         <el-button class="ok-btn" type="primary" @click="changeItem">
           确定
@@ -115,6 +149,7 @@ defineExpose({
         }
         .sku{
             .sku-item{
+                cursor: pointer;
                 padding: 0.5rem 1rem;
                 background-color: #f5f5f5;
                 border-radius: 3rem;
diff --git a/src/views/home/component/shop.vue b/src/views/home/component/shop.vue
index 6cbe041..fe6adfb 100644
--- a/src/views/home/component/shop.vue
+++ b/src/views/home/component/shop.vue
@@ -2,30 +2,31 @@
 import { ref, watch } from "vue";
 
 const props = defineProps({
-  storeList:{
-    type:Array,
-    default:()=>[]
-  }
-})
+  storeList: {
+    type: Array,
+    default: () => [],
+  },
+});
 
-const emit = defineEmits(['getStoreList'])
+const emit = defineEmits(["getStoreList", "changeItem", "loadMore"]);
 
-const bar_code = ref('');
+const bar_code = ref("");
 
 const loadMore = () => {
-  console.log("loadMore");
+  emit("loadMore", {
+    bar_code: bar_code.value,
+  });
 };
 
-const changeItem = (item)=>{
-  emit('changeItem', item)
-}
+const changeItem = (item) => {
+  emit("changeItem", item);
+};
 
 const handleEnter = () => {
-  emit('getStoreList', {
-    bar_code: bar_code.value
-  })
-}
-
+  emit("getStoreList", {
+    bar_code: bar_code.value,
+  });
+};
 </script>
 
 <template>
@@ -54,14 +55,23 @@ const handleEnter = () => {
       style="overflow: auto"
     >
       <el-space wrap :size="20">
-        <div class="shop-item" v-for="(item, index) in storeList" :key="index" @click="changeItem(item)">
-          <el-image
-            :src="item.image"
-          ></el-image>
+        <div
+          class="shop-item"
+          v-for="(item, index) in storeList"
+          :key="index"
+          @click="changeItem(item)"
+        >
+          <el-image loading="lazy" :src="item.image"></el-image>
           <div class="shop-name">{{ item.store_name }}</div>
           <div class="shop-price">
             ¥<span>{{ item.price }}</span>
           </div>
+          <div class="no-stock" v-if="item.stock==0">
+            <div>
+              <span>暂无</span>
+              <span>库存</span>
+            </div>
+          </div>
         </div>
       </el-space>
     </div>
@@ -130,6 +140,8 @@ const handleEnter = () => {
       display: flex;
       justify-content: space-between;
       flex-direction: column;
+      position: relative;
+      overflow: hidden;
 
       .el-image {
         border-radius: 0.5rem;
@@ -161,6 +173,29 @@ const handleEnter = () => {
           color: #fff;
         }
       }
+
+      .no-stock {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba($color: #000000, $alpha: 0.2);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        div{
+          background-color: #4e4e4e;
+          color: #fff;
+          border-radius: 50%;
+          width: 5rem;
+          height: 5rem;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+        }
+      }
     }
   }
 }
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index e0e3a36..7ed9af5 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -3,9 +3,10 @@ import order from "./component/order.vue";
 import shop from "./component/shop.vue";
 import padding from "./component/padding.vue";
 import pupop from "./component/pupop.vue";
-import pay from "./component/pay.vue";
+import pay from "@/components/pay.vue";
 import { ref, nextTick } from "vue";
-import { storeListApi, cartCreateApi, orderCheckApi } from "@/api/store.js";
+import { cartCreateApi, orderCheckApi } from "@/api/store.js";
+import { storeListApi } from "@/api/shop.js";
 import { useUserStore } from "@/store/user.js";
 
 const pupopRef = ref(null);
@@ -18,7 +19,7 @@ const storeList = ref([]);
 const userStore = useUserStore();
 
 const where = ref({
-  page: 1,
+  page: 0,
   limit: 30,
 });
 const getStoreList = (data) => {
@@ -28,21 +29,30 @@ const getStoreList = (data) => {
     ...data,
   };
   storeListApi(userStore.userInfo.service.mer_id, where.value).then((res) => {
-    storeList.value = res.data.list.map((item) => {
+    if(res.data.list.length < where.value.limit) loadEnd.value = true;
+    let list = res.data.list.map((item) => {
       item.attr = Object.keys(item.sku);
       return item;
     });
-    if (storeList.value.length == 1 && isAllDigits(data.bar_code)) {
-      changeItem(storeList.value[0], storeList.value[0].attr[0]);
+    storeList.value = storeList.value.concat(list);
+    if (data.bar_code && storeList.value.length == 1 && isAllDigits(data.bar_code)) {
+      cartAddInfo(storeList.value[0], storeList.value[0].attr[0]);
     }
   });
 };
 
+const loadEnd = ref(false);
+const loadMore = (data)=>{
+  if(loadEnd.value) return;
+  where.value.page++;
+  getStoreList(data);
+}
+
 function isAllDigits(str) {
   return /^\d+$/.test(str);
 }
 
-const changeItem = (item, change = "") => {
+const cartAddInfo = (item, change = "") => {
   // console.log(item, change);
   let q = {
     is_new: 0,
@@ -60,6 +70,24 @@ const changeItem = (item, change = "") => {
   });
 };
 
+const changeItem = (item, change) => {
+  if(!item.attr || item.attr.length == 0 || item.attr.length==1) return cartAddInfo(item, item.attr[0] ? item.attr[0] : '');
+  else if(change) return cartAddInfo(item, change);
+  else {
+    pupopRef.value.setForm(item, 'add');
+    pupopRef.value.show(true);
+  }
+}
+
+const editItem = (id, data) => {
+  orderRef.value.editItem(id, data);
+}
+
+const editPupop = (item) => {
+  pupopRef.value.setForm(item, 'edit');
+  pupopRef.value.show(true);
+}
+
 // 结算
 const checkOut = () => {
   let cart_id = orderRef.value.list.map((item) => item.cart_id);
@@ -76,7 +104,7 @@ const checkOut = () => {
   });
 };
 
-getStoreList();
+// getStoreList();
 
 const goPay = () => {
   checkOut();
@@ -87,14 +115,11 @@ const paySuccess = ()=>{
   orderRef.value.getList();
 }
 
-nextTick(() => {
-  // pupopRef.value.show(true);
-});
 </script>
 
 <template>
   <div class="my-card">
-    <order ref="orderRef" @goPay="goPay" />
+    <order ref="orderRef" @goPay="goPay" @editPupop="editPupop"/>
     <padding />
     <shop
       ref="shopRef"
@@ -102,8 +127,9 @@ nextTick(() => {
       :storeList="storeList"
       @getStoreList="getStoreList"
       @changeItem="changeItem"
+      @loadMore="loadMore"
     />
-    <pupop ref="pupopRef" />
+    <pupop ref="pupopRef" @changeItem="changeItem" @editItem="editItem"/>
     <pay ref="payRef" @paySuccess="paySuccess"/>
   </div>
 </template>
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 34cd68a..7271a6d 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -44,6 +44,12 @@ const onLogin = () => {
     .then((res) => {
       userStore.setToken(res.data.token);
       info().then(({data}) => {
+        if(!data.service){
+          return ElMessage({
+            message: "请联系管理员开通服务",
+            type: "error",
+          })
+        }
         userStore.setUserInfo(data);
         router.push("/");
       });
diff --git a/src/views/notFound/index.vue b/src/views/notFound/index.vue
new file mode 100644
index 0000000..30f68f4
--- /dev/null
+++ b/src/views/notFound/index.vue
@@ -0,0 +1,24 @@
+<script setup>
+
+const back = () => {
+    window.location = "/"
+}
+</script>
+
+<template>
+  <div style="width: 100vw; height: 100vh">
+    <div style="display: flex; justify-content: center; padding-top: 20vh">
+      <el-image loading="lazy"
+        style="width: 30rem; height: 20rem"
+        src="https://file.iviewui.com/iview-pro/icon-404-color.svg"
+      ></el-image>
+      <div style="display: flex;flex-direction: column;justify-content: center;padding-left: 3rem;">
+        <div style="font-size: 5rem; font-weight: bold">404</div>
+        <div style="padding-bottom: 1rem">您的页面没有找到</div>
+        <el-button type="primary" @click="back">返回首页</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/src/views/order/index.vue b/src/views/order/index.vue
index 4dd9c98..154d0ce 100644
--- a/src/views/order/index.vue
+++ b/src/views/order/index.vue
@@ -1,69 +1,196 @@
 <script setup>
-import { ref } from 'vue'
-import { orderListApi } from "@/api/store.js"
+import { ref } from "vue";
+import {
+  orderListApi,
+  groupOrderListApi,
+  orderStatusApi,
+  orderLadingApi,
+} from "@/api/store.js";
+import { useUserStore } from "@/store/user.js";
+import pay from "@/components/pay.vue";
+import { ElMessage } from "element-plus";
+import { useRouter } from "vue-router";
 
-const orderList = ref([])
+const userStore = useUserStore();
+const orderList = ref([]);
+const router = useRouter();
+
+const tabPosition = ref(1); // 1-全部, 2-未支付
+const payRef = ref(null);
 
 const where = ref({
-    page: 1,
-    limit: 20,
-    status: -2
-})
+  page: 1,
+  limit: 20,
+});
 
-const loading = ref(false)
-const total = ref(0)
+const loading = ref(false);
+const total = ref(0);
 
 const getOrderList = () => {
-    loading.value = true;
-    orderListApi(where.value).then((res) => {
-        orderList.value = res.data.list;
-        total.value = res.data.count;
-        loading.value = false;
-    })
-}
+  loading.value = true;
+  if (tabPosition.value == 1) where.value.paid = null;
+  if (tabPosition.value == 2) where.value.paid = 0;
+  orderListApi(userStore.userInfo.service.mer_id, where.value).then((res) => {
+    orderList.value = res.data.list;
+    total.value = res.data.count;
+    loading.value = false;
+  });
+};
 
-getOrderList()
+getOrderList();
+
+const changeTabPosition = (e) => {
+  where.value.page = 1;
+  getOrderList();
+};
 
 const prevClick = (e) => {
-    where.value.page = e;
-    getOrderList();
-}
+  where.value.page = e;
+  getOrderList();
+};
 
 const nextClick = (e) => {
-    where.value.page = e;
-    getOrderList();
-}
+  where.value.page = e;
+  getOrderList();
+};
 
 const currentChange = (e) => {
-    where.value.page = e;
-    getOrderList();
+  where.value.page = e;
+  getOrderList();
+};
+
+const paySuccess = () => {
+  getOrderList();
+};
+
+const rePay = (row) => {
+  payRef.value.setRePay({
+    price: row.pay_price,
+    order_id: row.group_order_id,
+  });
+  payRef.value.drawer = true;
+};
+
+const getOrderStatus = (id) => {
+  orderStatusApi({
+    order_sn: id,
+  })
+    .then((res) => {
+      if (res.data.paid == 1 || res.message == "支付成功") {
+        ElMessage({
+          message: res.message,
+          type: "success",
+        });
+        getOrderList();
+      } else {
+        ElMessage({
+          message: res.message,
+          type: "error",
+        });
+      }
+    })
+    .catch((err) => {});
+};
+
+const orderLadingSn = ref('')
+const orderLading = () => {
+  dialogVisible.value = false;
+  orderLadingApi({
+    order_sn: orderLadingSn.value,
+  }).then((res) => {
+    ElMessage({
+      message: res.message,
+      type: "success",
+    });
+    router.push({
+      name: "home",
+    });
+  });
+};
+
+const dialogVisible = ref(false);
+const orderLadingComfirm = (order_sn)=>{
+  orderLadingSn.value = order_sn;
+  dialogVisible.value = true;
 }
 
-
+const goHome = ()=>{
+  router.push({
+      name: "home",
+    });
+}
 </script>
 
 <template>
   <div v-loading="loading" element-loading-text="加载中" class="my-order">
-    <el-table :data="orderList" stripe style="width: 100%">
-        <el-table-column prop="group_order_id" label="ID" width="100" />
-        <el-table-column prop="order_sn" label="订单号" min-width="250" />
-        <el-table-column prop="total_price" label="订单金额" />
-        <el-table-column prop="paid" label="支付状态">
-            <template #default="scope">
-                <span v-if="scope.row.paid==1">已支付</span>
-                <span v-else>未支付</span>
-            </template>
-        </el-table-column>
-        <el-table-column prop="pay_time" label="支付时间" />
+    <el-radio-group
+      v-model="tabPosition"
+      style="margin-bottom: 30px"
+      @change="changeTabPosition"
+    >
+      <el-radio-button :value="1">全部</el-radio-button>
+      <el-radio-button :value="2">未支付</el-radio-button>
+    </el-radio-group>
+    <el-table :data="orderList" style="width: 100%">
+      <el-table-column prop="group_order_id" label="ID" width="100" />
+      <el-table-column prop="order_sn" label="订单号" width="260" />
+      <el-table-column prop="total_price" label="订单金额" />
+      <el-table-column prop="paid" label="支付状态">
+        <template #default="scope">
+          <span v-if="scope.row.paid == 1">已支付</span>
+          <span v-else style="color: #ff4a00">未支付</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="create_time" label="订单创建时间" />
+      <el-table-column prop="pay_time" label="订单支付时间">
+        <template #default="scope">
+          <span v-if="scope.row.pay_time">{{ scope.row.pay_time }}</span>
+          <div v-else class="flex">
+            <el-button type="primary" link @click="rePay(scope.row)"
+              >重新支付</el-button
+            >
+            <el-button
+              type="primary"
+              link
+              @click="getOrderStatus(scope.row.order_sn)"
+              >检测状态</el-button
+            >
+            <el-button
+              type="primary"
+              link
+              @click="orderLadingComfirm(scope.row.order_sn)"
+              >提单</el-button
+            >
+          </div>
+        </template>
+      </el-table-column>
     </el-table>
     <el-pagination
-        :page-size="where.limit"
-        layout="prev, pager, next"
-        :total="total"
-        @prev-click="prevClick"
-        @next-click="nextClick"
-        @current-change="currentChange"
+      :page-size="where.limit"
+      layout="prev, pager, next"
+      :total="total"
+      @prev-click="prevClick"
+      @next-click="nextClick"
+      @current-change="currentChange"
     />
+    <pay ref="payRef" @paySuccess="paySuccess" />
+    <el-dialog
+      v-model="dialogVisible"
+      title="提示"
+      width="500"
+    >
+      <span>提单前请清空购物车, 避免提单的商品与购物车商品混合, 请确保购物车内无数据后再进行提单</span>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="goHome">
+            前去查看购物车
+          </el-button>
+          <el-button type="primary" @click="orderLading">
+            确认提单
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
diff --git a/src/views/shop/index.vue b/src/views/shop/index.vue
new file mode 100644
index 0000000..9765a83
--- /dev/null
+++ b/src/views/shop/index.vue
@@ -0,0 +1,178 @@
+<script setup>
+import { ref } from "vue";
+import { storeListApi, userFreeTrialApi } from "@/api/shop.js";
+import { useUserStore } from "@/store/user.js";
+import { ElMessage } from "element-plus";
+
+const orderList = ref([]);
+const userStore = useUserStore();
+
+const where = ref({
+  page: 1,
+  limit: 15,
+});
+
+const loading = ref(false);
+const total = ref(0);
+
+const getOrderList = () => {
+  loading.value = true;
+  storeListApi(userStore.userInfo.service.mer_id, where.value).then((res) => {
+    orderList.value = res.data.list;
+    total.value = res.data.count;
+    loading.value = false;
+  });
+};
+
+getOrderList();
+
+const prevClick = (e) => {
+  where.value.page = e;
+  getOrderList();
+};
+
+const nextClick = (e) => {
+  where.value.page = e;
+  getOrderList();
+};
+
+const currentChange = (e) => {
+  where.value.page = e;
+  getOrderList();
+};
+
+const dialogFormVisible = ref(false);
+const form = ref({});
+const edit = (row) => {
+  form.value = row;
+  dialogFormVisible.value = true;
+};
+
+const submitUpdate = () => {
+  let obj = {
+    attr: form.value.attr||[],
+    attrValue: form.value.attrValue,
+    mer_cate_id: form.value.merCateId || [],
+    spec_type: form.value.spec_type,
+    is_stock: 1,
+  };
+  userFreeTrialApi(form.value.product_id, obj).then((res) => {
+    ElMessage({
+      message: res.message,
+      type: "success",
+    })
+    dialogFormVisible.value = false;
+    getOrderList();
+  }).catch(err=>{
+    ElMessage({
+      message: err,
+      type: "error",
+    })
+  });
+};
+</script>
+
+<template>
+  <div v-loading="loading" element-loading-text="加载中" class="my-shop">
+    <el-table :data="orderList" style="width: 100%">
+      <el-table-column prop="product_id" label="ID" width="100" />
+      <el-table-column prop="image" label="图片" width="120">
+        <template #default="scope">
+          <el-image loading="lazy"
+            style="width: 60px; height: 60px"
+            :src="scope.row.image"
+          ></el-image>
+        </template>
+      </el-table-column>
+      <el-table-column prop="store_name" label="商品名称" width="500" />
+      <el-table-column prop="price" label="售价" />
+      <el-table-column prop="stock" label="库存" />
+      <el-table-column label="操作" width="120">
+        <template #default="scope">
+          <el-button type="primary" link @click="edit(scope.row)"
+            >编辑</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      :page-size="where.limit"
+      layout="prev, pager, next"
+      :total="total"
+      @prev-click="prevClick"
+      @next-click="nextClick"
+      @current-change="currentChange"
+    />
+
+    <el-dialog v-model="dialogFormVisible" title="编辑商品库存" width="800">
+      <el-table
+        v-if="form.attrValue"
+        :data="form.attrValue"
+        stripe
+        style="width: 100%"
+      >
+        <el-table-column prop="image" label="图片" width="180">
+          <template #default="scope">
+            <el-image loading="lazy"
+              style="width: 5rem; height: 5rem"
+              :src="scope.row.image || form.image"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column prop="sku" label="名称" width="180">
+          <template #default="scope">
+            <span>{{ scope.row.sku || form.store_name }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="price" label="价格" />
+        <el-table-column prop="stock" label="库存">
+          <template #default="scope">
+            <el-input-number
+              v-model="scope.row.stock"
+              step-strictly
+              :min="0"
+              :step="1"
+            />
+          </template>
+        </el-table-column>
+      </el-table>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="dialogFormVisible = false">取消</el-button>
+          <el-button type="primary" @click="submitUpdate"> 确定 </el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.my-shop {
+  background-color: #fff;
+  border-radius: 1.2rem;
+  box-sizing: border-box;
+  padding: 1rem;
+  overflow-y: scroll;
+}
+/* 修改滚动条的样式 */
+::-webkit-scrollbar {
+  width: 5px; /* 设置滚动条的宽度 */
+}
+
+/* 设置滚动条的轨道样式 */
+::-webkit-scrollbar-track {
+  background-color: #f1f1f1; /* 设置轨道的背景色 */
+  margin: 20px 0;
+}
+
+/* 设置滚动条的滑块样式 */
+::-webkit-scrollbar-thumb {
+  background-color: #ccc; /* 设置滑块的背景色 */
+  border-radius: 5px; /* 设置滑块的圆角 */
+}
+
+/* 设置滚动条鼠标悬停时的滑块样式 */
+::-webkit-scrollbar-thumb:hover {
+  background-color: #999; /* 设置鼠标悬停时滑块的背景色 */
+}
+</style>