200 lines
12 KiB
Vue
200 lines
12 KiB
Vue
<template>
|
||
<view class="page">
|
||
<view class="hero">
|
||
<view class="orb orb-one" />
|
||
<view class="orb orb-two" />
|
||
<view class="grid" />
|
||
|
||
<view class="topbar">
|
||
<view class="brand">
|
||
<text class="brand-cn">逐 光</text>
|
||
<text class="brand-en">GUANGMING FIELD GUIDE</text>
|
||
</view>
|
||
<view class="district-pill">深圳 · 光明区</view>
|
||
</view>
|
||
|
||
<view class="hero-copy">
|
||
<text class="eyebrow">SCIENCE × NATURE × CITY</text>
|
||
<text class="hero-title">在光明，<br />遇见城市的<br /><text class="accent">另一种呼吸</text></text>
|
||
<text class="hero-body">从未来科技馆到都市田园，一天之内切换科学、自然与生活。</text>
|
||
<view class="hero-action" @click="makePlan">
|
||
<text>定制我的光明行程</text>
|
||
<text class="arrow">↗</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="coordinate">
|
||
<text>22.748° N</text>
|
||
<view class="coordinate-line" />
|
||
<text>113.935° E</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="content">
|
||
<view class="intro">
|
||
<text class="section-kicker">WHY GUANGMING</text>
|
||
<text class="intro-title">一座把未来种进田野的城区</text>
|
||
<text class="intro-body">这里有科学城的银色飞船，也有四季变化的田园花景。沿着绿道慢慢走，城市的锋芒与自然的松弛恰好相遇。</text>
|
||
<view class="fact-row">
|
||
<view class="fact">
|
||
<text class="fact-value">½—1</text>
|
||
<text class="fact-label">推荐游玩天数</text>
|
||
</view>
|
||
<view class="fact">
|
||
<text class="fact-value">15</text>
|
||
<text class="fact-label">POC精选地点</text>
|
||
</view>
|
||
<view class="fact">
|
||
<text class="fact-value">AI</text>
|
||
<text class="fact-label">按偏好编排行程</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="section-head">
|
||
<view>
|
||
<text class="section-kicker">THREE WAYS TO SEE</text>
|
||
<text class="section-title">三种光明</text>
|
||
</view>
|
||
<text class="index-mark">03</text>
|
||
</view>
|
||
|
||
<view class="story-list">
|
||
<view v-for="(story, index) in stories" :key="story.title" class="story" :class="`story-${index + 1}`">
|
||
<view class="story-art">
|
||
<view class="story-shape" />
|
||
<text class="story-number">0{{ index + 1 }}</text>
|
||
</view>
|
||
<view class="story-copy">
|
||
<text class="story-tag">{{ story.tag }}</text>
|
||
<text class="story-title">{{ story.title }}</text>
|
||
<text class="story-desc">{{ story.desc }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="planner-card" @click="makePlan">
|
||
<view class="planner-top">
|
||
<text class="planner-label">AI TRIP MAKER</text>
|
||
<text class="spark">✦</text>
|
||
</view>
|
||
<text class="planner-title">不照搬攻略，<br />只生成适合你的光明。</text>
|
||
<view class="choice-preview">
|
||
<text>亲子</text><text>半日</text><text>轻松</text><text>自然</text>
|
||
</view>
|
||
<view class="planner-button">
|
||
<text>开始选择偏好</text>
|
||
<text>→</text>
|
||
</view>
|
||
</view>
|
||
|
||
<text class="source-note">地点资料基于光明区政府及场馆公开信息整理，动态开放与预约信息请出行前确认。</text>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
const stories = [
|
||
{ tag: 'FUTURE / 未来', title: '科学城的银色飞船', desc: '走进深圳科学技术馆，在互动展项里触摸数字文明。' },
|
||
{ tag: 'FIELD / 田野', title: '都市里的四季田园', desc: '在欢乐田园等风吹过稻浪，把时间交还给自然。' },
|
||
{ tag: 'GREEN / 漫游', title: '桥与绿道之间', desc: '沿虹桥与山林步道散步，看城市向绿色深处延伸。' },
|
||
]
|
||
|
||
const makePlan = () => {
|
||
uni.navigateTo({ url: '/pages/planner/index' })
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
page { background: #efeede; }
|
||
.page { min-height: 100vh; color: #17382f; background: #efeede; }
|
||
.hero { position: relative; height: 1180rpx; overflow: hidden; color: #f5f1da; background: linear-gradient(145deg, #123d35 0%, #0b2825 62%, #071d1c 100%); }
|
||
.grid { position: absolute; inset: 0; opacity: .15; background-image: linear-gradient(rgba(255,255,255,.22) 1rpx, transparent 1rpx), linear-gradient(90deg, rgba(255,255,255,.22) 1rpx, transparent 1rpx); background-size: 86rpx 86rpx; transform: perspective(500rpx) rotateX(62deg) scale(1.5); transform-origin: bottom; }
|
||
.orb { position: absolute; border-radius: 50%; filter: blur(2rpx); }
|
||
.orb-one { width: 620rpx; height: 620rpx; right: -240rpx; top: 130rpx; border: 1rpx solid rgba(208,255,101,.5); box-shadow: 0 0 120rpx rgba(174,235,55,.13) inset; }
|
||
.orb-two { width: 190rpx; height: 190rpx; right: 58rpx; top: 330rpx; background: #c5ef55; box-shadow: 0 0 100rpx rgba(197,239,85,.35); }
|
||
.topbar { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: flex-start; padding: calc(34rpx + env(safe-area-inset-top)) 38rpx 0; }
|
||
.brand { display: flex; flex-direction: column; gap: 4rpx; }
|
||
.brand-cn { font-family: 'STSong','Songti SC',serif; font-size: 30rpx; font-weight: 700; letter-spacing: 14rpx; }
|
||
.brand-en { font-size: 13rpx; letter-spacing: 3rpx; opacity: .6; }
|
||
.district-pill { flex-shrink: 0; padding: 11rpx 15rpx; border: 1rpx solid rgba(255,255,255,.3); border-radius: 999rpx; font-size: 18rpx; letter-spacing: 1rpx; }
|
||
.hero-copy { position: absolute; z-index: 2; left: 42rpx; right: 42rpx; bottom: 130rpx; }
|
||
.eyebrow,.section-kicker { display: block; color: #a5c83d; font-size: 18rpx; letter-spacing: 5rpx; }
|
||
.hero-title { display: block; margin-top: 32rpx; font-family: 'STSong','Songti SC',serif; font-size: 78rpx; line-height: 1.2; font-weight: 700; letter-spacing: 2rpx; }
|
||
.accent { color: #c8ed5d; font-style: italic; }
|
||
.hero-body { display: block; width: 560rpx; margin-top: 28rpx; color: rgba(245,241,218,.7); font-size: 27rpx; line-height: 1.8; }
|
||
.hero-action { display: flex; justify-content: space-between; align-items: center; width: 570rpx; margin-top: 40rpx; padding: 27rpx 30rpx; box-sizing: border-box; color: #102f29; background: #c8ed5d; font-size: 27rpx; font-weight: 700; }
|
||
.arrow { font-size: 38rpx; }
|
||
.coordinate { position: absolute; z-index: 2; right: -84rpx; bottom: 325rpx; display: flex; align-items: center; gap: 14rpx; color: rgba(255,255,255,.42); font-size: 15rpx; letter-spacing: 2rpx; transform: rotate(90deg); }
|
||
.coordinate-line { width: 80rpx; height: 1rpx; background: rgba(255,255,255,.3); }
|
||
.content { padding: 0 36rpx 100rpx; background: radial-gradient(circle at 90% 10%, rgba(200,237,93,.16), transparent 340rpx), #efeede; }
|
||
.intro { padding: 84rpx 6rpx 78rpx; border-bottom: 1rpx solid rgba(23,56,47,.16); }
|
||
.intro-title,.section-title { display: block; font-family: 'STSong','Songti SC',serif; font-weight: 700; }
|
||
.intro-title { margin-top: 22rpx; font-size: 51rpx; line-height: 1.35; }
|
||
.intro-body { display: block; margin-top: 25rpx; color: #4f635b; font-family: 'STSong','Songti SC',serif; font-size: 28rpx; line-height: 1.95; }
|
||
.fact-row { display: flex; margin-top: 48rpx; }
|
||
.fact { flex: 1; display: flex; flex-direction: column; gap: 9rpx; }
|
||
.fact-value { font-family: Georgia,serif; font-size: 37rpx; color: #17382f; }
|
||
.fact-label { font-size: 19rpx; color: #718078; }
|
||
.section-head { display: flex; justify-content: space-between; align-items: flex-end; padding: 78rpx 6rpx 38rpx; }
|
||
.section-title { margin-top: 12rpx; font-size: 54rpx; }
|
||
.index-mark { font-family: Georgia,serif; font-style: italic; font-size: 68rpx; color: rgba(23,56,47,.17); }
|
||
.story-list { display: flex; flex-direction: column; gap: 24rpx; }
|
||
.story { display: flex; min-height: 260rpx; background: #f7f4e8; box-shadow: 0 18rpx 50rpx rgba(19,52,44,.07); }
|
||
.story-art { position: relative; width: 250rpx; overflow: hidden; background: #173d35; }
|
||
.story-shape { position: absolute; width: 200rpx; height: 200rpx; border-radius: 50%; right: -70rpx; bottom: -54rpx; background: #c7eb5d; }
|
||
.story-2 .story-art { background: #ca6b3d; }
|
||
.story-2 .story-shape { width: 250rpx; height: 110rpx; border-radius: 50% 50% 0 0; right: -35rpx; bottom: 0; background: #f2c85d; }
|
||
.story-3 .story-art { background: #244f48; }
|
||
.story-3 .story-shape { width: 280rpx; height: 50rpx; right: -20rpx; bottom: 76rpx; border-radius: 99rpx; background: #df593f; transform: rotate(-26deg); }
|
||
.story-number { position: absolute; left: 22rpx; top: 20rpx; color: rgba(255,255,255,.75); font-family: Georgia,serif; font-size: 23rpx; }
|
||
.story-copy { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 28rpx; }
|
||
.story-tag { color: #b05e39; font-size: 17rpx; letter-spacing: 3rpx; }
|
||
.story-title { margin-top: 13rpx; font-family: 'STSong','Songti SC',serif; font-size: 33rpx; font-weight: 700; }
|
||
.story-desc { margin-top: 13rpx; color: #68776f; font-size: 22rpx; line-height: 1.65; }
|
||
.planner-card { margin-top: 90rpx; padding: 40rpx; color: #f3f0dc; background: #15372f; box-shadow: 18rpx 18rpx 0 #c8ed5d; }
|
||
.planner-top { display: flex; align-items: center; justify-content: space-between; }
|
||
.planner-label { color: #c8ed5d; font-size: 18rpx; letter-spacing: 4rpx; }
|
||
.spark { color: #c8ed5d; font-size: 45rpx; }
|
||
.planner-title { display: block; margin-top: 30rpx; font-family: 'STSong','Songti SC',serif; font-size: 47rpx; line-height: 1.45; font-weight: 700; }
|
||
.choice-preview { display: flex; flex-wrap: wrap; gap: 12rpx; margin-top: 34rpx; }
|
||
.choice-preview text { padding: 12rpx 18rpx; border: 1rpx solid rgba(255,255,255,.28); border-radius: 999rpx; font-size: 20rpx; }
|
||
.planner-button { display: flex; justify-content: space-between; margin-top: 36rpx; padding-top: 28rpx; border-top: 1rpx solid rgba(255,255,255,.2); color: #c8ed5d; font-size: 25rpx; }
|
||
.source-note { display: block; margin: 72rpx 16rpx 0; color: #87928b; font-size: 19rpx; line-height: 1.7; text-align: center; }
|
||
|
||
/* AI travel assistant visual system */
|
||
page,.page { background: #f4f8f6; }
|
||
.page { color: #17221d; font-family: 'PingFang SC','Microsoft YaHei',sans-serif; }
|
||
.hero { height: 1020rpx; color: #17221d; background: radial-gradient(circle at 90% 28%, rgba(8,156,92,.14), transparent 360rpx), linear-gradient(180deg,#fff 0%,#f3faf6 100%); }
|
||
.grid { opacity: .28; background-image: linear-gradient(rgba(7,142,85,.1) 1rpx, transparent 1rpx),linear-gradient(90deg,rgba(7,142,85,.1) 1rpx,transparent 1rpx); }
|
||
.orb-one { border-color: rgba(7,156,92,.22); box-shadow: 0 0 120rpx rgba(7,156,92,.08) inset; }
|
||
.orb-two { background: #0a9b5d; box-shadow: 0 0 80rpx rgba(7,156,92,.22); }
|
||
.topbar { padding-top: calc(28rpx + env(safe-area-inset-top)); }
|
||
.brand-cn { color: #087b4a; }
|
||
.brand-en { color: #73827a; opacity: 1; }
|
||
.district-pill { color: #087b4a; border-color: #b9d9c9; background: rgba(255,255,255,.75); }
|
||
.hero-copy { bottom: 100rpx; }
|
||
.eyebrow,.section-kicker { color: #078e55; }
|
||
.hero-title { font-size: 72rpx; }
|
||
.accent { color: #078e55; font-style: normal; }
|
||
.hero-body { color: #68766f; }
|
||
.hero-action { width: 590rpx; border-radius: 20rpx; color: #fff; background: linear-gradient(100deg,#079c5c,#067d4a); box-shadow: 0 14rpx 32rpx rgba(3,129,75,.24); }
|
||
.coordinate { color: rgba(7,96,57,.4); }
|
||
.coordinate-line { background: rgba(7,96,57,.24); }
|
||
.content { background: #f4f8f6; }
|
||
.intro { margin-top: 28rpx; padding: 58rpx 34rpx; border: 2rpx solid #dce9e2; border-radius: 30rpx; background: #fff; box-shadow: 0 18rpx 48rpx rgba(19,75,50,.07); }
|
||
.intro-title,.section-title,.story-title,.planner-title { font-family: 'PingFang SC','Microsoft YaHei',sans-serif; }
|
||
.intro-body { color: #617068; font-family: 'PingFang SC','Microsoft YaHei',sans-serif; font-size: 25rpx; }
|
||
.story { border: 2rpx solid #e0e9e4; border-radius: 24rpx; overflow: hidden; background: #fff; box-shadow: 0 12rpx 34rpx rgba(19,75,50,.06); }
|
||
.story-art { background: #087c4b; }
|
||
.story-shape { background: #8fe0b8; }
|
||
.story-2 .story-art { background: #0b9560; }
|
||
.story-2 .story-shape { background: #b6ead0; }
|
||
.story-3 .story-art { background: #076b48; }
|
||
.story-3 .story-shape { background: #62cea0; }
|
||
.story-tag { color: #078e55; }
|
||
.planner-card { border-radius: 30rpx; background: linear-gradient(145deg,#089b5d,#067645); box-shadow: 0 20rpx 50rpx rgba(3,114,66,.22); }
|
||
.planner-label,.spark,.planner-button { color: #d9ffeb; }
|
||
.choice-preview text { background: rgba(255,255,255,.08); }
|
||
</style>
|