You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
120 lines
2.8 KiB
120 lines
2.8 KiB
<template>
|
|
<div class="top_container">
|
|
<img class="logo" :src="Logo" alt="" />
|
|
<img class="fold_icon" :src="Icon" alt="" @click="openDrawer" />
|
|
<div class="modal_drawer" v-if="drawer">
|
|
<img :src="Close" class="close" alt="" @click="drawer = false" />
|
|
<div class="content">
|
|
<div class="icon_wrap">
|
|
<p class="icon"></p>
|
|
</div>
|
|
<div class="btn_wrap">
|
|
<div class="btn" @click="toPage('/company')">公司简介</div>
|
|
<div class="btn" @click="toPage('/case-show')">案例展示</div>
|
|
<div class="btn" @click="toPage('/contact')">联系我们</div>
|
|
<div class="btn" @click="toPage('/recruit')">招贤纳士</div>
|
|
<div class="btn" @click="toPage('/hardware-case')">软硬件研发</div>
|
|
<div class="btn" @click="toPage('/product')">产品研发</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
import Close from '@/static/img/banner/x.png'
|
|
import Logo from '@/static/img/banner/logo.png'
|
|
import Icon from '@/static/img/banner/liebiao.png'
|
|
import { useRouter } from 'vue-router'
|
|
const router = useRouter()
|
|
const drawer = ref(false)
|
|
|
|
const openDrawer = () => {
|
|
drawer.value = true
|
|
}
|
|
const toPage = path => {
|
|
router.push(path)
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.top_container {
|
|
padding: 14px 18px;
|
|
width: 100vw;
|
|
overflow: hidden;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
.logo {
|
|
width: 85px;
|
|
height: 17px;
|
|
}
|
|
.fold_icon {
|
|
width: 18px;
|
|
height: 12px;
|
|
}
|
|
.modal_drawer {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 999;
|
|
background: rgba(0, 0, 0, 0.67);
|
|
.close {
|
|
position: absolute;
|
|
right: 20px;
|
|
width: 13px;
|
|
height: 13px;
|
|
top: 17px;
|
|
}
|
|
.content {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
height: 348px;
|
|
background: #fff;
|
|
border-top-right-radius: 20px;
|
|
border-top-left-radius: 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
.icon_wrap {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 12px 0 0 0;
|
|
.icon {
|
|
width: 24px;
|
|
height: 2px;
|
|
border-radius: 1px;
|
|
background: #000;
|
|
}
|
|
}
|
|
.btn_wrap {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: space-evenly;
|
|
.btn {
|
|
font-size: 13px;
|
|
font-family: Alibaba PuHuiTi;
|
|
font-weight: 400;
|
|
color: #000000;
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|