From 1cb149e1949485d414d28d60fe392b18560b9e57 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=88=98=E5=8A=9B?= Date: Fri, 24 Sep 2021 17:28:32 +0800 Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E6=96=87=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .prettierrc | 4 + src/assets/images/avatar.png | Bin 0 -> 1865 bytes src/assets/images/logo.png | Bin 0 -> 8282 bytes src/assets/styles/sidebar.scss | 209 ++++++++++++++++++ src/layout/components/AppMain.vue | 0 src/layout/components/Settings/index.vue | 124 +++++++++++ src/layout/components/Sidebar/FixiOSBug.js | 7 + src/layout/components/Sidebar/Item.vue | 29 +++ src/layout/components/Sidebar/Link.vue | 0 src/layout/components/Sidebar/Logo.vue | 82 +++++++ src/layout/components/Sidebar/SidebarItem.vue | 0 src/layout/components/Sidebar/index.vue | 45 ++++ src/layout/components/index.js | 0 13 files changed, 500 insertions(+) create mode 100644 .prettierrc create mode 100644 src/assets/images/avatar.png create mode 100644 src/assets/images/logo.png create mode 100644 src/assets/styles/sidebar.scss create mode 100644 src/layout/components/AppMain.vue create mode 100644 src/layout/components/Settings/index.vue create mode 100644 src/layout/components/Sidebar/FixiOSBug.js create mode 100644 src/layout/components/Sidebar/Item.vue create mode 100644 src/layout/components/Sidebar/Link.vue create mode 100644 src/layout/components/Sidebar/Logo.vue create mode 100644 src/layout/components/Sidebar/SidebarItem.vue create mode 100644 src/layout/components/Sidebar/index.vue create mode 100644 src/layout/components/index.js diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..c3481a7 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,4 @@ +{ + "singleQuote": true, + "semi": false +} \ No newline at end of file diff --git a/src/assets/images/avatar.png b/src/assets/images/avatar.png new file mode 100644 index 0000000000000000000000000000000000000000..997732a452cdf6273ec7cd444dab69f1a4db4e48 GIT binary patch literal 1865 zcmZ`)c{tQtAODTza*@X1N<*aVWTtDs?k%!jYoY}WLiX#HElY(Ex>s3Bwz^c7C|g8? z;b+D&Gxl}JF!ptZGRzore|q14-ap>wIp_QRe3#GXoaa2}IVai9#_Wi|aRC4Tj#!u* z+e7}&;pFFrtneos1#&#zhSr7vQ1w`F-<=nVWj)O8tpOlX0RUp+0e}gmVwM0P6a@e) zZUCVF8~`N#%=>iF003aFc2*81P{Z`}G!{o_>mXq}h^-w&$bKIL2)A|+4l$mH#r-!= zAP}%P5*8%1f&?;|j0K@Q)Y%JxR*=|^?}cnDp45&%q~mbI{}JSHIN0t%NUE)aaEL*u z)OV;162Q(w1!#3h5DLF1ziWa7QvcZO+|nj(>)Q@ve}5k;O-)nx_Lz{u(C8#%caJi= zu)MO)V(rh)EwO(}N?EEEcPqIJCY&TU)1% zO-#4rNxQpy)cNHe(lDESu(-UovbxdH)i*Ug$6)Nzx4v#|f9oF{pPrfD+Wy)}8067L z2}4KxbBMjoC4gVuA*!&xV_X2x>YyQew!>{XkiHnIhi8sMb%8Z5G#cQ99jChoe)cI+=tDU$U#pbw*z+#CC8P=$~EobKL z=6ZU6$+Z$o5Lef3Y+t_pF>ZCMx;fa2` zW7kY|HT}}U2o-W?N)FJfO;ph&q$qW*DMJMTgr=v3sUS>^;Hg$sG#j%tlyR}-ZLAO? zN%GH~=ZvI z%3ipaV_Ex(faW=BW~>Y$cTlJk##zBHsnU!qe2@Kd7ND;W@gMtlm8a0)YTv~* zuUQ~+tkg92wzP86iLl@TH${)%UPs#?DefE99ukizBJlGmODZDaHT>EKPp-X%J<~ME zu%EL<$WOkF(hx<5J2gG{Xx`MRkgAt(Ub0!P>fyy_+ZHd+8l(&iVEy>-fSB6mslu_b zcjl>#yN@cXc>L}ex+338UtY^H5xm6xaQ1@_TkUzBlkQX9^tgJ&(+g6LPV?}OXYof3 zX-WZJFYvjxTf2(3FRR33Gqn?4gMPhV;7fKMGb67yNGBFd97_skgaju9mn9EG{UQWX zN=Xv@^eQQn8jYDtMSP)y~~w$$XsMrgg@)x+Kd)0m`id< zCn(vd&gN^;W7$)m#3d+K@QR@3*b@cYFR;WA!*sCdkIt6bp1h#w@|K6Ee~ff87(k~` z?`8W-)VJ-!p8Qm5M4_D;ub{XPnTns_|5&_a$C)~W-&xNpFcR(FfN z9jeTdW$_E7nXqiMpbO4Br^zw;wM^dqlVtl~a?Y>CKSmZNG{`nwP|vDy;@+~iB45cj zFV8sPdcxic*;Rz`mD)9}D&_HL4sN>;y_bK3z`jgC@tjk7!@oV-qa|}I);=1ot~0M? zBbC-;T{IKj}RiTaFBbVESTn0$!I z)eukj5HEd?+g^|Z&Z5wI>Sz=+98hQVwe<8gbyZO)eH1Fd=cU8{5CVfdeQ!qme}c4@ SBJ}40fQ5;T@p~h;xPJj%?#LPd literal 0 HcmV?d00001 diff --git a/src/assets/images/logo.png b/src/assets/images/logo.png new file mode 100644 index 0000000000000000000000000000000000000000..79805ce7616918b8d24dde30059dd49950017225 GIT binary patch literal 8282 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 OejQB%jf&g$QU3?^wKR(W literal 0 HcmV?d00001 diff --git a/src/assets/styles/sidebar.scss b/src/assets/styles/sidebar.scss new file mode 100644 index 0000000..17381fc --- /dev/null +++ b/src/assets/styles/sidebar.scss @@ -0,0 +1,209 @@ +#app { + + .main-container { + min-height: 100%; + transition: margin-left .28s; + margin-left: $sideBarWidth; + position: relative; + } + + .sidebar-container { + transition: width 0.28s; + width: $sideBarWidth !important; + background-color: $menuBg; + height: 100%; + position: fixed; + font-size: 0; + top: 0; + bottom: 0; + left: 0; + z-index: 1001; + overflow: hidden; + + // reset element-ui css + .horizontal-collapse-transition { + transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out; + } + + .scrollbar-wrapper { + overflow-x: hidden !important; + } + + .el-scrollbar__bar.is-vertical { + right: 0; + } + + .el-scrollbar { + height: 100%; + } + + &.has-logo { + .el-scrollbar { + height: calc(100% - 50px); + } + } + + .is-horizontal { + display: none; + } + + a { + display: inline-block; + width: 100%; + overflow: hidden; + } + + .svg-icon { + margin-right: 16px; + } + + .el-menu { + border: none; + height: 100%; + width: 100% !important; + } + + // menu hover + .submenu-title-noDropdown, + .el-submenu__title { + &:hover { + background-color: $menuHover !important; + } + } + + .is-active>.el-submenu__title { + color: $subMenuActiveText !important; + } + + & .nest-menu .el-submenu>.el-submenu__title, + & .el-submenu .el-menu-item { + min-width: $sideBarWidth !important; + background-color: $subMenuBg !important; + + &:hover { + background-color: $subMenuHover !important; + } + } + } + + .hideSidebar { + .sidebar-container { + width: 54px !important; + } + + .main-container { + margin-left: 54px; + } + + .submenu-title-noDropdown { + padding: 0 !important; + position: relative; + + .el-tooltip { + padding: 0 !important; + + .svg-icon { + margin-left: 20px; + } + } + } + + .el-submenu { + overflow: hidden; + + &>.el-submenu__title { + padding: 0 !important; + + .svg-icon { + margin-left: 20px; + } + + .el-submenu__icon-arrow { + display: none; + } + } + } + + .el-menu--collapse { + .el-submenu { + &>.el-submenu__title { + &>span { + height: 0; + width: 0; + overflow: hidden; + visibility: hidden; + display: inline-block; + } + } + } + } + } + + .el-menu--collapse .el-menu .el-submenu { + min-width: $sideBarWidth !important; + } + + // mobile responsive + .mobile { + .main-container { + margin-left: 0; + } + + .sidebar-container { + transition: transform .28s; + width: $sideBarWidth !important; + } + + &.hideSidebar { + .sidebar-container { + pointer-events: none; + transition-duration: 0.3s; + transform: translate3d(-$sideBarWidth, 0, 0); + } + } + } + + .withoutAnimation { + + .main-container, + .sidebar-container { + transition: none; + } + } +} + +// when menu collapsed +.el-menu--vertical { + &>.el-menu { + .svg-icon { + margin-right: 16px; + } + } + + .nest-menu .el-submenu>.el-submenu__title, + .el-menu-item { + &:hover { + // you can use $subMenuHover + background-color: $menuHover !important; + } + } + + // the scroll bar appears when the subMenu is too long + >.el-menu--popup { + max-height: 100vh; + overflow-y: auto; + + &::-webkit-scrollbar-track-piece { + background: #d3dce6; + } + + &::-webkit-scrollbar { + width: 6px; + } + + &::-webkit-scrollbar-thumb { + background: #99a9bf; + border-radius: 20px; + } + } +} diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue new file mode 100644 index 0000000..e69de29 diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue new file mode 100644 index 0000000..342d853 --- /dev/null +++ b/src/layout/components/Settings/index.vue @@ -0,0 +1,124 @@ + + + + + diff --git a/src/layout/components/Sidebar/FixiOSBug.js b/src/layout/components/Sidebar/FixiOSBug.js new file mode 100644 index 0000000..d0bf6da --- /dev/null +++ b/src/layout/components/Sidebar/FixiOSBug.js @@ -0,0 +1,7 @@ +// export default{ +// computed:{ +// device(){ +// return this.$store.state.app +// } +// } +// } \ No newline at end of file diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue new file mode 100644 index 0000000..b515f61 --- /dev/null +++ b/src/layout/components/Sidebar/Item.vue @@ -0,0 +1,29 @@ + diff --git a/src/layout/components/Sidebar/Link.vue b/src/layout/components/Sidebar/Link.vue new file mode 100644 index 0000000..e69de29 diff --git a/src/layout/components/Sidebar/Logo.vue b/src/layout/components/Sidebar/Logo.vue new file mode 100644 index 0000000..2f9ff19 --- /dev/null +++ b/src/layout/components/Sidebar/Logo.vue @@ -0,0 +1,82 @@ + + + + + diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue new file mode 100644 index 0000000..e69de29 diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue new file mode 100644 index 0000000..99b68ec --- /dev/null +++ b/src/layout/components/Sidebar/index.vue @@ -0,0 +1,45 @@ + + + diff --git a/src/layout/components/index.js b/src/layout/components/index.js new file mode 100644 index 0000000..e69de29