4 changed files with 197 additions and 48 deletions
@ -1 +1,151 @@ |
|||||
/* pages/profile/index.wxss */ |
/* pages/profile/index.wxss */ |
||||
|
|
||||
|
/* 全局样式重置 */ |
||||
|
page { |
||||
|
background-color: #f5f5f5; |
||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; |
||||
|
} |
||||
|
|
||||
|
/* 容器样式 */ |
||||
|
.container { |
||||
|
padding: 20rpx; |
||||
|
width: 100%; |
||||
|
max-width: 100vw; |
||||
|
overflow-x: hidden; |
||||
|
box-sizing: border-box; |
||||
|
background-color: #f5f5f5; |
||||
|
} |
||||
|
|
||||
|
/* 卡片样式 */ |
||||
|
.card { |
||||
|
background-color: white; |
||||
|
border-radius: 20rpx; |
||||
|
padding: 30rpx; |
||||
|
margin-bottom: 20rpx; |
||||
|
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08); |
||||
|
transition: all 0.3s ease; |
||||
|
} |
||||
|
|
||||
|
.card:hover { |
||||
|
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.12); |
||||
|
transform: translateY(-2rpx); |
||||
|
} |
||||
|
|
||||
|
/* 标题样式 */ |
||||
|
.title { |
||||
|
font-size: 32rpx; |
||||
|
font-weight: bold; |
||||
|
color: #333; |
||||
|
margin-bottom: 20rpx; |
||||
|
position: relative; |
||||
|
padding-bottom: 10rpx; |
||||
|
} |
||||
|
|
||||
|
.title::after { |
||||
|
content: ''; |
||||
|
position: absolute; |
||||
|
bottom: 0; |
||||
|
left: 0; |
||||
|
width: 80rpx; |
||||
|
height: 4rpx; |
||||
|
background: linear-gradient(90deg, #1677ff, #1890ff); |
||||
|
border-radius: 2rpx; |
||||
|
} |
||||
|
|
||||
|
/* 按钮样式 */ |
||||
|
.btn { |
||||
|
width: 100%; |
||||
|
padding: 20rpx; |
||||
|
border-radius: 10rpx; |
||||
|
font-size: 28rpx; |
||||
|
font-weight: bold; |
||||
|
transition: all 0.3s ease; |
||||
|
margin-bottom: 20rpx; |
||||
|
border: none; |
||||
|
outline: none; |
||||
|
} |
||||
|
|
||||
|
.btn:hover { |
||||
|
opacity: 0.9; |
||||
|
transform: scale(1.02); |
||||
|
} |
||||
|
|
||||
|
.btn:active { |
||||
|
transform: scale(0.98); |
||||
|
} |
||||
|
|
||||
|
/* 标签样式 */ |
||||
|
.tag { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
padding: 12rpx 24rpx; |
||||
|
border-radius: 24rpx; |
||||
|
margin: 10rpx; |
||||
|
font-size: 26rpx; |
||||
|
font-weight: bold; |
||||
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1); |
||||
|
cursor: pointer; |
||||
|
transition: all 0.3s ease; |
||||
|
} |
||||
|
|
||||
|
.tag:hover { |
||||
|
transform: translateY(-2rpx); |
||||
|
box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.15); |
||||
|
} |
||||
|
|
||||
|
.tag:active { |
||||
|
transform: scale(0.98); |
||||
|
} |
||||
|
|
||||
|
/* 链接项样式 */ |
||||
|
.link-item { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
padding: 30rpx 0; |
||||
|
cursor: pointer; |
||||
|
transition: all 0.3s ease; |
||||
|
} |
||||
|
|
||||
|
.link-item:hover { |
||||
|
background-color: rgba(22, 119, 255, 0.05); |
||||
|
border-radius: 10rpx; |
||||
|
} |
||||
|
|
||||
|
/* 退出登录按钮样式 */ |
||||
|
.logout-btn { |
||||
|
background-color: #ff4d4f; |
||||
|
color: white; |
||||
|
padding: 12rpx 4rpx; |
||||
|
border-radius: 20rpx; |
||||
|
font-size: 20rpx; |
||||
|
width: 176rpx; |
||||
|
display: block; |
||||
|
box-sizing: border-box; |
||||
|
transition: all 0.3s ease; |
||||
|
border: none; |
||||
|
outline: none; |
||||
|
} |
||||
|
|
||||
|
.logout-btn:hover { |
||||
|
background-color: #ff7875; |
||||
|
transform: scale(1.05); |
||||
|
} |
||||
|
|
||||
|
.logout-btn:active { |
||||
|
transform: scale(0.95); |
||||
|
} |
||||
|
|
||||
|
/* 授权登录按钮样式 */ |
||||
|
.auth-btn { |
||||
|
margin: 20rpx 0; |
||||
|
transition: all 0.3s ease; |
||||
|
} |
||||
|
|
||||
|
.auth-btn:hover { |
||||
|
transform: scale(1.02); |
||||
|
} |
||||
|
|
||||
|
.auth-btn:active { |
||||
|
transform: scale(0.98); |
||||
|
} |
||||
Loading…
Reference in new issue