毕设-dev-first
This commit is contained in:
@ -1,168 +1,164 @@
|
||||
.ml-7 {
|
||||
margin-left: 13.13rpx;
|
||||
}
|
||||
.mt-9 {
|
||||
margin-top: 16.88rpx;
|
||||
}
|
||||
.mt-11 {
|
||||
margin-top: 20.63rpx;
|
||||
}
|
||||
.ml-5 {
|
||||
margin-left: 9.38rpx;
|
||||
}
|
||||
/* ===== 工具类 ===== */
|
||||
.ml-7 { margin-left: 13.13rpx; }
|
||||
.mt-9 { margin-top: 16.88rpx; }
|
||||
.mt-11 { margin-top: 20.63rpx; }
|
||||
.mt-22{ margin-top:22rpx; }
|
||||
.ml-5 { margin-left: 9.38rpx; }
|
||||
.ml-6{ margin-left:12rpx; }
|
||||
.ml-8{ margin-left:16rpx; }
|
||||
.ml-16{ margin-left:32rpx; }
|
||||
.mt-10{ margin-top:10rpx; }
|
||||
.mt-15{ margin-top:15rpx; }
|
||||
|
||||
/* 页面容器 */
|
||||
page { height: 100vh; }
|
||||
.page {
|
||||
padding: 65.63rpx 28.13rpx 0;
|
||||
background-image: linear-gradient(180deg, #ff8d1a -7.3%, #ffffff00 92.1%);
|
||||
padding: 35.63rpx 28.13rpx 0;
|
||||
background-image: linear-gradient(180deg, #ff8d1a -7.3%, #ffffff00 120.1%);
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
height: 100%;
|
||||
padding-top: calc(35.63rpx + constant(safe-area-inset-top));
|
||||
padding-top: calc(35.63rpx + env(safe-area-inset-top));
|
||||
}
|
||||
.section {
|
||||
padding: 15rpx 13.13rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 8.33rpx;
|
||||
|
||||
/* 顶部卡片 */
|
||||
.section { padding: 15rpx 13.13rpx; background-color: #ffffff; border-radius: 8.33rpx; }
|
||||
|
||||
/* 头像与昵称 */
|
||||
.image { margin: 20rpx; width: 141.25rpx; height: 141.25rpx; border-radius: 50%; }
|
||||
.avatar-btn{
|
||||
min-width:0!important; width:auto!important; background:transparent!important;
|
||||
border:none!important; padding:0!important; margin:0!important;
|
||||
}
|
||||
.image {
|
||||
margin: 20rpx;
|
||||
width: 141.25rpx;
|
||||
height: 141.25rpx;
|
||||
border-radius: 30rpx;
|
||||
.font { font-size: 26.25rpx; font-family: SourceHanSansCN; line-height: 24.34rpx; color: #000000; }
|
||||
.text { line-height: 24.21rpx; }
|
||||
.nickname-wrap{
|
||||
display:block; max-width: 250rpx; white-space: normal; word-break: break-all; line-height:1.4;
|
||||
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
|
||||
}
|
||||
button {
|
||||
/* 去掉默认最小宽度 */
|
||||
min-width: 0 !important;
|
||||
/* 确保宽度随内容自适应 */
|
||||
width: auto !important;
|
||||
/* 下面是其他重置，保证“隐形” */
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
|
||||
/* 电话与邀请码行 */
|
||||
.group_2 { padding: 0 7.26rpx; }
|
||||
.image_3 { width: 22.5rpx; height: 22.5rpx; }
|
||||
.font_2 { font-size: 22.5rpx; font-family: SourceHanSansCN; line-height: 20.68rpx; color: #ff8d1a; }
|
||||
.text_2 { color: #808080; line-height: 1.4; }
|
||||
.section_2{
|
||||
display:inline-flex; align-items:center; max-width:100%;
|
||||
padding: 7.5rpx 13.13rpx 5.63rpx 14.03rpx; background-color: #fff6de; border-radius: 31.26rpx;
|
||||
}
|
||||
.font {
|
||||
font-size: 26.25rpx;
|
||||
font-family: SourceHanSansCN;
|
||||
line-height: 24.34rpx;
|
||||
color: #000000;
|
||||
.image_4 { width: 24.38rpx; height: 24.38rpx; }
|
||||
.text_3 { margin-right: 10.6rpx; white-space:nowrap; }
|
||||
|
||||
.group { margin-top: 33.75rpx; width: 133.72rpx; }
|
||||
.image_2 { margin-left: 17.48rpx; width: 76.88rpx; height: 76.88rpx; }
|
||||
.text_4 { line-height: 20.72rpx; }
|
||||
|
||||
/* 查看绩效 / 排名（等分宫格） */
|
||||
.equal-division { display:flex; gap: 12rpx; }
|
||||
.section_3 { padding: 6.88rpx 0 13.59rpx; background-color: #ffffff; border-radius: 18.75rpx; }
|
||||
.equal-division-item_1 { margin-left: 8.06rpx; }
|
||||
.group_3 { padding: 11.76rpx 0 10.01rpx; width: 224.59rpx; }
|
||||
.image_5 { width: 63.99rpx; height: 63.99rpx; }
|
||||
.text_5 { line-height: 24.26rpx; }
|
||||
.equal-division-item_2 { position: static; transform:none; }
|
||||
.equal-division-item { padding: 11.76rpx 0 10.09rpx; width: 224.59rpx; }
|
||||
.text_6 { line-height: 24.28rpx; }
|
||||
.equal-division-item_3 { position: static; transform:none; }
|
||||
.group_5 { padding: 11.76rpx 0 9.99rpx; width: 224.59rpx; }
|
||||
|
||||
/* 列表卡片（你的原有区） */
|
||||
.list { padding-top: 19.38rpx; }
|
||||
.section_4 { padding: 31.88rpx 31.88rpx 30rpx 33.75rpx; background-color: #ffffff; border-radius: 9.47rpx; min-height:88rpx; }
|
||||
.image_6 { border-radius: 9.38rpx; width: 41.25rpx; height: 41.25rpx; }
|
||||
.image_7 { width: 30rpx; height: 30rpx; }
|
||||
.text_7 { line-height: 24.47rpx; }
|
||||
.text_8 { line-height: 23.81rpx; }
|
||||
|
||||
/* ===== 当前金额卡片（美化后） ===== */
|
||||
.wallet-card {
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
padding: 28rpx 24rpx;
|
||||
box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
.text {
|
||||
line-height: 24.21rpx;
|
||||
|
||||
/* 金额行 */
|
||||
.wallet-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
.group_2 {
|
||||
padding: 0 7.26rpx;
|
||||
.wallet-head-left { display: flex; align-items: baseline; }
|
||||
.wallet-head-label { font-size: 26rpx; color: #666; }
|
||||
.wallet-head-amount { margin-left: 8rpx; font-size: 38rpx; color: #ff8d1a; font-weight: 700; }
|
||||
|
||||
/* 立即提现按钮 */
|
||||
.wallet-head-right {
|
||||
background: linear-gradient(135deg, #ffae3d, #ff8d1a);
|
||||
border-radius: 999rpx;
|
||||
padding: 12rpx 28rpx;
|
||||
box-shadow: 0 4rpx 12rpx rgba(255, 141, 26, 0.3);
|
||||
display: flex; /* 水平+垂直居中 */
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.image_3 {
|
||||
width: 22.5rpx;
|
||||
height: 22.5rpx;
|
||||
.wallet-withdraw-text { font-size: 26rpx; color: #fff; font-weight: 600; }
|
||||
|
||||
/* 三统计（轻量分隔线风格） */
|
||||
.wallet-stats {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 12rpx;
|
||||
border-top: 1rpx solid #f2f2f2;
|
||||
padding-top: 20rpx;
|
||||
}
|
||||
.font_2 {
|
||||
font-size: 22.5rpx;
|
||||
font-family: SourceHanSansCN;
|
||||
line-height: 20.68rpx;
|
||||
color: #ff8d1a;
|
||||
.wallet-stat {
|
||||
flex: 1 0 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.text_2 {
|
||||
color: #808080;
|
||||
line-height: 1.4;
|
||||
.wallet-stat:not(:last-child) { border-right: 1rpx solid #f2f2f2; }
|
||||
.wallet-stat-label { font-size: 24rpx; color: #888; }
|
||||
.wallet-stat-value { margin-top: 6rpx; font-size: 30rpx; color: #333; font-weight: 600; }
|
||||
|
||||
/* ===== 三入口快捷区 ===== */
|
||||
.shortcut-row{
|
||||
margin-top: 18rpx; background:#fff; border-radius: 16rpx; padding: 18rpx 10rpx;
|
||||
display:flex; justify-content:space-between;
|
||||
}
|
||||
.section_2 {
|
||||
width: 230rpx;
|
||||
.shortcut-item{ flex:1 0 0; display:flex; flex-direction:column; align-items:center; }
|
||||
.shortcut-icon{ width: 72rpx; height: 72rpx; }
|
||||
.shortcut-text{ margin-top: 10rpx; font-size: 24rpx; color: #333; }
|
||||
|
||||
/* ===== 接单四宫格 ===== */
|
||||
.grid-row{
|
||||
margin-top: 18rpx; background:#fff; border-radius: 16rpx; padding: 18rpx 8rpx 6rpx;
|
||||
display:flex; flex-wrap:wrap; justify-content:space-between;
|
||||
}
|
||||
.grid-item{ width: 25%; display:flex; flex-direction:column; align-items:center; margin-bottom: 18rpx; }
|
||||
.grid-icon{ width: 64rpx; height: 64rpx; border-radius: 12rpx; }
|
||||
.grid-text{ margin-top: 8rpx; font-size: 24rpx; color:#333; }
|
||||
|
||||
/* 自适应宽的胶囊 */
|
||||
.invite-pill{
|
||||
display: inline-flex; /* 关键：让容器只包裹内容 */
|
||||
align-items: center;
|
||||
max-width: 100%; /* 不超过父容器 */
|
||||
padding: 7.5rpx 13.13rpx 5.63rpx 14.03rpx;
|
||||
background-color: #fff6de;
|
||||
border-radius: 31.26rpx;
|
||||
/* 可选，让它靠左不被两端对齐挤开 */
|
||||
align-self: flex-start;
|
||||
}
|
||||
.image_4 {
|
||||
width: 24.38rpx;
|
||||
height: 24.38rpx;
|
||||
|
||||
/* 文本超长时省略，不把胶囊撑爆 */
|
||||
.invite-text{
|
||||
max-width: 520rpx; /* 按你页面宽度调，或用 60% 等比例 */
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.text_3 {
|
||||
margin-right: 21.6rpx;
|
||||
}
|
||||
.group {
|
||||
margin-top: 33.75rpx;
|
||||
width: 133.72rpx;
|
||||
}
|
||||
.image_2 {
|
||||
margin-left: 17.48rpx;
|
||||
width: 76.88rpx;
|
||||
height: 76.88rpx;
|
||||
}
|
||||
.text_4 {
|
||||
line-height: 20.72rpx;
|
||||
}
|
||||
.equal-division {
|
||||
position: relative;
|
||||
}
|
||||
.section_3 {
|
||||
padding: 6.88rpx 0 13.59rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 18.75rpx;
|
||||
}
|
||||
.equal-division-item_1 {
|
||||
margin-left: 8.06rpx;
|
||||
}
|
||||
.group_3 {
|
||||
padding: 11.76rpx 0 10.01rpx;
|
||||
width: 224.59rpx;
|
||||
}
|
||||
.image_5 {
|
||||
width: 63.99rpx;
|
||||
height: 63.99rpx;
|
||||
}
|
||||
.text_5 {
|
||||
line-height: 24.26rpx;
|
||||
}
|
||||
.equal-division-item_2 {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.equal-division-item {
|
||||
padding: 11.76rpx 0 10.09rpx;
|
||||
width: 224.59rpx;
|
||||
}
|
||||
.text_6 {
|
||||
line-height: 24.28rpx;
|
||||
}
|
||||
.equal-division-item_3 {
|
||||
position: absolute;
|
||||
right: 10.03rpx;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.group_5 {
|
||||
padding: 11.76rpx 0 9.99rpx;
|
||||
width: 224.59rpx;
|
||||
}
|
||||
.list {
|
||||
padding-top: 19.38rpx;
|
||||
}
|
||||
.section_4 {
|
||||
padding: 31.88rpx 31.88rpx 30rpx 33.75rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 9.47rpx;
|
||||
}
|
||||
.image_6 {
|
||||
border-radius: 9.38rpx;
|
||||
width: 41.25rpx;
|
||||
height: 41.25rpx;
|
||||
}
|
||||
.image_7 {
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
}
|
||||
.text_7 {
|
||||
line-height: 24.47rpx;
|
||||
}
|
||||
.text_8 {
|
||||
line-height: 23.81rpx;
|
||||
}
|
||||
.nickname-wrap {
|
||||
display: block; /* 让它单独占一行 */
|
||||
max-width: 250rpx; /* 不超过容器宽度 */
|
||||
white-space: normal; /* 允许正常换行 */
|
||||
word-break: break-all; /* 长字符串也能断行 */
|
||||
line-height: 1.4;
|
||||
}
|
||||
Reference in New Issue
Block a user