|
|
@@ -4,14 +4,43 @@
|
|
|
<span :class="activeType=='store'?'active':''" @click="activeType='store'">仅看有货</span>
|
|
|
<span :class="activeType=='support'?'active':''" @click="activeType='support'">店铺自营</span>
|
|
|
</div>
|
|
|
- <brand-list></brand-list>
|
|
|
- <detail-brand></detail-brand>
|
|
|
- <good-list></good-list>
|
|
|
+ <div class="brand-list-content">
|
|
|
+ <div class="brand-list-top">
|
|
|
+ <span>品牌墙</span>
|
|
|
+ <span @click="onclick()">展开<i class="iconfont icon-arrow-down"></i></span>
|
|
|
+ </div>
|
|
|
+ <div class="brand-list-item" :style="isShow?'max-height:2.1rem;':'min-height:2.1rem;'" >
|
|
|
+ <div v-for="item in brandList">
|
|
|
+ <nuxt-link to="/">
|
|
|
+ <img :src="item.logoUrl ||'/images/component/default.png'"/>
|
|
|
+ </nuxt-link>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="detail-brand-content" >
|
|
|
+ <h4>主营产品</h4>
|
|
|
+ <div class="brand-list">
|
|
|
+ <div class="list-left">
|
|
|
+ <img :src="brandDetail.logoUrl || '/images/component/default.png'" :alt="brandDetail.nameEn"/>
|
|
|
+ <span>{{brandDetail.nameCn}}</span>
|
|
|
+ </div>
|
|
|
+ <p>{{brandDetail.series}}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="detail-brand" v-for="(item, index) in productList.components" v-if="productList.components">
|
|
|
+ <nuxt-link :to="'/mobile/brand/componentDetail/'+ item.uuid">
|
|
|
+ <div class="brand-item">
|
|
|
+ <p>型号：<span>{{item.code}}</span></p>
|
|
|
+ <p>品牌：<span>{{item.brand.nameCn}}</span></p>
|
|
|
+ <p>产品描述：<span>{{item.kind.nameCn}}</span></p>
|
|
|
+ <i class="iconfont icon-shoucang"></i>
|
|
|
+ </div>
|
|
|
+ </nuxt-link>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import { BrandList, DetailBrand, GoodList } from '~components/mobile/search'
|
|
|
export default {
|
|
|
layout: 'main',
|
|
|
data () {
|
|
|
@@ -20,7 +49,9 @@
|
|
|
count: '',
|
|
|
filter: {},
|
|
|
page: '',
|
|
|
- sorting: {}
|
|
|
+ sorting: {},
|
|
|
+ isShow: true,
|
|
|
+ isMove: ''
|
|
|
}
|
|
|
},
|
|
|
fetch ({store, route}) {
|
|
|
@@ -29,15 +60,21 @@
|
|
|
store.dispatch('searchData/searchForBrands', {collectList: 'goods_brand', keyword: route.query.w, paramJSON: {}})
|
|
|
])
|
|
|
},
|
|
|
- components: {
|
|
|
- BrandList,
|
|
|
- DetailBrand,
|
|
|
- GoodList
|
|
|
- },
|
|
|
computed: {
|
|
|
+ productList () {
|
|
|
+ return this.$store.state.searchData.searchList.lists.data
|
|
|
+ },
|
|
|
+ brandList () {
|
|
|
+ return this.$store.state.searchData.searchBrands.brands.data
|
|
|
+ },
|
|
|
brandDetail () {
|
|
|
return this.$store.state.searchData.searchDetail.detail.data
|
|
|
}
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ onclick () {
|
|
|
+ this.isShow = !this.isShow
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
@@ -47,22 +84,138 @@
|
|
|
width:100%;
|
|
|
margin-bottom: .98rem;
|
|
|
margin-top: .88rem;
|
|
|
- .search-item{
|
|
|
- justify-content: space-around;
|
|
|
- text-align: center;
|
|
|
- display:flex;
|
|
|
- span{
|
|
|
- display:inline-block;
|
|
|
- width:1.41rem;
|
|
|
- line-height: .76rem;
|
|
|
- font-size:.32rem;
|
|
|
- color:#666;
|
|
|
- }
|
|
|
- span.active{
|
|
|
- color:#3976f4;
|
|
|
- border-bottom:2px solid #3976f4;
|
|
|
- }
|
|
|
- }
|
|
|
+ .search-item{
|
|
|
+ justify-content: space-around;
|
|
|
+ text-align: center;
|
|
|
+ display:flex;
|
|
|
+ span{
|
|
|
+ display:inline-block;
|
|
|
+ width:1.41rem;
|
|
|
+ line-height: .76rem;
|
|
|
+ font-size:.32rem;
|
|
|
+ color:#666;
|
|
|
+ }
|
|
|
+ span.active{
|
|
|
+ color:#3976f4;
|
|
|
+ border-bottom:2px solid #3976f4;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .brand-list-content{
|
|
|
+ margin:0 auto;
|
|
|
+ border-top:.02rem solid #dedfdf;
|
|
|
+ border-bottom:.02rem solid #dedfdf;
|
|
|
+ width:7.1rem;
|
|
|
+ min-height:3.02rem;
|
|
|
+ overflow: hidden;
|
|
|
+ text-align: center;
|
|
|
+ padding-top:.33rem;
|
|
|
+ padding-bottom:.33rem;
|
|
|
+ .brand-list-top{
|
|
|
+ span:first-child{
|
|
|
+ font-size:.32rem;
|
|
|
+ margin-right:4.78rem;
|
|
|
+ }
|
|
|
+ span:last-child{
|
|
|
+ font-size:.28rem;
|
|
|
+ color:#53a0f7;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .brand-list-item{
|
|
|
+ justify-content: space-between;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ display:inline-flex;
|
|
|
+ overflow: hidden;
|
|
|
+ margin:0 .2rem;
|
|
|
+ img{
|
|
|
+ width:1.57rem;
|
|
|
+ height:.77rem;
|
|
|
+ margin-top:.2rem;
|
|
|
+ border-radius: .1rem;
|
|
|
+ border:.02rem solid #53a0f7;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .detail-brand-content{
|
|
|
+ margin:0 auto;
|
|
|
+ border-top:.02rem solid #dedfdf;
|
|
|
+ border-bottom:.02rem solid #dedfdf;
|
|
|
+ width:7.1rem;
|
|
|
+ height:3.02rem;
|
|
|
+ padding-top:.18rem;
|
|
|
+ h4{
|
|
|
+ font-size:.32rem;
|
|
|
+ line-height: .6rem;
|
|
|
+ margin:0;
|
|
|
+ margin-left:3.97rem;
|
|
|
+ }
|
|
|
+ .brand-list{
|
|
|
+ display:flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin:0 .15rem;
|
|
|
+ .list-left{
|
|
|
+ border:.02rem solid #418ef7;
|
|
|
+ border-radius: .05rem;
|
|
|
+ width:2.03rem;
|
|
|
+ height:1.73rem;
|
|
|
+ img{
|
|
|
+ display:block;
|
|
|
+ width:100%;
|
|
|
+ height:1.25rem;
|
|
|
+ }
|
|
|
+ span{
|
|
|
+ display: block;
|
|
|
+ font-size: .24rem;
|
|
|
+ color:#fff;
|
|
|
+ text-align: center;
|
|
|
+ width:100%;
|
|
|
+ background: #418ef7;
|
|
|
+ line-height: .45rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ p{
|
|
|
+ width:4.3rem;
|
|
|
+ font-size:.28rem;
|
|
|
+ line-height: .4rem;
|
|
|
+ padding:.12rem .46rem 0 .05rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .detail-brand{
|
|
|
+ background: #f8fcff;
|
|
|
+ width:100%;
|
|
|
+ min-height:1.5rem;
|
|
|
+ padding-top:.2rem;
|
|
|
+ .brand-item{
|
|
|
+ width:7rem;
|
|
|
+ margin:0 auto;
|
|
|
+ border-radius:.1rem;
|
|
|
+ background: #fff;
|
|
|
+ padding:.2rem;
|
|
|
+ position:relative;
|
|
|
+ p{
|
|
|
+ font-size:.28rem;
|
|
|
+ line-height:.4rem;
|
|
|
+ color:#333;
|
|
|
+ margin:0;
|
|
|
+ span{}
|
|
|
+ }
|
|
|
+ i{
|
|
|
+ display:block;
|
|
|
+ position:absolute;
|
|
|
+ top:.2rem;
|
|
|
+ right:.1rem;
|
|
|
+ font-size:.4rem;
|
|
|
+ color:#ff7800;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ div.active{
|
|
|
+ background: #d4d;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
</style>
|
wangcz