<template>
<view>

<view>
<view>
<image src="http://gen.dongpaiweb.cn/static/index/images/logo.png" mode="aspectFit"
style="width: 200px;height: 152px;"></image>
</view>
<text>Green Carbon: Towards a greener world</text>
<input class="input phone" type="number" placeholder="请输入手机号" placeholder-class='placeholder_text'
v-model="phone" />
<view>
<input class="input code_number" type="number" placeholder="请输入验证码" placeholder-class='placeholder_text'
v-model="code" />
<view>
<view  @click="getCode">{{codeText}}</view>
</view>
</view>
<button @click="login">登录</button>

</view>
</view>
</template>

<script>
export default {
  data() {
    return {
      codeText: '获取验证码',
      countdown: 10,
      timer: null
    }
  },
  methods: {
    getCode() {
      // 发送验证码的逻辑
      // ...

      // 开始倒计时
      this.startCountdown();
    },
    startCountdown() {
      if (this.timer) return;
      this.timer = setInterval(() => {
        if (this.countdown > 0) {
          this.countdown--;
          this.codeText = `${this.countdown}秒`;
        } else {
          this.resetCountdown();
        }
      }, 1000);
    },
    resetCountdown() {
      clearInterval(this.timer);
      this.timer = null;
      this.countdown = 60;
      this.codeText = '获取验证码';
    }
  }
}

</script>

<style scoped>
.content {
padding: 0 10px;
box-sizing: border-box;
width: 100%;
display: flex;
align-items: center;
height: 90vh;
}

.box {
width: 100%;
}

.pic {
width: 100%;
text-align: center;
}

.logo {
height: 150rpx;
width: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 30rpx;
}

.name {
font-size: 24px;
width: 100%;
text-align: center;
display: inline-block;
margin-bottom: 50rpx;
}

.phone {
margin-top: 30px;
width: 90%;
}

.input {
flex: 1;
background-color: #fff;
border: 1px solid #f2f2f2;
padding: 10px;
margin: 5px 10px;
border-radius: 5px;
}

.send_box {
display: flex;
align-items: center;
}

.b {
width: 100px;
text-align: center;
}

.placeholder_text {
font-size: 14px;
}

.code_btn {
font-size: 14px;
color: $main_green;
}

.btn {
background: $main_green;
color: #fff;
border-radius: 50px;
margin: 50rpx 10px;
display: flex;
align-items: center;
justify-content: center;
border: none;
}

.uni-countdown__splitor {
display: none;
}
</style>

效果：