Merge pull request #652 from veops/dev_ui_241211

feat: update style
This commit is contained in:
Leo Song 2024-12-11 15:48:23 +08:00 committed by GitHub
commit 6bd3de8951
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
39 changed files with 1010 additions and 774 deletions

View File

@ -11,10 +11,19 @@
.ant-input {
box-shadow: none;
border: none;
background-color: #F7F8FA;
height: 30px;
line-height: 30px;
border-radius: 30px;
&:focus {
border: solid 1px #B1C9FF;
}
}
.cmdb-side-menu-search-focused {
.ant-input {
border: solid 1px #B1C9FF;
}
}
.ant-input-suffix {

View File

@ -92,7 +92,7 @@ export default {
e.preventDefault()
e.stopPropagation()
this.$confirm({
title: this.$t('alert'),
title: this.$t('warning'),
content: this.$t('cmdb.preference.confirmcancelSub2', { name: menu.meta.title }),
onOk() {
const citypeId = menu.meta.typeId
@ -313,10 +313,7 @@ export default {
<Item class={styles['cmdb-side-menu-search']}>
<a-input
ref="cmdbSideMenuSearchInputRef"
class={styles['cmdb-side-menu-search-input']}
style={{
border: this.$route.name === 'cmdb_resource_search' ? 'solid 1px #B1C9FF' : ''
}}
class={`ops-input ${this.$route.name === 'cmdb_resource_search' ? 'cmdb-side-menu-search-focused' : ''}`}
placeholder={this.$t('cmdbSearch')}
onPressEnter={(e) => {
this.jumpCMDBSearch(e.target.value)

View File

@ -4,7 +4,7 @@
<template #empty>
<slot name="empty">
<div :style="{ paddingTop: '10px' }">
<img :style="{ width: '140px', height: '90px' }" :src="require('@/assets/data_empty.png')" />
<img :style="{ width: '140px', height: '120px' }" :src="require('@/assets/data_empty.png')" />
<div>{{ $t('noData') }}</div>
</div>
</slot>

View File

@ -195,11 +195,11 @@ export default {
background-color: #fff;
height: calc(100vh - 64px);
margin-bottom: -24px;
padding: 24px;
padding: 20px;
.acl-resource-types-header {
width: 100%;
display: inline-flex;
margin-bottom: 15px;
margin-bottom: 20px;
align-items: center;
}
}

View File

@ -358,11 +358,11 @@ export default {
background-color: #fff;
height: calc(100vh - 64px);
margin-bottom: -24px;
padding: 12px 24px 24px 24px;
padding: 8px 20px 20px 20px;
.acl-resources-header {
width: 100%;
display: inline-flex;
margin-bottom: 15px;
margin-bottom: 20px;
align-items: center;
justify-content: space-between;
.ant-switch {

View File

@ -291,11 +291,11 @@ export default {
background-color: #fff;
height: calc(100vh - 64px);
margin-bottom: -24px;
padding: 24px;
padding: 20px;
.acl-roles-header {
width: 100%;
display: inline-flex;
margin-bottom: 15px;
margin-bottom: 20px;
align-items: center;
.ant-checkbox-wrapper {
margin-left: auto;

View File

@ -326,11 +326,11 @@ export default {
background-color: #fff;
height: calc(100vh - 64px);
margin-bottom: -24px;
padding: 24px;
padding: 20px;
.acl-trigger-header {
width: 100%;
display: inline-flex;
margin-bottom: 15px;
margin-bottom: 20px;
align-items: center;
}
}

View File

@ -352,7 +352,6 @@ export default {
</style>
<style lang="less">
.cmdb-grant {
.grant-button {
padding: 6px 8px;
@ -363,9 +362,9 @@ export default {
margin: 15px 0;
display: inline-block;
transition: all 0.3s;
&:hover {
box-shadow: 2px 3px 4px @primary-color_5;
}
z-index: 1;
.btn-wave-hover(@primary-color_4, -1);
}
}
</style>

View File

@ -3,12 +3,10 @@
<a-form-model :model="form" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }">
<a-form-model-item :label="$t('user')">
<EmployeeTreeSelect
class="custom-treeselect custom-treeselect-bgcAndBorder"
class="custom-treeselect custom-treeselect-white"
:style="{
'--custom-height': '32px',
lineHeight: '32px',
'--custom-bg-color': '#fff',
'--custom-border': '1px solid #d9d9d9',
'--custom-multiple-lineHeight': '18px',
}"
:multiple="true"
@ -24,12 +22,10 @@
v-model="form.roles"
:multiple="true"
:options="filterAllRoles"
class="custom-treeselect custom-treeselect-bgcAndBorder"
class="custom-treeselect custom-treeselect-white"
:style="{
'--custom-height': '32px',
lineHeight: '32px',
'--custom-bg-color': '#fff',
'--custom-border': '1px solid #d9d9d9',
'--custom-multiple-lineHeight': '18px',
}"
:limit="10"

View File

@ -3,12 +3,10 @@
:disabled="disabled"
ref="cmdb_type_select"
:disable-branch-nodes="true"
class="custom-treeselect custom-treeselect-bgcAndBorder"
class="custom-treeselect custom-treeselect-white"
:style="{
'--custom-height': '30px',
lineHeight: '30px',
'--custom-bg-color': '#fff',
'--custom-border': '1px solid #d9d9d9',
lineHeight: '30px'
}"
v-model="currenCiType"
:multiple="multiple"

View File

@ -35,8 +35,8 @@
:key="`${item.id}_${index}`"
class="preference-search-tag"
:style="{
backgroundColor: item.id === currentPreferenceSearch ? '#2f54eb' : '#fafafa',
color: item.id === currentPreferenceSearch ? '#fff' : '#000000a6',
backgroundColor: item.id === currentPreferenceSearch ? '#2f54eb' : '',
color: item.id === currentPreferenceSearch ? '#fff' : '',
}"
>
<span @click="clickPreferenceSearch(item)">{{ item.name }}</span>
@ -189,6 +189,10 @@ export default {
> i {
font-size: 12px;
}
&:hover {
color: @primary-color;
}
}
.preference-search-delete {
color: #a9a9a9;

View File

@ -5,13 +5,11 @@
<a-space>
<treeselect
v-if="type === 'resourceSearch'"
class="custom-treeselect custom-treeselect-bgcAndBorder"
class="custom-treeselect"
:style="{
width: '200px',
marginRight: '10px',
'--custom-height': '32px',
'--custom-bg-color': '#fff',
'--custom-border': '1px solid #d9d9d9',
'--custom-multiple-lineHeight': '16px',
}"
v-model="currenCiType"

View File

@ -135,9 +135,15 @@ export default {
border: 1px solid #f3f4f6;
}
.authorization-input {
border: none;
border: 1px solid transparent;
&:focus {
box-shadow: none;
border-color: @primary-color;
}
&:hover {
border-color: @primary-color;
}
}
}

View File

@ -29,7 +29,7 @@
<tr v-for="(item, index) in headers" :key="item.id">
<td><a-input class="headers-input" v-model="item.key" :placeholder="$t('cmdb.components.param', { param: `${index + 1}` })" /></td>
<td><a-input class="headers-input" v-model="item.value" :placeholder="$t('cmdb.components.value', { value: `${index + 1}` })" /></td>
<td>
<td class="headers-delete">
<a style="color:red">
<ops-icon type="icon-xianxing-delete" @click="deleteParam(index)" />
</a>
@ -92,10 +92,20 @@ export default {
border: 1px solid #f3f4f6;
}
.headers-input {
border: none;
border: 1px solid transparent;
&:focus {
box-shadow: none;
border-color: @primary-color;
}
&:hover {
border-color: @primary-color;
}
}
.headers-delete {
text-align: center;
}
}
</style>

View File

@ -3,12 +3,10 @@
<a-input-group compact>
<treeselect
:disable-branch-nodes="true"
class="custom-treeselect custom-treeselect-bgcAndBorder"
class="custom-treeselect custom-treeselect-white"
:style="{
'--custom-height': '30px',
lineHeight: '30px',
'--custom-bg-color': '#fff',
'--custom-border': '1px solid #d9d9d9',
display: 'inline-block',
width: '100px',
}"

View File

@ -23,7 +23,7 @@
<tr v-for="(item, index) in parameters" :key="item.id">
<td><a-input class="parameters-input" v-model="item.key" :placeholder="$t('cmdb.components.param', { param: `${index + 1}` })" /></td>
<td><a-input class="parameters-input" v-model="item.value" :placeholder="$t('cmdb.components.value', { value: `${index + 1}` })" /></td>
<td>
<td class="parameters-delete">
<a style="color:red">
<ops-icon type="icon-xianxing-delete" @click="deleteParam(index)" />
</a>
@ -91,10 +91,20 @@ export default {
border: 1px solid #f3f4f6;
}
.parameters-input {
border: none;
border: 1px solid transparent;
&:focus {
box-shadow: none;
border-color: @primary-color;
}
&:hover {
border-color: @primary-color;
}
}
.parameters-delete {
text-align: center;
}
}
</style>

View File

@ -104,6 +104,16 @@ export default {
.cmdb-batch-upload-tips {
color: @primary-color;
}
&:hover {
background: linear-gradient(90deg, @primary-color_2 50%, transparent 0) repeat-x,
linear-gradient(90deg, @primary-color_2 50%, transparent 0) repeat-x,
linear-gradient(0deg, @primary-color_2 50%, transparent 0) repeat-y,
linear-gradient(0deg, @primary-color_2 50%, transparent 0) repeat-y;
background-size: 15px 1px, 15px 1px, 1px 15px, 1px 15px;
background-position: 0 0, 0 100%, 0 0, 100% 0;
background-color: @primary-color_7;
}
}
.ant-upload.ant-upload-drag .ant-upload-drag-container {
vertical-align: baseline;

View File

@ -9,13 +9,11 @@
"
:title="$t('cmdb.ci.attributeDesc')"
width="72%"
:bodyStyle="{ height: '100vh' }"
:bodyStyle="{ height: '100vh', paddingTop: '16px' }"
>
<vxe-toolbar>
<template #buttons>
<a-input
v-model="searchKey"
:style="{ display: 'inline-block', width: '244px' }"
:style="{ display: 'inline-block', width: '244px', marginBottom: '16px' }"
class="ops-input ops-input-radius"
type="search"
:placeholder="$t('cmdb.ci.tips5')"
@ -23,8 +21,6 @@
>
<a-icon type="search" slot="suffix" />
</a-input>
</template>
</vxe-toolbar>
<a-spin :spinning="loading">
<vxe-table

View File

@ -33,8 +33,8 @@
</a-tab-pane>
<a-tab-pane key="tab_3">
<span slot="tab"><a-icon type="clock-circle" />{{ $t('cmdb.ci.history') }}</span>
<div :style="{ padding: '24px', height: '100%' }">
<a-space :style="{ 'margin-bottom': '10px', display: 'flex' }">
<div :style="{ padding: '16px 24px 24px', height: '100%' }">
<a-space :style="{ marginBottom: '16px', display: 'flex' }">
<a-button type="primary" class="ops-button-ghost" ghost @click="handleRollbackCI()">
<ops-icon type="shishizhuangtai" />{{ $t('cmdb.ci.rollback') }}
</a-button>
@ -180,7 +180,7 @@ export default {
ci_types: [],
hasPermission: true,
itsmInstalled: true,
tableHeight: this.attributeHistoryTableHeight || (this.$store.state.windowHeight - 120),
tableHeight: this.attributeHistoryTableHeight || (this.$store.state.windowHeight - 130),
initQueryLoading: true,
}
},

View File

@ -61,16 +61,20 @@ export default {
justify-content: center;
font-size: 12px;
font-weight: 400;
color: #4E5969;
background-color: #F7F8FA;
color: @text-color_2;
background-color: @primary-color_7;
width: 105px;
height: 32px;
cursor: pointer;
&-active {
border: solid 1px #B1C9FF;
background-color: #E1EFFF;
color: #2F54EB;
border: solid 1px @primary-color_8;
background-color: @primary-color_4;
color: @primary-color;
}
&:hover {
color: @primary-color;
}
}
}

View File

@ -154,6 +154,17 @@ export default {
margin-left: 6px;
}
&:hover {
background-color: @primary-color_5;
.attr-ad-tab-edit {
display: inline-block;
}
.attr-ad-tab-delete {
display: inline-block;
}
}
&_active {
border: solid 1px @primary-color_8;
background-color: @primary-color_6;
@ -161,14 +172,9 @@ export default {
.attr-ad-tab-name {
color: @primary-color;
}
}
&:hover {
.attr-ad-tab-edit {
display: inline-block;
}
.attr-ad-tab-delete {
display: inline-block;
background-color: @primary-color_6;
}
}
}
@ -178,6 +184,11 @@ export default {
background-color: @primary-color_7;
font-size: 12px;
color: @text-color_4;
&:hover {
background-color: @primary-color_5;
color: @primary-color;
}
}
}
</style>

View File

@ -3,12 +3,14 @@
<div class="attr-ad-header attr-ad-header-margin">{{ $t('cmdb.ciType.configCheckTitle') }}</div>
<div class="attr-ad-content">
<div class="ad-test-title-info">{{ $t('cmdb.ciType.checkTestTip') }}</div>
<div
class="ad-test-btn"
<a-button
type="primary"
class="ops-button-ghost ad-test-btn"
ghost
@click="showCheckModal"
>
{{ $t('cmdb.ciType.checkTestBtn') }}
</div>
</a-button>
<div class="ad-test-btn-info">{{ $t('cmdb.ciType.checkTestTip2') }}</div>
<!-- <div
class="ad-test-btn"
@ -140,15 +142,6 @@ export default {
.ad-test-btn {
margin-top: 30px;
padding: 5px 12px;
background-color: #F4F9FF;
border: solid 1px @primary-color_8;
display: inline-block;
cursor: pointer;
color: @link-color;
font-size: 12px;
font-weight: 400;
}
.ad-test-btn-info {

View File

@ -1194,7 +1194,7 @@ export default {
.selected {
background-color: @primary-color_3;
.ci-types-left-detail-title {
font-weight: 700;
color: @primary-color;
}
}
}

View File

@ -61,13 +61,11 @@
:disable-branch-nodes="true"
:class="{
'custom-treeselect': true,
'custom-treeselect-bgcAndBorder': true,
'custom-treeselect-white': true,
}"
:style="{
'--custom-height': '32px',
lineHeight: '32px',
'--custom-bg-color': '#fff',
'--custom-border': '1px solid #d9d9d9',
'--custom-multiple-lineHeight': '14px',
}"
v-model="choice_other.type_ids"

View File

@ -198,13 +198,11 @@
:disable-branch-nodes="true"
:class="{
'custom-treeselect': true,
'custom-treeselect-bgcAndBorder': true,
'custom-treeselect-white': true,
}"
:style="{
'--custom-height': '32px',
lineHeight: '32px',
'--custom-bg-color': '#fff',
'--custom-border': '1px solid #d9d9d9',
'--custom-multiple-lineHeight': '14px',
}"
v-model="selectedBot"

View File

@ -195,12 +195,14 @@
</template>
</div>
<a-form-model-item
:label="$t('cmdb.custom_dashboard.showIcon')"
prop="showIcon"
:label-col="{ span: 5 }"
:wrapper-col="{ span: 18 }"
:label-col="{ span: 0 }"
:wrapper-col="{ span: 23 }"
>
<div class="chart-left-show-icon">
<span class="chart-left-show-icon-label">{{ $t('cmdb.custom_dashboard.showIcon') }}:</span>
<a-switch v-model="form.showIcon"></a-switch>
</div>
</a-form-model-item>
</a-form-model>
</div>
@ -733,6 +735,9 @@ export default {
width: 92%;
position: relative;
padding: 12px;
margin-top: 4px;
display: inline-block;
.chart-left-preview-operation {
color: #86909c;
position: absolute;
@ -753,12 +758,26 @@ export default {
background-position-x: center;
background-position-y: center;
}
&-show-icon {
display: flex;
align-items: center;
&-label {
flex-shrink: 0;
margin-right: 8px;
}
}
}
.chart-right {
width: 50%;
h4 {
font-weight: 700;
color: #000;
&:not(:first-child) {
margin-top: 14px;
}
}
.chart-right-type {
display: flex;
@ -797,7 +816,7 @@ export default {
<style lang="less">
.chart-wrapper {
.ant-form-item {
margin-bottom: 0;
margin-bottom: 8px;
}
}
</style>

View File

@ -170,6 +170,7 @@ export default {
position: relative;
margin-bottom: 40px;
margin-right: 40px;
cursor: pointer;
&-inner {
position: absolute;
@ -294,6 +295,12 @@ export default {
}
}
&, &.discovery-card-small {
&:hover {
box-shadow: 0px 6px 20px 0px rgba(122, 140, 204, 0.30);
}
}
&-http {
width: 263px;
height: 142px;
@ -305,6 +312,10 @@ export default {
max-width: 30px !important;
}
}
&:hover {
box-shadow: 0px 6px 28px 0px rgba(122, 140, 204, 0.30);
}
}
}
.discovery-card-small {
@ -312,7 +323,7 @@ export default {
height: 80px;
cursor: pointer;
}
.discovery-card-small:hover,
.discovery-card-small-selected {
.discovery-top {
background-color: #f0f1f5;

View File

@ -25,18 +25,24 @@
:fileList="[]"
:beforeUpload="beforeUpload"
>
<a class="setting-discovery-header-action-btn">
<a-button
type="primary"
class="ops-button-ghost"
ghost
>
<a-icon type="upload" />
{{ $t('cmdb.ad.upload') }}
</a>
</a-button>
</a-upload>
<a
<a-button
type="primary"
class="ops-button-ghost"
ghost
@click="download"
class="setting-discovery-header-action-btn"
>
<a-icon type="download" />
{{ $t('cmdb.ad.download') }}
</a>
</a-button>
</div>
</div>
<div

View File

@ -46,10 +46,15 @@
<span @click="batchDelete">{{ $t('delete') }}</span>
<span>{{ $t('cmdb.ci.selectRows', { rows: selectedCount }) }}</span>
</span>
<div @click="clickLog" class="discovery-ci-log">
<a-button
type="primary"
ghost
class="ops-button-ghost discovery-ci-log"
@click="clickLog"
>
<ops-icon type="a-cmdb-log1" />
<span>{{ $t('cmdb.ad.log') }}</span>
</div>
</a-button>
</div>
<ops-table
show-overflow
@ -458,16 +463,7 @@ export default {
}
.discovery-ci-log {
cursor: pointer;
background-color: #F4F9FF;
border: solid 1px @primary-color_8;
color: @primary-color;
font-size: 12px;
padding: 5px 12px;
margin-left: auto;
display: flex;
align-items: center;
gap: 6px;
}
.checkbox-hover-table {

View File

@ -1,5 +1,5 @@
<template>
<div>
<div class="operation-history">
<a-card :bordered="false">
<a-tabs default-active-key="1">
<a-tab-pane key="1" :tab="$t('cmdb.history.ciChange')">
@ -40,4 +40,10 @@ export default {
}
</script>
<style></style>
<style lang="less" scoped>
.operation-history {
/deep/ .ant-tabs-tab {
padding-top: 0px;
}
}
</style>

View File

@ -1,6 +1,11 @@
<template>
<div>
<a-form :colon="false">
<a-form
:colon="false"
:labelCol="{ span:4 }"
:wrapperCol="{ span:20 }"
labelAlign="left"
>
<a-row :gutter="24">
<a-col
:sm="24"
@ -10,12 +15,7 @@
v-for="attr in attrList.slice(0,3)"
:key="attr.name"
>
<a-form-item
:label="attr.alias || attr.name "
:labelCol="{span:4}"
:wrapperCol="{span:20}"
labelAlign="right"
>
<a-form-item :label="attr.alias || attr.name">
<a-select
v-model="queryParams[attr.name]"
:placeholder="$t('cmdb.history.pleaseSelect')"
@ -57,12 +57,7 @@
:key="'expand_' + item.name"
v-for="item in attrList.slice(3)"
>
<a-form-item
:label="item.alias || item.name"
:label-col="{ span: 4 }"
:wrapper-col="{ span: 20 }"
labelAlign="right"
>
<a-form-item :label="item.alias || item.name">
<a-select
v-model="queryParams[item.name]"
:placeholder="$t('cmdb.history.pleaseSelect')"
@ -97,7 +92,7 @@
</template>
</a-row>
<a-row>
<a-col :span="24" :style="{ textAlign: 'right' , marginBottom: '10px' }">
<a-col :span="24" :style="{ textAlign: 'right', marginBottom: '20px', marginTop: '-4px'}">
<a-button type="primary" html-type="submit" @click="handleSearch">
{{ $t('query') }}
</a-button>

View File

@ -114,7 +114,11 @@
:placeholder="$t('cmdb.preference.searchPlaceholder')"
/>
<div v-for="group in filterCiTypeData" :key="group.id">
<p @click="changeGroupExpand(group)" :style="{ display: 'inline-block', cursor: 'pointer' }">
<p
@click="changeGroupExpand(group)"
:style="{ display: 'inline-block', cursor: 'pointer' }"
class="cmdb-preference-right-group-title"
>
<a-icon :type="expandKeys.includes(group.id) ? 'caret-down' : 'caret-right'" />{{ group.name }}({{
group.ci_types ? group.ci_types.length : 0
}})
@ -624,6 +628,16 @@ export default {
flex: 1;
height: 100%;
padding-top: 24px;
&-group-title {
width: 300px;
margin-bottom: 20px;
&:hover {
color: @primary-color;
}
}
.cmdb-preference-content {
display: flex;
flex-direction: row;

View File

@ -1697,6 +1697,10 @@ export default {
background-color: #fff;
padding: 20px;
border-radius: @border-radius-box;
.ant-tabs-tab {
padding-top: 0px;
}
}
}
</style>

View File

@ -19,13 +19,11 @@
>
<treeselect
:value="selectCITypeIds"
class="custom-treeselect custom-treeselect-bgcAndBorder filter-content-ciTypes"
class="custom-treeselect custom-treeselect-white filter-content-ciTypes"
:style="{
width: '400px',
zIndex: '1000',
'--custom-height': '32px',
'--custom-bg-color': '#FFF',
'--custom-border': '1px solid #d9d9d9',
'--custom-multiple-lineHeight': '32px',
}"
:multiple="true"

View File

@ -78,21 +78,3 @@ export default {
}
}
</script>
<style lang="less" scoped>
.save-condition-modal {
/deep/ .ant-modal-close-x {
width: 48px;
height: 48px;
line-height: 48px;
}
/deep/ .ant-modal-body {
padding: 24px 18px;
}
/deep/ .ant-modal-footer {
padding: 10px 18px 18px;
}
}
</style>

View File

@ -512,15 +512,31 @@ export default {
padding: 14px 18px;
width: 500px;
}
/deep/ .filter-content-ciTypes {
&:not(.vue-treeselect--disabled):not(.vue-treeselect--focused) {
.vue-treeselect__control {
border: solid 1px transparent;
&:hover {
border-color: @primary-color;
}
}
}
}
}
&-input {
width: 100%;
/deep/ .ant-input {
border: none;
border: solid 1px transparent;
box-shadow: none;
cursor: pointer;
&:hover {
border-color: @primary-color;
}
}
&-suffix {
@ -532,8 +548,12 @@ export default {
width: 100%;
/deep/ .ant-select-selection {
border: none;
border: solid 1px transparent;
box-shadow: none;
&:hover {
border-color: @primary-color;
}
}
}

View File

@ -164,8 +164,12 @@ export default {
/deep/ & > input {
height: 100%;
margin-left: 10px;
border: none;
border: solid 1px transparent;
box-shadow: none;
&:focus {
border-color: @primary-color;
}
}
}

View File

@ -116,6 +116,10 @@ body {
display: inline-flex;
align-items: center;
margin-right: 10px;
&:hover {
color: @primary-color;
}
}
.topmenu {
@ -560,7 +564,7 @@ body {
top: 10px;
border-radius: 5px;
&:hover {
background: #c1bfbf;
color: @primary-color;
}
.anticon {
margin-right: 0;
@ -661,7 +665,7 @@ body {
margin-right: 5px !important;
}
&:hover {
background-color: #e7e7e7;
background-color: @primary-color_5;
}
}
}
@ -869,6 +873,10 @@ body {
align-items: center;
height: 30px;
}
&:hover {
border-color: #597ef7 !important;
}
}
.vue-treeselect__placeholder,
.vue-treeselect__single-value {
@ -885,15 +893,46 @@ body {
border-radius: 2px !important;
border-color: #e4e7ed;
}
&:hover {
border-color: #597ef7 !important;
}
}
.custom-vue-treeselect__control(@bgColor:@primary-color_7,@border:none) {
.custom-vue-treeselect__control(
@bgColor: @primary-color_7,
@border: none,
@hoverBgColor: none,
@hoverBorderColor: none,
) {
.vue-treeselect__control {
background-color: @bgColor;
border: @border;
}
.custom-treeselect {
.mixin(@borderColor) when (iscolor(@borderColor)) {
border-color: @borderColor !important;
}
&:not(.vue-treeselect--disabled):not(.vue-treeselect--focused) {
.vue-treeselect__control {
&:hover {
background-color: if(iscolor(@hoverBgColor), @hoverBgColor, @bgColor);
.mixin(@hoverBorderColor)
}
}
}
}
.custom-treeselect {
.custom-vue-treeselect__control(
@primary-color_7,
none,
@primary-color_5,
none
);
.vue-treeselect__control {
.custom-vue-treeselect__control();
height: var(--custom-height) !important;
border-radius: 2px !important;
}
@ -909,12 +948,34 @@ body {
.vue-treeselect__limit-tip-text {
margin: 0;
}
&.vue-treeselect--focused {
.vue-treeselect__control {
border: 1px solid @primary-color;
}
}
}
// 自定义背景颜色和border
.custom-treeselect-bgcAndBorder .vue-treeselect__control {
.custom-vue-treeselect__control(var(--custom-bg-color), var(--custom-border));
.custom-treeselect-bgcAndBorder {
.custom-vue-treeselect__control(
var(--custom-bg-color),
var(--custom-border),
var(--custom-hover-bg-color),
var(--custom-hover-border-color)
);
}
// 白色背景
.custom-treeselect-white {
.custom-vue-treeselect__control(
#fff,
1px solid #d9d9d9,
none,
@primary-color
);
}
// 自定义背景颜色和border
.custom-treeselect.vue-treeselect--multi {
.vue-treeselect__multi-value,
@ -1025,6 +1086,20 @@ body {
background-color: @primary-color_7;
border: none;
}
&,
.ant-input,
.ant-time-picker-input {
&:not([disabled]) {
&:hover {
background-color: @primary-color_5;
}
&:focus {
background-color: @primary-color_7;
}
}
}
}
.ops-input.ant-input {
background-color: @primary-color_7;
@ -1163,15 +1238,33 @@ body {
}
// button
.ops-button-ghost.ant-btn-background-ghost.ant-btn-primary {
background-color: @primary-color_5!important;
.ops-button-ghost {
position: relative;
overflow: hidden;
&.ant-btn-background-ghost.ant-btn-primary {
border-color: @primary-color_8;
}
.ops-button-ghost.ant-btn-background-ghost.ant-btn-primary[disabled] {
background-color: @primary-color_5 !important;
box-shadow: none;
.btn-wave-hover(@primary-color_4);
&[disabled] {
border-color: #d9d9d9;
background-color: @primary-color_7!important;
}
&:not([disabled]):hover {
color: #3F75FF;
border-color: transparent;
}
}
}
.ant-btn-primary:not(.ant-btn-background-ghost) {
.btn-wave-hover(#3F75FF);
}
// button
.ant-btn.ant-btn-icon-only {
&:hover > i {
@ -1214,15 +1307,25 @@ body {
//modal
.ant-modal-content {
.ant-modal-close-x {
width: 56px;
height: 56px;
line-height: 56px;
}
.ant-modal-header {
border-bottom: none;
padding: 22px 22px;
.ant-modal-title {
padding-left: 10px;
border-left: 4px solid @primary-color;
}
}
.ant-modal-footer {
border-top: none;
padding: 16px 22px 22px;
}
}

View File

@ -70,3 +70,46 @@
background-color: @primary-color_3;
color: @primary-color;
}
.btn-wave-hover(
@hoverBgColor,
@bgZIndex: 0
) {
position: relative;
overflow: hidden;
& > * {
position: relative;
z-index: 1;
}
&:not([disabled])::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
z-index: @bgZIndex;
width: 100%;
aspect-ratio: 1/1;
border-radius: 50%;
background-color: @hoverBgColor;
-webkit-transform: scale(0) translate(-50%, -50%);
-ms-transform: scale(0) translate(-50%, -50%);
transform: scale(0) translate(-50%, -50%);
transform-origin: left top;
-webkit-transition: -webkit-transform 0.3s ease-out;
transition: -webkit-transform 0.3s ease-out;
transition: transform 0.3s ease-out;
transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
}
&:not([disabled]):hover {
&::after {
-webkit-transform: scale(2) translate(-50%, -50%);
-ms-transform: scale(2) translate(-50%, -50%);
transform: scale(2) translate(-50%, -50%);
}
}
}