style: 调整竖屏模式下的结果显示

- 竖屏时计算结果由一行改为两行，以避免在长文本下显示效果不佳的问题

src/components/Modules/FourLayerPaperStrawCalculate.vue

@@ -211,7 +211,7 @@
         paperCoreDiameter: 7.3,
         bottomPaperWidth: 18.5,
       },
-      [t('ppage.four-layer-paper-straw.preset-specification.inner_8_3-outer_9_0')]: {
+      [t('page.four-layer-paper-straw.preset-specification.inner_8_3-outer_9_0')]: {
         paperCoreDiameter: 8.3,
         bottomPaperWidth: 21,
       },

src/components/ResultListItem.vue

@@ -1,10 +1,10 @@
 <template>
   <v-row class="px-4">
-    <v-col cols="8">
+    <v-col cols="12" md="8">
       <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="4">
+    <v-col class="d-flex flex-column align-md-end justify-center" cols="12" md="4">
-      <div class="text-h6 text-primary font-weight-bold">{{ value.value.toFixed(fixed ?? 2) }} {{ $t(`units.${value.unit}`) }}</div>
+      <div class="text-h4 text-md-h6 text-center text-primary font-weight-bold">{{ value.value.toFixed(fixed ?? 2) }} {{ $t(`units.${value.unit}`) }}</div>
     </v-col>
   </v-row>
 </template>

src/layouts/CalculatorLayout.vue

@@ -15,18 +15,16 @@
         </template>
       </v-app-bar-title>
 
-      <v-spacer />
-
       <v-menu v-model="languageMenu" :close-on-content-click="true" location="bottom end" offset="8">
         <template #activator="{ props }">
           <v-btn
             v-bind="props"
-            :icon="$vuetify.display.xs"
+            :icon="$vuetify.display.mobile"
-            :prepend-icon="$vuetify.display.xs ? undefined : 'mdi-translate'"
+            :prepend-icon="$vuetify.display.mobile ? undefined : 'mdi-translate'"
-            :size="$vuetify.display.xs ? 'default' : 'large'"
+            :size="$vuetify.display.mobile ? 'default' : 'large'"
             variant="text"
           >
-            <v-icon v-if="$vuetify.display.xs">mdi-translate</v-icon>
+            <v-icon v-if="$vuetify.display.mobile">mdi-translate</v-icon>
             <span v-else class="text-button">{{ currentLanguage.label }}</span>
           </v-btn>
         </template>

src/plugins/vuetify.ts

@@ -28,6 +28,9 @@ const jinshenLightTheme: ThemeDefinition = {
 
 // https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
 export default createVuetify({
+  display: {
+    mobileBreakpoint: 'md', // 当屏幕宽度小于等于这个值时，视为移动设备
+  },
   theme: {
     defaultTheme: 'light',
     variations: {