444 lines
13 KiB
Vue
444 lines
13 KiB
Vue
<template>
|
||
<div class="about">
|
||
<div class="topnav">
|
||
<div class="navcontent">
|
||
<div class="left">
|
||
<img src="@/static/images/logo.png" alt="" class="logo">
|
||
<span class="orgname">Beelink</span>
|
||
</div>
|
||
<div class="right">
|
||
<div @click="navto('/')">{{lan.$t('lijidenglu')}}</div>
|
||
<div class="signnow" @click="navto('/sign')">{{lan.$t('lijizhuce')}}</div>
|
||
<div class="line"></div>
|
||
<a-dropdown :trigger="['click']" :getPopupContainer="triggerNode => triggerNode.parentNode">
|
||
<div class="item" @click="e => e.preventDefault()">
|
||
<img src="@/static/images/yuyan.png" alt="" class="icon">
|
||
<div class="name">{{userinfo.language}}</div>
|
||
<img src="@/static/images/jiantou2.png" alt="" class="down">
|
||
</div>
|
||
<template v-slot:overlay>
|
||
<a-menu style="max-height:70vh;overflow: auto;">
|
||
<!-- 语言 -->
|
||
<a-menu-item v-for="(i,j) in languagelist" :key="j" style="position: relative;">
|
||
<div class="selitem" @click="setlanguage(i.value)">
|
||
<span :style="{'color': i.name == userinfo.language ? '#06C7AE' : ''}">{{i.name}}</span>
|
||
<img src="@/static/images/duihao.png" alt="" v-if="i.name == userinfo.language" class="duihao">
|
||
</div>
|
||
</a-menu-item>
|
||
<!-- <a-menu-item key="1">
|
||
<div class="selitem">
|
||
<span>时区2cc</span>
|
||
</div>
|
||
</a-menu-item>
|
||
<a-menu-item key="3">
|
||
<div class="selitem">
|
||
<span>时区3c</span>
|
||
</div>
|
||
</a-menu-item> -->
|
||
</a-menu>
|
||
</template>
|
||
</a-dropdown>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<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"></div>
|
||
<div class="picitem picitem1"></div>
|
||
<div class="picitem picitem3"></div>
|
||
<div class="picitem picitem2"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="bottomnav">
|
||
<NavBottom :color="{'color': '#fff'}"></NavBottom>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts">
|
||
import { computed, defineComponent, onMounted, ref } from "vue";
|
||
import NavBottom from '@/components/NavBottom.vue';
|
||
import store from '@/store';
|
||
import router from '@/router';
|
||
import { useI18n } from '@/utils/i18n';
|
||
import { editsystemsetting, getlanguages } from '@/api';
|
||
import { saveValue } from '@/utils/common';
|
||
export default defineComponent({
|
||
components: {
|
||
NavBottom
|
||
},
|
||
setup() {
|
||
const lan: any = useI18n()
|
||
const languagelist=ref<any>([{
|
||
alias: "",
|
||
code: "104110011000",
|
||
createdAt: "2020-08-14 11:08:28",
|
||
deletedAt: null,
|
||
dictionaryid: 210,
|
||
name: "中文",
|
||
position: 1,
|
||
publish: 1,
|
||
updatedAt: "2020-08-14 11:08:28",
|
||
value: "zh"
|
||
}])
|
||
onMounted(async ()=>{
|
||
languagelist.value=await getlanguages()
|
||
})
|
||
const userinfo = computed(() => {
|
||
return store.state.userinfo;
|
||
})
|
||
function navto(url: string){
|
||
router.push(url)
|
||
}
|
||
function setlanguage(e?: any){
|
||
console.log(e)
|
||
saveValue("Lanvuage", e)
|
||
if(store.state.islogin){
|
||
editsystemsetting({language:e})
|
||
}else {
|
||
location.reload();
|
||
// setLanvuage(e)
|
||
}
|
||
}
|
||
return {
|
||
languagelist,
|
||
userinfo,
|
||
navto,
|
||
lan,
|
||
setlanguage
|
||
};
|
||
},
|
||
});
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.about ::v-deep(.ant-dropdown-menu-item:hover, .ant-dropdown-menu-submenu-title:hover){
|
||
background: white;
|
||
.selitem{
|
||
color:#06C7AE ;
|
||
}
|
||
}
|
||
.about ::v-deep(.nav-bottom) ::v-deep(.nav-container){
|
||
color:white!important
|
||
}
|
||
.about ::v-deep(.nav-bottom) ::v-deep(.copyright){
|
||
color:white!important
|
||
}
|
||
.about {
|
||
.duihao{
|
||
width: 15px;
|
||
height: 15px;
|
||
position: absolute;
|
||
right: 15px;
|
||
top: 8px;
|
||
}
|
||
.topnav{
|
||
width: 100%;
|
||
height: 57px;
|
||
background: white;
|
||
display: flex;
|
||
align-items: center;
|
||
position: fixed;
|
||
top: 0;
|
||
z-index: 99;
|
||
.navcontent{
|
||
width: 910px;
|
||
margin: 0 auto;
|
||
display:flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
.left{
|
||
.logo{
|
||
width: 38px;
|
||
height: 36px;
|
||
margin-right:6px;
|
||
}
|
||
.orgname{
|
||
color: #0DBBA4;
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
.right{
|
||
// width: 282px;
|
||
font-size: 11px;
|
||
color:#111111;
|
||
display: flex;
|
||
align-items: center;
|
||
.signnow{
|
||
width: 85px;
|
||
height: 23px;
|
||
background: linear-gradient(90deg, #00DAC2, #42DE9D, #87E062, #D0EB3D, #FFFA18);
|
||
border-radius: 11px;
|
||
color: white;
|
||
text-align: center;
|
||
line-height: 23px;
|
||
margin-left: 26px;
|
||
margin-right: 23px;
|
||
}
|
||
.line{
|
||
width: 1px;
|
||
height: 18px;
|
||
background: #EEEEEE;
|
||
margin-right: 23px;
|
||
}
|
||
.icon{
|
||
width: 14px;
|
||
height: 14px;
|
||
margin-right: 6px;
|
||
}
|
||
.arrow{
|
||
width: 9px;
|
||
height: 5px;
|
||
margin-left: 28px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.top {
|
||
width: 100%;
|
||
height: 512px;
|
||
// background: gray;
|
||
background-image: url("../../static/images/infotop.png");
|
||
background-size: cover;
|
||
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;
|
||
break-inside: avoid;
|
||
}
|
||
.picitem0 {
|
||
margin-top: 191px;
|
||
left: -100px;
|
||
background-image: url("../../static/images/info2.png");
|
||
background-size: cover;
|
||
}
|
||
.picitem1 {
|
||
width: 206px;
|
||
height: 251px;
|
||
background-image: url("../../static/images/info3.png");
|
||
background-size: cover;
|
||
}
|
||
.picitem2 {
|
||
width: 218px;
|
||
height: 265px;
|
||
left: 40px;
|
||
background-image: url("../../static/images/info4.png");
|
||
background-size: cover;
|
||
}
|
||
.picitem3 {
|
||
left: 40px;
|
||
background-image: url("../../static/images/info5.png");
|
||
background-size: cover;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.bottomnav{
|
||
margin-top: 78px;
|
||
height: 85px;
|
||
background:#0DBBA4;
|
||
display:flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
}
|
||
.item{
|
||
display: flex;
|
||
align-items: center;
|
||
border-right: 1px solid #eee;
|
||
padding: 0 23px;
|
||
height: 18rpx;
|
||
.icon{
|
||
width: 16px;
|
||
height: 16px;
|
||
}
|
||
.name{
|
||
margin-left: 6px;
|
||
font-size: 11px;
|
||
color: #111;
|
||
font-weight: bold;
|
||
}
|
||
.down{
|
||
width: 9px;
|
||
height: 5px;
|
||
margin-left: 20px;
|
||
}
|
||
}
|
||
|
||
}
|
||
</style> |