w-front-end / select_good · Commits

Commit 47c0e2d73bb40a55b43aeebe1c8bb309f446151c

Authored by zhiyangdu
1 parent b19ee132

新增组件

Inline Side-by-side
Showing 9 changed files with 289 additions and 11 deletions
src/components/discountZone/discountZone.less 0 → 100644
  View file @47c0e2d
  1 +.item_box{
  2 + margin: 20px 20px 50px 20px;
  3 + display: flex;
  4 + justify-content: space-between;
  5 + .left{
  6 + img{
  7 + display: block;
  8 + width:296px;
  9 + height:480px;
  10 + }
  11 + }
  12 + .right{
  13 + flex: 1;
  14 + display: flex;
  15 + justify-content: space-between;
  16 + flex-wrap: wrap;
  17 + .item{
  18 + width:197px;
  19 + height:235px;
  20 + }
  21 + }
  22 +}
src/components/discountZone/discountZone.vue 0 → 100644
  View file @47c0e2d
  1 +<template>
  2 + <div>
  3 + <div class="item_box">
  4 + <div class="left">
  5 + <img src="/static/img/pic_1.jpg" alt="网家家"/>
  6 + </div>
  7 + <div class="right">
  8 + <img class="item" src="/static/img/pic_1.jpg" alt="网家家"/>
  9 + <img class="item" src="/static/img/pic_1.jpg" alt="网家家"/>
  10 + <img class="item" src="/static/img/pic_1.jpg" alt="网家家"/>
  11 + <img class="item" src="/static/img/pic_1.jpg" alt="网家家"/>
  12 + </div>
  13 + </div>
  14 + </div>
  15 +</template>
  16 +
  17 +<script>
  18 + export default {
  19 + name: 'discountZone',
  20 + data () {
  21 + return {
  22 +
  23 + }
  24 + },
  25 + created(){
  26 +
  27 + },
  28 + methods: {
  29 +
  30 + }
  31 + }
  32 +</script>
  33 +
  34 +<!-- Add "scoped" attribute to limit CSS to this component only -->
  35 +<style rel="stylesheet/less" lang="less" scoped>
  36 + @import "discountZone";
  37 +</style>
src/components/preferential/preferential.less 0 → 100644
  View file @47c0e2d
  1 +.item_box{
  2 + margin: 20px;
  3 + display: flex;
  4 + justify-content: space-between;
  5 + .left{
  6 + img{
  7 + display: block;
  8 + width:350px;
  9 + height:160px;
  10 + }
  11 + }
  12 + .right{
  13 + flex: 1;
  14 + display: flex;
  15 + justify-content: space-between;
  16 + flex-wrap: wrap;
  17 + .first{
  18 + width:350px;
  19 + height: 330px;
  20 + }
  21 + .item{
  22 + width:350px;
  23 + height:150px;
  24 + }
  25 + }
  26 +}
src/components/preferential/preferential.vue 0 → 100644
  View file @47c0e2d
  1 +<template>
  2 + <div>
  3 + <div class="item_box">
  4 + <div class="left">
  5 + <img src="/static/img/pic_1.jpg" alt="网家家"/>
  6 + <img src="/static/img/pic_1.jpg" alt="网家家"/>
  7 + <img src="/static/img/pic_1.jpg" alt="网家家"/>
  8 + </div>
  9 + <div class="right">
  10 + <img class="first" src="/static/img/pic_1.jpg" alt="网家家"/>
  11 + <img class="item" src="/static/img/pic_1.jpg" alt="网家家"/>
  12 + </div>
  13 + </div>
  14 + </div>
  15 +</template>
  16 +
  17 +<script>
  18 + export default {
  19 + name: 'discountZone',
  20 + data () {
  21 + return {
  22 +
  23 + }
  24 + },
  25 + created(){
  26 +
  27 + },
  28 + methods: {
  29 +
  30 + }
  31 + }
  32 +</script>
  33 +
  34 +<!-- Add "scoped" attribute to limit CSS to this component only -->
  35 +<style rel="stylesheet/less" lang="less" scoped>
  36 + @import "preferential";
  37 +</style>
src/components/swiperItem/swiperItem.less 0 → 100644
  View file @47c0e2d
  1 +@charset "UTF-8";
  2 +
  3 +.swiper-box {
  4 + position: relative;
  5 + width: 750px;
  6 + height: 380px;
  7 + overflow: hidden;
  8 + .swipe {
  9 + margin: 0 auto;
  10 + width: 690px;
  11 + height: 100%;
  12 + .swipe-item {
  13 + width: 100%;
  14 + height: 100%;
  15 + .app_list_box{
  16 + min-height: 180px;
  17 + .app_list{
  18 + padding: 0px 3px;
  19 + display: flex;
  20 + flex-wrap: wrap;
  21 + justify-content: flex-start;
  22 + div{
  23 + margin-top: 40px;
  24 + img{
  25 + width:90px;
  26 + height: 90px;
  27 + border-radius: 90px;
  28 + margin: 0 48px;
  29 + }
  30 + div{
  31 + height:30px;
  32 + font-size:22px;
  33 + font-weight:300;
  34 + color:rgba(74,74,74,1);
  35 + line-height:30px;
  36 + text-align: center;
  37 + margin: 10px 0 0 0;
  38 + }
  39 + }
  40 + }
  41 + }
  42 + }
  43 + /deep/ .van-swipe__indicators {
  44 + left: unset;
  45 + right: 26px;
  46 + bottom: 20px;
  47 + .van-swipe__indicator {
  48 + background-color: rgba(255, 255, 255, 0.5);
  49 + width: 8px;
  50 + height: 8px;
  51 + margin: 0 4px;
  52 + opacity: unset;
  53 + border-radius: 50%;
  54 + &.van-swipe__indicator--active {
  55 + background-color: rgba(255, 207, 87, 1);
  56 + width: 16px;
  57 + border-radius: 4px;
  58 + }
  59 + }
  60 + }
  61 + }
  62 +}
src/components/swiperItem/swiperItem.vue 0 → 100644
  View file @47c0e2d
  1 +<template>
  2 + <div class="swiper-box" v-if="swipers && swipers.list && swipers.list.length">
  3 + <swipe class="swipe" :autoplay="5000" :show-indicators="swipers.showIndicators ? swipers.showIndicators : showIndicators" @change="onChange">
  4 + <swipe-item class="swipe-item" v-for="(item, index) in swipers.list" :key="index">
  5 + <div class="app_list_box">
  6 + <div class="app_list" v-if="serviceList && serviceList.list && serviceList.list.length">
  7 + <div v-for="(item,index) in serviceList.list" :key="index" @click="onItem(item)">
  8 + <img v-lazy="item.simg" />
  9 + <div>{{item.title}}</div>
  10 + </div>
  11 + </div>
  12 + </div>
  13 + </swipe-item>
  14 + </swipe>
  15 + </div>
  16 +</template>
  17 +
  18 +<script>
  19 +
  20 + // 引入组件
  21 + // import { Swipe, SwipeItem } from 'mint-ui';
  22 + import { Swipe, SwipeItem } from "vant";
  23 +
  24 + export default {
  25 + data() {
  26 + return {
  27 + showIndicators: false
  28 + }
  29 + },
  30 + props: ["swipers"],
  31 + components: {
  32 + Swipe,
  33 + SwipeItem
  34 + },
  35 + methods: {
  36 +
  37 + /**
  38 + * 跳转连接
  39 + * @param {object} item [详情对象]
  40 + */
  41 + toDetail(item) {
  42 +
  43 + },
  44 + /**
  45 + * 当swiper切换
  46 + * @param {int} index [切换swiper索引]
  47 + */
  48 + onChange(index) {
  49 + this.$emit("onChange", index);
  50 + }
  51 + }
  52 + }
  53 +</script>
  54 +
  55 +<!-- Add "scoped" attribute to limit CSS to this component only -->
  56 +<style rel="stylesheet/less" lang="less" scoped>
  57 + @import 'swiperItem';
  58 +</style>
src/pages/index/index.less 0 → 100644
  View file @47c0e2d
src/pages/index/index.vue 0 → 100644
  View file @47c0e2d
  1 +<template>
  2 + <div>
  3 + <!--优惠专区-->
  4 + <discountZone></discountZone>
  5 + <!--天天特惠-->
  6 + <preferential></preferential>
  7 + </div>
  8 +</template>
  9 +
  10 +<script>
  11 + import discountZone from "@/components/discountZone/discountZone";
  12 + import preferential from "@/components/preferential/preferential";
  13 + export default {
  14 + name: 'index',
  15 + data () {
  16 + return {
  17 +
  18 + }
  19 + },
  20 + components:{
  21 + discountZone,
  22 + preferential
  23 + },
  24 + created(){
  25 +
  26 + },
  27 + methods: {
  28 +
  29 + }
  30 + }
  31 +</script>
  32 +
  33 +<!-- Add "scoped" attribute to limit CSS to this component only -->
  34 +<style rel="stylesheet/less" lang="less" scoped>
  35 + @import "index";
  36 +</style>
src/router/index.js
  View file @47c0e2d
@@ -16,17 +16,17 @@ const router = new Router({ @@ -16,17 +16,17 @@ const router = new Router({
16 }, 16 },
17 redirect: "/index", 17 redirect: "/index",
18 children: [ 18 children: [
19 - // {  
20 - // // 首页  
21 - // path: "/index",  
22 - // name: "index",  
23 - // component: resolve => {  
24 - // require(["@/pages/index/index"], resolve);  
25 - // },  
26 - // meta: {  
27 - // requireAuth: false  
28 - // }  
29 - // } 19 + {
  20 + // 首页
  21 + path: "/index",
  22 + name: "index",
  23 + component: resolve => {
  24 + require(["@/pages/index/index"], resolve);
  25 + },
  26 + meta: {
  27 + requireAuth: false
  28 + }
  29 + }
30 ] 30 ]
31 }, 31 },
32 { 32 {