防区优化

src/views/menu/protection/components/item.vue

@@ -1,18 +1,27 @@
 <template>
   <div class="flex flex-col justify-center k-app-protection-list__item van-clearfix">
-    <div class="top flex flex-row items-center justify-between">
-      <label style="width: 50%">{{ data.name }}</label>
-      <label style="width: 50%; text-align: right">
-        <van-button size="mini" type="info" @click="updateStatus(data, '1')" v-if="data.status != '1' && data.orgId==this.orgId"
+    <van-cell-group clickable @click="itemClick">
+      <van-cell :title="data.name">
+        <template #right-icon>
+          <van-button
+          size="mini"
+          color="#008cd6"
+          type="info"
+          @click="updateStatus(data, '1')"
+          v-if="data.status != '1' && data.orgId == orgId"
           >布防时间登记</van-button
         >
-        <van-button size="mini" type="info" @click="updateStatus(data, '0')" v-if="data.status != '0' && data.orgId==this.orgId"
+        <van-button
+          size="mini"
+          color="#008cd6"
+          type="info"
+          @click="updateStatus(data, '0')"
+          v-if="data.status != '0' && data.orgId == orgId"
           >撤防时间登记</van-button
         >
-      </label>
-    </div>
-    <van-cell-group clickable @click="itemClick">
-      <van-cell title="防区状态" :value="getLabel(statusOptions, data.status,'未知')" />
+        </template>
+      </van-cell>
+      <van-cell title="防区状态" :value="getLabel(statusOptions, data.status, '未知')" />
       <van-cell
         v-if="data.status == '0' || data.status == '1'"
         :title="data.status == '0' ? '撤防时间' : '布防时间'"
@@ -73,12 +82,11 @@ export default {
 .k-app-protection-list__item {
   //   height: 11.85rem;
   background: #ffffff;
-  margin: 0.625rem 0.625rem 0;
+  margin: 0.3rem 0.325rem 0;
   font-size: 3.733333vw;
   .top {
     // min-height: 3rem;
     padding: 0.05rem 0.05rem;
-    font-weight: 700;
     display: flex;
     flex-direction: row;
     align-items: center;

src/views/menu/protection/index.vue

@@ -140,7 +140,7 @@ export default {
 
 <style lang="scss" scoped>
 .protection_list {
-  background-color: #fff;
+  background-color: transparent;
   display: block;
   .container {
     // overflow: auto;