gxwebsoft/site-10584
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
赵忠林
2026-01-29 10:43:43 +08:00
commit 4a76df3391
426 changed files with 74975 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
pages/tailwind-css/mobile/index.vue Normal file
View File

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

44
pages/tailwind-css/screen/index.vue Normal file
View File

@@ -0,0 +1,44 @@
<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>
</el-page-header>
</div>
<div class="flex mb-20 mt-10 justify-start">
<div class="hidden-sm-and-up text-2xl flex justify-center">
<span class="my-1 bg-gray-400 h-[50px] text-center items-center flex justify-center text-white text-xl">hidden-sm-and-up</span>
</div>
<div class="hidden-sm-and-down text-center">
<span class="my-1 bg-gray-400 h-[50px] text-center items-center flex justify-center text-white text-xl">hidden-sm-and-down</span>
</div>
<div class="w-auto hidden-sm-and-down">
<h2 class="text-lg">w-screen-sm：宽度小于640px</h2>
<div class="w-screen-sm sm:flex my-1 bg-gray-400 h-[50px] text-center items-center flex justify-center text-white text-xl">w-screen-sm</div>
<h2 class="text-lg">w-screen-md：宽度小于768px</h2>
<div class="w-screen-md md:flex my-1 bg-gray-400 h-[50px] text-center items-center flex justify-center text-white text-xl">w-screen-md</div>
<h2 class="text-lg">w-screen-lg：宽度小于1024px</h2>
<div class="w-screen-lg lg:flex my-1 bg-gray-400 h-[50px] text-center items-center flex justify-center text-white text-xl">w-screen-lg</div>
<h2 class="text-lg">w-screen-xl：宽度小于1280px</h2>
<div class="w-screen-xl xl:flex my-1 bg-gray-400 h-[50px] text-center items-center flex justify-center text-white text-xl">w-screen-xl</div>
<h2 class="text-lg">w-screen-2xl：宽度小于1536px</h2>
<div class="w-screen-2xl 2xl:flex my-1 bg-gray-400 h-[50px] text-center items-center flex justify-center text-white text-xl">w-screen-2xl</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ArrowLeft } from '@element-plus/icons-vue'
const router = useRouter();
const goBack = () => {
router.back();
}
</script>