【IMWeb训练营作业】之小组作业 web版豆瓣app

最新推荐文章于 2023-12-17 19:49:38 发布

jianjiaoxiaowu

最新推荐文章于 2023-12-17 19:49:38 发布

阅读量313

点赞数

分类专栏： IMWEB训练营

本文链接：https://blog.csdn.net/jianjiaoxiaowu/article/details/70686844

版权

【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>

最低0.47元/天解锁文章

jianjiaoxiaowu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【IMWeb训练营作业】之小组作业 web版豆瓣app

【IMWeb训练营作业】之小组作业 web版豆瓣app为期10天的学习转瞬即逝，这是第三次作业，为小组作业。用Vue实现一款常用的APP／网站的部分页面。 PS： 22号晚上，在群上经过大家的热烈讨论，我们决定做豆瓣app 选择豆瓣，页面比较多，可以供组员们自由选择。再者，豆瓣近似的功能比较多，比较容易适用Vue组件。规定命名规范：采用单词，如首页为index，小组为group
复制链接

扫一扫