style: 修改移入样式.

This commit is contained in:
lijiahangmax
2024-01-21 21:01:24 +08:00
parent e569bafd3d
commit 12901bd8f8

View File

@@ -17,6 +17,7 @@
<div class="actions-wrapper"> <div class="actions-wrapper">
<a-row :gutter="[8, 8]"> <a-row :gutter="[8, 8]">
<a-col :span="12" <a-col :span="12"
class="action-item-wrapper"
v-for="(action, index) in ActionBarItems" v-for="(action, index) in ActionBarItems"
:key="index"> :key="index">
<div class="action-item" @click="clickAction(action.item)"> <div class="action-item" @click="clickAction(action.item)">
@@ -116,18 +117,37 @@
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@container-width: 418px;
@wrapper-margin-r: 32px;
@wrapper-width: (@container-width - @wrapper-margin-r) / 2px;
.setting-body { .setting-body {
display: flex; display: flex;
} }
.actions-container { .actions-container {
width: 418px; width: @container-width;
height: auto; height: auto;
.actions-wrapper { .actions-wrapper {
width: @wrapper-width;
padding-right: 8px; padding-right: 8px;
margin-right: 32px; margin-right: @wrapper-margin-r;
}
.action-item-wrapper {
transition: all 0.2s;
width: 185px;
border-radius: 4px;
&:hover {
width: 192px;
padding: 4px 0 !important;
.action-item{
background: var(--color-fill-3);
}
}
} }
.action-item { .action-item {
@@ -136,13 +156,8 @@
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
border-radius: 4px; border-radius: 4px;
background-color: var(--color-fill-2); width: inherit;
transition: transform 0.3s ease; background: var(--color-fill-2);
will-change: transform;
&:hover {
transform: scale(1.04);
}
} }
.action-icon { .action-icon {