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">
          <div class="right_1">
            <span @click="toLogin('0')">注册</span>
            <span>|</span>
            <span @click="toLogin('1')">登录</span>
          </div>
          <div class="right_2" @click="toChat">
            <el-icon><Bell /></el-icon>
            <span>消息</span>
          </div>
        </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"
            @click="selectMenu(item.route)"
            :style="{
              backgroundColor: item.hover ? '#1073ff' : 'transparent',
              color: item.hover ? '#ffffff' : ''
            }"
            :key="index"
            @mouseover="handleMouseOver(index)"
            @mouseout="handleMousOut(index)"
          >
            <span>{{ item.title }}</span>
          </div>
        </el-col>
        <el-col :span="24" class="info">
          <div class="info_1" v-if="info.key == '3'">
            <el-col :span="12" class="list_1" v-for="(agg, index) in info.children" :key="index">
              <div class="title">{{ agg.title }}</div>
              <div class="list_1_1">
                <div v-for="(tag, indexs) in agg.children" :key="indexs" class="title1" @click="selectMenu(tag.route)">
                  {{ tag.title }}
                </div>
              </div>
            </el-col>
          </div>
          <div class="info_2" v-if="info.key == '10'">
            <el-col :span="24" class="list_2">
              <div v-for="(tag, indexs) in info.children" :key="indexs" class="title1" @click="selectMenu(tag.route)">
                {{ tag.title }}
              </div>
            </el-col>
          </div>
        </el-col>
      </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 toChat = () => {
  router.push({ path: `/chat` })
}
const handleMouseOver = (index) => {
  data.value[index].hover = true
  info.value = data.value[index]
}
const handleMousOut = (index) => {
  data.value[index].hover = false
  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;
        font-size: $global-font-size-18;
        cursor: pointer; /* 改变鼠标样式为手形 */
        .right_1 {
          display: flex;
          align-items: center;
          color: $global-color-107;
          margin: 0 10px 0 0;
          span {
            margin: 0 5px;
          }
        }
        .right_2 {
          display: flex;
          align-items: center;
          margin: 0 5px;
          span {
            margin: 0 0 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 {
        display: none;
        .info_1 {
          position: absolute;
          left: 0;
          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: 68.1%;
          top: 128px;
          display: flex;
          padding: 10px 0;
          background: $global-color-107;
          width: 145px;
          .list_2 {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: 5px 0;
            .title1 {
              width: 110px;
              margin: 5px;
              padding: 5px;
              text-align: center;
              color: #ffffff;
              font-size: $global-font-size-18;
              cursor: pointer; /* 改变鼠标样式为手形 */
            }
          }
        }
      }
    }
  }
  .header:hover {
    .header_2 {
      .info {
        display: block !important;
      }
    }
  }
  .main {
    min-height: 62vh;
  }
  .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 {
        .image {
          width: 393px;
          height: 70px;
        }
        .title {
          margin: 5px 0 0 0;
        }
      }
      .right {
        text-align: center;
        .image {
          width: 130px;
          height: 130px;
        }
        .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;
  }
}
</style>