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
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>
|
|
|