首页K先优化

src/views/home/index.vue

@@ -239,7 +239,7 @@
                             <img src="../../assets/img/decreace.png" class="td_img" alt="" v-show="item.increase * 1 < 0"> -->
                             <svg width="109" height="39">
                                 <g style="transform: translate(0, 10px)">
-                                    <path :d="item.line" />
+                                    <path :d="item.line"  :class="item.increase *1 <0 ?'path_decreace':'path_increace'"/>
                                 </g>
                             </svg>
                           </td>
@@ -512,7 +512,6 @@ export default {
     };
   },
   methods: {
-    
     getScales(data) {
         const x = d3.scaleTime().range([0, 100]);
         const y = d3.scaleLinear().range([39, 0]);
@@ -531,28 +530,28 @@ export default {
             // this.calculatePath(item.prices)
             item.line = path(item.prices);
         })
+        console.info(this.marketList[0].marketInfoList)
     },
     truncate(str, length) {
         return _.truncate(str, { length });
     },
     isShow(str) {
-      let reg = new RegExp(this.searchTxt, "ig");
-      return reg.test(str);
+        let reg = new RegExp(this.searchTxt, "ig");
+        return reg.test(str);
     },
     filterCode: function (str) {
-      return str.replace(/<[^<>]+>/g, "").replace(/&nbsp;/gi, "");
+        return str.replace(/<[^<>]+>/g, "").replace(/&nbsp;/gi, "");
     },
     swiperPrev() {
-      let $swiper = this.$refs.swiper.$swiper;
-      $swiper.slidePrev();
+        let $swiper = this.$refs.swiper.$swiper;
+        $swiper.slidePrev();
     },
     swiperNext() {
-      let $swiper = this.$refs.swiper.$swiper;
-      $swiper.slideNext();
+        let $swiper = this.$refs.swiper.$swiper;
+        $swiper.slideNext();
     },
     indexList() {
-      Home.indexList()
-        .then((res) => {
+        Home.indexList().then((res) => {
             console.info(res)
             this.bannerList = res.bannerList;
 
@@ -569,48 +568,47 @@ export default {
         .catch((res) => {});
     },
     skroll() {
-      let skro = this.skro;
-
-      skro
-        .add(".marquee-list .item", {
-          animation: "fadeInLeft",
-          delay: 80,
-          duration: 1000,
-        })
-        .add(".new-ticker-block", {
-          animation: "fadeInRight",
-          delay: 80,
-          duration: 800,
-        })
-        .add(".shlitu", {
-          animation: "fadeInLeft",
-          delay: 80,
-          duration: 800,
-        })
-        .add(".activity-box", {
-          animation: "zoomIn",
-          delay: 80,
-          duration: 800,
-        })
-        .add(".lattest-news-section .item", {
-          animation: "zoomIn",
-          wait: 150,
-          delay: 80,
-          duration: 800,
-        })
-        .init();
+        let skro = this.skro;
+
+        skro
+            .add(".marquee-list .item", {
+            animation: "fadeInLeft",
+            delay: 80,
+            duration: 1000,
+            })
+            .add(".new-ticker-block", {
+            animation: "fadeInRight",
+            delay: 80,
+            duration: 800,
+            })
+            .add(".shlitu", {
+            animation: "fadeInLeft",
+            delay: 80,
+            duration: 800,
+            })
+            .add(".activity-box", {
+            animation: "zoomIn",
+            delay: 80,
+            duration: 800,
+            })
+            .add(".lattest-news-section .item", {
+            animation: "zoomIn",
+            wait: 150,
+            delay: 80,
+            duration: 800,
+            })
+            .init();
     },
 
     // 是否为自选
     isCoolect(i) {
-      return this.collect.map((item) => item.pair_name).includes(i.pair_name);
+        return this.collect.map((item) => item.pair_name).includes(i.pair_name);
     },
 
     // 获取自选交易列表
     getCollect() {
-      Home.getCollect()
-        .then((res) => {
-          this.collect = res || [];
+        Home.getCollect().then((res) => {
+            this.collect = res || [];
         })
         .catch((err) => {});
     },
@@ -647,26 +645,27 @@ export default {
 
     // 链接socket
     indexMarketList() {
-      const ws = new Socket(this.Globals.Server.Path.WS);
-      ws.on("open", () => {
-        this.ws = ws;
-        ws.send({
-          cmd: "sub",
-          msg: "indexMarketList",
+        const ws = new Socket(this.Globals.Server.Path.WS);
+        ws.on("open", () => {
+            this.ws = ws;
+            ws.send({
+            cmd: "sub",
+            msg: "indexMarketList",
+            });
+        });
+        ws.on("message", (res) => {
+            console.info(res)
+            let { data, msg, code, sub, type, status } = res;
+            if (sub == "indexMarketList") {
+                this.marketList = data;
+                this.replaceOptional();
+                this.calculatePath()
+            } else if (type == "ping") {
+                ws.send({
+                    cmd: "pong",
+                });
+            }
         });
-      });
-      ws.on("message", (res) => {
-        console.info(res)
-        let { data, msg, code, sub, type, status } = res;
-        if (sub == "indexMarketList") {
-          this.marketList = data;
-          this.replaceOptional();
-        } else if (type == "ping") {
-          ws.send({
-            cmd: "pong",
-          });
-        }
-      });
     },
 
     // 鼠标移入卡片的样式
@@ -763,14 +762,17 @@ mounted() {
 </script>
 
 <style lang="scss" scoped>
-svg{
-    margin: 25px;
-}
 path{
+    // stroke: #76BF8A;
     fill: none;
-    stroke: #76BF8A;
     stroke-width: 3px;
 }
+.path_decreace{
+    stroke: #ff231f;
+}
+.path_increace{
+    stroke: #76BF8A;
+}
 // .view-more {
 //     background: #fd5b2c !important;
 // }