106 lines
2.1 KiB
Vue
106 lines
2.1 KiB
Vue
<template>
|
|
<view>
|
|
<view class="spinner-box" :style="{ width: size + 'rpx', height: size + 'rpx' }">
|
|
<view
|
|
v-if="show"
|
|
class="circle-border"
|
|
:style="{ width: size * 0.75 + 'rpx', height: size * 0.75 + 'rpx' }"
|
|
>
|
|
</view>
|
|
<view
|
|
v-else
|
|
class="circle-border-stop"
|
|
:style="{ width: size * 0.75 + 'rpx', height: size * 0.75 + 'rpx' }"
|
|
></view>
|
|
<view
|
|
class="circle-core"
|
|
:style="{ width: size * 0.75 - 2 + 'rpx', height: size * 0.75 - 2 + 'rpx' }"
|
|
>
|
|
<image
|
|
src="/static/images/icon_lock_transparent.png"
|
|
mode="aspectFill"
|
|
:style="{ width: size * 0.35 + 'rpx', height: size * 0.35 + 'rpx' }"
|
|
></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
|
|
const show = ref(false)
|
|
|
|
const open = () => {
|
|
show.value = true
|
|
}
|
|
const close = () => {
|
|
show.value = false
|
|
}
|
|
|
|
defineProps({
|
|
size: {
|
|
type: Number,
|
|
required: true
|
|
}
|
|
})
|
|
|
|
defineExpose({ open, close })
|
|
</script>
|
|
|
|
<style>
|
|
@keyframes spin {
|
|
from {
|
|
transform: rotate(0);
|
|
}
|
|
to {
|
|
transform: rotate(359deg);
|
|
}
|
|
}
|
|
|
|
.spinner-box {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-color: transparent;
|
|
|
|
position: relative;
|
|
}
|
|
|
|
.circle-border {
|
|
padding: 3upx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border-radius: 50%;
|
|
background: rgb(99, 184, 175);
|
|
background: linear-gradient(0deg, rgba(99, 184, 175, 0.1) 33%, rgba(99, 184, 175, 1) 100%);
|
|
animation: spin 0.8s linear 0s infinite;
|
|
|
|
position: absolute;
|
|
z-index: 0;
|
|
}
|
|
|
|
.circle-border-stop {
|
|
padding: 3upx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border-radius: 50%;
|
|
background: rgb(99, 184, 175);
|
|
position: absolute;
|
|
z-index: 0;
|
|
}
|
|
|
|
.circle-core {
|
|
z-index: 1;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #ffffff;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
</style>
|