technology_web2/src/components/head.vue

<template>
  <div id="head">
    <el-row>
      <el-col :span="24" class="head">
        <div class="w_1200" v-if="is_head">
          <el-row :gutter="20" class="one">
            <el-row :gutter="10" class="left">
              <el-col :span="4">
                <el-image class="image" :src="siteInfo.logoUrl" fit="fill" />
              </el-col>
              <el-col :span="20">
                <div class="title">{{ siteInfo.zhTitle }}</div>
                <div class="English">{{ siteInfo.zhEnglish }}</div>
              </el-col>
            </el-row>
            <el-col :span="8" class="right">
              <a-input-search v-model:value="input" placeholder="请输入您想搜索的内容" enter-button @search="onSearch" />
            </el-col>
            <el-col :span="4" class="button">
              <a-space wrap>
                <a-button @click="toLogin" type="primary">登录</a-button>
                <a-button @click="toRegister">注册</a-button>
              </a-space>
            </el-col>
          </el-row>
        </div>
        <el-col :span="24" class="two" v-if="is_menu">
          <a-menu @select="selectMenu" v-model:selectedKeys="current" mode="horizontal" theme="dark" :items="menuList" />
        </el-col>
        <el-col :span="24" class="thr">
          <slot name="info"></slot>
        </el-col>
        <div class="foot" v-if="is_foot">
          <div class="w_1200 footflex">
            <el-image class="image" src="/src/assets/unit.png" fit="fill" />
            <el-col :span="12" class="foot_1">
              <div class="footTitle">
                <span>业务洽谈：0431-81165166</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>企业邮箱：jlpstm@126.com</span></div>
              <div class="footTitle">地 址：长春朝阳区前进大街1244号（吉林省科技厅科研园）</div>
              <div class="footTitle">版权所有：Copyright©2007-2023 吉林省创新指导中心 │ 吉ICP备14005689号</div>
              <div class="footTitle">技术支持：长春市福瑞科技有限公司</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="/src/assets/code.png" fit="fill" />
              <el-image class="image" src="/src/assets/code.png" fit="fill" />
            </el-col>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script setup lang="ts">
import type { Ref } from 'vue';
import { ref, toRefs, watch } from 'vue';
import { siteInfo } from '@/layout/site';
import { MenuProps } from 'ant-design-vue';
import { useRouter } from 'vue-router';
const router = useRouter();
const props = defineProps({
  is_head: { type: Boolean, default: true },
  is_menu: { type: Boolean, default: true },
  is_foot: { type: Boolean, default: true },
  currentIndex: { type: String, default: 'home' }
});
const { is_menu, is_head, is_foot, currentIndex } = toRefs(props);
const current = ref<any>([currentIndex.value]);
const menuList = ref<MenuProps['items']>([
  {
    key: 'home',
    label: '首页',
    title: '首页'
  },
  {
    key: 'tran',
    label: '交易大厅',
    title: '交易大厅'
  },
  {
    key: 'achieve',
    label: '成果大厅',
    title: '成果大厅'
  },
  {
    key: 'demand',
    label: '需求大厅',
    title: '需求大厅'
  },
  {
    key: 'service',
    label: '服务大厅',
    title: '服务大厅'
  },
  {
    key: 'activity',
    label: '活动大厅',
    title: '活动大厅'
  }
]);
const input: Ref<any> = ref('');
// 选择菜单
const emit = defineEmits(['selectMenu']);
const selectMenu = (item) => {
  emit('selectMenu', item);
};
/*监听props*/
watch(props, (newProps) => {
  current.value = [newProps.currentIndex];
});

// 查询
const onSearch = (searchValue: string) => {
  console.log('use value', searchValue);
  console.log('or use this.value', input.value);
};
// 登录
const toLogin = (status) => {
  router.push({ path: '/login', query: { status } });
};
// 去注册
const toRegister = () => {
  router.push({ path: '/register' });
};
// 帮助中心
const toHelp = (type) => {
  router.push({ path: '/help', query: { type } });
};
</script>
<style scoped lang="scss">
.head {
  .one {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;

    .left {
      .title {
        font-family: Helvetica, Arial, 'Hiragino Sans GB', 'Microsoft Yahei', '微软雅黑', STHeiti, '华文细黑', sans-serif;
        font-size: 28px;
        color: #121834;
        line-height: 32px;
        font-weight: 500;
        padding-bottom: 8px;
      }

      .English {
        font-size: 15px;
      }
    }
  }

  .two {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 10px 0;
    background: #001529;
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 99999;
  }
}

.foot {
  padding: 5px 0;
  font-size: 13px;
  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>