style: 调整结果卡片样式

- 计算结果样式修改
- 纸吸管尺寸计算添加图例显示

src/components.d.ts

@@ -9,7 +9,6 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     BeltSpecificationCalculate: typeof import('./components/Modules/BeltSpecificationCalculate.vue')['default']
-    CalculateResult: typeof import('./components/CalculateResult.vue')['default']
     FourLayerPaperStrawCalculate: typeof import('./components/Modules/FourLayerPaperStrawCalculate.vue')['default']
     InputParamSection: typeof import('./components/InputParamSection.vue')['default']
     MultiLayerPaperTapeWidthAngleCalculate: typeof import('./components/Modules/MultiLayerPaperTapeWidthAngleCalculate.vue')['default']
@@ -19,6 +18,7 @@ declare module 'vue' {
     PaperTubeWeightCalculate: typeof import('./components/Modules/PaperTubeWeightCalculate.vue')['default']
     ParamInputField: typeof import('./components/ParamInputField.vue')['default']
     ResultCard: typeof import('./components/ResultCard.vue')['default']
+    ResultListItem: typeof import('./components/ResultListItem.vue')['default']
     ResultSection: typeof import('./components/ResultSection.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']

src/components/Modules/BeltSpecificationCalculate.vue

@@ -2,24 +2,32 @@
   <div class="calculator-container">
     <v-row justify="center">
       <!-- 参数输入区域 -->
-      <v-col
+      <v-col cols="12" lg="5" md="6">
-        cols="12"
+        <v-card class="pa-6 parameter-card" elevation="8" rounded="xl">
-        lg="5"
-        md="6"
-      >
-        <v-card
-          class="pa-6 parameter-card"
-          elevation="8"
-          rounded="xl"
-        >
           <v-card-title class="text-h5 mb-6 d-flex align-center">
-            <v-icon
+            <v-row>
-              class="mr-3"
+              <v-col cols="6">
-              color="primary"
+                <v-icon class="mr-3" color="primary" icon="mdi-tune" size="large" />
-              icon="mdi-tune"
-              size="large"
-            />
                 {{ $t('parameters') }}
+              </v-col>
+              <v-col class="d-flex align-end justify-center flex-column" cols="6">
+                <v-tooltip content-class="transparent-tooltip" transition="fade-transition">
+                  <v-card
+                    class="pa-2"
+                    width="200"
+                  >
+                    <v-card-text>
+                      这是用卡片自定义的 Tooltip 内容。
+                    </v-card-text>
+                  </v-card>
+                  <template #activator="{ props }">
+                    <v-btn v-bind="props" color="white" icon="mdi-help" size="x-small" />
+                  </template>
+                </v-tooltip>
+
+              </v-col>
+            </v-row>
+
           </v-card-title>
 
           <v-row>
@@ -63,41 +71,21 @@
       </v-col>
 
       <!-- 结果显示区域 -->
-      <v-col
+      <v-col cols="12" lg="5" md="6">
-        cols="12"
+        <v-card class="pa-6 result-card" elevation="8" rounded="xl">
-        lg="5"
-        md="6"
-      >
-        <v-card
-          class="pa-6 result-card"
-          elevation="8"
-          rounded="xl"
-        >
           <v-card-title class="text-h5 mb-6 d-flex align-center">
-            <v-icon
+            <v-icon class="mr-3" color="primary" icon="mdi-calculator" size="large" />
-              class="mr-3"
-              color="primary"
-              icon="mdi-calculator"
-              size="large"
-            />
             {{ $t('results') }}
           </v-card-title>
 
           <v-list lines="two">
-            <result-section
+            <result-list-item :label="`${$t('recommendBeltThickness')}`" :value="result.recommendBeltThickness" />
-              :label="`${$t('recommendBeltThickness')}`"
+            <result-list-item :label="`${$t('recommendBeltWidth')}`" :value="result.recommendBeltWidth" />
-              :value="result.recommendBeltThickness"
+            <result-list-item :label="`${$t('recommendBeltLength')}`" :value="result.recommendBeltLength" />
-            />
-            <result-section
-              :label="`${$t('recommendBeltWidth')}`"
-              :value="result.recommendBeltWidth"
-            />
-            <result-section
-              :label="`${$t('recommendBeltLength')}`"
-              :value="result.recommendBeltLength"
-            />
           </v-list>
 
+          <v-divider class="my-4" />
+
           <v-expansion-panels flat multiple>
             <v-expansion-panel hide-actions>
               <v-expansion-panel-title class="text-warning font-weight-bold">
@@ -265,3 +253,11 @@
   })
 
 </script>
+
+<style scoped>
+  :deep(.transparent-tooltip) {
+    background: transparent !important;
+    box-shadow: none !important;
+    padding: 0 !important;
+  }
+</style>

src/components/Modules/FourLayerPaperStrawCalculate.vue

@@ -57,7 +57,7 @@
       <!-- 计算结果区域  -->
       <v-col cols="12" lg="5" md="6">
         <v-card class="pa-6 result-card" elevation="8" rounded="xl">
-          <v-card-title class="text-h5 mb-6 d-flex align-center">
+          <v-card-title class="text-h5 d-flex align-center">
             <v-icon
               class="mr-3"
               color="primary"
@@ -66,48 +66,59 @@
             />
             {{ $t('results') }}
           </v-card-title>
-          <v-list lines="two">
+          <v-img src="@/assets/pro04.png" />
-            <result-section
+          <v-sheet>
-              :label="`${$t('paperStrawResult.paperTubeInnerDiameter')}`"
+            <h6 class="text-center text-h6 font-weight-bold text-secondary-lighten-2 mb-2">纸吸管规格</h6>
+            <result-list-item
+              :label="`${$t('paperStrawResult.paperTubeInnerDiameter')}(d)`"
               :value="result.paperCoreDiameter"
             />
-            <result-section
+            <result-list-item
-              :label="`${$t('paperStrawResult.paperTubeExternalDiameter')}`"
+              :label="`${$t('paperStrawResult.paperTubeExternalDiameter')}(D)`"
               :value="result.paperTubeExternalDiameter"
             />
-            <result-section
+            <result-list-item
-              :label="`${$t('paperStrawResult.paperTubeThickness')}`"
+              :label="`${$t('paperStrawResult.paperTubeThickness')}(T)`"
               :value="result.paperTubeWallThickness"
             />
-            <result-section
+            <result-list-item
-              :label="`${$t('paperStrawResult.bottomPaperAngle')}`"
+              :label="`${$t('paperStrawResult.leadingLength')}(S)`"
-              :value="result.bottomPaperAngle"
-            />
-            <result-section
-              :label="`${$t('paperStrawResult.leadingLength')}`"
               :value="result.leadingLength"
             />
-            <result-section
+          </v-sheet>
-              :label="`${$t('paperStrawResult.bottomPaperWidth')}`"
+
+          <v-divider class="my-4" />
+
+          <v-sheet>
+            <h6 class="text-center text-h6 font-weight-bold text-secondary-lighten-2 mb-2">制作参数</h6>
+            <result-list-item
+              :label="`${$t('paperStrawResult.bottomPaperAngle')}(A)`"
+              :value="result.bottomPaperAngle"
+            />
+
+            <result-list-item
+              :label="`${$t('paperStrawResult.bottomPaperWidth')}(B1)`"
               :value="result.bottomPaperWidth"
             />
-            <result-section
+            <result-list-item
-              :label="`${$t('paperStrawResult.secondLayerPaperWidth')}`"
+              :label="`${$t('paperStrawResult.secondLayerPaperWidth')}(B2)`"
               :value="result.secondLayerPaperWidth"
             />
-            <result-section
+            <result-list-item
-              :label="`${$t('paperStrawResult.thirdLayerPaperWidth')}`"
+              :label="`${$t('paperStrawResult.thirdLayerPaperWidth')}(B3)`"
               :value="result.thirdLayerPaperWidth"
             />
-            <result-section
+            <result-list-item
-              :label="`${$t('paperStrawResult.topPaperWidth')}`"
+              :label="`${$t('paperStrawResult.topPaperWidth')}(B4)`"
               :value="result.topPaperWidth"
             />
-            <result-section
+            <result-list-item
               :label="`${$t('paperStrawResult.beltWidth')}`"
               :value="result.beltWidth"
             />
-          </v-list>
+          </v-sheet>
+
+          <v-divider class="my-4" />
 
           <v-expansion-panels flat multiple>
             <v-expansion-panel hide-actions>

src/components/Modules/PaperRollWeightLengthCalculate.vue

@@ -94,20 +94,22 @@
           </v-card-title>
 
           <v-list lines="two">
-            <result-section
+            <result-list-item
               :label="$t('paperRollWeight')"
               :value="result.paperRollWeight"
             />
-            <result-section
+            <result-list-item
               :label="$t('paperRollLength')"
               :value="result.paperRollLength"
             />
-            <result-section
+            <result-list-item
               :label="$t('paperThickness')"
               :value="result.paperThickness"
             />
           </v-list>
 
+          <v-divider class="my-4" />
+
           <v-expansion-panels flat multiple>
             <v-expansion-panel hide-actions>
               <v-expansion-panel-title class="text-warning font-weight-bold">

src/components/Modules/PaperTapeWidthAngleCalculate.vue

@@ -69,12 +69,14 @@
           </v-card-title>
 
           <v-list lines="two">
-            <result-section :label="$t('beltAngle')" :value="result.beltAngle" />
+            <result-list-item :label="$t('beltAngle')" :value="result.beltAngle" />
-            <result-section :label="$t('paperHolderAngle')" :value="result.paperHolderAngle" />
+            <result-list-item :label="$t('paperHolderAngle')" :value="result.paperHolderAngle" />
-            <result-section :label="$t('leadingLength')" :value="result.leadingLength" />
+            <result-list-item :label="$t('leadingLength')" :value="result.leadingLength" />
-            <result-section :label="$t('paperWidth')" :value="result.paperWidth" />
+            <result-list-item :label="$t('paperWidth')" :value="result.paperWidth" />
           </v-list>
 
+          <v-divider class="my-4" />
+
           <v-expansion-panels flat multiple>
             <v-expansion-panel hide-actions>
               <v-expansion-panel-title class="text-warning font-weight-bold">

src/components/Modules/PaperTubeProductionCalculate.vue

@@ -112,32 +112,34 @@
           </v-card-title>
 
           <v-list lines="two">
-            <result-section
+            <result-list-item
               :label="$t('feedPaperSpeed')"
               :value="result.feedPaperSpeed"
             />
-            <result-section
+            <result-list-item
               :label="$t('outputSpeed')"
               :value="result.outputSpeed"
             />
-            <result-section
+            <result-list-item
               :label="$t('productionAmountPerHour')"
               :value="result.productionAmountPerHour"
             />
-            <result-section
+            <result-list-item
               :label="$t('productionWeightPerHour')"
               :value="result.productionWeightPerHour"
             />
-            <result-section
+            <result-list-item
               :label="$t('productionAmountPerDay')"
               :value="result.productionAmountPerDay"
             />
-            <result-section
+            <result-list-item
               :label="$t('productionWeightPerDay')"
               :value="result.productionWeightPerDay"
             />
           </v-list>
 
+          <v-divider class="my-4" />
+
           <v-expansion-panels flat multiple>
             <v-expansion-panel hide-actions>
               <v-expansion-panel-title class="text-warning font-weight-bold">

src/components/Modules/PaperTubeWeightCalculate.vue

@@ -94,8 +94,8 @@
           </v-card-title>
 
           <v-list lines="two">
-            <result-section :label="$t('singlePaperTubeWeight')" :value="result.singlePaperTubeWeight" />
+            <result-list-item :label="$t('singlePaperTubeWeight')" :value="result.singlePaperTubeWeight" />
-            <result-section :label="$t('totalPaperTubeWeight')" :value="result.totalPaperTubeWeight" />
+            <result-list-item :label="$t('totalPaperTubeWeight')" :value="result.totalPaperTubeWeight" />
           </v-list>
 
           <v-expansion-panels flat multiple>

src/components/Modules/ThreeLayerPaperStrawCalculate.vue

@@ -54,7 +54,7 @@
       <!-- 计算结果区域  -->
       <v-col cols="12" lg="5" md="6">
         <v-card class="pa-6 result-card" elevation="8" rounded="xl">
-          <v-card-title class="text-h5 mb-6 d-flex align-center">
+          <v-card-title class="text-h5 d-flex align-center">
             <v-icon
               class="mr-3"
               color="primary"
@@ -63,44 +63,54 @@
             />
             {{ $t('results') }}
           </v-card-title>
-          <v-list lines="two">
+          <v-img src="@/assets/pro02.png" />
-            <result-section
+          <v-sheet>
-              :label="`${$t('paperStrawResult.paperTubeInnerDiameter')}`"
+            <h6 class="text-center text-h6 font-weight-bold text-secondary-lighten-2 mb-2">纸吸管规格</h6>
+            <result-list-item
+              :label="`${$t('paperStrawResult.paperTubeInnerDiameter')}(d)`"
               :value="result.paperCoreDiameter"
             />
-            <result-section
+            <result-list-item
-              :label="`${$t('paperStrawResult.paperTubeExternalDiameter')}`"
+              :label="`${$t('paperStrawResult.paperTubeExternalDiameter')}(D)`"
               :value="result.paperTubeExternalDiameter"
             />
-            <result-section
+            <result-list-item
-              :label="`${$t('paperStrawResult.paperTubeThickness')}`"
+              :label="`${$t('paperStrawResult.paperTubeThickness')}(T)`"
               :value="result.paperTubeWallThickness"
             />
-            <result-section
+            <result-list-item
-              :label="`${$t('paperStrawResult.bottomPaperAngle')}`"
+              :label="`${$t('paperStrawResult.leadingLength')}(S)`"
-              :value="result.bottomPaperAngle"
-            />
-            <result-section
-              :label="`${$t('paperStrawResult.leadingLength')}`"
               :value="result.leadingLength"
             />
-            <result-section
+          </v-sheet>
-              :label="`${$t('paperStrawResult.bottomPaperWidth')}`"
+
+          <v-divider class="my-4" />
+          <v-sheet>
+            <h6 class="text-center text-h6 font-weight-bold text-secondary-lighten-2 mb-2">制作参数</h6>
+
+            <result-list-item
+              :label="`${$t('paperStrawResult.bottomPaperAngle')}(A)`"
+              :value="result.bottomPaperAngle"
+            />
+            <result-list-item
+              :label="`${$t('paperStrawResult.bottomPaperWidth')}(B1)`"
               :value="result.bottomPaperWidth"
             />
-            <result-section
+            <result-list-item
-              :label="`${$t('paperStrawResult.middlePaperWidth')}`"
+              :label="`${$t('paperStrawResult.middlePaperWidth')}(B2)`"
               :value="result.middlePaperWidth"
             />
-            <result-section
+            <result-list-item
-              :label="`${$t('paperStrawResult.topPaperWidth')}`"
+              :label="`${$t('paperStrawResult.topPaperWidth')}(B3)`"
               :value="result.topPaperWidth"
             />
-            <result-section
+            <result-list-item
               :label="`${$t('paperStrawResult.beltWidth')}`"
               :value="result.beltWidth"
             />
-          </v-list>
+          </v-sheet>
+
+          <v-divider class="my-4" />
 
           <v-expansion-panels flat multiple>
             <v-expansion-panel hide-actions>

src/components/ResultListItem.vue

@@ -0,0 +1,20 @@
+<template>
+  <v-row class="px-4">
+    <v-col cols="6">
+      <div class="text-h6 text-secondary-lighten-2 font-weight-bold">{{ label }}</div>
+    </v-col>
+    <v-col class="d-flex flex-column align-end justify-center" cols="6">
+      <div class="text-h6 text-primary font-weight-bold">{{ value.value.toFixed(fixed ?? 2) }} {{ $t(`units.${value.unit}`) }}</div>
+    </v-col>
+  </v-row>
+</template>
+
+<script setup lang="ts">
+  import type { Param } from '@/types/param'
+
+  defineProps<{
+    label: string
+    value: Param
+    fixed?: number
+  }>()
+</script>