technique_web3/src/layout/index.vue

<template>
  <div class="layout">
    <div class="top">
      <div class="w_1200">
        <el-row :gutter="20" align="middle">
          <el-col :span="12" class="top_1">
            <!-- <el-image class="images" :src="logoUrl" fit="fill" /> -->
            <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="12" v-if="user && user.id" class="top_2">
            <el-dropdown>
              <el-button size="medium" :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="medium">注册</el-button>
            <el-button @click="toLogin(1)" type="primary" size="medium">登录</el-button>
          </el-col>
        </el-row>
      </div>
      <div class="w_1200">
        <el-col :span="24" class="top_3">
          <el-col :span="24" class="list">
            <div
              class="text"
              v-for="(item, index) in data"
              :key="index"
              @click="selectMenu(item.route)"
              :style="{
                backgroundColor: item.hover ? '#2374ff' : 'transparent',
                color: item.hover ? '#ffffff' : ''
              }"
              @mouseover="handleMouseOver(index)"
              @mouseleave="handleMouseLeave(index)"
            >
              <div>{{ item.title }}</div>
            </div>
          </el-col>
          <div v-if="info && info.children" class="info">
            <el-row v-if="info.key == '3'" style="justify-content: center; margin: 10px 0 0 0">
              <el-col :span="11" class="list_1" v-for="(item, index) in info.children" :key="index">
                <div class="title">{{ item.title }}</div>
                <div class="list_1_1">
                  <div
                    v-for="(tag, indexs) in item.children"
                    :key="indexs"
                    class="title1"
                    @click="selectMenu(tag.route)"
                  >
                    {{ tag.title }}
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row v-else>
              <el-col :span="24" class="list_2">
                <div
                  v-for="(item, index) in info.children"
                  :key="index"
                  class="title1"
                  @click="selectMenu(item.route)"
                >
                  {{ item.title }}
                </div>
              </el-col>
            </el-row>
          </div>
        </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-row :span="24" class="footflex_1">
          <el-col :span="2" class="left"> 友情链接</el-col>
          <el-col :span="22" class="right">
            <span v-for="(item, index) in footInfo.linkList" :key="index" @click="toLink(item)">{{
              item.name
            }}</span>
          </el-col>
        </el-row> -->
        <el-row :span="24" class="footflex_2">
          <el-col :span="21" class="left">
            <el-col :span="24" class="left_1">
              <el-image class="images" :src="logoBottom" fit="fill" />
            </el-col>
            <el-col :span="24" class="left_2"> 电话：{{ footInfo.Phone }} </el-col>
            <el-col :span="24" class="left_2"> 邮箱：{{ footInfo.Email }} </el-col>
            <el-col :span="24" class="left_2"> 地址：{{ footInfo.Address }} </el-col>
          </el-col>
          <el-col :span="3" class="right">
            <el-col :span="24" class="right_1">
              <el-image class="images" :src="footInfo.Code" fit="fill" />
            </el-col>
            <el-col :span="24" class="right_2" @click="toHelp('1')">关于我们</el-col>
          </el-col>
        </el-row>
        <el-row :span="24" class="footflex_3">
          {{ footInfo.Copyright }}
        </el-row>
      </div>
    </div>
  </div>
</template>

<script setup>
// 图片引入
// import logoUrl from '/images/logo-jilin.png'
import logoBottom from '/images/logo-jilinbai.png'
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()
import { UserStore } from '@/store/user'
const userStore = UserStore()
const user = computed(() => userStore.user)
const data = ref([])
const info = 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
  for (const val of menuList) {
    if (route.name === val.route) val.hover = true
    else val.hover = false
  }
  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) => {
  for (const val of data.value) {
    if (route.name === val.route) val.hover = true
    else val.hover = false
  }
  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 handleMouseOver = (index) => {
  data.value[index].hover = true
  info.value = data.value[index]
}
const handleMouseLeave = (index) => {
  data.value[index].hover = false
  // info.value = {}
  const arr = data.value.every((i) => i.hover === false)
  if (arr) {
    for (const val of data.value) {
      if (route.name === val.route) val.hover = true
      else val.hover = false
    }
  }
}
// 退出登录
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">
.layout {
  position: relative;
  .top {
    position: sticky;
    top: 0;
    padding: 5px 0;
    z-index: 1000;
    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: 140px;
        margin: 0 5px 0 0;
      }
      .images {
        height: auto;
        width: 335px;
      }

      .content {
        margin: 0 0 0 5px;

        .title {
          margin: 0 0 5px 0;
          font-size: $global-font-size-24;
          font-weight: bold;
        }

        .english {
          margin: 0 0 0 5px;
          font-size: $global-font-size-14;
          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;
      .list {
        display: flex;
        padding: 10px 0;
        .text {
          margin: 0 2px 0 0;
          padding: 10px;
          font-family: Microsoft YaHei;
          font-size: $global-font-size-18;
          color: #333333;
          cursor: pointer; /* 改变鼠标样式为手形 */
        }
      }
      .info {
        width: 100%;
        position: absolute;
        left: 0;
        background: #ffffff;
        padding: 10px 0;
        .list_1 {
          margin: 0 10px 0 0;
          border: #e4e4e4 1px dashed;
          .title {
            margin: 5px 0;
            font-size: $global-font-size-18;
            font-weight: 600;
            text-align: center;
            color: #252f49;
          }
          .title::before {
            content: '';
            position: absolute;
            transform: translateY(-50%);
            top: 15px;
            margin-left: -70px;
            width: 40px;
            height: 1px;
            border-bottom: 1px #252f49 solid;
          }
          .title::after {
            content: '';
            position: absolute;
            transform: translateY(-50%);
            top: 15px;
            margin-left: 30px;
            width: 40px;
            height: 1px;
            border-bottom: 1px #252f49 solid;
          }
          .list_1_1 {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            margin: 5px 0;
            .title1 {
              width: 110px;
              margin: 8px;
              padding: 5px;
              text-align: center;
              border: 1px #fff solid;
              background-image: linear-gradient(to bottom, #f8f3ff 0%, #e0e8fe 100%);
              border-radius: 4px;
            }
            .title1:hover {
              background: #2280ff;
              color: #ffffff;
            }
          }
        }
        .list_2 {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          margin: 5px 0;
          .title1 {
            width: 110px;
            margin: 8px;
            padding: 5px;
            text-align: center;
            border: 1px #fff solid;
            background-image: linear-gradient(to bottom, #f8f3ff 0%, #e0e8fe 100%);
            border-radius: 4px;
          }
          .title1:hover {
            background: #2280ff;
            color: #ffffff;
          }
        }
      }
    }
  }
  .center {
    min-height: 74.2vh;
  }
  .bottom {
    position: relative;
    width: 100%;
    padding: 7px 0;
    font-size: $global-font-size-20;
    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: $global-font-size-20;
      margin-bottom: 12px;
    }
  }

  .footflex {
    .footflex_1 {
      display: flex;
      align-items: flex-end;
      padding: 30px 0;
      border-bottom: 1px solid #444444;
      .left {
        font-size: $global-font-size-20;
        font-family: 'Microsoft YaHei';
        color: rgb(255, 255, 255);
      }
      .right {
        color: #cccccc;
        font-family: microsoft yahei;
        font-size: $global-font-size-17;
        font-weight: normal;
        text-decoration: none;
        span {
          margin-right: 50px;
        }
        span:hover {
          color: rgb(255, 255, 255);
          cursor: pointer;
        }
      }
    }
    .footflex_2 {
      display: flex;
      padding: 10px 0;
      border-bottom: 1px solid #444444;
      .left {
        font-family: 'Microsoft YaHei';
        color: rgb(204, 204, 204);
        font-size: $global-font-size-18;
        .left_2 {
          margin: 5px 0 0 0;
        }
      }
      .right {
        text-align: center;

        .right_1 {
          .image {
            width: 130px;
            height: 130px;
          }
        }
        .right_2 {
          font-family: 'Microsoft YaHei';
          font-size: $global-font-size-18;
          color: rgb(204, 204, 204);
        }
        .right_2:hover {
          color: rgb(255, 255, 255);
          cursor: pointer;
        }
      }
    }
    .footflex_3 {
      padding: 10px 0;
      font-family: 'Microsoft YaHei';
      font-size: $global-font-size-18;
      color: rgb(204, 204, 204);
    }
  }
}
</style>