lyf/frontend-miniapp
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

调整点位搜索页主站视觉风格
Some checks failed
CI / verify (push) Has been cancelled
Details

Browse Source
This commit is contained in:
lyf
2026-07-05 14:58:06 +08:00
parent 39f1fc1198
commit 21d118b967
2 changed files with 230 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
.env Normal file
View File

@@ -0,0 +1,14 @@
# 腾讯地图 API Key
# 请到 https://lbs.qq.com/index.html 申请
VITE_DATA_SOURCE_MODE=sdk
VITE_GUIDE_CONTENT_SOURCE_MODE=static
VITE_API_BASE_URL=/app-api
VITE_SGS_SDK_TIMEOUT_MS=15000
VITE_TENCENT_MAP_KEY=EJPBZ-DQEEQ-PDN5U-4ZDVX-F4I3F-6MBJC
# SGS SDK 配置（SDK 模式下必需）
VITE_SGS_API_BASE_URL=/app-api
VITE_SGS_MAP_ID=1
VITE_SGS_SDK_SCRIPT_URL=/static/sgs-map-sdk/index.global.js
VITE_SGS_H5_ENGINE_URL=/h5-sdk
VITE_SGS_SDK_ORIGIN=https://guide.whaoyue.com

318
src/pages/search/index.vue
View File

@@ -1,9 +1,12 @@
<template> <template>
<view class="poi-search-page"> <view class="poi-search-page">
<view class="search-header"> <view class="search-header">
<text class="page-title">点位搜索</text> <view class="search-header-copy">
<text class="page-title">点位搜索</text>
<text class="page-subtitle">Search Museum Locations</text>
</view>
<view class="map-link" @tap="handleBackToMap"> <view class="map-link" @tap="handleBackToMap">
<text class="map-link-text">地图</text> <text class="map-link-text">返回地图</text>
</view> </view>
</view> </view>
@@ -31,6 +34,7 @@
v-for="item in primaryFacilities" v-for="item in primaryFacilities"
:key="item.id" :key="item.id"
class="category-item" class="category-item"
:class="{ active: searchKeyword === item.label }"
@tap="handleFacilityShortcut(item)" @tap="handleFacilityShortcut(item)"
> >
<view class="line-icon" :class="`icon-${item.icon}`"> <view class="line-icon" :class="`icon-${item.icon}`">
@@ -51,6 +55,7 @@
v-for="item in serviceFacilities" v-for="item in serviceFacilities"
:key="item.id" :key="item.id"
class="facility-chip" class="facility-chip"
:class="{ active: searchKeyword === item.label }"
@tap="handleFacilityShortcut(item)" @tap="handleFacilityShortcut(item)"
> >
<view class="chip-icon" :class="`chip-${item.icon}`"></view> <view class="chip-icon" :class="`chip-${item.icon}`"></view>
@@ -59,7 +64,10 @@
</view> </view>
<view class="result-card"> <view class="result-card">
<text class="museum-title">深圳自然博物馆</text> <view class="result-card-header">
<text class="museum-title">深圳自然博物馆</text>
<text class="result-count">{{ floorResults.length }} 个点位</text>
</view>
<view class="result-body"> <view class="result-body">
<view class="floor-tabs"> <view class="floor-tabs">
@@ -335,52 +343,79 @@ const handleBackToMap = () => {
width: 100%; width: 100%;
min-height: 100vh; min-height: 100vh;
min-height: 100dvh; min-height: 100dvh;
padding: calc(env(safe-area-inset-top) + 42px) 14px 22px; padding: calc(env(safe-area-inset-top) + 32px) 14px 24px;
box-sizing: border-box; box-sizing: border-box;
background: #f7f8fa; background:
linear-gradient(180deg, rgba(224, 225, 0, 0.22) 0, rgba(245, 245, 237, 0) 146px),
#f5f5ed;
color: #262421;
font-family: '鸿蒙黑体', 'HarmonyOS Sans SC', 'HarmonyOS Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
overflow-y: auto; overflow-y: auto;
} }
.search-header { .search-header {
height: 34px; min-height: 46px;
display: flex; display: flex;
align-items: center; align-items: flex-start;
justify-content: space-between; justify-content: space-between;
margin: 0 5px 17px; gap: 12px;
margin: 0 2px 16px;
}
.search-header-copy {
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
} }
.page-title { .page-title {
font-size: 21px; font-size: 26px;
line-height: 29px; line-height: 31px;
font-weight: 800; font-weight: 800;
color: #050505; letter-spacing: 0;
color: #000000;
}
.page-subtitle {
font-size: 11px;
line-height: 15px;
font-weight: 500;
color: #5d5b50;
white-space: nowrap;
} }
.map-link { .map-link {
min-width: 46px; min-width: 74px;
height: 27px; height: 32px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: center;
padding: 0 10px;
box-sizing: border-box;
background: #000000;
border: 1px solid rgba(0, 0, 0, 0.88);
border-radius: 0;
} }
.map-link-text { .map-link-text {
font-size: 15px; font-size: 13px;
line-height: 21px; line-height: 18px;
font-weight: 600; font-weight: 700;
color: #11843f; color: #e0e100;
white-space: nowrap;
} }
.search-box { .search-box {
height: 46px; height: 48px;
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0 15px; padding: 0 14px;
box-sizing: border-box; box-sizing: border-box;
background: #ffffff; background: rgba(255, 255, 255, 0.96);
border: 1px solid #dfe1e5; border: 1px solid #d8dbd0;
border-radius: 7px; border-radius: 0;
box-shadow: 0 5px 14px rgba(25, 31, 38, 0.07); box-shadow: 0 8px 18px rgba(36, 49, 42, 0.08);
} }
.search-icon { .search-icon {
@@ -389,7 +424,7 @@ const handleBackToMap = () => {
position: relative; position: relative;
flex-shrink: 0; flex-shrink: 0;
margin-right: 14px; margin-right: 14px;
border: 2px solid #343942; border: 2px solid #151713;
border-radius: 50%; border-radius: 50%;
box-sizing: border-box; box-sizing: border-box;
} }
@@ -401,7 +436,7 @@ const handleBackToMap = () => {
bottom: -5px; bottom: -5px;
width: 10px; width: 10px;
height: 2px; height: 2px;
background: #343942; background: #151713;
border-radius: 2px; border-radius: 2px;
transform: rotate(45deg); transform: rotate(45deg);
} }
@@ -412,11 +447,11 @@ const handleBackToMap = () => {
height: 44px; height: 44px;
font-size: 15px; font-size: 15px;
line-height: 44px; line-height: 44px;
color: #15191f; color: #262421;
} }
.search-placeholder { .search-placeholder {
color: #8d939e; color: #8b8b84;
} }
.clear-button, .clear-button,
@@ -431,14 +466,14 @@ const handleBackToMap = () => {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: #eff1f4; background: #e8eadf;
border-radius: 50%; border-radius: 50%;
} }
.clear-text { .clear-text {
font-size: 19px; font-size: 19px;
line-height: 20px; line-height: 20px;
color: #6c727c; color: #424754;
} }
.voice-icon { .voice-icon {
@@ -453,7 +488,7 @@ const handleBackToMap = () => {
top: 1px; top: 1px;
width: 9px; width: 9px;
height: 17px; height: 17px;
border: 2px solid #343942; border: 2px solid #151713;
border-radius: 6px; border-radius: 6px;
box-sizing: border-box; box-sizing: border-box;
} }
@@ -465,45 +500,73 @@ const handleBackToMap = () => {
top: 10px; top: 10px;
width: 17px; width: 17px;
height: 12px; height: 12px;
border: 2px solid #343942; border: 2px solid #151713;
border-top: 0; border-top: 0;
border-radius: 0 0 9px 9px; border-radius: 0 0 9px 9px;
box-sizing: border-box; box-sizing: border-box;
} }
.category-grid { .category-grid {
margin-top: 31px; margin-top: 20px;
display: grid; display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1px;
overflow: hidden;
background: #000000;
border: 1px solid #000000;
} }
.category-item { .category-item {
height: 88px; height: 82px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
position: relative; position: relative;
background: #ffffff;
transition: background-color 0.16s ease, color 0.16s ease;
}
.category-item:nth-child(1) {
background: #000000;
}
.category-item:nth-child(2) {
background: #e0e100;
} }
.category-item:nth-child(1),
.category-item:nth-child(2),
.category-item:nth-child(3) { .category-item:nth-child(3) {
border-bottom: 1px solid #e1e3e6; background: #16beb2;
}
.category-item:nth-child(4) {
background: #b796f2;
} }
.category-item:nth-child(2),
.category-item:nth-child(5) { .category-item:nth-child(5) {
border-left: 1px solid #e1e3e6; background: #87d8ad;
border-right: 1px solid #e1e3e6; }
.category-item:nth-child(6) {
background: #f4b693;
}
.category-item.active {
outline: 3px solid #000000;
outline-offset: -6px;
} }
.line-icon { .line-icon {
width: 36px; width: 36px;
height: 35px; height: 35px;
position: relative; position: relative;
margin-bottom: 11px; margin-bottom: 9px;
color: #148740; color: #000000;
}
.category-item:nth-child(1) .line-icon,
.category-item:nth-child(1) .category-label {
color: #e0e100;
} }
.icon-part { .icon-part {
@@ -673,40 +736,55 @@ const handleBackToMap = () => {
} }
.category-label { .category-label {
font-size: 15px; max-width: 100%;
line-height: 21px; padding: 0 6px;
font-weight: 500; box-sizing: border-box;
color: #0b0c0f; font-size: 14px;
line-height: 19px;
font-weight: 700;
color: #000000;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
.section-title-row { .section-title-row {
margin: 33px 6px 12px; margin: 24px 2px 12px;
padding: 10px 0 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
} }
.section-title { .section-title {
font-size: 15px; font-size: 22px;
line-height: 21px; line-height: 28px;
font-weight: 600; font-weight: 800;
color: #17191d; color: #000000;
} }
.facility-chip-row { .facility-chip-row {
display: grid; display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px; gap: 8px;
} }
.facility-chip { .facility-chip {
height: 37px; min-height: 42px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 6px; gap: 6px;
padding: 0 6px; padding: 0 8px;
box-sizing: border-box; box-sizing: border-box;
background: #ffffff; background: rgba(255, 255, 255, 0.88);
border: 1px solid #cfd3d8; border: 1px solid #d8dbd0;
border-radius: 4px; border-radius: 0;
box-shadow: 0 4px 12px rgba(36, 49, 42, 0.05);
}
.facility-chip.active {
background: #e0e100;
border-color: #000000;
} }
.chip-icon { .chip-icon {
@@ -714,7 +792,7 @@ const handleBackToMap = () => {
height: 12px; height: 12px;
position: relative; position: relative;
flex-shrink: 0; flex-shrink: 0;
color: #148740; color: #000000;
box-sizing: border-box; box-sizing: border-box;
} }
@@ -782,79 +860,111 @@ const handleBackToMap = () => {
min-width: 0; min-width: 0;
font-size: 12px; font-size: 12px;
line-height: 17px; line-height: 17px;
font-weight: 600;
color: #22262b; color: #22262b;
white-space: nowrap; white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
.result-card { .result-card {
margin-top: 23px; margin-top: 22px;
padding: 17px 13px 28px; padding: 0 0 14px;
box-sizing: border-box; box-sizing: border-box;
background: #ffffff; overflow: hidden;
border-radius: 9px; background: rgba(255, 255, 255, 0.94);
box-shadow: 0 5px 17px rgba(26, 32, 44, 0.1); border: 1px solid #dedfd4;
border-radius: 0;
box-shadow: 0 8px 20px rgba(36, 49, 42, 0.1);
}
.result-card-header {
min-height: 54px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 0 14px;
box-sizing: border-box;
background: #000000;
} }
.museum-title { .museum-title {
display: block; display: block;
margin: 0 5px 15px; min-width: 0;
font-size: 17px; font-size: 18px;
line-height: 24px; line-height: 24px;
font-weight: 800; font-weight: 800;
color: #090a0c; color: #ffffff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.result-count {
flex-shrink: 0;
font-size: 12px;
line-height: 17px;
font-weight: 700;
color: #e0e100;
} }
.result-body { .result-body {
display: flex; display: flex;
align-items: stretch; align-items: stretch;
padding: 13px 12px 0;
box-sizing: border-box;
} }
.floor-tabs { .floor-tabs {
width: 55px; width: 50px;
padding: 7px 0; padding: 4px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
flex-shrink: 0; flex-shrink: 0;
background: #f4f6f9; background: #f5f5ed;
border-radius: 5px; border: 1px solid #dedfd4;
border-radius: 0;
} }
.floor-tab { .floor-tab {
width: 48px; width: 40px;
height: 41px; height: 34px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-radius: 5px; border-radius: 0;
} }
.floor-tab.active { .floor-tab.active {
background: #050505; background: #000000;
} }
.floor-tab-text { .floor-tab-text {
font-size: 17px; font-size: 13px;
line-height: 22px; line-height: 18px;
font-weight: 500; font-weight: 700;
color: #8a919b; color: #5d5b50;
} }
.floor-tab.active .floor-tab-text { .floor-tab.active .floor-tab-text {
color: #f0ff00; color: #e0e100;
} }
.result-list { .result-list {
flex: 1; flex: 1;
min-width: 0; min-width: 0;
margin-left: 17px; margin-left: 12px;
} }
.result-row { .result-row {
min-height: 43px; min-height: 50px;
display: flex; display: flex;
align-items: center; align-items: center;
border-bottom: 1px solid #e4e6e9; padding: 4px 0;
box-sizing: border-box;
border-bottom: 1px solid #e7e7dd;
} }
.result-row:last-child { .result-row:last-child {
@@ -866,8 +976,8 @@ const handleBackToMap = () => {
height: 21px; height: 21px;
position: relative; position: relative;
flex-shrink: 0; flex-shrink: 0;
margin-right: 14px; margin-right: 11px;
border: 2.5px solid #148740; border: 2px solid #000000;
border-radius: 50% 50% 50% 0; border-radius: 50% 50% 50% 0;
box-sizing: border-box; box-sizing: border-box;
transform: rotate(-45deg); transform: rotate(-45deg);
@@ -880,7 +990,7 @@ const handleBackToMap = () => {
top: 4px; top: 4px;
width: 4px; width: 4px;
height: 4px; height: 4px;
background: #148740; background: #e0e100;
border-radius: 50%; border-radius: 50%;
} }
@@ -894,19 +1004,20 @@ const handleBackToMap = () => {
} }
.result-name { .result-name {
font-size: 14px; font-size: 15px;
line-height: 20px; line-height: 20px;
font-weight: 500; font-weight: 700;
color: #0d0f12; color: #262421;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.result-meta { .result-meta {
font-size: 10px; font-size: 11px;
line-height: 14px; line-height: 15px;
color: #8a919b; font-weight: 500;
color: #696962;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@@ -917,30 +1028,33 @@ const handleBackToMap = () => {
margin-left: 7px; margin-left: 7px;
text-align: right; text-align: right;
flex-shrink: 0; flex-shrink: 0;
font-size: 29px; font-size: 25px;
line-height: 29px; line-height: 29px;
font-weight: 200; font-weight: 300;
color: #707782; color: #000000;
} }
.empty-state { .empty-state {
min-height: 95px; min-height: 124px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
gap: 5px; gap: 6px;
padding: 0 8px;
box-sizing: border-box;
} }
.empty-title { .empty-title {
font-size: 14px; font-size: 16px;
line-height: 20px; line-height: 22px;
color: #161a20; font-weight: 800;
color: #262421;
} }
.empty-desc { .empty-desc {
font-size: 11px; font-size: 12px;
line-height: 16px; line-height: 17px;
color: #8a919b; color: #696962;
} }
@media (max-width: 360px) { @media (max-width: 360px) {