From 868b24c023afa7ea0d831428d51783553255fe95 Mon Sep 17 00:00:00 2001
From: liushilong <2224574157@qq.com>
Date: Sun, 7 Apr 2024 11:26:30 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=BB=88=E5=AE=A1=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E5=8D=A1=E7=89=87=E5=88=97=E8=A1=A8=E5=88=87=E6=8D=A2=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD=E6=B7=BB=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/icons/card-mode.svg          |  12 ++
 src/views/final/content/Content.vue     |   7 +-
 src/views/final/content/ListContent.vue | 275 ++++++++++++++++--------
 3 files changed, 208 insertions(+), 86 deletions(-)
 create mode 100644 src/assets/icons/card-mode.svg

diff --git a/src/assets/icons/card-mode.svg b/src/assets/icons/card-mode.svg
new file mode 100644
index 0000000..3def7eb
--- /dev/null
+++ b/src/assets/icons/card-mode.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="64px" height="64px" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>卡片模式</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="PrevailCloud-Design-图标集" transform="translate(-3040.000000, -6389.000000)" fill-rule="nonzero">
+            <g id="卡片模式" transform="translate(3040.000000, 6389.000000)">
+                <rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="64" height="64"></rect>
+                <path d="M52.8,52.8 L52.8,38.95 L38.95,38.95 L38.95,52.8 L52.8,52.8 M25.05,52.8 L25.05,38.95 L11.2,38.95 L11.2,52.8 L25.05,52.8 M52.8,25.05 L52.8,11.2 L38.95,11.2 L38.95,25.05 L52.8,25.05 M25.05,25.05 L25.05,11.2 L11.2,11.2 L11.2,25.05 L25.05,25.05 M54.55,58 L37.2,58 C35.3,58 33.75,56.45 33.75,54.55 L33.75,37.2 C33.75,35.3 35.3,33.75 37.2,33.75 L54.55,33.75 C56.45,33.75 58,35.3 58,37.2 L58,54.55 C58,56.45 56.45,58 54.55,58 L54.55,58 Z M26.8,58 L9.45,58 C7.55,58 6,56.45 6,54.55 L6,37.2 C6,35.3 7.55,33.75 9.45,33.75 L26.8,33.75 C28.7,33.75 30.25,35.3 30.25,37.2 L30.25,54.55 C30.25,56.45 28.7,58 26.8,58 L26.8,58 Z M54.55,30.25 L37.2,30.25 C35.3,30.25 33.75,28.7 33.75,26.8 L33.75,9.45 C33.75,7.55 35.3,6 37.2,6 L54.55,6 C56.45,6 58,7.55 58,9.45 L58,26.8 C58,28.7 56.45,30.25 54.55,30.25 L54.55,30.25 Z M26.8,30.25 L9.45,30.25 C7.55,30.25 6,28.7 6,26.8 L6,9.45 C6,7.55 7.55,6 9.45,6 L26.8,6 C28.7,6 30.25,7.55 30.25,9.45 L30.25,26.8 C30.25,28.7 28.7,30.25 26.8,30.25 L26.8,30.25 Z" id="形状" fill="#333333"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/views/final/content/Content.vue b/src/views/final/content/Content.vue
index bb9c945..5837fc0 100644
--- a/src/views/final/content/Content.vue
+++ b/src/views/final/content/Content.vue
@@ -834,7 +834,12 @@ defineExpose({
     <div class="wrapper-header">
       <div class="wrapper-header-left">
         <span class="wrapper-header-font">任务管理列表</span>
-        <SvgIcon size="16" name="list-mode" @click="changeContent" />
+        <SvgIcon
+          style="cursor: pointer"
+          size="16"
+          name="list-mode"
+          @click="changeContent"
+        />
       </div>
       <div>
         <SvgIcon
diff --git a/src/views/final/content/ListContent.vue b/src/views/final/content/ListContent.vue
index f01c4ac..c9e0ee5 100644
--- a/src/views/final/content/ListContent.vue
+++ b/src/views/final/content/ListContent.vue
@@ -1,9 +1,14 @@
 <script lang="ts" setup>
 import { onMounted, ref } from "vue";
 
+const emit = defineEmits(["changeShow"]);
+function changeContent() {
+  emit("changeShow");
+}
+
 const item = {
   // img: "/src/assets/images/test.png",
-  img:'http://47.93.59.251/api/image/thumbnail_1752999610491604992.jpeg',
+  img: "http://47.93.59.251/api/image/thumbnail_1755061416414842880.jpeg",
   checked: false,
   title: "YP4567890545",
   date: "2023-12-19 12:09:18",
@@ -11,7 +16,7 @@ const item = {
 const data = ref<any[]>([]);
 
 onMounted(() => {
-  for (let i = 0; i < 20; i++) {
+  for (let i = 0; i < 8; i++) {
     data.value.push(item as any);
   }
 });
@@ -19,32 +24,50 @@ onMounted(() => {
 
 <template>
   <div class="wrapper">
-    <div class="item" v-for="(item, index) in data" :key="index">
-      <div class="top">
-        <div
-          class="img"
-          :style="`background:url(${item.img});background-size:100%;background-repeat: no-repeat;`"
-        >
-          <div class="check_box"><n-checkbox size="medium" label=" " /></div>
-        </div>
-        <div class="content">
-          <div class="title">任务ID：{{ item.title }}</div>
-          <div class="date">{{ item.date }}</div>
-          <div class="tag_box">
-            <div
-              class="tag_item"
-              v-for="index in 2"
-              :key="index"
-              :style="index == 2 ? 'color:#02C984' : 'color:#507AFD'"
-            >
-              {{ index==1?'待确认':'张思' }}
+    <div class="wrapper-header">
+      <div class="wrapper-header-left">
+        <span class="wrapper-header-font">任务管理列表</span>
+        <SvgIcon
+          style="cursor: pointer"
+          size="16"
+          name="card-mode"
+          @click="changeContent"
+        />
+      </div>
+    </div>
+
+    <div class="header_data">
+      <DataHeader :hasColor="true" />
+    </div>
+
+    <div class="data_wrapper">
+      <div class="item" v-for="(item, index) in data" :key="index">
+        <div class="top">
+          <div
+            class="img"
+            :style="`background:url(${item.img});background-size:100%;background-repeat: no-repeat;`"
+          >
+            <div class="check_box"><n-checkbox size="medium" label=" " /></div>
+          </div>
+          <div class="content">
+            <div class="title">任务ID：{{ item.title }}</div>
+            <div class="date">{{ item.date }}</div>
+            <div class="tag_box">
+              <div
+                class="tag_item"
+                v-for="index in 2"
+                :key="index"
+                :style="index == 2 ? 'color:#02C984' : 'color:#507AFD'"
+              >
+                {{ index == 1 ? "待确认" : "张思" }}
+              </div>
             </div>
           </div>
         </div>
-      </div>
-      <div class="bottom">
-        <div class="resovle_action">通过</div>
-        <div class="reject_action">不通过</div>
+        <div class="bottom">
+          <div class="resovle_action">通过</div>
+          <div class="reject_action">不通过</div>
+        </div>
       </div>
     </div>
   </div>
@@ -52,83 +75,165 @@ onMounted(() => {
 
 <style scoped lang="less">
 .wrapper {
-  display: flex;
-  flex-flow: row wrap;
-  align-items: center;
-  justify-content: flex-start;
-  flex: 1;
+  // display: flex;
+  // flex-flow: row wrap;
+  // align-items: center;
+  // justify-content: flex-start;
+  // flex: 1;
   box-sizing: border-box;
   margin-left: 16px;
   width: 100%;
   background: #fff;
   padding: 0px 24px 24px 24px;
-  .item {
-    width: 23%;
-    border: 1px solid #ededed;
-    border-radius: 3px;
-    padding: 8px 10px;
-    margin-right: 10px;
-    .top {
+  &-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    box-sizing: border-box;
+    height: 64px;
+    width: 100%;
+
+    div {
       display: flex;
-      flex-flow: row nowrap;
       align-items: center;
-      justify-content: flex-start;
-      .img {
-        width: 50%;
-        height: 70px;
-        border-radius: 3px;
-        .check_box {
-          margin-left: 8px;
+    }
+
+    .xjcc {
+      font-weight: bold;
+      color: #507afd;
+      margin-right: 20px;
+    }
+
+    .title {
+      color: #507afd;
+      font-weight: bold;
+      font-size: 14px;
+      margin-left: 8px;
+    }
+
+    .btn {
+      width: 118px;
+      height: 36px;
+      background: linear-gradient(135deg, #5b85f8, #3c6cf0);
+      border-radius: 17px;
+      box-shadow: 0px 2px 6px 0px rgba(116, 153, 253, 0.3);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #fff;
+      margin-right: 6px;
+      cursor: pointer;
+    }
+
+    .more {
+      width: 30px;
+      height: 30px;
+      line-height: 30px;
+      opacity: 0.1;
+      background: linear-gradient(144deg, #73a7f9 0%, #3e6ef1 96%);
+      border-radius: 8px;
+    }
+
+    &-font {
+      font-size: 20px;
+      font-family: PingFang SC, PingFang SC-Medium;
+      font-weight: 600;
+      color: #0d0b22;
+      margin-right: 8px;
+    }
+
+    &-action {
+      padding: 8px;
+
+      li {
+        height: 32px;
+        line-height: 32px;
+        cursor: pointer;
+
+        &:hover {
+          background-color: #f3f8ff;
         }
       }
-      .content {
-        margin-left: 8px;
-        .title,
-        .date {
-          font-size: 11px;
-          font-weight: bolder;
-          text-align: left;
-          color: #323233;
-          line-height: 16px;
+    }
+  }
+
+  .header_data {
+    width: 100%;
+  }
+  .data_wrapper {
+    display: flex;
+    flex-flow: row wrap;
+    align-items: center;
+    justify-content: flex-start;
+    flex: 1;
+    .item {
+      width: 23%;
+      border: 1px solid #ededed;
+      border-radius: 3px;
+      padding: 8px 10px;
+      margin-right: 10px;
+      .top {
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        justify-content: flex-start;
+        .img {
+          width: 50%;
+          height: 70px;
+          border-radius: 3px;
+          .check_box {
+            margin-left: 8px;
+          }
+        }
+        .content {
+          margin-left: 8px;
+          .title,
+          .date {
+            font-size: 11px;
+            font-weight: bolder;
+            text-align: left;
+            color: #323233;
+            line-height: 16px;
+          }
+        }
+        .tag_box {
+          display: flex;
+          flex-flow: row nowrap;
+          align-items: center;
+          justify-content: flex-start;
+          .tag_item {
+            width: 31px;
+            height: 14px;
+            font-size: 10px;
+            font-weight: bolder;
+            text-align: left;
+            //   color: #507afd;
+            line-height: 14px;
+            letter-spacing: 0.1px;
+            margin-right: 8px;
+          }
         }
       }
-      .tag_box {
+      .bottom {
         display: flex;
         flex-flow: row nowrap;
         align-items: center;
-        justify-content: flex-start;
-        .tag_item {
-          width: 31px;
-          height: 14px;
-          font-size: 10px;
+        justify-content: flex-end;
+        .resovle_action {
+          font-size: 12px;
           font-weight: bolder;
           text-align: left;
-          //   color: #507afd;
-          line-height: 14px;
-          letter-spacing: 0.1px;
-          margin-right: 8px;
+          color: #507afd;
+          line-height: 17px;
+        }
+        .reject_action {
+          font-size: 12px;
+          font-weight: bolder;
+          text-align: left;
+          color: #ff4e4f;
+          line-height: 17px;
+          margin-left: 15px;
         }
-      }
-    }
-    .bottom {
-      display: flex;
-      flex-flow: row nowrap;
-      align-items: center;
-      justify-content: flex-end;
-      .resovle_action {
-        font-size: 12px;
-        font-weight: bolder;
-        text-align: left;
-        color: #507afd;
-        line-height: 17px;
-      }
-      .reject_action {
-        font-size: 12px;
-        font-weight: bolder;
-        text-align: left;
-        color: #ff4e4f;
-        line-height: 17px;
-        margin-left: 15px;
       }
     }
   }