首页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,6 +530,7 @@ export default {
             // this.calculatePath(item.prices)
             item.line = path(item.prices);
         })
+        console.info(this.marketList[0].marketInfoList)
     },
     truncate(str, length) {
         return _.truncate(str, { length });
@@ -551,8 +551,7 @@ export default {
         $swiper.slideNext();
     },
     indexList() {
-      Home.indexList()
-        .then((res) => {
+        Home.indexList().then((res) => {
             console.info(res)
             this.bannerList = res.bannerList;
 
@@ -608,8 +607,7 @@ export default {
 
     // 获取自选交易列表
     getCollect() {
-      Home.getCollect()
-        .then((res) => {
+        Home.getCollect().then((res) => {
             this.collect = res || [];
         })
         .catch((err) => {});
@@ -661,6 +659,7 @@ export default {
             if (sub == "indexMarketList") {
                 this.marketList = data;
                 this.replaceOptional();
+                this.calculatePath()
             } 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;
 // }