fix(custom): 修复若干问题

src/pages/admin/order_manage/list/index.scss

@@ -0,0 +1,85 @@
+.tabs-1 {
+  display: flex;
+  box-sizing: border-box;
+  justify-content: space-between;
+  align-items: center;
+  background-color: #fff;
+  padding: 10px;
+  overflow-x: scroll;
+  .item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .line {
+      margin-top: 10px auto;
+      width: 50px;
+      height: 5px;
+    }
+  }
+}
+
+.order-card {
+  width: 95%;
+  box-sizing: border-box;
+  margin: 15px auto;
+  background-color: #fff;
+  border-radius: 10px;
+  padding: 20px;
+
+  .line {
+    width: 100%;
+    height: 1px;
+    background-color: #f5f5f5;
+    margin: 10px;
+  }
+
+  .top {
+    // display: flex;
+    // justify-content: space-between;
+    // align-items: center;
+
+    .name {
+      font-weight: bold;
+    }
+
+    .sub {
+      color: #999;
+      font-size: 30px;
+    }
+  }
+
+  .btn {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+  }
+
+  .center {
+    .top {
+      display: flex;
+      justify-content: space-between;
+      // align-items: flex-start;
+
+      image {
+        width: 150px;
+        height: 150px;
+      }
+
+      .title {
+        margin-left: 10px;
+        display: -webkit-box;
+        overflow: hidden;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        text-overflow: ellipsis;
+        width: 350px;
+      }
+
+      .right {
+        margin-left: 10px;
+        font-size: 28px;
+        text-align: right;
+      }
+    }
+  }
+}

src/pages/admin/order_manage/list/index.vue

@@ -1,13 +1,13 @@
 <template>
   <view>
-    <view class="tabs">
+    <view class="tabs-1">
       <view
         class="item"
-        v-for="item in opt"
-        :key="item.value"
+        v-for="(item, index) in opt"
+        :key="index"
         @click="tabChange(item.value)"
       >
-        <view class="title">{{ item.text }}</view>
+        <view>{{ item.text }}</view>
         <view
           class="line"
           :style="{
@@ -119,6 +119,7 @@ const getData = async () => {
 };
 
 const tabChange = (e: number) => {
+  console.log(e);
   tabVal.value = e;
   getData();
 };
@@ -132,88 +133,5 @@ const toDetailPage = (item: any) => {
 </script>
 
 <style lang="scss">
-.tabs {
-  display: flex;
-  justify-content: space-evenly;
-  align-items: center;
-  background-color: #fff;
-  padding: 10px;
-  .item {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    .line {
-      margin-top: 10px;
-      width: 50px;
-      height: 5px;
-    }
-  }
-}
-
-.order-card {
-  width: 95%;
-  box-sizing: border-box;
-  margin: 15px auto;
-  background-color: #fff;
-  border-radius: 10px;
-  padding: 20px;
-
-  .line {
-    width: 100%;
-    height: 1px;
-    background-color: #f5f5f5;
-    margin: 10px;
-  }
-
-  .top {
-    // display: flex;
-    // justify-content: space-between;
-    // align-items: center;
-
-    .name {
-      font-weight: bold;
-    }
-
-    .sub {
-      color: #999;
-      font-size: 30px;
-    }
-  }
-
-  .btn {
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-  }
-
-  .center {
-    .top {
-      display: flex;
-      justify-content: space-between;
-      // align-items: flex-start;
-
-      image {
-        width: 150px;
-        height: 150px;
-      }
-
-      .title {
-        margin-left: 10px;
-        display: -webkit-box;
-        overflow: hidden;
-        -webkit-line-clamp: 2;
-        -webkit-box-orient: vertical;
-        text-overflow: ellipsis;
-        width: 350px;
-      }
-
-      .right {
-        margin-left: 10px;
-        font-size: 28px;
-        text-align: right;
-      }
-    }
-  }
-}
+@import "./index.scss";
 </style>