<template>
|
<div>
|
<div class="header">
|
<div class="header-left">
|
<img src="@/assets/img/logo@2x.png" class="logo" alt="">
|
</div>
|
<div class="nav">
|
<div class="nav-item">
|
首页
|
</div>
|
<div class="nav-item" @click="$router.push({ path: '/aboutUs' })">
|
关于我们
|
</div>
|
<div class="nav-item" @click="$router.push({ path: '/webC' })">
|
项目介绍
|
</div>
|
<div class="nav-item" @click="$router.push({ path: '/contact' })">
|
联系我们
|
</div>
|
</div>
|
</div>
|
<div class="flex relative">
|
<div class="w--54" ref="targetElement"></div>
|
<img src="@/assets/img/Home/bg.png" style="width: calc(100% - 54px);" class="ml--54" alt="">
|
<div class="absolute" style="top: 317px;left: 156px;">
|
<div class="w--55 h--5 bgColor1"></div>
|
<div class="fs--68 font-bold mt--32 color1 lh--41">海南众慧智能教育有限公司</div>
|
<ul class="mt--37 color1 fs--28 lh--50">
|
<li>专业致力于外语语言类互联网教育产品研究和开发，</li>
|
<li>助力全世界儿童和成人，通过互联网产品轻松、高效、</li>
|
<li>低成本的学好第二语言、第三语言。</li>
|
</ul>
|
</div>
|
</div>
|
<div class="mt--104">
|
<div class="text-center fs--33 color2 lh--41">涉及业务</div>
|
<div class="fs--58 lh--84 mt--23 text-center">BUSINESS</div>
|
<div class="w--53 h--2 bgColor2" style="margin: 0 auto;"></div>
|
</div>
|
<div class="flex a-center j-center mt--81">
|
<div class="card">
|
<el-image :src="require('@/assets/img/Home/icon1.png')" class="w--94 mt--114 h--97" lazy></el-image>
|
<div class="fs--25 lh--43 mt--40">语言类教育</div>
|
</div>
|
<div class="card ml--53">
|
<el-image :src="require('@/assets/img/Home/icon2.png')" class="w--108 mt--125 h--86" lazy></el-image>
|
<div class="fs--25 lh--43 mt--40">绘本阅读</div>
|
</div>
|
<div class="card ml--53">
|
<el-image :src="require('@/assets/img/Home/icon3.png')" class="w--107 mt--137 h--74" lazy></el-image>
|
<div class="fs--25 lh--43 mt--40">国内外游学&留学</div>
|
</div>
|
<div class="card ml--53">
|
<el-image :src="require('@/assets/img/Home/icon4.png')" class="w--93 mt--129 h--82" lazy></el-image>
|
<div class="fs--25 lh--43 mt--40">互联网产品销售</div>
|
</div>
|
</div>
|
<div class="mt--143 relative">
|
<el-image :src="require('@/assets/img/Home/bg1.png')" class="w100" lazy></el-image>
|
<div class="absolute w100" style="top: 0;">
|
<div class="mt--67 flex a-center j-center">
|
<div class="w--41 h--1 bgColor3"></div>
|
<span class="fs--33 colorWhite ml--30 mr--30">关于我们</span>
|
<div class="w--41 h--1 bgColor3"></div>
|
</div>
|
<div class="text-center fs--58 lh--57 color3 mt--10">About US</div>
|
<div class="mt--120 text-center colorWhite fs--33 lh--70">
|
海南众慧智能教育有限公司成立2024年1月，坐落于海南省海口市。<br />
|
创始人深耕第二语言学习和教育研究多年，随着人工智能的发展，结合大脑神经网络的认知科<br />
|
学，打造互联网语言学习app产品󠆷《哆能智学》，让孩子们和需要第二语言学习的成人们，可以<br />
|
轻松自主的把外语学会学好。不需要老师，不需要家长花费太多精力和太多费用，就能帮助孩子<br />和学习者彻底解决第二语言学习的问题，这是一套综合系统解决方案。<br />
|
</div>
|
|
</div>
|
<!-- <div style="width: 1242px;bottom: -104px;left: 0;right: 0;margin: auto;"
|
class="flex a-center bgColor5 h--207 shadow1 absolute">
|
<div class="flex1 flex-column a-center j-center">
|
<div class="fs--31 lh--37">1356</div>
|
<div class="mt--12 color4 fs--25 lh--30">日活量</div>
|
</div>
|
<img src="@/assets/img/Home/line.png" class="w--2 h--103" alt="">
|
<div class="flex1 flex-column a-center j-center">
|
<div class="fs--31 lh--37">1356</div>
|
<div class="mt--12 color4 fs--25 lh--30">平台用户数</div>
|
</div>
|
<img src="@/assets/img/Home/line.png" class="w--2 h--103" alt="">
|
<div class="flex1 flex-column a-center j-center">
|
<div class="fs--31 lh--37">1356</div>
|
<div class="mt--12 color4 fs--25 lh--30">总计服务人数</div>
|
</div>
|
</div> -->
|
</div>
|
|
<div class="mt--246">
|
<div class="text-center fs--33 color2 lh--41">APP介绍图</div>
|
<div class="fs--58 lh--84 mt--23 text-center">PRODUCTS</div>
|
<div class="w--53 h--2 bgColor2" style="margin: 0 auto;"></div>
|
</div>
|
<div v-for="item in list" :key="item.name">
|
<div class="pb--167">
|
<div class="text-center pt--103">
|
<div class="bgColor4 h--86 br--20 fs--50 lh--86" style="margin: 0 auto;width: 490px;">{{ item.name }}</div>
|
</div>
|
<div class="imgCard mt--74 ">
|
<el-image v-for="(img, index) in item.imageList" :src="img" style="width: 616px;" lazy></el-image>
|
</div>
|
</div>
|
</div>
|
<div style="display:flex;align-items: center;justify-content: center;" >
|
<div v-for="(item,index) in qrcodeList" :class="index>0?'ml--23':''">
|
<div class="qrcode">
|
<img class="qrcodeImg" :src="item.image" />
|
</div>
|
<div class="titleBtn">{{item.name}}</div>
|
</div>
|
</div>
|
<div class="mt--166 mr--63 bgColor6 flex">
|
<el-image :src="require('@/assets/img/Home/jingying.png')" class="mt--114 ml--205 mb--115" style="width: 740px;"
|
lazy></el-image>
|
<div class="ml--55">
|
<div class="mt--154 colorWhite fs--77 font-bold lh--69">精英团队为您服务</div>
|
<div style="width: 625px;" class="fs--25 colorWhite lh--58 mt--50">
|
<div style="text-indent: 2em;">海南众慧智能教育有限公司成立2024年1月，坐落于海南省海口市。</div>
|
<div style="text-indent: 2em;">帮助孩子和学习者彻底解决第二语言学习的问题，这是一套综合系统解决方案。</div>
|
</div>
|
<div @click="$router.push({ path: '/aboutUs' })"
|
class="w--218 h--72 lh--66 br--36 fs--28 colorWhite text-center mt--30"
|
style="border: 3px solid #fff;cursor: pointer;">查看详情</div>
|
</div>
|
</div>
|
|
<img @click="goTop" class="fixed w--150" style="right: 63px;bottom: 100px;cursor: pointer;"
|
src="@/assets/img/Home/goTop.png" alt="">
|
|
<div class="footer">
|
<div class="company">海南众慧智能教育有限公司</div>
|
<div class="beian">
|
<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">学习端 琼ICP备2024032029号-3A</a>
|
<span style="margin-left: 10px;"><a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">家长端 琼ICP备2024032029号-2A</a></span>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
components: {},
|
props: {},
|
data() {
|
return {
|
list: [
|
{
|
name: '学生端',
|
imageList: [require("@/assets/img/introduce/img1.png"), require('@/assets/img/introduce/img2.png'), require("@/assets/img/introduce/img3.png"), require('@/assets/img/introduce/img4.png')],
|
},
|
{
|
name: '家长端',
|
imageList: [require("@/assets/img/introduce/img5.png"), require('@/assets/img/introduce/img6.png'), require("@/assets/img/introduce/img7.png"), require('@/assets/img/introduce/img8.png')],
|
},
|
],
|
qrcodeList:[
|
{
|
name:'哆能智学（IOS端）',
|
image:require('@/assets/img/introduce/iosC.png')
|
},
|
{
|
name:'哆能智学（Android端）',
|
image:require('@/assets/img/introduce/AndroidC.png')
|
},
|
{
|
name:'哆能智学-家长端（IOS端）',
|
image:require('@/assets/img/introduce/iosF.png')
|
},
|
{
|
name:'哆能智学-家长端（Android端）',
|
image:require('@/assets/img/introduce/AndroidF.png')
|
},
|
]
|
};
|
},
|
computed: {},
|
watch: {},
|
created() { },
|
mounted() { },
|
methods: {
|
goTop() {
|
const element = this.$refs.targetElement;
|
if (element) {
|
element.scrollIntoView({ behavior: 'smooth' });
|
}
|
}
|
},
|
};
|
</script>
|
<style scoped lang="less">
|
.imgCard {
|
display: grid;
|
grid-template-columns: repeat(2, 616px);
|
grid-gap: 129px;
|
align-content: center;
|
justify-content: center;
|
}
|
|
.card {
|
width: 332px;
|
height: 378px;
|
box-shadow: 0px 0px 20px 0px rgba(89, 93, 215, 0.20);
|
text-align: center;
|
color: #666666;
|
}
|
|
.qrcode {
|
width: 400px;
|
height: 400px;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
margin: auto;
|
padding: 22px;
|
background: rgba(1, 73, 127, 1);
|
border-radius: 30px;
|
|
.qrcodeImg {
|
width: 356px;
|
height: 356px;
|
background: #666666;
|
border-radius: 30px;
|
}
|
}
|
|
.titleBtn {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
height: 31px;
|
font-family: Source Han Sans CN;
|
font-weight: 400;
|
font-size: 28px;
|
color: rgba(0, 0, 0, 0.8);
|
line-height: 52px;
|
margin-bottom: 140px;
|
margin-top: 38px;
|
}
|
|
.flex1 {
|
flex: 1;
|
}
|
|
.flex-column {
|
display: flex;
|
flex-direction: column;
|
}
|
|
.a-center {
|
align-items: center;
|
}
|
|
.j-center {
|
justify-content: center;
|
}
|
|
.bgColor1 {
|
background: #0ACCBE;
|
}
|
|
.bgColor2 {
|
background: #7F7F7F;
|
}
|
|
.bgColor3 {
|
background: #DDDDDD;
|
}
|
|
.bgColor4 {
|
background: #05E1D1;
|
}
|
|
.bgColor5 {
|
background: #FFFFFF;
|
}
|
|
.bgColor6 {
|
background: rgba(1, 73, 127, 1);
|
border-radius: 0px 100px 0px 0px;
|
}
|
|
.color1 {
|
color: #000;
|
}
|
|
.colorWhite {
|
color: #fff;
|
}
|
|
.color2 {
|
color: #0069AA;
|
}
|
|
.color3 {
|
color: #0ACCBE;
|
}
|
|
.color4 {
|
color: #666666;
|
}
|
|
.shadow1 {
|
box-shadow: 0px 0px 20px 0px rgba(89, 93, 215, 0.20);
|
}
|
|
.header {
|
width: 100%;
|
height: 153px;
|
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
position: fixed;
|
top: 0;
|
left: 0;
|
z-index: 9999;
|
|
.logo {
|
width: 231px;
|
height: 101px;
|
margin-left: 136px;
|
}
|
|
.header-left {
|
cursor: pointer;
|
}
|
|
.nav {
|
display: flex;
|
width: 835px;
|
height: 100%;
|
align-items: center;
|
justify-content: space-between;
|
background-color: rgba(12, 21, 27, .6);
|
padding: 0 120px;
|
|
.nav-item {
|
font-family: Source Han Sans CN;
|
font-weight: 400;
|
font-size: 21px;
|
color: #FFFFFF;
|
line-height: 29px;
|
cursor: pointer;
|
}
|
}
|
|
.banner-img {
|
width: 100%;
|
height: 828px;
|
}
|
}
|
|
.footer {
|
padding-top: 50px;
|
padding-bottom: 51px;
|
width: 100%;
|
background-color: rgba(39, 39, 39, 1);
|
font-family: Source Han Sans CN;
|
font-weight: 400;
|
font-size: 21px;
|
color: #FFFFFF;
|
display: flex;
|
justify-content: center;
|
flex-direction: column;
|
align-items: center;
|
}
|
.footer a {
|
color: #FFFFFF;
|
text-decoration: none;
|
}
|
.footer a:hover {
|
text-decoration: underline;
|
}
|
</style>
|
