fix: fix sm screens flex bug

Author: yzh990918

packages/site/src/App.vue

@@ -1,7 +1,7 @@
 <template>
   <TheHeader />
   <Bg />
-  <main class="w-85% ma h-[calc(100%-4rem)]">
+  <main class="w-85% ma mb-6 sm:h-[calc(100%-4rem)]">
     <router-view />
   </main>
 </template>

packages/site/src/pages/home/index.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
+import { breakpointsTailwind } from '@vueuse/core'
 import { ElNotification } from 'element-plus'
 import { JSON_TSC } from 'json-tsc'
 import { example1, example2 } from '../../constants'
 
 const inputCode = ref('')
 const outputCode = ref('')
+const smallerThanSM = useBreakpoints(breakpointsTailwind).smaller('sm')
 const configModel = reactive({
   prependWithO: true,
   sortAlphabetically: false,
@@ -90,8 +92,8 @@ const handleReset = () => {
 </script>
 
 <template>
-  <div flex flex-wrap w-full h-full>
-    <div m-r-20px m-b-20px w-80>
+  <div flex w-full h-full :class="smallerThanSM && 'flex-wrap'">
+    <div m-r-20px m-b-20px w-80 :class="smallerThanSM && 'w-full !m-r-0'">
       <el-card h-full class="card-style">
         <template #header>
           <div class="card-header flex flex-col items-start space-y-2">
@@ -154,7 +156,7 @@ const handleReset = () => {
       <div h-90>
         <el-input v-model="inputCode" type="textarea" :placeholder="t('textarea.inputCode')" />
       </div>
-      <div flex-1 min-h-40>
+      <div :class="smallerThanSM ? 'h-90' : 'flex-1'">
         <el-input v-model="outputCode" type="textarea" :placeholder="t('textarea.outputCode')" />
       </div>
     </div>

packages/site/unocss.config.ts

@@ -8,6 +8,8 @@ import {
 } from 'unocss'
 
 export default defineConfig({
+  theme: {
+  },
   shortcuts: [
     ['btn', 'px-4 py-1 rounded inline-block bg-teal-600 text-white cursor-pointer hover:bg-teal-700 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'],
     ['icon-btn', 'text-[0.9em] inline-block cursor-pointer select-none opacity-75 transition duration-200 ease-in-out hover:opacity-100 hover:text-teal-600'],