You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 

872 lines
31 KiB

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=375, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="../colors_and_type.css">
<title>青核 Youthome - 心动匹配</title>
<style>
:root {
--youth-primary: #26C2BB;
--youth-primary-light: #54CAC5;
--bg-page: #F7F8FA;
--bg-card: #FFFFFF;
--text-title: #1F1F1F;
--text-body: #595959;
--text-muted: #8C8C8C;
--youth-border-light: #E8E8E8;
--like: #FF6B9D;
--nope: #A0AEC0;
--super: #FFD700;
/* =====================================================
* Traework 设计系统 - 组件规范
* 圆角 / 间距 / 阴影 / 高度
* ===================================================== */
--radius-xs: 4px;
--radius-sm: 8px; /* 按钮、输入框 */
--radius-md: 12px; /* 卡片 */
--radius-lg: 16px; /* 标签、弹窗 */
--radius-xl: 20px;
--radius-full: 9999px;
/* 组件高度 */
--height-btn: 44px;
--height-input: 44px;
--height-nav-bottom: 64px;
/* 间距(4px 基础栅格) */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-page-x: 16px;
--space-card: 16px;
/* 柔和弥散阴影 */
--shadow-card: 0 2px 12px rgba(0, 0, 0, 0.04);
--shadow-card-hover: 0 6px 20px rgba(0, 0, 0, 0.06);
--shadow-btn: 0 2px 8px rgba(38, 194, 187, 0.25);
--shadow-btn-hover: 0 4px 16px rgba(38, 194, 187, 0.35);
--shadow-modal: 0 16px 48px rgba(0, 0, 0, 0.12);
--shadow-float: 0 4px 24px rgba(0, 0, 0, 0.08);
/* 内阴影浮雕(输入框) */
--shadow-inset: inset 0 1px 3px rgba(0, 0, 0, 0.04);
--shadow-inset-focus: inset 0 1px 3px rgba(38, 194, 187, 0.08);
/* 毛玻璃 */
--glass-bg: rgba(255, 255, 255, 0.72);
--glass-blur: blur(20px);
--glass-border: rgba(255, 255, 255, 0.3);
}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body {
font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'SF Pro Display', sans-serif;
background: var(--youth-bg-page);
color: var(--youth-text-secondary);
overflow-x: hidden;}
.page-container {
width: 375px;
height: 812px;
margin: 0 auto;
background: var(--youth-bg-page);
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
}
.status-bar {
height: 44px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 16px;
font-size: 15px;
font-weight: 600;
color: var(--youth-text-primary);
flex-shrink: 0;
}
.top-nav {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 8px;
height: 44px;
flex-shrink: 0;
}
.nav-btn {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
color: var(--youth-text-primary);
cursor: pointer;
border: none;
background: transparent;
}
.nav-title {
font-size: 18px;
font-weight: 800;
background: linear-gradient(135deg, #FF6B9D, #FF8E53);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.nav-title .heart-icon {
background: none;
-webkit-text-fill-color: initial;
}
/* 卡片区域 */
.card-area {
flex: 1;
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 10px 16px 0;
}
.card-stack {
position: relative;
width: 100%;
height: 520px;
}
.profile-card {
position: absolute;
width: 100%;
height: 100%;
border-radius: 12px;
overflow: hidden;
cursor: grab;
transition: transform 0.3s ease, opacity 0.3s ease;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
user-select: none;
}
.profile-card:active { cursor: grabbing; }
.profile-card.back-2 {
transform: scale(0.92) translateY(12px);
opacity: 0.6;
z-index: 1;
}
.profile-card.back-1 {
transform: scale(0.96) translateY(6px);
opacity: 0.85;
z-index: 2;
}
.profile-card.front {
z-index: 3;
}
/* 卡片背景(模拟照片) */
.card-photo {
width: 100%;
height: 100%;
position: relative;
}
.card-photo.p1 { background: linear-gradient(180deg, #FFB6C1 0%, #FF6B9D 40%, #FF8E53 100%); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}
.card-photo.p2 { background: linear-gradient(180deg, #87CEEB 0%, #4169E1 40%, #2E4A7D 100%); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}
.card-photo.p3 { background: linear-gradient(180deg, #DDA0DD 0%, #9370DB 40%, #6A5ACD 100%); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}
.card-emoji {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -60%);
font-size: 140px;
opacity: 0.9;
}
/* LIKE/NOPE 标记 */
.stamp {
position: absolute;
top: 40px;
padding: 8px 20px;
border: 4px solid;
border-radius: 10px;
font-size: 32px;
font-weight: 900;
text-transform: uppercase;
opacity: 0;
transition: opacity 0.2s ease;
z-index: 10;
letter-spacing: 2px;
}
.stamp.like {
left: 24px;
color: var(--like);
border-color: var(--like);
transform: rotate(-20deg);
}
.stamp.nope {
right: 24px;
color: var(--nope);
border-color: var(--nope);
transform: rotate(20deg);
}
.stamp.super-like {
top: 100px;
left: 50%;
transform: translateX(-50%) rotate(-10deg);
color: var(--super);
border-color: var(--super);
}
/* 卡片底部信息 */
.card-info {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 60px 16px 16px;
background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
color: #fff;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}
.card-name-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 4px;
}
.card-name {
font-size: 26px;
font-weight: 800;
line-height: 1;
}
.card-age {
font-size: 20px;
font-weight: 500;
opacity: 0.9;
}
.card-verified {
padding: 2px 6px;
background: var(--youth-primary);
color: #fff;
font-size: 10px;
font-weight: 600;
border-radius: 12px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}
.card-school {
font-size: 13px;
opacity: 0.9;
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 6px;
}
.card-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 10px;
}
.card-tag {
padding: 4px 10px;
background: rgba(255,255,255,0.25);
backdrop-filter: blur(10px);
border-radius: 12px;
font-size: 11px;
font-weight: 500;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}
.card-bio {
font-size: 12px;
opacity: 0.85;
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* 卡片右上角信息按钮 */
.info-btn {
position: absolute;
top: 12px;
right: 12px;
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(0,0,0,0.4);
backdrop-filter: blur(10px);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
cursor: pointer;
z-index: 5;
}
/* 距离标记 */
.distance-tag {
position: absolute;
top: 12px;
left: 12px;
padding: 4px 10px;
background: rgba(0,0,0,0.4);
backdrop-filter: blur(10px);
border-radius: 12px;
font-size: 11px;
color: #fff;
font-weight: 500;
display: flex;
align-items: center;
gap: 4px;
z-index: 5;
}
/* 底部操作按钮 */
.action-bar {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
padding: 16px 20px 24px;
flex-shrink: 0;
}
.action-btn {
width: 52px;
height: 52px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
background: var(--youth-bg-card);
box-shadow: 0 4px 14px rgba(0,0,0,0.08);
transition: all 0.2s ease;
border: none;
}
.action-btn:active { transform: scale(0.9); }
.action-btn.rewind {
color: #FFC107;
}
.action-btn.nope {
width: 60px;
height: 60px;
color: #FF6B6B;
border: 2px solid #FFE0E0;
}
.action-btn.super-like {
color: #1E90FF;
}
.action-btn.like {
width: 60px;
height: 60px;
color: #FF6B9D;
border: 2px solid #FFE0EC;
}
.action-btn.boost {
color: #9B59B6;
}
/* 今日匹配统计 */
.match-stats {
display: flex;
justify-content: space-around;
padding: 14px 20px;
margin: 0 16px;
background: var(--youth-bg-card);
border-radius: 14px;
flex-shrink: 0;
}
.stat-item {
text-align: center;
cursor: pointer;
}
.stat-item .num {
font-size: 18px;
font-weight: 800;
color: var(--youth-text-primary);
}
.stat-item .label {
font-size: 11px;
color: var(--youth-text-tertiary);
margin-top: 2px;
}
.stat-item.new .num {
color: var(--like);
position: relative;
}
.stat-item.new .num::after {
content: '';
position: absolute;
top: -4px;
right: -8px;
width: 8px;
height: 8px;
background: var(--like);
border-radius: 50%;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.3); opacity: 0.7; }
}
/* 底部Tab */
.bottom-tab {
display: flex;
padding: 6px 0 calc(6px + env(safe-area-inset-bottom));
background: var(--youth-bg-card);
border-top: 1px solid var(--youth-border-light);
flex-shrink: 0;
}
.tab-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
padding: 4px 0;
cursor: pointer;
}
.tab-item .icon {
font-size: 20px;
opacity: 0.5;
}
.tab-item .label {
font-size: 10px;
color: var(--youth-text-tertiary);
}
.tab-item.active .icon { opacity: 1; }
.tab-item.active .label { color: var(--like); font-weight: 600; }
/* SVG 图标统一尺寸 */
.icon-svg {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1em;
height: 1em;
vertical-align: middle;
line-height: 1;
}
.icon-svg svg {
width: 100%;
height: 100%;
stroke: currentColor;
}
/* 侧栏图标 */
.sidebar-icon .icon-svg { width: 22px; height: 22px; font-size: 22px; }
/* 社团logo图标 */
.club-logo .icon-svg { width: 28px; height: 28px; font-size: 28px; color: #fff; }
/* 头图大图标 */
.hero-icon .icon-svg { width: 56px; height: 56px; font-size: 56px; opacity: 0.3; }
/* meta 小图标 */
.club-meta .icon-svg { width: 12px; height: 12px; font-size: 12px; }
/* 分类选择网格图标 */
.cat-option .icon-svg { width: 26px; height: 26px; font-size: 26px; }
/* logo预览图标 */
.logo-preview .icon-svg { width: 40px; height: 40px; font-size: 40px; color: #fff; }
/* 提示图标 */
.notice-icon .icon-svg { width: 18px; height: 18px; font-size: 18px; }
</style>
</head>
<body>
<div class="page-container" data-dom-id="page-container">
<div class="status-bar">
<span>9:41</span>
<div style="display:flex;align-items:center;gap:6px;">
<svg width="17" height="11" viewBox="0 0 17 11" fill="currentColor"><rect x="0" y="7" width="3" height="4" rx="0.5"></rect><rect x="4.5" y="5" width="3" height="6" rx="0.5"></rect><rect x="9" y="2.5" width="3" height="8.5" rx="0.5"></rect><rect x="13.5" y="0" width="3" height="11" rx="0.5"></rect></svg>
<svg width="25" height="12" viewBox="0 0 25 12"><rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="currentColor" opacity="0.5"></rect><rect x="2" y="2" width="18" height="8" rx="1.5" fill="currentColor"></rect><rect x="22.5" y="4" width="1.5" height="4" rx="0.5" fill="currentColor" opacity="0.5"></rect></svg>
</div>
</div>
<div class="top-nav">
<button class="nav-btn" onclick="goProfile()">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
</button>
<div class="nav-title">
<span class="heart-icon">💖</span> 心动匹配
</div>
<button class="nav-btn" onclick="goFilter()">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
</button>
</div>
<!-- 匹配统计 -->
<div class="match-stats">
<div class="stat-item new" onclick="goNewMatches()">
<div class="num">12</div>
<div class="label">新配对</div>
</div>
<div class="stat-item" onclick="goLikes()">
<div class="num">48</div>
<div class="label">喜欢我的</div>
</div>
<div class="stat-item" onclick="goHistory()">
<div class="num">156</div>
<div class="label">累计匹配</div>
</div>
<div class="stat-item" onclick="goSuperLike()">
<div class="num">3</div>
<div class="label">超级喜欢</div>
</div>
</div>
<!-- 卡片区域 -->
<div class="card-area">
<div class="card-stack" id="cardStack">
<!-- 第三张 -->
<div class="profile-card back-2">
<div class="card-photo p3">
<div class="card-emoji"><span class="icon-svg icon-user"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg></span>‍<span class="icon-svg icon-palette"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="13.5" cy="6.5" r=".5"></circle><circle cx="17.5" cy="10.5" r=".5"></circle><circle cx="8.5" cy="7.5" r=".5"></circle><circle cx="6.5" cy="12.5" r=".5"></circle><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z"></path></svg></span></div>
</div>
</div>
<!-- 第二张 -->
<div class="profile-card back-1">
<div class="card-photo p2">
<div class="card-emoji"><span class="icon-svg icon-user"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg></span></div>
</div>
</div>
<!-- 第一张(最前) -->
<div class="profile-card front" id="topCard">
<div class="stamp like" id="likeStamp">LIKE</div>
<div class="stamp nope" id="nopeStamp">NOPE</div>
<div class="card-photo p1">
<div class="distance-tag">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>
0.8km
</div>
<button class="info-btn" onclick="showDetail()">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>
</button>
<div class="card-info">
<div class="card-name-row">
<span class="card-name">小夏同学</span>
<span class="card-age">21</span>
<span class="card-verified">真人认证</span>
</div>
<div class="card-school">
🏫 北京大学 · 设计学院 · 大二
</div>
<div class="card-tags">
<span class="card-tag"><span class="icon-svg icon-palette"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="13.5" cy="6.5" r=".5"></circle><circle cx="17.5" cy="10.5" r=".5"></circle><circle cx="8.5" cy="7.5" r=".5"></circle><circle cx="6.5" cy="12.5" r=".5"></circle><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z"></path></svg></span> 设计</span>
<span class="card-tag"><span class="icon-svg icon-camera"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z"></path><circle cx="12" cy="13" r="3"></circle></svg></span> 摄影</span>
<span class="card-tag">☕ 咖啡</span>
<span class="card-tag">🐱 猫奴</span>
</div>
<div class="card-bio">
喜欢拍照和旅行的设计系女生,周末常去探店喝咖啡,想找一个能一起逛展看电影的小伙伴~
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 操作按钮 -->
<div class="action-bar">
<button class="action-btn rewind" onclick="rewindCard()" title="撤回">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="1 4 1 10 7 10"></polyline><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"></path></svg>
</button>
<button class="action-btn nope" onclick="swipeNope()" title="不喜欢">
<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
</button>
<button class="action-btn super-like" onclick="superLike()" title="超级喜欢">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
</button>
<button class="action-btn like" onclick="swipeLike()" title="喜欢">
<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
</button>
<button class="action-btn boost" onclick="boostProfile()" title="提升曝光">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg>
</button>
</div>
<!-- 底部Tab -->
<div class="bottom-tab">
<div class="tab-item" onclick="switchTab('home')">
<div class="icon"><span class="icon-svg icon-home"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg></span></div>
<span class="label">首页</span>
</div>
<div class="tab-item active" onclick="switchTab('match')">
<div class="icon">💖</div>
<span class="label">心动</span>
</div>
<div class="tab-item" onclick="switchTab('dynamic')">
<div class="icon"><span class="icon-svg icon-smartphone"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="20" x="5" y="2" rx="2" ry="2"></rect><path d="M12 18h.01"></path></svg></span></div>
<span class="label">动态</span>
</div>
<div class="tab-item" onclick="switchTab('msg')">
<div class="icon">💌</div>
<span class="label">消息</span>
</div>
<div class="tab-item" onclick="switchTab('mine')">
<div class="icon"><span class="icon-svg icon-user"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg></span></div>
<span class="label">我的</span>
</div>
</div>
</div>
<script> icon.innerHTML = '<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>';
}
}
// 滑动逻辑
let isDragging = false;
let startX = 0;
let startY = 0;
let currentX = 0;
let currentY = 0;
let rotation = 0;
let cardIndex = 0;
const photos = ['p1', 'p2', 'p3'];
const emojis = ['<span class="icon-svg icon-user"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg></span>‍<span class="icon-svg icon-graduation-cap"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 10v6M2 10l10-5 10 5-10 5z"/><path d="M6 12v5c3 3 9 3 12 0v-5"/></svg></span>', '<span class="icon-svg icon-user"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg></span>', '<span class="icon-svg icon-user"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg></span>‍<span class="icon-svg icon-palette"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="13.5" cy="6.5" r=".5"/><circle cx="17.5" cy="10.5" r=".5"/><circle cx="8.5" cy="7.5" r=".5"/><circle cx="6.5" cy="12.5" r=".5"/><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z"/></svg></span>'];
const names = ['小夏同学', '程序员小鹿', '艺术阿泽'];
const ages = ['21', '22', '23'];
const topCard = document.getElementById('topCard');
const likeStamp = document.getElementById('likeStamp');
const nopeStamp = document.getElementById('nopeStamp');
const superStamp = document.getElementById('superStamp');
topCard.addEventListener('touchstart', startDrag);
topCard.addEventListener('touchmove', drag);
topCard.addEventListener('touchend', endDrag);
topCard.addEventListener('mousedown', startDrag);
document.addEventListener('mousemove', drag);
document.addEventListener('mouseup', endDrag);
function startDrag(e) {
isDragging = true;
startX = e.type.includes('mouse') ? e.clientX : e.touches[0].clientX;
startY = e.type.includes('mouse') ? e.clientY : e.touches[0].clientY;
topCard.style.transition = 'none';
}
function drag(e) {
if (!isDragging) return;
e.preventDefault();
const clientX = e.type.includes('mouse') ? e.clientX : e.touches[0].clientX;
const clientY = e.type.includes('mouse') ? e.clientY : e.touches[0].clientY;
currentX = clientX - startX;
currentY = clientY - startY;
rotation = currentX * 0.1;
topCard.style.transform = `translate(${currentX}px, ${currentY}px) rotate(${rotation}deg)`;
// 显示标记
const threshold = 60;
if (currentX > threshold) {
likeStamp.style.opacity = Math.min((currentX - threshold) / 100 + 0.5, 1);
nopeStamp.style.opacity = 0;
superStamp.style.opacity = 0;
} else if (currentX < -threshold) {
nopeStamp.style.opacity = Math.min((-currentX - threshold) / 100 + 0.5, 1);
likeStamp.style.opacity = 0;
superStamp.style.opacity = 0;
} else if (currentY < -threshold) {
superStamp.style.opacity = Math.min((-currentY - threshold) / 100 + 0.5, 1);
likeStamp.style.opacity = 0;
nopeStamp.style.opacity = 0;
} else {
likeStamp.style.opacity = 0;
nopeStamp.style.opacity = 0;
superStamp.style.opacity = 0;
}
}
function endDrag() {
if (!isDragging) return;
isDragging = false;
topCard.style.transition = 'transform 0.3s ease';
const threshold = 100;
if (currentX > threshold) {
flyOut('right');
} else if (currentX < -threshold) {
flyOut('left');
} else if (currentY < -threshold) {
flyOut('top');
} else {
resetCard();
}
}
function flyOut(direction) {
const offsetX = direction === 'right' ? 500 : direction === 'left' ? -500 : 0;
const offsetY = direction === 'top' ? -800 : currentY * 2;
const endRotation = direction === 'right' ? 30 : direction === 'left' ? -30 : 0;
topCard.style.transform = `translate(${offsetX}px, ${offsetY}px) rotate(${endRotation}deg)`;
topCard.style.opacity = '0';
if (direction === 'right') {
setTimeout(() => showMatch(), 300);
}
setTimeout(() => {
nextCard();
}, 300);
}
function resetCard() {
topCard.style.transform = 'translate(0, 0) rotate(0)';
likeStamp.style.opacity = 0;
nopeStamp.style.opacity = 0;
superStamp.style.opacity = 0;
currentX = 0;
currentY = 0;
}
function nextCard() {
cardIndex++;
// 重置并把卡片放回最底层
setTimeout(() => {
topCard.style.transition = 'none';
topCard.style.transform = 'translate(0, 0) rotate(0)';
topCard.style.opacity = '1';
// 换照片
const photo = topCard.querySelector('.card-photo');
const emoji = topCard.querySelector('.card-emoji');
const name = topCard.querySelector('.card-name');
const age = topCard.querySelector('.card-age');
const idx = cardIndex % 3;
photo.className = 'card-photo ' + photos[idx];
emoji.textContent = emojis[idx];
name.textContent = names[idx];
age.textContent = ages[idx];
likeStamp.style.opacity = 0;
nopeStamp.style.opacity = 0;
superStamp.style.opacity = 0;
currentX = 0;
currentY = 0;
}, 100);
}
function swipeLike() {
isDragging = false;
topCard.style.transition = 'transform 0.4s ease, opacity 0.4s ease';
likeStamp.style.opacity = 1;
setTimeout(() => {
topCard.style.transform = 'translate(500px, 80px) rotate(30deg)';
topCard.style.opacity = '0';
setTimeout(() => showMatch(), 200);
setTimeout(() => nextCard(), 400);
}, 100);
}
function swipeNope() {
isDragging = false;
topCard.style.transition = 'transform 0.4s ease, opacity 0.4s ease';
nopeStamp.style.opacity = 1;
setTimeout(() => {
topCard.style.transform = 'translate(-500px, 80px) rotate(-30deg)';
topCard.style.opacity = '0';
setTimeout(() => nextCard(), 400);
}, 100);
}
function superLike() {
isDragging = false;
topCard.style.transition = 'transform 0.4s ease, opacity 0.4s ease';
superStamp.style.opacity = 1;
setTimeout(() => {
topCard.style.transform = 'translate(0, -800px) rotate(0)';
topCard.style.opacity = '0';
setTimeout(() => showMatch(), 200);
setTimeout(() => nextCard(), 400);
}, 100);
}
function rewindCard() {
alert('撤回上一张(需会员)');
}
function boostProfile() {
alert('提升曝光功能');
}
function showMatch() {
// 模拟匹配成功概率
if (Math.random() > 0.5) {
console.log('Match!');
}
}
function goProfile() { alert('个人主页'); }
function goFilter() { alert('筛选条件'); }
function showDetail() { alert('查看详细资料'); }
function goNewMatches() { alert('新配对列表'); }
function goLikes() { alert('喜欢我的人'); }
function goHistory() { alert('匹配历史'); }
function goSuperLike() { alert('超级喜欢记录'); }
function switchTab(tab) { /* tab switch */ }</script>
</body>
</html>