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.
 
 

1335 lines
39 KiB

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>青核 Youthome - 校园雷达</title>
<link rel="stylesheet" href="../colors_and_type.css">
<style>
* {
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: #F7F8FA;
color: #1F1F1F;
min-height: 100vh;
overflow-x: hidden;
}
.app-container {
width: 375px;
height: 812px;
margin: 0 auto;
position: relative;
background: #F7F8FA;
overflow: hidden;
}
/* ===== iOS 状态栏 (44px) ===== */
.status-bar {
height: 44px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
font-size: 15px;
font-weight: 600;
color: #1F1F1F;
position: relative;
z-index: 10;
}
.status-bar .right-icons {
display: flex;
align-items: center;
gap: 5px;
}
/* ===== 顶部导航栏 (44px) ===== */
.top-nav {
height: 44px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 16px;
position: relative;
z-index: 10;
}
.nav-btn {
width: 36px;
height: 36px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
background: #FFFFFF;
border: 1px solid #F0F1F3;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
cursor: pointer;
transition: all 0.2s ease;
color: #1F1F1F;
}
.nav-btn:active {
transform: scale(0.95);
}
.nav-title {
font-size: 17px;
font-weight: 600;
color: #1F1F1F;
}
/* ===== 顶部统计卡片 ===== */
.stats-card {
margin: 8px 16px 12px;
background: #FFFFFF;
border-radius: 12px;
padding: 16px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
display: flex;
gap: 12px;
}
.stat-item {
flex: 1;
display: flex;
align-items: center;
gap: 12px;
}
.stat-item + .stat-item {
border-left: 1px solid #F0F1F3;
padding-left: 12px;
}
.stat-icon {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.stat-icon.primary {
background: linear-gradient(135deg, #54CAC5 0%, #26C2BB 50%, #1FA8A2 100%);
box-shadow: 0 2px 8px rgba(38, 194, 187, 0.3);
}
.stat-icon.orange {
background: linear-gradient(135deg, #FFB96B 0%, #FF9F45 50%, #E68A2E 100%);
box-shadow: 0 2px 8px rgba(255, 159, 69, 0.3);
}
.stat-icon svg {
width: 20px;
height: 20px;
color: #FFFFFF;
}
.stat-content {
display: flex;
flex-direction: column;
gap: 2px;
}
.stat-number {
font-size: 22px;
font-weight: 700;
color: #1F1F1F;
line-height: 1.1;
}
.stat-label {
font-size: 12px;
color: #8C8C8C;
}
/* ===== 雷达扫描可视化区 ===== */
.radar-container {
display: flex;
justify-content: center;
align-items: center;
padding: 4px 0 12px;
position: relative;
}
.radar {
width: 240px;
height: 240px;
border-radius: 50%;
position: relative;
background: radial-gradient(circle at center, #1a2a2a 0%, #0d1a1a 50%, #081212 100%);
box-shadow:
0 0 60px rgba(38, 194, 187, 0.12),
inset 0 0 60px rgba(0, 0, 0, 0.5),
0 8px 32px rgba(0, 0, 0, 0.25);
border: 2px solid rgba(38, 194, 187, 0.25);
overflow: hidden;
}
/* 同心圆刻度线 */
.radar-ring {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
border: 1px solid rgba(38, 194, 187, 0.18);
pointer-events: none;
}
.radar-ring-1 {
width: 80px;
height: 80px;
}
.radar-ring-2 {
width: 144px;
height: 144px;
}
.radar-ring-3 {
width: 208px;
height: 208px;
}
/* 十字准星线 */
.radar-crosshair-h,
.radar-crosshair-v {
position: absolute;
background: rgba(38, 194, 187, 0.12);
pointer-events: none;
}
.radar-crosshair-h {
top: 50%;
left: 0;
right: 0;
height: 1px;
transform: translateY(-50%);
}
.radar-crosshair-v {
left: 50%;
top: 0;
bottom: 0;
width: 1px;
transform: translateX(-50%);
}
/* 距离刻度文字 */
.radar-distance-label {
position: absolute;
font-size: 9px;
color: rgba(38, 194, 187, 0.45);
font-weight: 500;
pointer-events: none;
}
.distance-50 {
top: calc(50% - 48px);
left: 50%;
transform: translateX(-50%);
}
.distance-100 {
top: calc(50% - 80px);
left: 50%;
transform: translateX(-50%);
}
.distance-200 {
top: calc(50% - 112px);
left: 50%;
transform: translateX(-50%);
}
.distance-500 {
top: 6px;
left: 50%;
transform: translateX(-50%);
color: rgba(38, 194, 187, 0.3);
}
/* 扫描线 */
.radar-scan-line {
position: absolute;
top: 50%;
left: 50%;
width: 50%;
height: 50%;
transform-origin: 0% 0%;
animation: scan-rotate 3.5s linear infinite;
pointer-events: none;
}
.radar-scan-line::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: conic-gradient(
from 0deg,
rgba(38, 194, 187, 0) 0deg,
rgba(38, 194, 187, 0.08) 15deg,
rgba(38, 194, 187, 0.3) 30deg,
rgba(38, 194, 187, 0.5) 45deg,
rgba(38, 194, 187, 0) 60deg
);
border-radius: 0 100% 0 0;
}
.radar-scan-line::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1.5px;
background: linear-gradient(90deg, rgba(38, 194, 187, 0.9), rgba(38, 194, 187, 0));
transform-origin: left center;
}
@keyframes scan-rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* 中心点 - 我 */
.radar-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 14px;
height: 14px;
border-radius: 50%;
background: radial-gradient(circle, #54CAC5 0%, #26C2BB 100%);
z-index: 10;
box-shadow: 0 0 10px rgba(38, 194, 187, 0.6);
}
.radar-center::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 30px;
height: 30px;
border-radius: 50%;
border: 1.5px solid rgba(38, 194, 187, 0.5);
animation: pulse-ring 2s ease-out infinite;
}
.radar-center::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 54px;
height: 54px;
border-radius: 50%;
border: 1px solid rgba(38, 194, 187, 0.25);
animation: pulse-ring 2s ease-out infinite 0.6s;
}
@keyframes pulse-ring {
0% {
transform: translate(-50%, -50%) scale(0.5);
opacity: 1;
}
100% {
transform: translate(-50%, -50%) scale(1.6);
opacity: 0;
}
}
/* 雷达点 */
.radar-dot {
position: absolute;
border-radius: 50%;
cursor: pointer;
transition: transform 0.2s ease;
z-index: 5;
}
.radar-dot:active {
transform: scale(1.2);
}
.radar-dot.online {
background: radial-gradient(circle, #54CAC5 0%, #26C2BB 100%);
box-shadow: 0 0 8px rgba(38, 194, 187, 0.5);
}
.radar-dot.busy {
background: radial-gradient(circle, #FFC999 0%, #FF9F45 100%);
box-shadow: 0 0 8px rgba(255, 159, 69, 0.5);
}
.radar-dot.offline {
background: radial-gradient(circle, #A8B8C8 0%, #8EA0B0 100%);
box-shadow: 0 0 4px rgba(168, 184, 200, 0.4);
}
.radar-dot.large {
width: 30px;
height: 30px;
}
.radar-dot.medium {
width: 18px;
height: 18px;
}
.radar-dot.small {
width: 10px;
height: 10px;
}
/* 头像点 */
.radar-dot-avatar {
width: 100%;
height: 100%;
border-radius: 50%;
overflow: hidden;
border: 1.5px solid rgba(255, 255, 255, 0.35);
}
.radar-dot-avatar svg {
width: 100%;
height: 100%;
display: block;
}
/* 名字标签 */
.radar-dot-label {
position: absolute;
bottom: -16px;
left: 50%;
transform: translateX(-50%);
font-size: 9px;
color: rgba(255, 255, 255, 0.8);
white-space: nowrap;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
font-weight: 500;
}
/* ===== 筛选控制栏 ===== */
.filter-section {
padding: 0 16px 12px;
}
.range-slider-container {
margin-bottom: 12px;
}
.range-slider-label {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
font-size: 13px;
color: #595959;
}
.range-slider-label .range-value {
color: #26C2BB;
font-weight: 600;
font-size: 13px;
}
.range-slider-track {
position: relative;
height: 6px;
background: #F5F6F8;
border-radius: 3px;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.03);
}
.range-slider-fill {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 33.3%;
background: linear-gradient(135deg, #54CAC5 0%, #26C2BB 50%, #1FA8A2 100%);
border-radius: 3px;
}
.range-slider-thumb {
position: absolute;
top: 50%;
left: 33.3%;
transform: translate(-50%, -50%);
width: 18px;
height: 18px;
background: linear-gradient(135deg, #54CAC5 0%, #26C2BB 50%, #1FA8A2 100%);
border-radius: 50%;
box-shadow:
0 2px 8px rgba(38, 194, 187, 0.4),
0 1px 2px rgba(0, 0, 0, 0.15);
cursor: pointer;
z-index: 2;
}
.range-slider-thumb::before {
content: '';
position: absolute;
top: 3px;
left: 50%;
transform: translateX(-50%);
width: 8px;
height: 3px;
background: rgba(255, 255, 255, 0.5);
border-radius: 1.5px;
}
input[type="range"].custom-range {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
margin: 0;
}
/* 筛选标签 */
.filter-tags {
display: flex;
gap: 8px;
overflow-x: auto;
padding-bottom: 2px;
-ms-overflow-style: none;
scrollbar-width: none;
}
.filter-tags::-webkit-scrollbar {
display: none;
}
.filter-tag {
flex-shrink: 0;
padding: 7px 16px;
border-radius: 16px;
font-size: 12px;
font-weight: 500;
background: #F5F6F8;
color: #595959;
cursor: pointer;
transition: all 0.2s ease;
border: 1px solid transparent;
}
.filter-tag.active {
background: linear-gradient(135deg, #54CAC5 0%, #26C2BB 50%, #1FA8A2 100%);
color: #FFFFFF;
box-shadow: 0 2px 8px rgba(38, 194, 187, 0.25);
}
.filter-tag:active {
transform: scale(0.96);
}
/* ===== 附近校友列表 ===== */
.nearby-section {
padding: 4px 0 8px;
}
.nearby-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 16px 8px;
}
.nearby-title {
font-size: 14px;
font-weight: 600;
color: #1F1F1F;
}
.nearby-view-all {
font-size: 12px;
color: #26C2BB;
font-weight: 500;
cursor: pointer;
}
.nearby-cards-scroll {
display: flex;
gap: 10px;
padding: 0 16px;
overflow-x: auto;
-ms-overflow-style: none;
scrollbar-width: none;
scroll-snap-type: x mandatory;
}
.nearby-cards-scroll::-webkit-scrollbar {
display: none;
}
.nearby-card {
flex-shrink: 0;
width: 110px;
background: #FFFFFF;
border-radius: 12px;
padding: 10px 8px 8px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
cursor: pointer;
transition: all 0.2s ease;
scroll-snap-align: start;
display: flex;
flex-direction: column;
align-items: center;
}
.nearby-card:active {
transform: scale(0.97);
}
.nearby-card-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
margin-bottom: 6px;
overflow: hidden;
border: 2px solid #26C2BB;
box-shadow: 0 2px 8px rgba(38, 194, 187, 0.2);
}
.nearby-card-avatar svg {
width: 100%;
height: 100%;
display: block;
}
.nearby-card-name {
text-align: center;
font-size: 12px;
font-weight: 600;
color: #1F1F1F;
margin-bottom: 2px;
}
.nearby-card-meta {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
margin-bottom: 6px;
}
.nearby-card-distance {
font-size: 10px;
color: #8C8C8C;
}
.status-dot {
width: 5px;
height: 5px;
border-radius: 50%;
flex-shrink: 0;
}
.status-dot.online {
background: #26C2BB;
box-shadow: 0 0 4px rgba(38, 194, 187, 0.5);
}
.status-dot.busy {
background: #FF9F45;
}
.nearby-card-tag {
display: inline-block;
padding: 2px 8px;
border-radius: 16px;
font-size: 9px;
font-weight: 500;
margin-bottom: 8px;
}
.tag-music {
background: rgba(123, 97, 255, 0.1);
color: #7B61FF;
}
.tag-game {
background: rgba(255, 159, 69, 0.12);
color: #E68A2E;
}
.tag-photo {
background: rgba(255, 107, 157, 0.1);
color: #E64F85;
}
.tag-code {
background: rgba(38, 194, 187, 0.1);
color: #1FA39E;
}
.tag-sport {
background: rgba(52, 199, 89, 0.1);
color: #28A847;
}
.nearby-card-actions {
display: flex;
gap: 6px;
width: 100%;
justify-content: center;
}
.action-btn {
width: 32px;
height: 24px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
border: none;
}
.action-btn:active {
transform: scale(0.92);
}
.action-btn.like {
background: #F5F6F8;
color: #8C8C8C;
border: 1px solid #E8E8E8;
}
.action-btn.like svg {
width: 13px;
height: 13px;
stroke: currentColor;
stroke-width: 2;
fill: none;
}
.action-btn.like.active {
background: rgba(255, 107, 157, 0.1);
color: #FF6B9D;
border-color: rgba(255, 107, 157, 0.2);
}
.action-btn.like.active svg {
fill: #FF6B9D;
stroke: #FF6B9D;
}
.action-btn.chat {
background: linear-gradient(135deg, #54CAC5 0%, #26C2BB 50%, #1FA8A2 100%);
color: #FFFFFF;
box-shadow: 0 2px 6px rgba(38, 194, 187, 0.3);
}
.action-btn.chat svg {
width: 13px;
height: 13px;
stroke: currentColor;
stroke-width: 2;
fill: none;
}
/* ===== 底部Tab导航 (64px) ===== */
.bottom-tab-nav {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 64px;
background: #FFFFFF;
border-top: 1px solid #E8E8E8;
display: flex;
align-items: center;
justify-content: space-around;
padding-bottom: 0;
z-index: 50;
}
.tab-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
cursor: pointer;
padding: 4px 10px;
transition: all 0.2s ease;
flex: 1;
}
.tab-item svg {
width: 22px;
height: 22px;
color: #BFBFBF;
transition: all 0.2s ease;
}
.tab-item span {
font-size: 10px;
color: #BFBFBF;
transition: all 0.2s ease;
}
.tab-item.active svg {
color: #26C2BB;
}
.tab-item.active span {
color: #26C2BB;
font-weight: 500;
}
.tab-item:active {
transform: scale(0.92);
}
.tab-item.publish-btn {
position: relative;
}
.tab-item.publish-btn .publish-circle {
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, #54CAC5 0%, #26C2BB 50%, #1FA8A2 100%);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(38, 194, 187, 0.35);
margin-top: -10px;
margin-bottom: 2px;
}
.tab-item.publish-btn .publish-circle svg {
width: 20px;
height: 20px;
color: #FFFFFF;
}
/* ===== Toast 提示 ===== */
.toast {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.8);
padding: 14px 22px;
background: rgba(0, 0, 0, 0.78);
color: white;
border-radius: 10px;
font-size: 13px;
opacity: 0;
pointer-events: none;
transition: all 0.3s ease;
z-index: 999;
backdrop-filter: blur(10px);
}
.toast.show {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
</style>
</head>
<body>
<div class="app-container">
<!-- iOS 状态栏 -->
<div class="status-bar">
<span>9:41</span>
<div class="right-icons">
<!-- 信号 -->
<svg width="17" height="12" viewBox="0 0 18 12" fill="currentColor">
<rect x="0" y="8" width="3" height="4" rx="1"></rect>
<rect x="5" y="5" width="3" height="7" rx="1"></rect>
<rect x="10" y="2" width="3" height="10" rx="1"></rect>
<rect x="15" y="0" width="3" height="12" rx="1"></rect>
</svg>
<!-- WiFi -->
<svg width="15" height="12" viewBox="0 0 16 12" fill="currentColor">
<path d="M8 10.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm0-4.5c1.5 0 2.9.5 4 1.4l1.4-1.4C11.7 4.5 9.9 3.5 8 3.5S4.3 4.5 2.6 6L4 7.4C5.1 6.5 6.5 6 8 6zm0-4c2.5 0 4.8.9 6.5 2.4l1.4-1.4C13.9 1 11.1 0 8 0S2.1 1 .1 3L1.5 4.4C3.2 2.9 5.5 2 8 2z"></path>
</svg>
<!-- 电池 -->
<svg width="25" height="12" viewBox="0 0 25 12" fill="none">
<rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="currentColor" stroke-opacity="0.5"></rect>
<rect x="2" y="2" width="17" height="8" rx="1.5" fill="currentColor"></rect>
<rect x="22.5" y="4" width="1.5" height="4" rx="0.75" fill="currentColor" fill-opacity="0.5"></rect>
</svg>
</div>
</div>
<!-- 顶部导航栏 -->
<div class="top-nav">
<button class="nav-btn" onclick="goBack()">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<polyline points="15 18 9 12 15 6"></polyline>
</svg>
</button>
<span class="nav-title">校园雷达</span>
<button class="nav-btn" onclick="openFilter()">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"></polygon>
</svg>
</button>
</div>
<!-- 顶部统计卡片 -->
<div class="stats-card">
<div class="stat-item">
<div class="stat-icon primary">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
<circle cx="9" cy="7" r="4"></circle>
<path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
<path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
</svg>
</div>
<div class="stat-content">
<span class="stat-number">24</span>
<span class="stat-label">附近校友</span>
</div>
</div>
<div class="stat-item">
<div class="stat-icon orange">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
<line x1="16" y1="2" x2="16" y2="6"></line>
<line x1="8" y1="2" x2="8" y2="6"></line>
<line x1="3" y1="10" x2="21" y2="10"></line>
</svg>
</div>
<div class="stat-content">
<span class="stat-number">8</span>
<span class="stat-label">进行中活动</span>
</div>
</div>
</div>
<!-- 雷达扫描可视化区 -->
<div class="radar-container">
<div class="radar">
<!-- 同心圆 -->
<div class="radar-ring radar-ring-1"></div>
<div class="radar-ring radar-ring-2"></div>
<div class="radar-ring radar-ring-3"></div>
<!-- 十字准星 -->
<div class="radar-crosshair-h"></div>
<div class="radar-crosshair-v"></div>
<!-- 距离刻度 -->
<div class="radar-distance-label distance-50">50m</div>
<div class="radar-distance-label distance-100">100m</div>
<div class="radar-distance-label distance-200">200m</div>
<div class="radar-distance-label distance-500">500m</div>
<!-- 扫描线 -->
<div class="radar-scan-line"></div>
<!-- 中心点 - 我 -->
<div class="radar-center"></div>
<!-- 近圈大点(4个,带头像和名字) -->
<div class="radar-dot large online" style="top: 36%; left: 56%;" onclick="openRadarProfile('林小雨')">
<div class="radar-dot-avatar">
<svg viewBox="0 0 36 36" fill="none">
<circle cx="18" cy="18" r="18" fill="#54CAC5"></circle>
<circle cx="18" cy="14" r="6" fill="#fff" fill-opacity="0.9"></circle>
<ellipse cx="18" cy="26" rx="9" ry="6" fill="#fff" fill-opacity="0.9"></ellipse>
</svg>
</div>
<div class="radar-dot-label">小雨</div>
</div>
<div class="radar-dot large busy" style="top: 46%; left: 32%;" onclick="openRadarProfile('张俊杰')">
<div class="radar-dot-avatar">
<svg viewBox="0 0 36 36" fill="none">
<circle cx="18" cy="18" r="18" fill="#FF9F45"></circle>
<circle cx="18" cy="14" r="6" fill="#fff" fill-opacity="0.9"></circle>
<ellipse cx="18" cy="26" rx="9" ry="6" fill="#fff" fill-opacity="0.9"></ellipse>
</svg>
</div>
<div class="radar-dot-label">阿杰</div>
</div>
<div class="radar-dot large online" style="top: 58%; left: 60%;" onclick="openRadarProfile('陈思琪')">
<div class="radar-dot-avatar">
<svg viewBox="0 0 36 36" fill="none">
<circle cx="18" cy="18" r="18" fill="#7ED6D2"></circle>
<circle cx="18" cy="14" r="6" fill="#fff" fill-opacity="0.9"></circle>
<ellipse cx="18" cy="26" rx="9" ry="6" fill="#fff" fill-opacity="0.9"></ellipse>
</svg>
</div>
<div class="radar-dot-label">思琪</div>
</div>
<div class="radar-dot large online" style="top: 62%; left: 40%;" onclick="openRadarProfile('王浩然')">
<div class="radar-dot-avatar">
<svg viewBox="0 0 36 36" fill="none">
<circle cx="18" cy="18" r="18" fill="#3FCFCA"></circle>
<circle cx="18" cy="14" r="6" fill="#fff" fill-opacity="0.9"></circle>
<ellipse cx="18" cy="26" rx="9" ry="6" fill="#fff" fill-opacity="0.9"></ellipse>
</svg>
</div>
<div class="radar-dot-label">浩然</div>
</div>
<!-- 中圈中点(5个) -->
<div class="radar-dot medium online" style="top: 28%; left: 30%;" onclick="openRadarProfile('校友')"></div>
<div class="radar-dot medium online" style="top: 30%; left: 72%;" onclick="openRadarProfile('校友')"></div>
<div class="radar-dot medium busy" style="top: 68%; left: 22%;" onclick="openRadarProfile('校友')"></div>
<div class="radar-dot medium offline" style="top: 72%; left: 75%;" onclick="openRadarProfile('校友')"></div>
<div class="radar-dot medium online" style="top: 20%; left: 52%;" onclick="openRadarProfile('校友')"></div>
<!-- 外圈小点(7个) -->
<div class="radar-dot small online" style="top: 14%; left: 20%;" onclick="openRadarProfile('校友')"></div>
<div class="radar-dot small online" style="top: 10%; left: 62%;" onclick="openRadarProfile('校友')"></div>
<div class="radar-dot small busy" style="top: 18%; left: 84%;" onclick="openRadarProfile('校友')"></div>
<div class="radar-dot small offline" style="top: 50%; left: 6%;" onclick="openRadarProfile('校友')"></div>
<div class="radar-dot small online" style="top: 50%; left: 92%;" onclick="openRadarProfile('校友')"></div>
<div class="radar-dot small online" style="top: 85%; left: 22%;" onclick="openRadarProfile('校友')"></div>
<div class="radar-dot small offline" style="top: 88%; left: 68%;" onclick="openRadarProfile('校友')"></div>
</div>
</div>
<!-- 筛选控制栏 -->
<div class="filter-section">
<!-- 范围滑块 -->
<div class="range-slider-container">
<div class="range-slider-label">
<span>扫描范围</span>
<span class="range-value" id="range-value">200m</span>
</div>
<div class="range-slider-track">
<div class="range-slider-fill" id="range-fill"></div>
<div class="range-slider-thumb" id="range-thumb"></div>
<input type="range" class="custom-range" min="50" max="500" value="200" step="10" oninput="updateRange(this.value)">
</div>
</div>
<!-- 筛选标签 -->
<div class="filter-tags">
<div class="filter-tag active" onclick="setFilter(this, 'all')">全部</div>
<div class="filter-tag" onclick="setFilter(this, 'online')">仅在线</div>
<div class="filter-tag" onclick="setFilter(this, 'interest')">同兴趣</div>
<div class="filter-tag" onclick="setFilter(this, 'major')">同专业</div>
</div>
</div>
<!-- 附近校友列表 -->
<div class="nearby-section">
<div class="nearby-header">
<span class="nearby-title">附近的校友</span>
<span class="nearby-view-all" onclick="viewAll()">查看全部</span>
</div>
<div class="nearby-cards-scroll">
<!-- 卡片1 -->
<div class="nearby-card">
<div class="nearby-card-avatar">
<svg viewBox="0 0 56 56" fill="none">
<circle cx="28" cy="28" r="28" fill="#54CAC5"></circle>
<circle cx="28" cy="22" r="9" fill="#fff" fill-opacity="0.9"></circle>
<ellipse cx="28" cy="40" rx="14" ry="9" fill="#fff" fill-opacity="0.9"></ellipse>
</svg>
</div>
<div class="nearby-card-name">林小雨</div>
<div class="nearby-card-meta">
<div class="status-dot online"></div>
<span class="nearby-card-distance">32m</span>
</div>
<span class="nearby-card-tag tag-music">音乐</span>
<div class="nearby-card-actions">
<button class="action-btn like" onclick="toggleLike(this, event)">
<svg viewBox="0 0 24 24" 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 chat" onclick="openChat('林小雨', event)">
<svg viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
</svg>
</button>
</div>
</div>
<!-- 卡片2 -->
<div class="nearby-card">
<div class="nearby-card-avatar">
<svg viewBox="0 0 56 56" fill="none">
<circle cx="28" cy="28" r="28" fill="#FF9F45"></circle>
<circle cx="28" cy="22" r="9" fill="#fff" fill-opacity="0.9"></circle>
<ellipse cx="28" cy="40" rx="14" ry="9" fill="#fff" fill-opacity="0.9"></ellipse>
</svg>
</div>
<div class="nearby-card-name">张俊杰</div>
<div class="nearby-card-meta">
<div class="status-dot busy"></div>
<span class="nearby-card-distance">58m</span>
</div>
<span class="nearby-card-tag tag-game">游戏</span>
<div class="nearby-card-actions">
<button class="action-btn like" onclick="toggleLike(this, event)">
<svg viewBox="0 0 24 24" 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 chat" onclick="openChat('张俊杰', event)">
<svg viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
</svg>
</button>
</div>
</div>
<!-- 卡片3 -->
<div class="nearby-card">
<div class="nearby-card-avatar">
<svg viewBox="0 0 56 56" fill="none">
<circle cx="28" cy="28" r="28" fill="#7B61FF"></circle>
<circle cx="28" cy="22" r="9" fill="#fff" fill-opacity="0.9"></circle>
<ellipse cx="28" cy="40" rx="14" ry="9" fill="#fff" fill-opacity="0.9"></ellipse>
</svg>
</div>
<div class="nearby-card-name">陈思琪</div>
<div class="nearby-card-meta">
<div class="status-dot online"></div>
<span class="nearby-card-distance">76m</span>
</div>
<span class="nearby-card-tag tag-photo">摄影</span>
<div class="nearby-card-actions">
<button class="action-btn like" onclick="toggleLike(this, event)">
<svg viewBox="0 0 24 24" 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 chat" onclick="openChat('陈思琪', event)">
<svg viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
</svg>
</button>
</div>
</div>
<!-- 卡片4 -->
<div class="nearby-card">
<div class="nearby-card-avatar">
<svg viewBox="0 0 56 56" fill="none">
<circle cx="28" cy="28" r="28" fill="#34C759"></circle>
<circle cx="28" cy="22" r="9" fill="#fff" fill-opacity="0.9"></circle>
<ellipse cx="28" cy="40" rx="14" ry="9" fill="#fff" fill-opacity="0.9"></ellipse>
</svg>
</div>
<div class="nearby-card-name">王浩然</div>
<div class="nearby-card-meta">
<div class="status-dot online"></div>
<span class="nearby-card-distance">95m</span>
</div>
<span class="nearby-card-tag tag-sport">运动</span>
<div class="nearby-card-actions">
<button class="action-btn like" onclick="toggleLike(this, event)">
<svg viewBox="0 0 24 24" 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 chat" onclick="openChat('王浩然', event)">
<svg viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
</svg>
</button>
</div>
</div>
<!-- 卡片5 -->
<div class="nearby-card">
<div class="nearby-card-avatar">
<svg viewBox="0 0 56 56" fill="none">
<circle cx="28" cy="28" r="28" fill="#FF6B9D"></circle>
<circle cx="28" cy="22" r="9" fill="#fff" fill-opacity="0.9"></circle>
<ellipse cx="28" cy="40" rx="14" ry="9" fill="#fff" fill-opacity="0.9"></ellipse>
</svg>
</div>
<div class="nearby-card-name">刘诗雨</div>
<div class="nearby-card-meta">
<div class="status-dot online"></div>
<span class="nearby-card-distance">120m</span>
</div>
<span class="nearby-card-tag tag-code">编程</span>
<div class="nearby-card-actions">
<button class="action-btn like" onclick="toggleLike(this, event)">
<svg viewBox="0 0 24 24" 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 chat" onclick="openChat('刘诗雨', event)">
<svg viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
</svg>
</button>
</div>
</div>
</div>
</div>
<!-- 底部Tab导航 -->
<div class="bottom-tab-nav">
<div class="tab-item" onclick="switchTab(this, 'home')">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M3 9l9-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>首页</span>
</div>
<div class="tab-item" onclick="switchTab(this, 'feed')">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path>
</svg>
<span>动态</span>
</div>
<div class="tab-item publish-btn" onclick="publishPost()">
<div class="publish-circle">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
</div>
</div>
<div class="tab-item" onclick="switchTab(this, 'message')">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
</svg>
<span>消息</span>
</div>
<div class="tab-item active" onclick="switchTab(this, 'discover')">
<svg 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>
<polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76"></polygon>
</svg>
<span>发现</span>
</div>
</div>
</div>
<!-- Toast 提示 -->
<div class="toast" id="toast"></div>
<script>
// ===== 返回按钮 =====
function goBack() {
window.location.href = 'friends-list.html';
}
// ===== 筛选按钮 =====
function openFilter() {
showToast('打开筛选设置');
}
// ===== 范围滑块更新 =====
function updateRange(value) {
const fill = document.getElementById('range-fill');
const thumb = document.getElementById('range-thumb');
const valueLabel = document.getElementById('range-value');
const min = 50;
const max = 500;
const percent = ((value - min) / (max - min)) * 100;
fill.style.width = percent + '%';
thumb.style.left = percent + '%';
valueLabel.textContent = value + 'm';
}
// ===== 筛选标签切换 =====
function setFilter(el, type) {
const tags = document.querySelectorAll('.filter-tag');
tags.forEach(tag => tag.classList.remove('active'));
el.classList.add('active');
const filterNames = {
'all': '全部',
'online': '仅在线',
'interest': '同兴趣',
'major': '同专业'
};
showToast('筛选:' + filterNames[type]);
}
// ===== 查看全部 =====
function viewAll() {
showToast('查看全部附近校友');
}
// ===== 喜欢按钮 =====
function toggleLike(btn, event) {
event.stopPropagation();
btn.classList.toggle('active');
if (btn.classList.contains('active')) {
showToast('已喜欢');
}
}
// ===== 聊天按钮 =====
function openChat(name, event) {
event.stopPropagation();
showToast('打开与 ' + name + ' 的聊天');
// window.location.href = 'chat-detail.html?name=' + encodeURIComponent(name);
}
// ===== 雷达点点击 =====
function openRadarProfile(name) {
showToast(name + ' - 查看资料');
}
// ===== 底部Tab切换 =====
function switchTab(el, tab) {
const tabs = document.querySelectorAll('.tab-item');
tabs.forEach(t => t.classList.remove('active'));
if (!el.classList.contains('publish-btn')) {
el.classList.add('active');
}
}
// ===== 发布按钮 =====
function publishPost() {
showToast('发布动态');
}
// ===== Toast 提示 =====
function showToast(message) {
const toast = document.getElementById('toast');
toast.textContent = message;
toast.classList.add('show');
setTimeout(() => {
toast.classList.remove('show');
}, 1800);
}
// ===== 初始化滑块位置 =====
(function initSlider() {
const initialValue = 200;
updateRange(initialValue);
})();
</script>
</body>
</html>