sync

src/components/EllipsisTooltip/index.vue

@@ -0,0 +1,52 @@
+<template>
+  <el-tooltip ref="tlp" :content="content" effect="light" :disabled="!tooltipFlag" :placement="placement" class="tooltip">
+    <slot><span>aa</span></slot>
+  </el-tooltip>
+
+</template>
+
+<script>
+export default {
+  name: 'EllipsisTooltip',
+  props: {
+    content: {
+      type: String,
+      default: () => ''
+    },
+    className: {
+      type: String,
+      default: () => 'text'
+    },
+    placement: {
+      type: String,
+      default: () => 'top-start'
+    }
+  },
+  data() {
+    return {
+      disabledTip: false,
+      tooltipFlag: false
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    visibilityChange(e) {
+      const ev = e.target
+      const evWidth = ev.offsetWidth
+      const contentWidth = this.$refs.tlp.$el.parentNode.clientWidth
+      this.tooltipFlag = contentWidth < evWidth
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .tooltip{
+    overflow: hidden;
+    text-overflow: ellipsis;
+    &>*{
+      white-space: nowrap;
+    }
+  }
+</style>

src/views/home/components/Link.vue

@@ -0,0 +1,68 @@
+<template>
+  <el-card>
+    <div slot="header" class="clearfix">
+      <span>Test</span>
+      <el-button style="float: right; padding: 3px 0" type="text">More<i class="el-icon-arrow-right" /></el-button>
+    </div>
+    <el-scrollbar class="link-content">
+      <ellipsis-tooltip v-for="item in linkData" :key="item.id" :placement="left" :class-name="aaa">
+        <div><a class="link-item">{{ item.name }}</a></div>
+      </ellipsis-tooltip>
+    </el-scrollbar>
+  </el-card>
+</template>
+
+<script>
+import EllipsisTooltip from '@/components/EllipsisTooltip'
+export default {
+  name: 'Link',
+  components: {
+    EllipsisTooltip
+  },
+  data() {
+    return {
+      linkData: [
+        { id: '1', name: 'LinkLinkLink1Link1Link1Link1Link1Link1Link1Link1Link1Link1Link1Link1Link1Link1Link1Link1Link1Link1Link1', link: '', createDate: '2023-07-07 10:01:02' },
+        { id: '2', name: 'LinkLinkLink2', link: '', createDate: '2023-07-07 10:01:02' },
+        { id: '3', name: 'LinkLinkLinkAAA3', link: '', createDate: '2023-07-07 10:01:02' },
+        { id: '4', name: 'LinkLinkLinkBB4', link: '', createDate: '2023-07-07 10:01:02' },
+        { id: '5', name: 'LinkLinkLinkCCCCC5', link: '', createDate: '2023-07-07 10:01:02' },
+        { id: '6', name: 'LinkLinkLink6', link: '', createDate: '2023-07-07 10:01:02' },
+        { id: '7', name: 'LinkLinkLink7', link: '', createDate: '2023-07-07 10:01:02' },
+        { id: '8', name: 'LinkLinkLink8', link: '', createDate: '2023-07-07 10:01:02' },
+        { id: '9', name: 'LinkLinkLink9', link: '', createDate: '2023-07-07 10:01:02' },
+        { id: '10', name: 'LinkLinkLink10', link: '', createDate: '2023-07-07 10:01:02' }
+      ]
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.card-box {
+  ::v-deep {
+    .el-scrollbar__wrap{
+      overflow-x: hidden;
+    }
+    .el-scrollbar__bar.is-horizontal {
+      display: none;
+    }
+    .el-table__row .cell {
+      padding-left: 0 !important;
+    }
+  }
+}
+
+.link-item {
+  display: inline-block;
+  width: 400px;
+  height: 43px;
+  /* border: solid 1px #cccccc; */
+  /* text-align: center; */
+  text-overflow: ellipsis;
+  overflow: hidden;
+  margin: 2px 5px 2px 0px;
+  /* background-color: #cccccc; */
+  color: #0056dd;
+}
+</style>

src/views/home/components/Specification.vue

@@ -0,0 +1,55 @@
+<template>
+  <el-card>
+    <div slot="header" class="clearfix">
+      <span>Test</span>
+      <el-button style="float: right; padding: 3px 0" type="text">More<i class="el-icon-arrow-right" /></el-button>
+    </div>
+    <el-scrollbar class="spec-content">
+      <el-table :data="specData" :show-header="false" size="mini">
+        <el-table-column show-overflow-tooltip>
+          <template slot-scope="scope">
+            <el-link :underline="false">{{ scope.row.name }}</el-link>
+          </template>
+        </el-table-column>
+        <el-table-column prop="createDate" width="140" />
+      </el-table>
+    </el-scrollbar>
+  </el-card>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      specData: [
+        { id: '1', name: 'Spec1Spec1Spec1Spec1Spec1Spec1Spec1Spec1Spec1Spec1Spec1Spec1Spec1Spec1Spec1Spec1Spec1Spec1Spec1', link: '', createDate: '2023-07-07 10:01:02' },
+        { id: '2', name: 'Spec2', link: '', createDate: '2023-07-07 10:01:02' },
+        { id: '3', name: 'Spec3', link: '', createDate: '2023-07-07 10:01:02' },
+        { id: '4', name: 'Spec4', link: '', createDate: '2023-07-07 10:01:02' },
+        { id: '5', name: 'Spec5', link: '', createDate: '2023-07-07 10:01:02' },
+        { id: '6', name: 'Spec6', link: '', createDate: '2023-07-07 10:01:02' },
+        { id: '7', name: 'Spec7', link: '', createDate: '2023-07-07 10:01:02' },
+        { id: '8', name: 'Spec8', link: '', createDate: '2023-07-07 10:01:02' },
+        { id: '9', name: 'Spec9', link: '', createDate: '2023-07-07 10:01:02' },
+        { id: '10', name: 'Spec10', link: '', createDate: '2023-07-07 10:01:02' }
+      ]
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.card-box {
+  ::v-deep {
+    .el-scrollbar__wrap{
+      overflow-x: hidden;
+    }
+    .el-scrollbar__bar.is-horizontal {
+      display: none;
+    }
+    .el-table__row .cell {
+      padding-left: 0 !important;
+    }
+  }
+}
+</style>

src/views/home/components/System.vue

@@ -1,12 +1,17 @@
 <template>
-  <el-card class="card-box">
+  <el-card>
     <div slot="header" class="clearfix">
       <span>Test</span>
       <el-button style="float: right; padding: 3px 0" type="text">More<i class="el-icon-arrow-right" /></el-button>
     </div>
-    <el-carousel class="system-content" :autoplay="false" arrow="never" trigger="clicl">
-      <el-carousel-item v-for="(page,index) in carouselData2" :key="index">
-        <h3 v-for="item in page" :key="item.id" class="small">{{ item.name }}</h3>
+    <el-carousel class="system-content" :autoplay="false" arrow="never" trigger="click">
+      <el-carousel-item v-for="(page,index) in carouselData" :key="index">
+        <div class="system-box">
+          <div v-for="item in page" :key="item.id" class="system-item-box">
+            <el-avatar :size="56" fit="fill" :src="item.link" />
+            <div class="system-title">{{ item.name }}</div>
+          </div>
+        </div>
       </el-carousel-item>
     </el-carousel>
   </el-card>
@@ -14,29 +19,38 @@
 
 <script>
 export default {
+  props: {
+    pageSize: {
+      type: Number,
+      default: 5
+    },
+    module: {
+      type: String,
+      default: ''
+    }
+  },
   data() {
     return {
       rawData: [
-        { id: '1', code: '1', name: 'System1', link: 'http://www.1.com', icon: 'icon-1' },
-        { id: '2', code: '2', name: 'System2', link: 'http://www.2.com', icon: 'icon-2' },
-        { id: '3', code: '3', name: 'System3', link: 'http://www.3.com', icon: 'icon-3' },
-        { id: '4', code: '4', name: 'System4', link: 'http://www.4.com', icon: 'icon-4' },
-        { id: '5', code: '5', name: 'System5', link: 'http://www.5.com', icon: 'icon-5' },
-        { id: '6', code: '6', name: 'System6', link: 'http://www.6.com', icon: 'icon-6' },
-        { id: '7', code: '7', name: 'System7', link: 'http://www.7.com', icon: 'icon-7' },
-        { id: '8', code: '8', name: 'System8', link: 'http://www.8.com', icon: 'icon-8' },
-        { id: '9', code: '9', name: 'System9', link: 'http://www.9.com', icon: 'icon-9' },
-        { id: '10', code: '10', name: 'System10', link: 'http://www.10.com', icon: 'icon-10' },
-        { id: '11', code: '11', name: 'System11', link: 'http://www.11.com', icon: 'icon-11' },
-        { id: '12', code: '12', name: 'System12', link: 'http://www.12.com', icon: 'icon-12' },
-        { id: '13', code: '13', name: 'System13', link: 'http://www.13.com', icon: 'icon-13' }
+        { id: '1', code: '1', name: 'System1', link: '', icon: 'icon-1' },
+        { id: '2', code: '2', name: 'System2', link: '', icon: 'icon-2' },
+        { id: '3', code: '3', name: 'System3', link: '', icon: 'icon-3' },
+        { id: '4', code: '4', name: 'System4', link: '', icon: 'icon-4' },
+        { id: '5', code: '5', name: 'System5', link: '', icon: 'icon-5' },
+        { id: '6', code: '6', name: 'System6', link: '', icon: 'icon-6' },
+        { id: '7', code: '7', name: 'System7', link: '', icon: 'icon-7' },
+        { id: '8', code: '8', name: 'System8', link: '', icon: 'icon-8' },
+        { id: '9', code: '9', name: 'System9', link: '', icon: 'icon-9' },
+        { id: '10', code: '10', name: 'System10', link: '', icon: 'icon-10' },
+        { id: '11', code: '11', name: 'System11', link: '', icon: 'icon-11' },
+        { id: '12', code: '12', name: 'System12', link: '', icon: 'icon-12' },
+        { id: '13', code: '13', name: 'System13', link: '', icon: 'icon-13' }
       ],
-      pageSize: 10,
-      carouselData: []
+      carouselData2: []
     }
   },
   computed: {
-    carouselData2() {
+    carouselData() {
       const result = []
       if (this.rawData && this.rawData.length > 0) {
         const len = this.rawData.length
@@ -49,16 +63,16 @@ export default {
     }
   },
   created() {
-    this.formatData()
+    // this.formatData()
   },
   methods: {
     formatData() {
-      this.carouselData = []
+      this.carouselData2 = []
       if (this.rawData && this.rawData.length > 0) {
         const len = this.rawData.length
         const page = Math.ceil(len / this.pageSize)
         for (var i = 0; i < page; i++) {
-          this.carouselData.push(this.rawData.slice(i * this.pageSize, (i + 1) * this.pageSize))
+          this.carouselData2.push(this.rawData.slice(i * this.pageSize, (i + 1) * this.pageSize))
         }
       }
     }
@@ -71,6 +85,7 @@ export default {
   ::v-deep {
     .el-carousel__container {
       height: 100%;
+      // width: 100%;
     }
     .el-carousel__button {
       background-color: #cccccc;
@@ -79,6 +94,35 @@ export default {
     .el-carousel__indicator.is-active .el-carousel__button {
       background-color: #0056dd;
     }
+    .el-carousel__indicator--horizontal {
+      padding: 12px 4px 2px 4px;
+    }
+  }
+
+  .system-box {
+    display: flex;
+    flex-wrap: wrap;
+
+    .system-item-box {
+      width: 156px;
+      height: 110px;
+      border: 1px solid rgba(0,0,0,0.09);
+      border-radius:  10px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      margin: 5px 10px 5px 0;
+
+      .system-title {
+        font-size: 16px;
+        color: rgba(0,0,0,0.65);
+        margin-top: 10px;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+      }
+    }
   }
 }
 </style>

src/views/home/index.vue

@@ -4,77 +4,16 @@
       :layout.sync="layout"
       :col-num="14"
       :row-height="30"
-      :is-draggable="true"
+      :is-draggable="false"
       :is-resizable="true"
       :is-mirrored="false"
       :vertical-compact="true"
       :margin="[10, 10]"
       :use-css-transforms="true"
     >
-      <grid-item v-for="item in layout" :key="item.i" :x="item.x" :y="item.y" :w="item.w" :h="item.h" :i="item.i">
-        <component :is="components[item.i]" class="card-box" />
+      <grid-item v-for="item in layout" :key="item.i" :x="item.x" :y="item.y" :w="item.w" :h="item.h" :i="item.i" :class="{'hidden': item.i !== '6'}">
+        <component :is="components[item.i]" class="card-box" :page-size="item.i === '4' ? 5 : 10" />
       </grid-item>
-      <!-- <grid-item :key="layout[0].i" :x="layout[0].x" :y="layout[0].y" :w="layout[0].w" :h="layout[0].h" :i="layout[0].i">
-        <el-row type="flex" justify="center" class="searh-row">
-          <el-col :span="10"><el-input placeholder="请输入搜索内容" /></el-col>
-          <el-col :span="2"><el-button type="primary" icon="el-icon-search">智搜</el-button></el-col>
-        </el-row>
-      </grid-item>
-      <grid-item :key="layout[1].i" :x="layout[1].x" :y="layout[1].y" :w="layout[1].w" :h="layout[1].h" :i="layout[1].i" />
-      <grid-item :key="layout[2].i" :x="layout[2].x" :y="layout[2].y" :w="layout[2].w" :h="layout[2].h" :i="layout[2].i">
-        <el-card class="card-box">
-          <div slot="header" class="clearfix">
-            <span>我的业务</span>
-            <el-button style="float: right; padding: 3px 0" type="text">More<i class="el-icon-arrow-right" /></el-button>
-          </div>
-        </el-card>
-      </grid-item>
-      <grid-item :key="layout[3].i" :x="layout[3].x" :y="layout[3].y" :w="layout[3].w" :h="layout[3].h" :i="layout[3].i">
-        <el-card class="card-box">
-          <div slot="header" class="clearfix">
-            <span>我的应用</span>
-            <el-button style="float: right; padding: 3px 0" type="text">More<i class="el-icon-arrow-right" /></el-button>
-          </div>
-          <el-carousel height="150px">
-            <el-carousel-item v-for="item in 4" :key="item">
-              <h3 class="small">{{ item }}</h3>
-            </el-carousel-item>
-          </el-carousel>
-        </el-card>
-      </grid-item>
-      <grid-item :key="layout[4].i" :x="layout[4].x" :y="layout[4].y" :w="layout[4].w" :h="layout[4].h" :i="layout[4].i">
-        <el-card class="card-box">
-          <div slot="header" class="clearfix">
-            <span>专项工具</span>
-            <el-button style="float: right; padding: 3px 0" type="text">More<i class="el-icon-arrow-right" /></el-button>
-          </div>
-          <div v-for="o in 4" :key="o" class="item">
-            {{ '列表内容 ' + o }}
-          </div>
-        </el-card>
-      </grid-item>
-      <grid-item :key="layout[5].i" :x="layout[5].x" :y="layout[5].y" :w="layout[5].w" :h="layout[5].h" :i="layout[5].i">
-        <el-card class="card-box">
-          <div slot="header" class="clearfix">
-            <span>标准规范</span>
-            <el-button style="float: right; padding: 3px 0" type="text">More<i class="el-icon-arrow-right" /></el-button>
-          </div>
-          <div v-for="o in 4" :key="o" class="item">
-            {{ '列表内容 ' + o }}
-          </div>
-        </el-card>
-      </grid-item>
-      <grid-item :key="layout[6].i" :x="layout[6].x" :y="layout[6].y" :w="layout[6].w" :h="layout[6].h" :i="layout[6].i">
-        <el-card class="card-box">
-          <div slot="header" class="clearfix">
-            <span>外部应用导航</span>
-            <el-button style="float: right; padding: 3px 0" type="text">More<i class="el-icon-arrow-right" /></el-button>
-          </div>
-          <div v-for="o in 4" :key="o" class="item">
-            {{ '列表内容 ' + o }}
-          </div>
-        </el-card>
-      </grid-item> -->
     </grid-layout>
   </div>
 </template>
@@ -85,6 +24,9 @@ import VueGridLayout from 'vue-grid-layout'
 import Search from './components/Search'
 import Message from './components/Message'
 import System from './components/System'
+// import System from './components/System'
+import Specification from './components/Specification'
+import Link from './components/Link'
 import Test from './components/Test'
 
 let sseClient
@@ -97,20 +39,31 @@ export default {
     Search,
     Message,
     System,
+    Specification,
+    Link,
     Test
   },
   data() {
     return {
+      // layout: [
+      //   { 'x': 0, 'y': 0, 'w': 14, 'h': 2, 'i': '0' },
+      //   { 'x': 0, 'y': 2, 'w': 6, 'h': 12, 'i': '1' },
+      //   { 'x': 0, 'y': 14, 'w': 6, 'h': 8, 'i': '2' },
+      //   { 'x': 6, 'y': 2, 'w': 8, 'h': 8, 'i': '3' },
+      //   { 'x': 6, 'y': 10, 'w': 8, 'h': 5, 'i': '4' },
+      //   { 'x': 6, 'y': 16, 'w': 8, 'h': 6, 'i': '5' },
+      //   { 'x': 0, 'y': 22, 'w': 14, 'h': 4, 'i': '6' }
+      // ],
       layout: [
-        { 'x': 0, 'y': 0, 'w': 14, 'h': 2, 'i': '0' },
-        { 'x': 0, 'y': 2, 'w': 6, 'h': 12, 'i': '1' },
-        { 'x': 0, 'y': 14, 'w': 6, 'h': 8, 'i': '2' },
-        { 'x': 6, 'y': 2, 'w': 8, 'h': 8, 'i': '3' },
-        { 'x': 6, 'y': 10, 'w': 8, 'h': 6, 'i': '4' },
-        { 'x': 6, 'y': 16, 'w': 8, 'h': 6, 'i': '5' },
-        { 'x': 0, 'y': 22, 'w': 14, 'h': 4, 'i': '6' }
+        { 'x': 1, 'y': 0, 'w': 14, 'h': 2, 'i': '0' },
+        { 'x': 1, 'y': 2, 'w': 6, 'h': 12, 'i': '1' },
+        { 'x': 1, 'y': 14, 'w': 6, 'h': 8, 'i': '2' },
+        { 'x': 1, 'y': 0, 'w': 8, 'h': 8, 'i': '3' },
+        { 'x': 1, 'y': 8, 'w': 8, 'h': 5, 'i': '4' },
+        { 'x': 1, 'y': 0, 'w': 8, 'h': 6, 'i': '5' },
+        { 'x': 0, 'y': 0, 'w': 14, 'h': 4, 'i': '6' }
       ],
-      components: ['Test', 'Test', 'Test', 'System', 'Test', 'Test', 'Test']
+      components: ['Search', 'Message', 'Test', 'System', 'System', 'Specification', 'Link']
     }
   },
   computed: {
@@ -118,7 +71,10 @@ export default {
       'name'
     ])
   },
+  created() {
+  },
   mounted() {
+    this.calcLayoutWidth()
     this.connect()
   },
   beforeDestroy() {
@@ -127,6 +83,9 @@ export default {
     }
   },
   methods: {
+    calcLayoutWidth() {
+      document.getElementsByClassName('home-container')[0].style.width = document.getElementsByClassName('home-container')[0].offsetWidth + 'px'
+    },
     connect() {
       sseClient = this.$sse.create({
         url: process.env.VUE_APP_BASE_API + '/subscribe/test1',
@@ -164,6 +123,10 @@ export default {
 <style lang="scss" scoped>
 $msgCardHeaderHeight: 43px;
 
+.vue-grid-item.hidden {
+  display: none;
+}
+
 .card-box {
   height: 100%;
 

src/views/home/index2.vue

@@ -1,267 +0,0 @@
-<template>
-  <div class="home-container">
-    <grid-layout
-      :layout.sync="layout"
-      :col-num="14"
-      :row-height="30"
-      :is-draggable="true"
-      :is-resizable="true"
-      :is-mirrored="false"
-      :vertical-compact="true"
-      :margin="[10, 10]"
-      :use-css-transforms="true"
-    >
-      <grid-item :key="layout[0].i" :x="layout[0].x" :y="layout[0].y" :w="layout[0].w" :h="layout[0].h" :i="layout[0].i">
-        <el-row type="flex" justify="center" class="searh-row" />
-      </grid-item>
-      <grid-item :key="layout[1].i" :x="layout[1].x" :y="layout[1].y" :w="layout[1].w" :h="layout[1].h" :i="layout[1].i" />
-      <grid-item :key="layout[2].i" :x="layout[2].x" :y="layout[2].y" :w="layout[2].w" :h="layout[2].h" :i="layout[2].i" />
-      <grid-item :key="layout[3].i" :x="layout[3].x" :y="layout[3].y" :w="layout[3].w" :h="layout[3].h" :i="layout[3].i">
-        <el-card class="card-box">
-          <div slot="header" class="clearfix">
-            <span>Test</span>
-            <el-button style="float: right; padding: 3px 0" type="text">More<i class="el-icon-arrow-right" /></el-button>
-          </div>
-          <el-carousel class="system-content" :autoplay="false" arrow="never" trigger="clicl">
-            <el-carousel-item v-for="item in 4" :key="item">
-              <h3 class="small">{{ item }}</h3>
-            </el-carousel-item>
-          </el-carousel>
-        </el-card>
-      </grid-item>
-      <grid-item :key="layout[4].i" :x="layout[4].x" :y="layout[4].y" :w="layout[4].w" :h="layout[4].h" :i="layout[4].i" />
-      <grid-item :key="layout[5].i" :x="layout[5].x" :y="layout[5].y" :w="layout[5].w" :h="layout[5].h" :i="layout[5].i" />
-      <grid-item :key="layout[6].i" :x="layout[6].x" :y="layout[6].y" :w="layout[6].w" :h="layout[6].h" :i="layout[6].i" />
-    </grid-layout>
-  </div>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import VueGridLayout from 'vue-grid-layout'
-
-let sseClient
-
-export default {
-  name: 'Home',
-  components: {
-    GridLayout: VueGridLayout.GridLayout,
-    GridItem: VueGridLayout.GridItem
-  },
-  data() {
-    return {
-      layout: [
-        { 'x': 0, 'y': 0, 'w': 14, 'h': 2, 'i': '0' },
-        { 'x': 0, 'y': 2, 'w': 6, 'h': 12, 'i': '1' },
-        { 'x': 0, 'y': 14, 'w': 6, 'h': 8, 'i': '2' },
-        { 'x': 0, 'y': 2, 'w': 8, 'h': 8, 'i': '3' },
-        { 'x': 6, 'y': 10, 'w': 8, 'h': 6, 'i': '4' },
-        { 'x': 6, 'y': 16, 'w': 8, 'h': 6, 'i': '5' },
-        { 'x': 0, 'y': 22, 'w': 14, 'h': 4, 'i': '6' }
-      ],
-      message: {
-        todo: 10,
-        done: 45,
-        filter: '0',
-        todoData: [],
-        todoData2: [],
-        doneData: []
-      }
-
-    }
-  },
-  computed: {
-    ...mapGetters([
-      'name'
-    ])
-  },
-  mounted() {
-    this.connect()
-  },
-  beforeDestroy() {
-    if (sseClient) {
-      sseClient.disconnect()
-    }
-  },
-  methods: {
-    connect() {
-      sseClient = this.$sse.create({
-        url: process.env.VUE_APP_BASE_API + '/subscribe/test1',
-        format: 'json',
-        withCredentials: true,
-        polyfill: true
-      })
-      sseClient.on('error', (e) => {
-        console.error('lost connection or failed to parse!', e)
-
-      // If this error is due to an unexpected disconnection, EventSource will
-      // automatically attempt to reconnect indefinitely. You will _not_ need to
-      // re-add your handlers.
-      })
-
-      sseClient.on('message', this.handleMessage)
-
-      sseClient.connect()
-        .then(sse => {
-          console.log('We\'re connected!')
-        })
-        .catch((err) => {
-        // When this error is caught, it means the initial connection to the
-        // events server failed.  No automatic attempts to reconnect will be made.
-          console.error('Failed to connect to server', err)
-        })
-    },
-    handleMessage(message) {
-      console.log(message)
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-$gridBgColor: #ffffff;
-$msgCardHeaderHeight: 43px;
-
-.searh-row {
-  height: 100%;
-  align-items: center;
-  background-color: $gridBgColor;
-}
-
-.card-box {
-  height: 100%;
-
-  ::v-deep {
-    .el-card__header {
-      padding: 10px 10px !important;
-      height: $msgCardHeaderHeight;
-      span{
-        font-weight: bold;
-      }
-    }
-
-    .el-card__body {
-      height: calc(100% - #{$msgCardHeaderHeight});
-      padding: 0 10px 10px 10px;
-      &>* {
-        height: 100%;
-      }
-    }
-  }
-}
-
-.message-content  {
-  .message-filter_box {
-    height: 30px;
-    &>span {
-      display: inline-block;
-      font-size: 14px;
-    }
-  }
-
-  ::v-deep {
-    .el-tabs__header {
-      height: 40px;
-    }
-    .el-tabs__item {
-      font-size: 18px !important;
-    }
-    .el-tabs__content {
-      height: calc(100% - 55px);
-
-      .el-tab-pane{
-        height: 100%;
-      }
-    }
-    .el-table .cell {
-      padding-left: 0 !important;
-    }
-  }
-
-  .priority-box{
-    display: inline-block;
-    padding: 0 5px;
-    color: #ffffff;
-  }
-  .priority-level1{
-    background: #F85252;
-  }
-  .priority-level2{
-    background: orange;
-  }
-  .priority-level3{
-    background: yellow;
-  }
-  .priority-level4{
-    background: blue;
-  }
-}
-
-.system-content {
-  ::v-deep {
-    .el-carousel__container {
-      height: 100%;
-    }
-    .el-carousel__button {
-      background-color: #cccccc;
-      opacity: 1;
-    }
-    .el-carousel__indicator.is-active .el-carousel__button {
-      background-color: #0056dd;
-    }
-  }
-}
-
-.vue-grid-item:not(.vue-grid-placeholder) {
-    background: #e0dede;
-}
-
-.vue-grid-item .resizing {
-    opacity: 0.9;
-}
-
-.vue-grid-item .static {
-    background: rgb(128, 128, 237);
-}
-
-.vue-grid-item .text {
-    font-size: 24px;
-    text-align: center;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    margin: auto;
-    height: 100%;
-    width: 100%;
-}
-
-.vue-grid-item .no-drag {
-    height: 100%;
-    width: 100%;
-}
-
-.vue-grid-item .minMax {
-    font-size: 12px;
-}
-
-.vue-grid-item .add {
-    cursor: pointer;
-}
-
-.vue-draggable-handle {
-    position: absolute;
-    width: 20px;
-    height: 20px;
-    top: 0;
-    left: 0;
-    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><circle cx='5' cy='5' r='5' fill='#999999'/></svg>") no-repeat;
-    background-position: bottom right;
-    padding: 0 8px 8px 0;
-    background-repeat: no-repeat;
-    background-origin: content-box;
-    box-sizing: border-box;
-    cursor: pointer;
-}
-</style>