feat: 组件样式分离

pages/module/discovery/DiscoveryCardComponent.vue

@@ -34,9 +34,5 @@ onMounted(() => {
 </script>
 
 <style scoped lang="scss">
-.container {
+@import "./styles/DiscoveryCardComponent.scss";
-  width: 100%;
-  flex: 1;
-  margin-bottom: 12px;
-}
 </style>

pages/module/discovery/DiscoveryCradContentList.vue

@@ -7,8 +7,14 @@
         :key="index"
       >
         <view class="mk-card-item" @click="sendReply(item)">
-          <image :src="item.coverPhoto" mode="widthFix"></image>
+          <Interceptor />
-          <text>{{ item.topic }}</text>
+
+          <image
+            class="card-img"
+            :src="item.coverPhoto"
+            mode="widthFix"
+          ></image>
+          <text class="card-text">{{ item.topic }}</text>
         </view>
       </view>
     </view>
@@ -16,9 +22,12 @@
 </template>
 
 <script setup>
-import ModuleTitle from "@/components/ModuleTitle/index.vue";
 import { RECOMMEND_POSTS_TITLE } from "@/constant/constant";
 import { defineProps } from "vue";
+import { checkToken } from "@/hooks/useGoLogin";
+import Interceptor from "@/components/Interceptor/index.vue";
+import ModuleTitle from "@/components/ModuleTitle/index.vue";
+
 const props = defineProps({
   recommendTheme: {
     type: Object,
@@ -27,41 +36,13 @@ const props = defineProps({
 });
 
 const sendReply = (item) => {
-  const topic = item.userInputContent || item.topic.replace(/^#/, "");
+  checkToken().then(() => {
-  uni.$emit(RECOMMEND_POSTS_TITLE, topic);
+    const topic = item.userInputContent || item.topic.replace(/^#/, "");
+    uni.$emit(RECOMMEND_POSTS_TITLE, topic);
+  });
 };
 </script>
 
 <style lang="scss" scoped>
-.container {
+@import "./styles/DiscoveryCradContentList.scss";
-  .container-scroll {
-    display: flex;
-    flex-direction: row;
-    overflow-x: auto;
-    margin-top: 4px;
-
-    .mk-card-item {
-      display: flex;
-      flex-direction: column;
-      align-items: start;
-      width: 188px;
-      height: 154px;
-      background-color: #ffffff;
-      border-radius: 10px;
-      margin-right: 8px;
-
-      image {
-        width: 188px;
-        height: 112px;
-      }
-      text {
-        padding: 12px;
-        text-align: center;
-        font-weight: 500;
-        font-size: 12px;
-        color: #333333;
-      }
-    }
-  }
-}
 </style>

pages/module/discovery/styles/DiscoveryCardComponent.scss

@@ -0,0 +1,5 @@
+.container {
+  width: 100%;
+  flex: 1;
+  margin-bottom: 12px;
+}

pages/module/discovery/styles/DiscoveryCradContentList.scss

@@ -0,0 +1,33 @@
+.container {
+  .container-scroll {
+    display: flex;
+    flex-direction: row;
+    overflow-x: auto;
+    margin-top: 4px;
+
+    .mk-card-item {
+      display: flex;
+      flex-direction: column;
+      align-items: start;
+      width: 188px;
+      height: 154px;
+      background-color: #ffffff;
+      border-radius: 10px;
+      margin-right: 8px;
+      position: relative;
+
+      .card-img {
+        width: 188px;
+        height: 112px;
+      }
+
+      .card-text {
+        padding: 12px;
+        text-align: center;
+        font-weight: 500;
+        font-size: 12px;
+        color: #333333;
+      }
+    }
+  }
+}