下发任务

src/pages/taskList/copmonents/patrolWrapper.vue

@@ -0,0 +1,89 @@
+<script setup>
+const props = defineProps({
+  list: {
+    type: Array,
+    required: true,
+    default: () => []
+  },
+  showReceive: {
+    type: Boolean,
+    default: true
+  }
+})
+
+const emits = defineEmits(["click", "claim"]);
+
+const handleClockInPage = (item) => {
+  emits("click", item);
+}
+
+const handleClaim = (item) => {
+  emits("claim", item);
+}
+</script>
+
+<template>
+  <div class="item-wrapper">
+    <template v-for="(item, index) in list" :key="index">
+      <div class="card" @click="handleClockInPage(item)">
+        <div class="title">*************任务</div>
+        <div class="row">
+          <div class="col">方格编号：{{ item?.fgId || '04' }}</div>
+          <div class="col right">任务日期：{{ item?.rwRq }}</div>
+        </div>
+        <div class="btn" v-if="showReceive" @click.stop="handleClaim(item)">领取</div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.item-wrapper {
+  padding: 3vw;
+
+  .card {
+    background: #fff;
+    border-radius: 3.73vw;
+    padding: 4vw;
+    margin-bottom: 3vw;
+    box-shadow: 0 1.6vw 4vw rgba(0, 0, 0, 0.04);
+
+    .title {
+      font-size: 4vw;
+      font-weight: bold;
+      color: #333;
+      margin-bottom: 3vw;
+    }
+
+    .row {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 4vw;
+      font-size: 3.4vw;
+      color: #999;
+      
+      .col {
+        &.right {
+          text-align: right;
+        }
+      }
+    }
+
+    .btn {
+      height: 11vw;
+      line-height: 11vw;
+      text-align: center;
+      border-radius: 6vw;
+      color: #ffffff;
+      background: linear-gradient(90deg, #28A5FF 0%, #3E6EE8 100%);
+      font-size: 4vw;
+      box-shadow: 0 2vw 4vw rgba(62, 110, 232, 0.3);
+      
+      &.disabled {
+        background: #ccc;
+        box-shadow: none;
+      }
+    }
+  }
+}
+</style>