fix responsive

This commit is contained in:
ClasWen 2024-06-05 23:01:46 +08:00
parent 32d66d584b
commit 07eb277419

View file

@ -1,39 +1,46 @@
--- ---
import GenerateQR from "./GenerateQR.vue" import GenerateQR from "./GenerateQR.vue"
import { SITE_TITLE, SITE_DESCRIPTION } from "../../consts"
import BaseHead from "../../components/BaseHead.astro"
const { primaryTitle } = Astro.props
const title = primaryTitle ? `${primaryTitle} - ${SITE_TITLE}` : SITE_TITLE;
--- ---
<html class="" lang="zh-CN" dir="ltr"> <html class="js no-touch progressive-image no-reduced-motion progressive" lang="zh-CN" dir="ltr">
<head> <head>
<meta charset="utf-8" /> <BaseHead title={title} description={SITE_DESCRIPTION} />
</head> </head>
<body> <body>
<div class="bg-[#f5f5f7] flex flex-col sm:flex-row items-center h-screen justify-center gap-8 p-8"> <div class="bg-[#f5f5f7] w-full h-screen flex flex-col justify-between items-center">
<div <div class=" flex flex-col sm:flex-row items-center h-full max-w-[1280px] justify-center gap-8 p-8">
class=" sm:w-auto" <div
> class=" sm:w-auto"
<div class="flex items-center gap-2"> >
<img <div class="flex items-center gap-2">
src="https://oss.nbtca.space/CA-logo.svg" <img
alt="" src="https://oss.nbtca.space/CA-logo.svg"
class="w-12 aspect-square" alt=""
/> class="w-12 aspect-square"
<div class="text-brand text-nowrap text-3xl"> />
计算机协会 <div class="text-brand text-nowrap text-3xl">
</div> 计算机协会
</div> </div>
<div class="text-3xl md:text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-cyan-500 to-blue-500 mt-3"> </div>
2024 毕业典礼拍摄 <div class="text-3xl md:text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-cyan-500 to-blue-500 mt-3">
</div> 2024 毕业典礼拍摄
<div class="sm:w-[40vw] mt-6 text-gray-600 lg:text-lg"> </div>
<div> <div class="sm:w-[40vw] mt-6 text-gray-600 lg:text-lg">
扫描右侧二维码来下载你的照片 <div>
</div> 扫描右侧二维码来下载你的照片
<div> </div>
请在拍摄前确保你已经记下来当前页面的二维码,并且将该二维出示给摄影师 <div>
请在拍摄前确保你已经记下来当前页面的二维码,并且将该二维出示给摄影师
</div>
</div> </div>
</div> </div>
<GenerateQR client:load class="min-w-[50%]"></GenerateQR>
</div> </div>
<GenerateQR client:load class="min-w-[50%]"></GenerateQR>
</div> </div>
</body> </body>
</html> </html>