<template>
|
<view class="p-4 space-y-6">
|
|
<!-- 美食列表 -->
|
<view v-for="(food, index) in foods" :key="index" class="space-y-2">
|
|
<!-- 编号和名称 -->
|
<view class="text-lg font-semibold text-center">{{ index + 1 }}、{{ food.name }}</view>
|
|
<!-- 图片 -->
|
<view class="px-4">
|
<image
|
:src="food.imgUrl"
|
class="w-full rounded-lg shadow-md object-cover"
|
mode="aspectFill"
|
:style="{ height: (uni.getSystemInfoSync().windowWidth - 32) * 2 / 3 + 'px' }"
|
/>
|
</view>
|
|
<!-- 文字介绍 -->
|
<view class="text-sm leading-relaxed text-justify px-2">
|
{{ food.desc }}
|
</view>
|
</view>
|
|
</view>
|
</template>
|
|
<script>
|
export default {
|
name: 'FoodPage',
|
data() {
|
return {
|
foods: [
|
{
|
name: "热干面",
|
imgUrl: "https://farm.evcc.top/Uploads/yuanboyuan/foods/01.jpg",
|
desc: "热干面是湖北武汉最具代表性的小吃，在全国也都非常有名，其做法简单，是将碱水面烫熟后加入芝麻酱、萝卜丁、香油、味精等佐料，味道十分鲜美，是中国十大最好吃的面条之一。"
|
},
|
{
|
name: "三鲜豆皮",
|
imgUrl: "https://farm.evcc.top/Uploads/yuanboyuan/foods/02.jpg",
|
desc: "三鲜豆皮也是湖北武汉的著名小吃，是当地人“过早”的主要食品，是用糯米和豆皮为主要食材制作的，因馅中有鲜肉、鲜菇和鲜笋三鲜而得名，外色泽金黄，吃起来外脆内软。"
|
},
|
{
|
name: "东坡饼",
|
imgUrl: "https://farm.evcc.top/Uploads/yuanboyuan/foods/03.jpg",
|
desc: "东坡饼也叫空心饼，也是湖北地区的传统美食之一，是为了纪念苏东坡而命名的，东坡饼制作方法简单，外观色泽金黄，吃起来香甜酥脆，老少皆宜，深受人们喜爱。"
|
},
|
{
|
name: "襄阳牛肉面",
|
imgUrl: "https://farm.evcc.top/Uploads/yuanboyuan/foods/04.jpg",
|
desc: "襄阳牛肉面是源自湖北襄阳的特色面食，也是襄阳人最喜欢的早餐，做法非常简单，只要将煮好的面加入熬好的牛肉、牛杂、辣子和其他佐料即可，吃起来十分香辣可口。"
|
},
|
{
|
name: "四季美汤包",
|
imgUrl: "https://farm.evcc.top/Uploads/yuanboyuan/foods/05.jpg",
|
desc: "四季美汤包是湖北武汉的一道美食小吃，汤包的馅非常多样，有鲜肉、蟹黄、虾仁、香菇等等，只要将馅包在薄薄的面皮里，再放在蒸笼中蒸熟即可，皮薄汤多，非常美味。"
|
},
|
{
|
name: "面窝",
|
imgUrl: "https://farm.evcc.top/Uploads/yuanboyuan/foods/06.jpg",
|
desc: "面窝是湖北特有的一种面食小吃，其历史悠久，约创始于清朝光绪年间，是用大米、黄豆混合磨成的米浆放在锅中油炸而成的，外观色泽金黄，吃起来酥脆可口。"
|
},
|
{
|
name: "云梦鱼面",
|
imgUrl: "https://farm.evcc.top/Uploads/yuanboyuan/foods/07.jpg",
|
desc: "云梦鱼面既是湖北省的传统特色名吃，也是湖北省孝感市云梦县的特产，鱼面是使用鲜鱼的鱼肉和上等的面粉、包谷豆粉等食材制作的，可以煮着吃，也可以炒着吃或者炸着吃。"
|
},
|
{
|
name: "精武鸭脖",
|
imgUrl: "https://farm.evcc.top/Uploads/yuanboyuan/foods/08.jpg",
|
desc: "精武鸭脖是湖北武汉的传统小吃之一，因起源于武汉汉口的精武路而得名，是经过当地特殊的方法卤制而成，味道麻辣可口，香味扑鼻，吃后令人回味无穷，念念不忘。"
|
},
|
{
|
name: "竹溪碗糕",
|
imgUrl: "https://farm.evcc.top/Uploads/yuanboyuan/foods/09.jpg",
|
desc: "竹溪碗糕是源自湖北十堰竹溪县的一种风味小吃，距今已有500多年的历史了，碗糕是使用优质白米和黄豆等食材制作的，外观色泽雪白，吃起来甜而不腻。"
|
},
|
{
|
name: "黄石港饼",
|
imgUrl: "https://farm.evcc.top/Uploads/yuanboyuan/foods/10.jpg",
|
desc: "黄石港饼是源自湖北黄石的一道地方传统名点，是用面粉、芝麻、冰糖、糖桂花等十多种原料制作的，外观色泽黄亮，吃起来松酥爽口，老少皆宜。"
|
},
|
]
|
}
|
}
|
}
|
</script>
|
|
<style>
|
/* ===== 布局与容器 ===== */
|
.p-4 {
|
padding: 1rem;
|
}
|
|
.space-y-6 {
|
margin-top: 1.5rem;
|
}
|
|
.space-y-2 {
|
margin-top: 0.5rem;
|
}
|
|
.px-4 {
|
padding-left: 1rem;
|
padding-right: 1rem;
|
}
|
|
.px-2 {
|
padding-left: 0.5rem;
|
padding-right: 0.5rem;
|
}
|
|
/* ===== 文本样式 ===== */
|
.text-lg {
|
font-size: 1.125rem;
|
line-height: 1.75rem;
|
}
|
|
.text-sm {
|
font-size: 0.875rem;
|
line-height: 1.25rem;
|
}
|
|
.font-semibold {
|
font-weight: 600;
|
}
|
|
.text-center {
|
text-align: center;
|
}
|
|
.text-justify {
|
text-align: justify;
|
}
|
|
.leading-relaxed {
|
line-height: 1.625;
|
}
|
|
/* ===== 图片样式 ===== */
|
.w-full {
|
width: 100%;
|
}
|
|
.rounded-lg {
|
border-radius: 0.5rem;
|
}
|
|
.shadow-md {
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
}
|
|
.object-cover {
|
object-fit: cover;
|
}
|
|
</style>
|
