This commit is contained in:
Professional 2025-05-24 00:01:35 +07:00
parent 7a73418ab0
commit f653ecf96c

View File

@ -190,8 +190,8 @@
<div
v-for="option in filteredGenders"
:key="option.value"
class="dropdown-option"
@click="selectGender(option)"
class="dropdown-option"
>
{{ option.text }}
</div>
@ -1125,11 +1125,11 @@ onUnmounted(() => {
.app-profile-view {
display: flex;
flex-direction: column;
height: 100vh;
min-height: 100vh;
width: 100%;
position: relative;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
overflow: hidden;
/* Убираем overflow: hidden чтобы контент не обрезался */
}
/* Container */
@ -1141,7 +1141,7 @@ onUnmounted(() => {
box-sizing: border-box;
}
/* Header Section */
/* Header Section - ИСПРАВЛЕНО */
.profile-header {
background: rgba(33, 33, 60, 0.9);
backdrop-filter: blur(10px);
@ -1149,11 +1149,14 @@ onUnmounted(() => {
color: white;
position: sticky;
top: 0;
z-index: 10;
height: var(--header-height, 56px);
z-index: 100;
/* Фиксируем минимальную высоту заголовка */
min-height: 80px;
display: flex;
align-items: center;
justify-content: center;
/* Убираем фиксированную высоту которая обрезала контент */
flex-shrink: 0;
}
.header-content {
@ -1162,11 +1165,14 @@ onUnmounted(() => {
align-items: center;
width: 100%;
position: relative;
min-height: 48px;
}
.profile-title {
flex: 1;
text-align: center;
/* Добавляем отступы чтобы заголовок не перекрывался кнопкой */
padding: 0 60px;
}
.section-title {
@ -1175,10 +1181,13 @@ onUnmounted(() => {
font-weight: 600;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
color: white;
/* Обеспечиваем видимость заголовка */
position: relative;
z-index: 1;
}
.subtitle {
margin: 0;
margin: 0.25rem 0 0;
font-size: 0.85rem;
opacity: 0.9;
color: rgba(255, 255, 255, 0.8);
@ -1189,24 +1198,30 @@ onUnmounted(() => {
right: 0;
top: 50%;
transform: translateY(-50%);
/* Уменьшаем z-index чтобы не перекрывать заголовок */
z-index: 2;
}
/* Main Content */
/* Main Content - ИСПРАВЛЕНО */
.profile-content {
flex: 1;
overflow-y: auto;
padding: 1rem 0;
padding-bottom: calc(1rem + var(--nav-height, 60px));
/* Добавляем правильные отступы с учетом заголовка и навигации */
padding: 1.5rem 0;
padding-bottom: calc(1.5rem + var(--nav-height, 60px));
-webkit-overflow-scrolling: touch;
/* Убираем отрицательные отступы которые могли вызывать наложение */
}
.profile-layout {
display: flex;
flex-direction: column;
gap: 1.5rem;
/* Добавляем минимальную высоту для предотвращения схлопывания */
min-height: max-content;
}
/* Profile Card */
/* Profile Card - ИСПРАВЛЕНО */
.profile-card {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
@ -1214,6 +1229,9 @@ onUnmounted(() => {
padding: 1.5rem;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
border: 1px solid rgba(255, 255, 255, 0.2);
/* Предотвращаем наложение */
position: relative;
z-index: 1;
}
.avatar-section {
@ -1221,6 +1239,7 @@ onUnmounted(() => {
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
flex-wrap: wrap;
}
.avatar-container {
@ -1297,18 +1316,16 @@ onUnmounted(() => {
font-weight: 600;
margin: 0 0 0.3rem;
color: #333;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
overflow-wrap: break-word;
}
.user-email {
font-size: 0.9rem;
color: #6c757d;
margin: 0 0 0.8rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
overflow-wrap: break-word;
}
.user-badges {
@ -1402,7 +1419,7 @@ onUnmounted(() => {
margin-top: 0.2rem;
}
/* Info Cards */
/* Info Cards - ИСПРАВЛЕНО */
.info-card {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
@ -1410,6 +1427,10 @@ onUnmounted(() => {
padding: 1.5rem;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
border: 1px solid rgba(255, 255, 255, 0.2);
/* Предотвращаем наложение */
position: relative;
z-index: 1;
margin-bottom: 1rem;
}
.card-header {
@ -1470,6 +1491,8 @@ onUnmounted(() => {
background: #f8f9fa;
border-radius: 8px;
border: 1px solid #e9ecef;
word-wrap: break-word;
overflow-wrap: break-word;
}
.bio-text {
@ -1484,6 +1507,8 @@ onUnmounted(() => {
font-size: 1rem;
transition: all 0.3s ease;
background: white;
width: 100%;
box-sizing: border-box;
}
.form-input:focus {
@ -1519,6 +1544,7 @@ onUnmounted(() => {
padding: 0.25rem;
border-radius: 4px;
transition: all 0.3s ease;
z-index: 5;
}
.clear-btn:hover {
@ -1571,6 +1597,7 @@ onUnmounted(() => {
transition: all 0.3s ease;
text-decoration: none;
white-space: nowrap;
box-sizing: border-box;
}
.action-btn.primary {
@ -1679,6 +1706,7 @@ onUnmounted(() => {
display: flex;
align-items: center;
gap: 0.2rem;
z-index: 2;
}
.photo-actions {
@ -1690,6 +1718,7 @@ onUnmounted(() => {
gap: 0.5rem;
opacity: 0;
transition: opacity 0.3s ease;
z-index: 3;
}
.photo-item:hover .photo-actions {
@ -1734,6 +1763,7 @@ onUnmounted(() => {
align-items: center;
flex: 1;
padding: 2rem 1rem;
min-height: 50vh;
}
.no-data-card,
@ -1820,7 +1850,7 @@ onUnmounted(() => {
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
z-index: 2000;
padding: 1rem;
}
@ -1951,6 +1981,10 @@ onUnmounted(() => {
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 0.75rem;
}
.profile-title {
padding: 0 80px;
}
}
/* Mobile Phones */
@ -1961,11 +1995,13 @@ onUnmounted(() => {
.profile-header {
padding: 0.75rem 0;
min-height: 70px;
}
.header-content {
flex-direction: column;
gap: 0.5rem;
align-items: center;
}
.header-actions {
@ -1973,6 +2009,11 @@ onUnmounted(() => {
transform: none;
}
.profile-title {
padding: 0;
width: 100%;
}
.section-title {
font-size: 1.2rem;
}
@ -1983,6 +2024,7 @@ onUnmounted(() => {
.profile-content {
padding: 0.75rem 0;
padding-bottom: calc(0.75rem + var(--nav-height, 60px));
}
.profile-layout {
@ -2231,7 +2273,7 @@ onUnmounted(() => {
@media (max-height: 450px) and (orientation: landscape) {
.profile-header {
padding: 0.5rem 0;
height: 46px;
min-height: 60px;
}
.section-title {
@ -2301,7 +2343,7 @@ onUnmounted(() => {
/* iOS Safe Area Support */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
.profile-content {
padding-bottom: calc(1rem + var(--nav-height, 60px) + env(safe-area-inset-bottom, 0px));
padding-bottom: calc(1.5rem + var(--nav-height, 60px) + env(safe-area-inset-bottom, 0px));
}
}