Merge branch 'xf_dev' of http://192.168.101.4:3000/jiaxiaoqiang/JG-ADMIN-TEMP into xf_dev

src/views/report/statistics/screens/quality/index.vue

@@ -1,12 +1,16 @@
 <template>
   <div class="screen-container">
-    <common-header title="工位任务分布" />
-    <div class="screen-content"></div>
+    <common-header title="质量统计" />
+    <div class="screen-content">
+      <TitleHeader :title="aaa" />
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
 import CommonHeader from "@/views/report/statistics/screens/common-header.vue";
+import TitleHeader from "../titleHeader.vue";
+const aaa = ref("你在构建什打无无大武当");
 </script>
 
 <style lang="scss" scoped>

src/views/report/statistics/screens/titleHeader.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="body">
+    <div class="info">
+      <div class="round">
+        <div class="colorRound" :style="{ backgroundColor: color }"></div>
+      </div>
+      <div class="text">{{ title }}</div>
+    </div>
+    <div class="line">
+      <div class="lines"></div>
+    </div>
+    <div class="dian">
+      <div class="lines"></div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineProps({
+  title: {
+    type: String,
+    default: "",
+  },
+  color: {
+    type: String,
+    default: "#5fe3ff",
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.body {
+  height: 3vh;
+  display: flex;
+  text-align: center;
+  width: 100%;
+  justify-content: space-between;
+  .info {
+    display: flex;
+    align-items: center;
+    .text {
+      color: white;
+      font-size: 2.5vh;
+    }
+    .round {
+      height: 2.4vh;
+      width: 2.4vh;
+      border-radius: 1.2vh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-right: 0.8vw;
+      border: 1px solid rgba(255, 255, 255, 0.3);
+      .colorRound {
+        height: 1.18vh;
+        width: 1.18vh;
+        border-radius: 0.59vh;
+      }
+    }
+  }
+  .line {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-left: 0.8vw;
+    .lines {
+      width: 100%;
+      border: 1px solid rgba(255, 255, 255, 0.2);
+      height: 0vh;
+      border-top: 0;
+      border-right: 0;
+      border-left: 0;
+    }
+  }
+  .dian {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 0.5vw;
+    .lines {
+      width: 0.5vw;
+      border: 1px solid rgba(255, 255, 255, 1);
+      height: 0vh;
+      border-top: 0;
+      border-right: 0;
+      border-left: 0;
+    }
+  }
+}
+</style>