go-pkg/wireguard-dashboard-admin
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 5 Wiki Activity

style: modify custom scrollbar

Browse Source
This commit is contained in:
张传龙 2022-07-21 17:47:11 +08:00
parent eb160731da
commit 80a5b7f053
3 changed files with 5 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/layout/index.vue
View File

@ -18,7 +18,7 @@
<n-layout bg="#f5f6fb" :style="`height: calc(100% - ${useTheme.header.height ?? 60}px)`"> <n-layout bg="#f5f6fb" :style="`height: calc(100% - ${useTheme.header.height ?? 60}px)`">
<AppTags v-if="useTheme.tags.visible" /> <AppTags v-if="useTheme.tags.visible" />
<AppMain <AppMain
class="cur-scroll border-t bc-eee" class="cus-scroll border-t bc-eee"
:style="{ :style="{
height: `calc(100% - ${useTheme.tags.visible ? useTheme.tags.height ?? 50 : 0}px)`, height: `calc(100% - ${useTheme.tags.visible ? useTheme.tags.height ?? 50 : 0}px)`,
overflow: 'auto', overflow: 'auto',

7
src/styles/index.scss
View File

@ -33,16 +33,15 @@ body {
} }
/* 自定义滚动条样式 */ /* 自定义滚动条样式 */
.cur-scroll { .cus-scroll {
&::-webkit-scrollbar { &::-webkit-scrollbar {
width: 6px; width: 8px;
height: 6px; height: 8px;
} }
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
background-color: transparent; background-color: transparent;
border-radius: 3px; border-radius: 3px;
} }
&::-webkit-scrollbar-corner { &::-webkit-scrollbar-corner {
background: #f6f6f6; background: #f6f6f6;
} }

2
src/views/login/index.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="login-bg cur-scroll" h-full flex-col overflow-auto> <div class="login-bg cus-scroll" h-full flex-col overflow-auto>
<div class="login-wrapper" m-auto p-15 f-c-c min-w-345 rounded-10> <div class="login-wrapper" m-auto p-15 f-c-c min-w-345 rounded-10>
<div w-380 hidden md:block px-20 py-35> <div w-380 hidden md:block px-20 py-35>
<img src="@/assets/images/login_banner.png" w-full alt="login_banner" /> <img src="@/assets/images/login_banner.png" w-full alt="login_banner" />