From b64afe24e01fa88ef035fb3aed5e6c8df3c20de3 Mon Sep 17 00:00:00 2001
From: Zddu <1501815524@qq.com>
Date: Tue, 6 Apr 2021 08:53:02 +0800
Subject: [PATCH] =?UTF-8?q?'=E9=A6=96=E9=A1=B5=E5=91=A8=E6=9C=AB=E6=8E=A8?=
 =?UTF-8?q?=E8=8D=90=E5=8A=9F=E8=83=BD'?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Icons/Icons.vue         | 66 +++++++++---------
 src/components/Swiper/MySwiper.vue     |  4 +-
 src/components/recommend/Recommend.vue | 93 ++++++++++++++++++++++++++
 src/components/weekend/Weekend.vue     | 81 ++++++++++++++++++++++
 src/pages/home/Home.vue                |  7 +-
 5 files changed, 216 insertions(+), 35 deletions(-)
 create mode 100644 src/components/recommend/Recommend.vue
 create mode 100644 src/components/weekend/Weekend.vue

diff --git a/src/components/Icons/Icons.vue b/src/components/Icons/Icons.vue
index e2fbf57..12529b5 100644
--- a/src/components/Icons/Icons.vue
+++ b/src/components/Icons/Icons.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="icons">
-    <swiper ref="mySwiper">
+    <swiper ref="swiper-icons" :options="swiperOption">
       <swiper-slide :key="index" v-for="(page,index) in pages">
         <div class="icon" :key="item.id" v-for="item in page">
           <div class="icon-img">
@@ -18,6 +18,9 @@
     name: "Icons",
     data() {
       return {
+        swiperOption: {
+          loop:false,
+        },
         iconList:[
           {
             id:'0001',
@@ -81,35 +84,34 @@
   .icons >>> .swiper-container
     height 0
     padding-bottom 50% //基于父元素宽度的一半
-  .icon
-    position relative
-    overflow hidden
-    float left
-    height 0
-    width 25%
-    padding-bottom 25%
-
-    .icon-img
-      position absolute
-      top: 0
-      left: 0
-      right: 0
-      bottom .44rem
-      box-sizing border-box
-      ellipsis()
-      .icon-img-content
-        height 100%
-        display block
-        margin 0 auto
-
-    .icon-desc
-      position: absolute;
-      left 0
-      right: 0
-      bottom: 0
-      height .44rem
-      line-height .44rem
-      text-align center
-
-      color $darkTextColor
+  .icons
+    margin-top .2rem
+    .icon
+      position relative
+      overflow hidden
+      float left
+      height 0
+      width 25%
+      padding-bottom 25%
+      .icon-img
+        position absolute
+        top: 0
+        left: 0
+        right: 0
+        bottom .44rem
+        box-sizing border-box
+        ellipsis()
+        .icon-img-content
+          height 100%
+          display block
+          margin 0 auto
+      .icon-desc
+        position: absolute;
+        left 0
+        right: 0
+        bottom: 0
+        height .44rem
+        line-height .44rem
+        text-align center
+        color $darkTextColor
 </style>
diff --git a/src/components/Swiper/MySwiper.vue b/src/components/Swiper/MySwiper.vue
index e1d503a..0ab91fb 100644
--- a/src/components/Swiper/MySwiper.vue
+++ b/src/components/Swiper/MySwiper.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="wrapper">
-    <swiper :options="swiperOption" ref="mySwiper">
+    <swiper :options="swiperOption" ref="MySwiper">
       <swiper-slide :key="item.id" v-for="item in swiperList">
         <img class="swiper-img"
-             :src="item.imgUrl" alt="">
+             :src="item.imgUrl" >
       </swiper-slide>
       <div class="swiper-pagination" slot="pagination"></div>
     </swiper>
diff --git a/src/components/recommend/Recommend.vue b/src/components/recommend/Recommend.vue
new file mode 100644
index 0000000..9639528
--- /dev/null
+++ b/src/components/recommend/Recommend.vue
@@ -0,0 +1,93 @@
+<template>
+  <div>
+    <div class="recommend-title">热销推荐</div>
+    <ul>
+      <li class="item border-bottom" :key="item.id" v-for="item in recommendList">
+        <img class="item-img" :src="item.imgUrl">
+        <div class="item-info">
+          <p class="item-title">{{item.title}}</p>
+          <p class="item-desc">{{item.desc}}</p>
+          <button class="item-button">查看详情</button>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "Recommend",
+    data(){
+      return{
+        recommendList:[
+          {
+            id:'0001',
+            imgUrl:'http://img1.qunarzz.com/sight/p0/1805/78/789e31213399290fa3.water.jpg_256x160_c7b5500c.jpg',
+            title:'白石山世界地质公园',
+            desc:'壮观悬空玻璃道，抗日少年英雄山,抗日少年英雄山'
+          },
+          {
+            id:'0002',
+            imgUrl:'http://img1.qunarzz.com/sight/p0/1805/78/789e31213399290fa3.water.jpg_256x160_c7b5500c.jpg',
+            title:'白石山世界地质公园',
+            desc:'壮观悬空玻璃道，抗日少年英雄山,抗日少年英雄山'
+          },
+          {
+            id:'0003',
+            imgUrl:'http://img1.qunarzz.com/sight/p0/1805/78/789e31213399290fa3.water.jpg_256x160_c7b5500c.jpg',
+            title:'白石山世界地质公园',
+            desc:'壮观悬空玻璃道，抗日少年英雄山,抗日少年英雄山'
+          },{
+            id:'0004',
+            imgUrl:'http://img1.qunarzz.com/sight/p0/1805/35/35d8ce88ca9b2488a3.water.jpg_256x160_1218274a.jpg',
+            title:'山海关老龙头景区',
+            desc:'人类历史上的千古奇观'
+          },{
+            id:'0005',
+            imgUrl:'http://img1.qunarzz.com/sight/p0/2005/f7/f79dd4ead02ab9f5a3.water.jpg_256x160_10a2bfea.jpg',
+            title:'秦皇岛野生动物园',
+            desc:'近距离感受自然与动物的和谐美'
+          },
+        ],
+      }
+    }
+  }
+</script>
+
+<style scoped lang="stylus">
+  @import "~style/mixins.styl"
+  .recommend-title
+    line-height .8rem
+    background #eee
+    margin-top .2rem
+    text-indent .2rem
+
+  .item
+    display flex
+    overflow hidden
+    height 1.9rem
+    .item-img
+      width 2.6rem
+      height 1.6rem
+      padding .1rem
+    .item-info
+      flex 1
+      padding .1rem
+      min-width 0
+      .item-title
+        line-height .54rem
+        font-size .32rem
+        ellipsis()
+      .item-desc
+        line-height .4rem;
+        color #ccc
+        ellipsis()
+      .item-button
+        background #ff9300
+        padding 0 .1rem
+        border-radius .16rem
+        margin-top .2rem
+        color #ffffff
+        line-height:.44rem
+
+</style>
diff --git a/src/components/weekend/Weekend.vue b/src/components/weekend/Weekend.vue
new file mode 100644
index 0000000..fda88c7
--- /dev/null
+++ b/src/components/weekend/Weekend.vue
@@ -0,0 +1,81 @@
+<template>
+  <div>
+    <div class="title">周末去哪儿</div>
+    <ul>
+      <li class="item border-bottom" :key="item.id" v-for="item in recommendList">
+        <div class="item-img-wrapper">
+          <img class="item-img" :src="item.imgUrl">
+        </div>
+        <div class="item-info">
+          <p class="item-title">{{item.title}}</p>
+          <p class="item-desc">{{item.desc}}</p>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "Weekend",
+    data(){
+      return{
+        recommendList:[
+          {
+            id:'0001',
+            imgUrl:'http://img1.qunarzz.com/sight/p0/1805/78/789e31213399290fa3.water.jpg_256x160_c7b5500c.jpg',
+            title:'白石山世界地质公园',
+            desc:'壮观悬空玻璃道，抗日少年英雄山,抗日少年英雄山'
+          },
+          {
+            id:'0002',
+            imgUrl:'http://img1.qunarzz.com/sight/p0/1805/78/789e31213399290fa3.water.jpg_256x160_c7b5500c.jpg',
+            title:'白石山世界地质公园',
+            desc:'壮观悬空玻璃道，抗日少年英雄山,抗日少年英雄山'
+          },
+          {
+            id:'0003',
+            imgUrl:'http://img1.qunarzz.com/sight/p0/1805/78/789e31213399290fa3.water.jpg_256x160_c7b5500c.jpg',
+            title:'白石山世界地质公园',
+            desc:'壮观悬空玻璃道，抗日少年英雄山,抗日少年英雄山'
+          },{
+            id:'0004',
+            imgUrl:'http://img1.qunarzz.com/sight/p0/1805/35/35d8ce88ca9b2488a3.water.jpg_256x160_1218274a.jpg',
+            title:'山海关老龙头景区',
+            desc:'人类历史上的千古奇观'
+          },{
+            id:'0005',
+            imgUrl:'http://img1.qunarzz.com/sight/p0/2005/f7/f79dd4ead02ab9f5a3.water.jpg_256x160_10a2bfea.jpg',
+            title:'秦皇岛野生动物园',
+            desc:'近距离感受自然与动物的和谐美'
+          },
+        ],
+      }
+    }
+  }
+</script>
+
+<style scoped lang="stylus">
+  @import "~style/mixins.styl"
+  .title
+    line-height .8rem
+    background #eee
+    margin-top .2rem
+    text-indent .2rem
+  .item-img-wrapper
+    overflow hidden
+    height 0
+    padding-bottom 33.9%
+    .item-img
+      width 100%
+  .item-info
+    padding .1rem
+    .item-title
+      line-height .54rem
+      font-size .32rem
+      ellipsis()
+    .item-desc
+      line-height .4rem;
+      color #ccc
+      ellipsis()
+</style>
diff --git a/src/pages/home/Home.vue b/src/pages/home/Home.vue
index c29b8f3..373eec2 100644
--- a/src/pages/home/Home.vue
+++ b/src/pages/home/Home.vue
@@ -3,6 +3,8 @@
       <home-header></home-header>
       <home-swiper></home-swiper>
       <home-icons></home-icons>
+      <home-recommend></home-recommend>
+      <home-weekend></home-weekend>
     </div>
 </template>
 
@@ -10,9 +12,12 @@
     import HomeHeader from "@/components/header/Header";
     import HomeSwiper from '@/components/swiper/MySwiper'
     import HomeIcons from "@/components/Icons/Icons";
+    import HomeRecommend from "@/components/recommend/Recommend";
+    import HomeWeekend from "@/components/weekend/Weekend";
+
     export default {
       name: "Home",
-      components: {HomeIcons, HomeHeader,HomeSwiper}
+      components: {HomeWeekend, HomeRecommend, HomeIcons, HomeHeader,HomeSwiper}
     }
 </script>
 
-- 
Gitee