zy-vue-library/components/verification/index.vue

<template>
  <div class="mi-captcha">
    <div class="mi-captcha-content">
      <!--            没有进行验证-->
      <div v-if="!verificationPass" class="mi-captcha-radar" @click="verificationShow = true">
        <div class="mi-captcha-radar-ready">
          <div class="mi-captcha-radar-ring" />
          <div class="mi-captcha-radar-dot" />
        </div>
        <div class="mi-captcha-radar-tip">点击按钮进行验证</div>
      </div>
      <!--            验证通过-->
      <div v-if="verificationPass" class="mi-captcha-radar mi-captcha-radar-pass">
        <div class="mi-captcha-radar-success mi-captcha-radar-success-icon">
          <span role="img" aria-label="verified">
            <svg
              focusable="false"
              class=""
              data-icon="verified"
              width="1em"
              height="1em"
              fill="currentColor"
              aria-hidden="true"
              viewBox="64 64 896 896"
            >
              <path
                d="M447.8 588.8l-7.3-32.5c-.2-1-.6-1.9-1.1-2.7a7.94 7.94 0 00-11.1-2.2L405 567V411c0-4.4-3.6-8-8-8h-81c-4.4 0-8 3.6-8 8v36c0 4.4 3.6 8 8 8h37v192.4a8 8 0 0012.7 6.5l79-56.8c2.6-1.9 3.8-5.1 3.1-8.3zm-56.7-216.6l.2.2c3.2 3 8.3 2.8 11.3-.5l24.1-26.2a8.1 8.1 0 00-.3-11.2l-53.7-52.1a8 8 0 00-11.2.1l-24.7 24.7c-3.1 3.1-3.1 8.2.1 11.3l54.2 53.7z"
              />
              <path
                d="M866.9 169.9L527.1 54.1C523 52.7 517.5 52 512 52s-11 .7-15.1 2.1L157.1 169.9c-8.3 2.8-15.1 12.4-15.1 21.2v482.4c0 8.8 5.7 20.4 12.6 25.9L499.3 968c3.5 2.7 8 4.1 12.6 4.1s9.2-1.4 12.6-4.1l344.7-268.6c6.9-5.4 12.6-17 12.6-25.9V191.1c.2-8.8-6.6-18.3-14.9-21.2zM810 654.3L512 886.5 214 654.3V226.7l298-101.6 298 101.6v427.6z"
              />
              <path
                d="M452 297v36c0 4.4 3.6 8 8 8h108v274h-38V405c0-4.4-3.6-8-8-8h-35c-4.4 0-8 3.6-8 8v210h-31c-4.4 0-8 3.6-8 8v37c0 4.4 3.6 8 8 8h244c4.4 0 8-3.6 8-8v-37c0-4.4-3.6-8-8-8h-72V493h58c4.4 0 8-3.6 8-8v-35c0-4.4-3.6-8-8-8h-58V341h63c4.4 0 8-3.6 8-8v-36c0-4.4-3.6-8-8-8H460c-4.4 0-8 3.6-8 8z"
              />
            </svg>
          </span>
        </div>
        <div class="mi-captcha-radar-tip">通过验证</div>
      </div>
    </div>
  </div>
  <verification :show="verificationShow" @success="verificationSuccess" @close="verificationClose" />
</template>

<script setup>
import Verification from "vue3-puzzle-vcode";
import { ref } from "vue";

defineOptions({
  name: "AppVerification",
});
const verificationPass = defineModel("verificationPass", {
  type: Boolean,
  default: false,
});
const verificationShow = ref(false);
const verificationClose = () => {
  verificationShow.value = false;
};
const verificationSuccess = () => {
  verificationPass.value = true;
  verificationClose();
};
</script>

<style scoped lang="scss">
.mi-captcha {
  width: 100%;
  flex: 1;
  height: 2.625rem;
  font-family: "Pingfang SC", "Microsoft YaHei", "Monospaced Number",
    "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "PingFang SC", "Hiragino Sans GB", "Helvetica Neue", Helvetica, Arial,
    sans-serif;
}

.mi-captcha-content {
  width: 100%;
  height: 100%;
  position: relative;
}

.mi-captcha-radar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
  height: 100%;
  width: 100%;
  background-color: #1d1e23;
  background-image: linear-gradient(315deg, #a8b4d3 0%, #adc0ed 74%);
  border: 1px solid #96a4c8;
  cursor: pointer;
  min-width: 10rem;
  position: relative;
  border-radius: 4px;
}

.mi-captcha-radar-ready,
.mi-captcha-radar-success {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  flex-wrap: nowrap;
  position: relative;
  transition: all 0.4s ease;
  width: 1.875rem;
  height: 1.875rem;
  margin: 0.375rem;
}

.mi-captcha-radar-ring,
.mi-captcha-radar-dot {
  position: absolute;
  border-radius: 50%;
  transform: scale(0.4);
  width: 100%;
  height: 100%;
  box-shadow: inset 0 0 0 1px #2c67ec;
  background-image: linear-gradient(0, rgba(0, 0, 0, 0) 50%, #fff 50%),
    linear-gradient(0, #fff 50%, rgba(0, 0, 0, 0) 50%);
}

.mi-captcha-radar-dot {
  background: #2c67ec;
}

.mi-captcha-radar-ring {
  animation: mi-anim-wait 1s infinite;
  transform: scale(1);
}

.mi-captcha-radar-success {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  cursor: default;
}

.mi-captcha-radar-success-icon {
  color: #f6ca9d;
  animation-name: mi-captcha-success;
  animation-timing-function: ease;
  animation-iteration-count: 1;
  animation-delay: 0.5s;
  animation-duration: 0.4s;
  font-size: 1.25rem;
}

.mi-captcha-radar-tip {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
  height: 2.625rem;
  padding-left: 0.125rem;
  font-size: 0.875rem;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

.mi-captcha-radar-pass .mi-captcha-radar-tip {
  color: #f6ca9d;
}

@keyframes mi-captcha-success {
  25% {
    transform: rotate(25deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}

@keyframes mi-anim-wait {
  60% {
    transform: scale(0.75);
  }
}

:deep {
  .vue-auth-box_ {
    background: #2e63d8 !important;
    border: 1px solid #2752b3 !important;
  }
  .mi-captcha-radar-pass .mi-captcha-radar-tip {
    color: #ffffff !important;
  }
  .mi-captcha-radar-success-icon {
    color: #ffffff !important;
  }
}
</style>