anhaogxs
4 years ago
8 changed files with 4218 additions and 873 deletions
@ -0,0 +1,517 @@
|
||||
<template> |
||||
<button |
||||
class="tui-btn" |
||||
:class="[ |
||||
plain ? 'tui-' + type + '-outline' : 'tui-btn-' + (type || 'primary'), |
||||
getDisabledClass(disabled, type, plain), |
||||
getShapeClass(shape, plain), |
||||
getShadowClass(type, shadow, plain), |
||||
bold ? 'tui-text-bold' : '', |
||||
link ? 'tui-btn__link' : '' |
||||
]" |
||||
:hover-class="getHoverClass(disabled, type, plain)" |
||||
:style="{ width: width, height: height, lineHeight: height, fontSize: size + 'rpx', margin: margin }" |
||||
:loading="loading" |
||||
:form-type="formType" |
||||
:open-type="openType" |
||||
@getuserinfo="bindgetuserinfo" |
||||
@getphonenumber="bindgetphonenumber" |
||||
@contact="bindcontact" |
||||
@error="binderror" |
||||
:disabled="disabled" |
||||
@tap="handleClick" |
||||
> |
||||
<slot></slot> |
||||
</button> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
name: 'tui-button', |
||||
behaviors: ['wx://form-field-button'], |
||||
props: { |
||||
//样式类型 primary, white, danger, warning, green,blue, gray，black,brown,gray-primary,gray-danger,gray-warning,gray-green |
||||
type: { |
||||
type: String, |
||||
default: 'primary' |
||||
}, |
||||
//是否加阴影 |
||||
shadow: { |
||||
type: Boolean, |
||||
default: false |
||||
}, |
||||
// 宽度 rpx或 % |
||||
width: { |
||||
type: String, |
||||
default: '100%' |
||||
}, |
||||
//高度 rpx |
||||
height: { |
||||
type: String, |
||||
default: '96rpx' |
||||
}, |
||||
//字体大小 rpx |
||||
size: { |
||||
type: Number, |
||||
default: 32 |
||||
}, |
||||
bold: { |
||||
type: Boolean, |
||||
default: false |
||||
}, |
||||
margin: { |
||||
type: String, |
||||
default: '0' |
||||
}, |
||||
//形状 circle(圆角), square(默认方形)，rightAngle(平角) |
||||
shape: { |
||||
type: String, |
||||
default: 'square' |
||||
}, |
||||
plain: { |
||||
type: Boolean, |
||||
default: false |
||||
}, |
||||
//link样式，去掉边框，结合plain一起使用 |
||||
link: { |
||||
type: Boolean, |
||||
default: false |
||||
}, |
||||
disabled: { |
||||
type: Boolean, |
||||
default: false |
||||
}, |
||||
//禁用后背景是否为灰色 （非空心button生效） |
||||
disabledGray: { |
||||
type: Boolean, |
||||
default: false |
||||
}, |
||||
loading: { |
||||
type: Boolean, |
||||
default: false |
||||
}, |
||||
formType: { |
||||
type: String, |
||||
default: '' |
||||
}, |
||||
openType: { |
||||
type: String, |
||||
default: '' |
||||
}, |
||||
index: { |
||||
type: [Number, String], |
||||
default: 0 |
||||
}, |
||||
//是否需要阻止重复点击【默认200ms】 |
||||
preventClick: { |
||||
type: Boolean, |
||||
default: false |
||||
} |
||||
}, |
||||
data() { |
||||
return { |
||||
time: 0 |
||||
}; |
||||
}, |
||||
methods: { |
||||
handleClick() { |
||||
if (this.disabled) return; |
||||
if (this.preventClick) { |
||||
if(new Date().getTime() - this.time <= 200) return; |
||||
this.time = new Date().getTime(); |
||||
setTimeout(() => { |
||||
this.time = 0; |
||||
}, 200); |
||||
} |
||||
this.$emit('click', { |
||||
index: Number(this.index) |
||||
}); |
||||
}, |
||||
bindgetuserinfo({ detail = {} } = {}) { |
||||
this.$emit('getuserinfo', detail); |
||||
}, |
||||
bindcontact({ detail = {} } = {}) { |
||||
this.$emit('contact', detail); |
||||
}, |
||||
bindgetphonenumber({ detail = {} } = {}) { |
||||
this.$emit('getphonenumber', detail); |
||||
}, |
||||
binderror({ detail = {} } = {}) { |
||||
this.$emit('error', detail); |
||||
}, |
||||
getShadowClass: function(type, shadow, plain) { |
||||
let className = ''; |
||||
if (shadow && type != 'white' && !plain) { |
||||
className = 'tui-shadow-' + type; |
||||
} |
||||
return className; |
||||
}, |
||||
getDisabledClass: function(disabled, type, plain) { |
||||
let className = ''; |
||||
if (disabled && type != 'white' && type.indexOf('-') == -1) { |
||||
let classVal = this.disabledGray ? 'tui-gray-disabled' : 'tui-dark-disabled'; |
||||
className = plain ? 'tui-dark-disabled-outline' : classVal; |
||||
} |
||||
return className; |
||||
}, |
||||
getShapeClass: function(shape, plain) { |
||||
let className = ''; |
||||
if (shape == 'circle') { |
||||
className = plain ? 'tui-outline-fillet' : 'tui-fillet'; |
||||
} else if (shape == 'rightAngle') { |
||||
className = plain ? 'tui-outline-rightAngle' : 'tui-rightAngle'; |
||||
} |
||||
return className; |
||||
}, |
||||
getHoverClass: function(disabled, type, plain) { |
||||
let className = ''; |
||||
if (!disabled) { |
||||
className = plain ? 'tui-outline-hover' : 'tui-' + (type || 'primary') + '-hover'; |
||||
} |
||||
return className; |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style scoped> |
||||
.tui-btn-primary { |
||||
background: #5677fc !important; |
||||
color: #fff; |
||||
} |
||||
|
||||
.tui-shadow-primary { |
||||
box-shadow: 0 10rpx 14rpx 0 rgba(86, 119, 252, 0.2); |
||||
} |
||||
|
||||
.tui-btn-danger { |
||||
background: #eb0909 !important; |
||||
color: #fff; |
||||
} |
||||
|
||||
.tui-shadow-danger { |
||||
box-shadow: 0 10rpx 14rpx 0 rgba(235, 9, 9, 0.2); |
||||
} |
||||
|
||||
.tui-btn-warning { |
||||
background: #fc872d !important; |
||||
color: #fff; |
||||
} |
||||
|
||||
.tui-shadow-warning { |
||||
box-shadow: 0 10rpx 14rpx 0 rgba(252, 135, 45, 0.2); |
||||
} |
||||
|
||||
.tui-btn-green { |
||||
background: #07c160 !important; |
||||
color: #fff; |
||||
} |
||||
|
||||
.tui-shadow-green { |
||||
box-shadow: 0 10rpx 14rpx 0 rgba(7, 193, 96, 0.2); |
||||
} |
||||
|
||||
.tui-btn-blue { |
||||
background: #007aff !important; |
||||
color: #fff; |
||||
} |
||||
|
||||
.tui-shadow-blue { |
||||
box-shadow: 0 10rpx 14rpx 0 rgba(0, 122, 255, 0.2); |
||||
} |
||||
|
||||
.tui-btn-white { |
||||
background: #fff !important; |
||||
color: #333 !important; |
||||
} |
||||
|
||||
.tui-btn-gray { |
||||
background: #bfbfbf !important; |
||||
color: #fff !important; |
||||
} |
||||
|
||||
.tui-btn-black { |
||||
background: #333 !important; |
||||
color: #fff !important; |
||||
} |
||||
.tui-btn-brown{ |
||||
background: #ac9157 !important; |
||||
color: #fff !important; |
||||
} |
||||
|
||||
.tui-btn-gray-black { |
||||
background: #f2f2f2 !important; |
||||
color: #333; |
||||
} |
||||
|
||||
.tui-btn-gray-primary { |
||||
background: #f2f2f2 !important; |
||||
color: #5677fc !important; |
||||
} |
||||
|
||||
.tui-gray-primary-hover { |
||||
background: #d9d9d9 !important; |
||||
} |
||||
|
||||
.tui-btn-gray-green { |
||||
background: #f2f2f2 !important; |
||||
color: #07c160 !important; |
||||
} |
||||
|
||||
.tui-gray-green-hover { |
||||
background: #d9d9d9 !important; |
||||
} |
||||
|
||||
.tui-btn-gray-danger { |
||||
background: #f2f2f2 !important; |
||||
color: #eb0909 !important; |
||||
} |
||||
|
||||
.tui-gray-danger-hover { |
||||
background: #d9d9d9 !important; |
||||
} |
||||
|
||||
.tui-btn-gray-warning { |
||||
background: #f2f2f2 !important; |
||||
color: #fc872d !important; |
||||
} |
||||
|
||||
.tui-gray-warning-hover { |
||||
background: #d9d9d9 !important; |
||||
} |
||||
|
||||
.tui-shadow-gray { |
||||
box-shadow: 0 10rpx 14rpx 0 rgba(191, 191, 191, 0.2); |
||||
} |
||||
|
||||
.tui-hover-gray { |
||||
background: #f7f7f9 !important; |
||||
} |
||||
|
||||
.tui-black-hover { |
||||
background: #555 !important; |
||||
color: #e5e5e5 !important; |
||||
} |
||||
.tui-brown-hover{ |
||||
background: #A37F49 !important; |
||||
color: #e5e5e5 !important; |
||||
} |
||||
|
||||
/* button start*/ |
||||
|
||||
.tui-btn { |
||||
width: 100%; |
||||
position: relative; |
||||
border: 0 !important; |
||||
border-radius: 6rpx; |
||||
padding-left: 0; |
||||
padding-right: 0; |
||||
overflow: visible; |
||||
} |
||||
|
||||
.tui-btn::after { |
||||
content: ''; |
||||
position: absolute; |
||||
width: 200%; |
||||
height: 200%; |
||||
transform-origin: 0 0; |
||||
transform: scale(0.5, 0.5) translateZ(0); |
||||
box-sizing: border-box; |
||||
left: 0; |
||||
top: 0; |
||||
border-radius: 12rpx; |
||||
border: 0; |
||||
} |
||||
|
||||
.tui-text-bold { |
||||
font-weight: bold; |
||||
} |
||||
|
||||
.tui-btn-white::after { |
||||
border: 1px solid #bfbfbf; |
||||
} |
||||
|
||||
.tui-white-hover { |
||||
background: #e5e5e5 !important; |
||||
color: #2e2e2e !important; |
||||
} |
||||
|
||||
.tui-dark-disabled { |
||||
opacity: 0.6 !important; |
||||
color: #fafbfc !important; |
||||
} |
||||
|
||||
.tui-dark-disabled-outline { |
||||
opacity: 0.5 !important; |
||||
} |
||||
|
||||
.tui-gray-disabled { |
||||
background: #f3f3f3 !important; |
||||
color: #919191 !important; |
||||
box-shadow: none; |
||||
} |
||||
|
||||
.tui-outline-hover { |
||||
opacity: 0.5; |
||||
} |
||||
|
||||
.tui-primary-hover { |
||||
background: #4a67d6 !important; |
||||
color: #e5e5e5 !important; |
||||
} |
||||
|
||||
.tui-primary-outline::after { |
||||
border: 1px solid #5677fc !important; |
||||
} |
||||
|
||||
.tui-primary-outline { |
||||
color: #5677fc !important; |
||||
background: transparent; |
||||
} |
||||
|
||||
.tui-danger-hover { |
||||
background: #c80808 !important; |
||||
color: #e5e5e5 !important; |
||||
} |
||||
|
||||
.tui-danger-outline { |
||||
color: #eb0909 !important; |
||||
background: transparent; |
||||
} |
||||
|
||||
.tui-danger-outline::after { |
||||
border: 1px solid #eb0909 !important; |
||||
} |
||||
|
||||
.tui-warning-hover { |
||||
background: #d67326 !important; |
||||
color: #e5e5e5 !important; |
||||
} |
||||
|
||||
.tui-warning-outline { |
||||
color: #fc872d !important; |
||||
background: transparent; |
||||
} |
||||
|
||||
.tui-warning-outline::after { |
||||
border: 1px solid #fc872d !important; |
||||
} |
||||
|
||||
.tui-green-hover { |
||||
background: #06ad56 !important; |
||||
color: #e5e5e5 !important; |
||||
} |
||||
|
||||
.tui-green-outline { |
||||
color: #07c160 !important; |
||||
background: transparent; |
||||
} |
||||
|
||||
.tui-green-outline::after { |
||||
border: 1px solid #07c160 !important; |
||||
} |
||||
|
||||
.tui-blue-hover { |
||||
background: #0062cc !important; |
||||
color: #e5e5e5 !important; |
||||
} |
||||
|
||||
.tui-blue-outline { |
||||
color: #007aff !important; |
||||
background: transparent; |
||||
} |
||||
|
||||
.tui-blue-outline::after { |
||||
border: 1px solid #007aff !important; |
||||
} |
||||
|
||||
/* #ifndef APP-NVUE */ |
||||
.tui-btn-gradual { |
||||
background: linear-gradient(90deg, rgb(255, 89, 38), rgb(240, 14, 44)) !important; |
||||
color: #fff !important; |
||||
} |
||||
|
||||
.tui-shadow-gradual { |
||||
box-shadow: 0 10rpx 14rpx 0 rgba(235, 9, 9, 0.15); |
||||
} |
||||
|
||||
/* #endif */ |
||||
|
||||
.tui-gray-hover { |
||||
background: #a3a3a3 !important; |
||||
color: #898989; |
||||
} |
||||
|
||||
/* #ifndef APP-NVUE */ |
||||
.tui-gradual-hover { |
||||
background: linear-gradient(90deg, #d74620, #cd1225) !important; |
||||
color: #fff !important; |
||||
} |
||||
|
||||
/* #endif */ |
||||
|
||||
.tui-gray-outline { |
||||
color: #999 !important; |
||||
background: transparent !important; |
||||
} |
||||
|
||||
.tui-white-outline { |
||||
color: #fff !important; |
||||
background: transparent !important; |
||||
} |
||||
|
||||
.tui-black-outline { |
||||
background: transparent !important; |
||||
color: #333 !important; |
||||
} |
||||
|
||||
.tui-gray-outline::after { |
||||
border: 1px solid #ccc !important; |
||||
} |
||||
|
||||
.tui-white-outline::after { |
||||
border: 1px solid #fff !important; |
||||
} |
||||
|
||||
.tui-black-outline::after { |
||||
border: 1px solid #333 !important; |
||||
} |
||||
|
||||
.tui-brown-outline { |
||||
color: #ac9157 !important; |
||||
background: transparent; |
||||
} |
||||
.tui-brown-outline::after { |
||||
border: 1px solid #ac9157 !important; |
||||
} |
||||
|
||||
/*圆角 */ |
||||
|
||||
.tui-fillet { |
||||
border-radius: 50rpx; |
||||
} |
||||
|
||||
.tui-btn-white.tui-fillet::after { |
||||
border-radius: 98rpx; |
||||
} |
||||
|
||||
.tui-outline-fillet::after { |
||||
border-radius: 98rpx; |
||||
} |
||||
|
||||
/*平角*/ |
||||
.tui-rightAngle { |
||||
border-radius: 0; |
||||
} |
||||
|
||||
.tui-btn-white.tui-rightAngle::after { |
||||
border-radius: 0; |
||||
} |
||||
|
||||
.tui-outline-rightAngle::after { |
||||
border-radius: 0; |
||||
} |
||||
.tui-btn__link::after { |
||||
border: 0 !important; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,103 @@
|
||||
<template> |
||||
<view class="tui-divider" :style="{ height: height + 'rpx' }"> |
||||
<view class="tui-divider-line" :style="{ width: width, background: getBgColor(gradual, gradualColor, dividerColor) }"></view> |
||||
<view |
||||
class="tui-divider-text" |
||||
:style="{ color: color, fontSize: size + 'rpx', lineHeight: size + 'rpx', backgroundColor: backgroundColor, fontWeight: bold ? 'bold' : 'normal' }" |
||||
> |
||||
<slot></slot> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
name: 'tuiDivider', |
||||
props: { |
||||
//divider占据高度 |
||||
height: { |
||||
type: Number, |
||||
default: 100 |
||||
}, |
||||
//divider宽度，可填写具体长度，如400rpx |
||||
width: { |
||||
type: String, |
||||
default: '100%' |
||||
}, |
||||
//divider颜色，如果为渐变线条，此属性失效 |
||||
dividerColor: { |
||||
type: String, |
||||
default: '#e5e5e5' |
||||
}, |
||||
//文字颜色 |
||||
color: { |
||||
type: String, |
||||
default: '#999' |
||||
}, |
||||
//文字大小 rpx |
||||
size: { |
||||
type: Number, |
||||
default: 24 |
||||
}, |
||||
bold: { |
||||
type: Boolean, |
||||
default: false |
||||
}, |
||||
//背景颜色，和当前页面背景色保持一致 |
||||
backgroundColor: { |
||||
type: String, |
||||
default: '#fafafa' |
||||
}, |
||||
//是否为渐变线条，为true，divideColor失效 |
||||
gradual: { |
||||
type: Boolean, |
||||
default: false |
||||
}, |
||||
//渐变色值，to right ，提供两个色值即可，由浅至深 |
||||
gradualColor: { |
||||
type: Array, |
||||
default: function() { |
||||
return ['#eee', '#ccc']; |
||||
} |
||||
} |
||||
}, |
||||
methods: { |
||||
getBgColor: function(gradual, gradualColor, dividerColor) { |
||||
let bgColor = dividerColor; |
||||
if (gradual) { |
||||
bgColor = 'linear-gradient(to right,' + gradualColor[0] + ',' + gradualColor[1] + ',' + gradualColor[1] + ',' + gradualColor[0] + ')'; |
||||
} |
||||
return bgColor; |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style scoped> |
||||
.tui-divider { |
||||
width: 100%; |
||||
position: relative; |
||||
text-align: center; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
box-sizing: border-box; |
||||
overflow: hidden; |
||||
} |
||||
|
||||
.tui-divider-line { |
||||
position: absolute; |
||||
height: 1rpx; |
||||
top: 50%; |
||||
left: 50%; |
||||
-webkit-transform: scaleY(0.5) translateX(-50%) translateZ(0); |
||||
transform: scaleY(0.5) translateX(-50%) translateZ(0); |
||||
} |
||||
|
||||
.tui-divider-text { |
||||
position: relative; |
||||
text-align: center; |
||||
padding: 0 18rpx; |
||||
z-index: 1; |
||||
} |
||||
</style> |
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,354 @@
|
||||
<template> |
||||
<view class="tui-tag" :hover-class="hover ? 'tui-tag-opcity' : ''" :hover-stay-time="150" :class="[originLeft ? 'tui-origin-left' : '', originRight ? 'tui-origin-right' : '', getClassName(shape, plain), getTypeClass(type, plain)]" |
||||
:style="{ transform: `scale(${scaleMultiple})`, padding: padding, margin: margin, fontSize: size, lineHeight: size }" |
||||
@tap="handleClick"> |
||||
<slot></slot> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
name: 'tuiTag', |
||||
props: { |
||||
type: { |
||||
type: String, |
||||
default: 'primary' |
||||
}, |
||||
//padding |
||||
padding: { |
||||
type: String, |
||||
default: '16rpx 26rpx' |
||||
}, |
||||
margin: { |
||||
type: String, |
||||
default: '0' |
||||
}, |
||||
//文字大小 rpx |
||||
size: { |
||||
type: String, |
||||
default: '28rpx' |
||||
}, |
||||
// circle, square，circleLeft，circleRight |
||||
shape: { |
||||
type: String, |
||||
default: 'square' |
||||
}, |
||||
//是否空心 |
||||
plain: { |
||||
type: Boolean, |
||||
default: false |
||||
}, |
||||
//点击效果 |
||||
hover: { |
||||
type: Boolean, |
||||
default: false |
||||
}, |
||||
//缩放倍数 |
||||
scaleMultiple: { |
||||
type: Number, |
||||
default: 1 |
||||
}, |
||||
originLeft: { |
||||
type: Boolean, |
||||
default: false |
||||
}, |
||||
originRight: { |
||||
type: Boolean, |
||||
default: false |
||||
}, |
||||
index: { |
||||
type: Number, |
||||
default: 0 |
||||
} |
||||
}, |
||||
methods: { |
||||
handleClick() { |
||||
this.$emit('click', { |
||||
index: this.index |
||||
}); |
||||
}, |
||||
getTypeClass: function(type, plain) { |
||||
return plain ? 'tui-' + type + '-outline' : 'tui-' + type; |
||||
}, |
||||
getClassName: function(shape, plain) { |
||||
//circle, square，circleLeft，circleRight |
||||
var className = plain ? 'tui-tag-outline ' : ''; |
||||
if (shape != 'square') { |
||||
if (shape == 'circle') { |
||||
className = className + (plain ? 'tui-tag-outline-fillet' : 'tui-tag-fillet'); |
||||
} else if (shape == 'circleLeft') { |
||||
className = className + 'tui-tag-fillet-left'; |
||||
} else if (shape == 'circleRight') { |
||||
className = className + 'tui-tag-fillet-right'; |
||||
} |
||||
} |
||||
return className; |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style scoped> |
||||
/* color start*/ |
||||
|
||||
.tui-primary { |
||||
background-color: #5677fc !important; |
||||
color: #fff; |
||||
} |
||||
|
||||
.tui-light-primary { |
||||
background-color: #5c8dff !important; |
||||
color: #fff; |
||||
} |
||||
|
||||
.tui-dark-primary { |
||||
background-color: #4a67d6 !important; |
||||
color: #fff; |
||||
} |
||||
|
||||
.tui-dLight-primary { |
||||
background-color: #4e77d9 !important; |
||||
color: #fff; |
||||
} |
||||
|
||||
.tui-danger { |
||||
background-color: #ed3f14 !important; |
||||
color: #fff; |
||||
} |
||||
|
||||
.tui-red { |
||||
background-color: #ff201f !important; |
||||
color: #fff; |
||||
} |
||||
|
||||
.tui-warning { |
||||
background-color: #ff7900 !important; |
||||
color: #fff; |
||||
} |
||||
|
||||
.tui-green { |
||||
background-color: #19be6b !important; |
||||
color: #fff; |
||||
} |
||||
|
||||
.tui-high-green { |
||||
background-color: #52dcae !important; |
||||
color: #52dcae; |
||||
} |
||||
|
||||
.tui-black { |
||||
background-color: #000 !important; |
||||
color: #fff; |
||||
} |
||||
|
||||
.tui-white { |
||||
background-color: #fff !important; |
||||
color: #333 !important; |
||||
} |
||||
|
||||
.tui-translucent { |
||||
background-color: rgba(0, 0, 0, 0.7); |
||||
} |
||||
|
||||
.tui-light-black { |
||||
background-color: #333 !important; |
||||
} |
||||
|
||||
.tui-gray { |
||||
background-color: #ededed !important; |
||||
} |
||||
|
||||
.tui-phcolor-gray { |
||||
background-color: #ccc !important; |
||||
} |
||||
|
||||
.tui-divider-gray { |
||||
background-color: #eaeef1 !important; |
||||
} |
||||
|
||||
.tui-btn-gray { |
||||
background-color: #ededed !important; |
||||
color: #999 !important; |
||||
} |
||||
|
||||
.tui-hover-gray { |
||||
background-color: #f7f7f9 !important; |
||||
} |
||||
|
||||
.tui-bg-gray { |
||||
background-color: #fafafa !important; |
||||
} |
||||
|
||||
.tui-light-blue { |
||||
background-color: #ecf6fd; |
||||
color: #4dabeb !important; |
||||
} |
||||
|
||||
.tui-light-brownish { |
||||
background-color: #fcebef; |
||||
color: #8a5966 !important; |
||||
} |
||||
|
||||
.tui-light-orange { |
||||
background-color: #fef5eb; |
||||
color: #faa851 !important; |
||||
} |
||||
|
||||
.tui-light-green { |
||||
background-color: #e8f6e8; |
||||
color: #44cf85 !important; |
||||
} |
||||
|
||||
.tui-primary-outline::after { |
||||
border: 1px solid #5677fc !important; |
||||
} |
||||
|
||||
.tui-primary-outline { |
||||
color: #5677fc !important; |
||||
background-color: none; |
||||
} |
||||
|
||||
.tui-danger-outline { |
||||
color: #ed3f14 !important; |
||||
background-color: none; |
||||
} |
||||
|
||||
.tui-danger-outline::after { |
||||
border: 1px solid #ed3f14 !important; |
||||
} |
||||
|
||||
.tui-red-outline { |
||||
color: #ff201f !important; |
||||
background-color: none; |
||||
} |
||||
|
||||
.tui-red-outline::after { |
||||
border: 1px solid #ff201f !important; |
||||
} |
||||
|
||||
.tui-warning-outline { |
||||
color: #ff7900 !important; |
||||
background-color: none; |
||||
} |
||||
|
||||
.tui-warning-outline::after { |
||||
border: 1px solid #ff7900 !important; |
||||
} |
||||
|
||||
.tui-green-outline { |
||||
color: #44cf85 !important; |
||||
background-color: none; |
||||
} |
||||
|
||||
.tui-green-outline::after { |
||||
border: 1px solid #44cf85 !important; |
||||
} |
||||
|
||||
.tui-high-green-outline { |
||||
color: #52dcae !important; |
||||
background-color: none; |
||||
} |
||||
|
||||
.tui-high-green-outline::after { |
||||
border: 1px solid #52dcae !important; |
||||
} |
||||
|
||||
.tui-gray-outline { |
||||
color: #999 !important; |
||||
background-color: none; |
||||
} |
||||
|
||||
.tui-gray-outline::after { |
||||
border: 1px solid #ccc !important; |
||||
} |
||||
|
||||
.tui-black-outline { |
||||
color: #333 !important; |
||||
background-color: none; |
||||
} |
||||
|
||||
.tui-black-outline::after { |
||||
border: 1px solid #333 !important; |
||||
} |
||||
|
||||
.tui-white-outline { |
||||
color: #fff !important; |
||||
background-color: none; |
||||
} |
||||
|
||||
.tui-white-outline::after { |
||||
border: 1px solid #fff !important; |
||||
} |
||||
|
||||
/* color end*/ |
||||
|
||||
/* tag start*/ |
||||
|
||||
.tui-tag { |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
border-radius: 6rpx; |
||||
flex-shrink: 0; |
||||
} |
||||
|
||||
.tui-tag-outline { |
||||
position: relative; |
||||
background-color: none; |
||||
color: #5677fc; |
||||
} |
||||
|
||||
.tui-tag-outline::after { |
||||
content: ' '; |
||||
position: absolute; |
||||
width: 200%; |
||||
height: 200%; |
||||
transform: scale(0.5) translateZ(0); |
||||
transform-origin: 0 0; |
||||
box-sizing: border-box; |
||||
left: 0; |
||||
top: 0; |
||||
border-radius: 12rpx; |
||||
} |
||||
|
||||
.tui-tag-fillet { |
||||
border-radius: 50rpx; |
||||
} |
||||
|
||||
.tui-white.tui-tag-fillet::after { |
||||
border-radius: 80rpx; |
||||
} |
||||
|
||||
.tui-tag-outline-fillet::after { |
||||
border-radius: 80rpx; |
||||
} |
||||
|
||||
.tui-tag-fillet-left { |
||||
border-radius: 50rpx 0 0 50rpx; |
||||
} |
||||
|
||||
.tui-tag-fillet-right { |
||||
border-radius: 0 50rpx 50rpx 0; |
||||
} |
||||
|
||||
.tui-tag-fillet-left.tui-tag-outline::after { |
||||
border-radius: 100rpx 0 0 100rpx; |
||||
} |
||||
|
||||
.tui-tag-fillet-right.tui-tag-outline::after { |
||||
border-radius: 0 100rpx 100rpx 0; |
||||
} |
||||
|
||||
/* tag end*/ |
||||
.tui-origin-left { |
||||
transform-origin: 0 center; |
||||
} |
||||
|
||||
.tui-origin-right { |
||||
transform-origin: 100% center; |
||||
} |
||||
|
||||
.tui-tag-opcity { |
||||
opacity: 0.5; |
||||
} |
||||
</style> |
||||
File diff suppressed because it is too large
Load Diff
@ -1,237 +1,678 @@
|
||||
<template> |
||||
<view class="group-con"> |
||||
<view class="header acea-row row-between-wrapper" v-if="storeCombination"> |
||||
<view class="pictrue"> |
||||
<image :src="storeCombination.image" /> |
||||
</view> |
||||
<view class="text"> |
||||
<view class="line1" v-text="storeCombination.title"></view> |
||||
<view class="money"> |
||||
<text>￥</text> |
||||
<text class="num" v-text="storeCombination.price"></text> |
||||
<text class="team cart-color" v-text="storeCombination.people + '人拼'"></text> |
||||
<view class="tui-goods-item"> |
||||
<image :src="storeCombination.image" class="tui-goods-img"></image> |
||||
<view class="tui-goods-center"> |
||||
<view class="tui-goods-name">{{ storeCombination.title }}</view> |
||||
<view class="tui-price__box"> |
||||
<view class="tui-goods-price"> |
||||
<view class="tui-size-24">￥</view> |
||||
<view class="tui-price-large">{{ storeCombination.price.split('.')[0] }}</view> |
||||
<view class="tui-size-24">.{{ storeCombination.price.split('.')[1] }}</view> |
||||
<!-- <text>已拼2020件</text> --> |
||||
</view> |
||||
<view class="tui-price-tag">{{ storeCombination.people }}人团</view> |
||||
</view> |
||||
</view> |
||||
<view v-if="pinkBool === -1" class="iconfont icon-pintuanshibai"></view> |
||||
<view v-else-if="pinkBool === 1" class="iconfont icon-pintuanchenggong font-color-red"></view> |
||||
</view> |
||||
<view class="wrapper" v-if="pinkT"> |
||||
<view class="title acea-row row-center-wrapper"> |
||||
<view class="line"></view> |
||||
<view class="name acea-row row-center-wrapper"> |
||||
<text>剩余</text> |
||||
<count-down :isDay="true" :tipText="'倒计时 '" :dayText="' 天 '" :hourText="' 时 '" :minuteText="' 分 '" |
||||
:secondText="' 秒'" :datatime="pinkT.stopTime/1000"></count-down> |
||||
<text>结束</text> |
||||
|
||||
<view class="tui-group__box tui-mtop__20"> |
||||
<tui-divider backgroundColor="#fff" width="70%" gradual > |
||||
<view class="tui-divider__content"> |
||||
<text v-if="pinkBool == 0">拼团失败</text> |
||||
<text v-if="pinkBool == 1">拼团成功</text> |
||||
</view> |
||||
<view class="line"></view> |
||||
</tui-divider> |
||||
<view class="tui-group__title" v-if="pinkBool == 0"> |
||||
<text>还差</text> |
||||
<text class="tui-color__red">{{ count }}</text> |
||||
<text>人，赶快邀请好友来拼团吧</text> |
||||
</view> |
||||
<view class="tips-warp"> |
||||
<text class="tips font-color-red" v-if="pinkBool === 1">恭喜您拼团成功</text> |
||||
<text class="tips" v-else-if="pinkBool === -1">还差{{ count }}人，拼团失败</text> |
||||
<text class="tips font-color-red" v-else-if="pinkBool === 0">拼团中，还差{{ count }}人拼团成功</text> |
||||
<view class="tui-group-countdown" v-if="pinkBool == 0"> |
||||
<view class="tui-countdown-right">剩余</view> |
||||
<count-down :isDay="true" :tipText="'倒计时 '" :dayText="' 天 '" :hourText="' 时 '" :minuteText="' 分 '" :secondText="' 秒'" :datatime="pinkT.stopTime / 1000"></count-down> |
||||
<view class="tui-countdown-left">结束</view> |
||||
</view> |
||||
|
||||
<view class="list acea-row row-middle" |
||||
:class="[pinkBool === 1 || pinkBool === -1 ? 'result' : '',iShidden ? 'on' : '']"> |
||||
<view class="pictrue" v-if="pinkT"> |
||||
<image :src="pinkT.avatar" /> |
||||
</view> |
||||
<view class="acea-row row-middle" v-if="pinkAll.length > 0"> |
||||
<view class="pictrue" v-for="(item, pinkAllIndex) in pinkAll" :key="pinkAllIndex"> |
||||
<image :src="item.avatar" /> |
||||
<view class="tui-user__box"> |
||||
<view class="tui-user__item"> |
||||
<view class="tui-avatar__box tui-size"> |
||||
<image class="tui-size" :src="userInfo.avatar"></image> |
||||
<view class="tui-team__leader">团长</view> |
||||
</view> |
||||
<!-- <view class="tui-nickname">不许人间见白头</view> --> |
||||
</view> |
||||
<view class="pictrue" v-for="countIndex in count" :key="countIndex"> |
||||
<image class="img-none" src="@/static/images/vacancy.png" /> |
||||
<view class="tui-user__item" v-if="pinkAll.length == 0"> |
||||
<view class="tui-avatar__box tui-user__none"><image class="tui-size" src="@/static/images/vacancy.png"></image></view> |
||||
<!-- <view class="tui-nickname">暂无</view> --> |
||||
</view> |
||||
<view class="tui-user__item" v-for="(item, pinkAllIndex) in pinkAll" :key="pinkAllIndex"> |
||||
<view class="tui-avatar__box tui-size"><image class="tui-size" :src="item.avatar"></image></view> |
||||
<!-- <view class="tui-nickname">小可爱本人</view> --> |
||||
</view> |
||||
</view> |
||||
<view v-if="(pinkBool === 1 || pinkBool === -1) && count > 9" class="lookAll acea-row row-center-wrapper" |
||||
@click="lookAll"> |
||||
{{ iShidden ? "收起" : "查看全部" }} |
||||
<text class="iconfont" :class="iShidden ? 'icon-xiangshang' : 'icon-xiangxia'"></text> |
||||
</view> |
||||
<view class="teamBnt bg-color-red" v-if="userBool === 1 && isOk == 0 && pinkBool === 0" @click="goPoster">邀请好友参团 |
||||
</view> |
||||
<view class="teamBnt bg-color-red" v-else-if="userBool === 0 && pinkBool === 0 && count > 0" @click="pay">我要参团 |
||||
</view> |
||||
<view class="teamBnt bg-color-red" v-if="pinkBool === 1 || pinkBool === -1" |
||||
@click="goDetail(storeCombination.id)">再次开团</view> |
||||
<view class="cancel" @click="getCombinationRemove" v-if="pinkBool === 0 && userBool === 1"> |
||||
<text class="iconfont icon-guanbi3"></text> |
||||
<text>取消开团</text> |
||||
</view> |
||||
<view class="lookOrder" v-if="pinkBool === 1" @click="goOrder"> |
||||
<text>查看订单信息</text> |
||||
<text class="iconfont icon-xiangyou"></text> |
||||
<view class="tui-btn__box"> |
||||
<tui-button type="danger" height="88rpx" shadow shape="circle" v-if="userBool === 1 && isOk == 0 && pinkBool === 0" @click="goPoster">邀请好友参团</tui-button> |
||||
<tui-button type="warning" height="88rpx" shadow shape="circle" v-else-if="userBool === 0 && pinkBool === 0 && count > 0" @click="pay">我要参团</tui-button> |
||||
<tui-button type="danger" height="88rpx" shadow shape="circle" v-if="pinkBool === 1 || pinkBool === -1" @click="goDetail(storeCombination.id)">再次开团</tui-button> |
||||
<tui-button type="warning" height="88rpx" shadow shape="circle" @click="getCombinationRemove" v-if="pinkBool === 0 && userBool === 1">取消开团</tui-button> |
||||
<tui-button type="danger" height="88rpx" shadow shape="circle" v-if="pinkBool === 1" @click="goOrder">查看订单信息</tui-button> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
<script> |
||||
import CountDown from "@/components/CountDown"; |
||||
import { |
||||
getCombinationPink, |
||||
getCombinationRemove |
||||
} from "@/api/activity"; |
||||
import { |
||||
postCartAdd |
||||
} from "@/api/store"; |
||||
import { |
||||
isWeixin, |
||||
parseQuery, |
||||
handleQrCode |
||||
} from "@/utils/index"; |
||||
|
||||
const NAME = "GroupRule"; |
||||
export default { |
||||
name: NAME, |
||||
components: { |
||||
CountDown |
||||
import CountDown from '@/components/CountDown' |
||||
import { getCombinationPink, getCombinationRemove } from '@/api/activity' |
||||
import { postCartAdd } from '@/api/store' |
||||
import { isWeixin, parseQuery, handleQrCode } from '@/utils/index' |
||||
|
||||
const NAME = 'GroupRule' |
||||
export default { |
||||
name: NAME, |
||||
components: { |
||||
CountDown, |
||||
}, |
||||
props: {}, |
||||
data: function () { |
||||
return { |
||||
currentPinkOrder: '', //当前拼团订单 |
||||
isOk: 0, //判断拼团是否完成 |
||||
pinkBool: 0, //判断拼团是否成功|0=失败,1=成功 |
||||
userBool: 0, //判断当前用户是否在团内|0=未在,1=在 |
||||
pinkAll: [], //团员 |
||||
pinkT: {}, //团长信息 |
||||
storeCombination: {}, //拼团产品 |
||||
pinkId: 0, |
||||
uniqueId: '', |
||||
count: 0, //拼团剩余人数 |
||||
iShidden: false, |
||||
userInfo: {}, |
||||
} |
||||
}, |
||||
watch: { |
||||
$yroute(n) { |
||||
var that = this |
||||
if (n.name === NAME) { |
||||
that.pinkId = that.$yroute.query.id |
||||
that.getCombinationPink() |
||||
} |
||||
}, |
||||
props: {}, |
||||
data: function () { |
||||
return { |
||||
currentPinkOrder: "", //当前拼团订单 |
||||
isOk: 0, //判断拼团是否完成 |
||||
pinkBool: 0, //判断拼团是否成功|0=失败,1=成功 |
||||
userBool: 0, //判断当前用户是否在团内|0=未在,1=在 |
||||
pinkAll: [], //团员 |
||||
pinkT: {}, //团长信息 |
||||
storeCombination: {}, //拼团产品 |
||||
pinkId: 0, |
||||
uniqueId: "", |
||||
count: 0, //拼团剩余人数 |
||||
iShidden: false |
||||
}; |
||||
}, |
||||
mounted: function () { |
||||
var that = this |
||||
let url = handleQrCode() |
||||
if (url) { |
||||
that.pinkId = url.pinkId |
||||
} else { |
||||
that.pinkId = that.$yroute.query.id |
||||
} |
||||
that.getCombinationPink() |
||||
}, |
||||
methods: { |
||||
pay: function () { |
||||
var that = this |
||||
var data = {} |
||||
data.productId = that.storeCombination.productId |
||||
data.cartNum = that.pinkT.totalNum |
||||
data.uniqueId = that.uniqueId |
||||
data.combinationId = that.storeCombination.id |
||||
data.new = 1 |
||||
postCartAdd(data) |
||||
.then(res => { |
||||
that.$yrouter.push({ |
||||
path: '/pages/order/OrderSubmission/index', |
||||
query: { |
||||
id: res.data.cartId, |
||||
pinkid: that.pinkId, |
||||
}, |
||||
}) |
||||
}) |
||||
.catch(err => { |
||||
uni.showToast({ |
||||
title: err.msg || err.response.data.msg || err.response.data.message, |
||||
icon: 'none', |
||||
duration: 2000, |
||||
}) |
||||
}) |
||||
}, |
||||
watch: { |
||||
$yroute(n) { |
||||
var that = this; |
||||
if (n.name === NAME) { |
||||
that.pinkId = that.$yroute.query.id; |
||||
that.getCombinationPink(); |
||||
} |
||||
} |
||||
goPoster: function () { |
||||
var that = this |
||||
this.$yrouter.push({ |
||||
path: '/pages/activity/Poster/index', |
||||
query: { |
||||
id: that.pinkId, |
||||
type: 1, |
||||
}, |
||||
}) |
||||
}, |
||||
mounted: function () { |
||||
var that = this; |
||||
let url = handleQrCode(); |
||||
if (url) { |
||||
that.pinkId = url.pinkId; |
||||
} else { |
||||
that.pinkId = that.$yroute.query.id; |
||||
} |
||||
that.getCombinationPink(); |
||||
goOrder: function () { |
||||
var that = this |
||||
this.$yrouter.push({ |
||||
path: '/pages/order/OrderDetails/index', |
||||
query: { |
||||
id: that.currentPinkOrder, |
||||
}, |
||||
}) |
||||
}, |
||||
methods: { |
||||
pay: function () { |
||||
var that = this; |
||||
var data = {}; |
||||
data.productId = that.storeCombination.productId; |
||||
data.cartNum = that.pinkT.totalNum; |
||||
data.uniqueId = that.uniqueId; |
||||
data.combinationId = that.storeCombination.id; |
||||
data.new = 1; |
||||
postCartAdd(data) |
||||
.then(res => { |
||||
that.$yrouter.push({ |
||||
path: "/pages/order/OrderSubmission/index", |
||||
query: { |
||||
id: res.data.cartId, |
||||
pinkid: that.pinkId |
||||
} |
||||
}); |
||||
}) |
||||
.catch(err => { |
||||
uni.showToast({ |
||||
title: err.msg || err.response.data.msg || err.response.data.message, |
||||
icon: "none", |
||||
duration: 2000 |
||||
}); |
||||
}); |
||||
}, |
||||
goPoster: function () { |
||||
var that = this; |
||||
this.$yrouter.push({ |
||||
path: "/pages/activity/Poster/index", |
||||
query: { |
||||
id: that.pinkId, |
||||
type: 1 |
||||
} |
||||
}); |
||||
}, |
||||
goOrder: function () { |
||||
var that = this; |
||||
this.$yrouter.push({ |
||||
path: "/pages/order/OrderDetails/index", |
||||
query: { |
||||
id: that.currentPinkOrder |
||||
} |
||||
}); |
||||
}, |
||||
//拼团列表 |
||||
goList: function () { |
||||
this.$yrouter.push({ |
||||
path: "/pages/activity/GoodsGroup/index" |
||||
}); |
||||
}, |
||||
//拼团详情 |
||||
goDetail: function (id) { |
||||
this.$yrouter.push({ |
||||
path: "/pages/activity/GroupDetails/index", |
||||
query: { |
||||
id |
||||
} |
||||
}); |
||||
}, |
||||
//拼团信息 |
||||
getCombinationPink: function () { |
||||
var that = this; |
||||
getCombinationPink(that.pinkId).then(res => { |
||||
that.$set(that, "storeCombination", res.data.storeCombination); |
||||
that.$set(that, "pinkT", res.data.pinkT); |
||||
that.$set(that, "pinkAll", res.data.pinkAll); |
||||
that.$set(that, "count", res.data.count); |
||||
that.$set(that, "userBool", res.data.userBool); |
||||
that.$set(that, "pinkBool", res.data.pinkBool); |
||||
that.$set(that, "isOk", res.data.isOk); |
||||
that.$set(that, "currentPinkOrder", res.data.currentPinkOrder); |
||||
that.$set(that, "uniqueId", res.data.uniqueId); |
||||
}); |
||||
}, |
||||
//拼团取消 |
||||
getCombinationRemove: function () { |
||||
var that = this; |
||||
getCombinationRemove({ |
||||
id: that.pinkId, |
||||
cid: that.storeCombination.id |
||||
//拼团列表 |
||||
goList: function () { |
||||
this.$yrouter.push({ |
||||
path: '/pages/activity/GoodsGroup/index', |
||||
}) |
||||
}, |
||||
//拼团详情 |
||||
goDetail: function (id) { |
||||
this.$yrouter.push({ |
||||
path: '/pages/activity/GroupDetails/index', |
||||
query: { |
||||
id, |
||||
}, |
||||
}) |
||||
}, |
||||
//拼团信息 |
||||
getCombinationPink: function () { |
||||
var that = this |
||||
getCombinationPink(that.pinkId).then(res => { |
||||
that.$set(that, 'storeCombination', res.data.storeCombination) |
||||
that.$set(that, 'pinkT', res.data.pinkT) |
||||
that.$set(that, 'pinkAll', res.data.pinkAll) |
||||
that.$set(that, 'count', res.data.count) |
||||
that.$set(that, 'userBool', res.data.userBool) |
||||
that.$set(that, 'pinkBool', res.data.pinkBool) |
||||
that.$set(that, 'isOk', res.data.isOk) |
||||
that.$set(that, 'currentPinkOrder', res.data.currentPinkOrder) |
||||
that.$set(that, 'uniqueId', res.data.uniqueId) |
||||
that.$set(that, 'userInfo', res.data.userInfo) |
||||
}) |
||||
}, |
||||
//拼团取消 |
||||
getCombinationRemove: function () { |
||||
var that = this |
||||
getCombinationRemove({ |
||||
id: that.pinkId, |
||||
cid: that.storeCombination.id, |
||||
}) |
||||
.then(res => { |
||||
uni.showToast({ |
||||
title: res.msg, |
||||
icon: 'none', |
||||
duration: 2000, |
||||
}) |
||||
.then(res => { |
||||
uni.showToast({ |
||||
title: res.msg, |
||||
icon: "none", |
||||
duration: 2000 |
||||
}); |
||||
}) |
||||
.catch(res => { |
||||
uni.showToast({ |
||||
title: res.msg, |
||||
icon: 'none', |
||||
duration: 2000, |
||||
}) |
||||
.catch(res => { |
||||
uni.showToast({ |
||||
title: res.msg, |
||||
icon: "none", |
||||
duration: 2000 |
||||
}); |
||||
}); |
||||
}, |
||||
lookAll: function () { |
||||
this.iShidden = !this.iShidden; |
||||
} |
||||
} |
||||
}; |
||||
}) |
||||
}, |
||||
lookAll: function () { |
||||
this.iShidden = !this.iShidden |
||||
}, |
||||
}, |
||||
} |
||||
</script> |
||||
|
||||
<style lang="less"> |
||||
.tips-warp { |
||||
text-align: center; |
||||
margin-top: 20rpx; |
||||
} |
||||
.tips-warp { |
||||
text-align: center; |
||||
margin-top: 20rpx; |
||||
} |
||||
|
||||
.tui-goods-item { |
||||
width: 100%; |
||||
padding: 20rpx 25rpx; |
||||
box-sizing: border-box; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
background-color: #fff; |
||||
} |
||||
|
||||
.tui-goods-img { |
||||
width: 180rpx; |
||||
height: 180rpx; |
||||
display: block; |
||||
flex-shrink: 0; |
||||
} |
||||
|
||||
.tui-goods-center { |
||||
flex: 1; |
||||
padding: 12rpx 12rpx; |
||||
box-sizing: border-box; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: space-between; |
||||
} |
||||
|
||||
.tui-goods-name { |
||||
word-break: break-all; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
display: -webkit-box; |
||||
-webkit-box-orient: vertical; |
||||
-webkit-line-clamp: 2; |
||||
font-size: 26rpx; |
||||
line-height: 32rpx; |
||||
} |
||||
|
||||
.tui-price__box { |
||||
width: 100%; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
} |
||||
|
||||
.tui-goods-price { |
||||
width: 100%; |
||||
display: flex; |
||||
align-items: flex-end; |
||||
font-size: 24rpx; |
||||
color: #eb0909; |
||||
} |
||||
.tui-goods-price text { |
||||
font-size: 24rpx; |
||||
line-height: 24rpx; |
||||
color: #999; |
||||
padding-left: 20rpx; |
||||
} |
||||
|
||||
.tui-size-24 { |
||||
font-size: 24rpx; |
||||
line-height: 24rpx; |
||||
} |
||||
|
||||
.tui-price-large { |
||||
font-size: 32rpx; |
||||
line-height: 30rpx; |
||||
font-weight: 500; |
||||
} |
||||
|
||||
.tui-price-tag { |
||||
height: 38rpx; |
||||
border: 1rpx solid #eb0909; |
||||
border-radius: 6rpx; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
font-size: 24rpx; |
||||
line-height: 24rpx; |
||||
transform: scale(0.8); |
||||
transform-origin: 100% center; |
||||
border-radius: 6rpx; |
||||
padding: 0 8rpx; |
||||
color: #eb0909; |
||||
flex-shrink: 0; |
||||
} |
||||
.tui-mtop__20 { |
||||
margin-top: 20rpx; |
||||
} |
||||
.tui-divider__content { |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
.tui-divider__content image { |
||||
width: 36rpx; |
||||
height: 36rpx; |
||||
margin-right: 20rpx; |
||||
} |
||||
.tui-divider__content text { |
||||
font-size: 34rpx; |
||||
line-height: 34rpx; |
||||
color: #000000; |
||||
font-weight: bold; |
||||
} |
||||
.tui-group__time { |
||||
font-size: 24rpx; |
||||
font-weight: 400; |
||||
color: #999; |
||||
text-align: center; |
||||
} |
||||
.tui-group__box { |
||||
width: 100%; |
||||
padding: 50rpx 25rpx; |
||||
box-sizing: border-box; |
||||
background-color: #fff; |
||||
} |
||||
.tui-group__title { |
||||
width: 100%; |
||||
font-size: 34rpx; |
||||
line-height: 34rpx; |
||||
font-weight: 500; |
||||
text-align: center; |
||||
} |
||||
.tui-color__red { |
||||
color: #eb0909; |
||||
} |
||||
.tui-group-countdown { |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
font-size: 24rpx; |
||||
color: #666666; |
||||
padding-top: 20rpx; |
||||
} |
||||
|
||||
.tui-countdown-right { |
||||
padding-right: 6rpx; |
||||
} |
||||
|
||||
.tui-countdown-left { |
||||
padding-left: 6rpx; |
||||
} |
||||
.tui-user__box { |
||||
width: 100%; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
padding-top: 60rpx; |
||||
} |
||||
.tui-user__item { |
||||
max-width: 128rpx; |
||||
margin: 0 40rpx; |
||||
} |
||||
.tui-size { |
||||
width: 100rpx; |
||||
height: 100rpx; |
||||
border-radius: 50%; |
||||
} |
||||
.tui-avatar__box { |
||||
position: relative; |
||||
border: 4rpx solid #eb0909; |
||||
} |
||||
.tui-user__none { |
||||
width: 108rpx; |
||||
height: 108rpx; |
||||
border: 0; |
||||
} |
||||
.tui-avatar__box image { |
||||
display: block; |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
.tui-team__leader { |
||||
position: absolute; |
||||
width: 64rpx; |
||||
height: 28rpx; |
||||
font-size: 24rpx; |
||||
background-color: #eb0909; |
||||
color: #fff; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
border-radius: 30px; |
||||
left: 50%; |
||||
top: -14rpx; |
||||
transform: translateX(-50%); |
||||
z-index: 10; |
||||
} |
||||
.tui-nickname { |
||||
font-size: 24rpx; |
||||
color: #999; |
||||
white-space: nowrap; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
text-align: center; |
||||
padding-top: 12rpx; |
||||
} |
||||
.tui-btn__box { |
||||
padding-top: 60rpx; |
||||
|
||||
} |
||||
|
||||
.tni-cell{ |
||||
height: 20rpx; |
||||
} |
||||
|
||||
.tui-group__text { |
||||
width: 100%; |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
|
||||
.tui-group-title { |
||||
font-size: 30rpx; |
||||
line-height: 30rpx; |
||||
padding-left: 16rpx; |
||||
border-left: 2px solid #eb0909; |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
.tui-sub__info { |
||||
font-size: 26rpx; |
||||
padding-right: 30rpx; |
||||
} |
||||
|
||||
.tui-group__start .tui-group-title { |
||||
border-left: 0; |
||||
padding-left: 0; |
||||
} |
||||
.tui-group__start .tui-sub__info { |
||||
padding-right: 0; |
||||
} |
||||
.tui-step__box { |
||||
width: 100%; |
||||
height: 210rpx; |
||||
background: #fff; |
||||
padding: 0 60rpx; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
.tui-step-item { |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
flex-direction: column; |
||||
font-size: 26rpx; |
||||
color: #666666; |
||||
} |
||||
|
||||
.tui-step-item image { |
||||
width: 64rpx; |
||||
height: 55rpx; |
||||
flex-shrink: 0; |
||||
} |
||||
|
||||
.tui-step-item image:first-child { |
||||
width: 60rpx !important; |
||||
} |
||||
|
||||
.tui-step-arrow { |
||||
height: 90rpx; |
||||
} |
||||
|
||||
.tui-step-arrow image { |
||||
width: 11rpx; |
||||
height: 20rpx; |
||||
flex-shrink: 0; |
||||
} |
||||
|
||||
.tui-step-text { |
||||
line-height: 26rpx; |
||||
padding-top: 24rpx; |
||||
} |
||||
.tui-between { |
||||
justify-content: space-between; |
||||
} |
||||
.tui-btn__box .tui-btn{ |
||||
margin-bottom:30rpx !important |
||||
|
||||
} |
||||
/*拼团玩法介绍 modal*/ |
||||
.tui-modal__title { |
||||
text-align: center; |
||||
font-weight: bold; |
||||
padding-bottom: 8rpx; |
||||
} |
||||
.tui-modal__p { |
||||
font-size: 26rpx; |
||||
color: #888; |
||||
padding-top: 20rpx; |
||||
} |
||||
.tui-modal__btn { |
||||
width: 100%; |
||||
padding: 60rpx 0 20rpx; |
||||
display: flex; |
||||
justify-content: center; |
||||
} |
||||
.tui-hot__title { |
||||
font-size: 30rpx; |
||||
line-height: 30rpx; |
||||
color: #333; |
||||
font-weight: bold; |
||||
} |
||||
|
||||
/*========商品 start======*/ |
||||
|
||||
.tui-product__box { |
||||
width: 100%; |
||||
padding: 0 25rpx 60rpx 25rpx; |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
.tui-product-list { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
flex-direction: row; |
||||
flex-wrap: wrap; |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
.tui-product-container { |
||||
flex: 1; |
||||
margin-right: 10rpx; |
||||
} |
||||
|
||||
.tui-product-container:last-child { |
||||
margin-right: 0; |
||||
} |
||||
|
||||
.tui-pro-item { |
||||
width: 100%; |
||||
margin-bottom: 10rpx; |
||||
background: #fff; |
||||
box-sizing: border-box; |
||||
border-radius: 12rpx; |
||||
overflow: hidden; |
||||
transition: all 0.15s ease-in-out; |
||||
} |
||||
|
||||
.tui-flex-list { |
||||
display: flex; |
||||
margin-bottom: 1rpx !important; |
||||
} |
||||
|
||||
.tui-pro-img { |
||||
width: 100%; |
||||
display: block; |
||||
flex-shrink: 0; |
||||
background-color: #f5f5f5; |
||||
} |
||||
|
||||
.tui-proimg-list { |
||||
width: 280rpx; |
||||
height: 280rpx !important; |
||||
flex-shrink: 0; |
||||
border-radius: 12rpx; |
||||
} |
||||
|
||||
.tui-pro-content { |
||||
flex: 1; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: space-between; |
||||
box-sizing: border-box; |
||||
padding: 20rpx; |
||||
} |
||||
|
||||
.tui-pro-tit { |
||||
color: #2e2e2e; |
||||
font-size: 26rpx; |
||||
word-break: break-all; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
display: -webkit-box; |
||||
-webkit-box-orient: vertical; |
||||
-webkit-line-clamp: 2; |
||||
} |
||||
|
||||
.tui-price__box { |
||||
width: 100%; |
||||
display: flex; |
||||
align-items: center; |
||||
padding-top: 12rpx; |
||||
} |
||||
|
||||
.tui-price { |
||||
display: flex; |
||||
align-items: flex-end; |
||||
color: #eb0909; |
||||
} |
||||
|
||||
.tui-price__small { |
||||
font-size: 24rpx; |
||||
line-height: 24rpx; |
||||
} |
||||
|
||||
.tui-price__large { |
||||
font-size: 34rpx; |
||||
line-height: 32rpx; |
||||
font-weight: 600; |
||||
} |
||||
|
||||
.tui-price__original { |
||||
font-size: 24rpx; |
||||
line-height: 24rpx; |
||||
text-decoration: line-through; |
||||
color: #999; |
||||
padding-top: 10rpx; |
||||
padding-left: 12rpx; |
||||
} |
||||
|
||||
.tui-group-btn { |
||||
max-width: 312rpx; |
||||
height: 48rpx; |
||||
border-radius: 6rpx; |
||||
background: #eb0909; |
||||
display: flex; |
||||
align-items: center; |
||||
padding: 4rpx; |
||||
margin-top: 10rpx; |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
.tui-flex-btn { |
||||
height: 100%; |
||||
flex: 1; |
||||
text-align: center; |
||||
font-size: 26rpx; |
||||
line-height: 26rpx; |
||||
font-weight: 400; |
||||
color: #fff; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
} |
||||
|
||||
.tui-flex-btn:first-child { |
||||
background: #fff; |
||||
} |
||||
|
||||
.tui-group-text { |
||||
font-size: 25rpx; |
||||
line-height: 25rpx; |
||||
transform: scale(0.8); |
||||
transform-origin: 0 center; |
||||
padding-top: 30rpx; |
||||
color: #999; |
||||
} |
||||
|
||||
.tui-color-red { |
||||
color: #eb0909; |
||||
} |
||||
|
||||
/*======商品======= end*/ |
||||
</style> |
||||
|
||||
Loading…
Reference in new issue