<template>
<section class="main-interface boxsiz">
<div class="container-wrap boxsiz">
<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
<div class="head boxsiz">
<div class="banner boxsiz">
<Slide :slidedata="index.rollbanner"></Slide>
</div>
<div class="login-wrap">
<template v-if="loginCheck">
<a @click="recordFn('member')" href="/v3/user" class="person-btn"><i></i></a>
</template>
<template v-else>
<a @click="recordFn('login')" href="/v3/login" class="btn">登录</a>
</template>
</div>
<div class="search boxsiz">
<div class="search-wrap boxsiz">
<div class="pic">
<img src="../../assets/images/home/logo.png" alt="" class="logo">
</div>
<div class="inp boxsiz">
<i></i>
<input type="text" @focus="jump" class="boxsiz" placeholder="请输入元器件型号、参数">
</div>
</div>
</div>
</div>
<div class="notice boxsiz" v-if="index.lx_activity">
<span>猎芯活动</span>
<i class="lineBlock va-m"></i>
<div class="notice-contant boxsiz">
<van-swipe vertical :show-indicators="false" :height="height" :autoplay="3000">
<van-swipe-item v-for="(item,index) in index.lx_activity" :key="index">
<a :href="item.url | urlParams">{{item.title}}</a>
</van-swipe-item>
</van-swipe>
</div>
<a class="more" href="/h5/view/#/news?cat_id=11">更多</a>
</div>
<div class="tab-content boxsiz">
<ul class="boxsiz">
<li v-for="(item,index) in index.business_entry">
<a :href="item.url" :target="item.window_open > 0 ?'_blank':'_self'" @click="recordFloorFn(ptag+'-path'+(index * 1 +1))">
<img :src="item.images" alt="">
<p>{{item.title}}</p>
</a>
</li>
</ul>
</div>
<div class="content boxsiz" v-if="index.template">
<template v-for="(item,count) in index.template">
<!--猎芯现货-->
<template v-if="item.class == 'temp5'">
<div class="selfshop boxsiz">
<div class="tit boxsiz">
<div class="l">
<i class="lineBlock"></i>
<span class="t1">{{item.tem_name}}</span>
<span class="t2">{{item.ad_words}}</span>
</div>
<template v-if="item.link_words">
<a class="r" :href="item.url" @click="recordFloorFn(ptag+'-floor'+(count * 1 +1))">
<span>{{item.link_words}}</span>
<i class="lineBlock"></i>
</a>
</template>
</div>
<ul class="boxsiz list">
<li class="boxsiz" v-for="(v,index) in item.data.tempGoods" :key="index">
<a :href="'/item/'+v.goods_id+'.html'" class="boxsiz" :target="v.window_open > 0 ? '_blank':'_self'" v-lazy-container="{ selector: 'img' }" @click="recordFloorFn(ptag+'-floor'+(count * 1 +1))">
<!--限时限量-->
<template v-if="v.ac_type == 1">
<img :data-src="v.default_img" :alt="v.supplier_name" data-error="static/images/ziyin.png">
<div class="text boxsiz">
<p class="t1 boxsiz">{{v.goods_name}}</p>
<p class="t2">
<span class="l">{{v.price_ac}}</span>
<span class="r">抢购</span>
</p>
<p class="t3">{{v.price}}</p>
</div>
</template>
<!--活动价-->
<template v-else-if="v.ac_type == 2">
<img :data-src="v.default_img" :alt="v.supplier_name" data-error="static/images/ziyin.png">
<div class="text boxsiz">
<p class="t1 boxsiz">{{v.goods_name}}</p>
<p class="t2">
<span class="l">{{v.price_ac}}</span>
<span class="r">抢购</span>
</p>
<p class="t3">{{v.price}}</p>
</div>
</template>
<!--会员价-->
<template v-else-if="v.ac_type == 3">
<img :data-src="v.default_img" :alt="v.supplier_name" data-error="static/images/ziyin.png">
<div class="text boxsiz">
<p class="t1 boxsiz">{{v.goods_name}}</p>
<p class="t2">
<span class="l">{{v.price_ac}}</span>
<span class="r">优惠</span>
</p>
<p class="t3">{{v.price}}</p>
</div>
</template>
<!--原价-->
<template v-else>
<img :data-src="v.default_img" :alt="v.supplier_name" data-error="static/images/ziyin.png">
<div class="text boxsiz">
<p class="t1 boxsiz">{{v.goods_name}}</p>
<p class="t2">
<span class="l">{{(v.ac_type==6)?v.price_ac:v.price}}</span>
</p>
</div>
</template>
</a>
</li>
</ul>
</div>
</template>
<!--联营-->
<template v-else-if="item.class == 'temp4'">
<div class="lxshop boxsiz">
<div class="tit boxsiz">
<div class="l">
<i class="lineBlock"></i>
<span class="t1">{{item.tem_name}}</span>
<span class="t2">{{item.ad_words}}</span>
</div>
<template v-if="item.link_words">
<a class="r" :href="item.url" @click="recordFloorFn(ptag+'-floor'+(count * 1 +1))">
<span class="va-m">{{item.link_words}}</span>
<i class="lineBlock va-m"></i>
</a>
</template>
</div>
<ul class="boxsiz list">
<li class="boxsiz" v-for="(v,index) in item.data.brandImages" :key="index">
<a :href="v.url" :target="v.window_open > 0 ? '_blank':'_self'" @click="recordFloorFn(ptag+'-floor'+(count * 1 +1))">
<div class="pic">
<img :alt="v.title" v-lazy="v.images">
</div>
</a>
</li>
</ul>
</div>
</template>
<!--积分商城-->
<template v-else-if="item.class == 'temp6'">
<div class="jfshop boxsiz">
<div class="tit boxsiz">
<div class="l">
<i class="lineBlock"></i>
<span class="t1">{{item.tem_name}}</span>
<span class="t2">{{item.ad_words}}</span>
</div>
<template v-if="item.link_words">
<a class="r" :href="item.url" @click="recordFloorFn(ptag+'-floor'+(count * 1 +1))">
<span class="va-m">{{item.link_words}}</span>
<i class="lineBlock va-m"></i>
</a>
</template>
</div>
<ul class="list boxsiz">
<li class="boxsiz" v-for="(v,index) in item.data.pointGoods" :key="index">
<a class="boxsiz" href="/h5/view/#/pointmall" :target="v.window_open > 0 ? '_blank':'_self'" @click="recordFloorFn(ptag+'-floor'+(count * 1 +1))">
<div class="pic">
<img v-lazy="v.prize_img_url" :alt="v.prize_name">
</div>
<p class="t1">{{v.prize_name}}</p>
<p class="t2">
<i class="va-m lineBlock"></i>
<em>{{v.prize_point}}</em>
</p>
</a>
</li>
</ul>
</div>
</template>
<!--PCB打板 SMT云工厂 进口报关 平台入驻-->
<template v-else-if="item.class == 'temp7'">
<div class="pcb boxsiz">
<div class="tit boxsiz">
<div class="l">
<i class="lineBlock"></i>
<span class="t1">{{item.tem_name}}</span>
<span class="t2">{{item.ad_words}}</span>
</div>
<template v-if="item.link_words">
<a class="r" :href="item.url" @click="recordFloorFn(ptag+'-floor'+(count * 1 +1))">
<span class="va-m">{{item.link_words}}</span>
<i class="lineBlock va-m"></i>
</a>
</template>
</div>
<ul class="list boxsiz">
<li class="boxsiz" v-for="(v,index) in item.data.tempImages" :key="index">
<a class="boxsiz" :href="v.url" :target="v.window_open > 0 ? '_blank':'_self'" @click="recordFloorFn(ptag+'-floor'+(count * 1 +1))">
<img v-lazy="v.images" :alt="v.title">
</a>
</li>
</ul>
</div>
</template>
</template>
<!--资讯中心-->
<div class="news boxsiz" v-if="index.footer_new_article">
<div class="tit boxsiz">
<div class="l">
<i class="lineBlock"></i>
<span class="t1">资讯中心</span>
</div>
<a class="r" href="/news?cat_id=11" >
<span class="va-m">更多</span>
<i class="lineBlock va-m"></i>
</a>
</div>
<ul class="list boxsiz">
<li class="boxsiz" v-for="item in index.footer_new_article" :key="item.art_id">
<a class="boxsiz" :href="'/article/'+item.art_id+'.html'" @click="recordFloorFn(ptag+'-dynamic')">
<div class="pic" v-lazy-container="{selector:'img'}">
<img :data-src="item.litpic" title="猎芯网" alt="猎芯网" data-error="static/images/news.png">
</div>
<div class="text">
<p class="t1">{{item.title_seo}}</p>
<div class="t2">
<span>来源：{{item.writer}}</span>
<div>
<i class="ico lineBlock va-m"></i>
<em class="va-m">
{{parseInt(item.click)+parseInt(item.start_review)}}
</em>
</div>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</van-pull-refresh>
</div>
<Navigator></Navigator>
<SideBar ></SideBar>
<van-loading type="spinner" color="#000" class="loading-background" v-if="loading"/>
</section>
</template>
<script>
import Vue from 'vue';
import {mapState} from 'vuex'
import {PullRefresh, Loading, Lazyload} from 'vant';
import Navigator from '@/views/common/Navigator.vue';
import Slide from '@/views/common/Slide.vue';
import SideBar from '@/views/common/SideBar.vue';
Vue.use(PullRefresh).use(Loading).use(Lazyload);
export default {
name: 'index',
computed: mapState({
index: state => state.home.index,
loading: state => state.home.loading,
loginCheck: state => state.common.loginCheck
}),
data() {
return {
ptag: 'index',
isLoading: false,
height: 33
}
},
beforeRouteEnter(to, from, next) {
next(vm => {
vm.getData();
})
},
methods: {
getData() {
this.$store.dispatch({
type: 'index'
})
},
onRefresh() {
setTimeout(() => {
this.isLoading = false;
this.$store.dispatch({
type: 'index'
})
}, 1000);
},
recordFn(type) {
// if (type == 'login') {
// sensors.track('TopNavClick', {
// top_nav_click: "h5-登录"
// });
// } else if (type == 'search') {
// sensors.track('TopNavClick', {
// top_nav_click: "h5-搜索"
// });
// } else if (type == 'member') {
// sensors.track('TopNavClick', {
// top_nav_click: "h5-会员中心"
// });
// }
},
recordFloorFn(type) { //神策预留
},
jump() {
this.recordFn('search');
window.location.href = '/v3/search/search_index.html';
}
},
components: {
Navigator,
Slide,
SideBar
}
}
</script>
<style scoped lang="scss">
.main-interface {
display: flex;
flex-direction: column;
height: 100%;
.container-wrap {
order: 0;
background: #fff;
height: calc(100% - 2rem);
overflow-x: hidden;
overflow-y: auto;
padding-bottom: 1rem;
-webkit-overflow-scrolling: touch;
.head {
position: relative;
height: 5.44rem;
.banner {
position: relative;
height: 5.44rem;
}
.login-wrap {
.btn {
position: absolute;
top: 0.253rem;
right: 0.413rem;
width: 53px;
height: 25px;
background-color: #ffffff;
font-size: 15px;
color: #999999;
text-align: center;
line-height: 25px;
display: block;
border-radius: 14px;
}
.person-btn {
position: absolute;
top: 0.253rem;
right: 0.413rem;
width: 53px;
height: 25px;
background-color: #ffffff;
font-size: 15px;
color: #999999;
text-align: center;
line-height: 25px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 14px;
i {
width: 20px;
height: 20px;
background: url("../../assets/images/home/login.png") no-repeat center;
background-size: contain;
vertical-align: middle;
}
}
}
.search {
position: absolute;
top: 50%;
height: 50px;
margin-top: 20%;
padding: 0 0.267rem;
width: 100%;
.search-wrap {
width: 100%;
height: 100%;
background-color: #ffffff;
border-radius: 40px;
box-shadow: -0.02rem 0.064rem 0.067rem 0rem rgba(226, 226, 226, 0.75);
display: flex;
align-items: center;
justify-content: center;
.pic {
margin-left: 0.44rem;
.logo {
width: 60px;
height: 30px;
display: block;
}
}
.inp {
position: relative;
margin-left: 0.307rem;
width: 100%;
i {
position: absolute;
top: 50%;
margin-top: -8px;
width: 19px;
height: 19px;
left: 2.6em;
background: url("../../assets/images/home/search.png") no-repeat center;
background-size: contain;
display: block;
}
input {
width: 93%;
height: 40px;
line-height: 40px;
border-radius: 5px;
border: solid 1px #e6e6e6;
font-size: 12px;
text-indent: 4.5em;
}
}
}
}
}
.notice {
margin: 1.053rem 0.267rem 0 0.267rem;
height: 33px;
background-color: #f8f8f8;
border-radius: 2px;
display: flex;
align-items: center;
justify-content: center;
span {
font-size: 13px;
color: #999999;
}
i {
width: 19px;
height: 19px;
background: url("../../assets/images/home/naba.png") no-repeat;
background-size: contain;
margin: 0 0.267rem 0 0.373rem;
}
.notice-contant {
width: 4.747rem;
height: 100%;
font-size: 14px;
overflow: hidden;
.van-swipe-item {
width: 100% !important;
padding-right: 14px;
box-sizing: border-box;
line-height: 33px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
a {
font-size: 14px !important;
color: #2e2e2e !important;
}
}
}
a.more {
padding-left: 0.28rem;
font-size: 13px;
color: #999999;
border-left: solid 1px #e3e3e3;
}
}
.tab-content {
background: #fff;
padding: 0.84rem 0 0.973rem 0;
ul {
display: flex;
align-items: center;
flex-wrap: wrap;
li {
flex: 0 0 25%;
text-align: center;
&:nth-child(n+5) {
margin-top: 1.4rem;
}
a {
display: block;
img {
width: 38px;
height: 38px;
}
p {
margin-top: 0.347rem;
font-size: 12px;
color: #666666;
}
}
}
}
}
.content {
padding-top: 0.293rem;
background-color: #f8f8f8;
.tit {
padding: 0.533rem 0.467rem 0.4rem 0.467rem;
display: flex;
justify-content: space-between;
align-items: baseline;
.l {
i {
position: relative;
top: 1px;
width: 3px;
height: 15px;
background: url("../../assets/images/home/arrow-2.png") no-repeat center;
background-size: contain;
margin-right: 0.187rem;
}
.t1 {
font-size: 17px;
color: #2e2e2e;
line-height: 9px;
}
.t2 {
font-size: 13px;
color: #adacac;
margin-left: 0.213rem;
line-height: 9px;
}
}
.r {
display: block;
span {
font-size: 13px;
color: #999999;
margin-right: 0.253rem;
}
i {
width: 5px;
height: 8px;
background: url("../../assets/images/home/arrow-1.png") no-repeat;
background-size: contain;
}
}
}
.selfshop {
background-color: #f8f8f8;
.list {
display: flex;
flex-wrap: wrap;
padding: 0 0.467rem;
justify-content: space-between;
li {
padding: 0.16rem 0.133rem 0.267rem 0.133rem;
flex: 1;
background: #fff;
margin-right: 0.13rem;
margin-bottom: 0.13rem;
&:nth-of-type(3n) {
margin-right: 0;
}
a {
width: 100%;
height: 100%;
display: block;
img {
width: 90px;
height: 75px;
display: block;
margin: 0 auto;
vertical-align: middle;
}
.text {
margin: 0.253rem 0 0 0;
.t1 {
width: 2.6rem;
font-size: 12px;
color: #2e2e2e;
white-space: normal;
display: -webkit-box;
text-overflow: ellipsis;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
margin-bottom: 0.213rem;
}
.t2 {
display: flex;
justify-content: space-between;
align-items: center;
.l {
font-size: 12px;
color: #eb0000;
font-weight: bold;
}
.r {
width: 25px;
height: 12px;
border-radius: 1px;
border: solid 1px #eb0000;
font-size: 10px;
color: #eb0000;
line-height: 12px;
text-align: center;
display: block;
}
}
.t3 {
margin-top: 0.187rem;
font-size: 12px;
color: #adacac;
text-decoration: line-through;
}
}
}
}
}
}
.lxshop {
background-color: #f8f8f8;
padding-bottom: 0.466rem;
.list {
display: flex;
flex-wrap: wrap;
padding: 0 0.467rem;
justify-content: space-between;
li {
height: 1.28rem;
flex: 1;
background: #fff;
margin-right: 0.13rem;
margin-bottom: 0.13rem;
padding: 0 0.133rem;
&:nth-of-type(3n) {
margin-right: 0;
}
a {
width: 100%;
height: 100%;
display: table;
.pic {
display: table-cell;
vertical-align: middle;
img {
width: 83px;
height: 32px;
display: block;
margin: 0 auto;
}
}
}
}
}
}
.pcb, .smt, .scm, .supplier {
background-color: #fff;
.list {
width: 100%;
height: 3.067rem;
padding: 0 0.467rem;
li {
width: 100%;
height: 100%;
a {
display: block;
width: 100%;
height: 100%;
img {
width: 100%;
height: 100%;
}
}
}
}
}
.jfshop {
background-color: #f8f8f8;
padding-bottom: 0.373rem;
.tit {
background: #fff;
}
.list {
margin-top: 0.227rem;
padding-left: 0.467rem;
flex-wrap: nowrap;
display: flex;
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
&::-webkit-scrollbar {
display: none
}
li {
flex: 0 0 44%;
background: #fff;
margin-right: 0.133rem;
padding: 0.4rem 0.16rem 0.28rem 0.16rem;
a {
display: block;
.pic {
width: 116px;
height: 83px;
margin: 0 auto;
img {
width: 116px;
height: 83px;
margin: 0 auto;
display: block;
}
}
.t1 {
margin-top: 0.467rem;
font-size: 12px;
color: #2e2e2e;
white-space: normal;
display: -webkit-box;
text-overflow: ellipsis;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 17px;
}
.t2 {
line-height: 17px;
i {
width: 12px;
height: 11px;
background: url("../../assets/images/home/arrow-3.png") no-repeat;
background-size: contain;
}
em {
margin-left: 0.16rem;
font-size: 12px;
color: #f3a40a;
}
}
}
}
}
}
.news {
background-color: #fff;
.tit {
background-color: #fff;
}
.list {
padding: 0 0.467rem;
li {
border-bottom: 1px solid #f3f3f3;
padding: 0.4rem 0;
&:first-child {
padding-top: 0;
}
&:last-child {
border-bottom: none;
}
a {
display: flex;
align-items: center;
.pic {
width: 115px;
height: 69px;
img {
width: 115px;
height: 69px;
border-radius: 4px;
display: block;
vertical-align: middle;
}
}
.text {
margin-left: 0.253rem;
.t1 {
font-size: 15px;
color: #2e2e2e;
line-height: 22px;
white-space: normal;
display: -webkit-box;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-align: justify;
}
.t2 {
margin-top: 0.533rem;
display: flex;
justify-content: space-between;
span {
font-size: 12px;
color: #999999;
}
i {
width: 14px;
height: 8px;
background: url("../../assets/images/home/arrow-4.png") no-repeat;
background-size: contain;
}
em {
font-size: 12px;
color: #999999;
margin-left: 0.16rem;
}
}
}
}
}
}
}
}
}
}
@media screen and (max-width: 320px) {
.main-interface .container-wrap .content .selfshop .list li[data-v-5e7337c8]:nth-of-type(3n) {
margin-right: 0.13rem;
}
}
</style>