优化组件

web/monit_web/src/App.vue

@@ -1,21 +1,12 @@
-<script setup>
-// This starter template is using Vue 3 <script setup> SFCs
-// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
-import HelloWorld from './components/HelloWorld.vue'
-</script>
-
 <template>
- <img alt="Vue logo" src="./assets/logo.png" />
- <HelloWorld msg="Hello Vue 3 + Vite" />
+ <router-view />
 </template>
 
+<script>
+export default {};
+</script>
+
 <style>
-#app {
- font-family: Avenir, Helvetica, Arial, sans-serif;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- text-align: center;
- color: #2c3e50;
- margin-top: 60px;
-}
+@import "./assets/css/main.css";
+@import "./assets/css/color-dark.css";
 </style>

web/monit_web/src/assets/css/color-dark.css

@@ -0,0 +1,28 @@
+.header{
+ background-color: #242f42;
+}
+.login-wrap{
+ background: #324157;
+}
+.plugins-tips{
+ background: #eef1f6;
+}
+.plugins-tips a{
+ color: #20a0ff;
+}
+.el-upload--text em {
+ color: #20a0ff;
+}
+.pure-button{
+ background: #20a0ff;
+}
+.tags-li.active {
+ border: 1px solid #409EFF;
+ background-color: #409EFF;
+}
+.message-title{
+ color: #20a0ff;
+}
+.collapse-btn:hover{
+ background: rgb(40,52,70);
+}

web/monit_web/src/assets/css/icon.css

@@ -0,0 +1,4 @@
+[class*=" el-icon-lx"],
+[class^=el-icon-lx] {
+ font-family: lx-iconfont !important;
+}

web/monit_web/src/assets/css/main.css

@@ -0,0 +1,177 @@
+* {
+ margin: 0;
+ padding: 0;
+}
+
+html,
+body,
+#app,
+.wrapper {
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+}
+
+body {
+ font-family: 'PingFang SC', "Helvetica Neue", Helvetica, "microsoft yahei", arial, STHeiTi, sans-serif;
+}
+
+a {
+ text-decoration: none
+}
+
+
+.content-box {
+ position: absolute;
+ left: 250px;
+ right: 0;
+ top: 70px;
+ bottom: 0;
+ padding-bottom: 30px;
+ -webkit-transition: left .3s ease-in-out;
+ transition: left .3s ease-in-out;
+ background: #f0f0f0;
+}
+
+.content {
+ width: auto;
+ height: 100%;
+ padding: 10px;
+ overflow-y: scroll;
+ box-sizing: border-box;
+}
+
+.content-collapse {
+ left: 65px;
+}
+
+.container {
+ padding: 30px;
+ background: #fff;
+ border: 1px solid #ddd;
+ border-radius: 5px;
+}
+
+.crumbs {
+ margin: 10px 0;
+}
+
+.el-table th {
+ background-color: #f5f7fa !important;
+}
+
+.pagination {
+ margin: 20px 0;
+ text-align: right;
+}
+
+.plugins-tips {
+ padding: 20px 10px;
+ margin-bottom: 20px;
+}
+
+.el-button+.el-tooltip {
+ margin-left: 10px;
+}
+
+.el-table tr:hover {
+ background: #f6faff;
+}
+
+.mgb20 {
+ margin-bottom: 20px;
+}
+
+.move-enter-active,
+.move-leave-active {
+ transition: opacity .1s ease;
+}
+
+.move-enter-from,
+.move-leave-to {
+ opacity: 0;
+}
+
+/*BaseForm*/
+
+.form-box {
+ width: 600px;
+}
+
+.form-box .line {
+ text-align: center;
+}
+
+.el-time-panel__content::after,
+.el-time-panel__content::before {
+ margin-top: -7px;
+}
+
+.el-time-spinner__wrapper .el-scrollbar__wrap:not(.el-scrollbar__wrap--hidden-default) {
+ padding-bottom: 0;
+}
+
+/*Upload*/
+
+.pure-button {
+ width: 150px;
+ height: 40px;
+ line-height: 40px;
+ text-align: center;
+ color: #fff;
+ border-radius: 3px;
+}
+
+.g-core-image-corp-container .info-aside {
+ height: 45px;
+}
+
+.el-upload--text {
+ background-color: #fff;
+ border: 1px dashed #d9d9d9;
+ border-radius: 6px;
+ box-sizing: border-box;
+ width: 360px;
+ height: 180px;
+ text-align: center;
+ cursor: pointer;
+ position: relative;
+ overflow: hidden;
+}
+
+.el-upload--text .el-icon-upload {
+ font-size: 67px;
+ color: #97a8be;
+ margin: 40px 0 16px;
+ line-height: 50px;
+}
+
+.el-upload--text {
+ color: #97a8be;
+ font-size: 14px;
+ text-align: center;
+}
+
+.el-upload--text em {
+ font-style: normal;
+}
+
+/*VueEditor*/
+
+.ql-container {
+ min-height: 400px;
+}
+
+.ql-snow .ql-tooltip {
+ transform: translateX(117.5px) translateY(10px) !important;
+}
+
+.editor-btn {
+ margin-top: 20px;
+}
+
+/*markdown*/
+
+.v-note-wrapper .v-note-panel {
+ min-height: 500px;
+}

web/monit_web/src/components/main.css

@@ -0,0 +1,177 @@
+* {
+ margin: 0;
+ padding: 0;
+}
+
+html,
+body,
+#app,
+.wrapper {
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+}
+
+body {
+ font-family: 'PingFang SC', "Helvetica Neue", Helvetica, "microsoft yahei", arial, STHeiTi, sans-serif;
+}
+
+a {
+ text-decoration: none
+}
+
+
+.content-box {
+ position: absolute;
+ left: 250px;
+ right: 0;
+ top: 70px;
+ bottom: 0;
+ padding-bottom: 30px;
+ -webkit-transition: left .3s ease-in-out;
+ transition: left .3s ease-in-out;
+ background: #f0f0f0;
+}
+
+.content {
+ width: auto;
+ height: 100%;
+ padding: 10px;
+ overflow-y: scroll;
+ box-sizing: border-box;
+}
+
+.content-collapse {
+ left: 65px;
+}
+
+.container {
+ padding: 30px;
+ background: #fff;
+ border: 1px solid #ddd;
+ border-radius: 5px;
+}
+
+.crumbs {
+ margin: 10px 0;
+}
+
+.el-table th {
+ background-color: #f5f7fa !important;
+}
+
+.pagination {
+ margin: 20px 0;
+ text-align: right;
+}
+
+.plugins-tips {
+ padding: 20px 10px;
+ margin-bottom: 20px;
+}
+
+.el-button+.el-tooltip {
+ margin-left: 10px;
+}
+
+.el-table tr:hover {
+ background: #f6faff;
+}
+
+.mgb20 {
+ margin-bottom: 20px;
+}
+
+.move-enter-active,
+.move-leave-active {
+ transition: opacity .1s ease;
+}
+
+.move-enter-from,
+.move-leave-to {
+ opacity: 0;
+}
+
+/*BaseForm*/
+
+.form-box {
+ width: 600px;
+}
+
+.form-box .line {
+ text-align: center;
+}
+
+.el-time-panel__content::after,
+.el-time-panel__content::before {
+ margin-top: -7px;
+}
+
+.el-time-spinner__wrapper .el-scrollbar__wrap:not(.el-scrollbar__wrap--hidden-default) {
+ padding-bottom: 0;
+}
+
+/*Upload*/
+
+.pure-button {
+ width: 150px;
+ height: 40px;
+ line-height: 40px;
+ text-align: center;
+ color: #fff;
+ border-radius: 3px;
+}
+
+.g-core-image-corp-container .info-aside {
+ height: 45px;
+}
+
+.el-upload--text {
+ background-color: #fff;
+ border: 1px dashed #d9d9d9;
+ border-radius: 6px;
+ box-sizing: border-box;
+ width: 360px;
+ height: 180px;
+ text-align: center;
+ cursor: pointer;
+ position: relative;
+ overflow: hidden;
+}
+
+.el-upload--text .el-icon-upload {
+ font-size: 67px;
+ color: #97a8be;
+ margin: 40px 0 16px;
+ line-height: 50px;
+}
+
+.el-upload--text {
+ color: #97a8be;
+ font-size: 14px;
+ text-align: center;
+}
+
+.el-upload--text em {
+ font-style: normal;
+}
+
+/*VueEditor*/
+
+.ql-container {
+ min-height: 400px;
+}
+
+.ql-snow .ql-tooltip {
+ transform: translateX(117.5px) translateY(10px) !important;
+}
+
+.editor-btn {
+ margin-top: 20px;
+}
+
+/*markdown*/
+
+.v-note-wrapper .v-note-panel {
+ min-height: 500px;
+}

web/monit_web/src/main.js

@@ -1,4 +1,9 @@
 import { createApp } from 'vue'
 import App from './App.vue'
-
-createApp(App).mount('#app')
+import installElementPlus from './plugins/element'
+import router from './router'
+import './assets/css/icon.css'
+const app = createApp(App)
+installElementPlus(app)
+app.use(router)
+app.mount('#app')

web/monit_web/src/router/index.js

@@ -0,0 +1,19 @@
+import {createRouter, createWebHashHistory} from "vue-router";
+
+const routes = [
+ {
+ path: '/',
+ name: "Home",
+ component: () => import ( /* webpackChunkName: "login" */ "../view/home/Home.vue")
+ }
+
+
+]
+
+
+const router = createRouter({
+ history: createWebHashHistory(),
+ routes
+});
+
+export default router;

web/monit_web/src/view/home/Home.vue

@@ -0,0 +1,15 @@
+<template>
+<div>
+ 我是home组件
+</div>
+</template>
+
+<script>
+export default {
+ name: "Home.vue"
+}
+</script>
+
+<style scoped>
+
+</style>