377 lines
6.8 KiB
Plaintext
377 lines
6.8 KiB
Plaintext
:host {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
}
|
|
|
|
page {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
min-height: 100vh;
|
|
}
|
|
|
|
page view {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* 个人信息页面样式 */
|
|
.person-info {
|
|
padding: 0;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
min-height: 100vh;
|
|
position: relative;
|
|
}
|
|
|
|
/* 页面标题样式 */
|
|
.page-header {
|
|
text-align: center;
|
|
padding: 80rpx 0 50rpx;
|
|
animation: fadeIn 0.8s ease-out;
|
|
}
|
|
|
|
.header-title {
|
|
font-size: 52rpx;
|
|
font-weight: 700;
|
|
color: #fff;
|
|
margin-bottom: 20rpx;
|
|
text-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.25);
|
|
letter-spacing: 2rpx;
|
|
}
|
|
|
|
.header-subtitle {
|
|
font-size: 30rpx;
|
|
color: rgba(255, 255, 255, 0.85);
|
|
font-weight: 400;
|
|
letter-spacing: 1rpx;
|
|
}
|
|
|
|
/* 信息卡片样式 */
|
|
.info-card {
|
|
background: #fff;
|
|
border-radius: 28rpx;
|
|
margin: 32rpx 24rpx;
|
|
box-shadow: 0 12rpx 40rpx rgba(102, 126, 234, 0.15);
|
|
overflow: hidden;
|
|
animation: slideUp 0.6s ease-out;
|
|
padding: 40rpx 32rpx 50rpx;
|
|
border: 1rpx solid rgba(102, 126, 234, 0.08);
|
|
}
|
|
|
|
/* 通用按钮样式 */
|
|
.person-info__btn {
|
|
width: 100%;
|
|
height: 96rpx;
|
|
background: rgba(255, 255, 255, 0.15);
|
|
border: 2rpx solid rgba(255, 255, 255, 0.3);
|
|
border-radius: 48rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 32rpx;
|
|
color: #ffffff;
|
|
font-weight: 600;
|
|
margin-top: 32rpx;
|
|
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
|
|
backdrop-filter: blur(10rpx);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.person-info__btn:active {
|
|
transform: translateY(2rpx);
|
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
|
|
background: rgba(255, 255, 255, 0.25);
|
|
}
|
|
|
|
.person-info__wrapper {
|
|
padding: 0 32rpx 60rpx;
|
|
}
|
|
|
|
/* 头像相关样式 */
|
|
.avatar-container {
|
|
position: relative;
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.avatar-button {
|
|
position: relative;
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
border: 3rpx solid #667eea;
|
|
background: transparent;
|
|
padding: 0;
|
|
box-shadow: 0 6rpx 20rpx rgba(102, 126, 234, 0.25);
|
|
transition: all 0.3s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.avatar-button::after {
|
|
border: none;
|
|
}
|
|
|
|
.avatar-button:active {
|
|
transform: scale(0.96);
|
|
box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.35);
|
|
}
|
|
|
|
.avatarUrl {
|
|
width: 114rpx;
|
|
height: 114rpx;
|
|
border-radius: 50%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
/* t-avatar 组件样式 */
|
|
.avatar-display {
|
|
width: 114rpx !important;
|
|
height: 114rpx !important;
|
|
border-radius: 50% !important;
|
|
overflow: hidden !important;
|
|
object-fit: cover !important;
|
|
}
|
|
|
|
.avatar-mask {
|
|
position: absolute;
|
|
top: 3rpx;
|
|
left: 3rpx;
|
|
width: calc(100% - 6rpx);
|
|
height: calc(100% - 6rpx);
|
|
background: linear-gradient(135deg, rgba(102, 126, 234, 0.85), rgba(118, 75, 162, 0.85));
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
opacity: 0;
|
|
transition: all 0.3s ease;
|
|
backdrop-filter: blur(6rpx);
|
|
}
|
|
|
|
.avatar-button:active .avatar-mask {
|
|
opacity: 1;
|
|
}
|
|
|
|
.avatar-text {
|
|
color: #fff;
|
|
font-size: 20rpx;
|
|
text-align: center;
|
|
line-height: 1.3;
|
|
font-weight: 500;
|
|
font-weight: 600;
|
|
text-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
/* 昵称输入框样式 */
|
|
.nickname-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
min-width: 300rpx;
|
|
}
|
|
|
|
.nickname-input {
|
|
width: 100%;
|
|
height: 76rpx;
|
|
padding: 0 20rpx;
|
|
border: 2rpx solid #e8eaed;
|
|
border-radius: 20rpx;
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
background: #f8f9fa;
|
|
text-align: right;
|
|
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.nickname-input:focus {
|
|
border-color: #667eea;
|
|
background: #fff;
|
|
box-shadow: 0 6rpx 20rpx rgba(102, 126, 234, 0.18);
|
|
transform: translateY(-1rpx);
|
|
outline: none;
|
|
}
|
|
|
|
.nickname-input::placeholder {
|
|
color: #aaa;
|
|
font-size: 26rpx;
|
|
}
|
|
|
|
/* 性别单选框样式 */
|
|
.gender-radio-container {
|
|
display: flex;
|
|
gap: 40rpx;
|
|
align-items: center;
|
|
}
|
|
|
|
.gender-radio-container radio-group {
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 40rpx;
|
|
align-items: center;
|
|
}
|
|
|
|
.gender-radio-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12rpx;
|
|
padding: 8rpx 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.gender-text {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* 手机号输入框样式 */
|
|
.phone-input-container {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.phone-input {
|
|
width: 100%;
|
|
height: 76rpx;
|
|
padding: 0 20rpx;
|
|
border: 2rpx solid #e8eaed;
|
|
border-radius: 20rpx;
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
background: #f8f9fa;
|
|
text-align: right;
|
|
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.phone-input:focus {
|
|
border-color: #667eea;
|
|
background: #fff;
|
|
box-shadow: 0 6rpx 20rpx rgba(102, 126, 234, 0.18);
|
|
transform: translateY(-1rpx);
|
|
outline: none;
|
|
}
|
|
|
|
.phone-input::placeholder {
|
|
color: #aaa;
|
|
font-size: 26rpx;
|
|
}
|
|
|
|
|
|
|
|
/* 保存状态提示样式 */
|
|
.saving-status {
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
background: linear-gradient(135deg, rgba(102, 126, 234, 0.96), rgba(118, 75, 162, 0.96));
|
|
color: #fff;
|
|
padding: 28rpx 56rpx;
|
|
border-radius: 60rpx;
|
|
font-size: 30rpx;
|
|
z-index: 1000;
|
|
backdrop-filter: blur(12rpx);
|
|
box-shadow: 0 12rpx 40rpx rgba(102, 126, 234, 0.35);
|
|
border: 1rpx solid rgba(255, 255, 255, 0.25);
|
|
animation: pulse 1.5s ease-in-out infinite;
|
|
}
|
|
|
|
.saving-text {
|
|
font-weight: 600;
|
|
letter-spacing: 1rpx;
|
|
}
|
|
|
|
/* Cell组件样式优化 */
|
|
.person-info .t-cell-class {
|
|
height: 120rpx;
|
|
background: transparent;
|
|
border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.person-info .t-cell-class:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
/* 添加微妙的动画效果 */
|
|
.info-card {
|
|
animation: slideUp 0.6s ease-out;
|
|
}
|
|
|
|
@keyframes slideUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(80rpx);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.page-header {
|
|
animation: fadeIn 0.8s ease-out;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: scale(0.95);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% {
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
transform: scale(1.05);
|
|
}
|
|
}
|
|
|
|
/* 响应式设计 */
|
|
@media (max-width: 375px) {
|
|
.page-header {
|
|
padding: 50rpx 24rpx 30rpx;
|
|
}
|
|
|
|
.header-title {
|
|
font-size: 42rpx;
|
|
}
|
|
|
|
.header-subtitle {
|
|
font-size: 26rpx;
|
|
}
|
|
|
|
.info-card {
|
|
margin: 0 24rpx 24rpx;
|
|
}
|
|
|
|
.nickname-container {
|
|
min-width: 250rpx;
|
|
}
|
|
|
|
.avatar-container {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
}
|
|
|
|
.avatar-button,
|
|
.avatar-display {
|
|
width: 120rpx !important;
|
|
height: 120rpx !important;
|
|
}
|
|
|
|
.person-info__wrapper {
|
|
padding: 0 24rpx 50rpx;
|
|
}
|
|
}
|