|
|
@@ -56,29 +56,96 @@
|
|
|
<img src="@assets/home_ggw1.png" alt />
|
|
|
</div>
|
|
|
<div class="partTitle">
|
|
|
- <span class="orangeLine"></span>热门商品
|
|
|
+ <span class="orangeLine"></span>产品中心
|
|
|
<router-link to="/mall">
|
|
|
<span class="more">more<i class="el-icon-d-arrow-right"></i></span>
|
|
|
</router-link>
|
|
|
</div>
|
|
|
- <div class="rmspList">
|
|
|
- <router-link
|
|
|
- :to="`/shop/${item.companyId}/${item.id}`"
|
|
|
- class="product"
|
|
|
- v-for="item in products"
|
|
|
- :key="item.id"
|
|
|
+ <div class="categoryList bg-F5">
|
|
|
+ <el-carousel
|
|
|
+ :autoplay="false"
|
|
|
+ arrow="always"
|
|
|
+ indicator-position="none"
|
|
|
+ ref="carousel"
|
|
|
+ class=" marquee"
|
|
|
>
|
|
|
+ <el-carousel-item
|
|
|
+ v-for="(items, index) in categoryList"
|
|
|
+ :key="`carousel-categoryList-${index}`"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ v-for="({ title, remake, id }, index) in items"
|
|
|
+ :key="`categoryList${index}`"
|
|
|
+ class="item"
|
|
|
+ :class="{ curr: params.typeId === id }"
|
|
|
+ @click="params.typeId = params.typeId === id ? 0 : id"
|
|
|
+ >
|
|
|
+ <div class="img">
|
|
|
+ <img :src="`${$basePath}${remake}`" alt="" srcset="" />
|
|
|
+ </div>
|
|
|
+ <h3>{{ title }}</h3>
|
|
|
+ </div>
|
|
|
+ </el-carousel-item>
|
|
|
+ </el-carousel>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <load-more
|
|
|
+ class="productList"
|
|
|
+ url="/goods/info/page"
|
|
|
+ pageType="increase"
|
|
|
+ :params="params"
|
|
|
+ v-slot="{
|
|
|
+ item: { id, name, companyId, price, cover, companyName }
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <router-link :to="`/shop/${companyId}/${id}`" class="product">
|
|
|
<div class="imgDiv">
|
|
|
- <img :src="`${$basePath}${item.cover}`" />
|
|
|
+ <img :src="`${$basePath}${cover}`" />
|
|
|
</div>
|
|
|
- <a :title="item.name" class="name">{{ item.name }}</a>
|
|
|
+ <a :title="name" class="name">{{ name }}</a>
|
|
|
<div class="money">
|
|
|
¥
|
|
|
- <span>{{ item.price }}</span>
|
|
|
+ <span>{{ price }}</span>
|
|
|
</div>
|
|
|
- <div class="company ">{{ item.companyName }}</div>
|
|
|
+ <div class="company ">{{ companyName }}</div>
|
|
|
</router-link>
|
|
|
- </div>
|
|
|
+ </load-more>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col
|
|
|
+ :span="12"
|
|
|
+ v-for="(items, index) in products"
|
|
|
+ :key="`products${index}`"
|
|
|
+ class="products"
|
|
|
+ >
|
|
|
+ <div class="partTitle">
|
|
|
+ <span class="orangeLine"></span
|
|
|
+ >{{ index ? "热门商品" : "新品推荐" }}
|
|
|
+ <router-link :to="`/mall`">
|
|
|
+ <span class="more"
|
|
|
+ >more<i class="el-icon-d-arrow-right"></i
|
|
|
+ ></span>
|
|
|
+ </router-link>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <router-link
|
|
|
+ v-for="({ id, name, companyId, price, cover, companyName },
|
|
|
+ index) in items"
|
|
|
+ :key="`products-item-${index}`"
|
|
|
+ :to="`/shop/${companyId}/${id}`"
|
|
|
+ class="product"
|
|
|
+ >
|
|
|
+ <div class="imgDiv">
|
|
|
+ <img :src="`${$basePath}${cover}`" />
|
|
|
+ </div>
|
|
|
+ <a :title="name" class="name">{{ name }}</a>
|
|
|
+ <div class="money">
|
|
|
+ ¥
|
|
|
+ <span>{{ price }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="company ">{{ companyName }}</div>
|
|
|
+ </router-link>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
<div class="partTitle ppsj">
|
|
|
<span class="orangeLine"></span>品牌商家
|
|
|
<router-link to="/shops" class="more"
|
|
|
@@ -190,11 +257,16 @@
|
|
|
</template>
|
|
|
<script lang="ts">
|
|
|
import { Component, Vue, Watch, Prop } from "vue-property-decorator";
|
|
|
+import menu from "@/store/modules/menu";
|
|
|
+import { chunk } from "lodash";
|
|
|
@Component
|
|
|
export default class extends Vue {
|
|
|
+ private params = {
|
|
|
+ typeId: 0
|
|
|
+ };
|
|
|
+ private products: IAny[][] = [];
|
|
|
private notices: IAny[] = [];
|
|
|
private infos: IAny[] = [];
|
|
|
- private products: IAny[] = [];
|
|
|
private shops: IAny[] = [];
|
|
|
private fwList: Array<{
|
|
|
img: string;
|
|
|
@@ -231,7 +303,7 @@ export default class extends Vue {
|
|
|
.split(",")
|
|
|
.map(url => this.$post(url.trim()));
|
|
|
const [
|
|
|
- { list: p },
|
|
|
+ { newList, hotlist },
|
|
|
{ demandList: d },
|
|
|
{ supplyList: s },
|
|
|
{ list: shops },
|
|
|
@@ -246,7 +318,7 @@ export default class extends Vue {
|
|
|
})
|
|
|
)
|
|
|
]).then(x => x.map(([, data]) => data));
|
|
|
- this.products = p;
|
|
|
+ this.products = [newList, hotlist];
|
|
|
this.infos = [d, s];
|
|
|
this.shops = shops;
|
|
|
[companyNum, goodsNum, memberNum].forEach(
|
|
|
@@ -254,6 +326,9 @@ export default class extends Vue {
|
|
|
);
|
|
|
this.notices = n.map(({ list }) => list);
|
|
|
}
|
|
|
+ get categoryList() {
|
|
|
+ return chunk(menu.pList, 6);
|
|
|
+ }
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
@@ -295,6 +370,45 @@ export default class extends Vue {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+.categoryList {
|
|
|
+ height: 100px;
|
|
|
+ overflow: hidden;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ .item {
|
|
|
+ width: 180px;
|
|
|
+ height: 100%;
|
|
|
+ float: left;
|
|
|
+ overflow: hidden;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: #fff;
|
|
|
+ padding: 10px;
|
|
|
+ margin-left: 16px;
|
|
|
+ &:first-child {
|
|
|
+ margin-left: 0;
|
|
|
+ }
|
|
|
+ &.curr {
|
|
|
+ border: 1px solid red;
|
|
|
+ }
|
|
|
+ .img {
|
|
|
+ height: 60px;
|
|
|
+ position: relative;
|
|
|
+ cursor: pointer;
|
|
|
+ img {
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ max-width: 80%;
|
|
|
+ max-height: 80%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ h3 {
|
|
|
+ line-height: 20px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
.partTitle {
|
|
|
padding: 3rem 0 2rem 0;
|
|
|
font-size: 1.8rem;
|
|
|
@@ -411,61 +525,75 @@ export default class extends Vue {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-.rmspList {
|
|
|
+.products {
|
|
|
+ .product {
|
|
|
+ width: 275px;
|
|
|
+ &:nth-child(2n + 1) {
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.productList {
|
|
|
.product {
|
|
|
- display: inline-block;
|
|
|
width: 216px;
|
|
|
- height: 340px;
|
|
|
- background: #fff;
|
|
|
- overflow: hidden;
|
|
|
- margin-right: 20px;
|
|
|
- margin-bottom: 1rem;
|
|
|
- border-radius: 0.4rem;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 2rem;
|
|
|
&:nth-child(5n + 5) {
|
|
|
margin-right: 0;
|
|
|
}
|
|
|
- .imgDiv {
|
|
|
- border: 0.1rem solid #e5e5e5;
|
|
|
- width: 175px;
|
|
|
- height: 200px;
|
|
|
- text-align: center;
|
|
|
- line-height: 0;
|
|
|
- position: relative;
|
|
|
- img {
|
|
|
- width: 90%;
|
|
|
- position: absolute;
|
|
|
- top: 50%;
|
|
|
- left: 50%;
|
|
|
- transform: translate(-50%, -50%);
|
|
|
- }
|
|
|
- }
|
|
|
- .name {
|
|
|
- font-size: 1.4rem;
|
|
|
- color: #333;
|
|
|
- font-weight: bold;
|
|
|
- margin-top: 15px;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- white-space: nowrap;
|
|
|
- display: block;
|
|
|
- }
|
|
|
- .money {
|
|
|
- font-size: 1.2rem;
|
|
|
- margin-top: 5px;
|
|
|
- color: #fd5522;
|
|
|
- span {
|
|
|
- font-size: 1.8rem;
|
|
|
- }
|
|
|
+ }
|
|
|
+}
|
|
|
+.product {
|
|
|
+ display: inline-block;
|
|
|
+
|
|
|
+ height: 340px;
|
|
|
+ background: #fff;
|
|
|
+ overflow: hidden;
|
|
|
+ margin-right: 20px;
|
|
|
+ margin-bottom: 1rem;
|
|
|
+ border-radius: 0.4rem;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 2rem;
|
|
|
+
|
|
|
+ .imgDiv {
|
|
|
+ border: 0.1rem solid #e5e5e5;
|
|
|
+ width: 100%;
|
|
|
+ height: 60%;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 0;
|
|
|
+ position: relative;
|
|
|
+ img {
|
|
|
+ max-width: 90%;
|
|
|
+ max-height: 90%;
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
}
|
|
|
- .company {
|
|
|
- margin-top: 10px;
|
|
|
- font-size: 1.2rem;
|
|
|
- color: #666;
|
|
|
+ }
|
|
|
+ .name {
|
|
|
+ font-size: 1.4rem;
|
|
|
+ color: #333;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-top: 15px;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ .money {
|
|
|
+ font-size: 1.2rem;
|
|
|
+ margin-top: 5px;
|
|
|
+ color: #fd5522;
|
|
|
+ span {
|
|
|
+ font-size: 1.8rem;
|
|
|
}
|
|
|
}
|
|
|
+ .company {
|
|
|
+ margin-top: 10px;
|
|
|
+ font-size: 1.2rem;
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
}
|
|
|
+
|
|
|
.xqgy {
|
|
|
overflow: hidden;
|
|
|
// height: 430px;
|