technique_web3/src/layout/index.vue

<template>
  <div class="common-layout">
    <div class="top">
      <div class="w_1200">
        <el-row :gutter="20" align="middle">
          <el-col :span="12" class="top_1">
            <el-image
              class="image"
              v-if="configInfo && configInfo.logoUrl && configInfo.logoUrl.length > 0"
              :src="configInfo.logoUrl[0].url"
              fit="fill"
            />
            <el-image class="image" v-else :src="siteInfo.logoUrl" fit="fill" />
            <div class="content">
              <text class="title">{{ configInfo.zhTitle || siteInfo.zhTitle }}</text>
              <text class="english">{{ siteInfo.zhBrief }}</text>
            </div>
          </el-col>
          <el-col :span="12" v-if="user && user.id" class="top_2">
            <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="toCommon(2)">个人中心</el-dropdown-item>
                  <el-dropdown-item @click="toLogout">注销</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </el-col>
          <el-col :span="12" v-else class="top_2">
            <el-button @click="toLogin(2)" type="primary" size="small">注册</el-button>
            <el-button @click="toLogin(1)" type="primary" size="small">登录</el-button>
          </el-col>
        </el-row>
      </div>
      <div class="w_1200">
        <el-col :span="24" class="top_3">
          <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">
                    <template v-slot:default>
                      {{ tag.title }}
                    </template>
                  </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>
      </div>
    </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"
          v-if="foot && foot.Unit && foot.Unit.length > 0"
          :src="foot.Unit[0].url"
          fit="fill"
        />
        <el-image class="image" v-else :src="footInfo.Unit" fit="fill" />
        <el-col :span="12" class="foot_1">
          <div class="footTitle">
            <span>业务洽谈：{{ foot.Phone || footInfo.Phone }}</span>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <span>企业邮箱：{{ foot.Email || footInfo.Email }}</span>
          </div>
          <div class="footTitle">地 址：{{ foot.Address || footInfo.Address }}</div>
          <div class="footTitle">版权所有：{{ foot.Copyright || footInfo.Copyright }}</div>
          <div class="footTitle">技术支持：{{ foot.Company || 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('3')">联系我们</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"
            v-if="foot && foot.Code && foot.Code.length > 0"
            :src="foot.Code[0].url"
            fit="fill"
          />
          <el-image class="image" v-else :src="footInfo.Code" fit="fill" />
          <el-image
            class="image"
            v-if="foot && foot.Code && foot.Code.length > 0"
            :src="foot.Code[0].url"
            fit="fill"
          />
          <el-image class="image" v-else :src="footInfo.Code" fit="fill" />
        </el-col>
      </div>
    </div>
  </div>
</template>

<script setup>
import { siteInfo, footInfo, menuList } from '@/layout/site'
// 接口
import { TagsStore } from '@/store/api/system/tags'
const store = TagsStore()
import { DesignStore } from '@/store/api/platform/design'
const designStore = DesignStore()
const router = useRouter()
const route = useRoute()
const current = ref(route.name || 'one')
import { UserStore } from '@/store/user'
const userStore = UserStore()
const user = computed(() => userStore.user)
const data = ref([])
const configInfo = ref({ logoUrl: [], Unit: [], Code: [] })
const foot = ref({})
// 请求
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
  data.value = menuList
  // 基础设置
  const result = await designStore.query({})
  if (res.errcode == '0' && res.total > 0) {
    configInfo.value = result.data[0] || {}
    foot.value = result.data[0].footInfo || {}
  }
}
const selectMenu = (item, query) => {
  current.value = item
  router.push({ path: `/${item}`, query })
}
// 登录|注册
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 toCommon = (type) => {
  if (type == '1') router.push('/chat')
  else if (type == '2') router.push('/center')
  else if (type == '3') router.push('/sign')
}
// 退出登录
const toLogout = () => {
  userStore.logOut()
  router.push('/login')
}
watch(
  route,
  (newVal) => {
    if (newVal && newVal.name) {
      if (newVal.query?.type) selectMenu(newVal.name, newVal.query)
      else selectMenu(newVal.name)
    }
  },
  {
    immediate: true //初始化立即执行
  }
)
// provide
provide('selectMenu', selectMenu)
</script>

<style scoped lang="scss">
.common-layout {
  .top {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #ffffff;

    .current {
      border-bottom: 2px solid #409eff;
      background-color: #ecf5ff;
      :deep(.el-sub-menu__title) {
        color: #409eff !important;
      }
    }

    .top_1 {
      display: flex;
      align-items: center;
      margin: 10px 0 0 0;

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

      .content {
        margin: 0 0 0 5px;

        .title {
          margin: 0 0 5px 0;
          font-size: 20px;
          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_2 {
      display: flex;
      justify-content: flex-end;
      .example-showcase .el-dropdown-link {
        cursor: pointer;
        color: #1c66e7;
        display: flex;
        align-items: center;
      }
    }
    .top_3 {
      margin: 5px 0 0 0;
    }
  }
  .center {
    min-height: 74.2vh;
  }
  .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>