first commit

zzzz

2024-04-09 d5461636a6b75c2effd3154b07e481c09e9062f9

 src/page/register/finish.vue

@@ -1,161 +1,169 @@
<template>
    <div class="finish">
        <Step :step="4"></Step>
        <div class="title textColor">{{ $t('注册成功') }}</div>
        <div class="title1 textColor">{{ $t('开启您的数字货币之旅') }}</div>
        <p class="mt-64 pl-72">
            <i @click="agreeInfo">
                <img v-show="agree1" src="../../assets/image/login/prot2.png" alt="" />
                <img v-show="!agree1" src="../../assets/image/login/prot1.png" alt="" />
            </i>
            {{ $t('我已同意授权调用系统信息通知权限') }}
        </p>
        <p class="mt-51 pl-72">
            <i @click="agreeAddress">
                <img v-show="agree2" src="../../assets/image/login/prot2.png" alt="" />
                <img v-show="!agree2" src="../../assets/image/login/prot1.png" alt="" />
            </i>
            {{ $t('我已同意授权访问地址簿') }}
        </p>
        <div class="content mt-50" @click="$router.push('/trade/btc')">
            <div class="left">
                <div class="font-40">{{ $t('我想要买币') }}</div>
                <div class="font-31 mt-60">{{ $t('去交易') }}<img src="../../assets/image/login/Vector.png" alt="">
                </div>
            </div>
            <div class="right pic1">
                <img src="./img/buyPic.png" alt="">
            </div>
  <div class="finish">
    <Step :step="4"></Step>
    <div class="title textColor">{{ $t("注册成功") }}</div>
    <div class="title1 textColor">{{ $t("开启您的数字货币之旅") }}</div>
    <p class="mt-64 pl-72">
      <i @click="agreeInfo">
        <img v-show="agree1" src="../../assets/image/login/prot2.png" alt="" />
        <img v-show="!agree1" src="../../assets/image/login/prot1.png" alt="" />
      </i>
      {{ $t("我已同意授权调用系统信息通知权限") }}
    </p>
    <p class="mt-51 pl-72">
      <i @click="agreeAddress">
        <img v-show="agree2" src="../../assets/image/login/prot2.png" alt="" />
        <img v-show="!agree2" src="../../assets/image/login/prot1.png" alt="" />
      </i>
      {{ $t("我已同意授权访问地址簿") }}
    </p>
    <div class="content mt-50" @click="$router.push('/trade/btc')">
      <div class="left">
        <div class="font-40">{{ $t("我想要买币") }}</div>
        <div class="font-31 mt-60">
          {{ $t("去交易")
          }}<img src="../../assets/image/login/Vector.png" alt="" />
        </div>
        <div class="content mt-33" @click="$router.push('/recharge/rechargeList')">
            <div class="left">
                <div class="font-40">{{ $t('我想要充值') }}</div>
                <div class="font-31 mt-60">{{ $t('去充值') }}<img src="../../assets/image/login/Vector.png" alt="" /></div>
            </div>
            <div class="right pic2">
                <img src="./img/rechargePic.png" alt="">
            </div>
        </div>
        <div class="btn mt-32 btnMain" @click="$router.push('/')">{{ $t('确定') }}</div>
      </div>
      <div class="right pic1">
        <img src="./img/buyPic.png" alt="" />
      </div>
    </div>
    <div
      class="content mt-33"
      @click="$router.push('/recharge/rechargePage?symbol=usdt')"
    >
      <div class="left">
        <div class="font-40">{{ $t("我想要充值") }}</div>
        <div class="font-31 mt-60">
          {{ $t("去充值")
          }}<img src="../../assets/image/login/Vector.png" alt="" />
        </div>
      </div>
      <div class="right pic2">
        <img src="./img/rechargePic.png" alt="" />
      </div>
    </div>
    <div class="btn mt-32 btnMain" @click="$router.push('/')">
      {{ $t("确定") }}
    </div>
  </div>
</template>

<script>
import Step from "./step.vue";
export default {
    props: {

  props: {},
  components: {
    Step,
  },
  data() {
    return {
      agree1: true,
      agree2: true,
    };
  },
  methods: {
    agreeInfo() {
      this.agree1 = !this.agree1;
    },
    components: {
        Step
    agreeAddress() {
      this.agree2 = !this.agree2;
    },
    data() {
        return {
            agree1: true,
            agree2: true,
        }
    },
    methods: {
        agreeInfo() {
            this.agree1 = !this.agree1
        },
        agreeAddress() {
            this.agree2 = !this.agree2
        }
    }
}
  },
};
</script>

<style lang="scss" scoped>
.finish {
    padding: 32px;
    font-size: 26px;
    width: 100%;
    box-sizing: border-box;
  padding: 32px;
  font-size: 26px;
  width: 100%;
  box-sizing: border-box;
}

.title {
    font-weight: 700;
    font-size: 52px;
    margin-top: 65px;
    text-align: center;
  font-weight: 700;
  font-size: 52px;
  margin-top: 65px;
  text-align: center;
}

.title1 {
    font-weight: 700;
    font-size: 44px;
    text-align: center;
    margin-top: 32px;
  font-weight: 700;
  font-size: 44px;
  text-align: center;
  margin-top: 32px;
}

p {
    display: flex;
    align-items: center;
    color: #868D9A;
  display: flex;
  align-items: center;
  color: #868d9a;

    i {
        display: block;
        margin-right: 18px;
        box-sizing: border-box;
  i {
    display: block;
    margin-right: 18px;
    box-sizing: border-box;

        img {
            width: 30px;
            height: 30px;
        }
    img {
      width: 30px;
      height: 30px;
    }
  }
}

.content {
    @include themify() {
        background: themed("cont_background");
  @include themify() {
    background: themed("cont_background");
  }

  border-radius: 8px;
  padding: 0 35px;
  display: flex;
  justify-content: space-between;
  height: 220px;
  align-items: center;

  @include themify() {
    color: themed("text_color");
  }

  .left {
    img {
      width: 22px;
      height: 22px;
      margin-left: 12px;
    }
  }

    border-radius: 8px;
    padding: 0 35px;
    display: flex;
    justify-content: space-between;
    height: 220px;
    align-items: center;
  .pic1 {
    width: 140px;
    height: 152px;

    @include themify() {
        color: themed("text_color");
    img {
      width: 100%;
      height: 100%;
    }
  }

    .left {
        img {
            width: 22px;
            height: 22px;
            margin-left: 12px;
        }
  .pic2 {
    width: 152px;
    height: 132px;

    img {
      width: 100%;
      height: 100%;
    }

    .pic1 {
        width: 140px;
        height: 152px;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .pic2 {
        width: 152px;
        height: 132px;

        img {
            width: 100%;
            height: 100%;
        }
    }
  }
}

.btn {
    color: #fff;
    height: 88px;
    line-height: 88px;
    text-align: center;
    font-size: 32px;
    border-radius: 10px;
  color: #fff;
  height: 88px;
  line-height: 88px;
  text-align: center;
  font-size: 32px;
  border-radius: 10px;
}
</style>