<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>