technique_web2/src/layout/index.vue

<template>
  <div class="common-layout">
    <div class="top">
      <el-row :gutter="20" align="middle">
        <el-col :span="6" class="top_1">
          <el-image class="image" :src="siteInfo.logoUrl" fit="fill" />
          <div class="content">
            <text class="title">{{ siteInfo.zhTitle }}</text>
            <!-- <text class="english">{{ siteInfo.zhBrief }}</text> -->
          </div>
        </el-col>
        <el-col :span="14">
          <el-menu :default-active="current" mode="horizontal" @select="selectMenu">
            <template v-for="item in data" :key="item._id">
              <template v-if="item.type === '0'">
                <el-sub-menu :index="item._id" :class="[current == item.href ? 'current' : '']">
                  <template #title>
                    <span @click="selectMenu(item.href)">{{ item.title }}</span>
                  </template>
                  <el-menu-item v-for="tag in item.children" :key="tag._id" :index="tag.href">{{
                    tag.title
                  }}</el-menu-item>
                </el-sub-menu>
              </template>
              <template v-else-if="item.type === '1'">
                <el-menu-item :index="item.href"> {{ item.title }}</el-menu-item>
              </template>
            </template>
          </el-menu>
        </el-col>
        <el-col :span="4">
          <el-row :gutter="20">
            <el-col :span="6" class="top_2">
              <el-button :icon="Search" size="small">搜索</el-button>
            </el-col>
            <el-col :span="6" class="top_2">
              <el-dropdown>
                <el-button size="small" :icon="Edit">发布</el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item>发布需求</el-dropdown-item>
                    <el-dropdown-item>发布成果</el-dropdown-item>
                    <el-dropdown-item>发布项目</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </el-col>
            <el-col :span="6" class="top_2" v-if="user && user._id">
              <el-button :icon="Bell" size="small">消息</el-button>
            </el-col>
            <el-col :span="6" v-if="user && user._id" class="top_3">
              <el-dropdown>
                <el-button size="small" :icon="User" type="primary">
                  {{ user.nick_name || '游客' }}
                </el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="toOpen">管理中心</el-dropdown-item>
                    <el-dropdown-item @click="toCenter">我的收藏</el-dropdown-item>
                    <el-dropdown-item @click="toCenter">个人中心</el-dropdown-item>
                    <el-dropdown-item @click="toLogout">注销</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </el-col>
            <el-col :span="10" v-else class="top_3">
              <el-button @click="toLogin(1)" type="primary" size="small">登录</el-button>
              <el-button @click="toLogin(2)" type="primary" size="small">注册</el-button>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>
    <div class="center">
      <el-col :span="24" class="container">
        <router-view :style="viewStyle"></router-view>
      </el-col>
    </div>
    <div class="bottom">
      <div class="w_1200 footflex">
        <el-image class="image" :src="unit" fit="fill" />
        <el-col :span="12" class="foot_1">
          <div class="footTitle">
            <span>业务洽谈：{{ footInfo.Phone }}</span>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <span>企业邮箱：{{ footInfo.Email }}</span>
          </div>
          <div class="footTitle">地 址：{{ footInfo.Address }}</div>
          <div class="footTitle">版权所有：{{ footInfo.Copyright }}</div>
          <div class="footTitle">技术支持：{{ footInfo.Company }}</div>
        </el-col>
        <el-col :span="3" class="foot_2">
          <div class="footTop">关于我们</div>
          <div class="footTitle footflex1">
            <span class="footSpan" @click="toHelp('1')">关于我们</span>
            <span class="footSpan" @click="toHelp('2')">意见反馈</span>
          </div>
          <div class="footTitle footflex1">
            <span class="footSpan" @click="toHelp('3')">联系我们</span>
            <span class="footSpan" @click="toHelp('4')">法律条款</span>
          </div>
        </el-col>
        <el-col :span="4" class="foot_3 footflex">
          <el-image class="image" :src="code" fit="fill" />
          <el-image class="image" :src="code" fit="fill" />
        </el-col>
      </div>
    </div>
  </div>
</template>

<script setup>
import { siteInfo, footInfo, menuList } from '@/layout/site'
import { Search, Edit, User, Bell } from '@element-plus/icons-vue'
// 接口
import { TagsStore } from '@/store/api/system/tags'
const store = TagsStore()
const router = useRouter()
const route = useRoute()
const current = ref(route.name || 'home')
import { UserStore } from '@/store/user'
const userStore = UserStore()
const user = computed(() => userStore.user)
const data = ref([])
// 图片引入
import code from '@/assets/code.png'
import unit from '@/assets/unit.png'

// 请求
onMounted(async () => {
  await search()
})

const search = async () => {
  const res = await store.query({ is_use: '0' })
  if (res.errcode == '0' && res.total > 0) data.value = res.data
  else data.value = menuList
}
const selectMenu = (item) => {
  current.value = item
  router.push({ path: `/${item}` })
}
// 登录|注册
const toLogin = (status) => {
  if (status === 1) router.push({ path: '/login' })
  else router.push({ path: '/register' })
}
// 帮助中心
const toHelp = (type) => {
  router.push({ path: '/help', query: { type } })
}
// 打开管理端
const toOpen = async () => {
  window.location.href = import.meta.env.VITE_APP_HOME
}
// 个人中心
const toCenter = () => {
  router.push('/center')
}
// 退出登录
const toLogout = () => {
  userStore.logOut()
  router.push('/login')
}
// provide
provide('selectMenu', selectMenu)
</script>

<style scoped lang="scss">
.common-layout {
  height: 100%;
  width: 100%;
  .top {
    position: sticky;
    top: 0;
    z-index: 100;
    padding: 10px 80px;
    background: #ffffff;

    .current {
      border-bottom: 2px solid #409eff;
      color: #409eff !important;
    }

    .top_1 {
      display: flex;
      align-items: center;

      .image {
        height: 45px;
        width: 45px;
        margin: 0 5px 0 0;
      }

      .content {
        margin: 0 0 0 5px;

        .title {
          margin: 0 0 5px 0;
          font-size: 23px;
          font-weight: bold;
        }

        .english {
          margin: 0 0 0 5px;
          font-size: 12px;
          opacity: 0.8;
          color: #1c66e7;
        }
      }
    }

    :deep(.ant-tabs-nav) {
      margin: 0 !important;
    }

    :deep(.ant-tabs-nav::before) {
      border: 0 !important;
    }

    :deep(.el-menu) {
      border: none !important;
    }

    .top_3 {
      display: flex;
      justify-content: space-between;
      .example-showcase .el-dropdown-link {
        cursor: pointer;
        color: #1c66e7;
        display: flex;
        align-items: center;
      }
    }
  }
  .center {
    min-height: 77.3vh;
  }
  .bottom {
    width: 100%;
    padding: 7px 0;
    font-size: 14px;
    background-color: #2e3546;
    color: #f0f2f5;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
      'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
      'Noto Color Emoji';
    font-variant: tabular-nums;
    line-height: 1.5715;
    font-feature-settings: 'tnum', 'tnum';

    .image {
      width: 78px;
      height: 78px;
    }

    .footTitle {
      margin: 5px 0 0 0;

      .footSpan {
        margin-bottom: 3px;
      }
    }

    .footTop {
      font-size: 18px;
      margin-bottom: 12px;
    }
  }

  .footflex {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
  }

  .footflex1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
</style>