优化ui
This commit is contained in:
anhaogxs
@@ -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>
|
||||
Reference in New Issue
Block a user