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