【IMWeb训练营作业】之小组作业 web版豆瓣app
为期10天的学习转瞬即逝,这是第三次作业,为小组作业。用Vue实现一款常用的APP/网站的部分页面。
PS:
22号晚上,在群上经过大家的热烈讨论,我们决定做豆瓣app
选择豆瓣,页面比较多,可以供组员们自由选择。
再者,豆瓣近似的功能比较多,比较容易适用Vue组件。
规定
命名规范:采用单词,如首页为index,小组为group
文件规范:每个人负责的页面对应一个css、一个js,如group.html、group.css、group.js
布局规范:适配移动端
icon规范:统一在iconfont下载,模仿就行
分工
1、我负责首页及tabbar;
2、金锰负责小组页 ;
3、前州负责书影音页;
4、金浩负责钱包页;
5、若水负责读书页;
6、lvy负责广播页;
效果图
目录页
部分源码
由于页面太多了,就不过多展示了,这里只展示一下我负责的首页index :
Html:
<head>
<title>select组件</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="font/iconfont.css">
<link href="css/index.css" rel="stylesheet">
<script src="js/vue.js"></script>
<script src="js/jquery-3.0.0.min.js"></script>
</head>
<body>
<div id="app">
<div class="search">
<form class="search-con">
<i class="iconfont icon-sousuo"></i>
<input type="text" placeholder="影视 图书 唱片 小组 舞台剧等">
<i class="iconfont icon-saoyisao"></i>
</form>
<i class="iconfont icon-icon3 xiaoxi"></i>
</div>
<div class="main">
<swip></swip>
<div class="hot">
<div class="title hot-title">
热点
</div>
<div v-for="item in hotList" class="hot-item">
<a href="#">
<h3>{
{item.title}}</h3>
<p>{
{item.description}}</p>
<div class="hot-icon icon1" :class="item.icon">
</div>
</a>
</div>
</div>
<div class="doubantime">
<div class="title time-title">
豆瓣时间
</div>
<div class="time-con">
<ul class="time-content">
<li class="time-item" v-for="item in timeList">
<div class="time-item-top">
<p>{
{item.topP1}}</p>
<p>{
{item.topP2}}</p>
</div>
<div class="time-item-main">
<h3>{
{item.mainH3}}</h3>
<p>{
{item.mainP1}}</p>
<p>本期内容:</p>
<h4>{
{item.mainH4}}</h4>
<a href="#">查看专栏</a>
</div>
</li>
</ul>
</div>