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;
+}

src/assets/svg/home.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 24 24"><g style="mix-blend-mode:passthrough"><g style="mix-blend-mode:passthrough"><path d="M11.2633,0.229798C11.6966,-0.0765992,12.3034,-0.0765992,12.7367,0.229798C12.7367,0.229798,23.5367,7.86616,23.5367,7.86616C23.829,8.07284,24,8.39063,24,8.72727C24,8.72727,24,20.7273,24,20.7273C24,21.5953,23.6207,22.4277,22.9456,23.0414C22.2704,23.6552,21.3548,24,20.4,24C20.4,24,3.6,24,3.6,24C2.64522,24,1.72955,23.6552,1.05442,23.0414C0.379284,22.4277,0,21.5953,0,20.7273C0,20.7273,0,8.72727,0,8.72727C0,8.39063,0.170968,8.07284,0.463271,7.86616C0.463271,7.86616,11.2633,0.229798,11.2633,0.229798C11.2633,0.229798,11.2633,0.229798,11.2633,0.229798ZM9.6,21.8182C9.6,21.8182,14.4,21.8182,14.4,21.8182C14.4,21.8182,14.4,13.0909,14.4,13.0909C14.4,13.0909,9.6,13.0909,9.6,13.0909C9.6,13.0909,9.6,21.8182,9.6,21.8182C9.6,21.8182,9.6,21.8182,9.6,21.8182ZM16.8,21.8182C16.8,21.8182,16.8,12,16.8,12C16.8,11.3975,16.2628,10.9091,15.6,10.9091C15.6,10.9091,8.4,10.9091,8.4,10.9091C7.73726,10.9091,7.2,11.3975,7.2,12C7.2,12,7.2,21.8182,7.2,21.8182C7.2,21.8182,3.6,21.8182,3.6,21.8182C3.28174,21.8182,2.97652,21.7032,2.75147,21.4987C2.52643,21.2941,2.4,21.0166,2.4,20.7273C2.4,20.7273,2.4,9.26081,2.4,9.26081C2.4,9.26081,12,2.47294,12,2.47294C12,2.47294,21.6,9.26081,21.6,9.26081C21.6,9.26081,21.6,20.7273,21.6,20.7273C21.6,21.0166,21.4735,21.2941,21.2485,21.4987C21.0235,21.7032,20.7182,21.8182,20.4,21.8182C20.4,21.8182,16.8,21.8182,16.8,21.8182C16.8,21.8182,16.8,21.8182,16.8,21.8182Z" fill-rule="evenodd" fill-opacity="1"/></g></g></svg>