Commit d893f899 authored by caoxu's avatar caoxu

Add: 美食卡片增加详情图片

parent 1122a855
Pipeline #510 canceled with stages
......@@ -110,6 +110,7 @@
<div class="food-info">
<h3 class="food-name">{{ food.name }}</h3>
<p class="food-description">{{ food.description }}</p>
<img :src="food.detailImage" :alt="food.name + '详情'" class="food-detail-image" />
<div class="food-meta">
<span class="food-type">{{ food.type }}</span>
<span class="food-price">¥{{ food.price }}</span>
......@@ -268,6 +269,7 @@ const foods = ref([
name: '特色烤鸭',
description: '百年老店,皮脆肉嫩,香气四溢。',
image: 'https://images.unsplash.com/photo-1544025162-d566946569f2?w=400&h=300&fit=crop',
detailImage: 'https://images.unsplash.com/photo-15652995853-8b6c7a1a8d1?w=400&h=200&fit=crop',
type: '传统美食',
price: 88
},
......@@ -276,6 +278,7 @@ const foods = ref([
name: '手工拉面',
description: '劲道爽滑,汤底浓郁,回味无穷。',
image: 'https://images.unsplash.com/photo-1569718212165-3a8278d5f71f?w=400&h=300&fit=crop',
detailImage: 'https://images.unsplash.com/photo-1563379976878-4d5c7a7f8a3?w=400&h=200&fit=crop',
type: '面食',
price: 35
},
......@@ -284,6 +287,7 @@ const foods = ref([
name: '传统糕点',
description: '精致可口,甜而不腻,送礼佳品。',
image: 'https://images.unsplash.com/photo-1509368959836-f7801b4d6c1a?w=400&h=300&fit=crop',
detailImage: 'https://images.unsplash.com/photo-1509368959836-f7801b4d6c1a?w=400&h=200&fit=crop',
type: '甜品',
price: 45
},
......@@ -292,6 +296,7 @@ const foods = ref([
name: '本地海鲜',
description: '新鲜捕捞,烹饪精良,营养丰富。',
image: 'https://images.unsplash.com/photo-1534604973900-85bd99082946?w=400&h=300&fit=crop',
detailImage: 'https://images.unsplash.com/photo-1534604973900-85bd99082946?w=400&h=200&fit=crop',
type: '海鲜',
price: 168
}
......@@ -745,6 +750,14 @@ const sendMessage = (user) => {
line-height: 1.6;
}
.food-detail-image {
width: 100%;
height: 120px;
object-fit: cover;
border-radius: 8px;
margin-bottom: 12px;
}
.food-meta {
display: flex;
justify-content: space-between;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment