携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第26天，点击查看活动详情
通过 vue-cli 脚手架工具，初始化项目，命名为 moviepro
- 在 components 目录下创建 Header.vue 组件、HotMovie.vue 组件、DetailMovie.vue 组件、
MoreComingList.vue 组件
-
将 images 文件夹（提供）放到 assets 目录下
-
创建 store 文件夹，在 store 文件夹下创建 index.js 用于存储电影数据
通过 vue-router 完成路由的配置，配置规则即当 path 为“ /”
匹配 HotMovie.vue 组件，为“ /movie/:movieId”
匹配 DetailMovie.vue 组件
电影数据管理
-
使用 npm 安装 vuex 库
-
创建 store 文件夹，在 store 下创建 index.js 引入 vuex，将提供的数据加到 state 中
一。Header组件
<template>
<div class="header">
<ul>
<li>
<img src="../../public/images/logo.png" alt="" />
</li>
<li>
<input type="text" placeholder="请输入电影名" />
</li>
</ul>
</div>
</template>
<script>
export default {};
</script>
<style scoped lang="scss">
.header {
width: 100vw;
background: #e5e9f2;
display: flex;
ul {
display: flex;
width: 100vw;
justify-content: space-between;
align-items: center;
padding: 0 10px;
li {
input {
border: none;
background: white;
height: 40px;
border-radius: 13px;
}
}
}
}
</style>
二. MoreComingList组件
编写近期最受期待 MoreComingList.vue 组件，使用 HTML+CSS 进行页面布局，页面整体布局如下图所
示：
设置整体背景颜色为#fff，设置 overflow 为 scroll，可以横向拖动
- 通过 div 布局每个电影，设置 display 属性为 inline-block，间距 10px。电影图片高度为 115px，
宽度为 85px，XXX 人想看通过 position 定位属性实现，文字颜色为#faaf00
3）电影列表数据从 vuex 中进行获取，配合 v-for 指令完成渲染展示
<template>
<div class="more">
<div class="div">近期最受期待</div>
<ul>
<li v-for="(item, index) in moreComingLists.movieList" :key="item.id">
<div>
<img :src="item.img" alt="" />
<p>
<span> {{ item.wish }}人想看</span>
</p>
</div>
<div>
{{ item.nm }}
</div>
<div>
{{ item.rt }}
</div>
</li>
</ul>
</div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
computed: {
...mapGetters(["moreComingLists"]),
},
};
</script>
<style scoped lang="scss">
.more {
background: #fff;
.div {
height: 40px;
line-height: 40px;
margin-left: 10px;
}
ul {
width: 100vw;
display: flex;
overflow-x: scroll;
li {
width: 27vw;
margin-left: 10px;
div {
width: 27vw;
font-size: 14px;
position: relative;
img {
width: 27vw;
height: 40vw;
}
p {
position: absolute;
bottom: 10px;
text-align: center;
span {
color: #faaf00;
}
}
}
}
}
}
</style>
三.HotMovie.vue组件
<template>
<div class="hotmovie">
<h3>正在热映</h3>
<MoreComingList />
<ul>
<li v-for="(item, index) in movieList" :key="item.id">
<div >
<router-link :to="`/move/${item.id}`"> <img :src="item.img" alt="" /></router-link>
</div>
<div>
<p>
{{ item.nm }}
</p>
<p>
{{ item.version }}
</p>
<p>
{{ item.star }}
</p>
<p>
{{ item.rt }}
</p>
</div>
</li>
</ul>
<router-view></router-view>
</div>
</template>
<script>
import { mapGetters } from "vuex";
import MoreComingList from "./MoreComingList.vue";
export default {
components: { MoreComingList },
computed: {
...mapGetters(["movieList"]),
},
};
</script>
<style scoped lang="scss">
.hotmovie {
h3 {
width: 100vw;
color: white;
text-align: center;
background: #df2d2d;
}
ul {
width: 100vw;
background: #fff;
margin-top: 10px;
li {
display: flex;
margin: 0 10px;
border-bottom: 1px solid #ccc;
div:nth-of-type(1) {
width: 30vw;
margin-top: 20px;
height: 45vw;
margin-bottom: 10px;
img {
width: 30vw;
height: 45vw;
}
}
div:nth-of-type(2) {
margin-top: 20px;
flex: 1;
height: 45vw;
display: flex;
flex-direction: column;
justify-content: space-around;
p {
margin-left: 20px;
}
p:nth-of-type(1) {
color: #525288;
}
p:not(:nth-of-type(1)) {
color: #7a7374;
}
}
}
}
}
</style>
四。Detail组件
<template>
<div class="movie">
<ul>
<li>
<div>
<img :src="detailmovies.img" alt="" />
</div>
<div>
<p>
{{ detailmovies.nm }}
</p>
<p>
{{ detailmovies.enm }}
</p>
<p>
{{ detailmovies.cat }}
</p>
<p>
{{ detailmovies.ver }}
</p>
<p>
{{ detailmovies.star }}
</p>
<p>{{ detailmovies.pubDesc }}/{{ detailmovies.dur }}分钟</p>
<p>></p>
</div>
</li>
<li>简介</li>
<li>
{{ detailmovies.dra }}
</li>
</ul>
</div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
data() {
return {
detailmovies: {},
};
},
computed: {
paramsId() {
return this.$route.params.moveId;
},
...mapGetters(["detailmovie"]),
},
mounted() {
this.detailmovies = this.detailmovie.find((r) => r.id == this.paramsId);
},
};
</script>
<style scoped lang="scss">
.movie {
background: #662929;
ul {
padding: 15px 10px 0 10px;
li:nth-of-type(1) {
display: flex;
div {
height: 45vw;
img {
width: 30vw;
height: 45vw;
}
}
div:nth-of-type(2) {
display: flex;
margin-left: 10px;
flex-direction: column;
height: 45vw;
justify-content: space-between;
p:not(:nth-of-type(1)) {
color: #7a7374;
font-size: 14px;
}
p:nth-of-type(1) {
color: white;
font-size: 18px;
}
}
}
li:nth-of-type(2) {
margin: 5px 0 15px 0;
color: white;
font-size: 14px;
}
li:nth-of-type(3) {
color: white;
font-size: 14px;
}
}
}
</style>
