diff --git a/index.html b/index.html index 015919e..f8a332e 100644 --- a/index.html +++ b/index.html @@ -36,9 +36,7 @@ border-radius: 50%; width: 2.5em; height: 2.5em; - -webkit-animation-fill-mode: both; animation-fill-mode: both; - -webkit-animation: loadAnimation 1.8s infinite ease-in-out; animation: loadAnimation 1.8s infinite ease-in-out; } @@ -48,10 +46,7 @@ margin: 80px auto; position: relative; text-indent: -9999em; - -webkit-transform: translateZ(0); - -ms-transform: translateZ(0); transform: translateZ(0); - -webkit-animation-delay: -0.16s; animation-delay: -0.16s; top: 0; transform: translate(-50%, 0); @@ -66,7 +61,6 @@ .loader:before { left: -3.5em; - -webkit-animation-delay: -0.32s; animation-delay: -0.32s; } @@ -74,18 +68,6 @@ left: 3.5em; } - @-webkit-keyframes loadAnimation { - 0%, - 80%, - 100% { - box-shadow: 0 2.5em 0 -1.3em; - } - - 40% { - box-shadow: 0 2.5em 0 0; - } - } - @keyframes loadAnimation { 0%, 80%, diff --git a/src/style/element-plus.scss b/src/style/element-plus.scss index 8f8ae39..1c26648 100644 --- a/src/style/element-plus.scss +++ b/src/style/element-plus.scss @@ -36,17 +36,17 @@ z-index: 99999 !important; } -/* 重置button中icon的margin */ +/* 重置 el-button 中 icon 的 margin */ .reset-margin [class*="el-icon"] + span { margin-left: 2px !important; } -/* 自定义popover的类名 */ +/* 自定义 popover 的类名 */ .pure-popper { padding: 0 !important; } -/* nprogress适配ep的primary */ +/* nprogress 适配 element-plus 的主题色 */ #nprogress { & .bar { background-color: var(--el-color-primary) !important; diff --git a/src/style/index.scss b/src/style/index.scss index 380b56a..00995d9 100644 --- a/src/style/index.scss +++ b/src/style/index.scss @@ -5,36 +5,11 @@ @import "./dark.scss"; @import "./tailwind.css"; +/* 自定义全局 CssVar */ :root { --pure-transition-duration: 0.016s; } -body { - width: 100%; - height: 100%; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - text-rendering: optimizelegibility; - font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", - "Microsoft YaHei", "微软雅黑", Arial, sans-serif; -} - -html { - width: 100%; - height: 100%; - box-sizing: border-box; -} - -#app { - width: 100%; - height: 100%; -} - -/* 头部用户信息样式重置 */ -.hidden { - display: none !important; -} - /* 灰色模式 */ .html-grey { filter: grayscale(100%); @@ -45,15 +20,7 @@ html { filter: invert(80%); } -.pc-spacing { - margin: 10px; -} - -.mobile-spacing { - margin: 0; -} - -/* 重置vxe-table中pager样式 */ +/* 重置 vxe-table 中 pager 样式 */ .vxe-pager .vxe-pager--num-btn:not(.is--disabled).is--active { color: #fff !important; } diff --git a/src/style/reset.scss b/src/style/reset.scss index 11a18ba..2382a76 100644 --- a/src/style/reset.scss +++ b/src/style/reset.scss @@ -1,67 +1,49 @@ -/* -1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) -2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) -*/ - *, ::before, ::after { - box-sizing: border-box; /* 1 */ - border-width: 0; /* 2 */ - border-style: solid; /* 2 */ - border-color: currentColor; /* 2 */ + box-sizing: border-box; + border-width: 0; + border-style: solid; + border-color: currentColor; } -/* -1. Use a consistent sensible line-height in all browsers. -2. Prevent adjustments of font size after orientation changes in iOS. -3. Use a more readable tab size. -4. Use the user's configured `sans` font-family by default. -*/ +#app { + width: 100%; + height: 100%; +} html { - line-height: 1.5; /* 1 */ - -webkit-text-size-adjust: 100%; /* 2 */ - -moz-tab-size: 4; /* 3 */ - tab-size: 4; /* 3 */ - font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", - "Microsoft YaHei", "微软雅黑", Arial, sans-serif; + line-height: 1.5; + -webkit-text-size-adjust: 100%; + -moz-tab-size: 4; + tab-size: 4; + width: 100%; + height: 100%; + box-sizing: border-box; } -/* -1. Remove the margin in all browsers. -2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. -*/ - body { - margin: 0; /* 1 */ - line-height: inherit; /* 2 */ + margin: 0; + line-height: inherit; + width: 100%; + height: 100%; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + text-rendering: optimizelegibility; + font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", + "Microsoft YaHei", "微软雅黑", Arial, sans-serif; } -/* -1. Add the correct height in Firefox. -2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) -3. Ensure horizontal rules are visible by default. -*/ - hr { - height: 0; /* 1 */ - color: inherit; /* 2 */ - border-top-width: 1px; /* 3 */ + height: 0; + color: inherit; + border-top-width: 1px; } -/* -Add the correct text decoration in Chrome, Edge, and Safari. -*/ - abbr:where([title]) { text-decoration: underline dotted; } -/* -Remove the default font size and weight for headings. -*/ - h1, h2, h3, @@ -72,50 +54,29 @@ h6 { font-weight: inherit; } -/* -Reset links to optimize for opt-in styling instead of opt-out. -*/ - a { color: inherit; text-decoration: inherit; } -/* -Add the correct font weight in Edge and Safari. -*/ - b, strong { font-weight: bolder; } -/* -1. Use the user's configured `mono` font family by default. -2. Correct the odd `em` font sizing in all browsers. -*/ - code, kbd, samp, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, - "Liberation Mono", "Courier New", monospace; /* 1 */ - font-size: 1em; /* 2 */ + "Liberation Mono", "Courier New", monospace; + font-size: 1em; } -/* -Add the correct font size in all browsers. -*/ - small { font-size: 80%; } -/* -Prevent `sub` and `sup` elements from affecting the line height in all browsers. -*/ - sub, sup { font-size: 75%; @@ -132,132 +93,73 @@ sup { top: -0.5em; } -/* -1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) -2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) -3. Remove gaps between table borders by default. -*/ - table { - text-indent: 0; /* 1 */ - border-color: inherit; /* 2 */ - border-collapse: collapse; /* 3 */ + text-indent: 0; + border-color: inherit; + border-collapse: collapse; } -/* -1. Change the font styles in all browsers. -2. Remove the margin in Firefox and Safari. -3. Remove default padding in all browsers. -*/ - button, input, optgroup, select, textarea { - font-family: inherit; /* 1 */ - font-size: 100%; /* 1 */ - line-height: inherit; /* 1 */ - color: inherit; /* 1 */ - margin: 0; /* 2 */ - padding: 0; /* 3 */ + font-family: inherit; + font-size: 100%; + line-height: inherit; + color: inherit; + margin: 0; + padding: 0; } -/* -Remove the inheritance of text transform in Edge and Firefox. -*/ - button, select { text-transform: none; } -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Remove default button styles. -*/ - button, [type="button"], [type="reset"], [type="submit"] { - -webkit-appearance: button; /* 1 */ - background-image: none; /* 2 */ + -webkit-appearance: button; + background-image: none; } -/* -Use the modern Firefox focus style for all focusable elements. -*/ - :-moz-focusring { outline: auto; } -/* -Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) -*/ - :-moz-ui-invalid { box-shadow: none; } -/* -Add the correct vertical alignment in Chrome and Firefox. -*/ - progress { vertical-align: baseline; } -/* -Correct the cursor style of increment and decrement buttons in Safari. -*/ - ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } -/* -1. Correct the odd appearance in Chrome and Safari. -2. Correct the outline style in Safari. -*/ - [type="search"] { - -webkit-appearance: textfield; /* 1 */ - outline-offset: -2px; /* 2 */ + -webkit-appearance: textfield; + outline-offset: -2px; } -/* -Remove the inner padding in Chrome and Safari on macOS. -*/ - ::-webkit-search-decoration { -webkit-appearance: none; } -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Change font properties to `inherit` in Safari. -*/ - ::-webkit-file-upload-button { - -webkit-appearance: button; /* 1 */ - font: inherit; /* 2 */ + -webkit-appearance: button; + font: inherit; } -/* -Add the correct display in Chrome and Safari. -*/ - summary { display: list-item; } -/* -Removes the default spacing and border for appropriate elements. -*/ - blockquote, dl, dd, @@ -291,47 +193,25 @@ menu { padding: 0; } -/* -Prevent resizing textareas horizontally by default. -*/ - textarea { resize: vertical; } -/* -1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) -2. Set the default placeholder color to the user's configured gray 400 color. -*/ - input::placeholder, textarea::placeholder { - opacity: 1; /* 1 */ - color: #9ca3af; /* 2 */ + opacity: 1; + color: #9ca3af; } -/* -Set the default cursor for buttons. -*/ - button, [role="button"] { cursor: pointer; } -/* -Make sure disabled buttons don't get the pointer cursor. -*/ :disabled { cursor: default; } -/* -1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) -2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) - This can trigger a poorly considered lint error in some tools but is included by design. -*/ - img, svg, video, @@ -340,24 +220,16 @@ audio, iframe, embed, object { - display: block; /* 1 */ - vertical-align: middle; /* 2 */ + display: block; + vertical-align: middle; } -/* -Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) -*/ - img, video { max-width: 100%; height: auto; } -/* -Ensure the default browser behavior of the `hidden` attribute. -*/ - [hidden] { display: none; } diff --git a/src/style/sidebar.scss b/src/style/sidebar.scss index df4f7db..79d2777 100644 --- a/src/style/sidebar.scss +++ b/src/style/sidebar.scss @@ -1,6 +1,5 @@ -@mixin merge-style( - /* vertical模式下主体内容距离网页文档左侧的距离 */ $sideBarWidth -) { +/* $sideBarWidth: vertical 模式下主体内容距离网页文档左侧的距离 */ +@mixin merge-style($sideBarWidth) { $menuActiveText: #7a80b4; @media screen and (min-width: 150px) and (max-width: 420px) { @@ -26,7 +25,7 @@ .main-container { height: 100vh; min-height: 100%; - /* main-content属性动画 */ + /* main-content 属性动画 */ transition: margin-left var(--pure-transition-duration); margin-left: $sideBarWidth; position: relative; @@ -44,7 +43,7 @@ right: 0; z-index: 998; width: calc(100% - 210px); - /* fixed-header属性左上角动画 */ + /* fixed-header 属性左上角动画 */ transition: width var(--pure-transition-duration); } @@ -324,7 +323,7 @@ } } - /* vertical菜单折叠 */ + /* vertical 菜单折叠 */ .el-menu--vertical { .el-menu--popup { background-color: $subMenuBg !important; @@ -398,7 +397,7 @@ } } - /* horizontal菜单 */ + /* horizontal 菜单 */ .el-menu--horizontal { & > .el-sub-menu .el-sub-menu__icon-arrow { position: static !important; @@ -422,7 +421,7 @@ } } - /* 无子菜单时激活border-bottom */ + /* 无子菜单时激活 border-bottom */ .router-link-exact-active > .submenu-title-noDropdown { height: 60px; border-bottom: 2px solid var(--el-menu-active-color); diff --git a/tsconfig.json b/tsconfig.json index 2193d2c..e55c4f3 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -42,5 +42,5 @@ "mock/*.ts", "vite.config.ts" ], - "exclude": ["node_modules", "dist", "**/*.js"] + "exclude": ["node_modules", "dist", "**/*.js", "index.html"] }