feat: 按RP添加头部信息栏

src/components/DataHeader/index.vue

@@ -3,7 +3,7 @@
     <div v-for="(item, index) in data" :key="index" class="header_item">
       <img :src="item.link" />
       <div class="data_wrap">
-        <div class="data_title">{{ item.count }}</div>
+        <div class="data_title" :style="hasColor?`color:${item.color || ''}`:''">{{ item.count }}</div>
         <div class="data_content">{{ item.title }}</div>
       </div>
     </div>
@@ -12,36 +12,55 @@
 </template>
 
 <script lang="ts" setup>
+import { defineProps, onMounted } from "vue";
+
+defineProps({
+  hasColor: {
+    type: Boolean,
+    default: () => false,
+  },
+});
+const initRem = () => {
+  const designWidth = 1440;
+  const rempPx = 16;
+  const scale = window.innerWidth / designWidth;
+  document.documentElement.style.fontSize = scale * rempPx + "px";
+};
+onMounted(()=>{
+  initRem();
+})
 
 const data = [
   {
     link: "/src/assets/images/taskCount.png",
-    title: "任务包总数",
+    title: "任务总数",
     count: 6399,
   },
   {
     link: "/src/assets/images/nocheck.png",
-    title: "未标记",
+    title: "待审批",
     count: 6290,
   },
   {
     link: "/src/assets/images/check.png",
-    title: "已标记",
+    title: "已审批",
     count: 109,
   },
   {
     link: "/src/assets/images/status.png",
-    title: "真",
+    title: "通过",
     count: 3290,
+    color: "#03c984",
   },
   {
     link: "/src/assets/images/status.png",
-    title: "假",
+    title: "不通过",
     count: 3000,
+    color: "#ff8b8b",
   },
   {
     link: "/src/assets/images/pic.png",
-    title: "相似度100%图",
+    title: "图片重复数",
     count: 230,
   },
   {
@@ -58,8 +77,10 @@ const data = [
   flex-flow: row nowrap;
   align-items: center;
   justify-content: space-between;
-  padding: 20px 30px;
+  padding: 1rem 3.125rem;
   background: #fff;
+  margin-bottom: 1rem;
+
   .header_item {
     width: 10%;
     display: flex;
@@ -67,28 +88,28 @@ const data = [
     align-items: center;
     justify-content: center;
     img {
-      width: 50px;
-      height: 50px
+      width: 3.125rem;
+      height: 3.125rem;
     }
     .data_wrap {
       .data_title {
-        font-size: 20px;
+        font-size: 1.25rem;
         font-family: HarmonyOS Sans SC, HarmonyOS Sans SC-Bold;
         font-weight: Bold;
         text-align: left;
         color: #202020;
-        line-height: 23px;
+        line-height: 1.4375rem;
         text-align: center;
         white-space: nowrap;
       }
       .data_content {
         opacity: 0.6;
-        font-size: 14px;
+        font-size: .875rem;
         font-family: PingFang SC, PingFang SC-Regular;
         font-weight: Regular;
         text-align: center;
         color: #202020;
-        line-height: 16px;
+        line-height: 1rem;
         text-align: center;
         white-space: nowrap;
       }

src/views/task/index.vue

@@ -1,16 +1,21 @@
 <script lang="ts" setup>
-import { ref } from 'vue'
-import Aside from './aside/Aside.vue'
-import Content from './content/Content.vue'
+import { ref } from "vue";
+import Aside from "./aside/Aside.vue";
+import Content from "./content/Content.vue";
+import DataHeader from "@/components/DataHeader/index.vue";
 
-const asideRef: any = ref(null)
+const asideRef: any = ref(null);
 
 function setAsideItemName(text) {
-  asideRef.value.setAsideItemName(text)
+  asideRef.value.setAsideItemName(text);
 }
 </script>
 
 <template>
+  <div style="width: 100%">
+    <div class="header">
+      <DataHeader />
+    </div>
     <div class="main">
       <!-- 侧边 -->
       <Aside ref="asideRef" />
@@ -18,6 +23,7 @@ function setAsideItemName(text) {
       <!-- 内容 -->
       <Content @set-aside-item-name="setAsideItemName" />
     </div>
+  </div>
 </template>
 
 <style lang="less" scoped>

src/views/worksheet/index.vue

@@ -15,7 +15,7 @@ const ApprovalOver = (packageId) => {
 <template>
   <div style="width: 100%">
     <div class="header">
-      <DataHeader v-show="false" />
+      <DataHeader />
     </div>
     <div class="main">
       <!-- 侧边 -->