提交 0aa276a9 编写于 作者: KK's avatar KK

按钮ui

上级 9d877341
.app-mob-button { // 加载更多按钮样式
.loadmore_btn {
width: 100%;
margin: 0;
--border-radius: 0;
}
// 过滤按钮样式
.filter-btn {
position: relative;
top: 5px;
margin: 5px 10px 5px 0;
}
// 实体移动端多数据选择视图 底部选择按钮
.mobpickupview_button,
.demobmpickupview_button {
width: 100%;
display: flex;
justify-content: space-between;
margin-bottom: 10px;
.pick-btn {
height: 40px;
width: auto;
--border-radius: 2px;
width: 45%;
height: 40px;
width: auto;
--border-radius: 10px;
}
}
// 快速操作按钮
.app-quick-toolbar {
text-align: center;
.app-mob-button {
--background: transparent;
}
}
// 多选按钮
.demobmpickupview_button .pick-btn {
width: 45%;
height: 35px;
width: auto;
--border-radius: 4px;
}
//搜索表单按钮
.search-btn {
display: flex;
margin-bottom: 15px;
.search-btn-item {
width: 50%;
}
}
// 移动端实体选项操作视图 底部按钮
.option-btn {
width: 45%;
}
// 工作流动态编辑按钮
.wf_btns {
--border-radius: 50%;
width: 60px;
height: 60px;
}
.fab_container {
width: 60px;
position: absolute;
bottom: 4px;
right: 16px;
ion-button {
width: 60px;
height: 60px;
position: relative;
padding: 0;
--border-radius: 50%;
--padding-bottom: 0;
--padding-end: 0;
--padding-start: 0;
--padding-top: 0;
}
}
.sub-item {
margin-top: 10px;
box-sizing: border-box;
flex: 0 0 25%;
height: 100px;
display: flex;
color: black;
flex-direction: column;
justify-content: center;
align-items: center;
ion-button {
color: white !important;
border: 0 !important;
}
}
// 门户按钮
.app-mob-portlet {
.edit_title_btn {
text-align: right;
overflow: hidden;
transition: all 0.5s;
height: 0;
margin: 0;
ion-button {
width: 50px;
height: 25px;
--border-radius: 0;
font-size: 12px;
}
ion-button:nth-child(1) {
--background: #bbb;
}
}
}
// 多数据批操作按钮
.batch_btn {
display: flex;
justify-content: space-between;
align-items: center;
background: #fff;
.batch_btn_content {
display: flex;
justify-self: center;
ion-button {
color: #505050;
--background: transparent;
font-size: 12px;
--color-activated: #505050;
--background-activated: transparent;
}
}
} }
<template> <template>
<ion-button v-if="styleType==='default'" class="app-mob-button" :disabled="disabled" :class="className" @click="on_button_click"> <ion-button v-if="styleType==='default'" class="app-mob-button" :disabled="disabled" @click="on_button_click">
<ion-icon :name="iconName" /> <ion-icon v-if="iconName" :name="iconName" />
{{ text }} {{ text }}
</ion-button> </ion-button>
</template> </template>
...@@ -24,12 +24,6 @@ export default class AppMobButton extends Vue { ...@@ -24,12 +24,6 @@ export default class AppMobButton extends Vue {
@Prop() @Prop()
private text?: string; private text?: string;
/**
* 按钮class名称
*/
@Prop()
private className?: string;
/** /**
* 按钮类型 * 按钮类型
*/ */
...@@ -54,6 +48,8 @@ export default class AppMobButton extends Vue { ...@@ -54,6 +48,8 @@ export default class AppMobButton extends Vue {
private on_button_click() { private on_button_click() {
this.$emit('click') this.$emit('click')
} }
} }
</script> </script>
<style lang="less"> <style lang="less">
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册