工作页面修改

pages/tabBar/work/index.vue

@@ -1,6 +1,8 @@
 <template>
   <scroll-view class="content" scroll-y="true">
-    <view class="conItem">
+    <image src="/static/img/workBac1.png" class="bacImg1"></image>
+    <image src="/static/img/workBac2.png" class="bacImg2"></image>
+    <view class="conItem" style="margin-top: 100rpx;">
       <view class="conItem-title">房源</view>
       <view class="conItem-cont">
         <view class="conItem-cont-item" v-for="(item, index) in fyList" :key="index">
@@ -13,7 +15,7 @@
     <view class="conItem">
       <view class="conItem-title">巡检</view>
       <view class="conItem-cont">
-        <view class="conItem-cont-item" v-for="(item, index) in fyList" :key="index">
+        <view class="conItem-cont-item" v-for="(item, index) in xjList" :key="index">
           <image :src="item.image" class="itemImg"></image>
           <text class="itemText">房子</text>
         </view>
@@ -21,11 +23,35 @@
     </view>
 
     <view class="conItem">
-
+      <view class="conItem-title">水电</view>
+      <view class="conItem-cont">
+        <view class="conItem-cont-item" v-for="(item, index) in xjList" :key="index">
+          <image :src="item.image" class="itemImg"></image>
+          <text class="itemText">房子</text>
+        </view>
+      </view>
     </view>
+
     <view class="conItem">
+      <view class="conItem-title">报修</view>
+      <view class="conItem-cont">
+        <view class="conItem-cont-item" v-for="(item, index) in bxList" :key="index">
+          <image :src="item.image" class="itemImg"></image>
+          <text class="itemText">房子</text>
+        </view>
+      </view>
+    </view>
 
+    <view class="conItem">
+      <view class="conItem-title">报事</view>
+      <view class="conItem-cont">
+        <view class="conItem-cont-item" v-for="(item, index) in bsList" :key="index">
+          <image :src="item.image" class="itemImg"></image>
+          <text class="itemText">房子</text>
+        </view>
+      </view>
     </view>
+
   </scroll-view>
 </template>
 
@@ -38,8 +64,24 @@ export default {
         { image: '/static/img/退房检查.png', text: '退房检查' },
         { image: '/static/img/释放.png', text: '释放房源检查' },
         { image: '/static/img/预约.png', text: '预约看房' },
-        { image: '/static/img/看房.png', text: '强制清退' },
-      ]
+        { image: '/static/img/强制清退.png', text: '强制清退' },
+      ],
+      xjList: [
+        { image: '/static/img/巡查.png', text: '巡检' },
+        { image: '/static/img/记录.png', text: '记录' },
+      ],
+      sdList: [
+        { image: '/static/img/水费.png', text: '水费上报' },
+        { image: '/static/img/电费.png', text: '电费上报' },
+      ],
+      bxList: [
+        { image: '/static/img/上报.png', text: '上报' },
+        { image: '/static/img/处理.png', text: '处理' },
+      ],
+      bsList: [
+        { image: '/static/img/上报.png', text: '上报' },
+        { image: '/static/img/处理.png', text: '处理' },
+      ],
 
     }
   },
@@ -56,15 +98,16 @@ export default {
 .content {
   width: 100%;
   height: 100vh;
-  padding: 20rpx;
-  box-sizing: border-box;
+  // padding: 20rpx;
+  // box-sizing: border-box;
 }
 
 .conItem {
   left: 11rpx;
   top: 98rpx;
-  width: 100%;
+  width: calc(100% - 20rpx);
   border-radius: 10rpx;
+  margin-left: 10rpx;
   background-color: rgba(255, 255, 255, 1);
   box-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.2);
   margin-bottom: 20rpx;
@@ -110,4 +153,20 @@ export default {
 .conItem-cont-item:nth-child(4n) {
   margin-right: 0;
 }
+
+.bacImg1 {
+  width: 100%;
+  height: 20%;
+  position: absolute;
+  top: 0;
+  z-index: -1;
+}
+
+.bacImg2 {
+  width: 100%;
+  height: 80%;
+  position: absolute;
+  top: 30%;
+  z-index: -1;
+}
 </style>