fix(工作台): 帮助- hover 背景样式不对

This commit is contained in:
dataeaseShu 2024-11-25 11:10:07 +08:00
parent e7e202de84
commit 854090dd7f
3 changed files with 27 additions and 30 deletions

View File

@ -83,9 +83,8 @@ onMounted(() => {
<style lang="less">
.toolbox-top-popover {
height: 82px;
min-width: 208px !important;
padding: 16px !important;
padding: 8px !important;
display: flex;
.doc-card {
margin: auto;

View File

@ -29,17 +29,15 @@ const cardInfoList = [
:show-arrow="false"
popper-class="top-popover"
placement="bottom-end"
width="208"
width="210"
trigger="hover"
>
<el-row>
<top-doc-card
:span="12"
v-for="(item, index) in cardInfoList"
:key="index"
:card-info="item"
></top-doc-card>
</el-row>
<top-doc-card
:span="12"
v-for="(item, index) in cardInfoList"
:key="index"
:card-info="item"
></top-doc-card>
<template #reference>
<div
class="sys-setting"
@ -75,6 +73,11 @@ const cardInfoList = [
<style lang="less">
.top-popover {
padding: 0 0 16px 0 !important;
display: flex;
padding: 8px !important;
flex-wrap: wrap;
.doc-card {
margin: auto;
}
}
</style>

View File

@ -27,33 +27,28 @@ const openBlank = () => {
<template>
<div class="doc-card" @click="openBlank">
<el-row class="base-show">
<Icon class-name="item-top-icon"
><component class="svg-icon item-top-icon" :is="cardInfo.icon"></component
></Icon>
</el-row>
<el-row class="base-show show-content"> {{ cardInfo.name }}</el-row>
<div class="base-show">
<Icon><component class="svg-icon item-top-icon" :is="cardInfo.icon"></component></Icon>
</div>
<div class="base-show show-content">{{ cardInfo.name }}</div>
</div>
</template>
<style lang="less" scoped>
.doc-card {
padding-top: 2px;
margin-top: 16px;
margin-left: 16px;
width: 80px;
height: 50px;
padding: 8px 0;
width: 96px;
height: 66px;
cursor: pointer;
&:hover {
background-color: rgba(30, 39, 56, 0.05);
}
display: flex;
flex-direction: column;
align-items: center;
&:hover,
&:active {
background-color: rgba(30, 39, 56, 0.1);
background-color: #1f23291a;
border-radius: 4px;
}
}
.base-show {
justify-content: center;
}
.show-content {
font-size: 14px;