first commit
This commit is contained in:
wangxiaowei
114
components/diy/article/article.vue
Normal file
114
components/diy/article/article.vue
Normal file
@ -0,0 +1,114 @@
|
||||
<template>
|
||||
<view class="diy-article">
|
||||
<!--文章列表-->
|
||||
<view class="article-item" v-for="(item, index) in listData" :class="'show-type__'+ itemData.style.display"
|
||||
:key="index" @click="gotoPageFunc(item)">
|
||||
<!-- 有图模式 -->
|
||||
<template v-if="itemData.style.display == 10">
|
||||
<view class="picture mr15" v-if="item.image!=null&&item.image.file_path!=''">
|
||||
<image :src="item.image.file_path" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="d-b-c d-stretch d-c flex-1">
|
||||
<view class="text-ellipsis-2 f24">
|
||||
{{ item.article_title }}
|
||||
</view>
|
||||
<view class="d-b-c gray9 f18">
|
||||
<view>
|
||||
<text class="icon iconfont icon-chakan"></text>
|
||||
<text class="ml10">{{ item.actual_views }}</text>
|
||||
</view>
|
||||
<view><text class="icon iconfont icon-daojishi mr10"></text>{{format(item.create_time)}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<!-- 无图模式-->
|
||||
<template v-if="itemData.style.display == 20">
|
||||
<view class="f24 text-ellipsis-2 lh200">
|
||||
{{ item.article_title }}
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
/*数据列表*/
|
||||
listData: []
|
||||
};
|
||||
},
|
||||
props: ['itemData'],
|
||||
created() {
|
||||
this.listData = this.itemData.data;
|
||||
},
|
||||
methods: {
|
||||
|
||||
/*跳转页面*/
|
||||
gotoPageFunc(e) {
|
||||
let _url = 'pages/article/detail/detail?article_id=' + e.article_id;
|
||||
this.gotoPage(_url);
|
||||
},
|
||||
add0(m) {
|
||||
return m < 10 ? '0' + m : m
|
||||
},
|
||||
format(t) {
|
||||
//shijianchuo是整数，否则要parseInt转换
|
||||
var time = new Date(t);
|
||||
var y = time.getFullYear();
|
||||
var m = time.getMonth() + 1;
|
||||
var d = time.getDate();
|
||||
return y + '-' + this.add0(m) + '-' + this.add0(d);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.diy-article {
|
||||
background: #ffffff;
|
||||
margin: 20rpx;
|
||||
border-radius: 6rpx;
|
||||
padding: 0 30rpx;
|
||||
box-shadow: 0px 8rpx 3rpx 0px rgba(6, 0, 1, 0.03);
|
||||
}
|
||||
|
||||
.diy-article .show-type__10,
|
||||
.diy-article .show-type__20 {
|
||||
display: flex;
|
||||
padding: 30rpx 0;
|
||||
border-bottom: 1rpx solid #eeeeee;
|
||||
}
|
||||
|
||||
.diy-article .show-type__10:last-child,
|
||||
.diy-article .show-type__20:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.diy-article .show-type__10 .picture {
|
||||
width: 246rpx;
|
||||
height: 140rpx;
|
||||
border-radius: 12rpx;
|
||||
|
||||
}
|
||||
|
||||
.diy-article .show-type__10 .title {
|
||||
height: 80rpx;
|
||||
}
|
||||
|
||||
.diy-article .show-type__10 .des {
|
||||
height: 36rpx;
|
||||
}
|
||||
|
||||
.diy-article image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.diy-article .show-type__10 .icon.iconfont {
|
||||
font-size: 18rpx;
|
||||
color: #999999;
|
||||
}
|
||||
</style>
|
||||
211
components/diy/assembleProduct/assembleProduct.vue
Normal file
211
components/diy/assembleProduct/assembleProduct.vue
Normal file
@ -0,0 +1,211 @@
|
||||
<template>
|
||||
<view class="diy-assembleproduct" v-if="itemData.data.product_list.length>0">
|
||||
<view class="diy-head d-b-c" :style="'background-image: url('+itemData.style.background_image+');'">
|
||||
<view class="right" @click="gotoList">
|
||||
<text class="f26 gray3">更多</text>
|
||||
<text class="iconfont icon-jiantou"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="diy-body">
|
||||
<scroll-view scroll-x="true">
|
||||
<view class="product-list column__3">
|
||||
<view class="product-item" v-for="(item, index) in itemData.data.product_list" :key="index"
|
||||
@click="gotoDetail(item)">
|
||||
<!-- 两列三列 -->
|
||||
<template>
|
||||
<view class="product-title text-ellipsis-2" v-if="itemData.style.show.productName === true">
|
||||
{{ item.product.product_name }}
|
||||
</view>
|
||||
<view class="d-b-c">
|
||||
<view class="product-cover pr">
|
||||
<image :src="item.product.file_path" mode="aspectFit"></image>
|
||||
<view class="assemble-num"><text>{{ item.assemble_num }}人团</text></view>
|
||||
</view>
|
||||
<view class="flex-1">
|
||||
<view class="product-info p-0-10">
|
||||
<view class="product-price" v-if="itemData.style.show.assemblePrice == true">
|
||||
<view class="mb10">
|
||||
<text class="theme-price fb f18">¥</text>
|
||||
<text class="theme-price fb f26">{{ item.assemble_price }}</text>
|
||||
</view>
|
||||
<view class="gray9 text-d-line f20"
|
||||
v-if="itemData.style.show.linePrice == true">¥{{ item.product_price }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="assemble_btn theme-btn">去开团</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
props: ['itemData'],
|
||||
created() {
|
||||
console.log(this.$props.itemData)
|
||||
},
|
||||
methods: {
|
||||
scroll(e) {},
|
||||
|
||||
/*跳转列表*/
|
||||
gotoList() {
|
||||
let url = '/pages/plus/assemble/list/list';
|
||||
this.gotoPage(url);
|
||||
},
|
||||
|
||||
/*跳转产品详情*/
|
||||
gotoDetail(e) {
|
||||
let url = '/pages/plus/assemble/detail/detail?assemble_product_id=' + e.assemble_product_id;
|
||||
this.gotoPage(url);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.diy-assembleproduct {
|
||||
margin: 20rpx;
|
||||
border-radius: 6rpx;
|
||||
padding: 0 20rpx 20rpx;
|
||||
@include background_color('bg-assemb');
|
||||
box-shadow: 0px 8rpx 3rpx 0px rgba(6, 0, 1, 0.03);
|
||||
}
|
||||
|
||||
.diy-assembleproduct .diy-head {
|
||||
height: 90rpx;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
background-size: 100% 100%;
|
||||
|
||||
}
|
||||
|
||||
.diy-assembleproduct .diy-head .name {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.diy-assembleproduct .diy-head .datetime {
|
||||
margin-left: 40rpx;
|
||||
}
|
||||
|
||||
.diy-assembleproduct .diy-head .datetime::v-deep>span {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.diy-assembleproduct .diy-head .datetime::v-deep text {
|
||||
font-size: 24rpx;
|
||||
color: #F6220C;
|
||||
}
|
||||
|
||||
.diy-assembleproduct .diy-head .datetime::v-deep .box {
|
||||
padding: 4rpx;
|
||||
font-size: 22rpx;
|
||||
background: #F6220C;
|
||||
color: #F6220C;
|
||||
}
|
||||
|
||||
.diy-assembleproduct .diy-head .icon-jiantou {
|
||||
margin-left: 8rpx;
|
||||
color: #333333;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.diy-assembleproduct .product-list {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.diy-assembleproduct .product-list .product-item {
|
||||
flex-shrink: 0;
|
||||
border-radius: 12rpx;
|
||||
width: 442rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.diy-assembleproduct .product-list image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #f6f6f6;
|
||||
}
|
||||
|
||||
.diy-assembleproduct .product-list .product-title {
|
||||
font-size: 24rpx;
|
||||
line-height: 36rpx;
|
||||
color: #333333;
|
||||
height: 72rpx;
|
||||
}
|
||||
|
||||
.diy-assembleproduct .product-list .product-price {
|
||||
margin-bottom: 16rpx;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.diy-assembleproduct .product-list.column__3 .product-title {
|
||||
font-size: 24rpx;
|
||||
line-height: 36rpx;
|
||||
color: #333333;
|
||||
height: 72rpx;
|
||||
margin-bottom: 14rpx;
|
||||
}
|
||||
|
||||
.diy-assembleproduct .product-list.column__2,
|
||||
.diy-assembleproduct .product-list.column__3 {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.diy-assembleproduct .product-list .assemble-num {
|
||||
padding: 4rpx 16rpx;
|
||||
font-size: 24rpx;
|
||||
color: #ffffff;
|
||||
position: absolute;
|
||||
bottom: 2rpx;
|
||||
left: 2rpx;
|
||||
background: linear-gradient(60deg, #FC4528 0%, #FC573C 43%, #FC7639 100%);
|
||||
border-top-left-radius: 12rpx;
|
||||
border-bottom-right-radius: 12rpx;
|
||||
height: 33rpx;
|
||||
line-height: 33rpx;
|
||||
}
|
||||
|
||||
.diy-assembleproduct .column__3 .product-item {
|
||||
width: 442rpx;
|
||||
margin-right: 20rpx;
|
||||
padding: 21rpx 28rpx;
|
||||
box-sizing: border-box;
|
||||
@include background_linear('bg-assemb2', 'text_color1', 180deg, 0%, 100%);
|
||||
box-shadow: 0px 8rpx 3rpx 0px rgba(6, 0, 1, 0.03);
|
||||
}
|
||||
|
||||
.diy-assembleproduct .column__3 .product-cover {
|
||||
width: 126rpx;
|
||||
height: 126rpx;
|
||||
margin: 0 auto;
|
||||
border-radius: 5rpx;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
margin-right: 22rpx;
|
||||
}
|
||||
|
||||
.diy-assembleproduct .column__3 .assemble_btn {
|
||||
width: 126rpx;
|
||||
height: 40rpx;
|
||||
font-size: 20rpx;
|
||||
text-align: center;
|
||||
border-radius: 24rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
122
components/diy/banner/banner.vue
Normal file
122
components/diy/banner/banner.vue
Normal file
@ -0,0 +1,122 @@
|
||||
<template>
|
||||
<view class="diy-banner-box mb20 pr" :class="itemData.style.imgShape"
|
||||
:style="'background-color:'+itemData.style.background+';'">
|
||||
<swiper class="swiper" :autoplay="autoplay" :interval="interval" :duration="duration" @change="changeSwiper" :style="itemData.style.imgShape=='square'?'height:'+itemData.style.height+'rpx;':'height:'+(itemData.style.height*0.92)+'rpx;'">
|
||||
<swiper-item v-for="(item,index) in itemData.data" :key="index" @click="gotoPages(item)">
|
||||
<image :style="itemData.style.imgShape=='square'?'height:'+itemData.style.height+'rpx;':'height:'+(itemData.style.height*0.92)+'rpx;'" :src="item.imgUrl"></image>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view class="swiper-dots ww100 d-c-c" :class="itemData.style.btnShape">
|
||||
<view :class="current==index?'swiper-dot active':'swiper-dot'" v-for="(item,index) in itemData.data"
|
||||
:style="current==index?'background-color:'+indicatorActiveColor+';':''" :key="index">
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
indicatorDots: true,
|
||||
autoplay: true,
|
||||
interval: 2000,
|
||||
duration: 500,
|
||||
indicatorActiveColor: '#ffffff',
|
||||
current: 0
|
||||
}
|
||||
},
|
||||
props: ['itemData'],
|
||||
created() {
|
||||
this.interval = this.itemData.params.interval;
|
||||
this.indicatorActiveColor = this.itemData.style.btnColor;
|
||||
},
|
||||
methods: {
|
||||
changeSwiper(e) {
|
||||
this.current = e.detail.current;
|
||||
},
|
||||
/*跳转页面*/
|
||||
gotoPages(e) {
|
||||
this.gotoPage(e.linkUrl);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.diy-banner-box{
|
||||
overflow: hidden;
|
||||
}
|
||||
.diy-banner-box,
|
||||
.diy-banner-box .swiper {
|
||||
width: 750rpx;
|
||||
|
||||
/* background-color: #FFFFFF; */
|
||||
}
|
||||
|
||||
.diy-banner-box.round,
|
||||
.diy-banner-box.round .swiper {
|
||||
width: 750rpx;
|
||||
/* background-color: #FFFFFF; */
|
||||
}
|
||||
|
||||
.diy-banner-box image {
|
||||
width: 750rpx;
|
||||
}
|
||||
.diy-banner-box.round{
|
||||
padding: 30rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.diy-banner-box.round image {
|
||||
width: 690rpx;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.diy-banner-box.round .swiper-dots {
|
||||
position: absolute;
|
||||
bottom: 40rpx;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.diy-banner-box.square .swiper-dots {
|
||||
position: absolute;
|
||||
bottom: 20rpx;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.swiper-dots.square .swiper-dot {
|
||||
width: 14rpx;
|
||||
height: 14rpx;
|
||||
margin: 0 4rpx;
|
||||
background: #ebedf0;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.swiper-dots.round .swiper-dot {
|
||||
width: 22rpx;
|
||||
height: 22rpx;
|
||||
margin: 0 4rpx;
|
||||
background: #ebedf0;
|
||||
opacity: 0.3;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.swiper-dots.rectangle .swiper-dot {
|
||||
width: 40rpx;
|
||||
height: 6rpx;
|
||||
margin: 0 4rpx;
|
||||
background: #ebedf0;
|
||||
opacity: 0.3;
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
|
||||
.swiper-dots.round .swiper-dot.active,
|
||||
.swiper-dots.square .swiper-dot.active,
|
||||
.swiper-dots.rectangle .swiper-dot.active {
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
190
components/diy/bargainProduct/bargainProduct.vue
Normal file
190
components/diy/bargainProduct/bargainProduct.vue
Normal file
@ -0,0 +1,190 @@
|
||||
<template>
|
||||
<view class="diy-bargainProduct" v-if="itemData.data.product_list.length>0">
|
||||
<view class="bargainProduct-head d-b-c" :style="'background-image: url('+itemData.style.background_image+');'">
|
||||
<view class="left d-s-c">
|
||||
<view class="name color_bargain d-c-c">
|
||||
</view>
|
||||
<view class="datetime d-s-c ml20">
|
||||
<Countdown :back_color="itemData.style.countdown_back_color" :color='itemData.style.color'
|
||||
:cut_color="itemData.style.countdown_color" :config="countdownConfig"></Countdown>
|
||||
</view>
|
||||
</view>
|
||||
<view class="right" @click="gotoList">
|
||||
<text class="f26 color_bargain ">更多</text>
|
||||
<text class="iconfont icon-jiantou mr20"
|
||||
style="font-size: 22rpx;margin-left: 4rpx;color: #333333;"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bargainProduct-body">
|
||||
<scroll-view scroll-x="true">
|
||||
<view class="product-list column__3">
|
||||
<view class="product-item" v-for="(item, index) in itemData.data.product_list" :key="index"
|
||||
@click="gotoDetail(item.bargain_product_id)">
|
||||
<!-- 两列三列 -->
|
||||
<template>
|
||||
<view class="product-cover">
|
||||
<image :src="item.product.file_path" mode="aspectFit"></image>
|
||||
</view>
|
||||
<view class="product-info p-0-10">
|
||||
<view v-if="itemData.style.show.floorPrice == '1'" class="theme-price mb10">
|
||||
<text class="f18">¥</text>
|
||||
<text class="f26 fb">{{ item.bargain_price }}</text>
|
||||
</view>
|
||||
<view class="gray9 text-d-line f20" v-if="itemData.style.show.originalPrice == '1'">
|
||||
¥{{ item.product_price }}
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Countdown from '@/components/countdown/countdown-act.vue';
|
||||
export default {
|
||||
components: {
|
||||
Countdown
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
/*倒计时配置*/
|
||||
countdownConfig: {
|
||||
/*开始时间*/
|
||||
startstamp: 0,
|
||||
/*结束时间*/
|
||||
endstamp: 0,
|
||||
/*标题*/
|
||||
title: ' '
|
||||
}
|
||||
};
|
||||
},
|
||||
props: ['itemData'],
|
||||
created() {
|
||||
this.countdownConfig.endstamp = this.itemData.data.end_time;
|
||||
this.countdownConfig.startstamp = this.itemData.data.start_time;
|
||||
},
|
||||
methods: {
|
||||
scroll(e) {},
|
||||
|
||||
/*跳转列表*/
|
||||
gotoList() {
|
||||
let url = '/pages/plus/bargain/list/list';
|
||||
this.gotoPage(url);
|
||||
},
|
||||
|
||||
/*跳转详情*/
|
||||
gotoDetail(e) {
|
||||
let url = '/pages/plus/bargain/detail/detail?bargain_product_id=' + e;
|
||||
this.gotoPage(url);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.color_bargain {
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.diy-bargainProduct {
|
||||
margin: 20rpx;
|
||||
border-radius: 6rpx;
|
||||
@include background_linear('bg-bargain', 'text_color1', 180deg, 0%, 100%);
|
||||
overflow: hidden;
|
||||
box-shadow: 0px 8rpx 3rpx 0px rgba(6, 0, 1, 0.03);
|
||||
}
|
||||
|
||||
.diy-bargainProduct .bargainProduct-body {
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
|
||||
.bargainProduct-head {
|
||||
height: 90rpx;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.bargainProduct-head .name {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
width: 200rpx;
|
||||
}
|
||||
|
||||
.bargainProduct-head .datetime::v-deep>span {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.bargainProduct-head .datetime::v-deep text {
|
||||
font-size: 24rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.bargainProduct-head .datetime::v-deep .box {
|
||||
padding: 4rpx 10rpx;
|
||||
font-size: 22rpx;
|
||||
background: #FFFFFF;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.diy-bargainProduct .product-list image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.diy-bargainProduct .product-list .product-title {
|
||||
margin-top: 32rpx;
|
||||
height: 40rpx;
|
||||
line-height: 40rpx;
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.diy-bargainProduct .product-list .price {
|
||||
height: 24rpx;
|
||||
line-height: 24rpx;
|
||||
}
|
||||
|
||||
.diy-bargainProduct .product-list.column__3 {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-start;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.diy-bargainProduct .column__3 .product-item {
|
||||
width: 132rpx;
|
||||
margin-right: 46rpx;
|
||||
border-radius: 6rpx;
|
||||
overflow: hidden;
|
||||
margin-top: 20rpx;
|
||||
padding-bottom: 16rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.diy-bargainProduct .column__3 .product-cover {
|
||||
width: 132rpx;
|
||||
height: 132rpx;
|
||||
margin: 0 auto;
|
||||
border-radius: 6rpx;
|
||||
overflow: hidden;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.bargain_btn {
|
||||
background: #fe3c30;
|
||||
width: 202rpx;
|
||||
height: 46rpx;
|
||||
line-height: 46rpx;
|
||||
font-size: 22rpx;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
margin: 0 auto;
|
||||
border-radius: 24rpx;
|
||||
margin-bottom: 28rpx;
|
||||
}
|
||||
</style>
|
||||
18
components/diy/blank/blank.vue
Normal file
18
components/diy/blank/blank.vue
Normal file
@ -0,0 +1,18 @@
|
||||
<template>
|
||||
<view class="diy-blank" :style="{height: itemData.style.height +'px', background:itemData.style.background }">
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
props: ['itemData'],
|
||||
methods: {}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
223
components/diy/coupon/coupon.vue
Normal file
223
components/diy/coupon/coupon.vue
Normal file
@ -0,0 +1,223 @@
|
||||
<template>
|
||||
<view class="diy-coupon"
|
||||
:style="{ background: itemData.style.background, padding: itemData.style.paddingTop + 'px 20rpx' }">
|
||||
<scroll-view scroll-x="true">
|
||||
<view class="swiper swiper-list">
|
||||
<view class="coupon-item d-b-c" :class="'bg-' + item.color.text" v-for="(item, index) in listData"
|
||||
:key="index">
|
||||
<view class="side-line left-side-line"><text class="round"
|
||||
:style="{ background: itemData.style.background}"></text></view>
|
||||
<view class="side-line right-side-line"><text class="round"
|
||||
:style="{ background: itemData.style.background}"></text></view>
|
||||
<view class="center-content pr">
|
||||
<view class="content-top">
|
||||
<template v-if="item.coupon_type.value == 10">
|
||||
<text class="f40">{{ item.reduce_price*1 }}</text>
|
||||
</template>
|
||||
<template v-if="item.coupon_type.value == 20">
|
||||
<text class="f40">{{ item.discount }}</text>
|
||||
<text class="f24">折</text>
|
||||
</template>
|
||||
</view>
|
||||
<view class="content-bottom tc">
|
||||
<text class="f20">{{item.min_price>0?'满'+item.min_price*1+'元可用':'无门槛'}}</text>
|
||||
</view>
|
||||
<view class="op8 f20 tc text-ellipsis">
|
||||
<text v-if="item.apply_range==10">全品类券</text>
|
||||
<text v-if="item.apply_range==20">指定商品可用</text>
|
||||
<text v-if="item.apply_range==30">指定品类可用</text>
|
||||
</view>
|
||||
</view>
|
||||
<!--领取-->
|
||||
<view v-if="item.state.value == 1" class="right-receive" @click="receiveCoupon(index)">
|
||||
<view class="lr-tb">立即领取</view>
|
||||
</view>
|
||||
<view v-else class="right-receive">
|
||||
<view class="lr-tb">{{ item.state.text }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
/*是否显示点*/
|
||||
indicatorDots: false,
|
||||
/*是否自动*/
|
||||
autoplay: true,
|
||||
/*切换时间*/
|
||||
interval: 5000,
|
||||
/*动画过渡时间*/
|
||||
duration: 1000,
|
||||
/*数据列表*/
|
||||
listData: []
|
||||
};
|
||||
},
|
||||
props: ['itemData'],
|
||||
created() {
|
||||
this.listData = this.itemData.data;
|
||||
},
|
||||
methods: {
|
||||
scroll(e) {},
|
||||
/**
|
||||
* 领取优惠券
|
||||
*/
|
||||
receiveCoupon: function(index) {
|
||||
let self = this;
|
||||
let item = self.listData[index];
|
||||
if (item.state.value == 0) {
|
||||
return false;
|
||||
}
|
||||
self._post(
|
||||
'user.coupon/receive', {
|
||||
coupon_id: item.coupon_id
|
||||
},
|
||||
function(result) {
|
||||
uni.showToast({
|
||||
title: '领取成功',
|
||||
icon: 'success',
|
||||
mask: true,
|
||||
duration: 2000
|
||||
});
|
||||
item.state.value = 0;
|
||||
item.state.text = '已领取';
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.diy-coupon {
|
||||
margin: 0 20rpx;
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
|
||||
.f-s-0 {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.diy-coupon .swiper {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.diy-coupon .coupon-item {
|
||||
width: 254rpx;
|
||||
height: 154rpx;
|
||||
color: #ffffff;
|
||||
flex-shrink: 0;
|
||||
margin: 8rpx;
|
||||
position: relative;
|
||||
border-radius: 8rpx;
|
||||
overflow: hidden;
|
||||
@include background_color("bg-coupon");
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.diy-coupon .coupon-item .left-type {
|
||||
padding: 4rpx 8rpx;
|
||||
font-size: 18rpx;
|
||||
line-height: 18rpx;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
color: #ffffff;
|
||||
background: linear-gradient(to right, #ff5b00, #fe8802);
|
||||
border-bottom-left-radius: 8rpx;
|
||||
}
|
||||
|
||||
.diy-coupon .left-side-line {
|
||||
position: absolute;
|
||||
width: 24rpx;
|
||||
top: -14rpx;
|
||||
right: 42rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.diy-coupon .right-side-line {
|
||||
position: absolute;
|
||||
width: 24rpx;
|
||||
bottom: -14rpx;
|
||||
right: 42rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.diy-coupon .side-line .round {
|
||||
display: block;
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.diy-coupon .center-content::before {
|
||||
top: 0;
|
||||
right: -16rpx;
|
||||
border-radius: 0 0 15rpx 15rpx;
|
||||
}
|
||||
|
||||
.diy-coupon .coupon-item .center-content {
|
||||
padding: 26rpx 23rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
width: 200rpx;
|
||||
height: 154rpx;
|
||||
box-sizing: border-box;
|
||||
@include font_color('text-coupon');
|
||||
}
|
||||
|
||||
.diy-coupon .coupon-item .center-content .content-top {
|
||||
height: 28rpx;
|
||||
line-height: 28rpx;
|
||||
text-align: center;
|
||||
margin-bottom: 8rpx;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.diy-coupon .coupon-item .center-content .content-datatime {
|
||||
padding: 4rpx 10rpx;
|
||||
border-radius: 30rpx;
|
||||
font-size: 20rpx;
|
||||
background: rgba(0, 0, 0, .2);
|
||||
}
|
||||
|
||||
.diy-coupon .coupon-item .right-receive {
|
||||
height: 112rpx;
|
||||
width: 52rpx;
|
||||
text-align: center;
|
||||
font-size: 18rpx;
|
||||
line-height: 20rpx;
|
||||
text-align: center;
|
||||
flex-shrink: 0;
|
||||
@include font_color('text-coupon');
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-left: 1rpx dashed #ffffff;
|
||||
|
||||
.lr-tb {
|
||||
width: 26rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.diy-coupon .coupon-item .no-receive {
|
||||
background: #acacac !important;
|
||||
color: #ffffff;
|
||||
}
|
||||
.op8{
|
||||
opacity: 0.8;
|
||||
}
|
||||
</style>
|
||||
176
components/diy/diy.vue
Normal file
176
components/diy/diy.vue
Normal file
@ -0,0 +1,176 @@
|
||||
<template>
|
||||
<view>
|
||||
<block v-for="(item,index) in diyItems" :key="index">
|
||||
|
||||
<!--搜索框-->
|
||||
<!-- <template v-if="item.type==='search'">
|
||||
<search :itemData="item"></search>
|
||||
</template> -->
|
||||
|
||||
<!--轮播图-->
|
||||
<template v-if="item.type==='banner'&&item.data!=null">
|
||||
<banner :itemData="item"></banner>
|
||||
</template>
|
||||
|
||||
<!--单组图-->
|
||||
<template v-if="item.type==='imageSingle'&&item.data!=null">
|
||||
<imagesingle :itemData="item"></imagesingle>
|
||||
</template>
|
||||
|
||||
<!-- 橱窗-->
|
||||
<template v-if="item.type == 'window'&&item.data!=null">
|
||||
<windows :itemData="item"></windows>
|
||||
</template>
|
||||
|
||||
<!-- 视频组-->
|
||||
<template v-if="item.type == 'video'">
|
||||
<videos :itemData="item"></videos>
|
||||
</template>
|
||||
|
||||
<!--文章-->
|
||||
<template v-if="item.type == 'article'&&item.data!=null">
|
||||
<articles :itemData="item"></articles>
|
||||
</template>
|
||||
|
||||
<!--头条快报-->
|
||||
<template v-if="item.type == 'special'&&item.data!=null">
|
||||
<special :itemData="item"></special>
|
||||
</template>
|
||||
|
||||
<!--公告组-->
|
||||
<template v-if="item.type == 'notice'">
|
||||
<notice :itemData="item"></notice>
|
||||
</template>
|
||||
<!--标题组-->
|
||||
<template v-if="item.type == 'title'">
|
||||
<titles :itemData="item"></titles>
|
||||
</template>
|
||||
<!--导航组-->
|
||||
<template v-if="item.type==='navBar'&&item.data!=null">
|
||||
<navBar :itemData="item"></navBar>
|
||||
</template>
|
||||
|
||||
<!--商品组-->
|
||||
<template v-if="item.type==='product'&&item.data!=null">
|
||||
<product :itemData="item"></product>
|
||||
</template>
|
||||
|
||||
<!--优惠券-->
|
||||
<template v-if="item.type==='coupon'&&item.data!=null">
|
||||
<coupon :itemData="item"></coupon>
|
||||
</template>
|
||||
|
||||
<!--门店-->
|
||||
<template v-if="item.type == 'store'&&item.data!=null">
|
||||
<store :itemData="item"></store>
|
||||
</template>
|
||||
|
||||
<!--客服-->
|
||||
<template v-if="item.type == 'service'">
|
||||
<service :itemData="item"></service>
|
||||
</template>
|
||||
|
||||
<!--富文本-->
|
||||
<template v-if="item.type==='richText'">
|
||||
<richText :itemData="item"></richText>
|
||||
</template>
|
||||
|
||||
<!--辅助空白-->
|
||||
<template v-if="item.type == 'blank'">
|
||||
<blank :itemData="item"></blank>
|
||||
</template>
|
||||
|
||||
<!--辅助线-->
|
||||
<template v-if="item.type == 'guide'">
|
||||
<guide :itemData="item"></guide>
|
||||
</template>
|
||||
|
||||
<!--秒杀-->
|
||||
<template v-if="item.type == 'seckillProduct'&&item.data!=null">
|
||||
<seckillProduct :itemData="item"></seckillProduct>
|
||||
</template>
|
||||
<!--预告-->
|
||||
<template v-if="item.type == 'previewProduct'&&item.data!=null">
|
||||
<previewProduct :itemData="item"></previewProduct>
|
||||
</template>
|
||||
<!--拼团-->
|
||||
<template v-if="item.type == 'assembleProduct'&&item.data!=null">
|
||||
<assembleProduct :itemData="item"></assembleProduct>
|
||||
</template>
|
||||
|
||||
<!--砍价-->
|
||||
<template v-if="item.type == 'bargainProduct'&&item.data!=null">
|
||||
<bargainProduct :itemData="item"></bargainProduct>
|
||||
</template>
|
||||
|
||||
<!--微信直播-->
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<template v-if="item.type == 'wxlive'&&item.data!=null">
|
||||
<wxlive :itemData="item"></wxlive>
|
||||
</template>
|
||||
<!-- #endif -->
|
||||
</block>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import search from './search/search';
|
||||
import banner from './banner/banner';
|
||||
import imagesingle from './imagesingle/imagesingle';
|
||||
import windows from './window/window';
|
||||
import videos from './videos/videos';
|
||||
import articles from './article/article';
|
||||
import special from './special/special';
|
||||
import notice from './notice/notice';
|
||||
import titles from './title/title';
|
||||
import coupon from './coupon/coupon';
|
||||
import richText from './richText/richText';
|
||||
import navBar from './navBar/navBar';
|
||||
import store from './store/store';
|
||||
import service from './service/service';
|
||||
import blank from './blank/blank';
|
||||
import guide from './guide/guide';
|
||||
import product from './product/product';
|
||||
import seckillProduct from './seckillProduct/seckillProduct';
|
||||
import assembleProduct from './assembleProduct/assembleProduct';
|
||||
import bargainProduct from './bargainProduct/bargainProduct';
|
||||
import previewProduct from './previewProduct/previewProduct';
|
||||
import wxlive from './wxlive/wxlive';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
search,
|
||||
banner,
|
||||
imagesingle,
|
||||
windows,
|
||||
videos,
|
||||
articles,
|
||||
special,
|
||||
notice,
|
||||
titles,
|
||||
coupon,
|
||||
richText,
|
||||
navBar,
|
||||
store,
|
||||
service,
|
||||
blank,
|
||||
guide,
|
||||
product,
|
||||
seckillProduct,
|
||||
assembleProduct,
|
||||
bargainProduct,
|
||||
previewProduct,
|
||||
wxlive
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
props: ['diyItems'],
|
||||
created() {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
19
components/diy/guide/guide.vue
Normal file
19
components/diy/guide/guide.vue
Normal file
@ -0,0 +1,19 @@
|
||||
<template>
|
||||
<view class="diy-guide" :style="{padding: itemData.style.paddingTop +'px '+'0', background:itemData.style.background }">
|
||||
<view class="line" :style="{borderTopWidth: itemData.style.lineHeight +'px',borderTopColor:itemData.style.lineColor,borderTopStyle: itemData.style.lineStyle }">
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
props: ['itemData'],
|
||||
methods: {}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
44
components/diy/imagesingle/imagesingle.vue
Normal file
44
components/diy/imagesingle/imagesingle.vue
Normal file
@ -0,0 +1,44 @@
|
||||
<template>
|
||||
|
||||
<view
|
||||
class="diy-imageSingle"
|
||||
:style="
|
||||
'padding-top: ' +
|
||||
itemData.style.paddingTop +
|
||||
'px;padding-bottom:' +
|
||||
itemData.style.paddingTop +
|
||||
'px; padding-left:' +
|
||||
itemData.style.paddingLeft +
|
||||
'px;padding-right:' +
|
||||
itemData.style.paddingLeft +
|
||||
'px; background:' +
|
||||
itemData.style.background
|
||||
"
|
||||
>
|
||||
<view class="d-c-c" v-for="(imageSingle, index) in itemData.data" :key="index" @click="gotoPages(imageSingle)">
|
||||
<image :src="imageSingle.imgUrl" mode="widthFix"></image>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
props: ['itemData'],
|
||||
methods: {
|
||||
/*跳转页面*/
|
||||
gotoPages(e) {
|
||||
this.gotoPage(e.linkUrl);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.diy-imageSingle image {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
71
components/diy/navBar/navBar.vue
Normal file
71
components/diy/navBar/navBar.vue
Normal file
@ -0,0 +1,71 @@
|
||||
<template>
|
||||
<view>
|
||||
<!--图标入口-->
|
||||
<view class="diy-navbar" :style="{background:itemData.style.background}">
|
||||
<view class="item" v-for="(item, index) in itemData.data" :key="index" :style="'width:'+item_width+';'" @click="gotoDetail(item)">
|
||||
<image :src="item.imgUrl" mode="widthFix"></image>
|
||||
<text class="gray3" :style="{color:item.color}">{{item.text}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
//单个宽度
|
||||
item_width: '25%'
|
||||
}
|
||||
},
|
||||
props: ['itemData'],
|
||||
created() {
|
||||
this.item_width = 100 / Math.abs(this.itemData.style.rowsNum) + '%';
|
||||
},
|
||||
methods: {
|
||||
|
||||
/*跳转页面*/
|
||||
gotoDetail(e) {
|
||||
this.gotoPage(e.linkUrl);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.diy-navbar {
|
||||
margin: 20rpx;
|
||||
padding: 20rpx 0;
|
||||
border-radius: 6rpx;
|
||||
background: #FFFFFF;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.diy-navbar .item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 20rpx;
|
||||
width: 120rpx;
|
||||
height: 140rpx;
|
||||
}
|
||||
|
||||
.diy-navbar .item image {
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
}
|
||||
|
||||
.diy-navbar .item text {
|
||||
display: block;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
line-height: 66rpx;
|
||||
font-size: 26rpx;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
112
components/diy/notice/notice.vue
Normal file
112
components/diy/notice/notice.vue
Normal file
@ -0,0 +1,112 @@
|
||||
<template>
|
||||
<view class="diy-notice"
|
||||
:style="{ padding: itemData.style.paddingTop + 'px' + ' 10px', background: itemData.style.background }"
|
||||
@click="gotoPages(item)">
|
||||
<view class="notice-icon">
|
||||
<image :src="itemData.params.icon" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="notice-text flex-1 text-ellipsisss">
|
||||
<view class="transtext" :style="'color:'+itemData.style.textColor+';left:'+textW+'rpx'">{{ textData }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
textData: '',
|
||||
n: 0,
|
||||
textW: 0,
|
||||
start: 0,
|
||||
times: null
|
||||
};
|
||||
},
|
||||
props: ['itemData'],
|
||||
created() {
|
||||
this.textData = this.itemData.params.text;
|
||||
this.init();
|
||||
this.horseRaceLamp();
|
||||
},
|
||||
beforeDestroy() {
|
||||
clearTimeout(this.times)
|
||||
},
|
||||
methods: {
|
||||
/*初始化*/
|
||||
init() {
|
||||
let self = this;
|
||||
uni.getSystemInfo({
|
||||
success(res) {
|
||||
// 计算组件的高度
|
||||
let view = uni.createSelectorQuery().in(self).select('.transtext');
|
||||
view.boundingClientRect(data => {
|
||||
let h = data.width;
|
||||
self.textW = 0;
|
||||
self.start = 2 * h;
|
||||
}).exec();
|
||||
}
|
||||
});
|
||||
},
|
||||
horseRaceLamp() {
|
||||
let self = this;
|
||||
// return
|
||||
self.times = setTimeout(function() {
|
||||
self.textW--;
|
||||
if (self.textW * (-1) >= self.start) {
|
||||
self.textW = 710
|
||||
}
|
||||
// let firstWord=self.textData.slice(0,1);
|
||||
// let afterWord=self.textData.slice(1,self.textData.length);
|
||||
// self.textData=afterWord+firstWord;
|
||||
self.horseRaceLamp();
|
||||
}, 10);
|
||||
},
|
||||
|
||||
/*跳转页面*/
|
||||
gotoPages(e) {
|
||||
this.gotoPage(e.linkUrl);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.diy-notice {
|
||||
margin: 20rpx;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
border-radius: 6rpx;
|
||||
/* box-shadow: 0 0 8rpx rgba(0, 0, 0, 0.1); */
|
||||
|
||||
}
|
||||
|
||||
.diy-notice .notice-icon {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.diy-notice .notice-icon image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.diy-notice .notice-text {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
height: 64rpx;
|
||||
}
|
||||
|
||||
.transtext {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
left: 0;
|
||||
line-height: 64rpx;
|
||||
/* display: inline-block; */
|
||||
}
|
||||
</style>
|
||||
213
components/diy/previewProduct/previewProduct.vue
Normal file
213
components/diy/previewProduct/previewProduct.vue
Normal file
@ -0,0 +1,213 @@
|
||||
<template>
|
||||
<view class="diy-previewProduct" v-if="itemData.data.length > 0">
|
||||
<view class="sharpproduct-head d-b-c" :style="'background-image: url(' + itemData.style.background_image + ');'">
|
||||
<view class="left d-s-c"></view>
|
||||
<view class="right d-e-c" @click="gotoList">
|
||||
<text class="white f26">更多</text>
|
||||
<text class="iconfont icon-jiantou mr10"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="sharpproduct-body column__3" :style="'background:' + itemData.style.background_color + ';'">
|
||||
<scroll-view scroll-x="true">
|
||||
<view class="product-list">
|
||||
<view class="product-item bg-white" v-for="(item, index) in itemData.data" :key="index" @click="gotoDetail(item.product_id)">
|
||||
<view class="datetime d-s-s" :style="'background:' + itemData.style.countdown_back_color + ';'">
|
||||
<view class="top_image"><image :src="itemData.style.top_image" mode="aspectFit"></image></view>
|
||||
<Countdown
|
||||
activeName="diy-previewProduct"
|
||||
:back_color="'none'"
|
||||
:color="itemData.style.countdown_color"
|
||||
:cut_color="itemData.style.countdown_color"
|
||||
:config="{ startstamp: new Date().valueOf() / 1000, endstamp: item.preview_time,type:null}"
|
||||
:start_name="'距开始'"
|
||||
:end_name="'距开始'"
|
||||
></Countdown>
|
||||
</view>
|
||||
<!-- 两列三列 -->
|
||||
<view class="d-b-c p10">
|
||||
<view class="product-info flex-1">
|
||||
<view class="" :style="{ color: itemData.style.color }">
|
||||
<text class="f18">¥</text>
|
||||
<text class="f22">{{ item.product_price }}</text>
|
||||
<text class="f22">起</text>
|
||||
</view>
|
||||
<view class="f20 text-ellipsis">{{ item.product_name }}</view>
|
||||
<view class="gray9 f18 text-d-line">¥{{ item.line_price }}</view>
|
||||
</view>
|
||||
<view class="product-cover"><image :src="item.product_image" mode="aspectFit"></image></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Countdown from '@/components/countdown/countdown-act.vue';
|
||||
export default {
|
||||
components: {
|
||||
Countdown
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
/*倒计时配置*/
|
||||
countdownConfig: {
|
||||
/*开始时间*/
|
||||
startstamp: 0,
|
||||
/*结束时间*/
|
||||
endstamp: 0,
|
||||
/*标题*/
|
||||
title: ' '
|
||||
}
|
||||
};
|
||||
},
|
||||
props: ['itemData'],
|
||||
created() {
|
||||
this.countdownConfig.endstamp = this.itemData.data.end_time;
|
||||
this.countdownConfig.startstamp = this.itemData.data.start_time;
|
||||
},
|
||||
methods: {
|
||||
scroll(e) {},
|
||||
|
||||
/*跳转列表*/
|
||||
gotoList() {
|
||||
let url = '/pages/plus/preview/list';
|
||||
this.gotoPage(url);
|
||||
},
|
||||
|
||||
/*跳转产品详情*/
|
||||
gotoDetail(e) {
|
||||
let url = '/pages/product/detail/detail?product_id=' + e;
|
||||
this.gotoPage(url);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.diy-previewProduct {
|
||||
margin: 20rpx 20rpx;
|
||||
border-radius: 6rpx;
|
||||
@include background_linear('bg-bargain', 'text_color1', 180deg, 0%, 100%);
|
||||
overflow: hidden;
|
||||
box-shadow: 0px 8rpx 3rpx 0px rgba(6, 0, 1, 0.03);
|
||||
}
|
||||
|
||||
.diy-previewProduct .sharpproduct-head {
|
||||
height: 90rpx;
|
||||
color: #000000;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.diy-previewProduct .name {
|
||||
width: 200rpx;
|
||||
}
|
||||
|
||||
.diy-previewProduct .sharpproduct-body {
|
||||
}
|
||||
|
||||
.diy-previewProduct .sharpproduct-head .name {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.diy-previewProduct .product-item .datetime::v-deep text {
|
||||
font-size: 18rpx;
|
||||
}
|
||||
|
||||
.diy-previewProduct .product-item .datetime::v-deep .box {
|
||||
padding: 0;
|
||||
font-size: 18rpx;
|
||||
background: none;
|
||||
}
|
||||
.diy-previewProduct .product-item .datetime::v-deep .daybox {
|
||||
padding: 0;
|
||||
font-size: 18rpx;
|
||||
background: none;
|
||||
}
|
||||
.diy-previewProduct .product-item .datetime::v-deep .countdown {
|
||||
border: none;
|
||||
padding: 0;
|
||||
font-size: 18rpx;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.diy-previewProduct .sharpproduct-head .icon-jiantou {
|
||||
margin-left: 8rpx;
|
||||
color: #ffffff;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.diy-previewProduct .product-list .product-item {
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.diy-previewProduct .product-list .product-cover image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #f4f4f4;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.diy-previewProduct .product-list .price {
|
||||
font-size: 20rpx;
|
||||
color: #ff4c01;
|
||||
line-height: 26rpx;
|
||||
padding-top: 16rpx;
|
||||
padding-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.diy-previewProduct .product-list .product-title {
|
||||
margin-top: 10rpx;
|
||||
height: 24rpx;
|
||||
line-height: 24rpx;
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.diy-previewProduct .column__3 .product-list .product-title {
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.diy-previewProduct .column__3 .product-list {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
max-height: 370rpx;
|
||||
flex-direction: column;
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
|
||||
.diy-previewProduct .column__3 .product-item {
|
||||
width: 300rpx;
|
||||
margin-right: 20rpx;
|
||||
border-radius: 15rpx;
|
||||
overflow: hidden;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.diy-previewProduct .column__3 .product-cover {
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 16rpx;
|
||||
border-radius: 12rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.diy-assembleproduct .product-list {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
.top_image {
|
||||
width: 102rpx;
|
||||
height: 38rpx;
|
||||
margin-right: 5rpx;
|
||||
image {
|
||||
width: 102rpx;
|
||||
height: 38rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
288
components/diy/product/product.vue
Normal file
288
components/diy/product/product.vue
Normal file
@ -0,0 +1,288 @@
|
||||
<template>
|
||||
<view class="diy-product" :style="{ background: itemData.style.background }">
|
||||
<view :class="['display__' + itemData.style.display]">
|
||||
<template v-if="itemData.style.display == 'list'">
|
||||
<view class="product-list" :class="['column__' + itemData.style.column]">
|
||||
<view class="product-item" v-for="(product, index) in itemData.data" :key="index"
|
||||
@click="gotoDetail(product.product_id)">
|
||||
<!-- 单列商品 -->
|
||||
<template v-if="itemData.style.column == 1">
|
||||
<view class="product-item-box">
|
||||
<!-- 商品图片 -->
|
||||
<view class="product-cover">
|
||||
<image :src="product.image" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="product-info">
|
||||
<!-- 商品名称 -->
|
||||
<view v-if="itemData.style.show.productName" class="product-title">
|
||||
<text>{{ product.product_name }}</text>
|
||||
</view>
|
||||
<!-- 商品卖点 -->
|
||||
<view v-if="itemData.style.show.sellingPoint" class="selling-point gray9">
|
||||
<text>{{ product.selling_point }}</text>
|
||||
</view>
|
||||
<!-- 商品销量 -->
|
||||
<view v-if="itemData.style.show.productSales" class="already-sale">
|
||||
<text>已售{{ product.product_sales }}件</text>
|
||||
</view>
|
||||
<!-- 商品价格 -->
|
||||
<view class="price d-s-c mt10">
|
||||
<view v-if="itemData.style.show.productPrice" class="theme-price">
|
||||
<text>¥</text>
|
||||
<text class="">{{ product.product_price }}</text>
|
||||
</view>
|
||||
<view class="ml10 gray9 text-d-line f28"
|
||||
v-if="itemData.style.show.linePrice && product.line_price > 0">
|
||||
<text>¥</text>
|
||||
<text>{{ product.line_price }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<!-- 两列三列 -->
|
||||
<template v-else>
|
||||
<view class="product-cover">
|
||||
<image :src="product.image" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="product-info">
|
||||
<view v-if="itemData.style.show.productName == 1" class="product-title">
|
||||
{{ product.product_name }}</view>
|
||||
<view class="price d-s-c">
|
||||
<view v-if="itemData.style.show.productPrice == 1" class="theme-price">
|
||||
<text class="f22">¥</text>
|
||||
<text class="">{{ product.product_price }}</text>
|
||||
</view>
|
||||
<view class="ml20 gray9 text-d-line"
|
||||
v-if="itemData.style.show.linePrice == 1 && product.line_price > 0"><text
|
||||
class="f22">¥</text>{{ product.line_price }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else>
|
||||
<scroll-view :scroll-top="scrollTop" scroll-x="true">
|
||||
<view class="product-list" :class="['column__' + itemData.style.column]">
|
||||
<view v-for="(product, index) in itemData.data" :key="index"
|
||||
@click="gotoDetail(product.product_id)">
|
||||
<view class="product-item">
|
||||
<view class="product-cover">
|
||||
<image :src="product.image" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="product-info">
|
||||
<view v-if="itemData.style.show.productName == 1" class="product-title">
|
||||
{{ product.product_name }}</view>
|
||||
<view class="price d-s-c f12">
|
||||
<view v-if="itemData.style.show.productPrice == 1" class="theme-price">
|
||||
<text>¥</text>
|
||||
<text class="">{{ product.product_price }}</text>
|
||||
</view>
|
||||
<view class="ml10 gray9 text-d-line"
|
||||
v-if="itemData.style.show.linePrice == 1 && product.line_price > 0">
|
||||
¥{{ product.line_price }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
props: ['itemData'],
|
||||
created() {},
|
||||
methods: {
|
||||
scroll(e) {},
|
||||
|
||||
/*跳转产品详情*/
|
||||
gotoDetail(e) {
|
||||
let url = '/pages/product/detail/detail?product_id=' + e;
|
||||
this.gotoPage(url);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.diy-product {
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
|
||||
.diy-product .product-list.column__1 .product-item {
|
||||
margin-bottom: 20rpx;
|
||||
background: #ffffff;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.diy-product .product-list.column__1 .product-item-box {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.diy-product .product-list .product-cover image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.diy-product .product-list.column__1 .product-cover {
|
||||
width: 240rpx;
|
||||
height: 240rpx;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.diy-product .product-list.column__1 .product-info {
|
||||
margin: 20rpx 20rpx 20rpx 30rpx;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.diy-product .product-list .product-info .already-sale text {
|
||||
padding: 4rpx 8rpx;
|
||||
border-radius: 8rpx;
|
||||
background: #f2f2f7;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.diy-product .product-list .product-title {
|
||||
display: -webkit-box;
|
||||
font-size: 32rpx;
|
||||
overflow: hidden;
|
||||
word-wrap: break-word;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.diy-product .product-list.column__1 .product-title {
|
||||
max-height: 80rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.diy-product .product-list.column__1 .selling-point {
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
line-height: 30rpx;
|
||||
max-height: 60rpx;
|
||||
}
|
||||
|
||||
.diy-product .product-list.column__1 .already-sale {
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.diy-product .product-list.column__2 .product-title {
|
||||
height: 80rpx;
|
||||
line-height: 40rpx;
|
||||
margin-top: 20rpx;
|
||||
font-size: 26rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.diy-product .product-list.column__3 .product-title {
|
||||
margin-top: 20rpx;
|
||||
margin-left: 10rpx;
|
||||
margin-right: 10rpx;
|
||||
height: 72rpx;
|
||||
line-height: 36rpx;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.diy-product .product-list.column__2 .product-info {
|
||||
padding: 0 24rpx;
|
||||
}
|
||||
|
||||
.diy-product .product-list .price {
|
||||
font-size: 34rpx;
|
||||
}
|
||||
|
||||
.diy-product .product-list.column__2 .price {
|
||||
margin-top: 10rpx;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.diy-product .product-list.column__3 .price {
|
||||
margin-top: 10rpx;
|
||||
padding: 0 10rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.diy-product .product-list.column__3 .price .text-d-line {
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.diy-product .product-list.column__2,
|
||||
.diy-product .product-list.column__3 {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.diy-product .column__2 .product-item {
|
||||
width: 345rpx;
|
||||
margin-right: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
padding-bottom: 20rpx;
|
||||
overflow: hidden;
|
||||
background: #ffffff;
|
||||
box-shadow: 0px 8rpx 3rpx 0px rgba(6, 0, 1, 0.03);
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.diy-product .display__list .column__2 .product-item:nth-child(2n + 0) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.diy-product .column__2 .product-cover {
|
||||
width: 220rpx;
|
||||
height: 220rpx;
|
||||
border-radius: 12rpx;
|
||||
margin: 20rpx auto;
|
||||
}
|
||||
|
||||
.diy-product .column__3 .product-item {
|
||||
width: 230rpx;
|
||||
margin-bottom: 10rpx;
|
||||
margin-right: 10rpx;
|
||||
padding-bottom: 10rpx;
|
||||
border-radius: 8rpx;
|
||||
overflow: hidden;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 0 8rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.diy-product .display__list .column__3 .product-item:nth-child(3n + 0) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.diy-product .column__3 .product-cover {
|
||||
width: 230rpx;
|
||||
height: 230rpx;
|
||||
}
|
||||
|
||||
.diy-product .display__slide .product-list {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.diy-product .display__slide .column__2 .product-item {
|
||||
width: 300rpx;
|
||||
}
|
||||
|
||||
.diy-product .display__slide .column__3 .product-item {
|
||||
width: 200rpx;
|
||||
}
|
||||
</style>
|
||||
30
components/diy/richText/richText.vue
Normal file
30
components/diy/richText/richText.vue
Normal file
@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="diy-richText" :style="{background: itemData.style.background, padding: itemData.style.paddingTop + 'px ' + itemData.style.paddingLeft + 'px'}"
|
||||
v-html="formatContent(itemData.params.content)">
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import utils from '@/common/utils.js';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
props:['itemData'],
|
||||
created(){
|
||||
},
|
||||
methods: {
|
||||
formatContent(e){
|
||||
return utils.format_content(e);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
55
components/diy/search/search.vue
Normal file
55
components/diy/search/search.vue
Normal file
@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<view class="index-search-box" id="searchBox">
|
||||
<view class="index-search diy-search t-c" :class="'diy-search-style-'+itemData.style.searchStyle+' diy-search-textAlign-'+itemData.style.textAlign"
|
||||
@click="gotoSearch">
|
||||
<span class="icon iconfont icon-sousuo"></span>
|
||||
<text class="ml10">{{itemData.params.placeholder}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
props: ['itemData'],
|
||||
methods: {
|
||||
|
||||
/*跳转搜索页面*/
|
||||
gotoSearch() {
|
||||
let url = '/pages/product/search/search';
|
||||
this.gotoPage(url);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/*search*/
|
||||
.diy-search-style-3 {}
|
||||
|
||||
.diy-search-style-6 {
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.diy-search-style-9 {
|
||||
border-radius: 50rpx;
|
||||
}
|
||||
|
||||
.diy-search-textAlign-3 {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.diy-search-textAlign-6 {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.diy-search-textAlign-9 {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.diy-search .svg-icon {
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
</style>
|
||||
191
components/diy/seckillProduct/seckillProduct.vue
Normal file
191
components/diy/seckillProduct/seckillProduct.vue
Normal file
@ -0,0 +1,191 @@
|
||||
<template>
|
||||
<view class="diy-seckillProduct" v-if="itemData.data.product_list.length>0">
|
||||
<view class="sharpproduct-head d-b-c" :style="'background-image: url('+itemData.style.background_image+');'">
|
||||
<view class="left d-s-c">
|
||||
<view class="name d-c-c">
|
||||
</view>
|
||||
<view class="datetime d-s-c ml20">
|
||||
<Countdown :back_color="itemData.style.countdown_back_color" :color='itemData.style.color'
|
||||
:cut_color="itemData.style.countdown_color" :config="countdownConfig"></Countdown>
|
||||
</view>
|
||||
</view>
|
||||
<view class="right d-e-c" @click="gotoList">
|
||||
<text class="gray3 f26">更多</text>
|
||||
<text class="iconfont icon-jiantou mr10"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="sharpproduct-body column__3">
|
||||
<scroll-view scroll-x="true">
|
||||
<view class="product-list">
|
||||
<view class="product-item" v-for="(item, index) in itemData.data.product_list" :key="index"
|
||||
@click="gotoDetail(item.product_id)">
|
||||
<!-- 两列三列 -->
|
||||
<template>
|
||||
<view class="product-cover">
|
||||
<image :src="item.product.file_path" mode="aspectFit"></image>
|
||||
</view>
|
||||
<view class="product-info p-0-10">
|
||||
<view v-if="itemData.style.show.seckillPrice == true" class="theme-price mb10">
|
||||
<text class="f18 fb">¥</text>
|
||||
<text class="f26 fb">{{ item.seckill_price }}</text>
|
||||
</view>
|
||||
<view class="gray9 f20 text-d-line" v-if="itemData.style.show.linePrice == true">
|
||||
¥{{ item.product_price }}</view>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Countdown from '@/components/countdown/countdown-act.vue';
|
||||
export default {
|
||||
components: {
|
||||
Countdown
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
/*倒计时配置*/
|
||||
countdownConfig: {
|
||||
/*开始时间*/
|
||||
startstamp: 0,
|
||||
/*结束时间*/
|
||||
endstamp: 0,
|
||||
/*标题*/
|
||||
title: ' ',
|
||||
}
|
||||
};
|
||||
},
|
||||
props: ['itemData'],
|
||||
created() {
|
||||
this.countdownConfig.endstamp = this.itemData.data.end_time;
|
||||
this.countdownConfig.startstamp = this.itemData.data.start_time;
|
||||
},
|
||||
methods: {
|
||||
scroll(e) {},
|
||||
|
||||
/*跳转列表*/
|
||||
gotoList() {
|
||||
let url = '/pages/plus/seckill/list/list';
|
||||
this.gotoPage(url);
|
||||
},
|
||||
|
||||
/*跳转产品详情*/
|
||||
gotoDetail(e) {
|
||||
let url = '/pages/product/detail/detail?product_id=' + e;
|
||||
this.gotoPage(url);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.diy-seckillProduct {
|
||||
margin: 20rpx 20rpx;
|
||||
border-radius: 6rpx;
|
||||
@include background_linear('bg-bargain', 'text_color1', 180deg, 0%, 100%);
|
||||
overflow: hidden;
|
||||
box-shadow: 0px 8rpx 3rpx 0px rgba(6, 0, 1, 0.03);
|
||||
}
|
||||
|
||||
.diy-seckillProduct .sharpproduct-head {
|
||||
height: 90rpx;
|
||||
color: #000000;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.diy-seckillProduct .name {
|
||||
width: 200rpx;
|
||||
}
|
||||
|
||||
.diy-seckillProduct .sharpproduct-body {
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
|
||||
.diy-seckillProduct .sharpproduct-head .name {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.diy-seckillProduct .sharpproduct-head .datetime::v-deep text {
|
||||
font-size: 24rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.diy-seckillProduct .sharpproduct-head .datetime::v-deep .box {
|
||||
padding: 4rpx 10rpx;
|
||||
font-size: 22rpx;
|
||||
background: #FFEBEB;
|
||||
color: #EE1413;
|
||||
}
|
||||
|
||||
.diy-seckillProduct .sharpproduct-head .icon-jiantou {
|
||||
margin-left: 8rpx;
|
||||
color: #333333;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.diy-seckillProduct .product-list .product-item {
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.diy-seckillProduct .product-list .product-cover image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #F4F4F4;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.diy-seckillProduct .product-list .price {
|
||||
font-size: 20rpx;
|
||||
color: #F01A1A;
|
||||
line-height: 26rpx;
|
||||
padding-top: 16rpx;
|
||||
padding-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.diy-seckillProduct .product-list .product-title {
|
||||
margin-top: 26rpx;
|
||||
height: 30rpx;
|
||||
line-height: 30rpx;
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.diy-seckillProduct .column__3 .product-list .product-title {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.diy-seckillProduct .column__3 .product-list {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.diy-seckillProduct .column__3 .product-item {
|
||||
width: 132rpx;
|
||||
margin-right: 46rpx;
|
||||
border-radius: 6rpx;
|
||||
overflow: hidden;
|
||||
margin-top: 20rpx;
|
||||
padding-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.diy-seckillProduct .column__3 .product-cover {
|
||||
width:132rpx;
|
||||
height: 132rpx;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.diy-assembleproduct .product-list {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
</style>
|
||||
57
components/diy/service/service.vue
Normal file
57
components/diy/service/service.vue
Normal file
@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<view class="diy-service drag optional drag__nomove" :style="{ right: itemData.style.right + '%', bottom: itemData.style.bottom + '%', opacity: itemData.style.opacity / 100 }">
|
||||
<!-- #ifndef MP-WEIXIN -->
|
||||
<view class="service-icon" @click="callPhone"><image :src="itemData.params.image" mode="aspectFill"></image></view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<button class="service-icon" open-type="contact" session-from="wxapp" v-if="itemData.params.type == 'chat'">
|
||||
<image :src="itemData.params.image" mode="aspectFill"></image>
|
||||
</button>
|
||||
<view class="service-icon" v-if="itemData.params.type == 'phone'" @click="callPhone"><image :src="itemData.params.image" mode="aspectFill"></image></view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
props: ['itemData'],
|
||||
methods: {
|
||||
/*拨打电话*/
|
||||
callPhone() {
|
||||
let self = this;
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: self.itemData.params.phone_num
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.diy-service {
|
||||
position: fixed;
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
z-index: 90;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.diy-service .service-icon {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
}
|
||||
|
||||
.diy-service button.service-icon {
|
||||
padding: 0;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.diy-service .service-icon image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
142
components/diy/special/special.vue
Normal file
142
components/diy/special/special.vue
Normal file
@ -0,0 +1,142 @@
|
||||
<template>
|
||||
<view class="diy-special" v-if="listData.length>0">
|
||||
<view class="special-left">
|
||||
<image :src="itemData.style.image" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="right-shadow"></view>
|
||||
<view class="special-content" :class="'display_' + itemData.style.display">
|
||||
<view class="special-content-list" :style="'transform: translate(0,'+styleValue+'px);'">
|
||||
<view class="content-item text-ellipsis" v-for="(item, index) in listData" :key="index" @click="gotoPageFunc(item)">
|
||||
<text>{{ item.article_title }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="special-more" @click="gotoPageFunc()"><text class="iconfont icon-jiantou"></text></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
/*数据列表*/
|
||||
listData: [],
|
||||
/*样式*/
|
||||
styleValue: '',
|
||||
/*当前角标*/
|
||||
index_num: 0,
|
||||
/*高度*/
|
||||
lineHeight: 0,
|
||||
/*最大数*/
|
||||
maxSize: 0,
|
||||
/*时间*/
|
||||
timer: null
|
||||
};
|
||||
},
|
||||
props: ['itemData'],
|
||||
created() {
|
||||
this.listData = this.itemData.data;
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
|
||||
/*初始化*/
|
||||
init() {
|
||||
let self = this;
|
||||
if ((this.itemData.style.display == 1 && this.listData.length > 1) || (this.itemData.style.display == 2 && this.listData
|
||||
.length > 2)) {
|
||||
uni.getSystemInfo({
|
||||
success(res) {
|
||||
self.lineHeight = res.windowWidth / 750 * 30;
|
||||
self.maxSize = self.listData.length
|
||||
if (self.itemData.style.display == 2) {
|
||||
self.lineHeight = self.lineHeight * 2;
|
||||
self.maxSize = self.maxSize / 2;
|
||||
}
|
||||
self.timer = setInterval(function() {
|
||||
self.animation();
|
||||
}, 3000);
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
/*动画*/
|
||||
animation() {
|
||||
let self = this;
|
||||
self.index_num++;
|
||||
if (self.index_num >= self.maxSize) {
|
||||
self.index_num = 0;
|
||||
}
|
||||
this.styleValue = -self.lineHeight * self.index_num;
|
||||
},
|
||||
|
||||
/*跳转页面*/
|
||||
gotoPageFunc(e) {
|
||||
let url = null;
|
||||
if (e && typeof e != 'undefined') {
|
||||
url = 'pages/article/detail/detail?article_id=' + e.article_id;
|
||||
} else {
|
||||
url = 'pages/article/list/list';
|
||||
}
|
||||
this.gotoPage(url);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.diy-special {
|
||||
background-color: #FFFFFF;
|
||||
padding: 0 20rpx 0 24rpx;
|
||||
margin: 20rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.diy-special .special-left {
|
||||
width: 136rpx;
|
||||
height: 33rpx;
|
||||
}
|
||||
|
||||
.diy-special .special-left image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.diy-special .special-more .icon-jiantou {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.diy-special .special-content {
|
||||
flex: 1;
|
||||
margin: 0 20rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.diy-special .special-content-list {
|
||||
transition: transform .4s;
|
||||
}
|
||||
|
||||
.diy-special .content-item {
|
||||
height: 30rpx;
|
||||
line-height: 30rpx;
|
||||
}
|
||||
|
||||
.diy-special .special-content.display_1 {
|
||||
height: 30rpx;
|
||||
}
|
||||
|
||||
.diy-special .special-content.display_2 {
|
||||
height: 60rpx;
|
||||
}
|
||||
|
||||
.right-shadow {
|
||||
width: 15rpx;
|
||||
height: 90rpx;
|
||||
background: linear-gradient(90deg, #E4E4E4 0%, rgba(255, 255, 255, 0) 100%);
|
||||
margin-left: 30rpx;
|
||||
}
|
||||
</style>
|
||||
64
components/diy/store/store.vue
Normal file
64
components/diy/store/store.vue
Normal file
@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<view class="diy-store" :style="{ background: itemData.style.background }">
|
||||
<view class="diy-head d-b-c">
|
||||
<view class="left d-s-c">
|
||||
<view class="name">
|
||||
线下门店
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="store-item d-s-c p-30-0" :key="index" v-for="(store, index) in itemData.data" @click="gotoDetail(store.store_id)">
|
||||
<view class="store-item-logo mr30"><image :src="store.logo_image" mode="aspectFill"></image></view>
|
||||
<view class="flex-1 o-h">
|
||||
<view class="ww100 f34 gray3 text-ellipsis">
|
||||
<text>{{ store.store_name }}</text>
|
||||
</view>
|
||||
<view class="text-ellipsis mt10 f24 gray3"><text class="gray3">门店地址：</text><text class="gray6">{{ store.region.province }}{{ store.region.city }}{{ store.region.region }}{{ store.address }}</text></view>
|
||||
<view class="mt10 f24">
|
||||
<text class="gray3">联系电话：</text><text class="gray6">{{ store.phone }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
props: ['itemData'],
|
||||
methods: {
|
||||
/*跳转门店详情*/
|
||||
gotoDetail(e) {
|
||||
let url = 'pages/store/detail/detail?store_id=' + e;
|
||||
this.gotoPage(url);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.diy-store {
|
||||
margin: 20rpx;
|
||||
border-radius: 6rpx;
|
||||
padding: 0 20rpx 20rpx;
|
||||
background: #ffffff;
|
||||
box-shadow: 0px 8rpx 3rpx 0px rgba(6, 0, 1, 0.03);
|
||||
}
|
||||
.diy-store .diy-head {
|
||||
height: 100rpx;
|
||||
}
|
||||
.diy-store .diy-head .name {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
.diy-store .store-item {
|
||||
border-top: 1rpx solid #eeeeee;
|
||||
}
|
||||
.diy-store .store-item-logo,
|
||||
.diy-store .store-item-logo image {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
}
|
||||
</style>
|
||||
73
components/diy/title/title.vue
Normal file
73
components/diy/title/title.vue
Normal file
@ -0,0 +1,73 @@
|
||||
<template>
|
||||
<view class="diy-notice pr"
|
||||
:style="{ padding: itemData.style.paddingTop + 'px' + ' 10px', background: itemData.style.background }"
|
||||
@click="gotoPages(item)">
|
||||
<view class="notice-icon pr" :style="{background: itemData.style.background }"
|
||||
v-if="itemData.params.show_icon=='yes'">
|
||||
<image :src="itemData.params.icon" mode="aspectFill"></image>
|
||||
</view>
|
||||
<text class="pr notice-text text-ellipsisss f38 fb"
|
||||
:style="{background: itemData.style.background, color: itemData.style.textColor }">
|
||||
{{ itemData.params.title }}
|
||||
</text>
|
||||
<view class="center-line"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
props: ['itemData'],
|
||||
created() {},
|
||||
methods: {
|
||||
/*跳转页面*/
|
||||
gotoPages(e) {
|
||||
this.gotoPage(e.linkUrl);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.diy-notice {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.diy-notice .notice-icon {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
background-color: #FFFFFF;
|
||||
padding: 0 10rpx;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.diy-notice .notice-icon image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.diy-notice .notice-text {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
background-color: #FFFFFF;
|
||||
padding: 0 10rpx;
|
||||
z-index: 1;
|
||||
}
|
||||
.center-line{
|
||||
width: 490rpx;
|
||||
height: 2rpx;
|
||||
background-color: #c7c7c7;
|
||||
border-radius: 2rpx;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
z-index: 0;
|
||||
}
|
||||
</style>
|
||||
33
components/diy/videos/videos.vue
Normal file
33
components/diy/videos/videos.vue
Normal file
@ -0,0 +1,33 @@
|
||||
<template>
|
||||
<view class="diy-video" :style="{padding:itemData.style.paddingTop + 'px 20rpx'}">
|
||||
<video :style="{height:(itemData.style.height*2) + 'rpx'}" :src="itemData.params.videoUrl"
|
||||
:poster="itemData.params.poster" :autoplay="itemData.params.autoplay == '1'" controls objectFit="contain">
|
||||
</video>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
props: ['itemData'],
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.diy-video{
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.diy-video uni-video,
|
||||
.diy-video video {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
</style>
|
||||
135
components/diy/window/window.vue
Normal file
135
components/diy/window/window.vue
Normal file
@ -0,0 +1,135 @@
|
||||
<template>
|
||||
<view class="diy-window" :style="{ background: itemData.style.background, padding: itemData.style.paddingTop + 'px ' + itemData.style.paddingLeft + 'px' }">
|
||||
<view class="data-list" v-if="itemData.style.layout > -1" :class="'column__' + itemData.style.layout">
|
||||
<view class="item" :key="index" v-for="(item, index) in itemData.data" @click="gotoPages(item)">
|
||||
<view class="item-image" :style="{ padding: itemData.style.paddingTop + 'px ' + itemData.style.paddingLeft + 'px' }">
|
||||
<image :src="item.imgUrl" mode="aspectFill"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="display" v-else :style="{ padding: itemData.style.paddingTop + 'px ' + itemData.style.paddingLeft + 'px' }">
|
||||
<view class="img-box-wrap-1">
|
||||
<view class="img-box" @click="gotoPages(itemData.data[0])">
|
||||
<image :src="itemData.data[0].imgUrl" mode="aspectFill"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="percent-w50 d-s-c d-c" >
|
||||
|
||||
<view class="img-box-wrap-2" v-if="itemData.data.length >= 2">
|
||||
<view class="img-box" @click="gotoPages(itemData.data[1])">
|
||||
<image :src="itemData.data[1].imgUrl" mode="aspectFill"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="d-s-c img-box-wrap-3">
|
||||
<view class="img-box-wrap-4" v-if="itemData.data.length >= 3">
|
||||
<view class="img-box" @click="gotoPages(itemData.data[2])">
|
||||
<image :src="itemData.data[2].imgUrl" mode="aspectFill"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="img-box-wrap-4" v-if="itemData.data.length >= 4">
|
||||
<view class="img-box" @click="gotoPages(itemData.data[3])">
|
||||
<image :src="itemData.data[3].imgUrl" mode="aspectFill"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
props: ['itemData'],
|
||||
methods: {
|
||||
/*跳转页面*/
|
||||
gotoPages(e){
|
||||
this.gotoPage(e.linkUrl);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
.diy-window{
|
||||
margin: 20rpx;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 0 8rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.diy-window .data-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.diy-window image{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.diy-window .data-list.column__2 .item {
|
||||
width: 50%;
|
||||
}
|
||||
.diy-window .data-list.column__3 .item {
|
||||
width: 33.333333333333%;
|
||||
}
|
||||
.diy-window .data-list.column__4 .item {
|
||||
width: 25%;
|
||||
}
|
||||
.diy-window .data-list.column__2 .item {
|
||||
position: relative;
|
||||
padding-top: 50%;
|
||||
}
|
||||
.diy-window .data-list.column__3 .item {
|
||||
position: relative;
|
||||
padding-top: 33.3333333%;
|
||||
}
|
||||
.diy-window .data-list.column__4 .item {
|
||||
position: relative;
|
||||
padding-top: 25%;
|
||||
}
|
||||
.diy-window .data-list .item .item-image,
|
||||
.diy-window .display .img-box {
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.diy-window .display {
|
||||
display: flex;
|
||||
}
|
||||
.diy-window .display .img-box-wrap-1 {
|
||||
position: relative;
|
||||
width: 50%;
|
||||
padding-top: 50%;
|
||||
}
|
||||
.diy-window .display .img-box-wrap-2 {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.diy-window .display .percent-w50 {
|
||||
box-sizing: border-box;
|
||||
width: 50%;
|
||||
}
|
||||
.diy-window .display .img-box .item-image {
|
||||
height: 100%;
|
||||
}
|
||||
.diy-window .display .img-box-wrap-3 {
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
}
|
||||
.diy-window .display .img-box-wrap-4 {
|
||||
position: relative;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
170
components/diy/wxlive/wxlive.vue
Normal file
170
components/diy/wxlive/wxlive.vue
Normal file
@ -0,0 +1,170 @@
|
||||
<template>
|
||||
<view class="diy-live" :style="{ background: itemData.style.background }" v-if="itemData.data.length>0">
|
||||
<view class="diy-head d-e-c" :style="'background-image: url('+itemData.style.background_image+');'">
|
||||
<view class="right" @click="gotoList">
|
||||
<text class="white">更多</text>
|
||||
<text class="iconfont icon-jiantou mr20" style="font-size: 24rpx;color: #999999;"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list d-s-c f-w">
|
||||
<view class="item" v-for="(item, index) in itemData.data" :key="index" @click="gotoDetail(item)">
|
||||
<view class="pic pr">
|
||||
<text class="state"
|
||||
:class="{bg101:item.live_status==101,bg102:item.live_status==102,bg103:item.live_status==103}"
|
||||
v-if="item.live_status==101||item.live_status==102||item.live_status==103">
|
||||
{{convertStatus(item.live_status)}}
|
||||
</text>
|
||||
<image :src="item.share_img" mode="aspectFill"></image>
|
||||
<!-- <view class="anchor">{{item.anchor_name}}</view> -->
|
||||
</view>
|
||||
<view class="p20">
|
||||
<view class="text-ellipsis-2 f26">{{ item.name }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
props: ['itemData'],
|
||||
created() {},
|
||||
methods: {
|
||||
scroll(e) {},
|
||||
|
||||
/*状态转换*/
|
||||
convertStatus(num) {
|
||||
let str = '';
|
||||
switch (num) {
|
||||
case 101:
|
||||
str = '直播中';
|
||||
break;
|
||||
case 102:
|
||||
str = '未开始';
|
||||
break;
|
||||
case 103:
|
||||
str = '已结束';
|
||||
break;
|
||||
case 104:
|
||||
str = '禁播';
|
||||
break;
|
||||
case 105:
|
||||
str = '暂停';
|
||||
break;
|
||||
case 106:
|
||||
str = '异常';
|
||||
break;
|
||||
case 107:
|
||||
str = '已过期';
|
||||
break;
|
||||
}
|
||||
return str;
|
||||
},
|
||||
|
||||
/*跳转列表*/
|
||||
gotoList() {
|
||||
let url = '/pages/plus/live/wx/list';
|
||||
this.gotoPage(url);
|
||||
},
|
||||
|
||||
/*跳转产品详情*/
|
||||
gotoDetail(item) {
|
||||
let roomId = item.roomid;
|
||||
let customParams = {
|
||||
path: 'pages/index/index'
|
||||
};
|
||||
wx.navigateTo({
|
||||
url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${roomId}&custom_params=${encodeURIComponent(JSON.stringify(customParams))}`
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.diy-live {
|
||||
margin: 20rpx;
|
||||
border-radius: 20rpx;
|
||||
background: #ffffff;
|
||||
// box-shadow: 0 0 8rpx rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.diy-live .diy-head {
|
||||
height: 90rpx;
|
||||
align-items: center;
|
||||
background-size: 100% 100%;
|
||||
|
||||
}
|
||||
|
||||
.diy-live .diy-head .name {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
width: 200rpx;
|
||||
}
|
||||
|
||||
.diy-live .list {
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.diy-live .list .item {
|
||||
width: 320rpx;
|
||||
margin-right: 30rpx;
|
||||
margin-bottom: 30rpx;
|
||||
height: 340rpx;
|
||||
background-color: #f6f6f6;
|
||||
border-radius: 12rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.diy-live .list .item:nth-child(2n + 0) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.diy-live .list .item .pic {
|
||||
width: 246rpx;
|
||||
height: 240rpx;
|
||||
}
|
||||
|
||||
.diy-live .list .item .pic .state {
|
||||
position: absolute;
|
||||
z-index: 80;
|
||||
top: 20rpx;
|
||||
left: 20rpx;
|
||||
padding: 4rpx 8rpx;
|
||||
background: red;
|
||||
color: #FFFFFF;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.diy-live .list .item .pic .state.bg101 {
|
||||
background: red;
|
||||
}
|
||||
|
||||
.diy-live .list .item .pic .state.bg102 {
|
||||
background: #ffb100;
|
||||
}
|
||||
|
||||
.diy-live .list .item .pic .state.bg103 {
|
||||
background: #333333;
|
||||
}
|
||||
|
||||
.diy-live .list .item image {
|
||||
width: 320rpx;
|
||||
height: 240rpx;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.diy-live .anchor {
|
||||
position: absolute;
|
||||
bottom: 12rpx;
|
||||
left: 18rpx;
|
||||
font-size: 24rpx;
|
||||
line-height: 24rpx;
|
||||
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user