feat: 组件样式抽离

src/components/GoodDetail/index.vue

@@ -58,49 +58,5 @@ const props = defineProps({
 </script>
 
 <style scoped lang="scss">
-@font-face {
+@use './styles/index.scss';
-  font-family: znicons;
-  src: url("@/static/fonts/znicons.ttf");
-}
-
-// 使用须知样式
-.use-notice {
-  margin: 16px 0;
-}
-
-.use-notice-content {
-  .module-item {
-    display: flex;
-    align-items: flex-start;
-    flex-direction: column;
-    padding: 12px 0;
-
-    .module-icon {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      margin-right: 8px;
-      flex-shrink: 0;
-
-      .module-title {
-        font-size: 14px;
-        color: #333;
-        text-align: center;
-        word-wrap: break-word;
-        margin-left: 4px;
-      }
-    }
-
-    .module-desc {
-      flex: 1;
-      font-size: 12px;
-      color: #666;
-      line-height: 1.5;
-      margin-top: 4px;
-    }
-  }
-  .border-bottom {
-    border-bottom: 1px solid #f0f0f0;
-  }
-}
 </style>

src/components/GoodDetail/styles/index.scss

@@ -0,0 +1,45 @@
+@font-face {
+  font-family: znicons;
+  src: url("@/static/fonts/znicons.ttf");
+}
+
+// 使用须知样式
+.use-notice {
+  margin: 16px 0;
+}
+
+.use-notice-content {
+  .module-item {
+    display: flex;
+    align-items: flex-start;
+    flex-direction: column;
+    padding: 12px 0;
+
+    .module-icon {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      margin-right: 8px;
+      flex-shrink: 0;
+
+      .module-title {
+        font-size: 14px;
+        color: #333;
+        text-align: center;
+        word-wrap: break-word;
+        margin-left: 4px;
+      }
+    }
+
+    .module-desc {
+      flex: 1;
+      font-size: 12px;
+      color: #666;
+      line-height: 1.5;
+      margin-top: 4px;
+    }
+  }
+  .border-bottom {
+    border-bottom: 1px solid #f0f0f0;
+  }
+}