1
This commit is contained in:
张成
359
src/user_pages/myself/index.scss
Normal file
359
src/user_pages/myself/index.scss
Normal file
@@ -0,0 +1,359 @@
|
||||
@use '../../scss/common.scss' as *;
|
||||
|
||||
// 个人页面样式
|
||||
.myself_page {
|
||||
min-height: 100vh;
|
||||
background: radial-gradient(circle at 50% 0%, rgba(238, 255, 220, 1) 0%, rgba(255, 255, 255, 1) 37%);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
// 主要内容区域
|
||||
.main_content {
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
flex: 1;
|
||||
margin-top: 0;
|
||||
box-sizing: border-box;
|
||||
overflow-y: auto;
|
||||
padding: 0px 15px 15px 15px ;
|
||||
|
||||
// 用户信息区域
|
||||
.user_info_section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
margin-top: 98px;
|
||||
|
||||
// 加载状态
|
||||
.loading_container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 40px 0;
|
||||
|
||||
.loading_text {
|
||||
@include text-style(16px, 400, 1.4em);
|
||||
color: $color-primary-lightest;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 统计数据
|
||||
.stats_section {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
|
||||
.stats_container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
|
||||
.stat_item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.stat_number {
|
||||
@include text-medium;
|
||||
}
|
||||
|
||||
.stat_label {
|
||||
@include text-small;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 标签和简介
|
||||
.tags_bio_section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
|
||||
.tags_container {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.tag_item {
|
||||
@include tag-base;
|
||||
|
||||
.tag_icon {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
.tag_text {
|
||||
@include text-tag;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bio_text {
|
||||
@include text-body;
|
||||
white-space: pre-line;
|
||||
}
|
||||
}
|
||||
|
||||
// 球局订单和收藏功能
|
||||
.quick_actions_section {
|
||||
margin-bottom: 16px;
|
||||
|
||||
.action_card {
|
||||
@include card-base;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
|
||||
.action_content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
padding: 20px 0;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
.action_icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.action_text {
|
||||
@include text-style(15px, 600, 1.4em);
|
||||
color: $color-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.action_divider {
|
||||
width: 1px;
|
||||
height: 16px;
|
||||
background: $color-primary-lightest-5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 球局类型标签页
|
||||
.game_tabs_section {
|
||||
|
||||
.tab_container {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
padding: 12px 15px;
|
||||
|
||||
.tab_item {
|
||||
padding: 12px 0;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
.tab_text {
|
||||
@include text-primary;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
&.active {
|
||||
.tab_text {
|
||||
color: $color-primary;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.active) {
|
||||
.tab_text {
|
||||
color: $color-primary-lightest-2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 球局列表区域
|
||||
.game_list_section {
|
||||
.date_header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 10px 15px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
.date_text {
|
||||
@include text-style(14px, 600, 1.4em, 2.71%);
|
||||
color: $color-primary-light;
|
||||
}
|
||||
|
||||
.separator {
|
||||
@include text-style(18px, 400, 1.4em, 2.11%);
|
||||
color: $color-primary-lightest;
|
||||
}
|
||||
|
||||
.weekday_text {
|
||||
@include text-style(14px, 600, 1.4em, 2.71%);
|
||||
color: $color-primary-light;
|
||||
}
|
||||
}
|
||||
|
||||
// 球局卡片
|
||||
.game_cards {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
padding: 0 5px 15px;
|
||||
|
||||
.game_card {
|
||||
@include card-base;
|
||||
padding: 0 0 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
// 球局标题和类型
|
||||
.game_header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px 15px 0;
|
||||
|
||||
.game_title {
|
||||
@include text-style(16px, 600, 1.5em);
|
||||
color: $color-primary;
|
||||
}
|
||||
|
||||
.game_type_icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
|
||||
.type_icon {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 球局时间
|
||||
.game_time {
|
||||
padding: 6px 15px 0;
|
||||
|
||||
.time_text {
|
||||
@include text-caption;
|
||||
}
|
||||
}
|
||||
|
||||
// 球局地点和类型
|
||||
.game_location {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
padding: 4px 15px 0;
|
||||
|
||||
.location_text,
|
||||
.type_text,
|
||||
.distance_text {
|
||||
@include text-caption;
|
||||
}
|
||||
|
||||
.separator {
|
||||
@include text-style(14px, 400, 1.3em);
|
||||
color: $color-text-tertiary;
|
||||
}
|
||||
}
|
||||
|
||||
// 球局图片
|
||||
.game_images {
|
||||
position: absolute;
|
||||
top: 11px;
|
||||
right: 5px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.2);
|
||||
|
||||
.game_image {
|
||||
position: absolute;
|
||||
width: 56.44px;
|
||||
height: 56.44px;
|
||||
border-radius: 9px;
|
||||
border: 1.5px solid $color-white;
|
||||
|
||||
&:nth-child(1) {
|
||||
top: 4.18px;
|
||||
left: 19.18px;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
top: 26.5px;
|
||||
left: 38px;
|
||||
width: 61.86px;
|
||||
height: 61.86px;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
top: 32.5px;
|
||||
left: 0;
|
||||
width: 62.04px;
|
||||
height: 62.04px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 球局信息标签
|
||||
.game_tags {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 6px;
|
||||
padding: 8px 15px 0;
|
||||
|
||||
.participants_info {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
|
||||
.avatars {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: -8px;
|
||||
|
||||
.participant_avatar {
|
||||
@include avatar-base(20px);
|
||||
border: 1px solid $color-white;
|
||||
}
|
||||
}
|
||||
|
||||
.participants_count {
|
||||
@include tag-base;
|
||||
padding: 6px;
|
||||
|
||||
.count_text {
|
||||
@include text-tag;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.game_info_tags {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
|
||||
.info_tag {
|
||||
@include tag-base;
|
||||
|
||||
.tag_text {
|
||||
@include text-tag;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user