fix(工作台): 帮助- hover 背景样式不对
This commit is contained in:
parent
e7e202de84
commit
854090dd7f
@ -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;
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user