Files
sociology_app/pages/mine/aboutUs/setFontSize.vue
2025-03-12 11:39:31 +08:00

86 lines
1.9 KiB
Vue

<template>
<page-meta
:page-font-size="fontValue + 'px'"
:root-font-size="fontValue + 'px'"
></page-meta>
<view>
<public-module></public-module>
<z-nav-bar title="关于我们" bgColor="#3AB3AE" fontColor="#fff"></z-nav-bar>
<view class="content">
<view>
<view class="fontchange">文字大小</view>
</view>
<view style="width: 100%; padding: 0 10px">
<slider
:min="2.5"
:max="4"
:value="fontValue"
@change="sliderChange"
:step="1"
/>
<view class="change-fontsize-box">
<text style="font-size: 10px"> 最小 </text>
<text style="font-size: 12px"> 标准 </text>
<text style="font-size: 14px"> 最大 </text>
</view>
</view>
<view style="padding: 20px 10px; width: 100%">
<u-button type="primary" @click="submit">确定</u-button>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
fontValue: 3,
};
},
onShow() {
uni.getStorageSync("fontSize")
? (this.fontValue = this.$baseFontSize())
: (this.fontValue = 3);
},
methods: {
sliderChange(e) {
this.fontValue = e.detail.value;
},
submit() {
uni.setStorageSync("fontSize", this.fontValue);
uni.showToast({
title: "设置成功",
icon: "none",
duration: 1500,
});
console.log(uni.getStorageSync("fontSize"));
uni.navigateBack({
delta: 1,
});
},
},
};
</script>
<style>
.fontchange {
font-size: 26rpx;
margin: 20px 0;
}
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
padding: 5px;
box-sizing: border-box;
}
.change-fontsize-box {
margin: 10px 18px;
display: flex;
align-items: flex-end;
justify-content: space-between;
}
</style>