update code

src/views/dashboard/components/ModelFlow.vue

@@ -60,9 +60,11 @@
         <el-row class="row-3">
             
                 <div class="card-item line-top">
+                    <el-badge :value="0" class="item">
                     <div class="div-img">
-                    <img class="img-120" src="./flow/szgl.png" />
+                        <img class="img-120" src="./flow/szgl.png" />                    
-                </div>
+                    </div>
+                    </el-badge>
                         <div class="title-text">算子管理</div>
                     
                 </div>
@@ -73,15 +75,19 @@
                 <div class="line"></div>
                 <div class="card-item card-center">
                     <div class="card-center-item">
+                        <el-badge :value="0" class="item">
                     <div class="div-img">
                     <img class="img-120" src="./flow/sbgl.png" />
                     </div>
+                </el-badge>
                         <div class="title-text">设备管理</div>
                     </div>
                     <div class="card-center-item">
+                        <el-badge :value="0" class="item">
                     <div class="div-img">
                     <img class="img-120" src="./flow/gjgl.png" />
                     </div>
+                </el-badge>
                     <div class="title-text">工具管理</div>
                     </div>
                 </div>
@@ -89,9 +95,11 @@
                 <div class="card-item" ></div>
                 <div class="line"></div>
                 <div class="card-item  line-top">
+                    <el-badge :value="0" class="item">
                     <div class="div-img">
                     <img class="img-120" src="./flow/sjjgl.png" />
                     </div>
+                </el-badge>
                         <div class="title-text">数据管理</div>
                     
                 </div>
@@ -166,6 +174,7 @@
                 position:absolute;
                 width: 120px;
                 top:24px;
+                z-index: 9;
                 &:first-child{
                     left: -90px;
                     &::after{
@@ -175,7 +184,7 @@
                         width: 72px;
                         height: 40px;
                         position: relative;
-                        top:-165px;
+                        top:-175px;
                         left:60px;
                     }
                     &::before{
@@ -198,7 +207,7 @@
                         width: 72px;
                         height: 40px;
                         position: relative;
-                        top:-165px;
+                        top:-175px;
                         left:-10px;
                     }
                     &::before{
@@ -222,7 +231,7 @@
                     border-left:dotted 2px #3399ff;
                     height: 60px;
                     position: relative;
-                    top:-160px;
+                    top:-170px;
                     left:60px;
                 }
                 &::before{

src/views/dashboard/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="dashboard-container">
+  <div class="dashboard-container" :class="isSmallScreen?'is-small':''">
     <!-- github角标 -->
     <el-row :gutter="10" class="mt-3" style="margin-bottom: 12px;">
       <el-col :span="4" v-for="(it, idx) in topInfos" :key="idx">
@@ -18,12 +18,12 @@
       <template #header>
       <div class="row2-top">
         <div style="color:#333;font-weight: bold;font-size:15px;">设备运行状态</div>
-        <div class="div-more" v-if="1==2">更多</div>
+        <div class="div-more" v-if="false">更多</div>
       </div>
       </template>
       <el-scrollbar max-height="504px">        
       <el-row :gutter="20">
-        <el-col :span="6" v-for="it in devInfos" :key="it.id" class="dev-item" style="margin-bottom: 20px;">
+        <el-col :span="isSmallScreen?8:6" v-for="it in devInfos" :key="it.id" class="dev-item" style="margin-bottom: 20px;">
           <el-card shadow="hover">
             <template #header>
               <div class="dev-title">{{ it.name }}
@@ -83,7 +83,7 @@
       <ModelFlow/>
     </el-card>
   </div>
-  <div style="min-width: 300px;padding-left:12px;">
+  <div style="" class="right-panel">
     <el-card shadow="never" class="top-row2 notice-card">
       <template #header>
         <div class="row2-top">
@@ -137,6 +137,18 @@ let devInfos = reactive([
   { id: 1011, name: '设备名称5', netType: 'network001', modelName: '模型名称', state: 1, temperature: 25, memory: 85, cpu: 51 },
   { id: 1012, name: '设备名称6', netType: 'network001', modelName: '模型名称', state: 2, temperature: 25, memory: 85, cpu: 51 },
 ])
+const winWidth=ref(0)
+const isSmallScreen=computed(()=>{
+  return winWidth.value<1440;
+});
+onMounted(()=>{
+  winWidth.value=window.outerWidth;
+  window.onresize=()=>{
+    setTimeout(()=>{
+      winWidth.value=window.outerWidth;
+    },100);
+  }
+});
 </script>
 
 <style lang="scss" scoped>
@@ -144,6 +156,9 @@ let devInfos = reactive([
   position: relative;
   min-width:960px;
   padding: 0px 24px;
+  &.is-small{
+    padding: 0px 12px;
+  }
 
   .user-avatar {
     width: 40px;
@@ -177,6 +192,69 @@ let devInfos = reactive([
 </style>
 <style lang="scss">
 .dashboard-container {
+  &.is-small{
+    .dev-row3 {
+      padding:0px !important;
+      .device-state{
+        width:80px !important;
+      }
+    }
+    .right-panel{
+      min-width: 240px;
+      padding-left:8px;
+    }
+    .model-flow {
+      .card-item{
+        width:100px;
+      }
+      .row-1 {
+        .line{
+          width: calc(20% - 100px);
+          top:10px;
+        }
+      }
+      .row-3 {
+        .line{
+          width: calc(20% - 100px);
+        }
+        .card-center{
+          .card-center-item{
+            width:100px;
+            &:first-child{
+              &::after{
+                left:50px;
+              }
+              &::before{
+                left:50px;
+              }
+            }
+            &:last-child{
+              &::after{
+                left:-20px;
+              }
+              &::before{
+                left:51px;
+              }
+            }
+          }
+        }
+        .card-item{
+            &.line-top{
+              &::after{
+                left:50px; 
+              }              
+              &::before{
+                left:48px;
+              }
+            }
+          }
+      }
+    }
+  }
+  .right-panel{
+    min-width: 300px;
+    padding-left:12px;
+  }
   .el-card__body {
     padding: 10px 10px;
   }