'add'

7 years ago · 6c62e024a1
parent dc903339eb
commit 6c62e024a1
1 changed files with 1 additions and 120 deletions
--- a/src/view/home.vue
+++ b/src/view/home.vue
@ -1,120 +1 @@
-<template>
+hello
  <div class="home">
    <my-header></my-header>
    <carousel :swiperData='swiperData'></carousel>
    <!-- 分类 -->
    <div class="classification">
      <div class="class_top">
        <div class="item" v-for="(item,index) in classifiData.up" :key="index">
          <img :src="item" alt="">
        </div>
      </div>
      <div class="class_bottom">
        <div class="item" v-for="(item,index) in classifiData.down" :key="index">
          <img :src="item" alt="">
        </div>
      </div>
    </div>
    <!-- 推荐 -->
    <div class="recommend">
      <div class="title">今日推荐</div>
      <div class="content">
        <div class="item" v-for="(item,index) in recommendData" :key="index">
          <img :src="item.imgurl" alt="">
          <div class="item_text">
            <span>{{item.title}}</span>
            <span>剩 {{item.endtime}} 天</span>
          </div>
        </div>
      </div>
    </div>
  </div>
 </template>
 <script>
 import MyHeader from "@/components/myHeader";
 import Carousel from "@/components/carousel";
 import axios from "axios";
 export default {
  name: "home",
  components: {
    MyHeader,
    Carousel
  },
  data() {
    return {
      // 轮播图
      swiperData: [],
      // 分类
      classifiData: {},
      // 推荐
      recommendData: []
    };
  },
  mounted() {
    this.getIndexData();
  },
  methods: {
    getIndexData() {
      axios.get("/api/index.json").then(res => {
        console.log(res.data);
        this.swiperData = res.data.swiper;
        this.classifiData = res.data.classifiData;
        this.recommendData = res.data.recommendData;
      });
    }
  }
 };
 </script>
 <style lang="less" scoped>
@import "~styles/variables.less";
 .home {
  background: #f3f4f5;
  // 分类
  .classification {
    .class_top,
    .class_bottom {
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      .item {
        img {
          display: block;
          width: 2rem;
          height: 2.346667rem;
        }
      }
    }
  }
  // 推荐
  .recommend {
    .title {
      text-align: center;
      font-size: 0.373333rem;
      padding: 0.266667rem;
      background: #fff;
      margin: 0.133333rem 0;
    }
    .content {
      .item {
        background: #fff;
        margin-bottom: 0.133333rem;
        img {
          width: 100%;
          height: 4.8rem;
          display: block;
        }
        .item_text {
          box-sizing: border-box;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          padding: 0.133333rem;
          font-size: 0.32rem;
        }
      }
    }
  }
 }
 </style>