NetsPro/Reflex
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

фикс

Browse Source
This commit is contained in:
Professional 2025-05-23 21:15:33 +07:00
parent eafad3da8d
commit 0f193ad108
1 changed files with 25 additions and 171 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

196
src/views/HomeView.vue
View File

@ -168,56 +168,6 @@
</router-link>
</div>
</div>
<div class="suggestions-section">
<h2 class="section-title">Предлагаем познакомиться</h2>
<div class="user-suggestions">
<div class="suggestion-card">
<div class="suggestion-photo" style="background-image: url('https://randomuser.me/api/portraits/women/12.jpg')"></div>
<div class="suggestion-info">
<h3>Анна, 26</h3>
<p>На расстоянии 2 км</p>
<div class="suggestion-tags">
<span>Музыка</span>
<span>Путешествия</span>
</div>
</div>
<div class="suggestion-match-percent">87%</div>
</div>
<div class="suggestion-card">
<div class="suggestion-photo" style="background-image: url('https://randomuser.me/api/portraits/women/33.jpg')"></div>
<div class="suggestion-info">
<h3>Мария, 24</h3>
<p>На расстоянии 5 км</p>
<div class="suggestion-tags">
<span>Спорт</span>
<span>Книги</span>
</div>
</div>
<div class="suggestion-match-percent">78%</div>
</div>
<div class="suggestion-card">
<div class="suggestion-photo" style="background-image: url('https://randomuser.me/api/portraits/women/65.jpg')"></div>
<div class="suggestion-info">
<h3>Елена, 29</h3>
<p>На расстоянии 3 км</p>
<div class="suggestion-tags">
<span>Кино</span>
<span>Искусство</span>
</div>
</div>
<div class="suggestion-match-percent">71%</div>
</div>
</div>
<router-link to="/swipe" class="see-more-btn">
Смотреть больше
<i class="bi-arrow-right"></i>
</router-link>
</div>
</div>
<div class="wave-container-auth">
@ -901,113 +851,6 @@ onMounted(async () => {
z-index: 1;
}
.suggestions-section {
color: white;
}
.user-suggestions {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
margin-bottom: 2rem;
}
.suggestion-card {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
border-radius: 16px;
overflow: hidden;
position: relative;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
display: flex;
flex-direction: column;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.suggestion-card:hover {
transform: translateY(-5px) scale(1.02);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}
.suggestion-photo {
height: 180px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.suggestion-info {
padding: 1.5rem;
flex-grow: 1;
}
.suggestion-info h3 {
font-size: 1.2rem;
font-weight: 600;
margin: 0 0 0.5rem;
}
.suggestion-info p {
font-size: 0.85rem;
opacity: 0.8;
margin: 0 0 1rem;
}
.suggestion-tags {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.suggestion-tags span {
padding: 0.3rem 0.8rem;
background: rgba(255, 255, 255, 0.2);
border-radius: 50px;
font-size: 0.75rem;
white-space: nowrap;
}
.suggestion-match-percent {
position: absolute;
top: 10px;
right: 10px;
background: linear-gradient(45deg, #FF416C, #FF4B2B);
color: white;
border-radius: 50px;
padding: 0.3rem 0.8rem;
font-size: 0.85rem;
font-weight: 600;
box-shadow: 0 5px 15px rgba(255, 75, 43, 0.3);
}
.see-more-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.8rem 1.5rem;
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.3);
color: white;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
}
.see-more-btn:hover {
background: rgba(255, 255, 255, 0.3);
transform: translateX(5px);
}
.see-more-btn i {
transition: transform 0.3s ease;
}
.see-more-btn:hover i {
transform: translateX(5px);
}
.wave-container-auth {
position: absolute;
bottom: 0;
@ -1039,8 +882,7 @@ onMounted(async () => {
/* Медиа-запросы для авторизованного интерфейса */
@media (max-width: 1100px) {
.stats-cards,
.action-cards,
.user-suggestions {
.action-cards {
gap: 1rem;
}
@ -1061,8 +903,7 @@ onMounted(async () => {
@media (max-width: 992px) {
.stats-cards,
.action-cards,
.user-suggestions {
.action-cards {
grid-template-columns: repeat(2, 1fr);
}
@ -1081,12 +922,15 @@ onMounted(async () => {
.welcome-message {
font-size: 1.1rem;
}
.auth-container {
padding-bottom: 4rem;
}
}
@media (max-width: 768px) {
.stats-cards,
.action-cards,
.user-suggestions {
.action-cards {
grid-template-columns: 1fr;
gap: 1rem;
}
@ -1114,13 +958,12 @@ onMounted(async () => {
.welcome-banner,
.stat-card,
.action-card-content,
.suggestion-info {
.action-card-content {
padding: 1.5rem;
}
.auth-container {
padding: 0 1rem 5rem;
padding: 0 1rem 4rem;
}
.auth-header {
@ -1130,6 +973,10 @@ onMounted(async () => {
.auth-logo {
font-size: 1.7rem;
}
.action-section {
margin-bottom: 2rem;
}
}
@media (max-width: 480px) {
@ -1153,8 +1000,7 @@ onMounted(async () => {
.welcome-banner,
.stat-card,
.action-card-content,
.suggestion-info {
.action-card-content {
padding: 1.2rem;
}
@ -1174,14 +1020,22 @@ onMounted(async () => {
font-size: 1.5rem;
}
.suggestion-photo {
height: 150px;
.auth-container {
padding: 0 0.75rem 3rem;
}
.action-card h3 {
font-size: 1.2rem;
}
.action-card p {
font-size: 0.85rem;
}
}
/* Исправления Safari */
@supports (-webkit-touch-callout: none) {
.letter {
.letter, .logo-letter, .user-name, .stat-info h3 {
background-clip: text;
-webkit-text-fill-color: transparent;
}