73 lines
3.1 KiB
Text
73 lines
3.1 KiB
Text
|
<view class="font-size-container">
|
||
|
|
<view class="content" style="padding-top: {{statusBarHeight + menuButtonInfo.height}}px;">
|
||
|
|
<!-- 预览区域 -->
|
||
|
|
<view class="preview-section">
|
||
|
|
<view class="chat-preview" style="font-size: {{previewFontSize}}px;">
|
||
|
|
<view class="message-bubble right">
|
||
|
|
<view class="bubble-content">
|
||
|
|
<text class="message-text">Preview text size</text>
|
||
|
|
</view>
|
||
|
|
<view class="avatar right">
|
||
|
|
<image src="/images/avatar.png" mode="aspectFill" style="width: 100%; height: 100%; border-radius: 50%;"></image>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="message-bubble left">
|
||
|
|
<view class="avatar left">
|
||
|
|
<image src="/images/Findme avatar.png" mode="aspectFill" style="width: 100%; height: 100%; border-radius: 50%;"></image>
|
||
|
|
</view>
|
||
|
|
<view class="bubble-content">
|
||
|
|
<text class="message-text">Adjust the slider below to change text size</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="message-bubble left">
|
||
|
|
<view class="avatar left">
|
||
|
|
<image src="/images/Findme avatar.png" mode="aspectFill" style="width: 100%; height: 100%; border-radius: 50%;"></image>
|
||
|
|
</view>
|
||
|
|
<view class="bubble-content">
|
||
|
|
<text class="message-text">接下来，你可以试着用滑块调整字体大小。</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 底部空间 -->
|
||
|
|
<view style="height: 150rpx;"></view>
|
||
|
|
|
||
|
|
<!-- 滑块组件 -->
|
||
|
|
<view class="slider-section" style="position: fixed; bottom: 0; left: 0; right: 0; padding: 20rpx; box-sizing: border-box;">
|
||
|
|
<view class="text-container">
|
||
|
|
<text class="size-label">A</text>
|
||
|
|
<text class="size-label large">A</text>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="slider-wrapper">
|
||
|
|
<view class="custom-track"></view>
|
||
|
|
<view class="dots-container-overlay">
|
||
|
|
<view class="dot {{activeDotIndex === 0 ? 'active' : ''}}" bindtap="onDotClick" data-value="14"></view>
|
||
|
|
<view class="dot-container">
|
||
|
|
<text class="dot-label">Default</text>
|
||
|
|
<view class="dot {{activeDotIndex === 1 ? 'active' : ''}}" bindtap="onDotClick" data-value="16"></view>
|
||
|
|
</view>
|
||
|
|
<view class="dot {{activeDotIndex === 2 ? 'active' : ''}}" bindtap="onDotClick" data-value="18"></view>
|
||
|
|
<view class="dot {{activeDotIndex === 3 ? 'active' : ''}}" bindtap="onDotClick" data-value="20"></view>
|
||
|
|
<view class="dot {{activeDotIndex === 4 ? 'active' : ''}}" bindtap="onDotClick" data-value="22"></view>
|
||
|
|
<view class="dot {{activeDotIndex === 5 ? 'active' : ''}}" bindtap="onDotClick" data-value="24"></view>
|
||
|
|
</view>
|
||
|
|
<slider
|
||
|
|
min="14"
|
||
|
|
max="24"
|
||
|
|
value="{{fontSizeValue}}"
|
||
|
|
activeColor="transparent"
|
||
|
|
backgroundColor="transparent"
|
||
|
|
block-size="22"
|
||
|
|
block-color="transparent"
|
||
|
|
block-border-radius="50%"
|
||
|
|
track-height="6"
|
||
|
|
disabled="true"
|
||
|
|
/>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|