59 lines
1.2 KiB
Vue
59 lines
1.2 KiB
Vue
<template>
|
||
<!-- 触底/阻断加载圈：颜色跟主题主色 -->
|
||
<view class="spin-wrap">
|
||
<view class="spin" :style="spinStyle" />
|
||
<text v-if="text" class="spin-txt" :style="{ color: soft }">{{ text }}</text>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { getActiveVars } from '@/utils/theme'
|
||
|
||
export default {
|
||
name: 'ThemeSpinner',
|
||
props: {
|
||
text: { type: String, default: '加载中' },
|
||
},
|
||
computed: {
|
||
vars() {
|
||
return getActiveVars()
|
||
},
|
||
soft() {
|
||
return this.vars['--color-text-soft'] || '#78716C'
|
||
},
|
||
spinStyle() {
|
||
const primary = this.vars['--color-primary'] || '#B08D57'
|
||
const border = this.vars['--color-border'] || '#E7DFD3'
|
||
return {
|
||
borderColor: border,
|
||
borderTopColor: primary,
|
||
}
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.spin-wrap {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: 24rpx 0;
|
||
}
|
||
.spin {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
border-width: 4rpx;
|
||
border-style: solid;
|
||
border-radius: 50%;
|
||
animation: spin 0.8s linear infinite;
|
||
}
|
||
.spin-txt {
|
||
margin-top: 8rpx;
|
||
font-size: 22rpx;
|
||
}
|
||
@keyframes spin {
|
||
to { transform: rotate(360deg); }
|
||
}
|
||
</style>
|