Initial commit
This commit is contained in:
sjk
376
miniprogram/pages/user/person-info/index.wxss
Normal file
376
miniprogram/pages/user/person-info/index.wxss
Normal file
@@ -0,0 +1,376 @@
|
||||
: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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user