修改融通app工作台

src/views/saveWorkbench/index.vue

@@ -20,16 +20,22 @@
     <div class="con">
       <van-cell-group inset v-if="finalRiskList.length > 0">
         <van-cell value="风险评估管理" />
-        <van-grid :column-num="4">
-          <van-grid-item @click="dangerJump(item.path)" v-for="item in finalRiskList" :key="item.key" :icon="item.imgUrl"
-            :text="item.text" />
+        <van-grid class="grid-grid">
+          <van-grid-item class="grid-item" :style="{
+        'background-image': `url(${require(`@/assets/workbench/workbench${index % 5 + 1}.png`)})`,
+      }" @click="dangerJump(item.path)" v-for="(item, index) in finalRiskList" :key="item.key" :text="item.text" />
         </van-grid>
       </van-cell-group>
-      <van-cell-group inset v-if="finalRiskPatrol.length > 0">
+      <van-cell-group style="margin-top: 20px;" inset v-if="finalRiskPatrol.length > 0">
         <van-cell value="风险巡查管理" />
-        <van-grid :column-num="4">
-          <van-grid-item @click="dangerJump(item.path)" v-for="item in finalRiskPatrol" :key="item.key"
-            :icon="item.imgUrl" :text="item.text" />
+        <!-- <van-grid :column-num="4">
+          <van-grid-item @click="dangerJump(item.path)" v-for="      item       in       finalRiskPatrol      "
+            :key="item.key" :icon="item.imgUrl" :text="item.text" />
+        </van-grid> -->
+        <van-grid class="grid-grid">
+          <van-grid-item class="grid-item" :style="{
+        'background-image': `url(${require(`@/assets/workbench/workbench${index % 5 + 1}.png`)})`,
+      }" @click="dangerJump(item.path)" v-for="(item, index) in finalRiskPatrol" :key="item.key" :text="item.text" />
         </van-grid>
       </van-cell-group>
       <!-- <van-cell-group inset v-for="(item, index) in riskList" :key="index">
@@ -274,6 +280,7 @@ export default {
   }
 };
 </script>
+
 <style lang="less" scoped>
 /* @import url(); 引入css类 */
 .header-wrap {
@@ -292,12 +299,6 @@ export default {
   padding: 10px 0 50px 0;
   background-color: #f0f1f5;
 
-  /deep/ .van-grid-item__content--center {
-    // padding-left: 0px;
-    // padding-right: 0px;
-    padding: 0.22667rem 0px;
-  }
-
   /deep/ .van-icon__image {
     width: auto;
     height: 1rem;
@@ -323,4 +324,61 @@ export default {
     height: 100%;
   }
 }
+
+.van-cell-group {
+  .grid-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 10px;
+    padding: 10px;
+  }
+
+  .grid-item {
+    height: 80px;
+    background-size: 100% 100%;
+  }
+
+  .van-cell::after {
+    border: none;
+  }
+
+  .van-cell {
+    padding-bottom: 0;
+
+    .van-cell__value {
+      display: flex;
+      align-items: center;
+
+      &::before {
+        display: inline-block;
+        box-sizing: border-box;
+        content: ' ';
+        pointer-events: none;
+        width: 5px;
+        height: 16px;
+        background: #2980f7;
+        margin-right: 10px;
+      }
+    }
+  }
+
+  /deep/ .van-grid-item__content {
+    background: transparent;
+    width: 60%;
+    display: block;
+    padding: 0;
+    text-align: center;
+
+    .van-grid-item__text {
+      color: #000;
+      font-weight: 500;
+      font-size: 14px;
+      line-height: 80px;
+    }
+  }
+}
+
+[class*=van-hairline]::after {
+  border: none;
+}
 </style>