添加消息提示

src/App.vue

@@ -20,6 +20,7 @@
 <script>
 	import VHeader from './views/layout/header.vue'
 	import VSlidebar from './views/layout/slidebar.vue'
+	let vm = null
   	export default {
     	components:{
 			VHeader,
@@ -29,6 +30,24 @@
 			return {
 
 			}
+		},
+		created() {
+			vm = this
+		},
+		mounted() {
+			setInterval(function(){
+				vm.pushMessage()
+			},60000)
+		},
+		methods: {
+			// 实时消息推送
+			pushMessage() {
+				vm.$notify({
+					title: '警告',
+					message: '这是一条警告的提示消息',
+					type: 'warning'
+				});
+			}
 		}
   	}
 

src/style/common.scss

@@ -120,6 +120,19 @@ html,body{
 .animation_opactiy{
     animation: backOpacity 2s ease-in-out infinite;
 }
+// 屏幕适配
+@media screen and (min-width:1240px) and (max-width:1900px){
+    .screenSet{
+        width: 163vh !important;
+        height: 70vh !important;
+    }
+}
+@media screen and (min-width:1900px){
+    .screenSet{
+        width: 167vh !important;
+        height: 77vh !important;
+    }
+}
 
 .word-size {
     font-size: 12px;
@@ -150,3 +163,8 @@ html,body{
 .el-dropdown-menu .el-popper {
     top: 48px;
 }
+
+// 消息推送
+.el-notification.right {
+    top: 130px !important;
+}
\ No newline at end of file

src/utils/index.js

@@ -42,6 +42,36 @@ function getUrlParmByCode(paramList) {
     return ''
 }
 
+// 计算高度
+export function resizeHeight(cMinusHeight = 152, iMinuxHeight = 210, refHeightId = 'sidebarWrapperId', 
+  containerHeightId = 'appContainerId', innerHeightId = 'elTableId'){
+  if (!p_getElm(refHeightId) || !p_getElm(containerHeightId) || !p_getElm(innerHeightId)) {
+    // window.onresize = null
+    logger.warn('No certain dom id!!!');
+  }
+  let containerHeight = p_getElm(refHeightId).getBoundingClientRect().height - 50
+  p_getElm(containerHeightId).style.height = containerHeight - cMinusHeight + 'px'
+  p_getElm(innerHeightId).style.height = containerHeight - iMinuxHeight + 'px'
+  if(p_getElm('elTableIdInner')){
+    p_getElm('elTableIdInner').style.height = containerHeight - iMinuxHeight + 'px' 
+  }
+  window.onresize = function() {
+    containerHeight = p_getElm(refHeightId).getBoundingClientRect().height - 50
+    p_getElm(containerHeightId).style.height = containerHeight - cMinusHeight + 'px'
+    p_getElm(innerHeightId).style.height = containerHeight - iMinuxHeight + 'px'
+    if (p_getElm('elTableIdInner')) {
+      p_getElm('elTableIdInner').style.height = containerHeight - iMinuxHeight + 'px'  
+    }
+  }
+}
+
+function p_getElm(elmId) {
+  return document.getElementById(elmId)
+}
+
+
+
+
 export function deepCopy(obj) {
   var result = Array.isArray(obj) ? [] : {};
   for (var key in obj) {

src/views/education/create-component.vue

@@ -6,6 +6,7 @@
         :curmbThird="curmbThird"
         :jumPathThird="jumPathThird">
         </bread-crumb>
+        <div class="create-content screenSet">
             <div class="step-content">
                 <el-steps :active="stepNum" simple>
                     <span class="step-one" :class="stepNum == 1 ? 'class-1' : 'class-2'">1</span>
@@ -20,7 +21,7 @@
                 </div>
             </div>
             <div class="first-step" v-if="stepNum == 1">
-            <el-form ref="basicInfoForm" class="basic-form" :model="componentList" :rules="basicRule" label-width="125px" label-suffix=":" size="mini">
+                <el-form ref="basicInfoForm" class="basic-form" :model="componentList" :rules="basicRule" label-width="125px" label-suffix=":" size="mini" style="margin-bottom:30px;">
                     <el-form-item label="组件名称" prop="name">
                         <el-input type="text" v-model="componentList.name" size="mini" placeholder="请输入组件名称" style="width:30%;"></el-input>
                         <span class="word-num">0/20</span>
@@ -46,7 +47,7 @@
                         </el-upload>
                     </el-form-item>
                     <el-row>
-                    <el-col :span="5">
+                        <el-col :span="6">
                             <el-form-item label="配置证书" prop="certificateId">
                                 <el-radio-group v-model="openLable" @change="selectCertificate">
                                     <el-radio label="是"></el-radio>
@@ -79,7 +80,7 @@
                     </el-form-item>
                 </el-form>
             </div>
-        <div v-if="stepNum == 2">
+            <div class="" v-if="stepNum == 2">
                 <div class="model-btn">
                     <el-button type="primary" size="small" @click="addModule">添加空白模块</el-button>
                     <el-button type="primary" size="small" @click="addFromModule" style="margin-left:0;">从模块添加</el-button>
@@ -184,6 +185,8 @@
                     </el-tabs>
                 </div>
             </div>
+        </div>
+        
         <el-dialog :title="dialogTitle" :visible.sync="columnFormVisible" :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false">
             <el-form ref="resourceForm" class="creat-form" :model="selectResource" label-width="125px" label-suffix=":" size="mini">
                 <el-form-item label="请选择一个资源包" prop="">
@@ -565,7 +568,10 @@ export default {
 </script>
 <style lang="scss">
 .create-component-wrap {
+    margin: 84px 20px 20px;
+    .create-content {
         background: #fff;
+    }
     .first-step {
         padding-top: 20px;
         .el-form-item {
@@ -598,9 +604,8 @@ export default {
     .step-content {
         overflow: hidden;
         height: 60px;
-        margin-top: 66px;
         border-bottom: 1px solid #efefef;
-        background: #fff;
+        // background: #fff;
         .el-step.is-simple .el-step__head {
             display: none;
         }

src/views/education/item-component.vue

@@ -4,16 +4,16 @@
         :curmbFirst="curmbFirst" 
         :curmbSecond="curmbSecond">
         </bread-crumb>
-        <div class="component-content">
+        <div class="component-content screenSet">
             <div class="search-title">查询条件</div>
             <el-row :gutter="30" class="row" type="flex" style="margin-top: 10px;">
                 <el-form ref="serchForm" :model="searchParam" label-width="75px" style="width:100%;">
-                    <el-col :span="10">
+                    <el-col :span="6">
                         <el-form-item label="组件名称:">
                             <el-input v-model="searchParam.name" size="mini" placeholder="请输入组件名称"></el-input>
                         </el-form-item>
                     </el-col>
-                    <el-col :span="10">
+                    <el-col :span="5">
                         <el-form-item label="发布状态:">
                             <el-select v-model="searchParam.status" size="mini" placeholder="请选择发布状态">
                                 <el-option
@@ -25,7 +25,7 @@
                             </el-select>
                         </el-form-item>
                     </el-col>
-                    <el-col :span="3" style="padding:0;text-align:right;padding-right:15px;">
+                    <el-col :span="13" style="padding:0;text-align:right;padding-right:15px;">
                         <el-button type="primary" size="small">查询</el-button>
                         <el-button type="default" size="small" style="margin-left:0;">重置</el-button>
                     </el-col>
@@ -125,8 +125,9 @@ export default {
 <style lang="scss">
 .item-component-wrap {
     .component-content {
-        margin-top: 50px;
         padding: 10px;
+        background: #fff;
+        margin: 84px 20px 20px;
         .search-title {
             padding: 10px 12px;
             font-size: 12px;

src/views/home.vue

@@ -21,7 +21,7 @@
                 </el-col>
                 <el-col class="message" :span="24">
                     <div class="message-title">系统消息 <span>今日消息：3条</span></div>
-                    <div class="message-info">
+                    <div class="message-info" v-if="messageList">
                         <div class="message-item" v-for="(item,index) in messageList" :key="index">
                             <div class="text-top">
                                 <i class="el-icon-error" v-if="item.type == 2" style="color:#FA5555"></i>
@@ -33,6 +33,9 @@
                             <div class="text-bottom">{{item.info}}</div>
                         </div>
                     </div>
+                    <div v-else>
+
+                    </div>
                 </el-col>
             </el-row>
         </div>
@@ -40,6 +43,8 @@
 </template>
 <script>
 import BreadCrumb from '../components/breadcrumb.vue'
+import { setTimeout, setInterval } from 'timers';
+let vm = null
 export default {
     components: {
         BreadCrumb

src/views/layout/slidebar.vue

@@ -83,10 +83,11 @@ export default {
     left: 0;
     top: 64px;
     bottom: 0;
-    width: 256px;
+    width: 255px;
     background: #06232C;
     .el-menu {
         background: #06232C;
+        border-right: none;
         .sub-icon {
             font-size: 12px;
         }