1

pages/tailwind-css/mobile/index.vue

@@ -0,0 +1,33 @@
+<template>
+  <!-- 主体部分 -->
+  <div class="xl:w-screen-xl m-auto py-4 mt-20">
+    <el-page-header :icon="ArrowLeft" @back="goBack">
+      <template #content>
+        <span class="text-large font-600"> TailwindCSS 测试</span>
+      </template>
+      <template #extra>
+        <el-space class="flex items-center">
+        </el-space>
+      </template>
+      <div class="flex mb-20 mt-10 justify-center">
+        <div class="hidden-sm-and-up w-full">
+          <h1 class="text-xl text-left my-4">手机版</h1>
+          <div class="my-1 bg-white text-center h-[100px] items-center flex justify-center text-xl">小屏幕≥640px</div>
+        </div>
+        <div class="hidden-sm-and-down text-center w-full">
+          <h1 class="text-xl text-left my-4">PC版</h1>
+          <div class="my-1 bg-white text-center h-[100px] items-center flex justify-center text-xl">640px≥屏幕</div>
+        </div>
+      </div>
+    </el-page-header>
+  </div>
+</template>
+<script setup lang="ts">
+import { ArrowLeft } from '@element-plus/icons-vue'
+
+const router = useRouter();
+
+const goBack = () => {
+  router.back();
+}
+</script>