feat:header-vue的侧滑弹框确定取消按钮替换

This commit is contained in:
zhangyu
2020-10-12 16:13:55 +08:00
parent 4fb561cdcf
commit 04e16d6b42
8 changed files with 74 additions and 13 deletions

View File

@@ -16,6 +16,16 @@ $btn-light-background-color-hover: linear-gradient(180deg, #F0F0F0 0%, #D8D8D8 9
$btn-light-txt-color: #666; //灰色按钮字体颜色 $btn-light-txt-color: #666; //灰色按钮字体颜色
$btn-light-shadow: 0 0 1px 1px rgba(162,162,162,0.50); //灰色按钮边框阴影 $btn-light-shadow: 0 0 1px 1px rgba(162,162,162,0.50); //灰色按钮边框阴影
$btn-normal-background-color-new:#FA901C;//新橙色按钮背景颜色
$btn-normal-background-color-hover-new:#FE9F37;//新橙色按钮hover背景颜色
$btn-normal-background-color-active-new:#F37F00;//新橙色按钮active背景颜色
$btn-normal-txt-color-new: #fff; //新橙色按钮字体颜色
$btn-light-border-color-new:rgba(0,0,0,0.15);//新灰色按钮背景颜色
$btn-light-border-color-hover-new:rgba(250,144,28,0.3);//新灰色按钮hover背景颜色
$btn-light-border-color-active-new:#FA901C;//新灰色按钮active背景颜色
$btn-light-txt-color-new: #333;//新灰色色按钮字体颜色
$pop-box-shadow: 0 0 12px 0 rgba(0,0,0,0.2); $pop-box-shadow: 0 0 12px 0 rgba(0,0,0,0.2);
$box-title-color: #333; //弹框标题字体颜色 $box-title-color: #333; //弹框标题字体颜色

View File

@@ -249,6 +249,57 @@ li{
.nz-btn.nz-btn-style-pure-white:hover:not(.nz-btn-disabled) { .nz-btn.nz-btn-style-pure-white:hover:not(.nz-btn-disabled) {
background-color: #dedede; background-color: #dedede;
} }
.nz-btn.nz-btn-size-normal-new{
height: 30px;
line-height: 30px;
text-align: center;
width: 74px;
}
.nz-btn.nz-btn-size-small-new{
height: 24px;
line-height: 24px;
text-align: center;
width: 60px;
}
.nz-btn.nz-btn-style-normal-new { /* 新版橙色按钮 */
background: $btn-normal-background-color-new;
color: $btn-normal-txt-color-new;
//box-shadow: $btn-normal-shadow;
border: 0px;
}
.nz-btn.nz-btn-style-light-new { /* 新版浅色按钮 */
background: #fff;
border: 1px solid $btn-light-border-color-new;
color: $btn-light-txt-color-new;
//box-shadow: $btn-light-shadow;
letter-spacing: 0;
}
.nz-btn.nz-btn-style-normal-new:hover:not(.nz-btn-disabled) { /* 新版橙色按钮hover */
background: $btn-normal-background-color-hover-new;
color: $btn-normal-txt-color-new;
//box-shadow: $btn-normal-shadow;
border: 0px;
}
.nz-btn.nz-btn-style-light-new:hover:not(.nz-btn-disabled) { /* 新版浅色按钮hover */
border: 1px solid $btn-light-border-color-hover-new;
color: $btn-light-border-color-hover-new;
//box-shadow: $btn-light-shadow;
letter-spacing: 0;
}
.nz-btn.nz-btn-style-normal-new:active:not(.nz-btn-disabled) { /* 新版橙色按钮active' */
background: $btn-normal-background-color-active-new;
color: $btn-normal-txt-color-new;
//box-shadow: $btn-normal-shadow;
border: 0px;
}
.nz-btn.nz-btn-style-light-new:active:not(.nz-btn-disabled) { /* 新版浅色按钮active*/
border: 1px solid $btn-light-border-color-active-new;
color: $btn-light-border-color-active-new;
//box-shadow: $btn-light-shadow;
letter-spacing: 0;
}
.nz-btn:focus { .nz-btn:focus {
outline: 0; outline: 0;
} }

View File

@@ -47,11 +47,11 @@
<!--底部按钮--> <!--底部按钮-->
<div class="right-box-bottom-btns"> <div class="right-box-bottom-btns">
<button @click="esc" id="account-esc" <button @click="esc" id="account-esc"
class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100"> class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
<span>{{$t('overall.cancel')}}</span> <span>{{$t('overall.cancel')}}</span>
</button> </button>
<button @click="save" id="account-save" <button @click="save" id="account-save"
class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100"> class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new">
<span>{{$t('overall.save')}}</span> <span>{{$t('overall.save')}}</span>
</button> </button>
</div> </div>

View File

@@ -183,7 +183,7 @@
</el-table> </el-table>
<div class="el-form-item__error" :style="{opacity: endpointTouch && this.endpointList.length == 0 ? '1' : '0'}" style="left: unset; transition: all .2s">{{$t('validate.required')}}</div> <div class="el-form-item__error" :style="{opacity: endpointTouch && this.endpointList.length == 0 ? '1' : '0'}" style="left: unset; transition: all .2s">{{$t('validate.required')}}</div>
<div> <div>
<button id="clear-select-asset" type="button" @click="clearSelection" class="nz-btn nz-btn-size-normal nz-btn-style-light endpoints-clear-btn">{{$t('overall.clear')}}</button> <button id="clear-select-asset" type="button" @click="clearSelection" class="nz-btn nz-btn-size-small-new nz-btn-style-light-new endpoints-clear-btn">{{$t('overall.clear')}}</button>
<span style="display: inline-block; font-size: 14px; float: right;line-height: 35px;padding-right: 15px;">All: {{this.endpointList.length}}</span> <span style="display: inline-block; font-size: 14px; float: right;line-height: 35px;padding-right: 15px;">All: {{this.endpointList.length}}</span>
</div> </div>
</div> </div>
@@ -195,10 +195,10 @@
<!--底部按钮--> <!--底部按钮-->
<div class="right-box-bottom-btns"> <div class="right-box-bottom-btns">
<button @click="esc" id="ep-esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100"> <button @click="esc" id="ep-esc" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
<span>{{$t('overall.cancel')}}</span> <span>{{$t('overall.cancel')}}</span>
</button> </button>
<button @click="save" id="ep-add" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100"> <button @click="save" id="ep-add" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new">
<span>{{$t('overall.save')}}</span> <span>{{$t('overall.save')}}</span>
</button> </button>
</div> </div>

View File

@@ -98,10 +98,10 @@
<!--底部按钮--> <!--底部按钮-->
<div class="right-box-bottom-btns"> <div class="right-box-bottom-btns">
<button @click="esc(false)" id="alert-box-esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100"> <button @click="esc(false)" id="alert-box-esc" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
<span>{{$t('overall.cancel')}}</span> <span>{{$t('overall.cancel')}}</span>
</button> </button>
<button @click="save" id="alert-box-save" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100"> <button @click="save" id="alert-box-save" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new">
<span>{{$t('overall.save')}}</span> <span>{{$t('overall.save')}}</span>
</button> </button>
</div> </div>

View File

@@ -151,10 +151,10 @@
<!--底部按钮--> <!--底部按钮-->
<div class="right-box-bottom-btns"> <div class="right-box-bottom-btns">
<button @click="esc(false)" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100" id="asset-edit-cancel"> <button @click="esc(false)" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new" id="asset-edit-cancel">
<span>{{$t('overall.cancel')}}</span> <span>{{$t('overall.cancel')}}</span>
</button> </button>
<button @click="save" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100" id="asset-edit-save"> <button @click="save" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" id="asset-edit-save">
<span>{{$t('overall.save')}}</span> <span>{{$t('overall.save')}}</span>
</button> </button>
</div> </div>

View File

@@ -280,10 +280,10 @@
<!--底部按钮--> <!--底部按钮-->
<div class="right-box-bottom-btns"> <div class="right-box-bottom-btns">
<button @click="esc" id="module-box-esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100"> <button @click="esc" id="module-box-esc" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
<span>{{$t('overall.cancel')}}</span> <span>{{$t('overall.cancel')}}</span>
</button> </button>
<button @click="save" id="module-box-save" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100"> <button @click="save" id="module-box-save" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new">
<span>{{$t('overall.save')}}</span> <span>{{$t('overall.save')}}</span>
</button> </button>
</div> </div>

View File

@@ -25,10 +25,10 @@
<!--底部按钮--> <!--底部按钮-->
<div class="right-box-bottom-btns"> <div class="right-box-bottom-btns">
<button @click="esc" id="project-esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100"> <button @click="esc" id="project-esc" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
<span>{{$t('overall.cancel')}}</span> <span>{{$t('overall.cancel')}}</span>
</button> </button>
<button @click="save" id="project-save" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100"> <button @click="save" id="project-save" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new">
<span>{{$t('overall.save')}}</span> <span>{{$t('overall.save')}}</span>
</button> </button>
</div> </div>