252 lines
6.9 KiB
Vue
252 lines
6.9 KiB
Vue
<template>
|
||
<div class="about">
|
||
<div class="top">
|
||
<div class="titlebox">
|
||
<div class="title">beelink</div>
|
||
<div class="title">亿万人的信赖和见证</div>
|
||
<div class="desc">开启您的美好学习生活</div>
|
||
</div>
|
||
</div>
|
||
<div class="mid">
|
||
<div class="midcontent">
|
||
<div class="midtopic">关于Beelink</div>
|
||
<div class="midline"></div>
|
||
<div class="texts">
|
||
Beelink—专致于外语学习的在线互动学习平台。Beelink汇聚各国名师资源，在线直播辅导，提、供中文、英语、西班牙语、俄罗斯语、法语等多种外语讲课，为学生提供优质学习课
|
||
程。一对一，一对多，不同教学形式符合您的多项不同需求。课程支持直播视频回放、视频评论等功能，让学生可以充分利用碎片时间，讲知识难点、语言技巧等完整、系统化地呈现，
|
||
随时随地想学就学，做自己的学霸。
|
||
</div>
|
||
<div class="texts">
|
||
Beelink—专致于外语学习的在线互动学习平台。Beelink汇聚各国名师资源，在线直播辅导，提、供中文、英语、西班牙语、俄罗斯语、法语等多种外语讲课，为学生提供优质学习课
|
||
程。一对一，一对多，不同教学形式符合您的多项不同需求。课程支持直播视频回放、视频评论等功能，让学生可以充分利用碎片时间，讲知识难点、语言技巧等完整、系统化地呈现，
|
||
随时随地想学就学，做自己的学霸。
|
||
</div>
|
||
</div>
|
||
<div class="other">
|
||
<div class="relation">
|
||
<div class="midtopic">联系Beelink</div>
|
||
<div class="midline"></div>
|
||
<div class="desc">
|
||
Beelink—专致于外语学习的在线互动学习平台。Beelink汇聚各国名师资源。
|
||
</div>
|
||
<div class="way">
|
||
<div class="wayitem">
|
||
<div class="iconbox">
|
||
<img src="@/static/images/tel.png" alt="" class="icon" />
|
||
</div>
|
||
<span>24小时服务热线：111-1111-5456</span>
|
||
</div>
|
||
<div class="wayitem">
|
||
<div class="iconbox">
|
||
<img
|
||
src="@/static/images/email.png"
|
||
alt=""
|
||
class="icon icon1"
|
||
/>
|
||
</div>
|
||
<span> Beelink邮箱 ：6455646561@163.com </span>
|
||
</div>
|
||
<div class="wayitem">
|
||
<div class="iconbox">
|
||
<img src="@/static/images/chuanzhen.png" alt="" class="icon" />
|
||
</div>
|
||
<span> 传真：010-1654645 </span>
|
||
</div>
|
||
<div class="wayitem">
|
||
<div class="iconbox">
|
||
<img src="@/static/images/ewm.png" alt="" class="icon" />
|
||
</div>
|
||
<span> Beelink App下载 </span>
|
||
<img src="@/static/images/erweima.png" alt="" class="ewm">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="picbox">
|
||
<div class="picitem picitem0">1</div>
|
||
<div class="picitem picitem1">2</div>
|
||
<div class="picitem picitem3">3</div>
|
||
<div class="picitem picitem2">4</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="bottomnav">
|
||
<NavBottom></NavBottom>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts">
|
||
import { defineComponent, ref } from "vue";
|
||
import NavBottom from '@/components/NavBottom.vue';
|
||
export default defineComponent({
|
||
name: "About",
|
||
components: {
|
||
NavBottom
|
||
},
|
||
setup() {
|
||
return {};
|
||
},
|
||
});
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.about ::v-deep() .nav-bottom ::v-deep() .nav-container{
|
||
color:white!important
|
||
}
|
||
.about ::v-deep() .nav-bottom ::v-deep() .copyright{
|
||
color:white!important
|
||
}
|
||
.about {
|
||
.top {
|
||
width: 100%;
|
||
height: 512px;
|
||
background: gray;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
.titlebox {
|
||
margin-left: 226px;
|
||
.title {
|
||
color: white;
|
||
font-size: 40px;
|
||
font-weight: bold;
|
||
}
|
||
.desc {
|
||
color: white;
|
||
font-weight: 800;
|
||
font-size: 17px;
|
||
margin-top: 17px;
|
||
}
|
||
}
|
||
}
|
||
.mid {
|
||
min-width: 100%;
|
||
// height: 1206px;
|
||
background: url("../../static/images/aboutbg.png");
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
.midcontent {
|
||
width: 914px;
|
||
height: 196px;
|
||
margin: 0 auto;
|
||
padding-top: 105px;
|
||
margin-bottom: 230px;
|
||
|
||
.texts {
|
||
color: #333333;
|
||
font-size: 11px;
|
||
font-weight: bold;
|
||
margin-bottom: 22px;
|
||
}
|
||
}
|
||
.midtopic {
|
||
font-size: 17px;
|
||
color: #0dbba4;
|
||
font-weight: 800;
|
||
}
|
||
.midline {
|
||
width: 23px;
|
||
height: 3px;
|
||
background: linear-gradient(
|
||
90deg,
|
||
#00dac2,
|
||
#42de9d,
|
||
#87e062,
|
||
#d0eb3d,
|
||
#fffa18
|
||
);
|
||
border-radius: 1px;
|
||
margin-top: 23px;
|
||
margin-bottom: 39px;
|
||
}
|
||
.other {
|
||
display: flex;
|
||
justify-content: center;
|
||
.relation {
|
||
width: 520px;
|
||
height: 420px;
|
||
position: relative;
|
||
left: -60px;
|
||
top: 350px;
|
||
.desc {
|
||
color: #333333;
|
||
font-size: 11px;
|
||
font-weight: bold;
|
||
margin-bottom: 28px;
|
||
}
|
||
.way {
|
||
.wayitem {
|
||
display: flex;
|
||
line-height: 34px;
|
||
font-size: 11px;
|
||
color: #333333;
|
||
font-weight: bold;
|
||
.ewm{
|
||
width: 100px;
|
||
height: 100px;
|
||
position: relative;
|
||
left:16px;
|
||
top: 10px;
|
||
}
|
||
}
|
||
.iconbox {
|
||
width: 34px;
|
||
height: 34px;
|
||
background: #0dbba4;
|
||
margin-bottom: 28px;
|
||
margin-right: 13px;
|
||
.icon {
|
||
width: 14px;
|
||
height: 18px;
|
||
margin: 10px 8px;
|
||
}
|
||
.icon1 {
|
||
width: 19px;
|
||
height: 18px;
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
.picbox {
|
||
width: 400px;
|
||
// height: 805px;
|
||
column-count: 2;
|
||
position: relative;
|
||
left: 90px;
|
||
.picitem {
|
||
width: 248px;
|
||
height: 301px;
|
||
margin-bottom: 75px;
|
||
position: relative;
|
||
background: yellowgreen;
|
||
break-inside: avoid;
|
||
}
|
||
.picitem0 {
|
||
margin-top: 191px;
|
||
left: -100px;
|
||
}
|
||
.picitem1 {
|
||
width: 206px;
|
||
height: 251px;
|
||
}
|
||
.picitem2 {
|
||
width: 218px;
|
||
height: 265px;
|
||
left: 40px;
|
||
}
|
||
.picitem3 {
|
||
left: 40px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.bottomnav{
|
||
margin-top: 78px;
|
||
height: 85px;
|
||
background:#0DBBA4;
|
||
display:flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
</style> |