page页面精简
This commit is contained in:
parent
0a54a05071
commit
f05ac1d1e5
1
App.vue
1
App.vue
|
|
@ -14,5 +14,4 @@ export default {
|
|||
|
||||
<style>
|
||||
/*每个页面公共css */
|
||||
@import './static/css/tabbar.css';
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -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` 脚本
|
||||
Loading…
Reference in New Issue
Block a user