proginn-frontend/components/wo/successToast.vue

<template>
  <div :class="{connectUs: !mobile, connectUsMobile: mobile}">
    <div class="toastBox" v-if="isShowToast">
      <div class="toastArea">
        <div class="title">提现成功</div>
        <div class="tips">提现成功，项目款将在3-5个工作日内到账 可通过了解开发者会员服务，更快获取更多收益</div>
        <div class="btnList">
          <div class="btnItem cancleBtn" @click="close">
            <p>下次再说</p>
          </div>
          <div class="btnItem submitBtn" @click="handleSubmit">
            <p>立即了解</p>
          </div>
        </div>
        <div class="closeIcon" @click="close"/>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["isShowToast"],
  components: {},
  data() {
    return {
      name: "",
      phone: "",
      mobile: this.$deviceType.isMobile()
    };
  },
  computed: {},
  mounted() {

  },
  methods: {
    close() {
      this.$emit('close')
    },
    handleSubmit() {
      location.href = "/type/vip/developer"
    }
  }
};
</script>

<style lang="scss">
  @import "~@/assets/css/scssCommon.scss";
.connectUs {
  .toastBox {
    position: fixed;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 888;
    left: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;

    .toastArea {
      position: relative;
      width: 446px;
      height: 267px;
      background: rgba(255, 255, 255, 1);
      border-radius: 3px;
      padding: 34px 34px;

      .title {
        font-size: 19px;
        font-weight: 500;
        color: rgba(34, 34, 34, 1);
        line-height: 26px;
        text-align: center;
      }

      .tips {
        margin-top: 35px;
        font-size:14px;
        font-weight:400;
        color:rgba(51,51,51,1);
        line-height:20px;
      }

      .btnList {
        margin-top: 40px;
        display: flex;
        width: 100%;
        justify-content: space-around;

        .btnItem {
          width: 170px;
          height: 44px;
          background: rgba(48, 142, 255, 1);
          box-shadow: 0 2px 6px 0 rgba(48, 142, 255, 0.3);
          border-radius: 2px;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
          p {
            font-size: 14px;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
            line-height: 20px;
          }
        }

        .submitBtn {

        }
        .cancleBtn {
          background:rgba(236,236,236,1);
          border-radius:2px;
          box-shadow: none;
          p {
            color:rgba(102,102,102,1);
          }
        }

      }

      .closeIcon {
        position: absolute;
        right: 20px;
        top: 34px;
        width: 16px;
        height: 16px;
        background: url('~@/assets/img/credit/closeIcon.png') no-repeat;
        background-size: cover;
        cursor: pointer;
      }
    }

  }

}
.connectUsMobile {
  .toastBox {
    position: fixed;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 888;
    left: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;

    .toastArea {
      position: relative;
      width: pxtovw(355);
      height: pxtovw(403);
      background: rgba(255, 255, 255, 1);
      border-radius: pxtovw(3);
      padding: pxtovw(30) pxtovw(30);

      .title {
        font-size: pxtovw(19);
        font-weight: 500;
        color: rgba(34, 34, 34, 1);
        line-height: pxtovw(26);
        text-align: center;
      }

      .tips {
        margin-top: pxtovw(8);
        margin-bottom: pxtovw(14);
        font-size: pxtovw(12);
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        line-height: pxtovw(17);
        text-align: center;
      }

      .nameCell, .phoneCell {
        margin-top: pxtovw(25);

        .label {
          font-size: pxtovw(14);
          font-weight: 500;
          color: rgba(25, 34, 46, 1);
          line-height: pxtovw(20);
        }
        input {
          margin-top: pxtovw(5);
          padding: pxtovw(10);
          width: pxtovw(295);
          height: pxtovw(48);
          background: rgba(255, 255, 255, 1);
          border-radius: pxtovw(3);
          border: pxtovw(1) solid rgba(221, 225, 230, 1);
        }
      }
      .nameCell {
        margin-top: pxtovw(39);
      }

      .submitBtn {
        margin-top: pxtovw(18);
        width: pxtovw(295);
        height: pxtovw(48);
        background: rgba(48, 142, 255, 1);
        box-shadow: 0 pxtovw(2) pxtovw(6) 0 rgba(48, 142, 255, 0.3);
        border-radius: pxtovw(2);
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        p {
          font-size: pxtovw(14);
          font-weight: 500;
          color: rgba(255, 255, 255, 1);
          line-height: pxtovw(20);
        }
      }

      .closeIcon {
        position: absolute;
        right: pxtovw(20);
        top: pxtovw(34);
        width: pxtovw(16);
        height: pxtovw(16);
        background: url('~@/assets/img/credit/closeIcon.png') no-repeat;
        background-size: cover;
        cursor: pointer;
      }
    }

  }
}
</style>