parent
edecb06d4f
commit
ff6475e759
62
src/App.vue
62
src/App.vue
|
|
@ -1,7 +1,7 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted, nextTick } from "vue";
|
||||
import { snapdom } from "@zumer/snapdom";
|
||||
import { Camera, Palette, Star, Aperture, Zap, User, Lightbulb, HeartHandshake, Users2, MapPin, WandSparkles } from "lucide-vue-next";
|
||||
import { Camera, Palette, Aperture, Zap, User, Lightbulb, HeartHandshake, Users2, MapPin, WandSparkles } from "lucide-vue-next";
|
||||
import { IconQQ, IconWeChat, IconXHS } from "./components/common/icons";
|
||||
|
||||
interface MediaItem {
|
||||
|
|
@ -116,16 +116,29 @@ onMounted(() => {
|
|||
</button>
|
||||
</div>
|
||||
<div class="max-w-screen-md mx-auto">
|
||||
<div ref="posterRef" class="bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 shadow-2xl overflow-hidden p-8">
|
||||
<header class="mt-8 mb-16">
|
||||
<h1 class="text-yellow-400 flex items-center justify-center gap-8 text-7xl font-bold mb-8 tracking-widest">
|
||||
<svg class="size-24" viewBox="0 0 200 200">
|
||||
<div ref="posterRef" class="bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 shadow-2xl overflow-hidden p-4">
|
||||
<div class="relative rounded-xl border-2 border-gray-500 p-4 overflow-hidden">
|
||||
<div class="flex gap-2 -m-4 mb-8 p-2 bg-gray-700">
|
||||
<span class="size-4 bg-red-500 rounded-4xl"></span>
|
||||
<span class="size-4 bg-yellow-500 rounded-4xl"></span>
|
||||
<span class="size-4 bg-green-500 rounded-4xl"></span>
|
||||
<span class="ml-auto w-10 h-4 bg-gray-500 rounded-4xl"></span>
|
||||
</div>
|
||||
|
||||
<div class="absolute text-right bottom-40 -right-15 origin-right -rotate-[30deg] text-gray-400 opacity-5 text-[10em] leading-none font-bold select-none pointer-events-none">
|
||||
XIAOLUO <br />
|
||||
PHOTOGRAPHY
|
||||
</div>
|
||||
|
||||
<header class="mb-8">
|
||||
<h1 class="relative text-yellow-400 gap-4 text-5xl font-bold mb-8 tracking-widest">
|
||||
<svg class="absolute left-0 -top-2 size-16" viewBox="0 0 200 200">
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M22.8,42.4c0,0,14.4,2.4,20.8,2S60,39.6,60,39.6s0.8-13.6,44.4-14c58-0.4,71.6,61.6,71.6,61.6s4.4,19.2,12,27.6c5.2,3.6,11.6,2,11.6,2s-9.2,6-14.4,7.2c-5.2,0.8-12.8-1.6-12.8-1.6L166,148l-6-6.8l-2,0.8l-4.4,9.2V142l-2,0.8c0,0-1.6,8-2.8,12s-4.8,8.8-4.8,8.8l-3.6-4.8c0,0-0.4,2.4-1.6,3.6c-1.2,1.2-2.8,2.8-2.8,2.8l-2-3.6c0,0-12,10.8-37.2,10.8s-40-12-40-12l-2.8,2.8l-6-12.8c0,0-5.2-3.6-7.2-7.6s-0.8-7.2-0.8-7.2l-7.2-10l-4.4,5.6c0,0-3.2-6.4-2.8-9.2c0.4-2.8,0.8-7.2,0.8-7.2S19.2,114,12,112c-6.8-2-12-9.2-12-9.2s6,2,11.6-2s20.8-28.4,20.8-28.4l12.8-16.8c0,0-5.6-0.4-10.8-2.8C29.2,50.4,22.8,42.4,22.8,42.4z M55.2,90l-4.4,40.4c0,0,3.2,7.6,5.2,12c1.6,4.4,2,7.6,2,7.6s6,14,39.6,14.8c42-0.8,53.2-32,53.2-32s-6-14.8-10.4-18.8c-4-4-27.2-16.4-27.2-16.4s3.2,8,4.4,15.6c1.2,7.6,1.6,13.6,1.6,13.6s-11.6-3.2-15.2-6.4c-3.6-3.2-8.8-10-8.8-10s0,3.6,0.8,7.2s2.8,5.6,2.8,5.6s-10.4-5.2-15.6-14.8c-5.6-9.6-9.2-24-9.2-24l-6.4,36.8L55.2,90z"
|
||||
></path>
|
||||
</svg>
|
||||
<span>摄影接单</span>
|
||||
<span class="ml-20">摄影接单</span>
|
||||
</h1>
|
||||
<section>
|
||||
<div class="grid gap-4 grid-cols-2 text-gray-200 text-xl leading-[1.8]">
|
||||
|
|
@ -179,50 +192,37 @@ onMounted(() => {
|
|||
</section>
|
||||
</header>
|
||||
|
||||
<main v-if="loading" class="flex justify-center items-center h-64 mb-8">
|
||||
<main v-if="loading" class="flex justify-center items-center h-64">
|
||||
<div class="animate-spin rounded-full h-12 w-12 border-b-2 border-yellow-400"></div>
|
||||
</main>
|
||||
<main v-else class="mb-8">
|
||||
<div class="flex items-center justify-center gap-2 mb-8">
|
||||
<Star :size="24" class="text-yellow-400" fill="currentColor" />
|
||||
<div class="text-3xl font-bold text-yellow-400">近期例图</div>
|
||||
<Star :size="24" class="text-yellow-400" fill="currentColor" />
|
||||
</div>
|
||||
<div class="grid grid-cols-3 gap-2 mb-8">
|
||||
<main v-else>
|
||||
<section 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="photo in column" :key="photo.id" class="relative rounded-lg overflow-hidden group bg-gray-900">
|
||||
<img :src="photo.url" :alt="photo.title" class="w-full h-auto block rounded-lg" :width="photo.width" :height="photo.height"/>
|
||||
<img :src="photo.url" :alt="photo.title" class="w-full h-auto block rounded-lg" :width="photo.width" :height="photo.height" />
|
||||
<div class="absolute bg-gradient-to-t from-black to-transparent bottom-0 left-0 right-0 p-4 pt-8 text-white transition-opacity duration-300 opacity-0 group-hover:opacity-100">
|
||||
<h3 class="font-semibold text-white mb-1 text-lg">{{ photo.title }}</h3>
|
||||
<p class="text-xs opacity-60">{{ formatDate(photo.take_time) }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-center gap-2 mb-8">
|
||||
<Star :size="24" class="text-yellow-400" fill="currentColor" />
|
||||
<div class="text-3xl font-bold text-yellow-400">联系方式</div>
|
||||
<Star :size="24" class="text-yellow-400" fill="currentColor" />
|
||||
</div>
|
||||
<div class="grid gap-4 grid-cols-2 text-gray-200 text-lg">
|
||||
<div class="flex gap-2 items-center">
|
||||
</section>
|
||||
<section class="grid gap-4 grid-cols-3 text-gray-200 text-lg">
|
||||
<div class="flex gap-2 justify-center items-center">
|
||||
<IconQQ class="size-6 text-[#09f]" />
|
||||
<span>1204958596</span>
|
||||
</div>
|
||||
<div class="flex gap-2 items-center">
|
||||
<div class="flex gap-2 justify-center items-center">
|
||||
<IconWeChat class="size-6 text-[#2bae67]" />
|
||||
<span>dreamer-paul</span>
|
||||
</div>
|
||||
<div class="flex gap-2 items-center">
|
||||
<a class="flex gap-2 justify-center items-center" href="https://www.xiaohongshu.com/user/profile/6693a59700000000030324fe" target="_blank" rel="noopener noreferrer">
|
||||
<IconXHS class="size-6 text-red-500" />
|
||||
<span>@晓螺</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="text-center text-gray-400">
|
||||
<p class="text-xs opacity-75">© 2025 晓螺摄影</p>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue