sync

src/components/EllipsisTooltip/index.vue

@@ -1,6 +1,8 @@
 <template>
-  <el-tooltip ref="tlp" :content="content" effect="light" :disabled="!tooltipFlag" :placement="placement" class="tooltip">
-    <slot><span>aa</span></slot>
+  <el-tooltip ref="tlp" :content="content" :effect="effect" :placement="placement" :disabled="!isShown">
+    <div class="ellipsis-box" :style="`width:${width}`" @mouseenter="showTooltip">
+      <slot />
+    </div>
   </el-tooltip>
 
 </template>
@@ -13,40 +15,39 @@ export default {
       type: String,
       default: () => ''
     },
-    className: {
-      type: String,
-      default: () => 'text'
-    },
     placement: {
       type: String,
       default: () => 'top-start'
+    },
+    effect: {
+      type: String,
+      default: 'dark'
+    },
+    width: {
+      type: String,
+      default: ''
     }
   },
   data() {
     return {
-      disabledTip: false,
-      tooltipFlag: false
+      isShown: false
     }
   },
-  mounted() {
-  },
   methods: {
-    visibilityChange(e) {
+    showTooltip(e) {
       const ev = e.target
-      const evWidth = ev.offsetWidth
-      const contentWidth = this.$refs.tlp.$el.parentNode.clientWidth
-      this.tooltipFlag = contentWidth < evWidth
+      const outerWidth = ev.offsetWidth
+      const innerWidth = ev.childNodes[0].offsetWidth
+      this.isShown = innerWidth > outerWidth
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-  .tooltip{
-    overflow: hidden;
-    text-overflow: ellipsis;
-    &>*{
-      white-space: nowrap;
-    }
-  }
+.ellipsis-box{
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 </style>

src/views/home/components/Business.vue

@@ -0,0 +1,128 @@
+<template>
+  <el-card>
+    <div slot="header" class="clearfix">
+      <span>Business</span>
+      <el-button style="float: right; padding: 3px 0" type="text">More<i class="el-icon-arrow-right" /></el-button>
+    </div>
+    <el-carousel class="biz-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>
+</template>
+
+<script>
+export default {
+  props: {
+    pageSize: {
+      type: Number,
+      default: 5
+    },
+    module: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      rawData: [
+        { 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' }
+      ],
+      carouselData2: []
+    }
+  },
+  computed: {
+    carouselData() {
+      const result = []
+      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++) {
+          result.push(this.rawData.slice(i * this.pageSize, (i + 1) * this.pageSize))
+        }
+      }
+      return result
+    }
+  },
+  created() {
+    // this.formatData()
+  },
+  methods: {
+    formatData() {
+      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.carouselData2.push(this.rawData.slice(i * this.pageSize, (i + 1) * this.pageSize))
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.biz-content {
+  ::v-deep {
+    .el-carousel__container {
+      height: 100%;
+      // width: 100%;
+    }
+    .el-carousel__button {
+      background-color: #cccccc;
+      opacity: 1;
+    }
+    .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/components/Link.vue

@@ -5,8 +5,8 @@
       <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 v-for="item in linkData" :key="item.id" :content="item.name" placement="top" class="link-item" width="200px">
+        <a>{{ item.name }}</a>
       </ellipsis-tooltip>
     </el-scrollbar>
   </el-card>
@@ -26,12 +26,13 @@ export default {
         { 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: '5', name: 'LinkLinkLinkCCCCC5LinkLinkLinkCCCCC5LinkLinkLinkCCCCC5LinkLinkLinkCCCCC5', 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' }
+        { id: '10', name: 'LinkLinkLink9LinkLinkLink9LinkLinkLink9LinkLinkLink9LinkLinkLink9LinkLinkLink9LinkLinkLink9LinkLinkLink9LinkLinkLink9LinkLinkLink9', link: '', createDate: '2023-07-07 10:01:02' },
+        { id: '11', name: 'LinkLinkLink10', link: '', createDate: '2023-07-07 10:01:02' }
       ]
     }
   }
@@ -55,14 +56,12 @@ export default {
 
 .link-item {
   display: inline-block;
-  width: 400px;
   height: 43px;
-  /* border: solid 1px #cccccc; */
-  /* text-align: center; */
-  text-overflow: ellipsis;
-  overflow: hidden;
+  line-height: 43px;
+  vertical-align: middle;
+  text-align: center;
   margin: 2px 5px 2px 0px;
-  /* background-color: #cccccc; */
-  color: #0056dd;
+  background-color: #f5f7fa;
+  color: #2a7fca;
 }
 </style>

src/views/home/index.vue

@@ -11,7 +11,7 @@
       :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" :class="{'hidden': item.i !== '6'}">
+      <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 !== '2'}">
         <component :is="components[item.i]" class="card-box" :page-size="item.i === '4' ? 5 : 10" />
       </grid-item>
     </grid-layout>
@@ -23,6 +23,7 @@ import { mapGetters } from 'vuex'
 import VueGridLayout from 'vue-grid-layout'
 import Search from './components/Search'
 import Message from './components/Message'
+import Business from './components/Business'
 import System from './components/System'
 // import System from './components/System'
 import Specification from './components/Specification'
@@ -38,6 +39,7 @@ export default {
     GridItem: VueGridLayout.GridItem,
     Search,
     Message,
+    Business,
     System,
     Specification,
     Link,
@@ -48,22 +50,22 @@ export default {
       // 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': 14, 'w': 6, 'h': 7, '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' }
+      //   { 'x': 6, 'y': 15, 'w': 8, 'h': 6, 'i': '5' },
+      //   { 'x': 0, 'y': 21, 'w': 14, 'h': 4, 'i': '6' }
       // ],
       layout: [
         { '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': 0, 'y': 0, 'w': 6, 'h': 7, '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' }
+        { 'x': 1, 'y': 0, 'w': 14, 'h': 4, 'i': '6' }
       ],
-      components: ['Search', 'Message', 'Test', 'System', 'System', 'Specification', 'Link']
+      components: ['Search', 'Message', 'Business', 'System', 'System', 'Specification', 'Link']
     }
   },
   computed: {