generated from maochaoying/dreamworks-frontend-template
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.
137 lines
3.2 KiB
137 lines
3.2 KiB
<template>
|
|
<div class="sub_navigation_container">
|
|
<img class="back_icon" :src="Left" @click="backPage" />
|
|
<p class="title">{{ title }}</p>
|
|
<img class="menu" :src="Menu" v-if="!drawer" @click="openDrawer" />
|
|
<div class="menu" v-else></div>
|
|
<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')">软硬件研发</div>
|
|
<div class="btn" @click="toPage('/product')">产品研发</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import Menu from '@/static/img/banner/liebiao2.png'
|
|
import Left from '@/static/img/banner/arrow.png'
|
|
import { ref, onMounted } from 'vue'
|
|
import Close from '@/static/img/banner/x.png'
|
|
import { useRouter } from 'vue-router'
|
|
const router = useRouter()
|
|
const drawer = ref(false)
|
|
|
|
const openDrawer = () => {
|
|
drawer.value = true
|
|
}
|
|
const toPage = path => {
|
|
router.push(path)
|
|
}
|
|
const props = defineProps({
|
|
title: {
|
|
type: String,
|
|
},
|
|
})
|
|
const backPage = () => {
|
|
history.back()
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.sub_navigation_container {
|
|
height: $sub-header-height;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 16px 18px;
|
|
box-sizing: border-box;
|
|
background: #efefef;
|
|
z-index: 222;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
.back_icon {
|
|
width: 8px;
|
|
height: 15px;
|
|
}
|
|
.title {
|
|
font-size: 10px;
|
|
font-family: Alibaba PuHuiTi;
|
|
font-weight: 500;
|
|
color: #262626;
|
|
}
|
|
.menu {
|
|
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>
|