Init

src/assets/css/base.css

@@ -0,0 +1,63 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+html {
+    scroll-behavior: smooth;
+}
+
+em,
+i {
+    font-style: normal
+}
+
+li {
+    list-style: none
+}
+
+img {
+    border: 0;
+    vertical-align: middle
+}
+
+button {
+    cursor: pointer
+}
+
+a {
+    color: #666;
+    text-decoration: none
+}
+
+button,
+input {
+    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
+    border: 0;
+    outline: none;
+}
+
+body {
+    -webkit-font-smoothing: antialiased;
+    background-color: #fff;
+    font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
+    color: #666
+}
+
+.hide,
+.none {
+    display: none
+}
+
+.clearfix:after {
+    visibility: hidden;
+    clear: both;
+    display: block;
+    content: ".";
+    height: 0
+}
+
+.clearfix {
+    *zoom: 1
+}

src/assets/css/common.css

@@ -0,0 +1,106 @@
+:root {
+    --main-color: #00D4FF;
+    --background-color: #F5F5F5;
+    --font-main-color: #4D4D4D;
+    --font-secondary-color: #9E9E9E;
+}
+
+.body {
+    color: var(--font-main-color);
+    user-select: none;
+    min-width: 1800px;
+    min-height: 400px;
+}
+
+.fill {
+    height: 100%;
+    width: 100%;
+}
+
+.fill-with {
+    width: 100%;
+}
+
+.fill-height {
+    height: 100%;
+}
+
+.background-white {
+    background-color: white;
+}
+
+.center-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.vertical-center-box {
+    display: flex;
+    align-items: center;
+}
+
+.horizontal-center-box {
+    display: flex;
+    justify-content: center;
+}
+
+.icon-size-xs {
+    width: 16px;
+    height: 16px;
+}
+
+.icon-size-xs > use {
+    width: 16px;
+    height: 16px;
+}
+
+.icon-size-sm {
+    width: 20px;
+    height: 20px;
+}
+
+.icon-size-sm > use {
+    width: 20px;
+    height: 20px;
+}
+
+.icon-size-md {
+    width: 24px;
+    height: 24px;
+}
+
+.icon-size-md > use {
+    width: 24px;
+    height: 24px;
+}
+
+.icon-size-lg {
+    width: 32px;
+    height: 32px;
+}
+
+.icon-size-lg > use {
+    width: 32px;
+    height: 32px;
+}
+
+.icon-size-xl {
+    width: 64px;
+    height: 64px;
+}
+
+.icon-size-xl > use {
+    width: 64px;
+    height: 64px;
+}
+
+.icon-size-menu {
+    width: 23px;
+    height: 23px;
+}
+
+.icon-size-menu > use {
+    width: 23px;
+    height: 23px;
+}

src/assets/css/login.css

@@ -0,0 +1,63 @@
+.login-background {
+    display: flex;
+    height: 100vh;
+    width: 100vw;
+    justify-content: center;
+    align-items: center;
+    background-color: #B3E5FC;
+}
+
+.login-box {
+    display: flex;
+    width: 800px;
+    height: 450px;
+    background-color: #448AFF;
+}
+
+.login-box-left {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    flex: 2;
+}
+
+.login-box-left-text {
+    font-size: 3rem;
+    color: white;
+    font-weight: bold;
+}
+
+.login-box-left-text>div:last-child {
+    font-size: 1.8rem;
+    font-weight: normal;
+}
+
+.login-box-right {
+    position: relative;
+    height: 100%;
+    flex: 3;
+    background-color: white;
+}
+
+.login-from-text {
+    position: absolute;
+    top: 60px;
+    left: 40px;
+    font-weight: bold;
+    font-size: 2rem;
+}
+
+.login-from {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin-top: 30px;
+    width: 100%;
+    height: 100%;
+}
+
+.login-from-item {
+    width: 80%;
+}

src/assets/css/manager.css

@@ -0,0 +1,35 @@
+.top-bar {
+    display: flex;
+    justify-content: right;
+    background-color: #317ece;
+    padding: 10px 20px;
+}
+
+.top-bar > button:hover {
+    color: #F5F5F5;
+    border-color: #F5F5F5;
+}
+
+.search-row {
+    display: flex;
+    gap: 20px;
+    margin: 10px 10px;
+}
+
+.search-row > * {
+    display: flex;
+    gap: 5px;
+    align-items: center;
+    flex: 1;
+    font-size: 1rem;
+}
+
+.search-row > *:not(.operation-buttons) > *:last-child {
+    flex: 1;
+}
+
+.operation-buttons {
+    display: flex;
+    justify-content: right;
+    gap: 10px;
+}