page页面精简

This commit is contained in:
minimaxagent1 2025-08-13 12:03:04 +08:00
parent 0a54a05071
commit f05ac1d1e5
4 changed files with 1 additions and 99 deletions

View File

@ -14,5 +14,4 @@ export default {
<style>
/*每个页面公共css */
@import './static/css/tabbar.css';
</style>

View File

@ -32,12 +32,6 @@
"color": "#999999",
"selectedColor": "#ff6b6b",
"backgroundColor": "#ffffff",
"borderStyle": "white",
"height": "60px",
"fontSize": "12px",
"iconWidth": "24px",
"iconHeight": "24px",
"spacing": "4px",
"list": [
{
"pagePath": "pages/index/index",

View File

@ -1,55 +1 @@
/* 自定义TabBar样式 */
.uni-tabbar {
padding: 8px 0 4px 0;
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}
.uni-tabbar-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 4px 0;
min-height: 50px;
}
.uni-tabbar-item__icon {
margin-bottom: 4px;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
}
.uni-tabbar-item__text {
font-size: 12px;
line-height: 1.2;
text-align: center;
margin-top: 2px;
}
/* 选中状态优化 */
.uni-tabbar-item--selected .uni-tabbar-item__text {
font-weight: 500;
}
/* 图标和文字间距 */
.uni-tabbar-item__icon + .uni-tabbar-item__text {
margin-top: 4px;
}
/* 整体间距优化 */
.uni-tabbar__list {
display: flex;
justify-content: space-around;
align-items: center;
padding: 0 20px;
}
/* 安全区域适配 */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
.uni-tabbar {
padding-bottom: calc(4px + env(safe-area-inset-bottom));
}
}

View File

@ -1,37 +0,0 @@
# 图标文件说明
当前使用的图标已下载到本地,原始资源来自 `enum/commonEnum.js` 中定义的远程资源:
## 首页图标
- 未选中:`home.png` (原URL: https://api.ccttiot.com/image-1754981938495.png)
- 选中:`home-active.png` (原URL: https://api.ccttiot.com/image-1754981895711.png)
## 租赁图标
- 未选中:`rent.png` (原URL: https://api.ccttiot.com/image-1754981988082.png)
- 选中:`rent-active.png` (原URL: https://api.ccttiot.com/image-1754986634575.png)
## 个人中心图标
- 未选中:`profile.png` (原URL: https://api.ccttiot.com/image-1754986718771.png)
- 选中:`profile-active.png` (原URL: https://api.ccttiot.com/image-1754986763842.png)
## 图标配置
- 未选中颜色:`#999999`
- 选中颜色:`#ff6b6b`
- 背景色:`#ffffff`
- 边框样式:`white`
- 高度:`60px`
- 字体大小:`12px`
- 图标尺寸:`24px x 24px`
- 间距:`4px`
## 相关文件
- `pages.json` - tabBar配置
- `enum/commonEnum.js` - 图标资源定义
- `download-icons.js` - 图标下载脚本
- `static/css/tabbar.css` - 自定义tabBar样式
- `App.vue` - 全局样式引入
## 注意事项
- 微信小程序不支持在tabBar中使用网络图片
- 图标已下载到本地 `static/icons/` 目录
- 如需更新图标,请重新运行 `download-icons.js` 脚本