|
@@ -27,10 +27,32 @@
|
|
|
<p class="price descript">价格:<span style="color:red;font-size:16px"><small>¥</small>{{item.minprice}}</span> ~ <span style="color:red;font-size:16px"><small>¥</small>{{item.maxprice}}</span></p>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div class="group-item" v-for="item in productGroup" :key="item.sa_itemgroupid" @click="itemClick(item)">
|
|
|
+ <div class="top">
|
|
|
+ <el-image style="width:100%" :src="Object.keys(item.attinfos).length > 0 ? item.attinfos[0].url : ''" fit="cover" />
|
|
|
+ </div>
|
|
|
+ <div class="bottom">
|
|
|
+ <p class="title">{{item.groupname}}</p>
|
|
|
+ <p class="descript">{{item.groupnum}}</p>
|
|
|
+ <p class="descript"><span v-for="(cls,index) in item.itemclass" :key="cls.index">{{index === item.itemclass.length -1 ?cls.itemclassfullname:cls.itemclassfullname + ','}}</span></p>
|
|
|
+ <p class="price descript">价格:<span style="color:red;font-size:16px"><small>¥</small>{{item.minprice}}</span> ~ <span style="color:red;font-size:16px"><small>¥</small>{{item.maxprice}}</span></p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="group-item" v-for="item in productGroup" :key="item.sa_itemgroupid" @click="itemClick(item)">
|
|
|
+ <div class="top">
|
|
|
+ <el-image style="width:100%" :src="Object.keys(item.attinfos).length > 0 ? item.attinfos[0].url : ''" fit="cover" />
|
|
|
+ </div>
|
|
|
+ <div class="bottom">
|
|
|
+ <p class="title">{{item.groupname}}</p>
|
|
|
+ <p class="descript">{{item.groupnum}}</p>
|
|
|
+ <p class="descript"><span v-for="(cls,index) in item.itemclass" :key="cls.index">{{index === item.itemclass.length -1 ?cls.itemclassfullname:cls.itemclassfullname + ','}}</span></p>
|
|
|
+ <p class="price descript">价格:<span style="color:red;font-size:16px"><small>¥</small>{{item.minprice}}</span> ~ <span style="color:red;font-size:16px"><small>¥</small>{{item.maxprice}}</span></p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<el-empty description="暂无数据" v-else></el-empty>
|
|
|
- <div style="margin-top:16px;text-align:center">
|
|
|
+ <div style="text-align:center;padding-top:36px">
|
|
|
<el-pagination
|
|
|
background
|
|
|
small
|
|
@@ -164,21 +186,24 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
-@media only screen and (max-width: 1200px) {
|
|
|
+/* @media only screen and (max-width: 1200px) {
|
|
|
.gtc {
|
|
|
grid-template-columns: repeat(8, 1fr);
|
|
|
}
|
|
|
-}
|
|
|
+} */
|
|
|
.content{
|
|
|
- height:calc(100vh - 370px)
|
|
|
+ height:calc(100vh - 400px);
|
|
|
+ overflow-y: scroll;
|
|
|
}
|
|
|
.group .group-list {
|
|
|
- display: grid;
|
|
|
- column-gap: 24px;
|
|
|
+ /* display: grid; */
|
|
|
+ /* column-gap: 24px; */
|
|
|
box-sizing: border-box;
|
|
|
background-color: transparent;
|
|
|
- grid-template-columns: repeat(8, 1fr);
|
|
|
- padding:36px 0;
|
|
|
+ /* grid-template-columns: repeat(8, 1fr); */
|
|
|
+ padding-top:36px;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
}
|
|
|
.group .group-list .group-item {
|
|
|
min-width: 261px;
|
|
@@ -188,6 +213,7 @@ export default {
|
|
|
cursor: pointer;
|
|
|
overflow: hidden;
|
|
|
margin-bottom: 36px;
|
|
|
+ margin-right: 16px;
|
|
|
}
|
|
|
.group .group-list .group-item .el-image {
|
|
|
transition: transform 0.3s;
|