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>
|