remilia/jinshen_calculator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: 调整结果卡片样式

Browse Source 
- 计算结果样式修改
- 纸吸管尺寸计算添加图例显示
This commit is contained in:
R2m1liA
2025-12-06 16:41:57 +08:00
parent 5e3a12283b
commit efb595f086
11 changed files with 150 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/pro02.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

BIN
src/assets/pro04.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 29 KiB

2
src/components.d.ts vendored
View File

@ -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']

86
src/components/Modules/BeltSpecificationCalculate.vue
View File

@ -2,24 +2,32 @@
<div class="calculator-container">
<v-row justify="center">
<!-- 参数输入区域 -->
<v-col
cols="12"
lg="5"
md="6"
>
<v-card
class="pa-6 parameter-card"
elevation="8"
rounded="xl"
>
<v-col cols="12" 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
class="mr-3"
color="primary"
icon="mdi-tune"
size="large"
/>
{{ $t('parameters') }}
<v-row>
<v-col cols="6">
<v-icon class="mr-3" color="primary" 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
cols="12"
lg="5"
md="6"
>
<v-card
class="pa-6 result-card"
elevation="8"
rounded="xl"
>
<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-icon
class="mr-3"
color="primary"
icon="mdi-calculator"
size="large"
/>
<v-icon class="mr-3" color="primary" icon="mdi-calculator" size="large" />
{{ $t('results') }}
</v-card-title>
<v-list lines="two">
<result-section
:label="`${$t('recommendBeltThickness')}`"
:value="result.recommendBeltThickness"
/>
<result-section
:label="`${$t('recommendBeltWidth')}`"
:value="result.recommendBeltWidth"
/>
<result-section
:label="`${$t('recommendBeltLength')}`"
:value="result.recommendBeltLength"
/>
<result-list-item :label="`${$t('recommendBeltThickness')}`" :value="result.recommendBeltThickness" />
<result-list-item :label="`${$t('recommendBeltWidth')}`" :value="result.recommendBeltWidth" />
<result-list-item :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>

59
src/components/Modules/FourLayerPaperStrawCalculate.vue
View File

@ -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">
<result-section
:label="`${$t('paperStrawResult.paperTubeInnerDiameter')}`"
<v-img src="@/assets/pro04.png" />
<v-sheet>
<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
:label="`${$t('paperStrawResult.paperTubeExternalDiameter')}`"
<result-list-item
:label="`${$t('paperStrawResult.paperTubeExternalDiameter')}(D)`"
:value="result.paperTubeExternalDiameter"
/>
<result-section
:label="`${$t('paperStrawResult.paperTubeThickness')}`"
<result-list-item
:label="`${$t('paperStrawResult.paperTubeThickness')}(T)`"
:value="result.paperTubeWallThickness"
/>
<result-section
:label="`${$t('paperStrawResult.bottomPaperAngle')}`"
:value="result.bottomPaperAngle"
/>
<result-section
:label="`${$t('paperStrawResult.leadingLength')}`"
<result-list-item
:label="`${$t('paperStrawResult.leadingLength')}(S)`"
:value="result.leadingLength"
/>
<result-section
:label="`${$t('paperStrawResult.bottomPaperWidth')}`"
</v-sheet>
<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
:label="`${$t('paperStrawResult.secondLayerPaperWidth')}`"
<result-list-item
:label="`${$t('paperStrawResult.secondLayerPaperWidth')}(B2)`"
:value="result.secondLayerPaperWidth"
/>
<result-section
:label="`${$t('paperStrawResult.thirdLayerPaperWidth')}`"
<result-list-item
:label="`${$t('paperStrawResult.thirdLayerPaperWidth')}(B3)`"
:value="result.thirdLayerPaperWidth"
/>
<result-section
:label="`${$t('paperStrawResult.topPaperWidth')}`"
<result-list-item
: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>

8
src/components/Modules/PaperRollWeightLengthCalculate.vue
View File

@ -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">

10
src/components/Modules/PaperTapeWidthAngleCalculate.vue
View File

@ -69,12 +69,14 @@
</v-card-title>
<v-list lines="two">
<result-section :label="$t('beltAngle')" :value="result.beltAngle" />
<result-section :label="$t('paperHolderAngle')" :value="result.paperHolderAngle" />
<result-section :label="$t('leadingLength')" :value="result.leadingLength" />
<result-section :label="$t('paperWidth')" :value="result.paperWidth" />
<result-list-item :label="$t('beltAngle')" :value="result.beltAngle" />
<result-list-item :label="$t('paperHolderAngle')" :value="result.paperHolderAngle" />
<result-list-item :label="$t('leadingLength')" :value="result.leadingLength" />
<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">

14
src/components/Modules/PaperTubeProductionCalculate.vue
View File

@ -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">

4
src/components/Modules/PaperTubeWeightCalculate.vue
View File

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

54
src/components/Modules/ThreeLayerPaperStrawCalculate.vue
View File

@ -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">
<result-section
:label="`${$t('paperStrawResult.paperTubeInnerDiameter')}`"
<v-img src="@/assets/pro02.png" />
<v-sheet>
<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
:label="`${$t('paperStrawResult.paperTubeExternalDiameter')}`"
<result-list-item
:label="`${$t('paperStrawResult.paperTubeExternalDiameter')}(D)`"
:value="result.paperTubeExternalDiameter"
/>
<result-section
:label="`${$t('paperStrawResult.paperTubeThickness')}`"
<result-list-item
:label="`${$t('paperStrawResult.paperTubeThickness')}(T)`"
:value="result.paperTubeWallThickness"
/>
<result-section
:label="`${$t('paperStrawResult.bottomPaperAngle')}`"
:value="result.bottomPaperAngle"
/>
<result-section
:label="`${$t('paperStrawResult.leadingLength')}`"
<result-list-item
:label="`${$t('paperStrawResult.leadingLength')}(S)`"
:value="result.leadingLength"
/>
<result-section
:label="`${$t('paperStrawResult.bottomPaperWidth')}`"
</v-sheet>
<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
:label="`${$t('paperStrawResult.middlePaperWidth')}`"
<result-list-item
:label="`${$t('paperStrawResult.middlePaperWidth')}(B2)`"
:value="result.middlePaperWidth"
/>
<result-section
:label="`${$t('paperStrawResult.topPaperWidth')}`"
<result-list-item
: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>

20
src/components/ResultListItem.vue Normal file
View File

@ -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>