common/src/components/studio-one-green copy/homeParts/header-1.vue

<template>
  <div id="header-1">
    <el-row>
      <el-col :span="24" class="main">
        <el-col :span="8" class="one">
          <span>欢迎进入</span>
          <span>{{ webInfo.zhTitle }}</span>
        </el-col>
        <el-col :span="16" class="two">
          <el-button
            size="small"
            plain
            v-for="(item, index) in moduleList"
            :key="index"
            @click="modulePath(item)"
            :class="[active == item.active ? 'active' : '']"
            >{{ item.name }}</el-button
          >
          <el-dropdown @command="toDrop">
            <el-button type="danger" plain>
              {{ user && user._id ? user.name || user.unit_name || user.nick_name : '暂无昵称' }}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu>
              <el-dropdown-item icon="el-icon-user" command="center">个人中心</el-dropdown-item>
              <el-dropdown-item icon="el-icon-switch-button" command="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import type { Ref } from 'vue';
import { studio_style_Info } from '../../../layout/site';
// import { studio_style_Info } from '@common/src/layout/site';
let webInfo = studio_style_Info.webInfo;
let active: 3;
let moduleList: Ref<any[]> = ref([]);
let user: Ref<{ _id: string; name: string; unit_name: string; nick_name: string }> = ref({ _id: '', name: '', unit_name: '', nick_name: '' });
const toDrop = () => {};
const modulePath = (value: any) => {
  // console.log(value);
};
</script>

<style lang="scss" scoped>
.main {
  display: flex;
  flex-direction: row;
  .one {
    text-align: left;
    margin: 1vw 0;

    span {
      font-weight: bold;
      font-size: 20px;
    }
    span:nth-child(1) {
      color: #ff0000;
      font-size: 25px;
      padding: 0 5px 0 0;
    }
  }
  .two {
    text-align: right;
    margin: 0.8vw 0;
    button {
      margin: 0 0 0 10px;
    }
    .el-button {
      margin: 0 0 0 10px;
    }
    .active {
      color: #07c4a8;
    }
  }
}
</style>