yzzn-middleground-supplier/src/views/supplier/loginPagePopularizeModuleConfig/preview/topMenu.vue

<template>
  <div class="topMenu" v-loading="preLoading">
    <div class="topLogo">
      <img
          src="@/assets/images/new_text_log.png"
          style="width: 100%; height: 100%"
      />
    </div>
    <div class="menuSty">
      <el-dropdown
          v-for="(item,index) in menuList"
          style="margin-right: 40px"
          :key="index"
      >
        <span class="el-dropdown-link">
          {{ item.name }}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item v-for="(it,idx) in item.data" :key="idx">{{
              it.name
            }}
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div class="topBtn">
      <span class="mobileSty">
        <i class="el-icon-phone-outline"></i>
        0513-88888888
      </span>
      <el-button
          type="primary"
          class="btnSty"
      >注册
      </el-button
      >
    </div>
  </div>
</template>

<script>
import { getConfigData } from '@/api/infra/config'

export default {
  name: 'topMenu',
  data() {
    return {
      menuList: [],
      preLoading: true
    }
  },
  created() {
    getConfigData('login_menu').then(res => {
      if (res.data) {
        this.menuList = JSON.parse(res.data.value)
        console.log('config', this.menuList)
        this.preLoading = false
      }
    })
  },
  beforeCreate() {
  },
  methods: {
    menuPre(data, index) {
      this.menuList.forEach(item => {
        item.data = []
      })
      this.menuList[index].data.push(data)
      console.log(this.menuList)
    },
    /**
     * 跳转登录页面
     */
    toLogin() {
      this.$router.push('/login').catch(() => {
      })
    },
    /**
     * 跳转注册页面
     */
    toRegister() {
      this.$router.push('/register').catch(() => {
      })
    }
  }
}
</script>

<style scoped>
.menuSty {
  float: left;
  width: 40%;
  height: 100%;
  display: flex;
  align-items: center;
}

.mobileSty {
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: 400;
  font-size: 18px;
  color: #333333;
  line-height: 18px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.btnSty {
  font-size: 20px;
  width: 102px;
  height: 50px;
  margin-left: 3%;
}

.topBtn {
  float: left;
  width: 28%;
  height: 100%;
  display: flex;
  align-items: center;
}

.topLogo {
  float: left;
  width: 20%;
  height: 100%;
  margin-left: 12%;
}

.topMenu {
  background: #f0f7ff;
  height: 8vh;
}

.dropdown-link-text {
  font-size: 20px;
  font-weight: bold;
}

.el-dropdown-link {
  cursor: pointer;
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: 400;
  font-size: 16px;
  color: #333333;
  line-height: 18px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.el-icon-arrow-down {
  font-size: 12px;
}
</style>