update

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

@@ -1,28 +1,39 @@
 <template>
   <div class="right-content-quality-analysis">
-    <div v-for="item in datalist" :key="item.name" class="analysis-item">
+    <techy-analysis-bar
+      v-for="(item, index) in datalist"
+      :key="index"
+      :name="item.name"
+      :amount="item.value"
+      color="green"
+    />
+
+    <!-- <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> -->
   </div>
 </template>
 
 <script>
+import TechyAnalysisBar from './TechyAnalysisBar.vue'
+
 export default {
   name: 'RightContentQualityAnalysis',
+  components: { TechyAnalysisBar },
   props: {},
   data() {
     return {
       datalist: [
-        { name: '热端', value: 20, color: '#0b88ff' },
-        { name: '原片', value: 30, color: '#0bffa6' },
+        { name: '热端', value: 2332039120, 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: 30, color: '#0bffa6' },
         { name: '上片', value: 27, color: '#e3ff0b' },
-        { name: '磨边', value: 23, color: '#950bff' },
+        { name: '磨边镀膜膜', value: 23, color: '#950bff' },
         { name: '镀膜', value: 10, color: '#ff0bc2' },
         { name: '清晰', value: 66, color: '#ff7d0b' }
       ]
@@ -42,7 +53,7 @@ export default {
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-auto-rows: min-content;
-  gap: calc(100vw / 1920 * 8);
+  gap: calc(100vmin / 1920 * 10) calc(100vmin / 1920 * 20);
   justify-content: end;
 }