temp commit
学习很差啦
parent
5afc5477a9
commit
8c8522c68e
|
|
@ -0,0 +1,79 @@
|
||||||
|
<template>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
methods: {
|
||||||
|
// 高亮显示搜索内容
|
||||||
|
lightSearchStr(keyword, str) {
|
||||||
|
if (!keyword) {
|
||||||
|
return str
|
||||||
|
} else {
|
||||||
|
let unicodes = '';
|
||||||
|
for (let i of Array.from(keyword)) {
|
||||||
|
unicodes += this.unicode(i) + "|"
|
||||||
|
}
|
||||||
|
const rule = '(' + unicodes + ')'
|
||||||
|
const reg = new RegExp(rule, 'gi');
|
||||||
|
return str ? str.replace(reg, matchValue =>
|
||||||
|
`<span style="color:${this.lightColor}">${matchValue}</span>`
|
||||||
|
) : ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 转换为unicode
|
||||||
|
unicode(str) {
|
||||||
|
var value = '';
|
||||||
|
for (var i = 0; i < str.length; i++) {
|
||||||
|
value += '\\u' + this.left_zero_4(parseInt(str.charCodeAt(i)).toString(16));
|
||||||
|
}
|
||||||
|
return value;
|
||||||
|
},
|
||||||
|
left_zero_4(str) {
|
||||||
|
if (str != null && str != '' && str != 'undefined') {
|
||||||
|
if (str.length == 2) {
|
||||||
|
return '00' + str;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return str;
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
// 格式化金钱 1999 --> [1999,00]
|
||||||
|
formatPrice(val) {
|
||||||
|
if (typeof val == "undefined") {
|
||||||
|
return val;
|
||||||
|
}
|
||||||
|
return val.toFixed(2).split(".");
|
||||||
|
},
|
||||||
|
|
||||||
|
// 数据去重一下 只显示一次 减免 劵 什么的
|
||||||
|
getPromotion(item) {
|
||||||
|
if (item.promotionMap) {
|
||||||
|
let array = [];
|
||||||
|
Object.keys(item.promotionMap).forEach((child) => {
|
||||||
|
if (!array.includes(child.split("-")[0])) {
|
||||||
|
array.push(child.split("-")[0]);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return array;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 跳转到商品详情
|
||||||
|
navigateToDetailPage(item) {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages/product/goods?id=${item.content.id}&goodsId=${item.content.goodsId}`,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 跳转地址
|
||||||
|
navigateToStoreDetailPage(item) {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages/product/shopPage?id=${item.content.storeId}`,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang='scss' scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -101,12 +101,15 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import commonTpl from '@/components/m-goods-list/common'
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
lightColor: this.$mainColor
|
lightColor: this.$mainColor
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
mixins: [commonTpl],
|
||||||
|
|
||||||
props: {
|
props: {
|
||||||
// 遍历的数据
|
// 遍历的数据
|
||||||
res: {
|
res: {
|
||||||
|
|
@ -198,13 +201,13 @@
|
||||||
},
|
},
|
||||||
// 跳转到商品详情
|
// 跳转到商品详情
|
||||||
navigateToDetailPage(item) {
|
navigateToDetailPage(item) {
|
||||||
this.$navigateTo({
|
uni.navigateTo({
|
||||||
url: `/pages/product/goods?id=${item.content.id}&goodsId=${item.content.goodsId}`,
|
url: `/pages/product/goods?id=${item.content.id}&goodsId=${item.content.goodsId}`,
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
// 跳转地址
|
// 跳转地址
|
||||||
navigateToStoreDetailPage(item) {
|
navigateToStoreDetailPage(item) {
|
||||||
this.$navigateTo({
|
uni.navigateTo({
|
||||||
url: `/pages/product/shopPage?id=${item.content.storeId}`,
|
url: `/pages/product/shopPage?id=${item.content.storeId}`,
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
@ -213,132 +216,132 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang='scss' scoped>
|
<style lang='scss' scoped>
|
||||||
/* 商品列表 */
|
/* 商品列表 */
|
||||||
.goods-list {
|
.goods-list {
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
margin: 10rpx 20rpx 284rpx;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
>.goods-item {
|
|
||||||
background-color: #ffffff;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
border-radius: 16rpx;
|
flex-wrap: wrap;
|
||||||
flex-direction: column;
|
margin: 10rpx 20rpx 284rpx;
|
||||||
width: calc(50% - 30rpx);
|
width: 100%;
|
||||||
margin-bottom: 20rpx;
|
|
||||||
padding-bottom: 20rpx;
|
|
||||||
|
|
||||||
&:nth-child(2n + 1) {
|
>.goods-item {
|
||||||
margin-right: 20rpx;
|
background-color: #ffffff;
|
||||||
|
display: flex;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
flex-direction: column;
|
||||||
|
width: calc(50% - 30rpx);
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
padding-bottom: 20rpx;
|
||||||
|
|
||||||
|
&:nth-child(2n + 1) {
|
||||||
|
margin-right: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.image-wrapper {
|
||||||
|
width: 100%;
|
||||||
|
height: 330rpx;
|
||||||
|
border-radius: 16rpx 16rpx 0 0;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.count-config,
|
||||||
|
.store-seller-name {
|
||||||
|
font-size: $font-sm;
|
||||||
|
}
|
||||||
|
|
||||||
.image-wrapper {
|
.text-hidden {
|
||||||
width: 100%;
|
|
||||||
height: 330rpx;
|
|
||||||
border-radius: 16rpx 16rpx 0 0;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
padding: 0;
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.count-config,
|
|
||||||
.store-seller-name {
|
|
||||||
font-size: $font-sm;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-hidden {
|
.goods-row {
|
||||||
overflow: hidden;
|
background: #fff;
|
||||||
text-overflow: ellipsis;
|
padding: 16rpx;
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
>.goods-col {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
.goods-row {
|
>.goods-img {
|
||||||
background: #fff;
|
overflow: hidden;
|
||||||
padding: 16rpx;
|
flex: 4;
|
||||||
|
}
|
||||||
|
|
||||||
>.goods-col {
|
>.goods-detail {
|
||||||
display: flex;
|
flex: 7;
|
||||||
|
|
||||||
>.goods-img {
|
|
||||||
overflow: hidden;
|
|
||||||
flex: 4;
|
|
||||||
}
|
|
||||||
|
|
||||||
>.goods-detail {
|
|
||||||
flex: 7;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.goods-detail {
|
|
||||||
margin: 0 20rpx;
|
|
||||||
|
|
||||||
>.title {
|
|
||||||
font-size: $font-base;
|
|
||||||
color: $font-color-dark;
|
|
||||||
line-height: 1.5;
|
|
||||||
height: 84rpx;
|
|
||||||
padding: 10rpx 0 0;
|
|
||||||
display: -webkit-box;
|
|
||||||
-webkit-box-orient: vertical;
|
|
||||||
-webkit-line-clamp: 2;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.promotion {
|
|
||||||
margin-top: 4rpx;
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
div {
|
|
||||||
span {
|
|
||||||
font-size: 24rpx;
|
|
||||||
color: $light-color;
|
|
||||||
margin-right: 10rpx;
|
|
||||||
padding: 0 4rpx;
|
|
||||||
border-radius: 2rpx;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.store-seller-name {
|
.goods-detail {
|
||||||
color: #666;
|
margin: 0 20rpx;
|
||||||
overflow: hidden;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
.count-config {
|
>.title {
|
||||||
padding: 5rpx 0;
|
font-size: $font-base;
|
||||||
color: #666;
|
color: $font-color-dark;
|
||||||
display: flex;
|
line-height: 1.5;
|
||||||
font-size: 24rpx;
|
height: 84rpx;
|
||||||
justify-content: space-between;
|
padding: 10rpx 0 0;
|
||||||
}
|
display: -webkit-box;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
>.price-box {
|
.promotion {
|
||||||
margin-top: 10rpx;
|
margin-top: 4rpx;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding-right: 10rpx;
|
|
||||||
font-size: 24rpx;
|
|
||||||
color: $font-color-light;
|
|
||||||
|
|
||||||
>.price {
|
div {
|
||||||
font-size: 26rpx;
|
span {
|
||||||
line-height: 1;
|
font-size: 24rpx;
|
||||||
color: $main-color;
|
color: $light-color;
|
||||||
font-weight: bold;
|
margin-right: 10rpx;
|
||||||
|
padding: 0 4rpx;
|
||||||
/deep/ span:nth-of-type(1) {
|
border-radius: 2rpx;
|
||||||
font-size: 38rpx;
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
}
|
.store-seller-name {
|
||||||
|
color: #666;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.count-config {
|
||||||
|
padding: 5rpx 0;
|
||||||
|
color: #666;
|
||||||
|
display: flex;
|
||||||
|
font-size: 24rpx;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
>.price-box {
|
||||||
|
margin-top: 10rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding-right: 10rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: $font-color-light;
|
||||||
|
|
||||||
|
>.price {
|
||||||
|
font-size: 26rpx;
|
||||||
|
line-height: 1;
|
||||||
|
color: $main-color;
|
||||||
|
font-weight: bold;
|
||||||
|
|
||||||
|
/deep/ span:nth-of-type(1) {
|
||||||
|
font-size: 38rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,190 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div v-for="(item, index) in res" :key="index" class="goods-row">
|
||||||
|
<div class="flex goods-col">
|
||||||
|
<div class="goods-img" @click="navigateToDetailPage(item)">
|
||||||
|
<u-image width="230rpx" border-radius='16' height="230rpx" :src="item.goodsImage">
|
||||||
|
<u-loading slot="loading"></u-loading>
|
||||||
|
</u-image>
|
||||||
|
</div>
|
||||||
|
<div class="goods-detail">
|
||||||
|
<div class="title clamp3" @click="navigateToDetailPage(item)">{{ item.goodsName }}</div>
|
||||||
|
<view class="price-box" @click="navigateToDetailPage(item)">
|
||||||
|
<div class="price" v-if="item.price!=undefined">
|
||||||
|
¥<span>{{ formatPrice(item.price )[0] }} </span>.{{
|
||||||
|
formatPrice(item.price )[1]
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
</view>
|
||||||
|
<div class="promotion" @click="navigateToDetailPage(item)">
|
||||||
|
<div v-if="item.salesModel == 'WHOLESALE'">
|
||||||
|
<span>批</span>
|
||||||
|
</div>
|
||||||
|
<div v-for="(promotionItem,promotionIndex) in getPromotion(item)" :key="promotionIndex">
|
||||||
|
<span v-if="promotionItem.indexOf('COUPON') != -1">劵</span>
|
||||||
|
<span v-if="promotionItem.indexOf('FULL_DISCOUNT') != -1">满减</span>
|
||||||
|
<span v-if="promotionItem.indexOf('SECKILL') != -1">秒杀</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="overflow: hidden" @click="navigateToDetailPage(item)" class="count-config">
|
||||||
|
<span style="float: left; font-size: 22rpx">已售 {{ item.buyCount || '0' }}</span>
|
||||||
|
<span style="float: right; font-size: 22rpx">{{ item.commentNum || '0' }}条评论</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import commonTpl from '@/components/m-goods-list/common'
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
lightColor: this.$mainColor
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mixins: [commonTpl],
|
||||||
|
props: {
|
||||||
|
// 遍历的数据
|
||||||
|
res: {
|
||||||
|
type: Array,
|
||||||
|
default: () => {
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang='scss' scoped>
|
||||||
|
.goods-list {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin: 10rpx 20rpx 284rpx;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
>.goods-item {
|
||||||
|
background-color: #ffffff;
|
||||||
|
display: flex;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
flex-direction: column;
|
||||||
|
width: calc(50% - 30rpx);
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
padding-bottom: 20rpx;
|
||||||
|
|
||||||
|
&:nth-child(2n + 1) {
|
||||||
|
margin-right: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.image-wrapper {
|
||||||
|
width: 100%;
|
||||||
|
height: 330rpx;
|
||||||
|
border-radius: 16rpx 16rpx 0 0;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.count-config,
|
||||||
|
.store-seller-name {
|
||||||
|
font-size: $font-sm;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-hidden {
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.goods-row {
|
||||||
|
background: #fff;
|
||||||
|
padding: 16rpx;
|
||||||
|
|
||||||
|
>.goods-col {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
>.goods-img {
|
||||||
|
overflow: hidden;
|
||||||
|
flex: 4;
|
||||||
|
}
|
||||||
|
|
||||||
|
>.goods-detail {
|
||||||
|
flex: 7;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-detail {
|
||||||
|
margin: 0 20rpx;
|
||||||
|
|
||||||
|
>.title {
|
||||||
|
font-size: $font-base;
|
||||||
|
color: $font-color-dark;
|
||||||
|
line-height: 1.5;
|
||||||
|
height: 84rpx;
|
||||||
|
padding: 10rpx 0 0;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.promotion {
|
||||||
|
margin-top: 4rpx;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
div {
|
||||||
|
span {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: $light-color;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
padding: 0 4rpx;
|
||||||
|
border-radius: 2rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.store-seller-name {
|
||||||
|
color: #666;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.count-config {
|
||||||
|
padding: 5rpx 0;
|
||||||
|
color: #666;
|
||||||
|
display: flex;
|
||||||
|
font-size: 24rpx;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
>.price-box {
|
||||||
|
margin-top: 10rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding-right: 10rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: $font-color-light;
|
||||||
|
|
||||||
|
>.price {
|
||||||
|
font-size: 26rpx;
|
||||||
|
line-height: 1;
|
||||||
|
color: $main-color;
|
||||||
|
font-weight: bold;
|
||||||
|
|
||||||
|
/deep/ span:nth-of-type(1) {
|
||||||
|
font-size: 38rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -4,8 +4,12 @@
|
||||||
*/
|
*/
|
||||||
// 开发环境
|
// 开发环境
|
||||||
const dev = {
|
const dev = {
|
||||||
common: "https://common-api.pickmall.cn",
|
// common: "https://common-api.pickmall.cn",
|
||||||
buyer: "https://buyer-api.pickmall.cn",
|
// buyer: "https://buyer-api.pickmall.cn",
|
||||||
|
|
||||||
|
common: "http://192.168.0.106:8890",
|
||||||
|
buyer: "http://192.168.0.106:8888",
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -2,8 +2,8 @@
|
||||||
"name" : "lili商城",
|
"name" : "lili商城",
|
||||||
"appid" : "__UNI__EC9FD60",
|
"appid" : "__UNI__EC9FD60",
|
||||||
"description" : "",
|
"description" : "",
|
||||||
"versionName" : "4.2.6",
|
"versionName" : "4.2.5",
|
||||||
"versionCode" : 4000260,
|
"versionCode" : 4000250,
|
||||||
"transformPx" : false,
|
"transformPx" : false,
|
||||||
"app-plus" : {
|
"app-plus" : {
|
||||||
"compatible" : {
|
"compatible" : {
|
||||||
|
|
|
||||||
|
|
@ -88,10 +88,10 @@ page {
|
||||||
</style>
|
</style>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.wrapper {
|
.wrapper {
|
||||||
background: url("https://lilishop-oss.oss-cn-beijing.aliyuncs.com/aac88f4e8eff452a8010af42c4560b04.png");
|
background: url("https://lili-system.oss-cn-beijing.aliyuncs.com/kanjia.png");
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
height: 700rpx;
|
height: 600rpx;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -99,7 +99,7 @@ page {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
border-radius: 20rpx;
|
border-radius: 20rpx;
|
||||||
position: relative;
|
position: relative;
|
||||||
top: 750rpx;
|
top: 650rpx;
|
||||||
width: 94%;
|
width: 94%;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
> .bargain {
|
> .bargain {
|
||||||
|
|
|
||||||
|
|
@ -1,145 +1,130 @@
|
||||||
<template>
|
<template>
|
||||||
<view class="sale">
|
<view class="sale">
|
||||||
<view class="sale-head">
|
<view class="sale-head">
|
||||||
<image src="@/pages/promotion/static/head-sample.png"></image>
|
<image src="@/pages/promotion/static/head-sample.png"></image>
|
||||||
</view>
|
</view>
|
||||||
<scroll-view scroll-x>
|
<scroll-view scroll-x>
|
||||||
<view class="index-navs">
|
<view class="index-navs">
|
||||||
<view class="index-nav-v">
|
<view class="index-nav-v">
|
||||||
<view class="index-nav" :class="{ 'index-nav-active': nav == index }" @click="clickNavigateTime(index)"
|
<view class="index-nav" :class="{ 'index-nav-active': nav == index }"
|
||||||
v-for="(item, index) in timeLine" :key="index">
|
@click="clickNavigateTime(index)" v-for="(item, index) in timeLine" :key="index">
|
||||||
{{ item.timeLine }}:00
|
{{ item.timeLine }}:00
|
||||||
<view class="index-nav-desc">{{ index === 0 && item.distanceStartTime === 0 ? '抢购中' : '即将开始' }}
|
<view class="index-nav-desc">{{ index === 0 && item.distanceStartTime === 0 ? '抢购中' : '即将开始' }}
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="trailer" v-if="timeLine[nav] && times">
|
<view class="trailer" v-if="timeLine[nav] && times">
|
||||||
{{ timeLine[nav].distanceStartTime === 0 ? (onlyOne ? '距结束' : '距下一轮') : '距开始' }}
|
{{ timeLine[nav].distanceStartTime === 0 ? (onlyOne ? '距结束' : '距下一轮') : '距开始' }}
|
||||||
{{ times.hours == '00' ? '0' : times.hours }}小时{{ times.minutes }}分{{ times.seconds }}秒
|
{{ times.hours == '00' ? '0' : times.hours }}小时{{ times.minutes }}分{{ times.seconds }}秒
|
||||||
</view>
|
</view>
|
||||||
</scroll-view>
|
</scroll-view>
|
||||||
<view class="sale-items" v-if="goodsList.length > 0">
|
<view class="sale-items" v-if="goodsList.length > 0">
|
||||||
<view class="sale-item" v-for="(item,index) in goodsList" :key="index">
|
<goodsTemplate :res="goodsList" />
|
||||||
<view class="sale-item-img">
|
|
||||||
<image :src="item.goodsImage" mode="aspectFill"></image>
|
|
||||||
</view>
|
|
||||||
<view class="sale-item-content">
|
|
||||||
<view class="sale-item-title">
|
|
||||||
{{ item.goodsName }}
|
|
||||||
<view class="sale-item-title-desc"></view>
|
|
||||||
</view>
|
|
||||||
<view class="sale-item-price">
|
|
||||||
<text class="sale-item-price-now">¥{{ item.price | unitPrice}}</text>
|
|
||||||
<text class="sale-item-price-origin"> ¥{{ item.originalPrice | unitPrice }}</text>
|
|
||||||
</view>
|
|
||||||
<view class="sale-item-surplus">
|
|
||||||
仅剩{{ item.quantity - item.salesNum }}件
|
|
||||||
<view class="sale-item-surplus-text"
|
|
||||||
:style="{ width: (item.quantity / (item.quantity - item.salesNum)) * 100 + '%' }">
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="sale-item-btn" @click="navigateToGoodsDetail(item)">
|
|
||||||
{{ timeLine[nav].distanceStartTime === 0 ? (item.salesNum === item.quantity ? '已售空' : '购买') : '即将开始' }}
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view v-else>
|
|
||||||
<view class="nodata">
|
|
||||||
<image style="height: 240rpx;width: 320rpx;" src="/static/nodata.png" alt="" />
|
|
||||||
<div>暂无商品</div>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
|
<view v-else>
|
||||||
|
<view class="nodata">
|
||||||
|
<image style="height: 240rpx;width: 320rpx;" src="/static/nodata.png" alt="" />
|
||||||
|
<div>暂无商品</div>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { getSeckillTimeLine, getSeckillTimeGoods } from "@/api/promotions.js";
|
import {
|
||||||
import Foundation from "@/utils/Foundation.js";
|
getSeckillTimeLine,
|
||||||
export default {
|
getSeckillTimeGoods
|
||||||
data() {
|
} from "@/api/promotions.js";
|
||||||
return {
|
import Foundation from "@/utils/Foundation.js";
|
||||||
nav: 0, //默认选择第一个时间
|
import goodsTemplate from '@/components/m-goods-list/seckill.vue'
|
||||||
timeLine: "", //获取几个点活动
|
export default {
|
||||||
resTime: 0, //当前时间
|
components: {
|
||||||
time: 0, //距离下一个活动的时间值
|
goodsTemplate
|
||||||
times: {}, //时间集合
|
},
|
||||||
onlyOne: "", //是否最后一个商品
|
data() {
|
||||||
goodsList: [], //商品集合
|
return {
|
||||||
params: {
|
nav: 0, //默认选择第一个时间
|
||||||
pageNumber: 1,
|
timeLine: "", //获取几个点活动
|
||||||
pageSize: 10,
|
resTime: 0, //当前时间
|
||||||
},
|
time: 0, //距离下一个活动的时间值
|
||||||
};
|
times: {}, //时间集合
|
||||||
},
|
onlyOne: "", //是否最后一个商品
|
||||||
|
goodsList: [], //商品集合
|
||||||
|
params: {
|
||||||
|
pageNumber: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 显示时间活动
|
* 显示时间活动
|
||||||
*/
|
*/
|
||||||
async onShow() {
|
async onShow() {
|
||||||
await this.getTimeLine();
|
await this.getTimeLine();
|
||||||
if (!this.timeLine) {
|
if (!this.timeLine) {
|
||||||
await uni.showToast({
|
await uni.showToast({
|
||||||
icon: "none",
|
icon: "none",
|
||||||
duration: 2000,
|
duration: 2000,
|
||||||
title: "今天没有活动，明天再来吧",
|
title: "今天没有活动，明天再来吧",
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
this._setTimeInterval = setInterval(() => {
|
this._setTimeInterval = setInterval(() => {
|
||||||
if (this.time <= 0) {
|
if (this.time <= 0) {
|
||||||
clearInterval(this._setTimeInterval);
|
clearInterval(this._setTimeInterval);
|
||||||
this.getGoodsList();
|
this.getGoodsList();
|
||||||
this.getTimeLine();
|
this.getTimeLine();
|
||||||
} else {
|
} else {
|
||||||
this.times = Foundation.countTimeDown(this.time);
|
this.times = Foundation.countTimeDown(this.time);
|
||||||
this.time--;
|
this.time--;
|
||||||
}
|
}
|
||||||
}, 1000);
|
}, 1000);
|
||||||
},
|
},
|
||||||
|
|
||||||
onUnload() {
|
onUnload() {
|
||||||
this._setTimeInterval && clearInterval(this._setTimeInterval);
|
this._setTimeInterval && clearInterval(this._setTimeInterval);
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
/**
|
/**
|
||||||
* 获取时间线商品
|
* 获取时间线商品
|
||||||
*/
|
*/
|
||||||
async getTimeLine() {
|
async getTimeLine() {
|
||||||
let res = await getSeckillTimeLine();
|
let res = await getSeckillTimeLine();
|
||||||
if (res.data.success && res.data.result.length > 0) {
|
if (res.data.success && res.data.result.length > 0) {
|
||||||
let timeLine = res.data.result.sort(
|
let timeLine = res.data.result.sort(
|
||||||
(x, y) => Number(x.timeLine) - Number(y.timeLine)
|
(x, y) => Number(x.timeLine) - Number(y.timeLine)
|
||||||
);
|
);
|
||||||
this.timeLine = timeLine.slice(0, 5);
|
this.timeLine = timeLine.slice(0, 5);
|
||||||
this.resTime = parseInt(new Date().getTime() / 1000);
|
this.resTime = parseInt(new Date().getTime() / 1000);
|
||||||
this.onlyOne = res.data.result.length === 1;
|
this.onlyOne = res.data.result.length === 1;
|
||||||
this.diffTime = parseInt(new Date().getTime() / 1000) - this.resTime;
|
this.diffTime = parseInt(new Date().getTime() / 1000) - this.resTime;
|
||||||
|
|
||||||
this.time =
|
this.time =
|
||||||
this.timeLine[this.nav].distanceStartTime ||
|
this.timeLine[this.nav].distanceStartTime ||
|
||||||
(this.timeLine[this.nav + 1] &&
|
(this.timeLine[this.nav + 1] &&
|
||||||
this.timeLine[this.nav + 1].distanceStartTime) ||
|
this.timeLine[this.nav + 1].distanceStartTime) ||
|
||||||
Foundation.theNextDayTime() - this.diffTime;
|
Foundation.theNextDayTime() - this.diffTime;
|
||||||
this.times = Foundation.countTimeDown(this.time);
|
this.times = Foundation.countTimeDown(this.time);
|
||||||
|
|
||||||
this.getGoodsList();
|
this.getGoodsList();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 获取商品集合
|
* 获取商品集合
|
||||||
*/
|
*/
|
||||||
async getGoodsList() {
|
async getGoodsList() {
|
||||||
this.params.timeLine = this.timeLine[this.nav].timeLine;
|
this.params.timeLine = this.timeLine[this.nav].timeLine;
|
||||||
let res = await getSeckillTimeGoods(this.params.timeLine);
|
let res = await getSeckillTimeGoods(this.params.timeLine);
|
||||||
if (res.data.success && res.data.result.length != 0) {
|
if (res.data.success && res.data.result.length != 0) {
|
||||||
this.goodsList = res.data.result;
|
this.goodsList = res.data.result;
|
||||||
} else {
|
} else {
|
||||||
this.goodsList = [];
|
this.goodsList = [];
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 跳转到商品详情
|
* 跳转到商品详情
|
||||||
|
|
@ -151,237 +136,129 @@ export default {
|
||||||
) {
|
) {
|
||||||
return;
|
return;
|
||||||
} else {
|
} else {
|
||||||
this.$navigateTo({
|
uni.navigateTo({
|
||||||
url: `/pages/product/goods?id=${item.skuId}&goodsId=${item.goodsId}`,
|
url: `/pages/product/goods?id=${item.skuId}&goodsId=${item.goodsId}`,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 单击导航时间
|
* 单击导航时间
|
||||||
*/
|
*/
|
||||||
clickNavigateTime(type) {
|
clickNavigateTime(type) {
|
||||||
this.nav = type;
|
this.nav = type;
|
||||||
this.goodsList = [];
|
this.goodsList = [];
|
||||||
this.diffTime = parseInt(new Date().getTime() / 1000) - this.resTime;
|
this.diffTime = parseInt(new Date().getTime() / 1000) - this.resTime;
|
||||||
this.time =
|
this.time =
|
||||||
this.timeLine[this.nav].distanceStartTime ||
|
this.timeLine[this.nav].distanceStartTime ||
|
||||||
(this.timeLine[this.nav + 1] &&
|
(this.timeLine[this.nav + 1] &&
|
||||||
this.timeLine[this.nav + 1].distanceStartTime) ||
|
this.timeLine[this.nav + 1].distanceStartTime) ||
|
||||||
Foundation.theNextDayTime() - this.diffTime;
|
Foundation.theNextDayTime() - this.diffTime;
|
||||||
|
|
||||||
this.times = Foundation.countTimeDown(this.time);
|
this.times = Foundation.countTimeDown(this.time);
|
||||||
this.getGoodsList();
|
this.getGoodsList();
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.sale {
|
.sale {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
background-color: #f7f7f7;
|
background-color: #f7f7f7;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nodata {
|
.nodata {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-top: 40rpx;
|
margin-top: 40rpx;
|
||||||
|
|
||||||
> div {
|
>div {
|
||||||
font-size: 24rpx;
|
font-size: 24rpx;
|
||||||
margin-top: 20rpx;
|
margin-top: 20rpx;
|
||||||
color: #666;
|
color: #666;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.sale-head {
|
.sale-head {
|
||||||
image {
|
image {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 280rpx;
|
height: 280rpx;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.sale-items {
|
.sale-items {
|
||||||
padding-top: 20rpx;
|
padding-top: 20rpx;
|
||||||
display: -webkit-box;
|
}
|
||||||
display: -webkit-flex;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sale-item {
|
.trailer {
|
||||||
width: 710rpx;
|
height: 100rpx;
|
||||||
height: 226rpx;
|
background: #ffffff;
|
||||||
padding-left: 20rpx;
|
display: -webkit-box;
|
||||||
margin-bottom: 10rpx;
|
display: -webkit-flex;
|
||||||
border-radius: 12rpx;
|
display: flex;
|
||||||
background-color: #fff;
|
justify-content: center;
|
||||||
position: relative;
|
align-items: center;
|
||||||
display: -webkit-box;
|
font-size: 22rpx;
|
||||||
display: -webkit-flex;
|
color: #666666;
|
||||||
display: flex;
|
box-sizing: border-box;
|
||||||
align-items: center;
|
position: relative;
|
||||||
}
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.sale-item-img {
|
.index-navs {
|
||||||
margin-right: 20rpx;
|
background-color: #f7f7f7;
|
||||||
image {
|
display: -webkit-box;
|
||||||
width: 186rpx;
|
display: -webkit-flex;
|
||||||
height: 186rpx;
|
display: flex;
|
||||||
border-radius: 8rpx;
|
align-items: center;
|
||||||
}
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sale-item-content {
|
.index-nav-v {
|
||||||
line-height: 2em;
|
display: -webkit-box;
|
||||||
}
|
display: -webkit-flex;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
.sale-item-title {
|
.index-nav {
|
||||||
display: -webkit-box;
|
font-size: 28rpx;
|
||||||
-webkit-box-orient: vertical;
|
display: -webkit-box;
|
||||||
-webkit-line-clamp: 2;
|
display: -webkit-flex;
|
||||||
overflow: hidden;
|
display: flex;
|
||||||
line-height: 1.5;
|
justify-content: center;
|
||||||
font-size: 28rpx;
|
align-items: center;
|
||||||
color: #333;
|
width: 150rpx;
|
||||||
}
|
flex-direction: column;
|
||||||
|
color: #bababa;
|
||||||
|
height: 115rpx;
|
||||||
|
line-height: 1em;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
.sale-item-title-desc {
|
&-active {
|
||||||
font-size: 22rpx;
|
background-image: url(/static/seckill/active.png);
|
||||||
color: #999;
|
background-size: 100% 115rpx;
|
||||||
}
|
background-repeat: no-repeat;
|
||||||
|
color: #ffffff;
|
||||||
|
position: relative;
|
||||||
|
z-index: 30;
|
||||||
|
|
||||||
.sale-item-price {
|
.index-nav-desc {
|
||||||
font-size: 22rpx;
|
color: #ffffff;
|
||||||
color: 999;
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.sale-item-price-now {
|
.index-nav-desc {
|
||||||
font-size: 40rpx;
|
margin-top: 8rpx;
|
||||||
color: #ff5a10;
|
font-size: 22rpx;
|
||||||
margin: 0 10rpx;
|
color: #bababa;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sale-item-price-origin {
|
|
||||||
font-size: 20rpx;
|
|
||||||
color: #999;
|
|
||||||
|
|
||||||
-webkit-text-decoration-line: line-through;
|
|
||||||
text-decoration-line: line-through;
|
|
||||||
text-decoration: line-through;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sale-item-surplus {
|
|
||||||
border: 2rpx solid rgb(34, 178, 140);
|
|
||||||
border-radius: 12px;
|
|
||||||
width: 166rpx;
|
|
||||||
color: rgb(31, 177, 138);
|
|
||||||
font-size: 20rpx;
|
|
||||||
position: relative;
|
|
||||||
text-align: center;
|
|
||||||
z-index: 2;
|
|
||||||
height: 32rpx;
|
|
||||||
line-height: 28rpx;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sale-item-surplus-text {
|
|
||||||
width: 166rpx;
|
|
||||||
background: rgb(234, 247, 245);
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
z-index: -1;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sale-item-btn {
|
|
||||||
position: absolute;
|
|
||||||
right: 20rpx;
|
|
||||||
bottom: 20rpx;
|
|
||||||
padding: 0 20rpx;
|
|
||||||
height: 60rpx;
|
|
||||||
background-color: #1abc9c;
|
|
||||||
border-radius: 10rpx;
|
|
||||||
font-size: 25rpx;
|
|
||||||
color: #fff;
|
|
||||||
display: -webkit-box;
|
|
||||||
display: -webkit-flex;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.trailer {
|
|
||||||
height: 100rpx;
|
|
||||||
background: #ffffff;
|
|
||||||
display: -webkit-box;
|
|
||||||
display: -webkit-flex;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
font-size: 22rpx;
|
|
||||||
color: #666666;
|
|
||||||
box-sizing: border-box;
|
|
||||||
position: relative;
|
|
||||||
z-index: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.index-navs {
|
|
||||||
background-color: #f7f7f7;
|
|
||||||
display: -webkit-box;
|
|
||||||
display: -webkit-flex;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
.index-nav-v {
|
|
||||||
display: -webkit-box;
|
|
||||||
display: -webkit-flex;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.index-nav {
|
|
||||||
font-size: 28rpx;
|
|
||||||
display: -webkit-box;
|
|
||||||
display: -webkit-flex;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
width: 150rpx;
|
|
||||||
flex-direction: column;
|
|
||||||
color: #bababa;
|
|
||||||
height: 115rpx;
|
|
||||||
line-height: 1em;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
&-active {
|
|
||||||
background-image: url(/static/seckill/active.png);
|
|
||||||
background-size: 100% 115rpx;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
color: #ffffff;
|
|
||||||
position: relative;
|
|
||||||
z-index: 30;
|
|
||||||
|
|
||||||
.index-nav-desc {
|
|
||||||
color: #ffffff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.index-nav-desc {
|
|
||||||
margin-top: 8rpx;
|
|
||||||
font-size: 22rpx;
|
|
||||||
color: #bababa;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -854,7 +854,8 @@ function downloadPopup(data, callback, cancelCallback, rebootCallback) {
|
||||||
export default function (isPrompt = false) {
|
export default function (isPrompt = false) {
|
||||||
getCurrentNo((version) => {
|
getCurrentNo((version) => {
|
||||||
getServerNo((res) => {
|
getServerNo((res) => {
|
||||||
if (res.versionCode.replace(/\./g, "") <= version.version.replace(/\./g, "") ) {
|
|
||||||
|
if (res.versionCode.replace(/\./g, "") <= version.version.replace(/\./g, "")) {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
|
|
@ -109,63 +109,63 @@ text {
|
||||||
}
|
}
|
||||||
|
|
||||||
// 定义flex等分
|
// 定义flex等分
|
||||||
@for $i from 0 through 12 {
|
// @for $i from 0 through 12 {
|
||||||
.u-flex-#{$i} {
|
// .u-flex-#{$i} {
|
||||||
flex: $i;
|
// flex: $i;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
// 定义字体(px)单位，小于20都为px单位字体
|
// // 定义字体(px)单位，小于20都为px单位字体
|
||||||
@for $i from 9 to 20 {
|
// @for $i from 9 to 20 {
|
||||||
.u-font-#{$i} {
|
// .u-font-#{$i} {
|
||||||
font-size: $i + px;
|
// font-size: $i + px;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
// 定义字体(rpx)单位，大于或等于20的都为rpx单位字体
|
// // 定义字体(rpx)单位，大于或等于20的都为rpx单位字体
|
||||||
@for $i from 20 through 40 {
|
// @for $i from 20 through 40 {
|
||||||
.u-font-#{$i} {
|
// .u-font-#{$i} {
|
||||||
font-size: $i + rpx;
|
// font-size: $i + rpx;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
// 定义内外边距，历遍1-80
|
// // 定义内外边距，历遍1-80
|
||||||
@for $i from 0 through 80 {
|
// @for $i from 0 through 80 {
|
||||||
// 只要双数和能被5除尽的数
|
// // 只要双数和能被5除尽的数
|
||||||
@if $i % 2 == 0 or $i % 5 == 0 {
|
// @if $i % 2 == 0 or $i % 5 == 0 {
|
||||||
// 得出：u-margin-30或者u-m-30
|
// // 得出：u-margin-30或者u-m-30
|
||||||
.u-margin-#{$i}, .u-m-#{$i} {
|
// .u-margin-#{$i}, .u-m-#{$i} {
|
||||||
margin: $i + rpx!important;
|
// margin: $i + rpx!important;
|
||||||
}
|
// }
|
||||||
|
|
||||||
// 得出：u-padding-30或者u-p-30
|
// // 得出：u-padding-30或者u-p-30
|
||||||
.u-padding-#{$i}, .u-p-#{$i} {
|
// .u-padding-#{$i}, .u-p-#{$i} {
|
||||||
padding: $i + rpx!important;
|
// padding: $i + rpx!important;
|
||||||
}
|
// }
|
||||||
|
|
||||||
@each $short, $long in l left, t top, r right, b bottom {
|
// @each $short, $long in l left, t top, r right, b bottom {
|
||||||
// 缩写版，结果如： u-m-l-30
|
// // 缩写版，结果如： u-m-l-30
|
||||||
// 定义外边距
|
// // 定义外边距
|
||||||
.u-m-#{$short}-#{$i} {
|
// .u-m-#{$short}-#{$i} {
|
||||||
margin-#{$long}: $i + rpx!important;
|
// margin-#{$long}: $i + rpx!important;
|
||||||
}
|
// }
|
||||||
|
|
||||||
// 定义内边距
|
// // 定义内边距
|
||||||
.u-p-#{$short}-#{$i} {
|
// .u-p-#{$short}-#{$i} {
|
||||||
padding-#{$long}: $i + rpx!important;
|
// padding-#{$long}: $i + rpx!important;
|
||||||
}
|
// }
|
||||||
|
|
||||||
// 完整版，结果如：u-margin-left-30
|
// // 完整版，结果如：u-margin-left-30
|
||||||
// 定义外边距
|
// // 定义外边距
|
||||||
.u-margin-#{$long}-#{$i} {
|
// .u-margin-#{$long}-#{$i} {
|
||||||
margin-#{$long}: $i + rpx!important;
|
// margin-#{$long}: $i + rpx!important;
|
||||||
}
|
// }
|
||||||
|
|
||||||
// 定义内边距
|
// // 定义内边距
|
||||||
.u-padding-#{$long}-#{$i} {
|
// .u-padding-#{$long}-#{$i} {
|
||||||
padding-#{$long}: $i + rpx!important;
|
// padding-#{$long}: $i + rpx!important;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue