<template>
  <div>
    <img class="img-cloud" :src="img.cloud" />
    <img class="img-teacherEnter" :src="img.teacherEnter" />
    <img :src="img.blueCar" class="img-blueCar" />
    <view class="wx">
      <button @click="login" class="wxButton">
        <img class="wxButton-icon" :src="img.wx">
        <span class="wxButton-text">一键微信登录</span>
      </button>
    </view>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import teacherEnter from '@/assets/img/teacherEnter.png';
import cloud from '@/assets/img/cloud.png';
import blueCar from '@/assets/img/blueCar.png';
import wx from '@/assets/img/wx.png'
export default defineComponent({
  setup() {
    return {
      img: {
        teacherEnter,
        cloud,
        blueCar,
        wx
      },
    };
  },
});
</script>

<style lang="scss" scoped>
.img-cloud {
  width: 100%;
  height: 242px;
  margin-top: 6px;
}
.img-teacherEnter {
  width: 646px;
  height: 268px;
  margin-top: 35px;
}
.img-blueCar {
  width: 605px;
  height: 214px;
  margin-top: 97px;
}
.wx {
  width: 100%;
  display: flex;
  justify-content: center;
  position: absolute;
  bottom: 200px;
  .wxButton::after {
  }
  .wxButton {
    border: none;
    width: 532px;
    height: 80px;
    background: #01c18d;
    border-radius: 40px;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
  
    .wxButton-icon{
      width: 43px;
      height: 34px;
      margin-right: 11px;
    }
    .wxButton-text{
      font-size: 30px;
      color: white;
    }
  }
}
</style>