.prettierignore

@@ -98,4 +98,3 @@ sw.*
 assets/iconfont
 assets/css
 README.md
-components/product

components/FormDialog.vue

@@ -1,7 +1,7 @@
 <template>
   <el-dialog :lock-scroll="false" :title="title" :visible.sync="visible" width="700px"  :before-close="handleClose" :top="top" :show-close=false>
       <el-form :model="emailForm" :rules="rules" ref="ruleForm">
-        <el-form-item v-for="(item) in comEnquiryConfig" :key="item.prop" :label="item.prop" :label-width="labelWidth" :prop="item.prop" 
+        <el-form-item v-for="(item) in comEnquiryConfig" :key="item.prop" :label="item.prop" :label-width="labelWidth + 'px'" :prop="item.prop" 
         :style="{ marginBottom: marginBottom+'px' }">
           <span v-if="item.type === 'text'">{{ emailForm[item.prop] }}</span>
           <el-input v-if="item.type === 'input'" v-model="emailForm[item.prop]" :type="item.type" clearable ></el-input>

components/product/ProductLeft.vue

@@ -1,26 +1,48 @@
 <template>
   <div class="product-left">
     <div class="media">
-      <div class="big" v-show="bigShow">
-        <img :src="$utils.generateResizedImageUrl(comInfo.mergeImages[currentPre],1800)" alt="" ref="big" />
+      <div
+        class="big"
+        v-show="bigShow">
+        <img
+          :src="
+            $utils.generateResizedImageUrl(
+              comInfo.mergeImages[currentPre],
+              1800
+            )
+          "
+          alt=""
+          ref="big" />
       </div>
-      <el-carousel 
+      <el-carousel
         :interval="5000"
         arrow="always"
         height="578px"
         indicator-position="none"
         :autoplay="false"
         ref="carousel"
-        @change="changeCarousel "
-      >
-        <el-carousel-item v-for="item in comInfo.mergeImages" :key="item">
+        @change="changeCarousel">
+        <el-carousel-item
+          v-for="item in comInfo.mergeImages"
+          :key="item">
           <!-- <div class="banner" :style="{backgroundImage: 'url(' + item + ')'}"></div> -->
-          <zoom :imgUrl="$utils.generateResizedImageUrl(comInfo.mergeImages[currentPre],1800)" @sendStyle="getStyle" @handleViwer="handleViwer"></zoom>
+          <zoom
+            :imgUrl="
+              $utils.generateResizedImageUrl(
+                comInfo.mergeImages[currentPre],
+                1800
+              )
+            "
+            @sendStyle="getStyle"
+            @handleViwer="handleViwer"></zoom>
         </el-carousel-item>
         <el-carousel-item v-if="comInfo.video">
-          <video controls width="100%" height="100%" ref="video">
-            <source 
-            :src="comInfo.video">
+          <video
+            controls
+            width="100%"
+            height="100%"
+            ref="video">
+            <source :src="comInfo.video" />
             Your browser does not support the video tag.
           </video>
         </el-carousel-item>
@@ -29,129 +51,133 @@
     <div class="smImgUl">
       <ul>
         <li
-          @click="changeCarousel (index)"
+          @click="changeCarousel(index)"
           :class="currentPre == index ? 'slip' : ''"
           v-for="(item, index) of comInfo.mergeImages"
           :key="index"
-          class="banner"> 
-            <el-image 
-              :src="$utils.generateResizedImageUrl(item,100)"
-              class="card-img-1"
-              fit="cover"
-              style="width: 100%; height: 100%"
-            ></el-image>
+          class="banner">
+          <el-image
+            :src="$utils.generateResizedImageUrl(item, 100)"
+            class="card-img-1"
+            fit="cover"
+            style="width: 100%; height: 100%"></el-image>
         </li>
         <li
-          @click="changeCarousel (comInfo.mergeImages?.length)"
+          @click="changeCarousel(comInfo.mergeImages?.length)"
           :class="currentPre == comInfo.mergeImages?.length ? 'slip' : ''"
           v-if="comInfo.video">
-          <video width="100%" height="100%" :src="comInfo.video" />
+          <video
+            width="100%"
+            height="100%"
+            :src="comInfo.video" />
           <div class="playMask">
-            <img src="@/assets/img/play.png" alt="" />
+            <img
+              src="@/assets/img/play.png"
+              alt="" />
           </div>
         </li>
       </ul>
     </div>
 
     <ElImageViewer
-      v-if="showViewer" :initial-index="currentPre"
+      v-if="showViewer"
+      :initial-index="currentPre"
       :on-close="closeViewer"
-      :url-list="comS3Img"
-    />
+      :url-list="comS3Img" />
   </div>
 </template>
-  
+
 <script>
 import { mapMutations } from 'vuex'
-import ElImageViewer from "element-ui/packages/image/src/image-viewer";
-import Zoom from "@/components/Zoom";
+import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
+import Zoom from '@/components/Zoom'
 
 export default {
-  components: { Zoom,ElImageViewer },
+  components: { Zoom, ElImageViewer },
   props: {
     pageData: {
       type: Object,
       default: () => {
-        return {};
+        return {}
       },
     },
     id: {
       type: Number,
-      default: 0
+      default: 0,
     },
   },
   data() {
     return {
       indexBanner: [],
-      btnObj: ["View larger", "3D Preview"],
-      current3D: 0,  // 3D图序号
+      btnObj: ['View larger', '3D Preview'],
+      current3D: 0, // 3D图序号
       btnShow: true, // 所有按钮显示
       bigShow: false,
       showViewer: false,
-    };
+    }
   },
   computed: {
-    currentPre(){
+    currentPre() {
       return this.$store.state.product.smImgUlIdx
     },
     comInfo() {
-      const { main } = this.pageData;
-      const images = main.image_color.map(i => i.image); 
+      const { main } = this.pageData
+      const images = main.image_color.map(i => i.image)
 
       if (main.image) {
-        images.unshift(main.image);
+        images.unshift(main.image)
       }
 
-      main.mergeImages = images;
-      return main;
+      main.mergeImages = images
+      return main
     },
 
-    comS3Img(){
-			return this.comInfo.mergeImages.map(url => this.$utils.repaceDomain(url));
-		}
+    comS3Img() {
+      return this.comInfo.mergeImages.map(url => this.$utils.repaceDomain(url))
+    },
   },
-  watch:{
-    currentPre(newVal){
-      this.$refs.carousel.setActiveItem(newVal);
-    }
+  watch: {
+    currentPre(newVal) {
+      this.$refs.carousel.setActiveItem(newVal)
+    },
   },
-  mounted(){
-    if(this.comInfo.video){
-      this.$refs.video.volume = 0.5;
+  mounted() {
+    if (this.comInfo.video) {
+      this.$refs.video.volume = 0.5
     }
   },
   methods: {
     ...mapMutations({ setSmImgUlIdx: 'product/setSmImgUlIdx' }),
-    changeCarousel (val) {
-      this.setSmImgUlIdx(val);
+    changeCarousel(val) {
+      this.setSmImgUlIdx(val)
       if (val === this.comInfo.mergeImages?.length) {
-        this.btnShow = false;
-        this.comInfo.video && this.$refs.video.play();
+        this.btnShow = false
+        this.comInfo.video && this.$refs.video.play()
       } else {
-        this.btnShow = true;
-        this.comInfo.video && this.$refs.video.pause();
+        this.btnShow = true
+        this.comInfo.video && this.$refs.video.pause()
       }
     },
     selectCurrent3D(val) {
-      this.current3D = val;
+      this.current3D = val
     },
     getStyle(val) {
-      const bigImg = this.$refs.big;
-      bigImg.style.left = -2 * val.left + "px";
-      bigImg.style.top = -2 * val.top + "px";
-      this.bigShow = val.bigShow;
+      const bigImg = this.$refs.big
+      bigImg.style.left = -2 * val.left + 'px'
+      bigImg.style.top = -2 * val.top + 'px'
+      this.bigShow = val.bigShow
     },
     closeViewer() {
-      this.showViewer = false;
+      this.showViewer = false
     },
-	handleViwer(){
-		this.showViewer = true;
-	}
-  }
-};
+    handleViwer() {
+      this.showViewer = true
+    },
+  },
+}
 </script>
-  
-  <style lang="scss" scoped>
+
+<style lang="scss" scoped>
 .product-left {
   padding-right: 20px;
   .media {

components/product/ProductRight.vue

@@ -4,7 +4,9 @@
       <div class="title">
         <span
           class="title-1"
-          ref="title">{{ pageData.alias_name || pageData.product_name }}</span>
+          ref="title"
+          >{{ pageData.alias_name || pageData.product_name }}</span
+        >
         <span class="title-2">{{ pageData.product_code }}</span>
         <img
           :src="item.images"
@@ -14,48 +16,72 @@
         <img
           :src="item.url"
           v-for="item of pageData.icon"
-          :key="item.url" class="title-4" />
+          :key="item.url"
+          class="title-4" />
       </div>
-      <ul class="color" v-if="pageData.main.image_color?.length">
-        <li  
-            v-for="(item,i) of pageData.main.image_color"
-            :key="item.id">
-            <div class="color-item" v-if="item.color?.img">
-              <div @click="setSmImgUlIdx(computedIndex(i))" :class="currentPre == (computedIndex(i)) ? 'slip' : ''">
-                <el-tooltip
+      <ul
+        class="color"
+        v-if="pageData.main.image_color?.length">
+        <li
+          v-for="(item, i) of pageData.main.image_color"
+          :key="item.id">
+          <div
+            class="color-item"
+            v-if="item.color?.img">
+            <div
+              @click="setSmImgUlIdx(computedIndex(i))"
+              :class="currentPre == computedIndex(i) ? 'slip' : ''">
+              <el-tooltip
                 :content="item.color?.name"
                 placement="top"
                 effect="dark">
-                  <img
-                  :src="item.color?.img && !$mediaRegExp.test(item.color?.img) ? $OSS_PREFIX + item.color?.img : item.color?.img" />
-                </el-tooltip>
-              </div>
+                <img
+                  :src="
+                    item.color?.img && !$mediaRegExp.test(item.color?.img)
+                      ? $OSS_PREFIX + item.color?.img
+                      : item.color?.img
+                  " />
+              </el-tooltip>
             </div>
+          </div>
         </li>
       </ul>
-      <tab-nav 
+      <tab-nav
         :tabList="tabList"
         :currTab.sync="typeTab"
-        :marginTop="15"  :fontSize="16"
-        :liWidth="130" :liHeight="40"
-        :marginRight="5" :marginBottom="25"
+        :marginTop="15"
+        :fontSize="16"
+        :liWidth="130"
+        :liHeight="40"
+        :marginRight="5"
+        :marginBottom="25"
         @handle="clickNav" />
     </div>
     <div class="product-right-bottom">
-      <div 
+      <div
         class="details"
         v-show="typeTab == 0">
-        <div class="details-1" v-if="pageData.feature_data">
+        <div
+          class="details-1"
+          v-if="pageData.feature_data">
           <h3>Features</h3>
           <ul>
-            <li v-for="(i, key) in pageData.feature_data" :key="key">{{ i }}</li>
+            <li
+              v-for="(i, key) in pageData.feature_data"
+              :key="key">
+              {{ i }}
+            </li>
           </ul>
         </div>
-        <div class="details-1" v-if="comInfo.description">
+        <div
+          class="details-1"
+          v-if="comInfo.description">
           <h3>Description</h3>
           <p v-html="comInfo.description"></p>
         </div>
-        <div class="details-2" v-if="pageData.pbo">
+        <div
+          class="details-2"
+          v-if="pageData.pbo">
           <h3>Product Branding Information</h3>
           <p v-html="pageData.pbo"></p>
         </div>
@@ -109,7 +135,9 @@
                   :to="{ name: 'product-code', params: { code: item.trim() } }"
                   ><span
                     >{{ item
-                    }}<em v-if="i < comIncluded_packaging.length - 1">,</em></span
+                    }}<em v-if="i < comIncluded_packaging.length - 1"
+                      >,</em
+                    ></span
                   ></nuxt-link
                 >
                 <span v-else
@@ -129,7 +157,9 @@
                   :to="{ name: 'product-code', params: { code: item.trim() } }"
                   ><span
                     >{{ item
-                    }}<em v-if="i < comOptional_packaging.length - 1">,</em></span
+                    }}<em v-if="i < comOptional_packaging.length - 1"
+                      >,</em
+                    ></span
                   ></nuxt-link
                 >
                 <span v-else
@@ -277,16 +307,20 @@
         class="stock"
         v-show="false">
         <div v-if="stockData.length > 0">
-          <stock-table
-          :data="stockData"></stock-table>
-          <p class="quote-tips">For quantities over available stock levels, please contact us for pricing and timing</p>  
+          <stock-table :data="stockData"></stock-table>
+          <p class="quote-tips">
+            For quantities over available stock levels, please contact us for
+            pricing and timing
+          </p>
         </div>
-        <div class="quote-tips" v-else>
-          This product is made offshore, and is available for any quantity equal to, or above the listed MOQ
+        <div
+          class="quote-tips"
+          v-else>
+          This product is made offshore, and is available for any quantity equal
+          to, or above the listed MOQ
         </div>
       </div>
-      <div
-        v-show="typeTab == 3">
+      <div v-show="typeTab == 3">
         <h5>Maketing Resource</h5>
         <div class="resources maketing">
           <p
@@ -317,7 +351,11 @@
         </div>
         <h5 v-if="pageData.goodsCompliance?.length">Compliance Resource</h5>
         <div class="resources compliance">
-          <img :src="item.filter?.img" v-for="(item,i) in pageData.goodsCompliance" :key=i @click="download(item.pic)">
+          <img
+            :src="item.filter?.img"
+            v-for="(item, i) in pageData.goodsCompliance"
+            :key="i"
+            @click="download(item.pic)" />
         </div>
       </div>
       <!-- <div
@@ -405,8 +443,8 @@ export default {
         decoration_id: '',
       },
       // ticketFormVisible:false,
-      ticketForm:{
-        英文品名: this.pageData.alias_name||this.pageData.product_name,
+      ticketForm: {
+        英文品名: this.pageData.alias_name || this.pageData.product_name,
         SKU: this.pageData.product_code,
         问题类型: [],
         反馈详情: '',
@@ -417,18 +455,22 @@ export default {
         {
           prop: '问题类型',
           type: 'checkbox',
-          selectlist: ['网页信息','供应商质量','样品管理','产品部管理'],
+          selectlist: ['网页信息', '供应商质量', '样品管理', '产品部管理'],
         },
         { prop: '反馈详情', type: 'textarea' },
       ],
       rules: {
-        '问题类型': [{ required: true, message: 'Please select', trigger: 'change' }],
-        '反馈详情': [{ required: true, message: 'Please enter', trigger: 'blur' }]
-      }
+        问题类型: [
+          { required: true, message: 'Please select', trigger: 'change' },
+        ],
+        反馈详情: [
+          { required: true, message: 'Please enter', trigger: 'blur' },
+        ],
+      },
     }
   },
   computed: {
-    currentPre(){
+    currentPre() {
       return this.$store.state.product.smImgUlIdx
     },
     isLogin() {
@@ -453,29 +495,32 @@ export default {
       return this.comInfo.optional_attachments.split(',')
     },
   },
-  watch:{
+  watch: {
     //登陆立即显示Quick Quote和Changes选项
-    isLogin:{
-      handler(val){
-        if(val){
+    isLogin: {
+      handler(val) {
+        if (val) {
           this.tabList[1].isShow = true
           // this.tabList[4].isShow = true
         }
       },
-      immediate: true
-    }
-  },
-  mounted() {
+      immediate: true,
+    },
   },
+  mounted() {},
   methods: {
     ...mapActions(['getUserInfo']),
-    ...mapMutations({ openDialog: 'openDialog', setSmImgUlIdx: 'product/setSmImgUlIdx', setLoading: 'product/setLoading' }),
+    ...mapMutations({
+      openDialog: 'openDialog',
+      setSmImgUlIdx: 'product/setSmImgUlIdx',
+      setLoading: 'product/setLoading',
+    }),
     // 判断字符串是否符合商品code规律
     isProduct(str) {
       return /^[A-z]{1,4}\d{1,4}[A-z]?$/.test(str)
     },
     computedIndex(i) {
-      return this.pageData.main?.image ? 1 + i : i;
+      return this.pageData.main?.image ? 1 + i : i
     },
     // 保存一下用户选择的周期、型号、打印服务、addon、packaging, product builder页面要用到
     saveUserSelected() {
@@ -557,7 +602,7 @@ export default {
     download(url) {
       var urlStr = url.match('[^/]+(?!.*/)')[0]
       const repaceDomainUrl = this.$utils.repaceDomain(url)
-      if (url.endsWith(".pdf")) {
+      if (url.endsWith('.pdf')) {
         this.$utils.handleFileDownload(repaceDomainUrl, urlStr, false)
       } else {
         this.$utils.downloadBlob(url, urlStr)

components/product/Quote.vue

@@ -6,7 +6,10 @@
       class="com-loading"></div>
     <div v-else-if="quoteLoadState == 1">
       <tab-nav
-        :borderType="'allBorder'" :liWidth="100" :liHeight="40" :marginRight="5"
+        :borderType="'allBorder'"
+        :liWidth="100"
+        :liHeight="40"
+        :marginRight="5"
         :currTab.sync="curWeek"
         :tabList="priceList" />
       <div
@@ -21,7 +24,7 @@
             :allPrintTab="allPrintTab"
             :marginTop="0"
             :marginRight="5"
-            :marginBottom="items.basePrice?.length>1?7:0"
+            :marginBottom="items.basePrice?.length > 1 ? 7 : 0"
             @handle="sortBy(items)" />
           <!-- <el-popover
             placement="bottom-start"
@@ -60,13 +63,18 @@
         <!-- decoration_multiple is_more_print 打印开关,ID1001092需求 ；additional_print 颜色数量开关
         以上需求作废，改版为多色多面的需求-->
         <new-price-table
-          v-if="items.decoration?.length || items.basePrice?.[items.curPrint]?.decoration_addition?.length"
+          v-if="
+            items.decoration?.length ||
+            items.basePrice?.[items.curPrint]?.decoration_addition?.length
+          "
           :tableData="items.decoration"
           :tableColumns="[...decoration_columns, ...comCurBaseColumns]"
           :tableType="'Decoration'"
           :marginBottom="0"
-          :hasDecAdd="items.basePrice?.[items.curPrint]?.decoration_addition?.length"></new-price-table>
-          
+          :hasDecAdd="
+            items.basePrice?.[items.curPrint]?.decoration_addition?.length
+          "></new-price-table>
+
         <div
           v-for="(item, index) in items.basePrice"
           :key="item.name + index"
@@ -78,7 +86,6 @@
             :tableType="'Addon'"
             :multipleSelection.sync="items.selectAdditionRow"></new-price-table>
         </div>
-
       </div>
       <!-- <section>
         <p class="title1">
@@ -153,13 +160,13 @@
             <pc-switch v-model="freight_switch"></pc-switch>
           </div>
         </div>
-        <el-button
-          size="medium"
-          class="button-black"
-          @click="openMailDialog">
-          Enquiry
-        </el-button>
       </section> -->
+      <el-button
+        size="medium"
+        class="button-black"
+        @click="openMailDialog">
+        Enquiry
+      </el-button>
       <!-- <section>
         <unit-table
           :tableData="unitData"
@@ -197,12 +204,13 @@
       class="quote-tips">
       Current item prices are missing, please contact<a
         href="mailto:Info@promocollection.uk">
-        info@promocollection.uk</a>
+        info@promocollection.uk</a
+      >
     </div>
     <no-ssr>
       <div v-if="quoteLoadState == 1">
         <!-- Enquiry按钮 -->
-        <!-- <form-dialog
+        <form-dialog
           :emailForm="enquiryForm"
           :enquiryConfig="enquiryConfig"
           :visible.sync="enquiryFormVisible"
@@ -210,7 +218,7 @@
           :rules="rules"
           :labelWidth="
             enquiryConfig[3].selectlist?.length ? 140 : 82
-          "></form-dialog> -->
+          "></form-dialog>
         <mail-table
           ref="mailtable"
           :mailData="mailData"
@@ -247,7 +255,8 @@
               size="medium"
               @click="handleDownloadPdf"
               :loading="pdfLoading"
-              >Download</el-button>
+              >Download</el-button
+            >
           </div>
         </el-dialog>
         <!-- <form-dialog
@@ -270,7 +279,8 @@
           :emailForm="commentObj"></price-to-img>
         <!-- 报价图片弹框 -->
         <dialog-XX-success
-          :visible.sync="xxContentVisible" :imgType="false"
+          :visible.sync="xxContentVisible"
+          :imgType="false"
           :content="'This quantity is below the MOQ for this product'"></dialog-XX-success>
       </div>
     </no-ssr>
@@ -280,7 +290,12 @@
 <script>
 import { mapState, mapMutations, mapActions } from 'vuex'
 import _ from 'lodash'
-import { times as npTimes,plus as npPlus, minus as npMinus, divide as npDivide } from 'number-precision';
+import {
+  times as npTimes,
+  plus as npPlus,
+  minus as npMinus,
+  divide as npDivide,
+} from 'number-precision'
 import NewPriceTable from '@/components/table/NewPriceTable'
 import TotalTable from '@/components/table/TotalTable'
 import UnitTable from '@/components/table/UnitTable'
@@ -293,7 +308,7 @@ export default {
     TotalTable,
     UnitTable,
     MailTable,
-    'dialog-XX-success': dialogXXSuccess
+    'dialog-XX-success': dialogXXSuccess,
   },
   props: {
     pageData: {
@@ -304,7 +319,7 @@ export default {
     },
     id: {
       type: Number,
-      default: null
+      default: null,
     },
   },
   data() {
@@ -385,7 +400,7 @@ export default {
         { project: 'Setup' },
         { project: 'Unit' },
         { project: 'Freight' },
-        { project: 'Total' }
+        { project: 'Total' },
       ],
       unitData: [
         { total: 'Unit Rate %' },
@@ -393,11 +408,11 @@ export default {
         { total: 'Freight %' },
       ],
       sellData: [
-        { project: 'Postcode',summary: '-' },
-        { project: 'Setup',summary: 0.00 },
-        { project: 'Unit',summary: 0.00 },
-        { project: 'Freight',summary: 0.00 },
-        { project: 'Total',summary: 0.00 },
+        { project: 'Postcode', summary: '-' },
+        { project: 'Setup', summary: 0.0 },
+        { project: 'Unit', summary: 0.0 },
+        { project: 'Freight', summary: 0.0 },
+        { project: 'Total', summary: 0.0 },
       ],
       POA_Config: ['111', '111.00', '999', '999.00'],
       enquiryFormVisible: false,
@@ -491,34 +506,41 @@ export default {
       return this.comCurWeekPrice.basePrice[this.comCurPrint]
     },
     comLocationNum() {
-      return +(this.comCurWeekPrice.basePrice[this.comCurPrint].locationNum)
+      return +this.comCurWeekPrice.basePrice[this.comCurPrint].locationNum
     },
     comCurBaseColumns() {
       return this.comCurBasePrice.part_columns
     },
     comCurBaseTotalColumns() {
-      const d = this.comCurWeekPrice.basePrice[this.comCurPrint].total_part_columns
+      const d =
+        this.comCurWeekPrice.basePrice[this.comCurPrint].total_part_columns
       const n = this.comLocationNum
       if (n === 1) {
         return d
-      }else{
-        const concatAdd = [...d,...this.comCurWeekPrice.basePrice[this.comCurPrint].remainingAttr].slice(0, n);
+      } else {
+        const concatAdd = [
+          ...d,
+          ...this.comCurWeekPrice.basePrice[this.comCurPrint].remainingAttr,
+        ].slice(0, n)
         return concatAdd
       }
     },
-    comTotalLabel(){
+    comTotalLabel() {
       // 计算所有元素label的和
-      return this.comCurBaseTotalColumns.reduce((sum, item) => sum + Number(item.label), 0);
+      return this.comCurBaseTotalColumns.reduce(
+        (sum, item) => sum + Number(item.label),
+        0
+      )
     },
-    comSummaryColumns(){
-      return [{ label: this.comTotalLabel.toString(), prop: 'summary' }];
+    comSummaryColumns() {
+      return [{ label: this.comTotalLabel.toString(), prop: 'summary' }]
     },
     comAttributeList() {
       const obj = {}
       this.comCurBaseTotalColumns?.forEach(item => {
         obj[item.prop] = item.label
       })
-        obj.summary = this.comTotalLabel;
+      obj.summary = this.comTotalLabel
       return obj
     },
     // 当前已选基础价
@@ -545,7 +567,9 @@ export default {
                   obj[`${i}`] = npTimes(+supplier_val, item.num)
                 }
               } else {
-                obj[`${i}`] = this.POA_Config.includes(item[i]) ? item[i] : npTimes(+item[i], item.num);
+                obj[`${i}`] = this.POA_Config.includes(item[i])
+                  ? item[i]
+                  : npTimes(+item[i], item.num)
               }
             }
           }
@@ -555,37 +579,34 @@ export default {
       return arr
     },
     comBuyData() {
-      this.calculateBuyData();
+      this.calculateBuyData()
       return this.buyData
     },
-    comNoSumCol(){
-      return [
-          ...this.buy_columns,
-          ...this.comCurBaseTotalColumns
-        ]
+    comNoSumCol() {
+      return [...this.buy_columns, ...this.comCurBaseTotalColumns]
     },
-    comHasSumCol(){
+    comHasSumCol() {
       return [
-          ...this.buy_columns,
-          ...this.comCurBaseTotalColumns,
-          ...this.comSummaryColumns
-        ];
+        ...this.buy_columns,
+        ...this.comCurBaseTotalColumns,
+        ...this.comSummaryColumns,
+      ]
     },
-    comMergeColumns(){
-      return this.comLocationNum == 1 ? this.comNoSumCol:this.comHasSumCol
+    comMergeColumns() {
+      return this.comLocationNum == 1 ? this.comNoSumCol : this.comHasSumCol
     },
     comSellData() {
       if (Object.keys(this.comAttributeList).length !== 0) {
-        this.calculateSellData();
+        this.calculateSellData()
       }
       return this.sellData
     },
     comFilterSwitchSellData() {
       return this.comSellData?.filter((item, i) => {
         if (i === 1 && this.setup_switch) {
-          return false;
+          return false
         } else if (i === 3 && this.freight_switch) {
-          return false;
+          return false
         } else {
           return item
         }
@@ -614,13 +635,13 @@ export default {
             // 过滤掉website_qty标签无数量
             if (attributeList[a]) {
               this.initZeroObj[a] = 0
-            }else{
+            } else {
               delete attributeList[a]
             }
             for (const unit of this.unitData) {
               // 如果对象中缺少 attributeList 的 key，则设置为 40
               if (!(a in unit) || unit[a] === '') {
-                this.$set(unit,a,40)
+                this.$set(unit, a, 40)
               }
             }
           }
@@ -636,42 +657,60 @@ export default {
             vals.decorationOrign = [...decoration]
             vals.decorationID = decoration.map(i => i.id)
             vals.decoration = [...decoration].flatMap(item => {
-              const result = [];
+              const result = []
               if (item.max_color > 0) {
-                  result.push({ ...item, max_num: item.max_color,id:`${item.id}-1`,decName:item.max_color_name });
+                result.push({
+                  ...item,
+                  max_num: item.max_color,
+                  id: `${item.id}-1`,
+                  decName: item.max_color_name,
+                })
               }
               if (item.max_point > 0) {
-                  result.push({ ...item, max_num: item.max_point,id:`${item.id}-2`,decName:item.max_point_name  });
+                result.push({
+                  ...item,
+                  max_num: item.max_point,
+                  id: `${item.id}-2`,
+                  decName: item.max_point_name,
+                })
               }
-              return result;
-            });
+              return result
+            })
             vals.additionlist = additionlist
             for (const k in remaining) {
               const o = {}
               o.attributeList = this.copyData(attributeList)
-              if (remaining[k]?.length>1) {
+              if (remaining[k]?.length > 1) {
                 // 检查数组中各元素的 website_qtyN 是否都等于 "-" or "POA"，则删除key
                 for (const a in attributeList) {
-                  const is111Poa = remaining[k].every(item => this.POA_Config.includes(item[a]));
+                  const is111Poa = remaining[k].every(item =>
+                    this.POA_Config.includes(item[a])
+                  )
                   if (is111Poa) {
                     delete o.attributeList[a]
                   }
                 }
-              }else if (remaining[k]?.length === 1) {
+              } else if (remaining[k]?.length === 1) {
                 // 判断 remaining[k][0] 中是否包含 vals.attributeList 的键，并且对应的值都等于 "-" or "POA"，则不删除key
-                  const obj = remaining[k][0];
-                  const attributeKeys = Object.keys(o.attributeList);
-                  const areAllKeysInPOAConfig = attributeKeys.every(key => {
-                    return Object.prototype.hasOwnProperty.call(obj, key) && this.POA_Config.includes(obj[key]);
-                  });
+                const obj = remaining[k][0]
+                const attributeKeys = Object.keys(o.attributeList)
+                const areAllKeysInPOAConfig = attributeKeys.every(key => {
+                  return (
+                    Object.prototype.hasOwnProperty.call(obj, key) &&
+                    this.POA_Config.includes(obj[key])
+                  )
+                })
 
-                  if (!areAllKeysInPOAConfig) {
-                    attributeKeys.forEach(key => {
-                      if (Object.prototype.hasOwnProperty.call(obj, key) && this.POA_Config.includes(obj[key])) {
-                        delete o.attributeList[key];
-                      }
-                    });
-                  }
+                if (!areAllKeysInPOAConfig) {
+                  attributeKeys.forEach(key => {
+                    if (
+                      Object.prototype.hasOwnProperty.call(obj, key) &&
+                      this.POA_Config.includes(obj[key])
+                    ) {
+                      delete o.attributeList[key]
+                    }
+                  })
+                }
               }
               o.name = k
               o.data = remaining[k]
@@ -682,21 +721,21 @@ export default {
               const freightParam = {
                 postcode: '',
                 freight_type: 1,
-                freight: {}
+                freight: {},
               }
               o.total_part_columns = this.copyData(o.part_columns).map(obj => ({
                 ...obj,
-                ...freightParam
-              }));
+                ...freightParam,
+              }))
               o.remainingAttr = []
-              const firstColumns = { ...o.part_columns[0],...freightParam}
-              for(let i = 1; i < 9; i++){
-                if(!Object.keys(o.attributeList).includes(`website_qty${i}`)){
-                  const newColumn = {...firstColumns}
-                  this.$set(newColumn,'prop',`website_qty${i}`)
+              const firstColumns = { ...o.part_columns[0], ...freightParam }
+              for (let i = 1; i < 9; i++) {
+                if (!Object.keys(o.attributeList).includes(`website_qty${i}`)) {
+                  const newColumn = { ...firstColumns }
+                  this.$set(newColumn, 'prop', `website_qty${i}`)
                   o.remainingAttr.push(newColumn)
                 }
-              };
+              }
               vals.basePrice.push(o)
               if (!this.allPrintTab.includes(k)) {
                 this.allPrintTab.push(k)
@@ -715,9 +754,12 @@ export default {
               })
             }
             // 所有周期的所有打印，进来页面时默认勾选第一条价格
-            options.basePrice.forEach((opt,idx) => {
-              this.$set(opt, 'selectBaseRow', opt.data[0] ||{})
-              opt.decoration_addition = [...(options.decorationOrign?.[idx]?.decoration_addition || []),...(options.additionlist || [])]
+            options.basePrice.forEach((opt, idx) => {
+              this.$set(opt, 'selectBaseRow', opt.data[0] || {})
+              opt.decoration_addition = [
+                ...(options.decorationOrign?.[idx]?.decoration_addition || []),
+                ...(options.additionlist || []),
+              ]
             })
             options.decoration.forEach(opt => {
               this.$set(opt, 'num', 0)
@@ -737,17 +779,17 @@ export default {
           })
           this.quoteLoadState = 1
         })
-        .catch((e) => {
-          console.log('this.quoteLoadState1: ', e);
+        .catch(e => {
+          console.log('this.quoteLoadState1: ', e)
           this.quoteLoadState = 2
         })
     },
     formatDurationString(input) {
       // 匹配数字和字符串的正则表达式
-      const regex = /(\d+)([a-zA-Z]+)/g;
-      const result = input.replace(regex, '$1 $2');
+      const regex = /(\d+)([a-zA-Z]+)/g
+      const result = input.replace(regex, '$1 $2')
 
-      return result;
+      return result
     },
     // getWeight() {
     //   this.$axios
@@ -776,14 +818,14 @@ export default {
     // },
     getDebFreight: _.debounce(function (k) {
       this.getFreight(k)
-    }, 200),  
+    }, 200),
     getNumber(e, row, min) {
-        if (parseInt(e.target.value) < min) {
-            this.xxContentVisible = true;
-            row.label = min
-        } else {
-            this.xxContentVisible = false;
-        }
+      if (parseInt(e.target.value) < min) {
+        this.xxContentVisible = true
+        row.label = min
+      } else {
+        this.xxContentVisible = false
+      }
     },
     sortBy(items) {
       // items.decoration.sort(this.customSort(items.decorationID))
@@ -799,27 +841,32 @@ export default {
     dividePrice(a) {
       return npDivide(+a, 100)
     },
-    // openMailDialog() {
-    //   if (this.$utils.checkLogin()) {
-    //     this.getUserInfo()
-    //     const { contacts, email, phone, crm_users_id:crmUsersId } = this.userInfo
-    //     this.enquiryForm.Name = contacts
-    //     this.enquiryForm.Email = email
-    //     this.enquiryForm.Phone = phone
-    //     if (crmUsersId?.length) {
-    //       this.enquiryConfig[3].selectlist = crmUsersId
-    //       if (crmUsersId?.length === 1) {
-    //         this.enquiryForm['Customer manager'] = crmUsersId[0].name
-    //       }
-    //     } else {
-    //       this.enquiryConfig[3].isShow = false
-    //       this.$delete(this.enquiryForm, 'Customer manager')
-    //     }
-    //     this.enquiryFormVisible = true
-    //   } else {
-    //     this.openDialog()
-    //   }
-    // },
+    openMailDialog() {
+      if (this.$utils.checkLogin()) {
+        this.getUserInfo()
+        const {
+          contacts,
+          email,
+          phone,
+          crm_users_id: crmUsersId,
+        } = this.userInfo
+        this.enquiryForm.Name = contacts
+        this.enquiryForm.Email = email
+        this.enquiryForm.Phone = phone
+        if (crmUsersId?.length) {
+          this.enquiryConfig[3].selectlist = crmUsersId
+          if (crmUsersId?.length === 1) {
+            this.enquiryForm['Customer manager'] = crmUsersId[0].name
+          }
+        } else {
+          this.enquiryConfig[3].isShow = false
+          this.$delete(this.enquiryForm, 'Customer manager')
+        }
+        this.enquiryFormVisible = true
+      } else {
+        this.openDialog()
+      }
+    },
     getMailData() {
       this.mailData.Url = window.location.href
       const { Name, Email, Phone, Comments } = this.enquiryForm
@@ -835,57 +882,57 @@ export default {
       this.mailData['Quote time'] = this.$utils.formatTime(new Date())
     },
     // 发送价格邮件 Enquiry按钮
-    // async sendPriceMail() {
-    //   await this.getMailData()
-    //   await this.getCustomerQuoteData()
-    //   const {
-    //     Name,
-    //     Email,
-    //     Phone,
-    //     Comments,
-    //     'Customer manager': customerManager,
-    //   } = this.enquiryForm
-    //   this.$axios
-    //     .post('/uk-api/quote/sendenquiry', {
-    //       content: this.$refs.mailtable.$el.innerHTML,
-    //       name: Name,
-    //       email: Email,
-    //       phone: Phone,
-    //       customer_manager: customerManager || '',
-    //       url: this.mailData.Url,
-    //       product_code: this.pageData.product_code,
-    //       comments: Comments,
-    //       member_id: this.userInfo.id,
-    //     })
-    //     .then(res => {
-    //       this.setLoading(false)
-    //       this.enquiryFormVisible = false
-    //       this.$confirm('Enquiry Sent', {
-    //         confirmButtonText: 'OK',
-    //         showCancelButton: false,
-    //         type: 'success',
-    //         center: true,
-    //         showClose: false,
-    //         confirmButtonClass: 'com-btnblack',
-    //       }).then(() => {})
-    //     })
-    //     .catch(() => {
-    //       this.setLoading(false)
-    //     })
-    // },
-    // getCustomerQuoteData() {
-    //   const { name, selectAdditionRow } = this.comCurWeekPrice
-    //   this.specificationsObj.time = name
-    //   this.specificationsObj.model = this.comBasePrice.model
-    //   this.specificationsObj.decoration = this.comCurBasePrice.name
-    //   if (selectAdditionRow.length) {
-    //     this.specificationsObj.addonArr = selectAdditionRow.map(
-    //       item => item.name
-    //     )
-    //   } else {
-    //     this.specificationsObj.addonArr = null
-    //   }
-    // },
+    async sendPriceMail() {
+      await this.getMailData()
+      await this.getCustomerQuoteData()
+      const {
+        Name,
+        Email,
+        Phone,
+        Comments,
+        'Customer manager': customerManager,
+      } = this.enquiryForm
+      this.$axios
+        .post('/uk-api/quote/sendenquiry', {
+          content: this.$refs.mailtable.$el.innerHTML,
+          name: Name,
+          email: Email,
+          phone: Phone,
+          customer_manager: customerManager || '',
+          url: this.mailData.Url,
+          product_code: this.pageData.product_code,
+          comments: Comments,
+          member_id: this.userInfo.id,
+        })
+        .then(res => {
+          this.setLoading(false)
+          this.enquiryFormVisible = false
+          this.$confirm('Enquiry Sent', {
+            confirmButtonText: 'OK',
+            showCancelButton: false,
+            type: 'success',
+            center: true,
+            showClose: false,
+            confirmButtonClass: 'com-btnblack',
+          }).then(() => {})
+        })
+        .catch(() => {
+          this.setLoading(false)
+        })
+    },
+    getCustomerQuoteData() {
+      const { name, selectAdditionRow } = this.comCurWeekPrice
+      this.specificationsObj.time = name
+      this.specificationsObj.model = this.comBasePrice.model
+      this.specificationsObj.decoration = this.comCurBasePrice.name
+      if (selectAdditionRow.length) {
+        this.specificationsObj.addonArr = selectAdditionRow.map(
+          item => item.name
+        )
+      } else {
+        this.specificationsObj.addonArr = null
+      }
+    },
     // openDownloadDialog(type) {
     //   this.getCustomerQuoteData()
     //   type
@@ -925,19 +972,28 @@ export default {
     copyData(data) {
       return JSON.parse(JSON.stringify(data))
     },
-    calculateBuyData(){
+    calculateBuyData() {
       const selPriceArr = []
       if (JSON.stringify(this.comBasePrice) !== '{}') {
         selPriceArr.push(this.comBasePrice)
       }
-      selPriceArr.push(...this.comDecoPrice, ...this.comCurWeekPrice.selectAdditionRow);
-      if(selPriceArr.length === 0){
-        this.buyData = this.buyData.map(item => ({ ...item, ...this.initZeroObj }));
+      selPriceArr.push(
+        ...this.comDecoPrice,
+        ...this.comCurWeekPrice.selectAdditionRow
+      )
+      if (selPriceArr.length === 0) {
+        this.buyData = this.buyData.map(item => ({
+          ...item,
+          ...this.initZeroObj,
+        }))
         return
       }
       // 累加所选,初始数量对应的单价。赋值给this.initUnitObj
       for (const i in this.initUnitObj) {
-        const columnSum = this.copyData(selPriceArr).reduce(function (prev, cur) {
+        const columnSum = this.copyData(selPriceArr).reduce(function (
+          prev,
+          cur
+        ) {
           if (cur[i] === '111' || cur[i] === '111.00') {
             return (cur[i] = '-')
           } else if (cur[i] === '999' || cur[i] === '999.00') {
@@ -949,7 +1005,8 @@ export default {
             }
             return npPlus(+cur[i], prev).toFixed(2)
           }
-        }, 0)
+        },
+        0)
         this.$set(this.initUnitObj, i, columnSum)
       }
 
@@ -978,7 +1035,9 @@ export default {
           // 计算运费
           // 单独批次数量的总重
           // weight定义是{}，后端没数据传回[]
-          const unitWLocal = this.weight.unit_w_local ? +this.weight.unit_w_local : 0;
+          const unitWLocal = this.weight.unit_w_local
+            ? +this.weight.unit_w_local
+            : 0
           const totalWeight = Math.ceil(
             npTimes(unitWLocal, this.comAttributeList[a])
           )
@@ -994,10 +1053,21 @@ export default {
           let freightType
           let postcode
           let freight = {}
-          const matchIndex = this.comCurBaseTotalColumns.findIndex(item => item.prop === a)
+          const matchIndex = this.comCurBaseTotalColumns.findIndex(
+            item => item.prop === a
+          )
           // 1,所有按第一个运费统计；不为1，则只计算 comCurBaseTotalColumns的[地址数]长度
-          if (+this.comLocationNum === 1 || this.comLocationNum >= matchIndex + 1) {
-              ({ freight, freight_type: freightType, postcode } = this.comCurBaseTotalColumns[+this.comLocationNum === 1 ? 0 : matchIndex] || {});
+          if (
+            +this.comLocationNum === 1 ||
+            this.comLocationNum >= matchIndex + 1
+          ) {
+            ;({
+              freight,
+              freight_type: freightType,
+              postcode,
+            } = this.comCurBaseTotalColumns[
+              +this.comLocationNum === 1 ? 0 : matchIndex
+            ] || {})
           }
           if (freightType === 1 && postcode >= 3) {
             if (totalWeight > 20) {
@@ -1079,7 +1149,11 @@ export default {
       }
 
       if (this.setup_switch) {
-        this.$set(this.buyData, 0, { ...this.buyData[0], ...this.initZeroObj, ...{'summary':0.00} })
+        this.$set(this.buyData, 0, {
+          ...this.buyData[0],
+          ...this.initZeroObj,
+          ...{ summary: 0.0 },
+        })
       } else {
         this.$set(this.buyData, 0, { ...this.buyData[0], ...this.initSetupObj })
       }
@@ -1098,7 +1172,7 @@ export default {
       this.$set(this.buyData, 3, { ...this.buyData[3], ...this.initTotalObj })
     },
     calculateSellData() {
-    // 放置comSellData计算和副作用的代码
+      // 放置comSellData计算和副作用的代码
       const buySetup = this.comBuyData[0]
       const buyUnit = this.comBuyData[1]
       const buyFright = this.comBuyData[2]
@@ -1111,8 +1185,12 @@ export default {
           this.sellData[3][i] = buyUnit[i]
           this.sellData[4][i] = buyUnit[i]
         } else {
-          const item = this.comLocationNum === 1 ? this.comCurBaseTotalColumns[0] : this.comCurBaseTotalColumns.find(element => element.prop === i);
-          this.sellData[0][i] = item && item.postcode !== '' ? item.postcode : '-';
+          const item =
+            this.comLocationNum === 1
+              ? this.comCurBaseTotalColumns[0]
+              : this.comCurBaseTotalColumns.find(element => element.prop === i)
+          this.sellData[0][i] =
+            item && item.postcode !== '' ? item.postcode : '-'
 
           // 分别乘以Markup %表格
           const key = this.comCurBaseTotalColumns[0]?.prop
@@ -1135,10 +1213,13 @@ export default {
             this.sellData[3][i] = npTimes(buyFright[i], a).toFixed(2)
             // freight_switch会使qty的运费=0无法计算，故用了initFrightObj
             const fa = npTimes(this.initFrightObj[i], a)
-            frightSummary = npPlus(frightSummary,fa).toFixed(2)
+            frightSummary = npPlus(frightSummary, fa).toFixed(2)
           } else {
             this.sellData[3][i] = buyFright[i]
-            frightSummary = npPlus(frightSummary,this.initFrightObj[i]).toFixed(2)
+            frightSummary = npPlus(
+              frightSummary,
+              this.initFrightObj[i]
+            ).toFixed(2)
           }
 
           const unitQTY = npTimes(this.sellData[2][i], this.comAttributeList[i])
@@ -1150,36 +1231,60 @@ export default {
         }
       }
       // 迭代加了Total列，需要统计qty的运费后才能合计运费
-      if (this.sellData[2].summary !== '-' && this.sellData[2].summary !== 'POA') {
+      if (
+        this.sellData[2].summary !== '-' &&
+        this.sellData[2].summary !== 'POA'
+      ) {
         if (this.freight_switch) {
-          const num = Math.ceil((frightSummary / this.comAttributeList.summary) * 100) / 100
-          this.sellData[2].summary = npPlus(this.sellData[2].summary, num).toFixed(2)
-          this.sellData[3].summary = 0.00
-          const a = npTimes(this.sellData[2].summary,this.comAttributeList.summary)
-          this.sellData[4].summary = npPlus(this.sellData[1].summary,a).toFixed(2)
+          const num =
+            Math.ceil((frightSummary / this.comAttributeList.summary) * 100) /
+            100
+          this.sellData[2].summary = npPlus(
+            this.sellData[2].summary,
+            num
+          ).toFixed(2)
+          this.sellData[3].summary = 0.0
+          const a = npTimes(
+            this.sellData[2].summary,
+            this.comAttributeList.summary
+          )
+          this.sellData[4].summary = npPlus(
+            this.sellData[1].summary,
+            a
+          ).toFixed(2)
         } else {
           this.sellData[3].summary = frightSummary
-          this.sellData[4].summary = npPlus(frightSummary,this.sellData[4].summary).toFixed(2)
+          this.sellData[4].summary = npPlus(
+            frightSummary,
+            this.sellData[4].summary
+          ).toFixed(2)
         }
       }
     },
     // 低于最小起订量 把该栏的数值重置到最小起订量
-    getChildIdx(idx){
-      this.xxContentVisible = true;
-      this.$set(this.comCurBaseTotalColumns[idx-1],'label',this.comCurBaseColumns[0]?.label)
+    getChildIdx(idx) {
+      this.xxContentVisible = true
+      this.$set(
+        this.comCurBaseTotalColumns[idx - 1],
+        'label',
+        this.comCurBaseColumns[0]?.label
+      )
     },
-    setMaxNum(val){
-      if(val > 7){
+    setMaxNum(val) {
+      if (val > 7) {
         this.comCurBasePrice.locationNum = 7
-      }else if(val < 1){
+      } else if (val < 1) {
         this.comCurBasePrice.locationNum = 1
       }
     },
-    ...mapMutations({ openDialog: 'openDialog', setLoading: 'product/setLoading' })
+    ...mapMutations({
+      openDialog: 'openDialog',
+      setLoading: 'product/setLoading',
+    }),
   },
 }
 </script>
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 $deep-blue: #004a97;
 
 .exclamation-icon {
@@ -1237,7 +1342,7 @@ $deep-blue: #004a97;
     width: 120px;
     margin-right: 10px;
   }
-  .entry-text{
+  .entry-text {
     margin-left: 280px;
     width: 130px;
     text-align: center;

components/product/product.scss

@@ -1,200 +1,199 @@
 $deep-blue: #004a97;
 .product-right {
-    // flex:1;
-    width: 800px;
-    margin-top: -10px;
-    .product-right-top {
-        .title {
-            margin-bottom: 10px;
-            max-width: 800px;
-            .title-1 {
-                vertical-align: bottom;
-                font-size: 18px;
-                font-weight: bold;
-            }
-            .title-2 {
-                vertical-align: bottom;
-                font-size: 16px;
-                color: #0b6dc9;
-                margin: 0 10px;
-            }
-            .title-3 {
-                vertical-align: bottom;
-                margin-right: 4px;
-                width: 44px;
-                border-radius: 4px;
-            }
-            .title-4 {
-                vertical-align: bottom;
-                margin-right: 10px;
-                height: 30px;
-            }
+  // flex:1;
+  width: 800px;
+  margin-top: -10px;
+  .product-right-top {
+    .title {
+      margin-bottom: 10px;
+      max-width: 800px;
+      .title-1 {
+        vertical-align: bottom;
+        font-size: 18px;
+        font-weight: bold;
+      }
+      .title-2 {
+        vertical-align: bottom;
+        font-size: 16px;
+        color: #0b6dc9;
+        margin: 0 10px;
+      }
+      .title-3 {
+        vertical-align: bottom;
+        margin-right: 4px;
+        width: 44px;
+        border-radius: 4px;
+      }
+      .title-4 {
+        vertical-align: bottom;
+        margin-right: 10px;
+        height: 30px;
+      }
+    }
+    .color {
+      height: 36px;
+      display: flex;
+      align-items: center;
+      .color-item {
+        width: 36px;
+        div {
+          margin: 0 auto;
+          cursor: pointer;
+          width: 28px;
+          height: 28px;
+          box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16),
+            0 1px 2px rgba(0, 0, 0, 0.23);
+          border-radius: 20px;
+          transition: all 0.2s;
+          img {
+            width: 100%;
+            height: 100%;
+          }
         }
-        .color {
-            height: 36px;
-            display: flex;
-            align-items: center;
-            .color-item {
-                width: 36px;
-                div {
-                    margin: 0 auto;
-                    cursor: pointer;
-                    width: 28px;
-                    height: 28px;
-                    box-shadow:
-                        0 3px 6px rgba(0, 0, 0, 0.16),
-                        0 1px 2px rgba(0, 0, 0, 0.23);
-                    border-radius: 20px;
-                    transition: all 0.2s;
-                    img {
-                        width: 100%;
-                        height: 100%;
-                    }
-                }
-                .slip {
-                    box-sizing: border-box;
-                    width: 34px;
-                    height: 34px;
-                    border: 1px solid #004a97;
-                    padding: 3px;
-                }
-            }
+        .slip {
+          box-sizing: border-box;
+          width: 34px;
+          height: 34px;
+          border: 1px solid #004a97;
+          padding: 3px;
         }
+      }
     }
-    .product-right-bottom {
-        margin-bottom: 20px;
-        .details {
-            h3 {
-                font-size: 20px;
-                margin-bottom: 10px;
+  }
+  .product-right-bottom {
+    margin-bottom: 20px;
+    .details {
+      h3 {
+        font-size: 20px;
+        margin-bottom: 10px;
+      }
+      p,
+      li {
+        line-height: 1.8;
+        font-size: 16px;
+      }
+      .details-1 {
+        margin-bottom: 15px;
+        p,
+        li {
+          color: #4a596c;
+        }
+        ul {
+          padding-left: 20px;
+          li {
+            list-style-type: disc;
+          }
+        }
+      }
+      .details-2 {
+        h3 {
+          text-align: center;
+        }
+        p {
+          text-indent: 2em;
+          color: #ff4500;
+          font-weight: bold;
+          text-align: center;
+        }
+      }
+      .details-3 {
+        position: relative;
+        ul {
+          position: relative;
+          z-index: 1;
+          margin-top: 15px;
+          li {
+            border-bottom: 1px solid rgba(190, 190, 190, 0.2);
+            display: flex;
+            div {
+              line-height: 1.5;
+              padding: 5px 0 5px 20px;
             }
-            p,
-            li {
-                line-height: 1.8;
-                font-size: 16px;
+            .title {
+              font-size: 16px;
+              text-align: center;
+              background-color: $deep-blue;
+              width: 100%;
+              color: #fff;
             }
-            .details-1 {
-                margin-bottom: 15px;
-                p,
-                li {
-                    color: #4a596c;
-                }
-                ul{
-                    padding-left: 20px;
-                    li {
-                        list-style-type: disc;
-                    }
-                }
+            .point {
+              min-width: 193px;
+              background-color: #f5f5f5;
+              font-size: 16px;
             }
-            .details-2 {
-                h3 {
-                    text-align: center;
-                }
-                p {
-                    text-indent: 2em;
-                    color: #ff4500;
-                    font-weight: bold;
-                    text-align: center;
-                }
+            .info {
+              font-size: 14px;
+              color: #4a596c;
+              & + .info {
+                padding-left: 0;
+              }
             }
-            .details-3 {
-                position: relative;
-                ul {
-                    position: relative;
-                    z-index: 1;
-                    margin-top: 15px;
-                    li {
-                        border-bottom: 1px solid rgba(190, 190, 190, 0.2);
-                        display: flex;
-                        div {
-                            line-height: 1.5;
-                            padding: 5px 0 5px 20px;
-                        }
-                        .title {
-                            font-size: 16px;
-                            text-align: center;
-                            background-color: $deep-blue;
-                            width: 100%;
-                            color: #fff;
-                        }
-                        .point {
-                            min-width: 193px;
-                            background-color: #f5f5f5;
-                            font-size: 16px;
-                        }
-                        .info {
-                            font-size: 14px;
-                            color: #4a596c;
-                            & + .info {
-                                padding-left: 0;
-                            }
-                        }
-                        a {
-                            color: #6495ed;
-                        }
-                    }
-                }
+            a {
+              color: #6495ed;
             }
-                button {
-                    position: absolute;
-                    top: 0;
-                    right: 0; /* 初始位置在 ul 区域的右边 */
-                    transition: right 1.5s; /* 右移效果和 z-index 延迟变更 */
-                    z-index: 0;
-                    height: 34px;
-                    display: flex;
-                    align-items: center;
-                }
+          }
+        }
+      }
+      button {
+        position: absolute;
+        top: 0;
+        right: 0; /* 初始位置在 ul 区域的右边 */
+        transition: right 1.5s; /* 右移效果和 z-index 延迟变更 */
+        z-index: 0;
+        height: 34px;
+        display: flex;
+        align-items: center;
+      }
 
-                .details-3:hover .el-button {
-                    right: -75px; /* 鼠标移入 ul 区域时滑出到右上角 */
-                    transition: right 1.5s;
-                }
+      .details-3:hover .el-button {
+        right: -75px; /* 鼠标移入 ul 区域时滑出到右上角 */
+        transition: right 1.5s;
+      }
 
-            .showcase {
-                height: 60px;
-                // margin-top: 20px;
-                .banner {
-                    width: 100%;
-                    height: 100%;
-                    background-size: cover;
-                    background-repeat: no-repeat;
-                    background-position: center;
-                }
-            }
-        }
-        h5 {
-            font-size: 16px;
-            margin-bottom: 20px;
-        }
-        .resources {
-            width: 450px;
-            margin-left: 20px;
-        }
-        .maketing {
-            display: grid;
-            grid-template-columns: repeat(2, 1fr);
-            p {
-                cursor: pointer;
-                margin-bottom: 30px;
-                display: inline-block;
-                img {
-                    margin-right: 10px;
-                    vertical-align: middle;
-                }
-                vertical-align: middle;
-            }
-        }
-        .compliance {
-            img {
-                height: 60px;
-                margin-right: 20px;
-                margin-bottom: 20px;
-                cursor: pointer;
-            }
+      .showcase {
+        height: 60px;
+        // margin-top: 20px;
+        .banner {
+          width: 100%;
+          height: 100%;
+          background-size: cover;
+          background-repeat: no-repeat;
+          background-position: center;
         }
-        .quote-tips {
-            font-size: 16px;
+      }
+    }
+    h5 {
+      font-size: 16px;
+      margin-bottom: 20px;
+    }
+    .resources {
+      width: 450px;
+      margin-left: 20px;
+    }
+    .maketing {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      p {
+        cursor: pointer;
+        margin-bottom: 30px;
+        display: inline-block;
+        img {
+          margin-right: 10px;
+          vertical-align: middle;
         }
+        vertical-align: middle;
+      }
+    }
+    .compliance {
+      img {
+        height: 60px;
+        margin-right: 20px;
+        margin-bottom: 20px;
+        cursor: pointer;
+      }
+    }
+    .quote-tips {
+      font-size: 16px;
     }
+  }
 }