'init'

src/views/3DOverview/components/RightContentQualityAnalysis.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="right-content-quality-analysis">
+    <div v-for="item in datalist" :key="item.name" class="analysis-item">
+      <span class="absolute" :style="{ backgroundColor: item.color }" />
+      <span>{{ item.name }}</span>
+      <span>{{ item.value }}</span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'RightContentQualityAnalysis',
+  props: {},
+  data() {
+    return {
+      datalist: [
+        { name: '热端', value: 20, color: '#0b88ff' },
+        { name: '原片', value: 30, color: '#0bffa6' },
+        { name: '上片', value: 27, color: '#e3ff0b' },
+        { name: '磨边', value: 23, color: '#950bff' },
+        { name: '原片', value: 30, color: '#0bffa6' },
+        { name: '原片', value: 30, color: '#0bffa6' },
+        { name: '上片', value: 27, color: '#e3ff0b' },
+        { name: '磨边', value: 23, color: '#950bff' },
+        { name: '镀膜', value: 10, color: '#ff0bc2' },
+        { name: '清晰', value: 66, color: '#ff7d0b' }
+      ]
+    }
+  },
+  created() {},
+  mounted() {},
+  methods: {}
+}
+</script>
+
+<style scoped>
+.right-content-quality-analysis {
+  height: calc(100% - 32px);
+  overflow: hidden;
+  overflow-y: scroll; /** 右边会有多的padding给滑道 */
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-auto-rows: min-content;
+  gap: calc(100vw / 1920 * 8);
+  justify-content: end;
+}
+
+.analysis-item {
+  padding-left: 16px;
+  font-size: 12px;
+  line-height: 1.5;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: #fffc;
+  position: relative;
+}
+
+.analysis-item::before {
+  content: '';
+  position: absolute;
+  left: 4px;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: attr(data-color color, blue);
+}
+
+.absolute {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  left: 3px;
+  border-radius: 50%;
+}
+</style>