63 lines
1.2 KiB
Vue
63 lines
1.2 KiB
Vue
<script setup>
|
|
import { ref } from 'vue'
|
|
import { useUserStore } from '../../../stores/user'
|
|
import { useAuthUser } from '../../../composables/useAuthUser'
|
|
|
|
const { fontSizeData } = useAuthUser()
|
|
const { updateFontSize } = useUserStore()
|
|
|
|
const size = ref(fontSizeData.value)
|
|
const sliderChange = ({ detail }) => {
|
|
const data = {
|
|
1: '20',
|
|
2: '26',
|
|
3: '36',
|
|
4: '42',
|
|
5: '50',
|
|
6: '56'
|
|
}[detail.value]
|
|
|
|
size.value = data
|
|
updateFontSize(data)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<view class="font-settings">
|
|
<view class="top-text">
|
|
<text :style="{ 'font-size': `${size}rpx` }">预览字体大小</text>
|
|
</view>
|
|
<slider
|
|
:max="6"
|
|
:min="1"
|
|
:value="
|
|
{ '20': 1, '26': 2, '36': 3, '42': 4, '50': 5, '56': 6 }[
|
|
fontSizeData
|
|
]
|
|
"
|
|
@change="sliderChange"
|
|
/>
|
|
</view>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
// 背景色
|
|
page {
|
|
background: #f9f9f9;
|
|
}
|
|
|
|
.font-settings {
|
|
padding: 20rpx 32rpx;
|
|
|
|
.top-text {
|
|
padding: 24rpx 20rpx;
|
|
background: #ffffff;
|
|
border-radius: 16rpx;
|
|
margin-bottom: 100rpx;
|
|
text {
|
|
color: #333333;
|
|
}
|
|
}
|
|
}
|
|
</style>
|