r-util-js/playground/uniapp-app/src/pages/index/index.vue

108 lines
3.1 KiB
Vue
Raw Normal View History

<template>
<view class="content">
<view class="title">@r-utils/uni-app & @r-utils/common Playground</view>
<view class="desc">以下是各模块的使用示例点击进入独立页面</view>
<view class="section-title">@r-utils/uni-app</view>
<view class="nav-list">
<navigator url="/pages/request/index" class="nav-item">
<text class="nav-label">Request 请求封装</text>
<text class="nav-desc"> axios uni.request 封装支持拦截器</text>
</navigator>
<navigator url="/pages/uni-helper/index" class="nav-item">
<text class="nav-label">UniHelper 常用工具</text>
<text class="nav-desc">rpxToPxshowToastgetCurrentPage </text>
</navigator>
<navigator url="/pages/bluetooth/index" class="nav-item">
<text class="nav-label">BluetoothUtils 蓝牙工具</text>
<text class="nav-desc">蓝牙设备搜索连接数据传输</text>
</navigator>
<navigator url="/pages/nfc/index" class="nav-item">
<text class="nav-label">NFC NFC 功能</text>
<text class="nav-desc">NFC 标签读写</text>
</navigator>
<navigator url="/pages/upload/index" class="nav-item">
<text class="nav-label">Upload 文件上传</text>
<text class="nav-desc">uni.uploadFile 封装</text>
</navigator>
</view>
<view class="section-title" style="margin-top: 30rpx;">@r-utils/common</view>
<view class="nav-list">
<navigator url="/pages/permission/index" class="nav-item">
<text class="nav-label">Permission 权限校验</text>
<text class="nav-desc">权限字符串格式校验</text>
</navigator>
<navigator url="/pages/countdown/index" class="nav-item">
<text class="nav-label">Countdown 倒计时</text>
<text class="nav-desc">基于 dayjs 的倒计时类</text>
</navigator>
<navigator url="/pages/wait/index" class="nav-item">
<text class="nav-label">wait 等待函数</text>
<text class="nav-desc">异步等待指定时间</text>
</navigator>
<navigator url="/pages/knock-test/index" class="nav-item">
<text class="nav-label">KnockTest 敲击测试</text>
<text class="nav-desc">顺序敲击触发回调的状态机</text>
</navigator>
</view>
</view>
</template>
<script setup lang="ts">
</script>
<style>
.content {
padding: 30rpx;
}
.title {
font-size: 36rpx;
font-weight: bold;
margin-bottom: 12rpx;
}
.desc {
font-size: 26rpx;
color: #666;
margin-bottom: 40rpx;
}
.section-title {
font-size: 28rpx;
font-weight: bold;
color: #42b883;
margin-bottom: 20rpx;
padding-bottom: 8rpx;
border-bottom: 1px solid #eee;
}
.nav-list {
display: flex;
flex-direction: column;
gap: 16rpx;
margin-bottom: 20rpx;
}
.nav-item {
padding: 20rpx 24rpx;
background: #fff;
border-radius: 12rpx;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.nav-label {
display: block;
font-size: 28rpx;
font-weight: bold;
margin-bottom: 6rpx;
}
.nav-desc {
display: block;
font-size: 24rpx;
color: #888;
}
</style>