113 lines
2.6 KiB
Vue
113 lines
2.6 KiB
Vue
<!-- SidePanelItem.vue -->
|
|
<template>
|
|
<div class="rightContentDrawer">
|
|
<div @click="handleToggle" class="drawerController1" v-if="!uiStore.drawerOpen">
|
|
<img src="../../assets/components/arrow-left.png" alt="" />
|
|
</div>
|
|
|
|
<!-- 使用 Vue 的 Transition 组件控制动画 -->
|
|
<transition name="drawer-slide">
|
|
<a-drawer
|
|
:get-container="false"
|
|
:style="{ position: 'relative' }"
|
|
v-model:open="uiStore.drawerOpen"
|
|
:mask="false"
|
|
placement="right"
|
|
width="450"
|
|
:closable="false"
|
|
:headerStyle="{ color: '#FAFCFE' }"
|
|
>
|
|
<div @click="handleToggle" class="drawerController">
|
|
<img src="../../assets/components/arrow-right.png" alt="" />
|
|
</div>
|
|
<div style="padding:16px 8px 0;" class="text_she">
|
|
<slot />
|
|
</div>
|
|
</a-drawer>
|
|
</transition>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, defineOptions, watch } from "vue";
|
|
import { useUiStore } from "@/store/modules/ui";
|
|
import { set } from "nprogress";
|
|
|
|
// 定义组件名 (便于调试和递归)
|
|
defineOptions({
|
|
name: "rightDrawer",
|
|
});
|
|
|
|
const uiStore = useUiStore();
|
|
|
|
const handleToggle = () => {
|
|
uiStore.toggleDrawer()
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.rightContentDrawer {
|
|
width: 450px;
|
|
height: 100%;
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
|
|
.drawerController1 {
|
|
width: 18px;
|
|
position: absolute;
|
|
right: -2px;
|
|
cursor: pointer;
|
|
z-index: 10;
|
|
height: 88px;
|
|
line-height: 88px;
|
|
top: 45%;
|
|
vertical-align: middle;
|
|
background-image: url(../../assets/components/bg-toggle.e1dabcf3.svg);
|
|
background-repeat: no-repeat;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
.ant-drawer {
|
|
margin: 3px 0px;
|
|
.ant-drawer-content {
|
|
overflow: visible;
|
|
}
|
|
|
|
.ant-drawer-content-wrapper {
|
|
border: 2px solid #c5d6e2 !important;
|
|
box-shadow: 3px 3px 3px 9px #e5edf3 !important;
|
|
}
|
|
|
|
.ant-drawer-body {
|
|
padding: 0px !important;
|
|
}
|
|
}
|
|
|
|
.drawerController {
|
|
width: 18px;
|
|
position: absolute;
|
|
right: 10px;
|
|
cursor: pointer;
|
|
z-index: 10;
|
|
height: 88px;
|
|
line-height: 88px;
|
|
top: 45%;
|
|
left: -18px;
|
|
vertical-align: middle;
|
|
background-image: url(../../assets/components/bg-toggle.e1dabcf3.svg);
|
|
background-repeat: no-repeat;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.text_she{
|
|
font-size: 14px;
|
|
color:#262626;
|
|
font-variant: tabular-nums;
|
|
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
|
|
}
|
|
</style>
|