lint: code format.

pages/index.vue

@@ -1,45 +1,48 @@
 <template>
   <div class="com-main">
-    <carousel v-if="indexBanner.length" :banner="indexBanner" :height="'538px'" ></carousel>
+    <carousel
+      v-if="indexBanner.length"
+      :banner="indexBanner"
+      :height="'538px'"></carousel>
     <sub-nav :secondaryBanner="secondaryBanner"></sub-nav>
     <section class="com-width-1200 com-margin-auto">
       <pc-title :title="'Trending Products'"></pc-title>
       <div class="card-wrap com-margin-auto">
-        <card 
+        <card
           v-for="(item, k) in indexGoodsRankLists"
           :key="k"
           :cardData="item"
           ref="card"
-          @addCompare="addCompareList"
-        ></card>
+          @addCompare="addCompareList"></card>
         <transition
           @before-enter="beforeEnter"
           @enter="enter"
-          @after-enter="afterEnter"
-        >
+          @after-enter="afterEnter">
           <div
             class="ball"
             v-show="shopCarBall"
-            ref="ball"
-          >
+            ref="ball">
             <div class="linner_ball"></div>
           </div>
         </transition>
       </div>
     </section>
-    <a :href="midBanner[0]?.link" target="_target" v-if="midBanner.length">
-      <el-image 
-        lazy 
+    <a
+      :href="midBanner[0]?.link"
+      target="_target"
+      v-if="midBanner.length">
+      <el-image
+        lazy
         :src="midBanner[0]?.image"
         alt="why choose us"
-        class="middle_banner" fit="cover"></el-image>
+        class="middle_banner"
+        fit="cover"></el-image>
     </a>
     <section class="com-width-1400 com-margin-auto row-card">
       <row-card
         v-for="(item, k) in articleList"
         :key="k"
-        :data="item"
-      ></row-card>
+        :data="item"></row-card>
       <!-- <subscription></subscription> -->
     </section>
   </div>
@@ -47,37 +50,38 @@
 
 <script>
 export default {
-  name: "IndexPage",
-  layout: "default",
-  
-  async asyncData({ $axios,req }) {
+  name: 'IndexPage',
+  layout: 'default',
+
+  async asyncData({ $axios, req }) {
     // type:1、首页顶部banner，2、首页小图推荐，3、中部banner，4、，5、推荐文章栏目，6、底部banner，7、社交链接
-    const indexBanner = await $axios.post("home/indexBanner", {
+    const indexBanner = await $axios.post('home/indexBanner', {
       site: 1,
       type: 1,
-    });
-    const secondaryBanner = await $axios.post("home/indexBanner", {
+    })
+    const secondaryBanner = await $axios.post('home/indexBanner', {
       site: 1,
       type: 2,
-    });
-    const indexGoodsRankLists = await $axios.post("home/indexGoodsRankLists", {
+    })
+    const indexGoodsRankLists = await $axios.post('home/indexGoodsRankLists', {
       site: 1,
-    });
-    const midBanner = await $axios.post("home/indexBanner", {
+    })
+    const midBanner = await $axios.post('home/indexBanner', {
       site: 1,
       type: 3,
-    });
-    const articleList = await $axios.post("home/indexBanner", {
+    })
+    const articleList = await $axios.post('home/indexBanner', {
       site: 1,
       type: 5,
-    });
+    })
 
-    return { 
+    return {
       indexBanner: indexBanner.result.data,
       secondaryBanner: secondaryBanner.result.data,
       indexGoodsRankLists: indexGoodsRankLists.result,
       midBanner: midBanner.result.data,
-      articleList: articleList.result.data };
+      articleList: articleList.result.data,
+    }
   },
   data() {
     return {
@@ -89,45 +93,44 @@ export default {
       shopCarBall: false,
       shopCarBallEl: null,
       ss: null,
-    };
-  },
-  created() {
+    }
   },
+  created() {},
   methods: {
     addCompareList(target) {
-      this.shopCarBallEl = target;
-      this.shopCarBall = true;
+      this.shopCarBallEl = target
+      this.shopCarBall = true
     },
 
     // 动画开始
     beforeEnter(el) {
       // 获取元素的大小及其相对于视口的位置
       if (process.client) {
-          const dom = this.shopCarBallEl.getBoundingClientRect();
-          const comparePosition = document
-            .querySelector(".compare-list")
-            .getBoundingClientRect();
-          const offsetX = comparePosition.left - dom.left;
-          const offsetY = dom.top - comparePosition.top-20;
-          el.style.display = "";
-          // y轴是曲直向上的，x轴是蜿蜒的向右的
-          el.style.transform = `translate3D( -${offsetX}px,${offsetY}px,0)`;
+        const dom = this.shopCarBallEl.getBoundingClientRect()
+        const comparePosition = document
+          .querySelector('.compare-list')
+          .getBoundingClientRect()
+        const offsetX = comparePosition.left - dom.left
+        const offsetY = dom.top - comparePosition.top - 20
+        el.style.display = ''
+        // y轴是曲直向上的，x轴是蜿蜒的向右的
+        el.style.transform = `translate3D( -${offsetX}px,${offsetY}px,0)`
       }
     },
     enter(el, done) {
       // 触发重绘，来实现动画的移动过程
       if (process.client) {
-        this.ss = document.body.offsetHeight;
-        el.style.transform = `translate3D( 0,0,0)`;
-        el.addEventListener("transitionend", done);
+        this.ss = document.body.offsetHeight
+        el.style.transform = `translate3D( 0,0,0)`
+        el.addEventListener('transitionend', done)
       }
     },
     afterEnter(el) {
-      this.shopCarBall = false;
-      el.style.display = "none";
+      this.shopCarBall = false
+      el.style.display = 'none'
     },
   },
-};
+}
 </script>
 
 <style lang="scss" scoped>
@@ -150,12 +153,10 @@ export default {
   height: 20px;
   border-radius: 50%;
   background: #e90000;
-  transition: all .5s linear;
+  transition: all 0.5s linear;
   z-index: 9999;
   .linner_ball {
-    transition: all .5s linear;
+    transition: all 0.5s linear;
   }
 }
-
-
 </style>