Yinux/unibest
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'base' into i18n

Browse Source
This commit is contained in:
菲鸽 2024-05-02 16:55:03 +08:00
commit 037abd8f09
2 changed files with 13 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/pages/index/about.vue
View File

@ -11,7 +11,7 @@
class="bg-white overflow-hidden pt-2 px-4"
:style="{ marginTop: safeAreaInsets?.top + 'px' }"
>
<view class="text-center text-3xl mt-4">关于页面</view>
<view class="text-center text-3xl mt-4 test-css">关于页面</view>
<view class="text-center text-3xl mt-8">
鸽友们好，我是
<text class="text-red-500">菲鸽</text>
@ -35,7 +35,8 @@ const gotoPage = (page: string) => {
</script>
<style lang="scss" scoped>
.desc {
height: 80rpx;
.test-css {
// mt-4=>1rem=>16px;
margin-top: 16px;
}
</style>

11
uno.config.ts
View File

@ -80,6 +80,13 @@ export default defineConfig({
/**
* 最终这一套组合下来会得到：
* mp 里面：mt-4 => margin-top: 32rpx
* h5 里面：mt-4 => margin-top: 1rem
* mp 里面：mt-4 => margin-top: 32rpx == 16px
* h5 里面：mt-4 => margin-top: 1rem == 16px
*
* 另外，我们还可以推算出 UnoCSS 单位与设计稿差别4倍。
* 375 * 4 = 1500，把设计稿设置为1500，那么设计稿里多少px，unocss就写多少述职。
* 举个例子，设计稿显示某元素宽度100px，就写w-100即可。
*
* 如果是传统方式写样式，则推荐设计稿设置为 750，这样设计稿1px，代码写1rpx。
* rpx是响应式的，可以让不同设备的屏幕显示效果保持一致。
*/