初始化项目

src/style/base.scss

@@ -0,0 +1,65 @@
+.clearfix:after {
+    content: '';
+    display: block;
+    height: 0;
+    visibility: hidden;
+    clear: both;
+}
+
+.fl-left {
+    float: left;
+}
+
+.fl-right {
+    float: right;
+}
+
+.mg {
+    margin: 10px !important;
+}
+
+.left-mg-xs {
+    margin-left: 6px !important;
+}
+
+.left-mg-sm {
+    margin-left: 10px !important;
+}
+
+.left-mg-md {
+    margin-left: 14px !important;
+}
+
+.top-mg-lg {
+    margin-top: 20px !important;
+}
+
+.tb-mg-lg {
+    margin: 20px 0 !important;
+}
+
+.bottom-mg-lg {
+    margin-bottom: 20px !important;
+}
+
+.left-mg-lg {
+    margin-left: 18px !important;
+}
+
+.title-1 {
+    text-align: center;
+    font-size: 32px;
+}
+
+.title-3 {
+    text-align: center;
+}
+
+.keyword{
+  width: 220px;
+  margin: 0 0 0 30px;
+}
+
+#nprogress .bar {
+    background: #4D70FF !important; //自定义颜色
+}

src/style/basics.scss

@@ -0,0 +1,36 @@
+// basice
+$font-size: 14px;
+$icon-size:18px;
+$active-color:#1890ff;
+$bg-main:#f0f2f5;
+$border-color: #f4f4f4;
+$white-bg:#fff;
+$el-icon-small:30px;
+$el-icon-mini:24px;
+// aside
+$width-aside:220px;
+$width-hideside-aside:54px;
+$width-mobile-aside:210px;
+$color-aside:rgba(255, 255, 255, .9);
+$icon-arrow-size-aside:12px;
+$width-submenu-aside:55px;
+$height-aside-tilte:60px;
+$height-aside-img:30px;
+$width-aside-img:30px;
+// header
+$height-header: 60px;
+// nav-scroll
+$height-nav-scroll:40px;
+$active-bg-tabs-item-nav-scroll:#409eff;
+$bg-tabs-item-nav-scroll:#ddd;
+// table
+$bg-color-table-thead:#fafafa;
+$border-color-table:#ededed;
+$height-table-cell:45px;
+$color-table-tbody:#595959;
+$color-table-thead:#262626;
+// dashboard
+$height-car:68px;
+// mobile
+$padding-xs: 5px;
+$margin-xs: 5px;

src/style/button.scss

@@ -0,0 +1,9 @@
+.sticky-button {
+  position: sticky;
+  top: 2px;
+  z-index: 2;
+  background-color: #fff;
+}
+.fitler{
+  width: 60%;
+}

src/style/element_visiable.scss

@@ -0,0 +1,227 @@
+/* 改变主题色变量 */
+
+#app {
+    .el-button {
+        font-weight: 400;
+        border-radius: 2px;
+    }
+}
+
+.el-dialog {
+    border-radius: 2px;
+}
+
+::-webkit-scrollbar-track-piece {
+    background-color: #f8f8f8;
+}
+
+::-webkit-scrollbar {
+    width: 9px;
+    height: 9px;
+}
+
+::-webkit-scrollbar-thumb {
+    background-color: #dddddd;
+    background-clip: padding-box;
+    min-height: 28px;
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background-color: #bbb;
+}
+
+.el-button--primary {
+    --el-button-font-color: #ffffff;
+    --el-button-background-color: #4D70FF;
+    --el-button-border-color: #4D70FF;
+    --el-button-hover-color: #0d84ff;
+    --el-button-active-font-color: #e6e6e6;
+    --el-button-active-background-color: #0d84ff;
+    --el-button-active-border-color: #0d84ff;
+}
+
+.el-button--primary {
+    --el-button-font-color: #ffffff;
+    --el-button-background-color: #4D70FF;
+    --el-button-border-color: #4D70FF;
+    --el-button-hover-color: #0d84ff;
+    --el-button-active-font-color: #e6e6e6;
+    --el-button-active-background-color: #0d84ff;
+    --el-button-active-border-color: #0d84ff;
+}
+
+:root {
+    --el-color-primary: #4D70FF;
+    --el-menu-item-height:56px ;
+}
+
+.gva-search-box {
+    .el-collapse {
+        border: none;
+        .el-collapse-item__header,
+        .el-collapse-item__wrap {
+            border-bottom: none;
+        }
+    }
+    padding: 24px;
+    padding-bottom: 2px;
+    background-color: #fff;
+    border-radius: 2px;
+    margin-bottom: 12px;
+}
+
+.el-form--inline{
+    .el-form-item{
+        margin-right: 24px;
+    }
+}
+
+.el-input__inner{
+    height: 40px;
+    line-height: 40px;
+}
+
+.gva-form-box {
+    padding: 24px;
+    background-color: #fff;
+    border-radius: 2px;
+}
+
+.gva-table-box {
+    padding: 24px;
+    background-color: #fff;
+    border-radius: 2px;
+}
+
+.gva-pagination {
+    display: flex;
+    justify-content: flex-end;
+    .el-pagination__editor {
+        .el-input__inner {
+            height: 32px;
+        }
+    }
+    .el-pagination__total {
+        line-height: 32px !important;
+    }
+    //小屏幕不显示
+    @media (max-width: 750px) {
+        .el-pagination__sizes{
+            display: none !important;
+        }
+    }
+    .btn-prev {
+        padding-right: 6px;
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        width: 32px;
+        height: 32px;
+    }
+    .number {
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        width: 32px;
+        height: 32px;
+    }
+    .btn-quicknext {
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        width: 32px;
+        height: 32px;
+    }
+    .btn-next {
+        padding-left: 6px;
+        width: 32px;
+        height: 32px;
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+    }
+    // 兼容久版用户升级
+    .active {
+        background: #4D70FF;
+        border-radius: 2px;
+        color: #ffffff !important;
+    }
+    .el-pager li.active+li {
+        border-left: 1px solid #ddd !important;
+    }
+    // end
+
+
+    .is-active {
+        background: #4D70FF;
+        border-radius: 2px;
+        color: #ffffff !important;
+    }
+    .el-pager li.is-active+li {
+        border-left: 1px solid #ddd !important;
+    }
+    .el-pagination__sizes {
+        .el-input {
+            .el-input__suffix {
+                margin-top: 2px;
+            }
+        }
+    }
+}
+
+.el-button--small {
+    min-height: 32px;
+    font-size: 12px !important;
+}
+
+.el-checkbox{
+    height: auto;
+}
+
+.el-button {
+    padding: 8px 16px;
+    border-radius: 2px;
+    &.el-button--text {
+        padding: 8px 0;
+    }
+}
+
+.el-dialog {
+    padding: 12px;
+    .el-dialog__body {
+        padding: 12px 6px;
+    }
+    .el-dialog__header {
+        .el-dialog__title {
+            font-size: 14px;
+            font-weight: 500;
+        }
+        padding: 2px 20px 12px 20px;
+        border-bottom: 1px solid #E4E4E4;
+    }
+    .el-dialog__footer {
+        padding: 0 16px 16px 0;
+        .dialog-footer {
+            .el-button {
+                padding-left: 24px;
+                padding-right: 24px;
+            }
+            .el-button+.el-button {
+                margin-left: 30px;
+            }
+        }
+    }
+}
+
+.el-drawer__body {
+    padding: 0;
+}
+
+.el-date-editor .el-range-separator {
+    line-height: 24px;
+}
+
+.el-select .el-input .el-select__caret.el-icon {
+    height: 38px;
+}

src/style/iconfont.css

@@ -0,0 +1,47 @@
+@font-face {
+    font-family: 'gvaIcon';
+    src: url('data:font/ttf;charset=utf-8;base64,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AAAAAAALABMBkAADAAEECQAAACYAAAADAAEECQABABAAPAADAAEECQACAA4AVwADAAEECQADABAAbwADAAEECQAEABAAigADAAEECQAFABYApQADAAEECQAGABAAyQADAAEECQAKAFYA5AADAAEECQALACYBaABDAHIAZQBhAHQAZQBkACAAYgB5ACAAaQBjAG8AbgBmAG8AbgB0AABDcmVhdGVkIGJ5IGljb25mb250AABpAGMAbwBuAGYAbwBuAHQAAGljb25mb250AABSAGUAZwB1AGwAYQByAABSZWd1bGFyAABpAGMAbwBuAGYAbwBuAHQAAGljb25mb250AABpAGMAbwBuAGYAbwBuAHQAAGljb25mb250AABWAGUAcgBzAGkAbwBuACAAMQAuADAAAFZlcnNpb24gMS4wAABpAGMAbwBuAGYAbwBuAHQAAGljb25mb250AABHAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAHMAdgBnADIAdAB0AGYAIABmAHIAbwBtACAARgBvAG4AdABlAGwAbABvACAAcAByAG8AagBlAGMAdAAuAABHZW5lcmF0ZWQgYnkgc3ZnMnR0ZiBmcm9tIEZvbnRlbGxvIHByb2plY3QuAABoAHQAdABwADoALwAvAGYAbwBuAHQAZQBsAGwAbwAuAGMAbwBtAABodHRwOi8vZm9udGVsbG8uY29tAAAAAAIAAAAAAAAACgAAAAAAAQAAAAAAAAAAAAAAAAAAAAAACwAAAAEAAgECAQMBBAEFAQYBBwEIAQkRYXJyb3ctZG91YmxlLWxlZnQSYXJyb3ctZG91YmxlLXJpZ2h0EGN1c3RvbWVyLXNlcnZpY2URZnVsbHNjcmVlbi1leHBhbmQRZnVsbHNjcmVlbi1zaHJpbmsGcHJvbXB0B3JlZnJlc2gGc2VhcmNoAAAAAf//AAIAAQAAAAwAAAAWAAAAAgABAAMACgABAAQAAAACAAAAAAAAAAEAAAAA1aQnCAAAAADeWFEjAAAAAN5YUSM=') format('truetype');
+    font-weight: 600;
+    font-style: normal;
+    font-display: swap;
+}
+.gvaIcon {
+    font-family: "gvaIcon" !important;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 800;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+.gvaIcon-arrow-double-left:before {
+    content: "\e665";
+  }
+
+.gvaIcon-arrow-double-right:before {
+    content: "\e666";
+}
+
+.gvaIcon-fullscreen-shrink:before {
+    content: "\e676";
+}
+.gvaIcon-customer-service:before {
+    content: "\e66a";
+  }
+
+.gvaIcon-fullscreen-expand:before {
+    content: "\e675";
+}
+
+.gvaIcon-prompt:before {
+    content: "\e67b";
+}
+
+.gvaIcon-refresh:before {
+    content: "\e67c";
+}
+
+.gvaIcon-search:before {
+    content: "\e67d";
+}
+

src/style/mobile.scss

@@ -0,0 +1,77 @@
+@import '@/style/basics.scss';
+@media screen and (min-width: 320px)and (max-width: 750px) {
+    .el-header {
+        padding: 0 $padding-xs;
+    }
+    .layout-cont {
+        .main-cont {
+            .breadcrumb {
+                padding: 0 $padding-xs;
+            }
+        }
+    }
+    .layout-cont {
+        .right-box {
+            margin-right: $margin-xs;
+        }
+    }
+    .el-main {
+        .admin-box {
+            margin-left: 0;
+            margin-right: 0;
+        }
+        .big.admin-box {
+            padding: 0;
+        }
+        .big {
+            .bottom {
+                .chart-player {
+                    height: auto!important;
+                    margin-bottom: 15px;
+                }
+                .todoapp {
+                    background-color: #fff;
+                    padding-bottom: 10px;
+                }
+            }
+        }
+    }
+    .card .car-left,
+    .card .car-right {
+        width: 100%;
+        height: 100%;
+    }
+    .card {
+        padding-left: $padding-xs;
+        padding-right: $padding-xs;
+    }
+    .card {
+        .text {
+            width: 100%;
+            h4 {
+                white-space: break-spaces;
+            }
+        }
+    }
+    .shadow {
+        margin-left: 4px;
+        margin-right: 4px;
+        .grid-content {
+            margin-bottom: 10px;
+            padding: 0;
+        }
+    }
+    .el-dialog {
+        width: 90%;
+    }
+    .el-transfer {
+        .el-transfer-panel {
+            width: 40%;
+            display: inline-block;
+        }
+        .el-transfer__buttons {
+            padding: 0 5px;
+            display: inline-block;
+        }
+    }
+}

src/style/newLogin.scss

@@ -0,0 +1,105 @@
+#userLayout {
+    margin: 0;
+    padding: 0;
+    background-image: url("@/assets/login_background.jpg");
+    background-size: cover;
+    width: 100%;
+    height: 100%;
+    position: relative;
+    .input-icon {
+        padding-right: 6px;
+        padding-top: 4px;
+    }
+    .login_panel {
+        position: absolute;
+        top: 3vh;
+        left: 2vw;
+        width: 96vw;
+        height: 94vh;
+        background-color: rgba(255, 255, 255, .8);
+        border-radius: 10px;
+        display: flex;
+        align-items: center;
+        justify-content: space-evenly;
+        .login_panel_right {
+            background-image: url("@/assets/login_left.svg");
+            background-size: cover;
+            width: 40%;
+            height: 60%;
+            float: right !important;
+        }
+        .login_panel_form {
+            width: 420px;
+            background-color: #fff;
+            padding: 40px 40px 40px 40px;
+            border-radius: 10px;
+            box-shadow: 2px 3px 7px rgba(0, 0, 0, .2);
+            .login_panel_form_title {
+                display: flex;
+                align-items: center;
+                margin: 30px 0;
+                .login_panel_form_title_logo {
+                    width: 90px;
+                    height: 72px;
+                }
+                .login_panel_form_title_p {
+                    font-size: 40px;
+                    padding-left: 20px;
+                }
+            }
+            .vPicBox {
+                display: flex;
+                justify-content: space-between;
+                width: 100%;
+            }
+            .vPic {
+                width: 33%;
+                height: 38px;
+                background: #ccc;
+                img {
+                    width: 100%;
+                    height: 100%;
+                    vertical-align: middle;
+                }
+            }
+        }
+        .login_panel_foot {
+            position: absolute;
+            bottom: 20px;
+            .links {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                .link-icon {
+                    width: 30px;
+                    height: 30px;
+                }
+            }
+            .copyright {
+                color: #777777;
+                margin-top: 5px;
+            }
+        }
+    }
+}
+
+//小屏幕不显示右侧，将登录框居中
+@media (max-width: 750px) {
+    .login_panel_right {
+        display: none;
+    }
+    .login_panel {
+        width: 100vw;
+        height: 100vh;
+        top: 0;
+        left: 0;
+    }
+    .login_panel_form {
+        width: 100%;
+    }
+}
+
+
+/*
+  powerBy : bypanghu@163.com
+*/