盘点管理tag标签更换为div（解决由于过多tag组件的使用路由加载吃力延迟问题）

src/views/checkManage/index.vue

@@ -21,11 +21,12 @@
                 <happy-scroll color="rgba(100,100,100,0.5)" size="8" class="scroll-box">
                     <div class="roadway-box">
                         <div class="line" v-for="item in 20" :key="item">
-                            <a-tag
-                                :color="i+'-'+item == '4-14'|| i+'-'+item=='8-18'?'#d81e06':'#bfbfbf'"
-                                style="width:46px;height:25px;margin: 1px 2px;" v-for="i in 60"
+                            <div
+                                class="ele"
+                                :style="{background:i+'-'+item == '4-14'|| i+'-'+item=='8-18'?'#d81e06':'#bfbfbf'}"
+                                v-for="i in 60"
                                 :key="i">{{i}}-{{item}}
-                            </a-tag>
+                            </div>
                         </div>
                     </div>
                 </happy-scroll>
@@ -53,11 +54,11 @@
                 <happy-scroll color="rgba(100,100,100,0.5)" size="8" class="scroll-box">
                     <div class="roadway-box">
                         <div class="line" v-for="item in 20" :key="item">
-                            <a-tag
-                                :color="i+'-'+item == '5-16'|| i+'-'+item=='9-17'||i+'-'+item=='11-15'?'#1afa29':'#bfbfbf'"
-                                style="width:46px;height:25px;margin: 1px 2px;" v-for="i in 60"
+                            <div class="ele"
+                                 :style="{background:i+'-'+item == '5-16'|| i+'-'+item=='9-17'||i+'-'+item=='11-15'?'#1afa29':'#bfbfbf'}"
+                                 v-for="i in 60"
                                  :key="i">{{i}}-{{item}}
-                            </a-tag>
+                            </div>
                         </div>
                     </div>
                 </happy-scroll>
@@ -118,26 +119,12 @@ export default {
         .roadway-top {
             padding: 20px 0;
             width: 1000px;
-
-            .scroll-box {
-                height: 270px;
-
-                .roadway-box {
-                    transform: rotateX(180deg);
-                    padding: 10px 10px 0 0;
-
-                    .line {
-                        display: flex;
-                        transform: rotateX(180deg); //两次垂直镜像翻转让原本由上到下排列的div 更改为由下到上
-                    }
-                }
-            }
-
         }
 
         .roadway-buttom {
             padding: 20px 0;
             width: 1000px;
+        }
 
         .scroll-box {
             height: 270px;
@@ -149,10 +136,17 @@ export default {
                 .line {
                     display: flex;
                     transform: rotateX(180deg); //两次垂直镜像翻转让原本由上到下排列的div 更改为由下到上
+                    .ele {
+                        width: 46px;
+                        height: 25px;
+                        margin: 1px 2px;
+                        text-align: center;
+                        border-radius: 4px;
+                        cursor: pointer;
+                        font-size: 14px;
                     }
                 }
             }
-
         }
     }
 </style>