task style

src/views/taskManagement/aiList/taskList.vue

@@ -5,49 +5,62 @@
       <span class="tips title-tips">
         {{ $t('page.taskDescription') }}</span>
     </el-card>
-    <el-card>
-      <ul class="dataCard">
-        <li>
-          <p>训练任务</p>
-          <div>
+    <el-row>
+      <el-col :span="8">
+        <el-card>
+          <div slot="header" class="clearfix">
+            <span>训练任务</span>
+          </div>
+          <div class="task">
             <div class="data">
               <span>运行中</span>
               <p>{{ trainingTask.running || 0 }}</p>
             </div>
+            <img src="../../../assets/images/xunlian.png" alt="">
             <div class="data">
               <span>总数</span>
               <p>{{ trainingTask.total || 0 }}</p>
             </div>
           </div>
-        </li>
-        <li>
-          <p>推理任务</p>
-          <div>
+        </el-card>
+      </el-col>
+      <el-col :span="8">
+        <el-card>
+          <div slot="header" class="clearfix">
+            <span>推理任务</span>
+          </div>
+          <div class="task">
             <div class="data">
               <span>运行中</span>
               <p>{{ taskCount.running || 0 }}</p>
             </div>
+            <img src="../../../assets/images/tuili.png" alt="">
             <div class="data">
               <span>总数</span>
               <p>{{ taskCount.total || 0 }}</p>
             </div>
           </div>
-        </li>
-        <li>
-          <p>模型实例</p>
-          <div>
+        </el-card>
+      </el-col>
+      <el-col :span="8">
+        <el-card>
+          <div slot="header" class="clearfix">
+            <span>模型实例</span>
+          </div>
+          <div class="task">
             <div class="data">
               <span>运行中</span>
               <p>{{ deployInstance.running || 0 }}</p>
             </div>
+            <img src="../../../assets/images/moxing.png" alt="">
             <div class="data">
               <span>总数</span>
               <p>{{ deployInstance.total || 0 }}</p>
             </div>
           </div>
-        </li>
-      </ul>
-    </el-card>
+        </el-card>
+      </el-col>
+    </el-row>
     <el-card>
       <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
         <el-tab-pane label="智算部署任务" name="first">
@@ -254,33 +267,28 @@ export default {
 }
 </script>
 
-<style lang="scss">
-.dataCard{
-  width: 100%;
-  padding: 0;
-  // display: flex;
-  // padding-bottom: 1rem;
-  // box-sizing: content-box;
-  li{
-    width: 26.7%;
-    margin: 0 3.3%;
-    float: left;
-    list-style-type: none;
-    box-shadow: 1px 1px 10px #050f27;
-    text-indent: 2rem;
-    margin-bottom: 2rem;
-    p{
-      font-size: 1.2rem;
-
-    }
-    >div{
-      display: flex;
-      .data:first-child{
-        span{
-          color: #3182CE;
-        }
-      }
-    }
+<style lang="scss" scoped>
+.task{
+  background: url('../../../assets/images/task-bg.png')  center no-repeat;
+  background-size: cover;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 6.8vh 2% 7vh 3%;
+  margin: 0 3%;
+  text-align: center;
+  font-size: 1rem;
+  >div{
+    width: 35%;
   }
+  img{
+    height: 5vh;
+    width: auto;
+  }
+p{
+  font-family: Impact;
+  margin: 1vh 0;
+  font-size: 2rem;
+}
 }
 </style>