<template>
    <section class="sample"  >
        <Header :title="title" :meaushow='meaushow' :bgcolor="bgcolor"></Header>
        <wxShare ></wxShare>
        <div class="banner"></div>
        <div class="zititle">
            <span>猎芯自营</span>
            <font>品现货 1片起订 3小时发货</font>
        </div>
        <div class="nav">
            <van-tabs v-model="active"  :color="color" :swipe-threshold="swipeThreshold" :title-active-color="color" :title-inactive-color="defaultcolor">
                <van-tab title="标签阿四"></van-tab>
                <van-tab title="标签 2"></van-tab>
                <van-tab title="标签 3"></van-tab>
                <van-tab title="标签 3"></van-tab>
            </van-tabs>
        </div>
        <div class="con">
            <div class="con-group clr">
                <div class="fl img-box">
                    <img src="static/images/news.png" alt="">
                </div>
                <div class="fr cb-box van-hairline--bottom">
                    <div class="title">TL431-DSFSDFSDFS-2ffF...</div>
                    <p><span>类别:</span> 贴片电容贴片电容贴片电容贴电容...</p>
                    <p><span>品牌:</span> EYANG（宇阳）EYANG（宇阳）...</p>
                    <p><span>最大可申请数量：</span>2</p>
                    <div class="btnx" @click="yaoqing">领取样品</div>
                </div>
            </div>
        </div>
        <div class="fix-btns" v-shareMask>立即分享</div>
        <!--获得机会弹窗-->
        <div class="get-user-pop" v-show="getPop">
            <div class="mask"></div>
            <div class="get-user-con">
                <h3>样品申请成功！我们会尽快为您审核<i class="icon iconfont icon-guanbi" @click="getuserf"></i></h3>
                <h2>邀请好友注册可额外获得一次样品申请机会，多邀多得</h2>
                <span v-shareMask>点击邀请</span>
            </div>
        </div>
    </section>

</template>

<script>

    import Vue from 'vue'
    import {mapState} from 'vuex'
    import Header from "@/views/common/Header.vue";
    import wxShare from "@/views/common/wxShare.vue";
    import { Tab, Tabs } from 'vant';
    Vue.use(Tab).use(Tabs);
    export default {
        name: 'sample',
        data() {
            return {
                title:"猎芯网-自营样片",
                meaushow:true,
                bgcolor:'#fafafa',
                color:'#1080d0',
                defaultcolor:'#333',
                swipeThreshold:4,
                active:0,
                getPop:false,//获得机会弹窗,没机会时展示

            }
        },
        computed: {
            ...mapState({

            })
        },
        watch:{

        },
        created() {

        },
        methods: {
            getuserf(){
                this.getPop=false;
            },
            yaoqing(){

                this.getPop=true;
            }
        },
        components: {
            Header,
            wxShare
        }
    }
</script>

<style scoped>
    @import "../../assets/css/sample/sample.min.css";
</style>