用vue编写一个类淘票票首页
时间: 2023-06-19 15:09:19 浏览: 56
好的,以下是一个简单的类淘票票首页的 Vue 代码:
```
<template>
<div class="home">
<div class="banner">
<img src="./assets/banner.jpg">
</div>
<div class="movies">
<h2>热门电影</h2>
<div class="movie-list">
<div v-for="movie in movies" :key="movie.id" class="movie">
<img :src="movie.poster">
<h3>{{ movie.title }}</h3>
<p>{{ movie.intro }}</p>
<button>购票</button>
</div>
</div>
</div>
<div class="cinemas">
<h2>影院推荐</h2>
<div class="cinema-list">
<div v-for="cinema in cinemas" :key="cinema.id" class="cinema">
<img :src="cinema.poster">
<h3>{{ cinema.name }}</h3>
<p>{{ cinema.address }}</p>
<button>选座购票</button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
movies: [
{
id: 1,
title: '流浪地球',
intro: '改编自刘慈欣的同名小说,讲述了太阳即将毁灭,人类开始寻找新家园的故事。',
poster: './assets/movie1.jpg'
},
{
id: 2,
title: '复仇者联盟4:终局之战',
intro: '漫威超级英雄集结,与灭霸展开最终决战。',
poster: './assets/movie2.jpg'
},
{
id: 3,
title: '少年的你',
intro: '讲述了一个校园霸凌故事,引起了社会的广泛关注。',
poster: './assets/movie3.jpg'
}
],
cinemas: [
{
id: 1,
name: '万达影城',
address: 'XX区XX街道XX号',
poster: './assets/cinema1.jpg'
},
{
id: 2,
name: '星美国际影城',
address: 'XX区XX街道XX号',
poster: './assets/cinema2.jpg'
},
{
id: 3,
name: 'UME国际影城',
address: 'XX区XX街道XX号',
poster: './assets/cinema3.jpg'
}
]
}
}
}
</script>
<style>
/* 样式根据需求自行调整 */
.home {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.banner {
margin-bottom: 20px;
}
.movies, .cinemas {
margin-bottom: 40px;
}
.movie-list, .cinema-list {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.movie, .cinema {
width: 32%;
margin-bottom: 20px;
border: 1px solid #ddd;
padding: 10px;
text-align: center;
}
.movie img, .cinema img {
width: 100%;
margin-bottom: 10px;
}
.movie h3, .cinema h3 {
font-size: 16px;
margin-bottom: 10px;
}
.movie p, .cinema p {
font-size: 14px;
color: #999;
margin-bottom: 10px;
}
button {
background-color: #f60;
color: #fff;
border: none;
padding: 10px;
cursor: pointer;
}
</style>
```
这个页面包括了一个顶部的 banner 图片、热门电影列表和影院推荐列表。你可以根据需求进行代码的修改,添加更多的功能和样式。