豆瓣电影的首页效果
movie_1.png
豆瓣电影的列表页面
movie_2.png
豆瓣电影的电影内页面效果
movie_3.png
参照以上的三个页面，做出豆瓣电影的首页，列表页面以及电影的详细页面。
工具版本控制
vue @2.8.0
webpack @1.13.1
搭建初始化环境
- vue init webpack movie-dou
- cd movie-dou
- cnpm install
- cnpm run dev
- 启动之后的页面效果
init_1.png
- 初始化的页面目录结果
init_2.png
豆瓣电影首页
1.公用的头部
在 app.vue的文件中添加公用的代码，html 和 css代码
<!-- app.vue -->
<!-- 头部公用部分 -->
<template>
<div id="app">
<!-- header [[-->
<header>
<!-- top-bar [[-->
<div class="bar">
<ul>
<li><a href="#">豆瓣</a></li>
<li><a href="#">读书</a></li>
<li><a href="#">电影</a></li>
<li><a href="#">音乐</a></li>
<li><a href="#">同城</a></li>
<li><a href="#">小组</a></li>
<li><a href="#">阅读</a></li>
<li><a href="#">FM</a></li>
<li><a href="#">东西</a></li>
<li><a href="#">市集</a></li>
<li><a href="#">更多</a></li>
</ul>
</div>
<!-- top-bar ]]-->
<!-- menu [[ -->
<div class="search">
<div class="search-con">
<div class="logo">
<a href="#">豆瓣电影</a>
</div>
</div>
</div>
<div class="nav">
<div class="nav-con">
<ul>
<li><a href="#">影讯&购票</a></li>
<li><a href="#">选电影</a></li>
<li><a href="#">电视剧</a></li>
<li><a href="#">排行榜</a></li>
<li><a href="#">分类</a></li>
<li><a href="#">影评</a></li>
<li><a href="#">2016年度榜单</a></li>
<li><a href="#">2016观影报告</a></li>
</ul>
</div>
</div>
<!-- menu ]] -->
</header>
<!-- header ]]-->
<div class="main">
<div class="main-left">
<router-view></router-view>
</div>
<div class="main-right">
</div>
</div>
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
<style>
*{margin: 0; padding: 0;}
ul, ul li{ list-style: none; }
a{ text-decoration: none; }
body{ margin: 0; padding: 0; font-family: '微软雅黑'; font-size: 13px;}
header{background: #e3ebec; margin-bottom: 40px;}
.bar{width: 100%;height: 28px;background: #545652}
.bar ul{ overflow: hidden; }
.bar li{height: 28px;line-height: 28px;float: left;list-style: none;margin:0 20px 0 5px;}
.bar li a{color: #d5d5d5;text-decoration: none;}
.bar li a:hover{color: #fff;}
.search{width: 100%;background: #e3ebec;border-bottom: 1px solid #e2e2e2;}
.search-con{padding: 10px 0 5px 0;width: 950px;margin: 0 auto;overflow: hidden;}
.logo{width: 150px;height: 52px;line-height: 52px;float: left;}
.logo a{font-size: 36px;color: #27a;text-decoration: none;font-weight: bold;letter-spacing: 1px;}
.nav{ height: 40px; line-height: 40px; }
.nav-con{ width: 950px; margin: 0 auto; overflow: hidden; }
.nav-con ul{ overflow: hidden; }
.nav-con ul li{ float: left; margin-right: 35px; }
.nav-con ul a{ color: #27a; }
.nav-con ul a:hover{ color: #fff; background-color: #27a; }
.main{ width: 950px; margin: 0 auto; overflow: hidden;}
.main-left{ width: 590px; padding-right: 40px; float: left; }
</style>
页面呈现的效果
header.png
