feat: 添加首页秒杀模块

merge-requests/17/head
xiaoguang 3 years ago
parent 69e6474f63
commit 528b973e52

Binary file not shown.

After

Width:  |  Height:  |  Size: 159 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 710 B

@ -91,4 +91,20 @@ $baseFontSize: 100 !default;
@mixin layout-box {
width: 1200px;
margin: 0 auto;
}
/*单行溢出*/
@mixin ellipsis {
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap
}
/*多行溢出*/
@mixin ellipses($line) {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: $line;
-webkit-box-orient: vertical;
}

2800
package-lock.json generated

File diff suppressed because it is too large Load Diff

@ -20,6 +20,7 @@
"core-js": "^3.19.3",
"element-ui": "^2.15.8",
"js-util-all": "^1.0.6",
"lodash": "^4.17.21",
"nuxt": "^2.15.8",
"vue": "^2.6.14",
"vue-server-renderer": "^2.6.14",

@ -6,16 +6,35 @@
* @Description: file content
-->
<template>
<div>
<div class="home">
<Banner />
<!-- <Seckil /> -->
<div class="home-wrap">
<Seckil v-if="true || seckillData.activityTimeVO" :data="seckillData" />
</div>
</div>
</template>
<script>
import { ApiGetHomeSeckill } from "@/plugins/api/seckill";
import Banner from "./module/Banner.vue";
import Seckil from "./module/Seckill.vue";
export default {
components: { Banner, Seckil },
async asyncData() {
//
const { result } = await ApiGetHomeSeckill();
return {
seckillData: result,
};
},
};
</script>
<style lang="scss" scoped>
.home {
background: #f8f8f8;
.home-wrap {
@include layout-box;
padding: 30px 0 30px 0;
}
}
</style>

@ -7,18 +7,218 @@
-->
<template>
<div>我是秒杀模块</div>
<div class="home-sckill flex">
<div class="home-sckill-bar" :style="{ backgroundImage: `url(${bkgUrl})` }">
<strong class="home-sckill-title">限时秒杀</strong>
<div class="home-sckill-wrap">
<div class="home-sckill-wrap__tip">
<strong>10:00</strong>
<span>点场 距结束</span>
</div>
<div class="home-sckill-wrap__countdown flex flex-middle flex-center">
<div class="sckill-wrap-countdown__time">{{ countdown.hour }}</div>
<span class="sckill-wrap-countdown--mark">:</span>
<div class="sckill-wrap-countdown__time">{{ countdown.minute }}</div>
<span class="sckill-wrap-countdown--mark">:</span>
<div class="sckill-wrap-countdown__time">{{ countdown.second }}</div>
</div>
</div>
</div>
<div class="home-sckill-carousel">
<el-carousel
height="260px"
arrow="always"
:autoplay="false"
:loop="false"
>
<el-carousel-item v-for="(item, index) in goodsList" :key="index">
<div class="carousel-goods flex">
<div
v-for="(itemChild, indexChild) in item"
:key="itemChild.productId"
class="carousel-goods-box flex flex-middle"
>
<div
v-if="indexChild !== 0"
class="carousel-goods-box--line"
></div>
<div class="carousel-goods-box__item">
<img
class="goods-box-item__cover"
:src="itemChild.productMainPicture"
/>
<div class="goods-box-item__wrap">
<p class="box-item-wrap__title">
{{ itemChild.productName }}
</p>
<strong class="box-item-wrap__price"
>{{ itemChild.activityPrice }}</strong
>
</div>
</div>
</div>
</div>
</el-carousel-item>
</el-carousel>
</div>
</div>
</template>
<script>
import _ from "lodash";
const CAROUSEL_COUNT = 5; //
export default {
name : 'Seckill',
data(){
return {
}
}
}
name: "HomeSeckill",
props: {
data: {
type: Object,
default: () => ({}),
},
},
data() {
return {
bkgUrl: require("~/assets/img/sckill/bkg-small.png"),
goodsList: [],
};
},
watch: {
data: {
deep: true,
immediate: true,
handler(val) {
const { activityProductListVO: products } = val;
if (products && products.length > 0) {
this.getFormatData(products);
}
},
},
},
computed: {
countdown() {
return {
hour: "01",
minute: "32",
second: "09",
};
},
},
methods: {
//
getFormatData(list) {
const listCopy = _.cloneDeep(list);
const part = Math.ceil(listCopy.length / CAROUSEL_COUNT);
if (part === 1) {
this.goodsList = [listCopy.splice(0, CAROUSEL_COUNT)];
return;
}
for (let i = 0; i < part; i++) {
const goodsListItem = listCopy.splice(0, CAROUSEL_COUNT);
this.goodsList.push(goodsListItem);
}
},
},
};
</script>
<style lang="scss" scoped>
</style>
.home-sckill {
height: 260px;
.home-sckill-bar {
width: 190px;
height: 100%;
padding: 45px 0 28px 0;
text-align: center;
color: #ffffff;
background-size: 100% 100%;
.home-sckill-title {
display: block;
font-size: 28px;
margin-bottom: 90px;
}
.home-sckill-wrap {
margin-bottom: 10px;
.home-sckill-wrap__tip {
font-size: 0;
strong {
font-size: 18px;
}
span {
font-size: 14px;
}
}
.home-sckill-wrap__countdown {
margin-top: 10px;
.sckill-wrap-countdown__time {
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
color: #ffffff;
font-size: 18px;
font-weight: bold;
background: #2f3430;
}
.sckill-wrap-countdown--mark {
display: block;
font-size: 20px;
margin: 0 8px;
}
}
}
}
.home-sckill-carousel {
/deep/.el-carousel {
width: 1010px;
.el-carousel__container {
padding: 0 10px;
background: #ffffff;
.el-carousel__arrow {
i {
font-size: 14px;
font-weight: bold;
}
&--left {
left: -11px;
}
&--right {
right: -11px;
}
}
}
.carousel-goods {
height: 100%;
.carousel-goods-box {
.carousel-goods-box--line {
height: 160px;
width: 1px;
background: #eeeeee;
}
.carousel-goods-box__item {
width: 198px;
padding: 20px 24px;
.goods-box-item__cover {
width: 150px;
height: 150px;
object-fit: productMainPicture;
margin-bottom: 14px;
}
.goods-box-item__wrap {
font-size: 14px;
color: #333333;
text-align: center;
.box-item-wrap__title {
@include ellipsis;
margin-bottom: 8px;
}
.box-item-wrap__price {
color: #ff512b;
text-align: center;
}
}
}
}
}
}
}
}
</style>

Loading…
Cancel
Save