Merge pull request 'feat: 终审页面卡片列表切换功能添加' (#103) from feat/header_data into test

Reviewed-on: #103

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>

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

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,6 +24,23 @@ onMounted(() => {
 
 <template>
   <div class="wrapper">
+    <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
@@ -37,7 +59,7 @@ onMounted(() => {
                 :key="index"
                 :style="index == 2 ? 'color:#02C984' : 'color:#507AFD'"
               >
-              {{ index==1?'待确认':'张思' }}
+                {{ index == 1 ? "待确认" : "张思" }}
               </div>
             </div>
           </div>
@@ -48,20 +70,102 @@ onMounted(() => {
         </div>
       </div>
     </div>
+  </div>
 </template>
 
 <style scoped lang="less">
 .wrapper {
-  display: flex;
+  // display: flex;
-  flex-flow: row wrap;
+  // flex-flow: row wrap;
-  align-items: center;
+  // align-items: center;
-  justify-content: flex-start;
+  // justify-content: flex-start;
-  flex: 1;
+  // flex: 1;
   box-sizing: border-box;
   margin-left: 16px;
   width: 100%;
   background: #fff;
   padding: 0px 24px 24px 24px;
+  &-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    box-sizing: border-box;
+    height: 64px;
+    width: 100%;
+
+    div {
+      display: flex;
+      align-items: center;
+    }
+
+    .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;
+        }
+      }
+    }
+  }
+
+  .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;
@@ -133,4 +237,5 @@ onMounted(() => {
       }
     }
   }
+}
 </style>