cxyy-web/src/components/custom/custom-layout.vue

<template>
  <div id="c-layout">
    <div class="header">
      <el-col :span="24" class="header_1">
        <div class="left">
          <el-image class="image" :src="siteInfo.logoUrl" fit="fill" />
          <div class="content">
            <text class="title">{{ siteInfo.zhTitle }}</text>
          </div>
        </div>
        <div class="right">
          <span @click="toLogin('0')">注册</span>
          <span>|</span>
          <span @click="toLogin('1')">登录</span>
        </div>
      </el-col>
      <el-col :span="24" class="header_2">
        <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 ? '#1073ff' : 'transparent',
              color: item.hover ? '#ffffff' : ''
            }"
            @mouseover="handleMouseOver(index)"
            @mouseleave="handleMouseLeave(index)"
          >
            <span>{{ item.title }}</span>
          </div>
        </el-col>
        <div v-if="info && info.children">
          <div class="info_1" v-if="info.key == '3'">
            <el-col :span="12" 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>
          </div>
          <div class="info_2" 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>
          </div>
        </div>
      </el-col>
    </div>
    <div class="main">
      <slot></slot>
    </div>
    <div class="footer" v-if="is_foot">
      <div class="footer_1">
        <div class="left">
          <el-image class="image" :src="footInfo.Logo" fit="fill" />
          <div class="title">电话：{{ footInfo.Phone }}</div>
          <div class="title">邮箱：{{ footInfo.Email }}</div>
          <div class="title">地址：{{ footInfo.Address }}</div>
        </div>
        <div class="right">
          <el-image class="image" :src="footInfo.Code" fit="fill" />
          <div class="title" @click="toHelp">关于我们</div>
        </div>
      </div>
      <div class="footer_2">
        {{ footInfo.Copyright }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { siteInfo, footInfo, menuList } from '@/layout/site'
// 接口
import { DesignStore } from '@/store/api/platform/design'
const designStore = DesignStore()
const router = useRouter()
const route = useRoute()
const $checkRes = inject('$checkRes')
const props = defineProps({
  is_foot: { type: Boolean, default: () => true }
})
const configInfo = ref({})
const data = ref([])
const info = ref({})
// 请求
onMounted(async () => {
  search()
})
const search = async () => {
  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 ($checkRes(result)) configInfo.value = result.data[0] || {}
}
// 登录|注册
const toLogin = (status) => {
  router.push({ path: '/login', query: { status } })
}
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 toHelp = () => {
  router.push({ path: `/help` })
}
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
    }
  }
}
</script>

<style lang="scss" scoped>
#c-layout {
  .header {
    padding: 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 5px 0;
    background: $global-color-fff;
    .header_1 {
      display: flex;
      justify-content: space-between;
      .left {
        display: flex;
        .image {
          height: 60px;
          width: 240px;
          margin: 0 5px 0 0;
        }
        .content {
          padding: 10px 0 0 0;
          font-size: $global-font-size-34;
          font-family: 'Comic Sans MS', cursive;
        }
      }
      .right {
        display: flex;
        padding: 10px 0 0 0;
        font-size: $global-font-size-20;
        color: $global-color-107;
        cursor: pointer; /* 改变鼠标样式为手形 */
        span {
          margin: 0 5px;
        }
      }
    }
    .header_2 {
      .list {
        display: flex;
        justify-content: space-around;
        .text {
          text-align: center;
          padding: 0 10px;
          height: 58px;
          line-height: 58px;
          font-family: Microsoft YaHei;
          font-size: $global-font-size-24;
          color: #333333;
          cursor: pointer; /* 改变鼠标样式为手形 */
        }
      }

      .info_1 {
        position: absolute;
        left: 2%;
        top: 128px;
        display: flex;
        padding: 10px 0;
        background: $global-color-107;
        width: 700px;
        .list_1 {
          margin: 0 10px 0 0;
          .title {
            margin: 5px 0;
            font-size: $global-font-size-20;
            font-weight: 600;
            text-align: center;
            color: #fff;
            cursor: pointer; /* 改变鼠标样式为手形 */
          }
          .list_1_1 {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            margin: 5px 0;
            .title1 {
              width: 120px;
              margin: 5px;
              padding: 5px;
              text-align: center;
              color: #ffffff;
              font-size: $global-font-size-18;
              cursor: pointer; /* 改变鼠标样式为手形 */
            }
          }
        }
      }
      .info_2 {
        position: absolute;
        left: 69.3%;
        top: 128px;
        display: flex;
        padding: 10px 0;
        background: $global-color-107;
        .list_2 {
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 145px;
          margin: 5px 0;
          .title1 {
            width: 110px;
            margin: 5px;
            padding: 5px;
            text-align: center;
            color: #ffffff;
            font-size: $global-font-size-18;
            cursor: pointer; /* 改变鼠标样式为手形 */
          }
        }
      }
    }
  }
  .main {
    min-height: 61vh;
  }
  .footer {
    padding: 0 5px 10px 5px;
    background-color: $global-color-2D2;
    color: $global-color-fff;
    font-size: $global-font-size-18;
    .footer_1 {
      padding: 10px 0;
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid $global-color-bbb;
      .left {
        .title {
          margin: 5px 0 0 0;
        }
      }
      .right {
        text-align: center;
        .title {
          margin: 5px 0 0 0;
        }
      }
    }
    .footer_2 {
      padding: 10px 0 0 0;
    }
  }
}
@media screen and (max-width: 1280px) {
  #c-layout {
    min-width: 1920px;
    margin: 0 auto;
  }
}
@media screen and (min-width: 1921px) {
  #c-layout {
    max-width: 1920px;
    margin: 0 auto;
  }
}
@media screen and (max-width: 1746px) {
  #c-layout {
    .header {
      .header_2 {
        .list {
          .text {
            font-size: $global-font-size-18;
          }
        }
      }
    }
  }
}
</style>