feat: 商品详情调整

src/components/GoodDetail/index.vue

@@ -1,18 +1,17 @@
 <template>
-  <view>
-    <view v-if="goodsData.commodityPurchaseInstruction" class="use-notice">
+  <view class="mt-16">
+    <view v-if="goodsData.commodityPurchaseInstruction">
       <ModuleTitle
         v-if="showTitle"
         :title="goodsData.commodityPurchaseInstruction.templateTitle"
       />
       <view
-        class="use-notice-content"
         v-for="(moduleItem, index) in goodsData.commodityPurchaseInstruction
           .commodityPurchaseInstructionModuleEntityList"
         :key="index"
       >
         <view
-          class="module-item"
+          class="flex flex-items-start flex-col pt-12 pb-12"
           :class="{
             'border-bottom':
               index <
@@ -21,13 +20,18 @@
                 1,
           }"
         >
-          <view class="module-icon">
+          <view class="flex flex-items-center flex-row flex-shrink-0 mr-8">
             <uni-icons fontFamily="znicons" size="20" color="#333">{{
               zniconsMap[moduleItem.moduleIcon]
             }}</uni-icons>
-            <text class="module-title">{{ moduleItem.moduleTitle }}</text>
+            <text class="font-size-14 color-171717 line-height-20">{{
+              moduleItem.moduleTitle
+            }}</text>
           </view>
-          <text class="module-desc">{{ moduleItem.moduleContent }}</text>
+          <text
+            class="flex-full font-size-12 color-525866 line-height-20 mt-4"
+            >{{ moduleItem.moduleContent }}</text
+          >
         </view>
       </view>
     </view>
@@ -57,6 +61,4 @@ const props = defineProps({
 });
 </script>
 
-<style scoped lang="scss">
-@import "./styles/index.scss";
-</style>
+<style scoped lang="scss"></style>

src/components/GoodDetail/styles/index.scss

@@ -1,40 +0,0 @@
-// 使用须知样式
-.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: $uni-font-size-base;
-        color: $uni-text-color;
-        text-align: center;
-        word-wrap: break-word;
-        margin-left: 4px;
-      }
-    }
-
-    .module-desc {
-      flex: 1;
-      font-size: $uni-font-size-sm;
-      color: #666;
-      line-height: 1.5;
-      margin-top: 4px;
-    }
-  }
-  .border-bottom {
-    border-bottom: 1px solid #f0f0f0;
-  }
-}

src/components/ModuleTitle/styles/index.scss

@@ -6,7 +6,7 @@
 
 .module-title {
   font-size: 18px;
-  color: #000;
+  color: #171717;
   position: relative;
   z-index: 1;
 }