添加消息提示

src/App.vue

@@ -19,7 +19,8 @@
 
 <script>
 	import VHeader from './views/layout/header.vue'
-  	import VSlidebar from './views/layout/slidebar.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;
@@ -149,4 +162,9 @@ 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/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;
         }