|
|
|
@ -0,0 +1,236 @@ |
|
|
|
<template> |
|
|
|
<div class="aboutUs"> |
|
|
|
<div class="banner"> |
|
|
|
<img src="@/assets/images/aboutusbanner.png" alt=""> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="menuTop"> |
|
|
|
<div class="container"> |
|
|
|
<el-menu :default-active="activeIndex" class="el-menu-topBar" mode="horizontal" @select="handleSelect"> |
|
|
|
<el-menu-item index="con1Top">公司介绍</el-menu-item> |
|
|
|
<el-menu-item index="con2Top">核心优势</el-menu-item> |
|
|
|
<el-menu-item index="con3Top">主要业务</el-menu-item> |
|
|
|
<el-menu-item index="con4Top">办公地址</el-menu-item> |
|
|
|
</el-menu> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="container" ref="con1Ref"> |
|
|
|
<div class="titleBox"> |
|
|
|
<titles :text="{h1: '杭州钧安科技', tps: '驾培行业数字化改革全域解决方案开发商'}"/> |
|
|
|
</div> |
|
|
|
<div class="con1"> |
|
|
|
<div class="leftTxt"> |
|
|
|
<div class="p"> |
|
|
|
<div class="text">杭州钧安科技有限公司，成立于2021年1月，是一家专注于为驾培行业数字化改革提供技术支持和服务，为行业提供数字化解决方案的软件开发公司。</div> |
|
|
|
<div class="text">公司的骨干均是在驾培行业、互联网行业、深耕多年有着丰富经验的人员。公司秉承“精心服务，用户至上”的服务宗旨，为驾校提供推广招生服务及驾校管理系统，为用户提供集找驾校、报名、缴费、学车于一体的一站式平台，为行业管理部门提供行业监管治理平台，公司致力于为驾培行业创新、发展，提升行业数字化服务水平做出贡献。</div> |
|
|
|
</div> |
|
|
|
<div class="ul1"> |
|
|
|
<div class="li1"> |
|
|
|
<div class="num_row"> |
|
|
|
<div class="num">123</div> |
|
|
|
<div class="unit">家</div> |
|
|
|
</div> |
|
|
|
<div class="label">服务驾校</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="li1"> |
|
|
|
<div class="num_row"> |
|
|
|
<div class="num">123</div> |
|
|
|
<div class="unit">人</div> |
|
|
|
</div> |
|
|
|
<div class="label">服务教练</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="li1"> |
|
|
|
<div class="num_row"> |
|
|
|
<div class="num">123</div> |
|
|
|
<div class="unit">人</div> |
|
|
|
</div> |
|
|
|
<div class="label">报名学员</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="rightImg"> |
|
|
|
<img src="@/assets/images/onething.png" alt=""> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="con2" ref="con2Ref" style="padding-top: 40px;"> |
|
|
|
<img src="@/assets/images/hxys.png" alt=""> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="con3" ref="con3Ref"> |
|
|
|
<div class="titleBox"> |
|
|
|
<titles :text="{h1: '主要业务', tps: '驾培行业数字化改革全域解决方案开发商'}"/> |
|
|
|
</div> |
|
|
|
<div class="con2"> |
|
|
|
<img src="@/assets/images/gywm.png" alt=""> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="con4" ref="con4Ref"> |
|
|
|
<div class="container"> |
|
|
|
<div class="titleBox"> |
|
|
|
<titles :text="{h1: '办公地点', tps: ''}"/> |
|
|
|
</div> |
|
|
|
<div class="h2">杭州钧安科技有限公司</div> |
|
|
|
<div class="txt">地址：杭州市上城区临丁路1190号尚坤丁兰国际8楼808室</div> |
|
|
|
<div class="txt">电话：0571-5660 6030</div> |
|
|
|
|
|
|
|
<div class="map"> |
|
|
|
<mapCard/> |
|
|
|
<!-- <iframe width="1280" height="400" frameborder='0' scrolling='no' marginheight='0' marginwidth='0' src="https://surl.amap.com/m7DFsyYWeMy"></iframe> --> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
</template> |
|
|
|
|
|
|
|
<script setup> |
|
|
|
import { ref, onMounted, nextTick } from 'vue' |
|
|
|
import titles from '@/components/title/title.vue' |
|
|
|
import mapCard from '@/components/mapCard/mapCard.vue' |
|
|
|
|
|
|
|
|
|
|
|
const con1Ref = ref(null) |
|
|
|
const con2Ref = ref(null) |
|
|
|
const con3Ref = ref(null) |
|
|
|
const con4Ref = ref(null) |
|
|
|
|
|
|
|
const refOfferTop = ref({}) |
|
|
|
|
|
|
|
const activeIndex = ref('aboutUs') |
|
|
|
const handleSelect = (key, keyPath) => { |
|
|
|
console.log(refOfferTop.value[key]) |
|
|
|
window.scrollTo({ |
|
|
|
top: refOfferTop.value[key], |
|
|
|
behavior: 'smooth' // 平滑滚动 |
|
|
|
}); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
onMounted(()=>{ |
|
|
|
setTimeout(()=>{ |
|
|
|
refOfferTop.value.con1Top = con1Ref.value.offsetTop |
|
|
|
refOfferTop.value.con2Top = con2Ref.value.offsetTop |
|
|
|
refOfferTop.value.con3Top = con3Ref.value.offsetTop |
|
|
|
refOfferTop.value.con4Top = con4Ref.value.offsetTop |
|
|
|
|
|
|
|
console.log(con2Ref.value.offsetTop) |
|
|
|
console.log(con3Ref.value.offsetTop) |
|
|
|
}, 1000) |
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
.banner { |
|
|
|
width: 100%; |
|
|
|
img { |
|
|
|
display: block; |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
} |
|
|
|
.map { |
|
|
|
width: 1280px; |
|
|
|
height: 400px; |
|
|
|
border-radius: 10px; |
|
|
|
overflow: hidden; |
|
|
|
margin-top: 30px; |
|
|
|
} |
|
|
|
.menuTop { |
|
|
|
width: 100%; |
|
|
|
height: 54px; |
|
|
|
overflow: hidden; |
|
|
|
background: #F6F7F8; |
|
|
|
} |
|
|
|
.con4 { |
|
|
|
padding: 60px 0 150px 0; |
|
|
|
background: #F6F7F8; |
|
|
|
.h2 { |
|
|
|
font-size: 24px; |
|
|
|
font-weight: 700; |
|
|
|
padding: 20px 0; |
|
|
|
} |
|
|
|
.txt { |
|
|
|
font-size: 16px; |
|
|
|
margin-bottom: 14px; |
|
|
|
} |
|
|
|
} |
|
|
|
.con1 { |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
.leftTxt { |
|
|
|
color: #333; |
|
|
|
padding-right: 60px; |
|
|
|
flex: 1; |
|
|
|
.p { |
|
|
|
font-size: 22px; |
|
|
|
.text { |
|
|
|
margin-bottom: 20px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.ul1 { |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
margin-top: 60px; |
|
|
|
.li1 { |
|
|
|
.num_row { |
|
|
|
display: flex; |
|
|
|
.num { |
|
|
|
font-size: 28px; |
|
|
|
font-weight: 700; |
|
|
|
} |
|
|
|
|
|
|
|
.unit { |
|
|
|
font-size: 12px; |
|
|
|
margin-top: 16px; |
|
|
|
margin-left: 6px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.label { |
|
|
|
font-size: 14px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.rightImg { |
|
|
|
img { |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.con2 { |
|
|
|
width: 100%; |
|
|
|
img { |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
} |
|
|
|
.con3 { |
|
|
|
padding-bottom: 154px; |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
|
|
|
<style lang="scss"> |
|
|
|
.el-menu-topBar { |
|
|
|
border: none !important; |
|
|
|
background: none; |
|
|
|
|
|
|
|
.el-menu-item.is-active { |
|
|
|
border-top: 2px solid var(--el-menu-active-color); |
|
|
|
border-bottom: none !important; |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
