706 lines
19 KiB
Vue
706 lines
19 KiB
Vue
<template>
|
||
<view class="tm-button " :class="[block ? 'd-block' : 'd-inline-block ']" hover-class="opacity-6">
|
||
<view
|
||
class="flex-center tm-button-btn fulled-height"
|
||
:class="[block ? '' : customDense_puted ? '' : 'ma-10', block ? 'd-block' : 'd-inline-block', black_tmeme ? 'bk' : '', customStyleTm]"
|
||
>
|
||
<!-- @getuserinfo="getuserinfo" -->
|
||
<button
|
||
@contact="contact"
|
||
@error="error"
|
||
@getphonenumber="getphonenumber"
|
||
@launchapp="launchapp"
|
||
@opensetting="opensetting"
|
||
@click="onclick"
|
||
@longpress="$emit('longpress', $event)"
|
||
@touchcancel="$emit('touchcancel', $event)"
|
||
@touchend="$emit('touchend', $event)"
|
||
@touchstart="$emit('touchstart', $event)"
|
||
:disabled="disabled"
|
||
:loading="loading"
|
||
:open-type="openType"
|
||
:hover-start-time="hoverStartTime"
|
||
:hover-stay-time="hoverStaySime"
|
||
:hover-stop-propagation="hoverStopPropagation"
|
||
:send-message-img="sendMessageImg"
|
||
:send-message-path="sendMessagePath"
|
||
:send-message-title="sendMessageTitle"
|
||
:show-message-card="showMessageCard"
|
||
:class="[
|
||
|
||
showValue ? 'showValue' : '',
|
||
titl ? 'text-' + color_tmeme : '',
|
||
vertical ? 'flex-col flex-center' : 'flex-center',
|
||
black_tmeme ? 'bk' : '',
|
||
disabled ? color_tmeme + ' grey-lighten-2' : color_tmeme,
|
||
block ? '' : sizes,
|
||
text || titl ? '' : bgcolor ? 'shadow-' + shadow : 'shadow-' + shadowthemeName + '-' + shadow,
|
||
flat ? 'flat' : '',
|
||
text ? 'text ' : '',
|
||
plan ? 'plan outlined' : '',
|
||
titl ? 'titl' : '',
|
||
|
||
fab?'rounded':'round-' + round,
|
||
customClassTm_puted
|
||
]"
|
||
:style="{
|
||
background: bgcolor ? bgcolor + ' !important' : 'default',
|
||
width: widths != 0 && widths != 'inherit' ? widths : 'inherit',
|
||
height: heights,
|
||
lineHeight: 'inherit'
|
||
}"
|
||
>
|
||
<slot name="icon" :data="{ icon: icon, size: icon_size.upx, fab: fab }">
|
||
<block v-if="vtype == true">
|
||
<text
|
||
v-if="!fab && icon"
|
||
:class="[`${prefx_computed} ${icon}`, fontColor ? `text-${colors.color}` : '', black_tmeme ? 'opacity-6' : '', 'px-12','flex-shrink']"
|
||
:style="{
|
||
fontSize: `${icon_size.px}px`,
|
||
lineHeight:'normal'
|
||
}"
|
||
></text>
|
||
<text
|
||
v-if="fab && icon && !loading && !titl"
|
||
:class="[`${prefx_computed} ${icon}`, fontColor ? `text-${colors.color}` : '', black_tmeme ? 'opacity-6' : '','flex-shrink']"
|
||
:style="{
|
||
fontSize: `${icon_size.px}px`,
|
||
lineHeight:'normal'
|
||
}"
|
||
></text>
|
||
<text
|
||
v-if="fab && icon && !loading && titl"
|
||
:class="[`${prefx_computed} ${icon}`, fontColor ? `text-${color_tmeme}` : '', black_tmeme ? 'opacity-6' : '','flex-shrink']"
|
||
:style="{
|
||
fontSize: `${icon_size.px}px`,
|
||
lineHeight:'normal'
|
||
}"
|
||
></text>
|
||
</block>
|
||
<block v-if="vtype == false"><tm-icons :size="icon_size.upx" :name="icon"></tm-icons></block>
|
||
</slot>
|
||
|
||
<view v-if="!fab || showValue" class="d-inline-block tm-button-label flex-shrink" :style="{ fontSize: font_size }" :class="[fontColor ? `text-${colors.color}` : '',vertical ? 'full ' : '',]">
|
||
<slot name="default" :data="label">{{ label }}</slot>
|
||
</view>
|
||
</button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
/**
|
||
* 按钮
|
||
* @description 注意，按钮功能同原生按钮功能，所有属性都有。
|
||
* @property {Function} contact
|
||
* @property {Function} error
|
||
* @property {Function} getphonenumber
|
||
* @property {Function} getuserinfo
|
||
* @property {Function} opensetting
|
||
* @property {Function} click
|
||
* @property {Boolean} disabled = [true|false] 是否禁用
|
||
* @property {Boolean} loading = [true|false] 是否加载中
|
||
* @property {String} open-type = [contact|getPhoneNumber|getUserInfo|launchapp|share|openSetting] 同原生btn相同,//当等于getUserProfile时，自动获取微信授权。
|
||
* @property {Boolean} block = [true|false] 是否独占一行
|
||
* @property {Boolean} show-value = [true|false] fab模式是隐藏文字的。如果这个设置为true,不管在什么情况下都会显示文字。
|
||
* @property {String} url = [] 默认"",如果提供将会跳转连接。
|
||
* @property {String} size = [xs|s|m|n|l|g] 默认"n",按钮尺寸大小。
|
||
* @property {Number|String} font-size = [] 默认 0,自定义文字大小，默认使用主题size的大小。
|
||
* @property {Number|String} icon-size = [] upx单位默认 0,自定义图标大小，默认使用主题size的大小。
|
||
* @property {String} icon = [] 单位默认 "",自定义按钮图标。
|
||
* @property {String} item-class = [] 默认 "",按钮自定样式类。
|
||
* @property {String|Number} shadow = [] 默认 5,按钮投影
|
||
* @property {String} font-color = [] 默认主题颜色,自定文字颜色
|
||
* @property {String} bgcolor = [] 默认主题颜色,自定义-背景颜色
|
||
* @property {String} theme = [] 默认 primary,主题颜色
|
||
* @property {Boolean|String} black = [true|false] 默认 false, 暗黑模式
|
||
* @property {Boolean|String} flat = [true|false] 默认 false, 去除所有投影圆角效果，扁平模式。
|
||
* @property {Boolean|String} text = [true|false] 默认 false, 文本模式。背景减淡。文字使用主题色。
|
||
* @property {Boolean|String} plan = [true|false] 默认 false, 镂空。
|
||
* @property {Boolean|String} fab = [true|false] 默认 false, 圆模式。
|
||
* @property {Boolean|String} dense = [true|false] 默认 false, 是否去除外间隙。
|
||
* @property {Boolean|String} titl = [true|false] 默认 false, 无背景，无边框，只保留按钮区域和文字颜色或者图标颜色。
|
||
* @property {String} label = [] 默认 "", 按钮文字也可以使用插槽模式直接写在组件内部。
|
||
* @property {String|Number} width = [] 默认 "", 按钮宽, 单位px ,可以是百分比 如果不设置block为true时，此项设置无效。
|
||
* @property {String|Number} height = [] 默认 "", 按钮高, 单位px ,可以是百分比如果不设置block为true时，此项设置无效。
|
||
* @property {String|Number} round = [] 默认 2, 圆角
|
||
* @property {String|Number} navtie-type = [form] 默认 :'', 可选值form，提供此属性为form时，事件会被表单接替，会触发表单提交事件。
|
||
* @property {String} userProfileError = ['auto'] 默认:'auto' 仅open-type='getUserProfile'时有效，当微信授权失败提示的信息，默认为auto,如果非auto将显示自定义错误提示。如果为''，将不显示错误提示。
|
||
* @example <tm-button>确定</tm-button>
|
||
*/
|
||
import tmIcons from '@/tm-vuetify/components/tm-icons/tm-icons.vue';
|
||
export default {
|
||
components: { tmIcons },
|
||
name: 'tm-button',
|
||
props: {
|
||
hoverStartTime:20,
|
||
hoverStaySime:70,
|
||
appParameter:String,
|
||
hoverStopPropagation:{
|
||
type:Boolean,
|
||
default:false
|
||
},
|
||
sessionFrom:String,
|
||
sendMessageTitle:String,
|
||
sendMessagePath:String,
|
||
sendMessageImg:String,
|
||
showMessageCard:String,
|
||
navtieType: {
|
||
type: String,
|
||
default: '' //form
|
||
},
|
||
// 内联还是独占一行的块状100%，默认内联样式。
|
||
block: {
|
||
type: String | Boolean,
|
||
default: false
|
||
},
|
||
// fab模式是隐藏文字的。如果这个设置为true,不管在什么情况下都会显示文字。
|
||
showValue: {
|
||
type: String | Boolean,
|
||
default: false
|
||
},
|
||
disabled: {
|
||
type: String | Boolean,
|
||
default: false
|
||
},
|
||
loading: {
|
||
type: String | Boolean,
|
||
default: false
|
||
},
|
||
url: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
// xs,s,n,l,g
|
||
size: {
|
||
type: String,
|
||
default: 'n'
|
||
},
|
||
|
||
// 文字大小。
|
||
fontSize: {
|
||
type: Number | String,
|
||
default: 0
|
||
},
|
||
|
||
// 图标大小。
|
||
iconSize: {
|
||
type: Number | String,
|
||
default: 0
|
||
},
|
||
// icon-cog-fill
|
||
icon: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
// 按钮自定样式类。
|
||
itemClass: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
// 同原生btn相同。contact|getPhoneNumber|getUserInfo|launchapp|share|openSetting
|
||
//当等于getUserProfile时，自动获取微信授权。
|
||
openType: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
shadow: {
|
||
type: Number | String,
|
||
default: 4
|
||
},
|
||
vertical: {
|
||
type: Boolean | String,
|
||
default: false
|
||
},
|
||
// 自定义-文字颜色。
|
||
fontColor: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
// 自定义-背景颜色
|
||
bgcolor: {
|
||
type: String | Array,
|
||
default: ''
|
||
},
|
||
// 主题颜色
|
||
theme: {
|
||
type: String,
|
||
default: 'primary'
|
||
},
|
||
//优先级最高： 优先级1
|
||
black: {
|
||
type: Boolean | String,
|
||
default: null
|
||
},
|
||
// 优先级高：优先级2
|
||
flat: {
|
||
type: Boolean | String,
|
||
default: null
|
||
},
|
||
// 优先级高：文本模式。背景减淡。文字使用主题色。
|
||
text: {
|
||
type: Boolean | String,
|
||
default: false
|
||
},
|
||
// 优先级高：镂空。
|
||
plan: {
|
||
type: Boolean | String,
|
||
default: false
|
||
},
|
||
// 圆模式。
|
||
fab: {
|
||
type: Boolean | String,
|
||
default: false
|
||
},
|
||
// 无背景，无边框，只保留按钮区域和文字颜色或者图标颜色。
|
||
titl: {
|
||
type: Boolean | String,
|
||
default: false
|
||
},
|
||
label: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
// 如果不设置block为true时，此项设置无效。
|
||
width: {
|
||
type: String | Number,
|
||
default: NaN
|
||
},
|
||
// 如果不设置block为true时，此项设置无效。
|
||
height: {
|
||
type: String | Number,
|
||
default: NaN
|
||
},
|
||
// 圆角
|
||
round: {
|
||
type: String | Number,
|
||
default: 3
|
||
},
|
||
dense: {
|
||
type: Boolean | String,
|
||
default: false
|
||
},
|
||
// 跟随主题色的改变而改变。
|
||
fllowTheme: {
|
||
type: Boolean | String,
|
||
default: true
|
||
},
|
||
//当微信授权失败提示的信息，默认为auto,如果非auto将显示自定义错误提示。如果为''，将不显示错误提示。
|
||
userProfileError:{
|
||
type:String,
|
||
default:'auto'
|
||
}
|
||
},
|
||
created() {
|
||
this.customClassTm_puted = this.itemClass;
|
||
this.customDense_puted = this.dense;
|
||
this.color_tmeme = this.theme;
|
||
},
|
||
watch: {
|
||
theme: function() {
|
||
this.color_tmeme = this.theme;
|
||
}
|
||
},
|
||
computed: {
|
||
prefx_computed() {
|
||
let prefix = this.icon.split('-')[0];
|
||
if (prefix == 'icon') return 'iconfont';
|
||
if (prefix == 'mdi') return 'mdi';
|
||
|
||
return prefix;
|
||
},
|
||
customDense_puted: {
|
||
get: function() {
|
||
return this.customDense;
|
||
},
|
||
set: function(val) {
|
||
this.customDense = val;
|
||
}
|
||
},
|
||
customClassTm_puted: {
|
||
get: function() {
|
||
return this.customClassTm;
|
||
},
|
||
set: function(val) {
|
||
this.customClassTm = val;
|
||
}
|
||
},
|
||
vtype: function() {
|
||
if (this.icon[0] == '.' || this.icon[0] == '/' || this.icon.substring(0, 4) == 'http' || this.icon.substring(0, 5) == 'https' || this.icon.substring(0, 3) == 'ftp') {
|
||
return false;
|
||
}
|
||
return true;
|
||
},
|
||
black_tmeme: function() {
|
||
if (this.black !== null) return this.black;
|
||
return this.$tm.vx.state().tmVuetify.black;
|
||
},
|
||
color_tmeme: {
|
||
get: function() {
|
||
if (this.$tm.vx.state().tmVuetify.color !== null && this.$tm.vx.state().tmVuetify.color && this.fllowTheme) {
|
||
return this.$tm.vx.state().tmVuetify.color;
|
||
}
|
||
return this.color_tmeme_computed;
|
||
},
|
||
set: function(val) {
|
||
this.color_tmeme_computed = val;
|
||
}
|
||
},
|
||
// 投影的颜色名字。
|
||
shadowthemeName: function() {
|
||
if (!this.theme) return 'none';
|
||
return this.color_tmeme;
|
||
},
|
||
widths: {
|
||
get: function() {
|
||
let w;
|
||
|
||
if (typeof this.width === 'undefined') {
|
||
return 'auto';
|
||
}
|
||
let item = this.$TestUnit(this.width);
|
||
|
||
if (item) {
|
||
if (item.type == 'string') {
|
||
w = item.value;
|
||
}
|
||
if (item.type == 'number') {
|
||
w = item.value + 'px';
|
||
}
|
||
}
|
||
|
||
return w;
|
||
}
|
||
},
|
||
heights: {
|
||
get: function() {
|
||
let item = this.$TestUnit(this.height);
|
||
if (item) {
|
||
if (item.type == 'string') {
|
||
return item.value;
|
||
}
|
||
if (item.type == 'number') {
|
||
return item.value + 'px';
|
||
}
|
||
}
|
||
|
||
return 'auto';
|
||
}
|
||
},
|
||
sizes: function() {
|
||
if (!isNaN(this.width) || !isNaN(this.height)) return;
|
||
if (this.size == 'xs') {
|
||
return this.fab ? 'fabxs text-size-xs rounded' : 'wxs round-1 text-size-xs';
|
||
} else if (this.size == 's') {
|
||
return this.fab ? 'fabs text-size-xs rounded' : 'ws round-1 text-size-s';
|
||
} else if (this.size == 'm') {
|
||
return this.fab ? 'fabm text-size-xs rounded' : 'wm round-1 text-size-n';
|
||
} else if (this.size == 'n') {
|
||
return this.fab ? 'fabn text-size-xs rounded' : 'wn round-1 text-size-n';
|
||
} else if (this.size == 'l') {
|
||
return this.fab ? 'fabl text-size-xs rounded' : 'wl round-2 text-size-g';
|
||
} else if (this.size == 'g') {
|
||
return this.fab ? 'fabg text-size-xs rounded' : 'wg round-3 text-size-g';
|
||
}
|
||
},
|
||
font_size: function() {
|
||
if (this.fontSize > 0) {
|
||
return this.fontSize + 'rpx';
|
||
}
|
||
if (this.size == 'xs') {
|
||
return uni.upx2px(20) + 'px';
|
||
} else if (this.size == 's') {
|
||
return uni.upx2px(22) + 'px';
|
||
} else if (this.size == 'm') {
|
||
return uni.upx2px(24) + 'px';
|
||
} else if (this.size == 'n') {
|
||
return uni.upx2px(28) + 'px';
|
||
} else if (this.size == 'l') {
|
||
return uni.upx2px(32) + 'px';
|
||
} else if (this.size == 'g') {
|
||
return uni.upx2px(36) + 'px';
|
||
}
|
||
},
|
||
icon_size: function() {
|
||
if (this.iconSize) {
|
||
return { px: uni.upx2px(this.iconSize), upx: this.iconSize };
|
||
}
|
||
if (this.size == 'xs') {
|
||
return { px: uni.upx2px(20), upx: 20 };
|
||
} else if (this.size == 's') {
|
||
return { px: uni.upx2px(22), upx: 22 };
|
||
} else if (this.size == 'm') {
|
||
return { px: uni.upx2px(24), upx: 24 };
|
||
} else if (this.size == 'n') {
|
||
return { px: uni.upx2px(28), upx: 28 };
|
||
} else if (this.size == 'l') {
|
||
return { px: uni.upx2px(32), upx: 32 };
|
||
} else if (this.size == 'g') {
|
||
return { px: uni.upx2px(36), upx: 36 };
|
||
}
|
||
},
|
||
defaultfontsize: function() {
|
||
if (this.iconSize) {
|
||
return this.iconSize;
|
||
}
|
||
if (this.size == 'xs') {
|
||
return uni.upx2px(20);
|
||
} else if (this.size == 's') {
|
||
return uni.upx2px(22);
|
||
} else if (this.size == 'm') {
|
||
return uni.upx2px(24);
|
||
} else if (this.size == 'n') {
|
||
return uni.upx2px(28);
|
||
} else if (this.size == 'l') {
|
||
return uni.upx2px(32);
|
||
} else if (this.size == 'g') {
|
||
return uni.upx2px(36);
|
||
}
|
||
},
|
||
colors: function() {
|
||
let color = this.$TestColor(this.fontColor);
|
||
return color;
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
customClassTm: '',
|
||
customDense: false,
|
||
customStyleTm: '',
|
||
color_tmeme_computed: ''
|
||
};
|
||
},
|
||
methods: {
|
||
setConfigStyle(val) {
|
||
this.customStyleTm = val;
|
||
},
|
||
onclick() {
|
||
let t = this;
|
||
this.$emit('click', ...arguments);
|
||
if(this.openType=='getUserInfo' || this.openType == 'getUserProfile'){
|
||
// #ifdef MP-WEIXIN
|
||
uni.getUserProfile({
|
||
desc: '需要获取用户信息',
|
||
lang: 'zh',
|
||
complete: function (userProfile) {
|
||
if(userProfile.errMsg !='getUserProfile:ok'){
|
||
if(t.userProfileError==''||t.userProfileError=='true') return;
|
||
if(t.userProfileError!='auto'){
|
||
uni.showToast({
|
||
title:t.userProfileError,icon:'error',mask:true
|
||
})
|
||
return;
|
||
}
|
||
uni.showToast({
|
||
title:userProfile.errMsg,icon:'error',mask:true
|
||
})
|
||
return;
|
||
}
|
||
t.$emit('getUserInfo', userProfile);
|
||
t.$emit('getUserProfile', userProfile);
|
||
},
|
||
fail: (error) => {
|
||
if(t.userProfileError==''||t.userProfileError=='true') return;
|
||
if(t.userProfileError!='auto'){
|
||
uni.showToast({
|
||
title:t.userProfileError,icon:'error',mask:true
|
||
})
|
||
return;
|
||
}
|
||
uni.showToast({
|
||
title:error
|
||
})
|
||
}
|
||
});
|
||
// #endif
|
||
}
|
||
|
||
if (this.url !== '' && typeof this.url === 'string') {
|
||
let url = this.url;
|
||
if (url[0] !== '/') url = '/' + url;
|
||
uni.navigateTo({
|
||
url: url
|
||
});
|
||
}
|
||
},
|
||
contact() {
|
||
this.$emit('contact', ...arguments);
|
||
},
|
||
error() {
|
||
this.$emit('error', ...arguments);
|
||
},
|
||
getphonenumber() {
|
||
this.$emit('getphonenumber', ...arguments);
|
||
},
|
||
getuserinfo() {
|
||
this.$emit('getuserinfo', ...arguments);
|
||
},
|
||
launchapp() {
|
||
this.$emit('launchapp', ...arguments);
|
||
},
|
||
opensetting() {
|
||
this.$emit('opensetting', ...arguments);
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.tm-button {
|
||
vertical-align: middle;
|
||
.tm-button-btn button {
|
||
background: none;
|
||
border: none;
|
||
width: 100%;
|
||
height: auto;
|
||
line-height: 88upx;
|
||
height: 88upx;
|
||
vertical-align: middle;
|
||
|
||
// #ifdef H5
|
||
transition: all 0.3s;
|
||
// #endif
|
||
.tm-button-label {
|
||
vertical-align: middle;
|
||
|
||
}
|
||
&::after {
|
||
border: none;
|
||
}
|
||
&.fabxs {
|
||
width: 48upx;
|
||
height: 48upx !important;
|
||
line-height: 48upx;
|
||
text-align: center;
|
||
padding: 0 !important;
|
||
}
|
||
&.fabs {
|
||
width: 64upx;
|
||
height: 64upx !important;
|
||
line-height: 64upx;
|
||
text-align: center;
|
||
padding: 0 !important;
|
||
}
|
||
&.fabm {
|
||
width: 90upx;
|
||
height: 90upx !important;
|
||
line-height: 90upx;
|
||
text-align: center;
|
||
padding: 0 !important;
|
||
}
|
||
&.fabn {
|
||
width: 110upx;
|
||
height: 110upx !important;
|
||
line-height: 110upx;
|
||
text-align: center;
|
||
padding: 0 !important;
|
||
}
|
||
&.fabl {
|
||
width: 140upx;
|
||
height: 140upx !important;
|
||
line-height: 140upx;
|
||
text-align: center;
|
||
padding: 0 !important;
|
||
}
|
||
&.fabg {
|
||
width: 180upx;
|
||
height: 180upx !important;
|
||
line-height: 180upx;
|
||
text-align: center;
|
||
padding: 0 !important;
|
||
}
|
||
|
||
&.wxs {
|
||
min-width: 64upx;
|
||
height: 36upx !important;
|
||
// line-height: 24upx;
|
||
text-align: center;
|
||
// padding: 0 !important;
|
||
padding: 0 12upx;
|
||
}
|
||
&.ws {
|
||
min-width: 90upx;
|
||
height: 48upx !important;
|
||
|
||
// line-height: 24upx;
|
||
text-align: center;
|
||
padding: 0 16upx;
|
||
}
|
||
&.wm {
|
||
min-width: 140upx;
|
||
height: 64upx !important;
|
||
// line-height: 88upx;
|
||
text-align: center;
|
||
padding: 0 24upx;
|
||
}
|
||
&.wn {
|
||
min-width: 240upx;
|
||
height: 72upx !important;
|
||
// line-height: 88upx;
|
||
text-align: center;
|
||
// padding: 0 !important;
|
||
padding: 0 32upx;
|
||
}
|
||
&.wl {
|
||
min-width: 280upx;
|
||
height: 72upx !important;
|
||
// line-height: 88upx;
|
||
text-align: center;
|
||
padding: 0 32upx;
|
||
}
|
||
&.wg {
|
||
min-width: 400upx;
|
||
height: 76upx !important;
|
||
// line-height: 88upx;
|
||
text-align: center;
|
||
padding: 0 32upx;
|
||
}
|
||
|
||
&.plan {
|
||
box-shadow: none !important;
|
||
// background: transparent !important;
|
||
border-width: 1px !important;
|
||
border-style: solid;
|
||
}
|
||
&.titl {
|
||
box-shadow: none !important;
|
||
background: transparent !important;
|
||
border: none;
|
||
}
|
||
&:active,
|
||
&:focus {
|
||
opacity: 0.64;
|
||
}
|
||
&.showValue {
|
||
line-height: inherit !important;
|
||
padding: 0 !important;
|
||
}
|
||
|
||
&.noGutter {
|
||
min-width: 0 !important;
|
||
margin: 0 !important;
|
||
padding: 0 !important;
|
||
overflow: unset !important;
|
||
}
|
||
}
|
||
&.d-block {
|
||
button {
|
||
// padding: 30upx 0;
|
||
font-size: 32upx;
|
||
&.plan {
|
||
box-shadow: none !important;
|
||
background: transparent !important;
|
||
border-width: 1px !important;
|
||
border-style: solid;
|
||
}
|
||
}
|
||
&.showValue {
|
||
line-height: inherit !important;
|
||
}
|
||
}
|
||
&.d-inline-block {
|
||
vertical-align: middle;
|
||
}
|
||
}
|
||
</style>
|