<template>
  <div class="contect flex-center">
    <!-- <i class="iconfont iconzuo" @click="$router.back()"></i> -->
    <common-svg name="shanchu5" @click.native="$router.back()" class="iconzuo"></common-svg>
    <div class="box">
      <h1>添加客服微信</h1>
      <img src="@/assets/lxkf.png" alt>
      <h3>扫一扫咨询客服</h3>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { Cell, Form, Field, CellGroup, Button, Image, RadioGroup, Radio } from 'vant';
import { State, Getter, Action, Mutation } from 'vuex-class';
import { Route } from 'vue-router';
import H5Cropper from 'vue-cropper-h5';
@Component({
  components: {
    [Form.name]: Form,
    [Field.name]: Field,
    [Button.name]: Button,
    [Image.name]: Image,
    [Cell.name]: Cell,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    H5Cropper,
  },
})
export default class Contect extends Vue {

}
</script>
<style lang="scss" scoped>
.contect {
  position: relative;
  height: 100vh;
  background: #3c3f6a;
  
  .iconzuo {
    color: #fff;
    font-size: 16px;
    position: absolute;
    left: 20px;
    top: 20px;
  }
  .box {
    width: 335px;
    height: 400px;
    background: rgba(255, 255, 255, 1);
    border-radius: 10px;
    text-align: center;
    h1 {
      margin-top: 40px;
      font-size: 24px;
      font-weight: 700;
    }
    img {
      margin: 24px 0 15px;
      width: 210px;
      height: 210px;
    }
    h3 {
      font-size: 18px;
      font-weight: 600;
    }
  } 
}
.flex-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
</style>

