1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192 |
- <script setup lang="ts">
- const modelValue = defineModel<boolean>();
- const handlerCloseDrawer = () => {
- modelValue.value = false;
- };
- </script>
- <template>
- <n-drawer v-model:show="modelValue" placement="right" default-width="100%">
- <n-drawer-content
- :body-style="{ padding: 0 }"
- :body-content-style="{ padding: 0 }"
- :footer-style="{background: '#fff', borderColor: '#eee'}"
- >
- <div class="menu-container">
- <ul class="logo-content">
- <li>
- <BaseIcon name="logo3" width="87" height="34" />
- </li>
- <li class="close-x" @click="handlerCloseDrawer">
- </li>
- </ul>
- <BaseMenu mode="vertical" @on-menu-item="() => modelValue = false "></BaseMenu>
- </div>
- <template #footer>
- <ul class="drawer-footer">
- <li>
- 010-63366692
- </li>
- <li>
- <BaseLang></BaseLang>
- </li>
- </ul>
- </template>
- </n-drawer-content>
- </n-drawer>
- </template>
- <style scoped lang="scss">
- $closeXSize: 20px;
- $closeXLine: 2px;
- .menu-container {
- height: 100%;
- // background: #1e2534;
- background: #fff;
- .logo-content {
- @include flex(x, center, between);
- height: 60px;
- padding: 0 10px;
- .img {
- width: 89px;
- height: 36px;
- }
- .close-x {
- position: relative;
- display: inline-block;
- width: $closeXSize;
- height: $closeXSize;
- cursor: pointer;
- &::before,
- &::after {
- position: absolute;
- left: 50%;
- width: 2px;
- height: 100%;
- margin-left: 1px;
- content: ' ';
- transform: rotate(-45deg);
- background: #1e2534;
- }
- &::after {
- transform: rotate(45deg);
- }
- }
- }
- }
- .drawer-footer {
- display: flex;
- align-items: center;
- justify-content: space-between;
- width: 100%;
- color: #161616;
- }
- </style>
|