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