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