wapshop/src/components/main/discovery/functionList.vue

<template>
    <div class="function_list">
        <div class="function_items" v-for="data in datas">
            <masker :opacity = "0" class="function_item_img">
                <x-img :src="data.img" :key="data.img" :default-src="defalutImg"></x-img>
                <div slot="content" class="m-title" :key="data.name">
                    <span class="rounds"></span>{{data.name}}<span class="rounds"></span>
                    </br>
                    <span class="look_btn"  @click="link(data.name)">查看全部</span>
                </div>
            </masker>
            <flexbox :gutter="0" wrap="wrap" class="function_item">
                <flexbox-item :span="1/4" v-for="item in data.subitem" class="subitem" :key="item">
                     <div @click="link(item.name)">
                         <x-img :src="item.img" :key="item.img" :default-src="defalutImg"></x-img>
                         <p class="item_title">{{item.name}}</p>
                     </div>
                </flexbox-item>
            </flexbox>
        </div>
    </div>
</template>
<script>

    import { Masker , Flexbox , FlexboxItem , XImg } from 'vux'
    import Api from '../../../lib/api.js'
    import Actions from '../../../lib/Actions'
    import DefaultImg from '../../../assets/default_img.jpg'

    export default {
        components:{
            Masker,
            Flexbox,
            FlexboxItem,
            XImg
        },
        created(){
            let _self = this;
            this.$http.jsonp(Api.functionList()).then(function(res){
                _self.datas = res.body.datas["items"];
            })
        },
        mounted(){
            this.$store.commit('updateLoadingStatus', {isLoading: false});
        },
        data(){
            return {
                datas:[],
                defalutImg:DefaultImg
            }
        },
        methods:{
            link(title){
                let action = Actions.getFilterBlockListPath(title, "", "", "", title);
                this.$router.push(action);
            }
        }
    }

</script>
<style scoped>
    .m-title {
        color: #fff;
        font-size: 50px;
        text-align: center;
        text-shadow: 0 0 2px rgba(0, 0, 0, .5);
        font-weight: 500;
        position: absolute;
        left: 0;
        right: 0;
        width: 100%;
        top: 50%;
        transform: translateY(-50%);
    }
    .rounds {
        display: inline-block;
        width: 24px;
        height: 24px;
        background: #fff;
        border-radius: 50px;
        margin: 0 10px;
        line-height: 15px;
    }
    .look_btn {
        font-size: 28px;
        border: 1px solid #fff;
        border-radius: 10px;
        padding: 10px 20px;
    }
    .item_title {
        font-size: 24px;
        text-align: center;
        margin-bottom: 40px;
    }
    .function_items:first-child {
        margin-top: 0;
    }
    .function_item_img {
        margin-bottom: 40px;
    }
    .function_item img {
        width: 70%;
        margin: 0 auto;
    }
</style>