icp/src/components/pay.vue

<template>
  <div class="pay">
    <el-dialog
      :visible.sync="dialogVisible"
      :before-close='hClose'>
      <div>
        <div class="title">扫码付费阅读</div>
        <div class="content">
          <div class="left">
            <!-- <img src="@/assets/code.png" alt=""> -->
            <img src="@/assets/yl/code.jpg" alt="">
          </div>
          <div class="right">
            <p>微信扫描二维码</p>
            <!-- <p>支付宝扫描二维码</p> -->
            <p>支付3元即可解锁精彩资讯内容</p>
            <div class="btn">
              <el-button type="primary" @click="hSubmit">确 定</el-button>
              <el-button type="danger" @click="hClose">取 消</el-button>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'pay',
  props: {
    dialogVisible: {
      type: Boolean,
      require: true
    },
    new: {
      type: String
    }
  },
  data () {
    return {
      isPay: true
    }
  },
  methods: {
    hClose () {
      this.$emit('close', false)
    },
    hSubmit () {
      if (this.isPay) {
        this.$router.push(this.new)
        this.hClose()
      }
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.el-dialog__body {
  padding: 30px 50px;
  padding-left: 80px;
}
/deep/.el-dialog {
  border-radius: 20px;
  width: 680px;
  height: 340px;
}
/deep/.el-button--primary {
    background-color: #639CFF;
    border-color: #639CFF;
    margin-right: 10px;
}
/deep/.el-dialog__headerbtn .el-dialog__close {
  font-size:30px;
}
.title {
  font-size: 22px;
  color: #333;
  margin-bottom: 20px;
  margin-left: 10px;
}
.content>div {
  display: inline-block;
  height: 160px;
  vertical-align: middle;
}
.content {
 width: 520px;
}
.content .left {
  margin-right: 20px;
  width: 160px;
  img {
    width: 100%;
  }
}
.content .right {
  position: relative;
  width: 300px;
  p {
    font-size: 18px;
    margin-bottom: 20px;
  }
  .btn {
    position: absolute;
    bottom: 0;
    max-width: 100%;
  }
}
.el-button {
  width: 140px;
}
</style>