豆瓣电影的首页效果

movie_1.png

豆瓣电影的列表页面

movie_2.png

豆瓣电影的电影内页面效果

movie_3.png

参照以上的三个页面，做出豆瓣电影的首页，列表页面以及电影的详细页面。

工具版本控制

vue @2.8.0
webpack @1.13.1

搭建初始化环境

1. vue init webpack movie-dou
2. cd movie-dou
3. cnpm install
4. cnpm run dev
5. 启动之后的页面效果

init_1.png

6. 初始化的页面目录结果

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