<template>
  <div class="share">
    <NavTop :type="0" style="flex-shrink: 0"></NavTop>
    <div class="box">
      <div class="top">
        您好，欢迎来到
        <span class="org_name">Beelink</span>
      </div>
      <div class="mid">
        <div class="left active">
          <div class="title">如果您是老师</div>
          <img src="@/static/images/teacher.png" alt="" class="pic" />
          <div class="ale">想要赚取直播收益，请使用电脑端访问一下域名</div>
          <div class="link">https://www.beelinkXXXX.com</div>
        </div>
        <div class="left right">
          <div>
            <div class="title">如果您是老师</div>
            <img src="@/static/images/teacher.png" alt="" class="pic" />
            <div class="ale">想要赚取直播收益，请使用电脑端访问一下域名</div>
            <div class="link">https://www.beelinkXXXX.com</div>
          </div>
          <div class="line"></div>
          <div class="ewms">
            <div>
              <span>Google play </span>
              <img src="@/static/images/ewm1.png" alt="" class="ewm" />
            </div>
            <div>
              <span> App store </span>
              <img src="@/static/images/ewm1.png" alt="" class="ewm ewm1" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="content">
        <div class="title">关于 Beelink</div>
        <div class="rowline"></div>
        <div class="texts">
          Beelink平台拥有数千名优秀老师，丰富的教育经验和有趣的课堂环境，一对一辅导
          平台的教务管理、线上课堂、线下课堂、助学互动，课程回放等多项教学功能，让
          您利用碎片时间，轻轻松松学会各种语言。
        </div>
        <div class="relation">
          <div class="more">了解更多</div>
          <img src="@/static/images/tel.png" alt="" class="icon" />
          <div>136-0111-1111</div>

          <img src="@/static/images/email.png" alt="" class="icon email" />
          <div>136-0111-1111</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from "vue";
import NavTop from "@/components/NavTop.vue";
import { loginpass } from "@/api";

export default defineComponent({
  name: "Share",
  components: {
    NavTop,
  },
  setup() {
    return {};
  },
});
</script>
<style lang="scss" scoped>
.share {
  min-width: 100%;
  height: 100vh;
  background: url("../../static/images/loginbg.png");
  background-size: 100% 130%;
  background-repeat: no-repeat;
  overflow-x: hidden;
  .active {
    background: #f6fcfb!important;
    border: 1px solid #0ebba4!important;
    box-shadow: 1px 5px 7px 0px rgba(14, 188, 164, 0.07)!important;
  }
  .box {
    .top {
      padding-top: 97px;
      margin-left: 144px;
      color: #121212;
      font-weight: bold;
      font-size: 18px;
      .org_name {
        color: #0ebca4;
        font-size: 29px;
        margin-left: 7px;
      }
    }
    .mid {
      width: 998px;
      // height: 342px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      margin-top: 44px;
      .left {
        width: 314px;
        // height: 342px;
        border: 1px solid #eeeeee;
        box-shadow: 1px 5px 7px 0px rgba(14, 188, 164, 0.07);
        border-radius: 8px;
        background: white;
        text-align: center;
        .title {
          font-size: 15px;
          color: #121212;
          font-weight: bold;

          padding-top: 41px;
          margin-bottom: 33px;
        }
        .pic {
          width: 114px;
          height: 114px;
        }
        .ale {
          color: #121212;
          font-size: 12px;
          margin-top: 70px;
          margin-bottom: 17px;
        }
        .link {
          color: #4992ec;
          font-size: 12px;
          margin-bottom: 31px;
        }
      }
      .right {
        width: 627px;
        display: flex;
        padding-left: 65px;
        .line {
          width: 1px;
          height: 221px;
          background: #eeeeee;
          margin: auto 0;
          margin-left: 65px;
        }
        .ewms {
          font-size: 12px;
          color: #121212;
          align-items: center;
          display: flex;
          flex-direction: column;
          justify-content: center;
          margin: 0 auto;
          > div {
            margin-bottom: 57px;
          }

          .ewm {
            width: 61px;
            height: 63px;
            margin-left: 12px;
          }
          .ewm1 {
            margin-left: 20px;
          }
        }
      }
    }
  }
  .bottom {
    height: 317px;
    margin-top: 44px;
    background: #08ae98;
    color: white;
    font-size: 10px;
    .content {
      width: 415px;
      // text-align: center;
      padding-top: 59px;
      margin-left: 144px;
      .title {
        font-size: 18px;
        font-weight: 800;
      }
      .rowline {
        width: 46px;
        height: 2px;
        background: #68df7e;
        margin-top: 18px;
        margin-bottom: 34px;
      }
      .texts {
        text-align: left;
        margin: 0 auto;
      }
      .relation {
        height: 29px;
        display: flex;
        line-height: 29px;
        margin-top: 52px;
        color: white;
        .more {
          width: 86px;
          height: 29px;
          background: #68df7e;
          color: white;
          text-align: center;
          line-height: 29px;
          border-radius: 15px;
        }
        .icon {
          width: 9px;
          height: 12px;
          margin: auto 0;
          margin-right: 6px;
          margin-left: 29px;
        }
        .email {
          width: 15px;
        }
      }
    }
  }
}
</style>