feat: 组件样式分离

pages/chat/ChatQuickAccess.vue

@@ -7,6 +7,8 @@
         :key="index"
         @click="sendReply(item)"
       >
+        <Interceptor />
+
         <image
           class="quick-access-item-bg"
           src="/static/quick/quick_icon_bg.png"
@@ -24,12 +26,15 @@
 
 <script setup>
 import { onMounted, ref } from "vue";
+import { checkToken } from "@/hooks/useGoLogin";
+import Interceptor from "@/components/Interceptor/index.vue";
+
 const itemList = ref([]);
 
 const emits = defineEmits(["replySent"]);
 
 const sendReply = (item) => {
-  emits("replySent", item); // 向父组件传递数据
+  checkToken().then(() => emits("replySent", item)); // 向父组件传递数据
 };
 
 onMounted(() => {
@@ -67,75 +72,5 @@ const initData = () => {
 </script>
 
 <style lang="scss" scoped>
-.quick-access {
+@import "./styles/ChatQuickAccess.scss";
-  width: 100%;
-
-  &-scroll {
-    display: flex;
-    flex-direction: row;
-    overflow-x: auto;
-    white-space: nowrap;
-    -webkit-overflow-scrolling: touch;
-  }
-
-  .quick-access-item {
-    flex: 0 0 104px;
-    border-radius: 8px;
-    margin: 4px 4px 8px 4px;
-    box-shadow: 0 2px 5px 0px rgba(0, 0, 0, 0.1);
-    padding: 12px;
-    display: inline-flex;
-    flex-direction: column;
-
-    position: relative;
-
-    &:first-child {
-      margin-left: 12px;
-    }
-
-    &:last-child {
-      margin-right: 12px;
-    }
-
-    .quick-access-item-bg {
-      position: absolute;
-      top: 0;
-      left: 0;
-      z-index: 0;
-      border-radius: 8px;
-      width: 128px;
-      height: 56px;
-    }
-
-    .quick-access-item-title {
-      display: flex;
-      align-items: center;
-      z-index: 1;
-
-      image {
-        width: 16px;
-        height: 16px;
-        margin-right: 4px;
-      }
-
-      text {
-        font-family: PingFang SC, PingFang SC;
-        font-weight: 500;
-        font-size: 12px;
-        color: #201f32;
-        line-height: 16px;
-      }
-    }
-
-    .quick-access-item-content {
-      z-index: 1;
-      margin-top: 4px;
-      font-family: PingFang SC, PingFang SC;
-      font-weight: 400;
-      font-size: 10px;
-      color: #678cad;
-      line-height: 18px;
-    }
-  }
-}
 </style>

pages/chat/styles/ChatQuickAccess.scss

@@ -0,0 +1,70 @@
+.quick-access {
+  width: 100%;
+
+  &-scroll {
+    display: flex;
+    flex-direction: row;
+    overflow-x: auto;
+    white-space: nowrap;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .quick-access-item {
+    flex: 0 0 104px;
+    border-radius: 8px;
+    margin: 4px 4px 8px 4px;
+    box-shadow: 0 2px 5px 0px rgba(0, 0, 0, 0.1);
+    padding: 12px;
+    display: inline-flex;
+    flex-direction: column;
+    position: relative;
+
+    &:first-child {
+      margin-left: 12px;
+    }
+
+    &:last-child {
+      margin-right: 12px;
+    }
+
+    .quick-access-item-bg {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 0;
+      border-radius: 8px;
+      width: 128px;
+      height: 56px;
+    }
+
+    .quick-access-item-title {
+      display: flex;
+      align-items: center;
+      z-index: 1;
+
+      image {
+        width: 16px;
+        height: 16px;
+        margin-right: 4px;
+      }
+
+      text {
+        font-family: PingFang SC, PingFang SC;
+        font-weight: 500;
+        font-size: 12px;
+        color: #201f32;
+        line-height: 16px;
+      }
+    }
+
+    .quick-access-item-content {
+      z-index: 1;
+      margin-top: 4px;
+      font-family: PingFang SC, PingFang SC;
+      font-weight: 400;
+      font-size: 10px;
+      color: #678cad;
+      line-height: 18px;
+    }
+  }
+}

pages/module/detail/DetailCardGoodsContentList.vue

@@ -71,5 +71,5 @@ const placeOrderHandle = (item) => {
 </script>
 
 <style lang="scss" scoped>
-@import "./styles/DetailCardContentList.scss";
+@import "./styles/DetailCardGoodsContentList.scss";
 </style>