c5_labsci/fapp/ciyon_ap/pages/demo/page/oldfont.vue

81 lines
2.2 KiB
Vue

<template>
<ciy-header :title="lang('apptitle')"></ciy-header>
<view>
<view class="ciy-card">
<view class="title">敬老模式</view>
<view class="right">this.setfont()</view>
<view class="content">
<view style="margin:1em 0;display: flex;justify-content: space-around;flex-wrap: wrap;gap: 1em;">
<view @tap="this.setfont('def')">正常</view>
<view @tap="this.setfont('lg')">较大</view>
<view @tap="this.setfont('xl')">很大</view>
<view @tap="this.setfont('xxl')">极大</view>
</view>
</view>
</view>
<view class="px4 py4">一二三四五六七八九零一二三四五六七八九零一二三四五六七八九零一二三四五六七八九零一二三四五六七八九零</view>
<view class="ciy-card">
<view class="title">字号对比</view>
<view class="right">px/em/rem</view>
<view class="content">
<view class="py4">一二三四五六七八九零一二三四五六七八九零一二三四五六七八九零一二三四五六七八九零一二三四五六七八九零</view>
<view style="margin:0.5em 0;font-size:10px; background-color: var(--bg4);">
10px
<text style="font-size:2em;">
+2em
</text>
<text style="font-size:2rem;">
+2rem
</text>
</view>
<view style="margin:0.5em 0;font-size:2em; background-color: var(--bg4);">
2em
<text style="font-size:2em;">
+2em
</text>
</view>
<view style="margin:0.5em 0;font-size:2rem;background-color: var(--bg5);">
2rem
<text style="font-size:2rem;">
+2rem
</text>
</view>
<view style="margin:0.5em 0;font-size:2em;background-color: var(--bg6);">
2em
<text style="font-size:2rem;">
+2rem
</text>
</view>
<view style="margin:0.5em 0;font-size:2rem;background-color: var(--bg7);">
2rem
<text style="font-size:2em;">
+2em
</text>
</view>
<view style="margin:0.5em 0;font-size:1rem;background-color: var(--bg8);">
1rem
<text style="font-size:2em;">
+2em
</text>
</view>
</view>
</view>
</view>
</template>
<style>
</style>
<script>
export default {
data() {
return {
sys: {}
}
},
onLoad() {},
methods: {}
}
</script>