|
|
@@ -152,9 +152,9 @@
|
|
|
// console.log(res)
|
|
|
// });
|
|
|
// };
|
|
|
-
|
|
|
+
|
|
|
const tabbar = [1,1,1,1]
|
|
|
-
|
|
|
+
|
|
|
// 用户名
|
|
|
const userName = ref<string>('用户')
|
|
|
|
|
|
@@ -708,56 +708,19 @@
|
|
|
.db-view{
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
- justify-content: space-between; // 或 space-around
|
|
|
+ justify-content: flex-start; // 或 space-around
|
|
|
+ // justify-content: space-around; /* 自动分配间距,避免挤压 */
|
|
|
align-items: center;
|
|
|
padding: 0 20rpx; // 可选:避免贴边
|
|
|
|
|
|
- // .db-box{
|
|
|
- // background-color: #fff;
|
|
|
- // width:200rpx;
|
|
|
- // height: 200rpx;
|
|
|
- // justify-content: center;
|
|
|
- // align-items: center;
|
|
|
- // margin-left: 28rpx;
|
|
|
- // border-radius: 5px;
|
|
|
- // .db-text{
|
|
|
- // margin-top: 10rpx;
|
|
|
- // font-size:10px;
|
|
|
- // }
|
|
|
- // .db-center-1{
|
|
|
- // justify-content: center;
|
|
|
- // align-items: center;
|
|
|
- // background-color: #DBEAFE;
|
|
|
- // border-radius: 200px;
|
|
|
- // width:100rpx;
|
|
|
- // height:100rpx;
|
|
|
- // position: relative;
|
|
|
- // }
|
|
|
- // .db-center-2{
|
|
|
- // justify-content: center;
|
|
|
- // align-items: center;
|
|
|
- // background-color: #DCFCE7;
|
|
|
- // border-radius: 200px;
|
|
|
- // width:100rpx;
|
|
|
- // height:100rpx;
|
|
|
- // position: relative;
|
|
|
- // }
|
|
|
- // .db-center-3{
|
|
|
- // justify-content: center;
|
|
|
- // align-items: center;
|
|
|
- // background-color: #F3E8FF;
|
|
|
- // border-radius: 200px;
|
|
|
- // width:100rpx;
|
|
|
- // height:100rpx;
|
|
|
- // }
|
|
|
- // }
|
|
|
.db-box {
|
|
|
background-color: #fff;
|
|
|
+ width: 216rpx;
|
|
|
// 删除固定宽高 ↓
|
|
|
- // width: 200rpx;
|
|
|
+ // max-width: 300rpx;
|
|
|
// height: 200rpx;
|
|
|
-
|
|
|
- flex: 1; // ✅ 关键:平均分空间
|
|
|
+
|
|
|
+ // flex: 1; // ✅ 关键:平均分空间
|
|
|
display: flex;
|
|
|
flex-direction: column; // 垂直排列:图标在上,文字在下
|
|
|
justify-content: center;
|
|
|
@@ -765,13 +728,13 @@
|
|
|
margin: 0 10rpx; // 左右间距(替代原来的 margin-left)
|
|
|
border-radius: 5px;
|
|
|
padding: 30rpx 10rpx; // 可选:增加内边距使内容不拥挤
|
|
|
-
|
|
|
+
|
|
|
.db-text {
|
|
|
margin-top: 16rpx; // 图标与文字间距
|
|
|
font-size: 24rpx; // 建议用 rpx,10px 太小了
|
|
|
color: #333;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
.db-center-1,
|
|
|
.db-center-2,
|
|
|
.db-center-3 {
|
|
|
@@ -780,10 +743,10 @@
|
|
|
align-items: center;
|
|
|
width: 100rpx;
|
|
|
height: 100rpx;
|
|
|
- border-radius: 50rpx;
|
|
|
+ border-radius: 50rpx;
|
|
|
position: relative;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
.db-center-1 { background-color: #DBEAFE; }
|
|
|
.db-center-2 { background-color: #DCFCE7; }
|
|
|
.db-center-3 { background-color: #F3E8FF; }
|
|
|
@@ -807,7 +770,7 @@
|
|
|
justify-content: center; // 水平居中
|
|
|
align-items: center; // 垂直居中
|
|
|
box-sizing: border-box; // 确保 padding 不影响整体尺寸
|
|
|
- padding: 0 12rpx;
|
|
|
+ padding: 0 12rpx;
|
|
|
.count {
|
|
|
// line-height: 40rpx;
|
|
|
font-size: 26rpx;
|
|
|
@@ -816,7 +779,7 @@
|
|
|
}
|
|
|
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
|
|
|
.list-item {
|
|
|
margin: 0 30rpx 24rpx 30rpx;
|