<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>云上林水寨 - 微信小程序界面预览</title>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary: #2D5A3D;
--primary-light: #4A7C5B;
--secondary: #8B7355;
--accent: #D4A84B;
--bg: #F8F5F0;
--text-primary: #333333;
--text-secondary: #666666;
--text-light: #999999;
--white: #FFFFFF;
--border: #E8E8E8;
--success: #52C41A;
--error: #FF4D4F;
}
body {
font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
padding: 40px 20px;
color: #fff;
}
h1 {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 10px;
background: linear-gradient(135deg, #4A7C5B, #D4A84B);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-align: center;
}
.subtitle {
color: rgba(255,255,255,0.7);
font-size: 1.1rem;
margin-bottom: 40px;
text-align: center;
}
.preview-container {
display: flex;
gap: 60px;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
}
.phone-wrapper {
display: flex;
flex-direction: column;
align-items: center;
}
.phone-label {
color: var(--accent);
font-size: 1rem;
font-weight: 500;
margin-bottom: 15px;
padding: 8px 20px;
background: rgba(212, 168, 75, 0.15);
border-radius: 20px;
}
.phone-frame {
width: 375px;
height: 812px;
background: #000;
border-radius: 55px;
padding: 12px;
box-shadow:
0 50px 100px rgba(0,0,0,0.5),
0 0 0 2px #333,
inset 0 0 0 2px #1a1a1a;
position: relative;
}
.phone-frame::before {
content: '';
position: absolute;
top: 12px;
left: 50%;
transform: translateX(-50%);
width: 150px;
height: 35px;
background: #000;
border-radius: 0 0 20px 20px;
z-index: 100;
}
.phone-screen {
width: 100%;
height: 100%;
background: var(--bg);
border-radius: 45px;
overflow: hidden;
position: relative;
}
/* 状态栏 */
.status-bar {
height: 44px;
background: var(--primary);
display: flex;
justify-content: space-between;
align-items: flex-end;
padding: 0 30px 8px;
color: #fff;
font-size: 14px;
font-weight: 500;
}
.status-icons {
display: flex;
gap: 5px;
}
/* 导航栏 */
.nav-bar {
height: 44px;
background: var(--primary);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 17px;
font-weight: 600;
}
/* 页面内容 */
.page-content {
height: calc(100% - 88px - 50px);
overflow-y: auto;
background: var(--bg);
}
.page-content::-webkit-scrollbar {
display: none;
}
/* 底部TabBar */
.tab-bar {
height: 50px;
background: #fff;
display: flex;
border-top: 1px solid var(--border);
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 50;
}
.tab-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
font-size: 10px;
color: var(--text-light);
cursor: pointer;
transition: all 0.2s;
}
.tab-item.active {
color: var(--primary);
}
.tab-icon {
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
}
/* ========== 首页样式 ========== */
.banner {
height: 200px;
background: linear-gradient(135deg, #4A7C5B, #2D5A3D);
position: relative;
overflow: hidden;
}
.banner::before {
content: '🏞️';
font-size: 150px;
position: absolute;
right: -30px;
top: -20px;
opacity: 0.15;
}
.banner-title {
position: absolute;
bottom: 50px;
left: 15px;
color: #fff;
font-size: 18px;
font-weight: 600;
text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.search-bar {
position: absolute;
top: 15px;
left: 15px;
right: 15px;
height: 36px;
background: rgba(255,255,255,0.95);
border-radius: 18px;
display: flex;
align-items: center;
padding: 0 15px;
color: var(--text-light);
font-size: 14px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.search-bar::before {
content: '🔍';
margin-right: 8px;
font-size: 14px;
}
.dots {
position: absolute;
bottom: 15px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 6px;
}
.dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: rgba(255,255,255,0.5);
}
.dot.active {
background: #fff;
width: 18px;
border-radius: 3px;
}
/* 护照入口卡片 */
.passport-entry {
margin: -20px 12px 12px;
background: linear-gradient(135deg, #2D5A3D 0%, #4A7C5B 100%);
border-radius: 12px;
padding: 15px;
display: flex;
align-items: center;
color: #fff;
position: relative;
z-index: 10;
box-shadow: 0 4px 15px rgba(45,90,61,0.3);
}
.passport-icon {
width: 50px;
height: 50px;
background: rgba(255,255,255,0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
margin-right: 12px;
}
.passport-info {
flex: 1;
}
.passport-title {
font-size: 16px;
font-weight: 600;
margin-bottom: 4px;
}
.passport-subtitle {
font-size: 13px;
opacity: 0.85;
}
.passport-arrow {
opacity: 0.7;
font-size: 18px;
}
/* 快捷功能 */
.quick-actions {
background: #fff;
margin: 0 12px 12px;
border-radius: 12px;
padding: 15px 10px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.action-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.action-icon {
width: 44px;
height: 44px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
.action-name {
font-size: 11px;
color: var(--text-primary);
}
/* 区块标题 */
.section {
padding: 0 12px;
margin-bottom: 15px;
}
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
.section-title {
font-size: 17px;
font-weight: 600;
color: var(--text-primary);
}
.section-more {
font-size: 13px;
color: var(--text-secondary);
}
/* 任务卡片横向滚动 */
.task-scroll {
display: flex;
gap: 10px;
overflow-x: auto;
padding-bottom: 5px;
margin: 0 -12px;
padding-left: 12px;
padding-right: 12px;
}
.task-scroll::-webkit-scrollbar {
display: none;
}
.task-card {
flex-shrink: 0;
width: 160px;
background: #fff;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.task-image {
height: 90px;
background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
display: flex;
align-items: center;
justify-content: center;
font-size: 40px;
position: relative;
}
.task-tag {
position: absolute;
top: 8px;
left: 8px;
padding: 3px 8px;
border-radius: 8px;
font-size: 10px;
color: #fff;
}
.task-info {
padding: 10px;
}
.task-name {
font-size: 14px;
font-weight: 500;
margin-bottom: 4px;
color: var(--text-primary);
}
.task-location {
font-size: 11px;
color: var(--text-secondary);
margin-bottom: 6px;
}
.task-reward {
font-size: 13px;
color: var(--accent);
font-weight: 500;
}
/* 活动卡片 */
.activity-card {
background: #fff;
border-radius: 10px;
overflow: hidden;
display: flex;
margin-bottom: 10px;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.activity-image {
width: 120px;
height: 90px;
background: linear-gradient(135deg, #fff3e0, #ffe0b2);
display: flex;
align-items: center;
justify-content: center;
font-size: 36px;
flex-shrink: 0;
}
.activity-info {
padding: 10px;
flex: 1;
display: flex;
flex-direction: column;
}
.activity-tags {
display: flex;
gap: 5px;
margin-bottom: 4px;
}
.tag {
padding: 2px 6px;
border-radius: 4px;
font-size: 10px;
}
.tag-hot {
background: rgba(255, 77, 79, 0.1);
color: var(--error);
}
.tag-book {
background: rgba(212, 168, 75, 0.15);
color: var(--accent);
}
.activity-name {
font-size: 14px;
font-weight: 500;
color: var(--text-primary);
}
.activity-desc {
font-size: 11px;
color: var(--text-secondary);
flex: 1;
}
.activity-bottom {
display: flex;
justify-content: space-between;
align-items: center;
}
.activity-time {
font-size: 11px;
color: var(--text-light);
}
.activity-price {
font-size: 14px;
font-weight: 500;
color: var(--error);
}
.activity-price.free {
color: var(--success);
}
/* ========== 数字护照页面 ========== */
.passport-header {
height: 180px;
background: linear-gradient(135deg, #2D5A3D, #4A7C5B);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #fff;
position: relative;
}
.passport-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.role-avatar {
width: 80px;
height: 80px;
background: rgba(255,255,255,0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 40px;
margin-bottom: 10px;
border: 3px solid rgba(255,255,255,0.3);
}
.role-name {
font-size: 20px;
font-weight: 600;
margin-bottom: 4px;
}
.passport-id {
font-size: 13px;
opacity: 0.8;
}
/* 统计卡片 */
.stats-card {
background: #fff;
margin: -30px 12px 12px;
border-radius: 12px;
padding: 20px;
position: relative;
z-index: 10;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.stats-row {
display: flex;
justify-content: space-around;
margin-bottom: 15px;
}
.stat-item {
text-align: center;
}
.stat-value {
font-size: 24px;
font-weight: 700;
color: var(--primary);
}
.stat-label {
font-size: 12px;
color: var(--text-secondary);
}
.level-info {
border-top: 1px solid var(--border);
padding-top: 15px;
}
.level-label {
font-size: 13px;
color: var(--text-secondary);
margin-bottom: 8px;
}
.level-name {
color: var(--accent);
font-weight: 600;
}
.progress-bar {
height: 6px;
background: var(--border);
border-radius: 3px;
overflow: hidden;
margin-bottom: 6px;
}
.progress-inner {
height: 100%;
background: linear-gradient(90deg, var(--primary), var(--primary-light));
border-radius: 3px;
width: 65%;
}
.progress-text {
font-size: 11px;
color: var(--text-light);
}
/* 勋章区域 */
.badges-section {
background: #fff;
margin: 0 12px 12px;
border-radius: 12px;
padding: 15px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.badges-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px;
margin-top: 10px;
}
.badge-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
}
.badge-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #fff9e6, #fff3cd);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
box-shadow: 0 2px 8px rgba(212,168,75,0.2);
}
.badge-icon.locked {
background: var(--border);
opacity: 0.5;
}
.badge-name {
font-size: 10px;
color: var(--text-secondary);
text-align: center;
}
/* ========== 任务页面 ========== */
.role-tabs {
display: flex;
gap: 8px;
padding: 12px;
overflow-x: auto;
background: #fff;
}
.role-tabs::-webkit-scrollbar {
display: none;
}
.role-tab {
flex-shrink: 0;
padding: 8px 16px;
border-radius: 20px;
font-size: 13px;
background: var(--bg);
color: var(--text-secondary);
border: 1px solid transparent;
}
.role-tab.active {
background: rgba(45,90,61,0.1);
color: var(--primary);
border-color: var(--primary);
}
.task-stats {
display: flex;
justify-content: space-around;
background: #fff;
margin: 12px;
padding: 15px;
border-radius: 12px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.task-stat {
text-align: center;
}
.task-stat-num {
font-size: 22px;
font-weight: 700;
color: var(--text-primary);
}
.task-stat-num.primary {
color: var(--primary);
}
.task-stat-num.accent {
color: var(--accent);
}
.task-stat-label {
font-size: 11px;
color: var(--text-secondary);
}
/* 任务组 */
.task-group {
margin: 0 12px 15px;
}
.group-header {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 0;
border-left: 3px solid var(--primary);
padding-left: 10px;
margin-bottom: 10px;
}
.group-icon {
font-size: 18px;
}
.group-name {
font-size: 15px;
font-weight: 600;
flex: 1;
}
.group-count {
font-size: 12px;
color: var(--text-light);
}
.task-item {
background: #fff;
border-radius: 10px;
padding: 12px;
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.task-status {
width: 22px;
height: 22px;
border: 2px solid var(--primary);
border-radius: 50%;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.task-status.done {
background: var(--primary);
color: #fff;
font-size: 12px;
}
.task-content {
flex: 1;
}
.task-item-name {
font-size: 14px;
font-weight: 500;
margin-bottom: 4px;
}
.task-item-location {
font-size: 11px;
color: var(--text-secondary);
}
.task-points {
font-size: 14px;
font-weight: 600;
color: var(--accent);
}
/* 扫码按钮 */
.scan-btn {
position: fixed;
bottom: 70px;
right: 20px;
width: 56px;
height: 56px;
background: linear-gradient(135deg, var(--primary), var(--primary-light));
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #fff;
box-shadow: 0 4px 15px rgba(45,90,61,0.4);
font-size: 20px;
}
.scan-btn span {
font-size: 9px;
margin-top: 2px;
}
/* ========== 商城页面 ========== */
.points-header {
background: linear-gradient(135deg, var(--primary), var(--primary-light));
padding: 30px 15px;
color: #fff;
text-align: center;
}
.points-label {
font-size: 13px;
opacity: 0.85;
}
.points-value {
font-size: 42px;
font-weight: 700;
margin: 5px 0 15px;
}
.points-actions {
display: flex;
justify-content: center;
gap: 20px;
}
.points-action {
padding: 6px 16px;
background: rgba(255,255,255,0.2);
border-radius: 15px;
font-size: 12px;
}
/* 商品分类 */
.category-tabs {
display: flex;
gap: 8px;
padding: 12px;
background: #fff;
}
.category-tab {
padding: 8px 16px;
border-radius: 20px;
font-size: 13px;
background: var(--bg);
color: var(--text-secondary);
}
.category-tab.active {
background: var(--primary);
color: #fff;
}
/* 商品列表 */
.goods-list {
padding: 12px;
}
.goods-item {
background: #fff;
border-radius: 12px;
overflow: hidden;
margin-bottom: 12px;
display: flex;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.goods-image {
width: 100px;
height: 100px;
background: linear-gradient(135deg, #e3f2fd, #bbdefb);
display: flex;
align-items: center;
justify-content: center;
font-size: 40px;
flex-shrink: 0;
}
.goods-info {
padding: 12px;
flex: 1;
display: flex;
flex-direction: column;
}
.goods-name {
font-size: 14px;
font-weight: 500;
margin-bottom: 4px;
}
.goods-desc {
font-size: 11px;
color: var(--text-secondary);
flex: 1;
}
.goods-bottom {
display: flex;
justify-content: space-between;
align-items: center;
}
.goods-price {
font-size: 16px;
font-weight: 700;
color: var(--accent);
}
.goods-price span {
font-size: 11px;
font-weight: 400;
color: var(--text-light);
}
.exchange-btn {
padding: 6px 14px;
background: var(--primary);
color: #fff;
border-radius: 15px;
font-size: 12px;
}
/* ========== 个人中心页面 ========== */
.profile-header {
background: linear-gradient(135deg, var(--primary), var(--primary-light));
padding: 40px 15px 30px;
display: flex;
align-items: center;
color: #fff;
}
.avatar {
width: 70px;
height: 70px;
background: rgba(255,255,255,0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
margin-right: 15px;
border: 3px solid rgba(255,255,255,0.3);
}
.user-detail {
flex: 1;
}
.user-name {
font-size: 20px;
font-weight: 600;
margin-bottom: 6px;
}
.user-level {
display: inline-block;
padding: 3px 10px;
background: var(--accent);
border-radius: 10px;
font-size: 11px;
}
.user-role-badge {
display: flex;
align-items: center;
gap: 5px;
padding: 5px 10px;
background: rgba(255,255,255,0.2);
border-radius: 15px;
font-size: 12px;
}
.profile-stats {
display: flex;
justify-content: space-around;
background: #fff;
margin: -20px 12px 12px;
border-radius: 12px;
padding: 20px;
position: relative;
z-index: 10;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.profile-stat {
text-align: center;
}
.profile-stat-value {
font-size: 22px;
font-weight: 700;
color: var(--primary);
}
.profile-stat-label {
font-size: 11px;
color: var(--text-secondary);
}
/* 服务网格 */
.service-card {
background: #fff;
margin: 0 12px 12px;
border-radius: 12px;
padding: 15px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.service-title {
font-size: 15px;
font-weight: 600;
margin-bottom: 15px;
}
.service-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px;
}
.service-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.service-icon {
width: 44px;
height: 44px;
background: rgba(45,90,61,0.08);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
.service-name {
font-size: 11px;
color: var(--text-secondary);
}
/* 菜单列表 */
.menu-list {
background: #fff;
margin: 0 12px 12px;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.menu-item {
display: flex;
align-items: center;
padding: 15px;
border-bottom: 1px solid var(--border);
}
.menu-item:last-child {
border-bottom: none;
}
.menu-icon {
margin-right: 12px;
font-size: 18px;
}
.menu-name {
flex: 1;
font-size: 14px;
}
.menu-arrow {
color: var(--text-light);
}
/* ========== 打卡页面 ========== */
.checkin-spot {
height: 200px;
background: linear-gradient(135deg, #4A7C5B, #2D5A3D);
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 20px;
color: #fff;
}
.checkin-spot::before {
content: '📸';
font-size: 120px;
position: absolute;
right: -20px;
top: -20px;
opacity: 0.1;
}
.spot-name {
font-size: 22px;
font-weight: 600;
margin-bottom: 5px;
}
.spot-desc {
font-size: 13px;
opacity: 0.85;
margin-bottom: 8px;
}
.spot-count {
font-size: 12px;
opacity: 0.7;
}
.checkin-form {
margin: 12px;
}
.form-card {
background: #fff;
border-radius: 12px;
padding: 15px;
margin-bottom: 12px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.form-title {
font-size: 15px;
font-weight: 600;
margin-bottom: 15px;
}
.photo-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.photo-item, .photo-add {
aspect-ratio: 1;
background: var(--bg);
border-radius: 8px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: 2px dashed var(--border);
color: var(--text-light);
}
.photo-add-icon {
font-size: 24px;
margin-bottom: 4px;
}
.photo-add-text {
font-size: 11px;
}
.photo-item.filled {
border: none;
background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
font-size: 30px;
}
.textarea-wrap {
background: var(--bg);
border-radius: 8px;
padding: 12px;
margin-top: 15px;
}
.textarea-placeholder {
font-size: 13px;
color: var(--text-light);
}
.word-count {
text-align: right;
font-size: 11px;
color: var(--text-light);
margin-top: 8px;
}
.location-bar {
display: flex;
align-items: center;
background: var(--bg);
border-radius: 8px;
padding: 12px;
margin-top: 15px;
font-size: 13px;
color: var(--text-secondary);
}
.location-icon {
margin-right: 8px;
}
.submit-btn {
background: linear-gradient(135deg, var(--primary), var(--primary-light));
color: #fff;
border: none;
border-radius: 25px;
padding: 15px;
width: 100%;
font-size: 16px;
font-weight: 600;
margin-top: 20px;
}
/* 页面切换动画 */
.page {
display: none;
}
.page.active {
display: block;
animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* 交互说明 */
.instructions {
margin-top: 40px;
text-align: center;
color: rgba(255,255,255,0.6);
font-size: 14px;
max-width: 600px;
}
.instructions h3 {
color: var(--accent);
margin-bottom: 15px;
font-size: 18px;
}
.feature-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin-top: 15px;
}
.feature-tag {
padding: 6px 14px;
background: rgba(255,255,255,0.1);
border-radius: 20px;
font-size: 13px;
}
</style>
</head>
<body>
<h1>云上林水寨</h1>
<p class="subtitle">微信小程序界面预览 · 点击底部导航栏切换页面</p>
<div class="preview-container">
<!-- 手机1: 主要页面 -->
<div class="phone-wrapper">
<div class="phone-label">主界面预览</div>
<div class="phone-frame">
<div class="phone-screen">
<div class="status-bar">
<span>9:41</span>
<div class="status-icons">
<span>📶</span>
<span>🔋</span>
</div>
</div>
<div class="nav-bar">云上林水寨</div>
<div class="page-content" id="pageContent1">
<!-- 首页 -->
<div class="page active" id="page-home">
<div class="banner">
<div class="search-bar">搜索景点、活动、任务...</div>
<div class="banner-title">不止是旅行，更是另一种生活</div>
<div class="dots">
<div class="dot active"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
<div class="passport-entry">
<div class="passport-icon">🌿</div>
<div class="passport-info">
<div class="passport-title">开启你的田园人生</div>
<div class="passport-subtitle">选择角色，获取专属数字护照</div>
</div>
<div class="passport-arrow">›</div>
</div>
<div class="quick-actions">
<div class="action-item">
<div class="action-icon" style="background: rgba(45,90,61,0.1)">📷</div>
<div class="action-name">扫码打卡</div>
</div>
<div class="action-item">
<div class="action-icon" style="background: rgba(139,115,85,0.1)">🗺️</div>
<div class="action-name">景区地图</div>
</div>
<div class="action-item">
<div class="action-icon" style="background: rgba(212,168,75,0.1)">📅</div>
<div class="action-name">活动预约</div>
</div>
<div class="action-item">
<div class="action-icon" style="background: rgba(91,138,154,0.1)">🔮</div>
<div class="action-name">AR导览</div>
</div>
<div class="action-item">
<div class="action-icon" style="background: rgba(45,90,61,0.1)">🛤️</div>
<div class="action-name">推荐路线</div>
</div>
<div class="action-item">
<div class="action-icon" style="background: rgba(139,115,85,0.1)">🌤️</div>
<div class="action-name">天气预报</div>
</div>
<div class="action-item">
<div class="action-icon" style="background: rgba(212,168,75,0.1)">🎧</div>
<div class="action-name">游客服务</div>
</div>
<div class="action-item">
<div class="action-icon" style="background: rgba(91,138,154,0.1)">💌</div>
<div class="action-name">邀请好友</div>
</div>
</div>
<div class="section">
<div class="section-header">
<div class="section-title">今日任务</div>
<div class="section-more">查看全部 ›</div>
</div>
<div class="task-scroll">
<div class="task-card">
<div class="task-image">
🐟
<div class="task-tag" style="background: #4A7C5B">自然探客</div>
</div>
<div class="task-info">
<div class="task-name">稻鱼共生探秘</div>
<div class="task-location">📍 稻鱼共生区</div>
<div class="task-reward">+20积分</div>
</div>
</div>
<div class="task-card">
<div class="task-image">
🏺
<div class="task-tag" style="background: #8B7355">匠心农人</div>
</div>
<div class="task-info">
<div class="task-name">陶艺大师体验</div>
<div class="task-location">📍 手工陶体验基地</div>
<div class="task-reward">+30积分 🏅</div>
</div>
</div>
<div class="task-card">
<div class="task-image">
🎣
<div class="task-tag" style="background: #D4A84B">田园美食家</div>
</div>
<div class="task-info">
<div class="task-name">稻花鱼捕捞</div>
<div class="task-location">📍 鱼稻共生区</div>
<div class="task-reward">+40积分 🏅</div>
</div>
</div>
</div>
</div>
<div class="section">
<div class="section-header">
<div class="section-title">热门活动</div>
<div class="section-more">更多活动 ›</div>
</div>
<div class="activity-card">
<div class="activity-image">🎨</div>
<div class="activity-info">
<div class="activity-tags">
<span class="tag tag-hot">热门</span>
<span class="tag tag-book">需预约</span>
</div>
<div class="activity-name">非遗大师专场·陶艺体验</div>
<div class="activity-desc">省级非遗传承人现场示范教学</div>
<div class="activity-bottom">
<div class="activity-time">⏰ 10:00/13:00/15:00</div>
<div class="activity-price">¥68</div>
</div>
</div>
</div>
<div class="activity-card">
<div class="activity-image">🎸</div>
<div class="activity-info">
<div class="activity-tags">
<span class="tag tag-hot">热门</span>
</div>
<div class="activity-name">稻田晚风音乐会</div>
<div class="activity-desc">在星空下聆听民谣，享受慢时光</div>
<div class="activity-bottom">
<div class="activity-time">⏰ 每日 19:00-21:00</div>
<div class="activity-price free">免费</div>
</div>
</div>
</div>
</div>
<div style="height: 60px;"></div>
</div>
<!-- 数字护照 -->
<div class="page" id="page-passport">
<div class="passport-header">
<div class="role-avatar">🌿</div>
<div class="role-name">自然探客</div>
<div class="passport-id">NO. LSZ20241128001</div>
</div>
<div class="stats-card">
<div class="stats-row">
<div class="stat-item">
<div class="stat-value">320</div>
<div class="stat-label">积分</div>
</div>
<div class="stat-item">
<div class="stat-value">5</div>
<div class="stat-label">勋章</div>
</div>
<div class="stat-item">
<div class="stat-value">8</div>
<div class="stat-label">已完成任务</div>
</div>
</div>
<div class="level-info">
<div class="level-label">当前等级：<span class="level-name">林间新客</span></div>
<div class="progress-bar">
<div class="progress-inner"></div>
</div>
<div class="progress-text">距下一等级还需 180 积分</div>
</div>
</div>
<div class="badges-section">
<div class="section-header">
<div class="section-title">我的勋章</div>
<div class="section-more">5/12</div>
</div>
<div class="badges-grid">
<div class="badge-item">
<div class="badge-icon">🌱</div>
<div class="badge-name">初入田园</div>
</div>
<div class="badge-item">
<div class="badge-icon">🐟</div>
<div class="badge-name">稻鱼知音</div>
</div>
<div class="badge-item">
<div class="badge-icon">🏺</div>
<div class="badge-name">匠心章</div>
</div>
<div class="badge-item">
<div class="badge-icon">📸</div>
<div class="badge-name">打卡达人</div>
</div>
<div class="badge-item">
<div class="badge-icon">🍵</div>
<div class="badge-name">茶隐居士</div>
</div>
<div class="badge-item">
<div class="badge-icon locked">❓</div>
<div class="badge-name">待解锁</div>
</div>
<div class="badge-item">
<div class="badge-icon locked">❓</div>
<div class="badge-name">待解锁</div>
</div>
<div class="badge-item">
<div class="badge-icon locked">❓</div>
<div class="badge-name">待解锁</div>
</div>
</div>
</div>
<div style="height: 60px;"></div>
</div>
<!-- 任务页面 -->
<div class="page" id="page-tasks">
<div class="role-tabs">
<div class="role-tab active">全部任务</div>
<div class="role-tab">🌿 自然探客</div>
<div class="role-tab">🏺 匠心农人</div>
<div class="role-tab">🍜 田园美食家</div>
<div class="role-tab">☁️ 云间隐士</div>
</div>
<div class="task-stats">
<div class="task-stat">
<div class="task-stat-num">16</div>
<div class="task-stat-label">全部任务</div>
</div>
<div class="task-stat">
<div class="task-stat-num primary">8</div>
<div class="task-stat-label">已完成</div>
</div>
<div class="task-stat">
<div class="task-stat-num accent">240</div>
<div class="task-stat-label">可获积分</div>
</div>
</div>
<div class="task-group">
<div class="group-header" style="border-color: #4A7C5B">
<span class="group-icon">🌿</span>
<span class="group-name">自然探客</span>
<span class="group-count">3/4</span>
</div>
<div class="task-item">
<div class="task-status done">✓</div>
<div class="task-content">
<div class="task-item-name">稻鱼共生探秘</div>
<div class="task-item-location">📍 稻鱼共生区</div>
</div>
<div class="task-points">+20</div>
</div>
<div class="task-item">
<div class="task-status done">✓</div>
<div class="task-content">
<div class="task-item-name">观鸟寻踪</div>
<div class="task-item-location">📍 白鹭洲</div>
</div>
<div class="task-points">+25</div>
</div>
<div class="task-item">
<div class="task-status"></div>
<div class="task-content">
<div class="task-item-name">夜观萤火</div>
<div class="task-item-location">📍 生态长廊</div>
</div>
<div class="task-points">+30</div>
</div>
</div>
<div class="task-group">
<div class="group-header" style="border-color: #8B7355">
<span class="group-icon">🏺</span>
<span class="group-name">匠心农人</span>
<span class="group-count">2/4</span>
</div>
<div class="task-item">
<div class="task-status done">✓</div>
<div class="task-content">
<div class="task-item-name">陶艺大师体验</div>
<div class="task-item-location">📍 手工陶体验基地</div>
</div>
<div class="task-points">+30</div>
</div>
<div class="task-item">
<div class="task-status"></div>
<div class="task-content">
<div class="task-item-name">竹编工艺</div>
<div class="task-item-location">📍 非遗传习所</div>
</div>
<div class="task-points">+35</div>
</div>
</div>
<div class="scan-btn">
📷
<span>打卡</span>
</div>
<div style="height: 80px;"></div>
</div>
<!-- 商城页面 -->
<div class="page" id="page-mall">
<div class="points-header">
<div class="points-label">我的积分</div>
<div class="points-value">320</div>
<div class="points-actions">
<div class="points-action">积分明细</div>
<div class="points-action">我的兑换</div>
</div>
</div>
<div class="category-tabs">
<div class="category-tab active">全部</div>
<div class="category-tab">特产礼盒</div>
<div class="category-tab">手工艺品</div>
<div class="category-tab">体验券</div>
</div>
<div class="goods-list">
<div class="goods-item">
<div class="goods-image">🍚</div>
<div class="goods-info">
<div class="goods-name">林水寨有机大米 2kg</div>
<div class="goods-desc">稻鱼共生 生态种植</div>
<div class="goods-bottom">
<div class="goods-price">200 <span>积分</span></div>
<div class="exchange-btn">兑换</div>
</div>
</div>
</div>
<div class="goods-item">
<div class="goods-image">🏺</div>
<div class="goods-info">
<div class="goods-name">手工陶茶杯</div>
<div class="goods-desc">非遗传承人手作</div>
<div class="goods-bottom">
<div class="goods-price">350 <span>积分</span></div>
<div class="exchange-btn">兑换</div>
</div>
</div>
</div>
<div class="goods-item">
<div class="goods-image">🎫</div>
<div class="goods-info">
<div class="goods-name">陶艺体验券</div>
<div class="goods-desc">价值68元 含材料费</div>
<div class="goods-bottom">
<div class="goods-price">150 <span>积分+¥30</span></div>
<div class="exchange-btn">兑换</div>
</div>
</div>
</div>
<div class="goods-item">
<div class="goods-image">🍵</div>
<div class="goods-info">
<div class="goods-name">雅瑞轩高山茶</div>
<div class="goods-desc">明前春茶 100g</div>
<div class="goods-bottom">
<div class="goods-price">280 <span>积分</span></div>
<div class="exchange-btn">兑换</div>
</div>
</div>
</div>
</div>
<div style="height: 60px;"></div>
</div>
<!-- 个人中心 -->
<div class="page" id="page-profile">
<div class="profile-header">
<div class="avatar">👤</div>
<div class="user-detail">
<div class="user-name">田园旅人</div>
<div class="user-level">林间新客</div>
</div>
<div class="user-role-badge">
<span>🌿</span>
<span>自然探客</span>
</div>
</div>
<div class="profile-stats">
<div class="profile-stat">
<div class="profile-stat-value">320</div>
<div class="profile-stat-label">积分</div>
</div>
<div class="profile-stat">
<div class="profile-stat-value">5</div>
<div class="profile-stat-label">勋章</div>
</div>
<div class="profile-stat">
<div class="profile-stat-value">12</div>
<div class="profile-stat-label">打卡</div>
</div>
<div class="profile-stat">
<div class="profile-stat-value">3</div>
<div class="profile-stat-label">订单</div>
</div>
</div>
<div class="service-card">
<div class="service-title">我的服务</div>
<div class="service-grid">
<div class="service-item">
<div class="service-icon">📅</div>
<div class="service-name">我的预约</div>
</div>
<div class="service-item">
<div class="service-icon">🌾</div>
<div class="service-name">我的认养</div>
</div>
<div class="service-item">
<div class="service-icon">🎫</div>
<div class="service-name">优惠券</div>
</div>
<div class="service-item">
<div class="service-icon">💌</div>
<div class="service-name">邀请好友</div>
</div>
</div>
</div>
<div class="menu-list">
<div class="menu-item">
<span class="menu-icon">📊</span>
<span class="menu-name">积分明细</span>
<span class="menu-arrow">›</span>
</div>
<div class="menu-item">
<span class="menu-icon">💬</span>
<span class="menu-name">意见反馈</span>
<span class="menu-arrow">›</span>
</div>
<div class="menu-item">
<span class="menu-icon">🎧</span>
<span class="menu-name">联系客服</span>
<span class="menu-arrow">›</span>
</div>
<div class="menu-item">
<span class="menu-icon">ℹ️</span>
<span class="menu-name">关于我们</span>
<span class="menu-arrow">›</span>
</div>
<div class="menu-item">
<span class="menu-icon">⚙️</span>
<span class="menu-name">设置</span>
<span class="menu-arrow">›</span>
</div>
</div>
<div style="height: 60px;"></div>
</div>
</div>
<div class="tab-bar" id="tabBar1">
<div class="tab-item active" data-page="home" onclick="switchPage(this, 1)">
<div class="tab-icon">🏠</div>
<span>首页</span>
</div>
<div class="tab-item" data-page="passport" onclick="switchPage(this, 1)">
<div class="tab-icon">📖</div>
<span>数字护照</span>
</div>
<div class="tab-item" data-page="tasks" onclick="switchPage(this, 1)">
<div class="tab-icon">📋</div>
<span>任务</span>
</div>
<div class="tab-item" data-page="mall" onclick="switchPage(this, 1)">
<div class="tab-icon">🛒</div>
<span>商城</span>
</div>
<div class="tab-item" data-page="profile" onclick="switchPage(this, 1)">
<div class="tab-icon">👤</div>
<span>我的</span>
</div>
</div>
</div>
</div>
</div>
<!-- 手机2: 打卡页面 -->
<div class="phone-wrapper">
<div class="phone-label">打卡功能</div>
<div class="phone-frame">
<div class="phone-screen">
<div class="status-bar">
<span>9:41</span>
<div class="status-icons">
<span>📶</span>
<span>🔋</span>
</div>
</div>
<div class="nav-bar">打卡</div>
<div class="page-content">
<div class="checkin-spot">
<div class="spot-name">稻田观景台</div>
<div class="spot-desc">登高望远，尽览田园风光</div>
<div class="spot-count">🔥 3256人已打卡</div>
</div>
<div class="checkin-form">
<div class="form-card">
<div class="task-tag" style="background: #4A7C5B; display: inline-block; margin-bottom: 10px; padding: 4px 10px; border-radius: 12px; color: #fff; font-size: 11px;">自然探客</div>
<div style="font-size: 14px; font-weight: 500; margin-bottom: 5px;">稻鱼共生探秘</div>
<div style="font-size: 12px; color: var(--accent);">完成可得 +20积分</div>
</div>
<div class="form-card">
<div class="form-title">记录你的田园时光</div>
<div class="photo-grid">
<div class="photo-item filled">🌾</div>
<div class="photo-item filled">🏞️</div>
<div class="photo-add">
<div class="photo-add-icon">📷</div>
<div class="photo-add-text">添加照片</div>
</div>
</div>
<div class="textarea-wrap">
<div class="textarea-placeholder">分享你的打卡心得...</div>
</div>
<div class="word-count">0/200</div>
<div class="location-bar">
<span class="location-icon">📍</span>
<span>点击获取位置</span>
</div>
</div>
<div class="form-card">
<div style="font-size: 13px; color: var(--text-secondary); margin-bottom: 10px;">同步分享到</div>
<div style="display: flex; gap: 15px;">
<div style="display: flex; align-items: center; gap: 5px; padding: 8px 12px; background: var(--bg); border-radius: 20px; font-size: 12px;">
<span>💬</span> 朋友圈
</div>
<div style="display: flex; align-items: center; gap: 5px; padding: 8px 12px; background: var(--bg); border-radius: 20px; font-size: 12px;">
<span>🎵</span> 抖音
</div>
<div style="display: flex; align-items: center; gap: 5px; padding: 8px 12px; background: var(--bg); border-radius: 20px; font-size: 12px;">
<span>📕</span> 小红书
</div>
</div>
<div style="display: flex; align-items: center; gap: 5px; margin-top: 12px; font-size: 12px; color: var(--accent);">
<span>🎁</span> 首次分享可额外获得50积分
</div>
</div>
<button class="submit-btn">完成打卡</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="instructions">
<h3>🌿 云上林水寨 · 小程序功能亮点</h3>
<p>一款以"数字护照+角色扮演"为核心的田园文旅小程序</p>
<div class="feature-list">
<span class="feature-tag">🎭 四大角色体系</span>
<span class="feature-tag">📖 数字护照</span>
<span class="feature-tag">📍 景点打卡</span>
<span class="feature-tag">🏅 勋章收集</span>
<span class="feature-tag">📋 任务系统</span>
<span class="feature-tag">🛒 积分商城</span>
<span class="feature-tag">🌾 数字认养</span>
<span class="feature-tag">📅 活动预约</span>
</div>
</div>
<script>
function switchPage(el, phoneIndex) {
const pageName = el.dataset.page;
const tabBar = document.getElementById('tabBar' + phoneIndex);
const pageContent = document.getElementById('pageContent' + phoneIndex);
// 切换tab状态
tabBar.querySelectorAll('.tab-item').forEach(tab => tab.classList.remove('active'));
el.classList.add('active');
// 切换页面
pageContent.querySelectorAll('.page').forEach(page => page.classList.remove('active'));
document.getElementById('page-' + pageName).classList.add('active');
// 滚动到顶部
pageContent.scrollTop = 0;
}
</script>
</body>
</html>
index.html
index.html