commit

2021-11-04 11:18:12 +08:00
parent d172c99d49
commit bb292f1c0a
3 changed files with 123 additions and 94 deletions
@@ -1,96 +1,91 @@
 <!-- 尾部链接 -->
 <template>
-  <div class="link">
-    <div class="title">友情链接</div>
-    <ul>
-      <li class="myLi1" v-for="(link, index) in linkList" v-if="index<5" :key="index" @click="openLinkUrl(link.url)">
-        <a v-if="link.name.length>10" v-html="link.name.substring(0,10)+'...'" :title="link.name"></a>
-        <a v-else v-html="link.name" :title="link.name"></a>
-      </li>
-      <li class="myLi2">
-        <span @click="$router.push('linkManage')">更多链接 ⋙</span>
-      </li>
-    </ul>
-  </div>
+    <div class="link" id="link">
+        <div>
+            <span class="title borderRight">友情链接</span>
+            <span class="myLi1 borderRight" v-for="(link, index) in linkList" :key="index" @click="openLinkUrl(link.url)" :title="link.name" >
+                {{ link.name }}
+            </span>
+            <span class="myLi1" @click="$router.push('linkManage')">更多链接 ⋙</span>
+        </div>
+    </div>
 </template>

 <script>
-export default {
-  name: 'Empennage',
-  components: {},
-  mixins: [],
-  data() {
-    return {
-      linkList: [],
-    }
-  },
-  computed: {},
-  watch: {},
-  mounted() {
-    this.getLink();
-  },
-  methods: {
-    // 跳转链接
-    openLinkUrl (linkUri) {
-      let getHttp = linkUri.substring(0, 7)
-      let getHttps = linkUri.substring(0, 8)
-      if (getHttp === 'http://' || getHttps === 'https://') {
-        window.open(linkUri)
-      } else {
-        window.open('https://' + linkUri)
-      }
-    },
-    // 获取链接数据
-    getLink () {
-      this.$http.get('sarUrl/tsUrl', {
-      }, {
-        _this: this,
-        loading: 'Loading'
-      }, res=> {
-        this.linkList = res.data
-      })
-    }
-  },
+    export default {
+        name: 'Empennage',
+        components: {},
+        mixins: [],
+        data() {
+            return {
+                linkList: [],
+            }
+        },
+        computed: {},
+        watch: {},
+        mounted() {
+            this.getLink();
+        },
+        methods: {
+            // 跳转链接
+            openLinkUrl (linkUri) {
+                let getHttp = linkUri.substring(0, 7)
+                let getHttps = linkUri.substring(0, 8)
+                if (getHttp === 'http://' || getHttps === 'https://') {
+                    window.open(linkUri)
+                } else {
+                    window.open('https://' + linkUri)
+                }
+            },
+            // 获取链接数据
+            getLink () {
+                var width = document.getElementById("link").offsetWidth
+                this.$http.get('sarUrl/tsUrl', {
+                }, {
+                    _this: this,
+                    loading: 'Loading'
+                }, res=> {
+                    let b = 0
+                    let c = 0
+                    for (let a = 0; a < res.data.length; a++) {
+                        b += res.data[a].name.length * 14 + 100
+                        if (b > width) {
+                            c = a - 1
+                        } else {
+                            c = a
+                        }
+                    }
+                    let list
+                    list = res.data.slice(0, c)
+                    this.linkList = list
+                })
+            }
+        },

-}
+    }
 </script>

 <style lang="less" scoped>
-.link {
-  display: flex;
-  border-radius: 3px;
-  height: 100%;
-  .title {
-    font-weight: bold;
-    padding-left: 10px;
-    width: 80px;
-  }
-  ul {
-    width: calc(~'100% - 80px');
-    display: flex;
-    height: 100%;
-    text-align: center;
-    user-select: none;
-    .myLi1 {
-      border-right: 2px solid #f4f4f4;
-      flex: 1;
-      a {
-        color: #333333;
-      }
+    .link {
+        display: flex;
+        border-radius: 3px;
+        height: 100%;
+        align-items: center;
+        justify-content: space-around;
+        .borderRight {
+            padding-right: 30px;
+            margin-right: 30px;
+            border-right: 2px dotted #aaa;
+        }
+        .title {
+            font-weight: bold;
+            padding-left: 10px;
+            width: 80px;
+        }
+        .myLi1 {
+            cursor: pointer;
+            color: #0068B7;
+        }
    }
-    .myLi1:hover {
-      background: #5ea9f6;
-      a {
-        color: #fff;
-        text-decoration: none;
-      }
-    }
-    .myLi2 {
-      padding: 0 10px;
-      cursor: pointer;
-      color: #5ea9f6 !important;
-    }
-  }
-}
 </style>