page页面精简
This commit is contained in:
parent
0a54a05071
commit
f05ac1d1e5
1
App.vue
1
App.vue
|
|
@ -14,5 +14,4 @@ export default {
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
/*每个页面公共css */
|
/*每个页面公共css */
|
||||||
@import './static/css/tabbar.css';
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -32,12 +32,6 @@
|
||||||
"color": "#999999",
|
"color": "#999999",
|
||||||
"selectedColor": "#ff6b6b",
|
"selectedColor": "#ff6b6b",
|
||||||
"backgroundColor": "#ffffff",
|
"backgroundColor": "#ffffff",
|
||||||
"borderStyle": "white",
|
|
||||||
"height": "60px",
|
|
||||||
"fontSize": "12px",
|
|
||||||
"iconWidth": "24px",
|
|
||||||
"iconHeight": "24px",
|
|
||||||
"spacing": "4px",
|
|
||||||
"list": [
|
"list": [
|
||||||
{
|
{
|
||||||
"pagePath": "pages/index/index",
|
"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