34 lines
1.1 KiB
Vue
34 lines
1.1 KiB
Vue
<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>
|