admin_home/src/views/template/style/components/footerMenu.vue

<template>
  <div class="footerMenuBox">
    <ul class="footerMenuUl">
      <li>
        <a href="javascript:;">菜单标题</a>
      </li>
      <li>
        <a href="javascript:;">菜单标题</a>
      </li>
      <li>
        <a href="javascript:;">菜单标题</a>
      </li>
      <li>
        <a href="javascript:;">菜单标题</a>
      </li>
      <li>
        <a href="javascript:;">菜单标题</a>
      </li>
      <li>
        <a href="javascript:;">菜单标题</a>
      </li>
      <li>
        <a href="javascript:;">菜单标题</a>
      </li>
      <li>
        <a href="javascript:;">菜单标题</a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    
  },
  data() {
    return {
      
    };
  },
  methods: {
    
  },
  mounted() {

  },
};
</script>

<style scoped lang="less">
  .footerMenuBox {
    width: 80%;
    border: 2px dashed #999;
    border-bottom: none;
    .footerMenuUl {
      padding: 0;
      margin: 0;
      overflow: hidden;
      clear: both;
      border-bottom: 1px solid #3B70D0;
      li {
        float: left;
        width: 12.5%;
        text-align: center;
        list-style: none;
        height: 60px;
        line-height: 60px;
        a {
          display: block;
          width: 100%;
          white-space: nowrap; 
          overflow: hidden; 
          text-overflow: ellipsis;
          font-size: 14px;
          color: #fff;
        }
      }
    }
  }
</style>