调整响应式配置

jkhhuse · Jan 17, 2022 · ca4cc62 · ca4cc62
1 parent a6678ef
commit ca4cc62
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 5 deletions.
diff --git a/src/views/density/AddDiet.vue b/src/views/density/AddDiet.vue
@@ -62,12 +62,25 @@
   </van-popup>
   <van-field v-if="diet.dietType === 0" v-model="diet.specialMilk" type="number" label="特奶量(ml)" />
   <van-field v-else-if="diet.dietType === 1" v-model="diet.breastMilk" type="number" label="母乳量(ml)" />
-  <div v-else class="flex flex-row text-xs text-gray-600">
-    <div class="leading-8 pl-3 text-left" style="width: 7.8em; margin-left: 1px">食物名称</div>
+  <div v-else class="flex flex-row text-xs text-gray-600 p-1.5 pl-3.5">
+    <div
+      class="
+        text-sm
+        ml-1
+        leading-7
+        sm:pl-3 sm:pb-3 sm:bt-3 sm:text-xl
+        md:pt-4 md:pb-5 md:text-3xl
+        xl:pl-3 xl:pb-7 xl:bt-7 xl:text-4xl
+        text-left
+      "
+      style="width: 7.8em"
+    >
+      食物名称
+    </div>
     <vue3-simple-typeahead
       id="typeahead_id"
       placeholder="输入进行查找..."
-      class="text-left pl-3"
+      class="text-left pl-1"
       :items="foodItems"
       :minInputLength="1"
       :itemProjection="itemProjectionFunction"
@@ -88,7 +101,7 @@
     v-model="diet.dietContent"
     rows="3"
     autosize
-    label="食物记录"
+    label="备注"
     type="textarea"
     placeholder="请输入食物"
   />

diff --git a/src/views/density/hooks/useDiet.ts b/src/views/density/hooks/useDiet.ts
@@ -80,7 +80,7 @@ export default function useDiet(route: RouteLocationNormalizedLoaded, router: Ro
     [() => diet.value.foodAmount, () => diet.value.foodUuid],
     () => {
       const food = foodItems.value.find(item => item.uuid === diet.value.foodUuid);
-      diet.value.pheValue = +((food?.phe as number) * +diet.value.foodAmount).toFixed(2);
+      diet.value.pheValue = +(((food?.phe as number) * +diet.value.foodAmount) / 100).toFixed(2);
     },
     {
       immediate: false,

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -2,6 +2,22 @@ module.exports = {
   purge: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
   darkMode: false, // or 'media' or 'class'
   theme: {
+    screens: {
+      sm: "640px",
+      // => @media (min-width: 640px) { ... }
+
+      md: "768px",
+      // => @media (min-width: 768px) { ... }
+
+      lg: "1024px",
+      // => @media (min-width: 1024px) { ... }
+
+      xl: "1280px",
+      // => @media (min-width: 1280px) { ... }
+
+      "2xl": "1536px",
+      // => @media (min-width: 1536px) { ... }
+    },
     extend: {
       colors: {
         dark: {