<template>
  <div class="register-pages">
    <div class="register-bos">
      <img class="head-img" src="@/assets/images/head.png" alt="" />
      <div class="register-login flex-row-between">
        <div></div>
        <div>
          <span>已有账号？直接</span>
          <span class="zhu">登录>></span>
        </div>
      </div>
      <div class="progress-bos">
        <div class="progress-bar hig">
          <div>01、基本资料</div>
          <div class="triangle1"></div>
          <div class="triangle2"></div>
          <div></div>
        </div>
        <div class="progress-bar progress-bar2">
          <div>02、企业信息</div>
          <div class="triangle1"></div>
          <div class="triangle2"></div>
        </div>
        <div class="progress-bar progress-bar2">
          <div>03、完成</div>
        </div>
      </div>
      <div class="form-bos">
        <div class="form-title flex-row-start">
          <div class="star">*</div>
          <div>姓名</div>
        </div>
        <el-input style="width: 448px" v-model="form.value1" placeholder="请输入姓名" />
        <div class="form-tip">请输入采购人全名，方便与您联系！</div>
      </div>
      <div class="form-bos" style="margin-top: 8px">
        <div class="form-title flex-row-start">
          <div class="star">*</div>
          <div>手机号码</div>
        </div>
        <el-input style="width: 448px" v-model="form.value2" placeholder="请输入手机号码">
          <template #suffix>
            <span class="code">发送验证码</span>
          </template>
        </el-input>
      </div>
      <div class="form-bos form-bos1">
        <div class="form-title flex-row-start">
          <div class="star">*</div>
          <div>验证码</div>
        </div>
        <el-input style="width: 448px" v-model="form.value3" placeholder="请输入验证码" />
      </div>
      <div class="form-bos form-bos1">
        <div class="form-title flex-row-start">
          <div class="star">*</div>
          <div>密码</div>
        </div>
        <el-input type="password" show-password style="width: 448px" v-model="form.value4" placeholder="请输入密码" />
      </div>
      <div class="form-bos form-bos1">
        <div class="form-title flex-row-start">
          <div class="star">*</div>
          <div>请再次输入密码</div>
        </div>
        <el-input type="password" show-password style="width: 448px" v-model="form.value5" placeholder="请输入密码" />
      </div>
      <div class="agreement flex-row-start">
        <el-radio v-model="radio" value="disabled">
          <span>我已阅读并同意</span>
          <span> 《某某政策》</span>
        </el-radio>
      </div>
    </div>
    <div class="pay-foot">
      <div class="foot-bos">
        <el-button class="bnt2" type="primary">下一步</el-button>
        <el-button class="bnt1">供应商注册</el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const form = ref<any>({
  value1: '',
  value2: '',
  value3: '',
  value4: '',
  value5: ''
});
const radio = ref<any>(true);
</script>

<style lang="scss" scoped>
.register-pages {
  width: 100%;
  background-color: #ffffff;
  .register-bos {
    width: 1200px;
    margin: 0 auto;
    padding-top: 20px;
    .head-img {
      width: 185px;
      height: 90px;
    }
    .register-login {
      font-weight: 400;
      font-size: 14px;
      color: #101828;
      margin-top: 20px;
      padding-bottom: 10px;
      border-bottom: 1px solid #e5e7eb;
      .zhu {
        color: #e7000b;
        cursor: pointer;
      }
    }
    .progress-bos {
      padding: 20px;
      display: flex;
      margin-bottom: 24px;
      .progress-bar {
        width: 324px;
        height: 40px;
        background: #f7f8fa;
        font-weight: 500;
        font-size: 16px;
        line-height: 40px;
        padding-left: 16px;
        color: #4e5969;
        position: relative;
        &.hig {
          background: #e7000b;
          color: #ffffff;
          z-index: 2;
          .triangle1 {
            border-bottom: 20px solid #e7000b;
          }
        }
        .triangle1 {
          position: absolute;
          width: 0;
          height: 0;
          border-left: 20px solid transparent; /* 左边透明 */
          border-right: 20px solid transparent; /* 右边透明 */
          border-bottom: 20px solid #f7f8fa; /* 底部边为实际显示的三角形部分 */
          transform: rotate(90deg); /* 向左旋转90度 */
          top: 10px;
          right: -30px;
          transform-origin: 50% 50%; /* 设置旋转中心点在元素的中心 */
          z-index: 3;
        }
        .triangle2 {
          position: absolute;
          width: 0;
          height: 0;
          border-left: 20px solid transparent; /* 左边透明 */
          border-right: 20px solid transparent; /* 右边透明 */
          border-bottom: 20px solid #ffffff; /* 底部边为实际显示的三角形部分 */
          transform: rotate(90deg); /* 向左旋转90度 */
          top: 10px;
          right: -35px;
          transform-origin: 50% 50%; /* 设置旋转中心点在元素的中心 */
          z-index: 2;
        }
      }
      .progress-bar2 {
        margin-left: -30px;
        padding-left: 100px;
        width: 354px;
      }
    }
    .form-bos {
      padding-left: 20px;
      :deep(.el-input__wrapper) {
        border: none;
        /* 可选：去除聚焦时的高亮 */
        box-shadow: none;
        outline: none;
        background: #f4f6f8;
      }
      .form-title {
        font-size: 14px;
        color: #1d2129;
        margin-bottom: 8px;
        .star {
          width: 10px;
          color: #f53f3f;
        }
      }
      .form-tip {
        font-size: 12px;
        color: #86909c;
        margin-top: 4px;
      }
      .code {
        font-size: 14px;
        color: #e7000b;
        cursor: pointer;
      }
    }
    .form-bos1 {
      margin-top: 30px;
    }
    .agreement {
      padding-left: 20px;
      margin-top: 30px;
    }
  }
  .pay-foot {
    width: 100%;
    height: 82px;
    background: #ffffff;
    box-shadow: 0px -2px 13px 0px rgba(0, 0, 0, 0.05);
    margin-top: 47px;
    .foot-bos {
      width: 1200px;
      margin: 0 auto;
      padding-top: 16px;
      padding-left: 20px;
      .bnt1 {
        width: 102px;
        height: 32px;
        background: #f7f8fa;
      }
      .bnt2 {
        width: 74px;
        height: 32px;
      }
    }
  }
}
</style>
