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>
|
||||
|
||||
<script>
|
||||
import commonTpl from '@/components/m-goods-list/common'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
lightColor: this.$mainColor
|
||||
}
|
||||
},
|
||||
mixins: [commonTpl],
|
||||
|
||||
props: {
|
||||
// 遍历的数据
|
||||
res: {
|
||||
|
|
@ -198,13 +201,13 @@
|
|||
},
|
||||
// 跳转到商品详情
|
||||
navigateToDetailPage(item) {
|
||||
this.$navigateTo({
|
||||
uni.navigateTo({
|
||||
url: `/pages/product/goods?id=${item.content.id}&goodsId=${item.content.goodsId}`,
|
||||
});
|
||||
},
|
||||
// 跳转地址
|
||||
navigateToStoreDetailPage(item) {
|
||||
this.$navigateTo({
|
||||
uni.navigateTo({
|
||||
url: `/pages/product/shopPage?id=${item.content.storeId}`,
|
||||
});
|
||||
},
|
||||
|
|
@ -213,7 +216,7 @@
|
|||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
/* 商品列表 */
|
||||
/* 商品列表 */
|
||||
.goods-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
|
|
|||
|
|
@ -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 = {
|
||||
common: "https://common-api.pickmall.cn",
|
||||
buyer: "https://buyer-api.pickmall.cn",
|
||||
// common: "https://common-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商城",
|
||||
"appid" : "__UNI__EC9FD60",
|
||||
"description" : "",
|
||||
"versionName" : "4.2.6",
|
||||
"versionCode" : 4000260,
|
||||
"versionName" : "4.2.5",
|
||||
"versionCode" : 4000250,
|
||||
"transformPx" : false,
|
||||
"app-plus" : {
|
||||
"compatible" : {
|
||||
|
|
|
|||
|
|
@ -88,10 +88,10 @@ page {
|
|||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.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-size: 100% 100%;
|
||||
height: 700rpx;
|
||||
height: 600rpx;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
|
@ -99,7 +99,7 @@ page {
|
|||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
position: relative;
|
||||
top: 750rpx;
|
||||
top: 650rpx;
|
||||
width: 94%;
|
||||
margin: 0 auto;
|
||||
> .bargain {
|
||||
|
|
|
|||
|
|
@ -6,8 +6,8 @@
|
|||
<scroll-view scroll-x>
|
||||
<view class="index-navs">
|
||||
<view class="index-nav-v">
|
||||
<view class="index-nav" :class="{ 'index-nav-active': nav == index }" @click="clickNavigateTime(index)"
|
||||
v-for="(item, index) in timeLine" :key="index">
|
||||
<view class="index-nav" :class="{ 'index-nav-active': nav == index }"
|
||||
@click="clickNavigateTime(index)" v-for="(item, index) in timeLine" :key="index">
|
||||
{{ item.timeLine }}:00
|
||||
<view class="index-nav-desc">{{ index === 0 && item.distanceStartTime === 0 ? '抢购中' : '即将开始' }}
|
||||
</view>
|
||||
|
|
@ -20,30 +20,8 @@
|
|||
</view>
|
||||
</scroll-view>
|
||||
<view class="sale-items" v-if="goodsList.length > 0">
|
||||
<view class="sale-item" v-for="(item,index) in goodsList" :key="index">
|
||||
<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>
|
||||
<goodsTemplate :res="goodsList" />
|
||||
|
||||
</view>
|
||||
<view v-else>
|
||||
<view class="nodata">
|
||||
|
|
@ -56,9 +34,16 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { getSeckillTimeLine, getSeckillTimeGoods } from "@/api/promotions.js";
|
||||
import Foundation from "@/utils/Foundation.js";
|
||||
export default {
|
||||
import {
|
||||
getSeckillTimeLine,
|
||||
getSeckillTimeGoods
|
||||
} from "@/api/promotions.js";
|
||||
import Foundation from "@/utils/Foundation.js";
|
||||
import goodsTemplate from '@/components/m-goods-list/seckill.vue'
|
||||
export default {
|
||||
components: {
|
||||
goodsTemplate
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
nav: 0, //默认选择第一个时间
|
||||
|
|
@ -151,7 +136,7 @@ export default {
|
|||
) {
|
||||
return;
|
||||
} else {
|
||||
this.$navigateTo({
|
||||
uni.navigateTo({
|
||||
url: `/pages/product/goods?id=${item.skuId}&goodsId=${item.goodsId}`,
|
||||
});
|
||||
}
|
||||
|
|
@ -174,17 +159,17 @@ export default {
|
|||
this.getGoodsList();
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.sale {
|
||||
.sale {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
background-color: #f7f7f7;
|
||||
}
|
||||
}
|
||||
|
||||
.nodata {
|
||||
.nodata {
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
|
@ -192,133 +177,25 @@ export default {
|
|||
align-items: center;
|
||||
margin-top: 40rpx;
|
||||
|
||||
> div {
|
||||
>div {
|
||||
font-size: 24rpx;
|
||||
margin-top: 20rpx;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sale-head {
|
||||
.sale-head {
|
||||
image {
|
||||
width: 100%;
|
||||
height: 280rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.sale-items {
|
||||
padding-top: 20rpx;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sale-item {
|
||||
width: 710rpx;
|
||||
height: 226rpx;
|
||||
padding-left: 20rpx;
|
||||
margin-bottom: 10rpx;
|
||||
border-radius: 12rpx;
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.sale-item-img {
|
||||
margin-right: 20rpx;
|
||||
image {
|
||||
width: 186rpx;
|
||||
height: 186rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.sale-item-content {
|
||||
line-height: 2em;
|
||||
}
|
||||
.sale-items {
|
||||
padding-top: 20rpx;
|
||||
}
|
||||
|
||||
.sale-item-title {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
line-height: 1.5;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.sale-item-title-desc {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.sale-item-price {
|
||||
font-size: 22rpx;
|
||||
color: 999;
|
||||
}
|
||||
|
||||
.sale-item-price-now {
|
||||
font-size: 40rpx;
|
||||
color: #ff5a10;
|
||||
margin: 0 10rpx;
|
||||
}
|
||||
|
||||
.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 {
|
||||
.trailer {
|
||||
height: 100rpx;
|
||||
background: #ffffff;
|
||||
display: -webkit-box;
|
||||
|
|
@ -331,27 +208,27 @@ export default {
|
|||
box-sizing: border-box;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.index-navs {
|
||||
.index-navs {
|
||||
background-color: #f7f7f7;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
.index-nav-v {
|
||||
.index-nav-v {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.index-nav {
|
||||
.index-nav {
|
||||
font-size: 28rpx;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
|
|
@ -377,11 +254,11 @@ export default {
|
|||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.index-nav-desc {
|
||||
.index-nav-desc {
|
||||
margin-top: 8rpx;
|
||||
font-size: 22rpx;
|
||||
color: #bababa;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -854,7 +854,8 @@ function downloadPopup(data, callback, cancelCallback, rebootCallback) {
|
|||
export default function (isPrompt = false) {
|
||||
getCurrentNo((version) => {
|
||||
getServerNo((res) => {
|
||||
if (res.versionCode.replace(/\./g, "") <= version.version.replace(/\./g, "") ) {
|
||||
|
||||
if (res.versionCode.replace(/\./g, "") <= version.version.replace(/\./g, "")) {
|
||||
return false;
|
||||
}
|
||||
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
|
|
@ -109,63 +109,63 @@ text {
|
|||
}
|
||||
|
||||
// 定义flex等分
|
||||
@for $i from 0 through 12 {
|
||||
.u-flex-#{$i} {
|
||||
flex: $i;
|
||||
}
|
||||
}
|
||||
// @for $i from 0 through 12 {
|
||||
// .u-flex-#{$i} {
|
||||
// flex: $i;
|
||||
// }
|
||||
// }
|
||||
|
||||
// 定义字体(px)单位，小于20都为px单位字体
|
||||
@for $i from 9 to 20 {
|
||||
.u-font-#{$i} {
|
||||
font-size: $i + px;
|
||||
}
|
||||
}
|
||||
// // 定义字体(px)单位，小于20都为px单位字体
|
||||
// @for $i from 9 to 20 {
|
||||
// .u-font-#{$i} {
|
||||
// font-size: $i + px;
|
||||
// }
|
||||
// }
|
||||
|
||||
// 定义字体(rpx)单位，大于或等于20的都为rpx单位字体
|
||||
@for $i from 20 through 40 {
|
||||
.u-font-#{$i} {
|
||||
font-size: $i + rpx;
|
||||
}
|
||||
}
|
||||
// // 定义字体(rpx)单位，大于或等于20的都为rpx单位字体
|
||||
// @for $i from 20 through 40 {
|
||||
// .u-font-#{$i} {
|
||||
// font-size: $i + rpx;
|
||||
// }
|
||||
// }
|
||||
|
||||
// 定义内外边距，历遍1-80
|
||||
@for $i from 0 through 80 {
|
||||
// 只要双数和能被5除尽的数
|
||||
@if $i % 2 == 0 or $i % 5 == 0 {
|
||||
// 得出：u-margin-30或者u-m-30
|
||||
.u-margin-#{$i}, .u-m-#{$i} {
|
||||
margin: $i + rpx!important;
|
||||
}
|
||||
// // 定义内外边距，历遍1-80
|
||||
// @for $i from 0 through 80 {
|
||||
// // 只要双数和能被5除尽的数
|
||||
// @if $i % 2 == 0 or $i % 5 == 0 {
|
||||
// // 得出：u-margin-30或者u-m-30
|
||||
// .u-margin-#{$i}, .u-m-#{$i} {
|
||||
// margin: $i + rpx!important;
|
||||
// }
|
||||
|
||||
// 得出：u-padding-30或者u-p-30
|
||||
.u-padding-#{$i}, .u-p-#{$i} {
|
||||
padding: $i + rpx!important;
|
||||
}
|
||||
// // 得出：u-padding-30或者u-p-30
|
||||
// .u-padding-#{$i}, .u-p-#{$i} {
|
||||
// padding: $i + rpx!important;
|
||||
// }
|
||||
|
||||
@each $short, $long in l left, t top, r right, b bottom {
|
||||
// 缩写版，结果如： u-m-l-30
|
||||
// 定义外边距
|
||||
.u-m-#{$short}-#{$i} {
|
||||
margin-#{$long}: $i + rpx!important;
|
||||
}
|
||||
// @each $short, $long in l left, t top, r right, b bottom {
|
||||
// // 缩写版，结果如： u-m-l-30
|
||||
// // 定义外边距
|
||||
// .u-m-#{$short}-#{$i} {
|
||||
// margin-#{$long}: $i + rpx!important;
|
||||
// }
|
||||
|
||||
// 定义内边距
|
||||
.u-p-#{$short}-#{$i} {
|
||||
padding-#{$long}: $i + rpx!important;
|
||||
}
|
||||
// // 定义内边距
|
||||
// .u-p-#{$short}-#{$i} {
|
||||
// padding-#{$long}: $i + rpx!important;
|
||||
// }
|
||||
|
||||
// 完整版，结果如：u-margin-left-30
|
||||
// 定义外边距
|
||||
.u-margin-#{$long}-#{$i} {
|
||||
margin-#{$long}: $i + rpx!important;
|
||||
}
|
||||
// // 完整版，结果如：u-margin-left-30
|
||||
// // 定义外边距
|
||||
// .u-margin-#{$long}-#{$i} {
|
||||
// margin-#{$long}: $i + rpx!important;
|
||||
// }
|
||||
|
||||
// 定义内边距
|
||||
.u-padding-#{$long}-#{$i} {
|
||||
padding-#{$long}: $i + rpx!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// // 定义内边距
|
||||
// .u-padding-#{$long}-#{$i} {
|
||||
// padding-#{$long}: $i + rpx!important;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue