Matherweb/src/pages/firstPay.vue

<template>
  <div>
    <el-image style="width: 100%" :src="url" fit="contain"></el-image>
    <div class="pay_area">
      <div class="btn">￥199/年 立即购买</div>
      <div style='display:flex; justify-content:center'>
        <!-- <el-checkbox v-model="checked"/><div class="xy" @click="goXy()">平台用户服务协议</div> -->
        <div class="xy" @click="goXy()">点击购买即代表同意<span style="font-weight:900;">《平台用户服务协议》</span></div>
      </div>
    </div>
  </div>
</template>
<script>
// import { getActives } from "../api";
// import openId from "../util/getOpenId";
export default {
  name: "firstPay",
  data() {
    return {
      url: require("../assets/199.png"),
    };
  },
  methods: {
      goXy(){
          this.$router.push('/xy')
      }
  },
  computed: {},
  mounted() {},
};
</script>
<style scoped lang="less">
.pay_area {
  width: 100%;
  height: 100px;
  text-align: center;
  background: #294166;
}
.el-image {
  display: block;
}
.btn {
  height: 60%;
  width: 100%;
  font-weight: 900;
  font-size: 28px;
  line-height: 60px;
  color: #fff;
}
.el-checkbox /deep/ .el-checkbox__label{
    color: #fff;
}
.xy{
    font-size: 13px;
    color: #fff;
    margin-left: 5px;
}
</style>