445 lines
10 KiB
Vue
445 lines
10 KiB
Vue
|
<template>
|
|||
|
|
<div class="home-view">
|
|||
|
|
<!-- 1. Top Status Bar -->
|
|||
|
|
<header class="top-bar">
|
|||
|
|
<div class="greeting">晚上好, 王女士</div>
|
|||
|
|
<div class="message-icon" @click="goToMessages">
|
|||
|
|
<img src="@/assets/message-icon.svg" alt="Messages" />
|
|||
|
|
</div>
|
|||
|
|
</header>
|
|||
|
|
|
|||
|
|
<!-- Search Bar Section -->
|
|||
|
|
<section class="search-section" @click="() => goToSearch()">
|
|||
|
|
<div class="search-bar-container">
|
|||
|
|
<input type="text" placeholder="疾病 / 症状 / 药品 / 问题" readonly>
|
|||
|
|
<div class="separator"></div>
|
|||
|
|
<div class="search-button">搜索</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- Hot Searches Section -->
|
|||
|
|
<section class="hot-searches-section">
|
|||
|
|
<span v-for="term in hotSearches" :key="term" class="hot-search-tag" @click.stop="goToSearch(term)">
|
|||
|
|
{{ term }}
|
|||
|
|
</span>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- Banner Section -->
|
|||
|
|
<section class="banner-section">
|
|||
|
|
<div class="banner-wrapper" :style="bannerStyle">
|
|||
|
|
<div v-for="item in bannerItems" :key="item.id" class="banner-slide">
|
|||
|
|
<img :src="item.imageUrl" :alt="item.alt" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="banner-dots">
|
|||
|
|
<span v-for="(item, index) in bannerItems" :key="item.id"
|
|||
|
|
:class="{ active: index === currentIndex }"
|
|||
|
|
@click="goToSlide(index)"></span>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- 2. Hero Section -->
|
|||
|
|
<main class="hero-section">
|
|||
|
|
<div class="scan-cta" @click="goToScan">
|
|||
|
|
<div class="scan-icon">📷</div>
|
|||
|
|
<span>扫码/拍照</span>
|
|||
|
|
</div>
|
|||
|
|
</main>
|
|||
|
|
|
|||
|
|
<!-- 3. Health Dashboard -->
|
|||
|
|
<section class="health-dashboard">
|
|||
|
|
<div class="dashboard-item nutrition-tracker">
|
|||
|
|
<h4>每日营养</h4>
|
|||
|
|
<div class="nutrition-details">
|
|||
|
|
<span>蛋白: {{ healthDashboardData.nutrition.protein }}/{{ healthDashboardData.nutrition.proteinGoal }}g</span>
|
|||
|
|
<span>脂肪: {{ healthDashboardData.nutrition.fat }}/{{ healthDashboardData.nutrition.fatGoal }}g</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="dashboard-item calorie-tracker">
|
|||
|
|
<h4>热量记录</h4>
|
|||
|
|
<div class="progress-bar">
|
|||
|
|
<div class="progress" :style="{ width: healthDashboardData.calories.progress + '%' }"></div>
|
|||
|
|
</div>
|
|||
|
|
<span>{{ healthDashboardData.calories.current }}/{{ healthDashboardData.calories.goal }} kcal</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="dashboard-item water-tracker">
|
|||
|
|
<h4>喝水记录</h4>
|
|||
|
|
<div class="water-icons">
|
|||
|
|
<span v-for="i in 8" :key="i" :class="{ filled: i <= healthDashboardData.water.cups }">💧</span>
|
|||
|
|
</div>
|
|||
|
|
<span>{{ healthDashboardData.water.current }}/{{ healthDashboardData.water.goal }} ml</span>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- 4. Content Feed -->
|
|||
|
|
<section class="feed-section">
|
|||
|
|
<div v-for="item in feedItems" :key="item.id" class="feed-card" @click="goTo(item.link)">
|
|||
|
|
<div v-if="item.type === 'discover'" class="discover-card">
|
|||
|
|
<div class="card-content">
|
|||
|
|
<span class="card-tag">发现</span>
|
|||
|
|
<h3>{{ item.title }}</h3>
|
|||
|
|
<p>{{ item.summary }}</p>
|
|||
|
|
</div>
|
|||
|
|
<img :src="item.imageUrl" :alt="item.title" class="card-image">
|
|||
|
|
</div>
|
|||
|
|
<div v-if="item.type === 'recipe'" class="recipe-card">
|
|||
|
|
<img :src="item.imageUrl" :alt="item.title" class="card-image-full">
|
|||
|
|
<div class="card-overlay">
|
|||
|
|
<span class="card-tag">为你推荐的菜谱</span>
|
|||
|
|
<h3>{{ item.title }}</h3>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup lang="ts">
|
|||
|
|
import { ref, computed, onMounted, onUnmounted } from 'vue';
|
|||
|
|
import { useRouter } from 'vue-router';
|
|||
|
|
|
|||
|
|
const bannerItems = ref([
|
|||
|
|
{ id: 1, imageUrl: 'https://images.unsplash.com/photo-1546069901-ba9599a7e63c?q=80&w=2080&auto=format&fit=crop', alt: 'Healthy Salad' },
|
|||
|
|
{ id: 2, imageUrl: 'https://images.unsplash.com/photo-1540189549336-e6e99c3679fe?q=80&w=1887&auto=format&fit=crop', alt: 'Fresh Berries' },
|
|||
|
|
{ id: 3, imageUrl: 'https://images.unsplash.com/photo-1482049016688-2d3e1b311543?q=80&w=1910&auto=format&fit=crop', alt: 'Avocado Toast' },
|
|||
|
|
]);
|
|||
|
|
const currentIndex = ref(0);
|
|||
|
|
let intervalId: number;
|
|||
|
|
|
|||
|
|
const hotSearches = ref(['无糖酸奶', '酱油', '儿童零食', '高钙牛奶']);
|
|||
|
|
|
|||
|
|
const healthDashboardData = ref({
|
|||
|
|
nutrition: { protein: 30, proteinGoal: 60, fat: 20, fatGoal: 50 },
|
|||
|
|
calories: { current: 800, goal: 1800, progress: computed(() => (800 / 1800) * 100) },
|
|||
|
|
water: { current: 1000, goal: 2000, cups: 4 },
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const feedItems = ref([
|
|||
|
|
{ id: 'd1', type: 'discover', title: "警惕！这5种'儿童酱油'其实是钠含量炸弹", summary: '深度评测10款热门儿童酱油，结果令人震惊...', imageUrl: 'https://images.unsplash.com/photo-1598134493282-85b82454f754?q=80&w=1887&auto=format&fit=crop', link: { name: 'discover' } },
|
|||
|
|
{ id: 'r1', type: 'recipe', title: '适合减脂期的你：牛油果鸡胸肉沙拉', imageUrl: 'https://images.unsplash.com/photo-1505253716362-af78f6d38348?q=80&w=1887&auto=format&fit=crop', link: { name: 'kitchen' } },
|
|||
|
|
]);
|
|||
|
|
|
|||
|
|
const bannerStyle = computed(() => ({
|
|||
|
|
transform: `translateX(-${currentIndex.value * 100}%)`
|
|||
|
|
}));
|
|||
|
|
|
|||
|
|
const goToSlide = (index: number) => {
|
|||
|
|
currentIndex.value = index;
|
|||
|
|
clearInterval(intervalId);
|
|||
|
|
intervalId = window.setInterval(nextSlide, 3000);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const nextSlide = () => {
|
|||
|
|
currentIndex.value = (currentIndex.value + 1) % bannerItems.value.length;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
onMounted(() => {
|
|||
|
|
intervalId = window.setInterval(nextSlide, 3000);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
onUnmounted(() => {
|
|||
|
|
clearInterval(intervalId);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const router = useRouter();
|
|||
|
|
|
|||
|
|
const goToMessages = () => {
|
|||
|
|
router.push({ name: 'messages' });
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const goToScan = () => {
|
|||
|
|
router.push({ name: 'scan' });
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const goToSearch = (query?: string) => {
|
|||
|
|
if (query) {
|
|||
|
|
router.push({ name: 'search', query: { q: query } });
|
|||
|
|
} else {
|
|||
|
|
router.push({ name: 'search' });
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const goTo = (link: object) => {
|
|||
|
|
router.push(link);
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.home-view {
|
|||
|
|
padding: 20px;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
background-color: var(--color-background);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.top-bar {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.search-section {
|
|||
|
|
margin-top: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.search-bar-container {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
background-color: #fff;
|
|||
|
|
border-radius: 25px;
|
|||
|
|
padding: 10px 15px;
|
|||
|
|
border: 1px solid #07C160;
|
|||
|
|
cursor: pointer;
|
|||
|
|
max-width: 90%;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.search-bar-container input {
|
|||
|
|
border: none;
|
|||
|
|
outline: none;
|
|||
|
|
background: transparent;
|
|||
|
|
flex-grow: 1;
|
|||
|
|
width: 0;
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #333;
|
|||
|
|
pointer-events: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.separator {
|
|||
|
|
width: 1px;
|
|||
|
|
height: 16px;
|
|||
|
|
background-color: #e0e0e0;
|
|||
|
|
margin: 0 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.search-button {
|
|||
|
|
color: #07C160;
|
|||
|
|
font-weight: bold;
|
|||
|
|
font-size: 15px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hot-searches-section {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
gap: 10px;
|
|||
|
|
margin-top: 10px;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hot-search-tag {
|
|||
|
|
background-color: #f0f0f0;
|
|||
|
|
color: #555;
|
|||
|
|
padding: 5px 12px;
|
|||
|
|
border-radius: 15px;
|
|||
|
|
font-size: 12px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.banner-section {
|
|||
|
|
width: 100%;
|
|||
|
|
margin-top: 15px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
position: relative;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
}
|
|||
|
|
.banner-wrapper {
|
|||
|
|
display: flex;
|
|||
|
|
transition: transform 0.5s ease-in-out;
|
|||
|
|
}
|
|||
|
|
.banner-slide {
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 150px;
|
|||
|
|
}
|
|||
|
|
.banner-slide img {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
object-fit: cover;
|
|||
|
|
}
|
|||
|
|
.banner-dots {
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 10px;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translateX(-50%);
|
|||
|
|
display: flex;
|
|||
|
|
gap: 8px;
|
|||
|
|
}
|
|||
|
|
.banner-dots span {
|
|||
|
|
width: 8px;
|
|||
|
|
height: 8px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background-color: rgba(255, 255, 255, 0.5);
|
|||
|
|
}
|
|||
|
|
.banner-dots span.active {
|
|||
|
|
background-color: white;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.greeting {
|
|||
|
|
font-size: 18px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.message-icon img {
|
|||
|
|
width: 24px;
|
|||
|
|
height: 24px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hero-section {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
padding: 20px 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.scan-cta {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
width: 160px; /* Adjusted size */
|
|||
|
|
height: 160px; /* Adjusted size */
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background: var(--color-background-soft);
|
|||
|
|
cursor: pointer;
|
|||
|
|
border: 2px solid #07C160;
|
|||
|
|
box-shadow: 0 2px 8px rgba(7, 193, 96, 0.15);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.scan-icon {
|
|||
|
|
font-size: 60px; /* Adjusted icon size */
|
|||
|
|
margin-bottom: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.scan-cta span {
|
|||
|
|
font-size: 16px; /* Adjusted font size */
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.health-dashboard {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
|||
|
|
gap: 15px;
|
|||
|
|
padding: 15px;
|
|||
|
|
background-color: var(--color-background-soft);
|
|||
|
|
border-radius: 12px;
|
|||
|
|
border: 1px solid #e0e0e0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.dashboard-item {
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.dashboard-item h4 {
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #333;
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.nutrition-details {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 5px;
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: #666;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.progress-bar {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 8px;
|
|||
|
|
background-color: #e0e0e0;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
margin-bottom: 5px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.progress {
|
|||
|
|
height: 100%;
|
|||
|
|
background-color: #07C160;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.calorie-tracker span, .water-tracker span {
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: #666;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.water-icons {
|
|||
|
|
font-size: 20px;
|
|||
|
|
margin-bottom: 5px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.water-icons span {
|
|||
|
|
opacity: 0.3;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.water-icons span.filled {
|
|||
|
|
opacity: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.feed-section {
|
|||
|
|
margin-top: 30px;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.feed-card {
|
|||
|
|
border-radius: 12px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
background-color: var(--color-background-soft);
|
|||
|
|
box-shadow: 0 4px 8px rgba(0,0,0,0.05);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.discover-card {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 15px;
|
|||
|
|
gap: 15px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.discover-card .card-content { flex: 1; }
|
|||
|
|
.discover-card .card-image {
|
|||
|
|
width: 80px;
|
|||
|
|
height: 80px;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
object-fit: cover;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.recipe-card { position: relative; color: white; }
|
|||
|
|
.recipe-card .card-image-full {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 180px;
|
|||
|
|
object-fit: cover;
|
|||
|
|
}
|
|||
|
|
.recipe-card .card-overlay {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0; left: 0; right: 0; bottom: 0;
|
|||
|
|
background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 50%);
|
|||
|
|
padding: 15px;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
justify-content: flex-end;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-tag {
|
|||
|
|
background-color: rgba(7, 193, 96, 0.8);
|
|||
|
|
color: white;
|
|||
|
|
padding: 4px 8px;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
font-size: 12px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
align-self: flex-start;
|
|||
|
|
margin-bottom: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
h3 {
|
|||
|
|
font-size: 16px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
margin: 0 0 5px 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.discover-card p {
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: var(--color-text-secondary);
|
|||
|
|
margin: 0;
|
|||
|
|
}
|
|||
|
|
</style>
|