style: 调整 switch 开关主题颜色

This commit is contained in:
@changcode
2021-11-30 14:36:51 +08:00
parent 895e84b77c
commit 1f0fc53526
28 changed files with 214 additions and 94 deletions

View File

@@ -190,7 +190,7 @@ td .nz-icon-gear:before{
}
.el-textarea {
.el-textarea__inner {
background-color: $--input-background-color !important;
background-color: $--background-color-empty !important;
}
.el-input__count {
background-color: $--input-background-color !important;
@@ -253,43 +253,6 @@ td .nz-icon-gear:before{
.el-scrollbar {
background-color: $--background-color-empty;
}
/* el-picker 下拉时间选择器 */
.el-picker-panel__footer {
border-top: 1px solid $--border-color-light !important;
span {
color: $--color-text-regular !important;
}
.el-button--text {
span {
color: $--color-primary !important;
}
}
.el-button--default {
margin-left: 10px;
color: $--button-primary-color !important;
background: $--picker-page-background-color !important;
border: 1px solid $--border-color-light !important;
}
.el-button.is-plain:hover {
background-color: $--picker-page-background-color !important;
border-color: $--picker-page-btn-border-color !important;
span {
color: $--picker-page-btn-color !important;
}
}
}
.el-date-range-picker__time-header {
border-bottom: 1px solid $--border-color-light;
}
.el-date-range-picker__content.is-left {
border-right: 1px solid $--border-color-light;
}
.el-date-table th {
border-bottom: 1px solid $--border-color-light !important;
}
.el-date-picker__time-header {
border-bottom: 1px solid $--picker-page-border-color !important;
}
.el-input-group.el-input-group--prepend,.query-input-inactive.el-input {
.el-input-group__prepend {
background-color: $--background-color-empty;
@@ -311,6 +274,55 @@ td .nz-icon-gear:before{
border-bottom: 1px solid $--border-color-light;
}
}
.el-dialog__wrapper.nz-dialog {
.el-upload-dragger {
background-color: $--background-color-empty;
border: 1px dashed $--border-color-light;
}
.el-upload-dragger:hover {
border: 1px dashed $--color-primary;
}
.el-message-box__btns {
.el-button {
background-color: $--background-color-empty;
border: 1px solid $--border-color-light;
}
.el-button:hover {
border: 1px solid $--color-primary;
}
.el-button:nth-of-type(3) {
margin-left: 10px;
}
.nz-btn.nz-btn-size-normal {
background-color: $--color-warning;
border: 1px solid $--color-warning;
color: $--button-primary-color;
}
.nz-btn.nz-btn-size-normal:hover {
background-color: #fe9f37;
}
}
}
.el-dialog {
.el-radio-button {
width: 142px;
.el-radio-button__inner {
width: 100%;
background-color: $--popover-background-color;
border-color: $--border-color-light;
}
}
.el-radio-button.is-active .el-radio-button__inner{
background-color: $--color-warning;
border-color: $--color-warning;
}
}
.switch-open {
background-color: $--color-primary;
}
.switch-shut {
background-color: $--switch-background-color;
}
//.editor-core {
// p {
// color: $--color-text-regular;

View File

@@ -22,4 +22,5 @@
.el-checkbox__inner, .el-input__inner {
border-color: $--checkbox-border-color;
background-color: $--background-color-empty;
}

View File

@@ -0,0 +1,47 @@
/* el-picker 下拉时间选择器 */
.el-picker-panel {
background-color: $--background-color-empty;
}
.el-picker-panel__footer {
border-top: 1px solid $--border-color-light !important;
background-color: $--background-color-empty;
span {
color: $--color-text-regular !important;
}
.el-button--text {
span {
color: $--color-primary !important;
}
}
.el-button--default {
margin-left: 10px;
color: $--button-primary-color !important;
background: $--picker-page-background-color !important;
border: 1px solid $--border-color-light !important;
}
.el-button.is-plain:hover {
background-color: $--picker-page-background-color !important;
border-color: $--picker-page-btn-border-color !important;
span {
color: $--picker-page-btn-color !important;
}
}
}
.el-date-table td.in-range div {
background-color: $--export-span-background-color;
}
.el-date-table td.in-range div:hover {
background-color: $--export-span-background-color;
}
.el-date-range-picker__time-header {
border-bottom: 1px solid $--border-color-light;
}
.el-date-range-picker__content.is-left {
border-right: 1px solid $--border-color-light;
}
.el-date-table th {
border-bottom: 1px solid $--border-color-light !important;
}
.el-date-picker__time-header {
border-bottom: 1px solid $--picker-page-border-color !important;
}

View File

@@ -1,5 +1,5 @@
.el-picker-panel,.sp-base.sp-inputs,.sp-base.sp-input,.el-picker-panel__footer{
background: $--input-background-color !important;
.sp-base.sp-inputs,.sp-base.sp-input{
background: $--background-color-empty !important;
}
.sp-search,.sp-result-area,.sp-pagination {
background-color: $--background-color-empty !important;
@@ -20,7 +20,7 @@
}
.sp-selected-tag {
color: $--color-text-regular !important;
background-color: $--select-page-tag-background-color !important;
background-color: $--background-color-base !important;
i {
color: $--color-text-regular !important;
}

View File

@@ -89,4 +89,6 @@
@import 'common/v-selectpagenew/selectpage.scss';
@import "common/paramBpx/paramBox";
@import "common/paramBpx/paramBox.scss";
@import "common/picker/picker.scss";

View File

@@ -9,6 +9,16 @@
background-color: $--background-color-base;
}
}
.half-form-item.el-form-item {
display: inline-block;
width: 230px;
.el-form-item__content {
width: 230px;
.el-input.el-input--small,.el-input.el-input-group--append {
width: calc(100% - 18px);
}
}
}
}
.system-config-form{
width: 61.8% !important;
@@ -300,13 +310,3 @@
font-size: 12px;
line-height: 20px;
}
.half-form-item.el-form-item {
display: inline-block;
width: 230px;
.el-form-item__content {
width: 230px;
.el-input.el-input--small,.el-input.el-input-group--append {
width: calc(100% - 18px);
}
}
}

View File

@@ -23,6 +23,27 @@
height: calc(100% - 60px);
flex: 1;
background-color: $--dashboard-background-color-empty;
.legend--table-cell,.legend-item {
color: $--color-text-regular;
}
.chart__canvas {
div:nth-of-type(2) {
background-color: $--background-color-empty !important;
border-color: $--border-color-light !important;
}
.nz-chart__tooltip {
.row__label,.row__value {
color: $--color-text-regular;
}
}
}
.legend-container {
.legend--table-row.table-header {
.legend--table-cell {
color: #33a2e5;
}
}
}
}
.table-list-box {
border-top: 1px solid $--background-color-base;

View File

@@ -200,6 +200,12 @@ $--guide-icon-color: $--time-picker-hover-color;
/* detail */
$--detail-left-background-color: $--background-color-base;
/* Export */
$--export-span-background-color: $--background-color-base;
/* switch */
$--switch-background-color: $--background-color-base;
/* 13.panel */
$--chart-title-hover-background-color: #323238;
$--chart-box-border-color: $--border-color-light;

View File

@@ -152,7 +152,6 @@ $--picker-page-btn-color: $--color-primary;
$--picker-page-btn-border-color: $--color-primary;
$--picker-page-btn-background-color: $--color-text-disabled;
// icon 字色
$--nz-icon-color: $--color-primary; //icon
$--span-nz-icon-border-color: $--asset-label-btn-border-color;
@@ -198,12 +197,18 @@ $--guide-icon-color: $--guide-icon-border-color;
/* detail */
$--detail-left-background-color: $--table-row-hover-background-color;
/* Export */
$--export-span-background-color: $--background-color-base;
/* switch */
$--switch-background-color: #dcdfe6;
/* 13.panel */
$--chart-title-hover-background-color: $--background-color-1;
$--chart-box-border-color: $--border-color-light;
/* 14.popover */
$--popover-background-color: $--background-color-empty;
$--popover-background-color: $--color-text-disabled;
/* 15.侧滑 */
$--right-box-shadow: -3px 0 8px -3px #ccc;

View File

@@ -1415,10 +1415,10 @@ li {
color: $--color-primary !important;;
}
}
/deep/ .el-input__inner{
.el-input__inner{
border-radius: 2px;
}
/deep/ .el-input-number .el-input__inner{
.el-input-number .el-input__inner{
text-align: left;
}
@@ -1426,11 +1426,11 @@ li {
position: fixed !important;
visibility: hidden;
}
/deep/ .el-tooltip{
.el-tooltip{
outline: none;
}
/deep/ .el-switch.is-checked .el-switch__core{
.el-switch.is-checked .el-switch__core{
border-color: $--color-primary;
background-color: $--color-primary;
}

View File

@@ -42,7 +42,7 @@
<transition name="el-zoom-in-top">
<div v-if="dropdownShow" class="endpoint-query-dropdown el-popover" style="right: 11px;top: 33px;">
<span style="padding-top: 2px">{{$t('project.endpoint.hideSameLabels')}}</span>
<el-switch v-model="hideSameLabels" active-color="#ee9d3f" size="small"></el-switch>
<el-switch v-model="hideSameLabels" active-icon-class="switch-open" inactive-icon-class="switch-shut" size="small"></el-switch>
</div>
</transition>
</button>

View File

@@ -53,7 +53,7 @@
<transition name="el-zoom-in-top">
<div v-if="dropdownShow" class="endpoint-query-dropdown el-popover">
<span style="padding-top: 2px">{{$t('project.endpoint.hideSameLabels')}}</span>
<el-switch v-model="hideSameLabels" active-color="#ee9d3f" size="small"></el-switch>
<el-switch v-model="hideSameLabels" active-icon-class="switch-open" inactive-icon-class="switch-shut" size="small"></el-switch>
</div>
</transition>
</button>

View File

@@ -36,7 +36,8 @@
v-model="selection.pen.data.valueMappingShow"
:active-value="true"
:inactive-value="false"
active-color="#ee9d3f"
active-icon-class="switch-open"
inactive-icon-class="switch-shut"
/>
</el-form-item>
</el-row>

View File

@@ -31,7 +31,8 @@
v-model="option.grid"
:active-value="true"
:inactive-value="false"
active-color="#ee9d3f"
active-icon-class="switch-open"
inactive-icon-class="switch-shut"
@change="changeOption('grid')">
</el-switch>
</div>
@@ -41,7 +42,8 @@
v-model="option.rule"
:active-value="true"
:inactive-value="false"
active-color="#ee9d3f"
active-icon-class="switch-open"
inactive-icon-class="switch-shut"
@change="changeOption('rule')">
</el-switch>
</div>

View File

@@ -17,7 +17,8 @@
<el-form-item :label='$t("config.assetType.vm")' prop="vm">
<el-switch
v-model="editAssetType.vm"
active-color="#ee9d3f"
active-icon-class="switch-open"
inactive-icon-class="switch-shut"
:active-value="1"
:inactive-value="0">
</el-switch>
@@ -26,7 +27,8 @@
<el-form-item :label='$t("config.assetType.vmh")' prop="vmh">
<el-switch
v-model="editAssetType.vmh"
active-color="#ee9d3f"
active-icon-class="switch-open"
inactive-icon-class="switch-shut"
:active-value="1"
:inactive-value="0">
</el-switch>
@@ -41,7 +43,8 @@
<el-form-item :label='$t("config.assetType.snmpEnable")' prop="snmpEnable">
<el-switch
v-model="editAssetType.snmpEnable"
active-color="#ee9d3f"
active-icon-class="switch-open"
inactive-icon-class="switch-shut"
:active-value="1"
:inactive-value="0">
</el-switch>
@@ -50,7 +53,8 @@
<el-form-item :label='$t("config.assetType.snmpCollect")' prop="snmpCollect">
<el-switch
v-model="editAssetType.snmpCollect"
active-color="#ee9d3f"
active-icon-class="switch-open"
inactive-icon-class="switch-shut"
:active-value="1"
:inactive-value="0">
</el-switch>
@@ -59,7 +63,8 @@
<el-form-item :label='$t("config.assetType.sshCollect")' prop="sshCollect">
<el-switch
v-model="editAssetType.sshCollect"
active-color="#ee9d3f"
active-icon-class="switch-open"
inactive-icon-class="switch-shut"
:active-value="1"
:inactive-value="0">
</el-switch>

View File

@@ -87,7 +87,7 @@
</el-form-item>
<!--enable-->
<el-form-item :label="$t('config.user.state')">
<el-switch id="account-input-status" v-model="editUser.status" :disabled="isCurrentUser(editUser.username) || (editUser.username==='admin' && editUser.id==1) " active-color="#ee9d3f" active-value="1"
<el-switch id="account-input-status" v-model="editUser.status" :disabled="isCurrentUser(editUser.username) || (editUser.username==='admin' && editUser.id==1) " active-icon-class="switch-open" inactive-icon-class="switch-shut" active-value="1"
inactive-value="0">
</el-switch>
</el-form-item>

View File

@@ -248,7 +248,7 @@
</el-popover>
</div>
<div>
<el-switch v-model="editAsset.clientEnable" :active-value="1" :inactive-value="0" active-color="#ee9d3f" size="small"></el-switch>
<el-switch v-model="editAsset.clientEnable" :active-value="1" :inactive-value="0" active-icon-class="switch-open" inactive-icon-class="switch-shut" size="small"></el-switch>
</div>
</div>
<transition name="el-zoom-in-top">

View File

@@ -28,7 +28,8 @@
<el-switch
@change="switchSearch"
v-model="editAssetMeta.search"
active-color="#ee9d3f"
active-icon-class="switch-open"
inactive-icon-class="switch-shut"
active-value="1"
inactive-value="0">
</el-switch>
@@ -36,7 +37,8 @@
<el-form-item :label='$t("config.assetLabel.display")' prop="display">
<el-switch
v-model="editAssetMeta.display"
active-color="#ee9d3f"
active-icon-class="switch-open"
inactive-icon-class="switch-shut"
active-value="1"
inactive-value="0">
</el-switch>
@@ -103,7 +105,8 @@
<el-switch
v-model="editAssetMeta.param.interval"
@change="$forceUpdate()"
active-color="#ee9d3f">
active-icon-class="switch-open"
inactive-icon-class="switch-shut">
</el-switch>
</el-row>
</div>

View File

@@ -24,19 +24,19 @@
</el-form-item>
<!--ping-->
<el-form-item label="Ping">
<el-switch :active-value="1" :inactive-value="0" active-color="#ee9d3f" id="asset-state-ping-status"
<el-switch :active-value="1" :inactive-value="0" active-icon-class="switch-open" inactive-icon-class="switch-shut" id="asset-state-ping-status"
v-model="editAssetState.ping">
</el-switch>
</el-form-item>
<!--monitor-->
<el-form-item :label="$t('config.assetState.monitor')">
<el-switch :active-value="1" :inactive-value="0" active-color="#ee9d3f" id="asset-state-monitor-status"
<el-switch :active-value="1" :inactive-value="0" active-icon-class="switch-open" inactive-icon-class="switch-shut" id="asset-state-monitor-status"
v-model="editAssetState.monitor">
</el-switch>
</el-form-item>
<!--alert-->
<el-form-item :label="$t('config.assetState.alert')">
<el-switch :active-value="1" :inactive-value="0" active-color="#ee9d3f" id="asset-state-alert-status"
<el-switch :active-value="1" :inactive-value="0" active-icon-class="switch-open" inactive-icon-class="switch-shut" id="asset-state-alert-status"
v-model="editAssetState.alert">
</el-switch>
</el-form-item>

View File

@@ -45,7 +45,8 @@
v-model="editDc.state"
active-value="ON"
inactive-value="OFF"
active-color="#ee9d3f"
active-icon-class="switch-open"
inactive-icon-class="switch-shut"
>
</el-switch>
</el-form-item>

View File

@@ -105,7 +105,7 @@
<i class="nz-icon nz-icon-arrow-down" :class="metricsShow?'':'is-active'" @click="metricsShow = !metricsShow"></i>
{{$t('project.endpoint.metrics')}}
</span>
<el-switch v-model="editEndpoint.configs[0].enable" active-color="#ee9d3f" size="small" :active-value="1" :inactive-value="0"></el-switch>
<el-switch v-model="editEndpoint.configs[0].enable" active-icon-class="switch-open" inactive-icon-class="switch-shut" size="small" :active-value="1" :inactive-value="0"></el-switch>
</div>
<transition name="el-zoom-in-top">
<el-tabs v-model="activeName" v-show="metricsShow" v-if="editEndpoint.configs[0].enable">
@@ -346,7 +346,7 @@
<i class="nz-icon nz-icon-arrow-down" :class="logsShow?'':'is-active'" @click="logsShow = !logsShow"></i>
{{$t('project.endpoint.logs')}}
</span>
<el-switch v-model="editEndpoint.configs[1].enable" active-color="#ee9d3f" size="small" :active-value="1" :inactive-value="0"></el-switch>
<el-switch v-model="editEndpoint.configs[1].enable" active-icon-class="switch-open" inactive-icon-class="switch-shut" size="small" :active-value="1" :inactive-value="0"></el-switch>
</div>
<transition name="el-zoom-in-top">
<div v-show="logsShow" v-if="editEndpoint.configs[1].enable">

View File

@@ -86,7 +86,7 @@
<i class="nz-icon nz-icon-arrow-down" :class="metricsShow?'':'is-active'" @click="metricsShow = !metricsShow"></i>
{{$t('project.endpoint.metrics')}}
</span>
<el-switch v-model="editModule.configs[0].enable" active-color="#ee9d3f" size="small" :active-value="1" :inactive-value="0"></el-switch>
<el-switch v-model="editModule.configs[0].enable" active-icon-class="switch-open" inactive-icon-class="switch-shut" size="small" :active-value="1" :inactive-value="0"></el-switch>
</div>
<transition name="el-zoom-in-top">
<el-tabs v-model="activeName" v-show="metricsShow" v-if="editModule.configs[0].enable">
@@ -326,7 +326,7 @@
<i class="nz-icon nz-icon-arrow-down" :class="logsShow?'':'is-active'" @click="logsShow = !logsShow"></i>
{{$t('project.endpoint.logs')}}
</span>
<el-switch v-model="editModule.configs[1].enable" active-color="#ee9d3f" size="small" :active-value="1" :inactive-value="0"></el-switch>
<el-switch v-model="editModule.configs[1].enable" active-icon-class="switch-open" inactive-icon-class="switch-shut" size="small" :active-value="1" :inactive-value="0"></el-switch>
</div>
<transition name="el-zoom-in-top">
<div v-show="logsShow" v-if="editModule.configs[1].enable">

View File

@@ -75,7 +75,8 @@
style="margin-left: 14px"
slot="reference"
v-model="scope.row.schedEnable"
active-color="#ee9d3f"
active-icon-class="switch-open"
inactive-icon-class="switch-shut"
:active-value="1"
:inactive-value="0"
@change="(val)=>{$emit('statusChange', scope.row)}"

View File

@@ -61,7 +61,8 @@
:active-value="1"
:disabled="!hasButton('assetState_toEdit')"
:inactive-value="0"
active-color="#ee9d3f"
active-icon-class="switch-open"
inactive-icon-class="switch-shut"
@change="(val)=>{statusChange(scope.row)}">
</el-switch>
<el-switch
@@ -70,7 +71,8 @@
:active-value="1"
:disabled="!hasButton('assetState_toEdit')"
:inactive-value="0"
active-color="#ee9d3f"
active-icon-class="switch-open"
inactive-icon-class="switch-shut"
@change="(val)=>{statusChange(scope.row)}">
</el-switch>
<el-switch
@@ -79,7 +81,8 @@
:active-value="1"
:disabled="!hasButton('assetState_toEdit')"
:inactive-value="0"
active-color="#ee9d3f"
active-icon-class="switch-open"
inactive-icon-class="switch-shut"
@change="(val)=>{statusChange(scope.row)}">
</el-switch>
<span v-else>{{scope.row[item.prop]}}</span>

View File

@@ -68,17 +68,17 @@
<el-input v-model.number="basic.default_cabinet_usize" id="system-baisc-default_cabinet_usize"></el-input>
</el-form-item>
<el-form-item :label="$t('config.system.basic.unsaved')" prop="unsaved_change">
<el-switch v-model="basic.unsaved_change" active-color="rgb(238, 157, 63)" active-value='on' inactive-value='off' id="system-baisc-unsaved_change">
<el-switch v-model="basic.unsaved_change" active-icon-class="switch-open" inactive-icon-class="switch-shut" active-value='on' inactive-value='off' id="system-baisc-unsaved_change">
</el-switch>
</el-form-item>
<div class="system-title">{{$t('config.system.basic.pinPolicy')}}&nbsp;<span class="el-form-item__tip">({{$t('config.system.basic.pinPolicyValue')}})</span></div>
<el-form-item :label="$t('config.system.basic.gloEnable')" prop="mfa_auth_enable">
<el-switch v-model="basic.mfa_auth_enable" active-color="rgb(238, 157, 63)" :active-value='"1"' :inactive-value='"0"' id="system-basic-mfs_change">
<el-switch v-model="basic.mfa_auth_enable" active-icon-class="switch-open" inactive-icon-class="switch-shut" :active-value='"1"' :inactive-value='"0"' id="system-basic-mfs_change">
</el-switch>
<!-- <div class="el-form-item__tip">{{$t('config.system.basic.TwoFactorAuthentication')}}</div>-->
</el-form-item>
<el-form-item :label="$t('config.system.basic.enable')" prop="enable">
<el-switch v-model="basic.pin_policy.enable" active-color="rgb(238, 157, 63)" active-value='1' inactive-value='0' id="system-basic-enable">
<el-switch v-model="basic.pin_policy.enable" active-icon-class="switch-open" inactive-icon-class="switch-shut" active-value='1' inactive-value='0' id="system-basic-enable">
</el-switch>
</el-form-item>
<el-form-item :label="$t('config.system.basic.length')" prop="length">

View File

@@ -53,11 +53,11 @@
</el-select>
</el-popover>
</template>
<template v-if="item.prop == 'state'"><el-switch v-model="scope.row.state" active-color="#ee9d3f" :active-value="1" :inactive-value="0" /></template>
<template v-if="item.prop == 'state'"><el-switch v-model="scope.row.state" active-icon-class="switch-open" inactive-icon-class="switch-shut" active-color="#ee9d3f" :active-value="1" :inactive-value="0" /></template>
</template>
<template v-else>
<template v-if="item.prop == 'state'">
<el-switch :disabled="true" v-model="scope.row.state" active-color="#ee9d3f" :active-value="1" :inactive-value="0" />
<el-switch :disabled="true" v-model="scope.row.state" active-icon-class="switch-open" inactive-icon-class="switch-shut" :active-value="1" :inactive-value="0" />
</template>
<template v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
<template v-else>-</template>

View File

@@ -165,7 +165,8 @@
v-model="editChart.param.time"
:active-value="true"
:inactive-value="false"
active-color="#ee9d3f"
active-icon-class="switch-open"
inactive-icon-class="switch-shut"
size="small"></el-switch>
</el-form-item>
<el-form-item class="form-item--half-width" v-if="editChart.type == 'logs'" :label='$t("dashboard.panel.chartForm.descending")' prop="param.descending">
@@ -173,7 +174,8 @@
v-model="editChart.param.descending"
:active-value="true"
:inactive-value="false"
active-color="#ee9d3f"
active-icon-class="switch-open"
inactive-icon-class="switch-shut"
size="small"></el-switch>
</el-form-item>
<el-form-item class="form-item--half-width" v-if="editChart.type == 'logs'" :label='$t("dashboard.panel.chartForm.wrapLines")' prop="param.wrapLines">
@@ -181,7 +183,8 @@
v-model="editChart.param.wrapLines"
:active-value="true"
:inactive-value="false"
active-color="#ee9d3f"
active-icon-class="switch-open"
inactive-icon-class="switch-shut"
size="small"></el-switch>
</el-form-item>
</div>
@@ -325,7 +328,8 @@
<el-switch
:id="'chart-box-legendValue-'+item.label"
v-model="editChart.param.legendValue[item.key]"
active-color="#ee9d3f"
active-icon-class="switch-open"
inactive-icon-class="switch-shut"
active-value="on"
inactive-value="off"
>

View File

@@ -7,6 +7,8 @@
<span class="operation-label">{{$t('overall.time')}}</span>
<el-switch
v-model="time"
active-icon-class="switch-open"
inactive-icon-class="switch-shut"
>
</el-switch>
</div>
@@ -14,6 +16,8 @@
<span class="operation-label">{{$t('dashboard.explore.descending')}}</span>
<el-switch
v-model="operations.descending"
active-icon-class="switch-open"
inactive-icon-class="switch-shut"
>
</el-switch>
</div>
@@ -21,6 +25,8 @@
<span class="operation-label">{{$t('dashboard.explore.wrapLines')}}</span>
<el-switch
v-model="wrapLines"
active-icon-class="switch-open"
inactive-icon-class="switch-shut"
>
</el-switch>
</div>