maochaoying
/
hjyd-mobile
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

weitiao

master
maochaoying 2 years ago
parent
b09bad206f
commit
42cb4c421c
3 changed files with 131 additions and 124 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 124
      src/components/SubNavigation.vue
  2. 123
      src/components/Top.vue
  3. 8
      src/pages/Hardware.vue

124
src/components/SubNavigation.vue
View File

@ -4,20 +4,20 @@
<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" @click="hidePanel">
<img :src="Close" class="close" alt="" @click="drawer = false" />
<div class="content" id="sub_navi_tab">
<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 class="modal_drawer" v-if="drawer" @click="hidePanel">
<img :src="Close" class="close" alt="" @click="drawer = false" />
<div class="content" id="sub_navi_tab">
<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>
@ -66,13 +66,15 @@ const backPage = () => {
align-items: center;
justify-content: space-between;
padding: 16px 18px;
box-sizing: border-box;
background: #efefef;
z-index: 222;
z-index: 999;
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100vw;
overflow: hidden;
box-sizing: border-box;
.back_icon {
width: 8px;
height: 15px;
@ -87,60 +89,60 @@ const backPage = () => {
width: 18px;
height: 12px;
}
.modal_drawer {
position: fixed;
top: 0;
}
.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;
z-index: 999;
background: rgba(0, 0, 0, 0.67);
.close {
position: absolute;
right: 20px;
width: 13px;
height: 13px;
top: 17px;
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;
}
}
.content {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 348px;
background: #fff;
border-top-right-radius: 20px;
border-top-left-radius: 20px;
.btn_wrap {
flex: 1;
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 {
align-items: center;
justify-content: space-evenly;
.btn {
font-size: 13px;
font-family: Alibaba PuHuiTi;
font-weight: 400;
color: #000000;
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;
}
justify-content: center;
}
}
}

123
src/components/Top.vue
View File

@ -16,22 +16,22 @@
v-if="!drawer"
@click="openDrawer"
/>
<div class="modal_drawer" v-if="drawer" @click="hidePanel">
<img :src="Close" class="close" alt="" @click="drawer = false" />
<div class="content" id="content_tab">
<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(`${isHard ? '/' : '/hardware'}`)">
{{ isHard ? '工业设计' : '软硬件研发' }}
</div>
<!-- <div class="btn" @click="toPage('/product')">产品研发</div> -->
</div>
<div class="modal_drawer" v-if="drawer" @click="hidePanel">
<img :src="Close" class="close" alt="" @click="drawer = false" />
<div class="content" id="content_tab">
<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(`${isHard ? '/' : '/hardware'}`)">
{{ isHard ? '工业设计' : '软硬件研发' }}
</div>
<!-- <div class="btn" @click="toPage('/product')">产品研发</div> -->
</div>
</div>
</div>
@ -116,61 +116,64 @@ const scrollToTop = () => {
width: 18px;
height: 12px;
}
.modal_drawer {
position: fixed;
top: 0;
}
.modal_drawer {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100vh;
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;
z-index: 999;
background: rgba(0, 0, 0, 0.67);
.close {
position: absolute;
right: 20px;
width: 13px;
height: 13px;
top: 17px;
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;
}
}
.content {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 348px;
background: #fff;
border-top-right-radius: 20px;
border-top-left-radius: 20px;
.btn_wrap {
flex: 1;
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 {
align-items: center;
justify-content: space-evenly;
.btn {
font-size: 13px;
font-family: Alibaba PuHuiTi;
font-weight: 400;
color: #000000;
width: 100%;
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;
width: 100%;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
justify-content: center;
}
}
}

8
src/pages/Hardware.vue
View File

@ -26,11 +26,11 @@
<div class="img_wrap">
<img :src="Dian" class="img" alt="" />
<div class="gif_wrap">
<img :src="Gif1" class="left_img" alt="" />
<img :src="Gif2" class="left_img" alt="" />
<img :src="SAccelerate" class="right_img" alt="" />
</div>
<div class="gif_wrap">
<img :src="Gif2" class="left_img" alt="" />
<img :src="Gif1" class="left_img" alt="" />
<img :src="TAccelerate" class="right_img" alt="" />
</div>
</div>
@ -73,7 +73,9 @@ const handleRelease = e => {
<style lang="scss" scoped>
.hardware_home_container {
background: #f5f5f5;
padding-bottom: $bottom-height;
margin-bottom: $bottom-height;
max-width: 100vw;
overflow: hidden;
.img_wrap {
padding: 0 7px;
.gif_wrap {

Write Preview
Loading…
Cancel
Save