Paul
/
Take-Photo-Poster
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix: Remove Responsive Styles 

去除响应式，改为固定 768 像素宽度确保在移动设备上完整展示
This commit is contained in:
奇趣保罗 2025-09-16 22:56:21 +08:00
parent bc700c414a
commit 86d285195c
2 changed files with 3 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="icon" href="/favicon.ico"> <link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=768, initial-scale=1.0">
<title>晓螺｜摄影接单</title> <title>晓螺｜摄影接单</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

4
src/App.vue
View File

@ -94,7 +94,7 @@ onMounted(() => {
</script> </script>
<template> <template>
<div class="min-h-screen bg-gradient-to-br from-gray-100 to-gray-200 px-4 py-8"> <div class="min-h-screen bg-gradient-to-br from-gray-100 to-gray-200 min-[769px]:px-4 min-[769px]:py-8">
<div class="fixed top-4 right-4 z-50 flex gap-2"> <div class="fixed top-4 right-4 z-50 flex gap-2">
<button <button
class="cursor-pointer bg-white/90 backdrop-blur-sm text-gray-700 px-4 py-2 rounded-full shadow-lg hover:bg-white transition-all duration-300 flex items-center gap-2 hover:scale-105" class="cursor-pointer bg-white/90 backdrop-blur-sm text-gray-700 px-4 py-2 rounded-full shadow-lg hover:bg-white transition-all duration-300 flex items-center gap-2 hover:scale-105"
@ -178,7 +178,7 @@ onMounted(() => {
<div class="text-3xl font-bold text-yellow-400">近期例图</div> <div class="text-3xl font-bold text-yellow-400">近期例图</div>
<Star :size="24" class="text-yellow-400" fill="currentColor" /> <Star :size="24" class="text-yellow-400" fill="currentColor" />
</div> </div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2 mb-8"> <div class="grid grid-cols-3 gap-2 mb-8">
<div v-for="(column, colIndex) in columns" :key="colIndex" class="space-y-2"> <div v-for="(column, colIndex) in columns" :key="colIndex" class="space-y-2">
<div v-for="photo in column" :key="photo.id" class="relative rounded-lg overflow-hidden group"> <div v-for="photo in column" :key="photo.id" class="relative rounded-lg overflow-hidden group">
<img :src="photo.url" :alt="photo.title" class="w-full h-auto block rounded-lg" /> <img :src="photo.url" :alt="photo.title" class="w-full h-auto block rounded-lg" />