5843 lines
106 KiB
Text
5843 lines
106 KiB
Text
|
/* 地图页面 - 现代化设计 + 系统适配 */
|
|||
|
|
page {
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 0;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
background: #f5f5f5;
|
|||
|
|
--menuButtonRight: 20px;
|
|||
|
|
/* 定义右侧按钮与屏幕边缘的间距 */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 地图容器 */
|
|||
|
|
.map-container {
|
|||
|
|
position: relative;
|
|||
|
|
width: 100%;
|
|||
|
|
background: #f5f5f5;
|
|||
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
.district-text.dark {
|
|||
|
|
color: white;
|
|||
|
|
}
|
|||
|
|
.toggle-text.dark {
|
|||
|
|
color: white;
|
|||
|
|
}
|
|||
|
|
.weather-temp .dark{
|
|||
|
|
color: white;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 地图黑色主题基础样式 */
|
|||
|
|
.map-dark {
|
|||
|
|
--map-background-color: #0a0a0a;
|
|||
|
|
--map-control-color: #ffffff;
|
|||
|
|
--map-label-color: #ffffff;
|
|||
|
|
--map-poi-color: #ffffff;
|
|||
|
|
--map-background: #000000;
|
|||
|
|
--map-text-color: #ffffff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.custom-scale {
|
|||
|
|
width: 100px;
|
|||
|
|
position: absolute;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 5rpx 12rpx;
|
|||
|
|
border-radius: 4rpx;
|
|||
|
|
box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.5);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.scale-unit {
|
|||
|
|
font-size: 18rpx;
|
|||
|
|
color: #333;
|
|||
|
|
line-height: 1.2;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.metric {
|
|||
|
|
/* 米/千米在上 */
|
|||
|
|
margin-bottom: 4rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.imperial {
|
|||
|
|
/* 英尺在下 */
|
|||
|
|
margin-top: 4rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.scale-bar {
|
|||
|
|
width: 80px;
|
|||
|
|
/* 最大线段长度，可调整 */
|
|||
|
|
height: 4rpx;
|
|||
|
|
background: #eee;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.scale-line {
|
|||
|
|
height: 100%;
|
|||
|
|
background: #333;
|
|||
|
|
/* 线段颜色 */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
/* 适配底部导航栏的地图容器 */
|
|||
|
|
.map-with-tabbar {
|
|||
|
|
height: calc(100vh - env(safe-area-inset-bottom));
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 底部导航栏玻璃效果适配 */
|
|||
|
|
page {
|
|||
|
|
background: #f5f5f5;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 修复地图页面底部内容不被遮挡 */
|
|||
|
|
.content-area {
|
|||
|
|
padding-bottom: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 地图组件 */
|
|||
|
|
.map {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 定位占位图 - 现代化设计 */
|
|||
|
|
.location-placeholder {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
z-index: 100;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.placeholder-content {
|
|||
|
|
text-align: center;
|
|||
|
|
color: white;
|
|||
|
|
padding: 40px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-icon {
|
|||
|
|
font-size: 64px;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
animation: float 3s ease-in-out infinite;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes float {
|
|||
|
|
|
|||
|
|
0%,
|
|||
|
|
100% {
|
|||
|
|
transform: translateY(0);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
50% {
|
|||
|
|
transform: translateY(-10px);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.placeholder-title {
|
|||
|
|
font-size: 20px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
margin-bottom: 8px;
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.placeholder-subtitle {
|
|||
|
|
font-size: 14px;
|
|||
|
|
opacity: 0.8;
|
|||
|
|
margin-bottom: 30px;
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-progress {
|
|||
|
|
width: 80px;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
.progress-fill {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
background: rgba(255, 255, 255, 0.8);
|
|||
|
|
border-radius: 2px;
|
|||
|
|
animation: progress 2s ease-in-out infinite;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes progress {
|
|||
|
|
0% {
|
|||
|
|
transform: translateX(-100%);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
100% {
|
|||
|
|
transform: translateX(100%);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.progress-text {
|
|||
|
|
font-size: 12px;
|
|||
|
|
opacity: 0.7;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 自定义导航栏 */
|
|||
|
|
.custom-navigation-bar {
|
|||
|
|
position: fixed;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
z-index: 999;
|
|||
|
|
/* backdrop-filter: blur(10px); */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.status-bar-space {
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.nav-content {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
padding: 0 16rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.nav-left,
|
|||
|
|
.nav-right {
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.nav-title {
|
|||
|
|
flex: 1;
|
|||
|
|
text-align: center;
|
|||
|
|
color: white;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
font-weight: 600;
|
|||
|
|
letter-spacing: 2rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 顶部状态栏 - 系统适配 */
|
|||
|
|
.top-bar {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
padding: 16rpx 32rpx;
|
|||
|
|
background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, transparent 100%);
|
|||
|
|
z-index: 100;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
gap: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-info {
|
|||
|
|
padding: 16rpx 20rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 12rpx;
|
|||
|
|
flex: 1;
|
|||
|
|
min-width: 0;
|
|||
|
|
transition: all 0.2s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-info:active {
|
|||
|
|
background: rgba(255, 255, 255, 1);
|
|||
|
|
transform: scale(0.98);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-icon-small {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
opacity: 0.8;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-content {
|
|||
|
|
flex: 1;
|
|||
|
|
min-width: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-text {
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
color: #2c3e50;
|
|||
|
|
font-weight: 600;
|
|||
|
|
display: block;
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
line-height: 1.3;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-debug {
|
|||
|
|
font-size: 20rpx;
|
|||
|
|
color: #7f8c8d;
|
|||
|
|
margin-top: 2rpx;
|
|||
|
|
display: block;
|
|||
|
|
opacity: 0.8;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.weather-info {
|
|||
|
|
background: rgba(255, 255, 255, 0.95);
|
|||
|
|
padding: 16rpx 20rpx;
|
|||
|
|
border-radius: 48rpx;
|
|||
|
|
backdrop-filter: blur(20rpx);
|
|||
|
|
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 8rpx;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.weather-icon {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.weather-text {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #2c3e50;
|
|||
|
|
font-weight: 600;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 顶部元素容器 - 统一的flex布局 */
|
|||
|
|
.top-elements-container {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
z-index: 100;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.top-elements-content {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
padding: 16rpx 32rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 左上角区域信息容器 - 垂直堆叠样式 */
|
|||
|
|
.top-left-info-container {
|
|||
|
|
padding: 12rpx 16rpx;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
gap: 8px;
|
|||
|
|
z-index: 100;
|
|||
|
|
pointer-events: auto;
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
margin-right: 10px;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
/* 确保左侧信息区域位置固定，不受到其他区域影响 */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 登录状态下的左侧信息容器样式 */
|
|||
|
|
.top-left-info-container.logged-in {
|
|||
|
|
position: relative;
|
|||
|
|
left: 0;
|
|||
|
|
top: 0;
|
|||
|
|
/* 保持默认样式 */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 未登录状态下的左侧信息容器样式 */
|
|||
|
|
.top-left-info-container.not-logged-in {
|
|||
|
|
position: absolute;
|
|||
|
|
left: 20rpx;
|
|||
|
|
top: 0;
|
|||
|
|
/* 固定在左上角，避免受其他元素影响 */
|
|||
|
|
z-index: 101;
|
|||
|
|
/* 确保在最上层显示 */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.top-left-info-container:active {
|
|||
|
|
transform: scale(0.98);
|
|||
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 1. 地点位置样式 */
|
|||
|
|
.location-section {
|
|||
|
|
display: flex;
|
|||
|
|
color: #333 ;
|
|||
|
|
align-items: center;
|
|||
|
|
min-width: 100px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.district-text {
|
|||
|
|
font-size: 48rpx;
|
|||
|
|
font-weight: 700;
|
|||
|
|
color: #333 ;
|
|||
|
|
line-height: 1.2;
|
|||
|
|
text-shadow:
|
|||
|
|
0 1px 2px rgba(255, 255, 255, 0.8),
|
|||
|
|
0 -1px 0 rgba(0, 0, 0, 0.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 2. 天气信息样式 */
|
|||
|
|
.weather-section {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.weather-icon {
|
|||
|
|
font-size: 36rpx;
|
|||
|
|
animation: weather-float 3s ease-in-out infinite;
|
|||
|
|
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 云彩图标特殊处理 - 黑色 */
|
|||
|
|
.weather-icon.cloud-icon {
|
|||
|
|
filter:
|
|||
|
|
drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)) grayscale(1) brightness(0.3);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes weather-float {
|
|||
|
|
|
|||
|
|
0%,
|
|||
|
|
100% {
|
|||
|
|
transform: translateY(0);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
50% {
|
|||
|
|
transform: translateY(-2px);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.weather-temp {
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
font-weight: 700;
|
|||
|
|
color: #333 ;
|
|||
|
|
text-shadow:
|
|||
|
|
0 1px 2px rgba(255, 255, 255, 0.8),
|
|||
|
|
0 -1px 0 rgba(0, 0, 0, 0.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
/* 容器样式：横向排列 */
|
|||
|
|
.toggle-section {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 10px;
|
|||
|
|
/* 文字与图片间距 */
|
|||
|
|
cursor: pointer;
|
|||
|
|
padding:10px 15px 5px 0px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.toggle-section-dynamic {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 10px;
|
|||
|
|
/* 文字与图片间距 */
|
|||
|
|
cursor: pointer;
|
|||
|
|
padding:0px 15px 0px 0px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 文字样式 */
|
|||
|
|
.toggle-text {
|
|||
|
|
font-size: 14px;
|
|||
|
|
color:#333
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 开关图片样式 */
|
|||
|
|
.switch-img {
|
|||
|
|
width: 40px;
|
|||
|
|
/* 图片宽度（根据你的图片尺寸调整） */
|
|||
|
|
height: auto;
|
|||
|
|
/* 高度自适应，保持比例 */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
/* 中间搜索区域样式 - 只适应右侧按钮区域，不适应左侧区域 */
|
|||
|
|
.search-area {
|
|||
|
|
/* border: 2px solid #00ffcc; */
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: flex-end;
|
|||
|
|
align-items: center;
|
|||
|
|
padding-right: 10px;
|
|||
|
|
margin-left: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 右侧元素容器样式 */
|
|||
|
|
.right-elements-container {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
/* padding-right: calc(var(--menuButtonRight)- 16px); */
|
|||
|
|
padding-left: calc(var(--menuButtonLeft));
|
|||
|
|
/* 使用与微信胶囊相同的右侧间距 */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 适配深色模式 */
|
|||
|
|
@media (prefers-color-scheme: dark) {
|
|||
|
|
.weather-temp {
|
|||
|
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.weather-icon {
|
|||
|
|
filter: drop-shadow(0 1px 2px rgba(255, 255, 255, 0.1));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.weather-icon.cloud-icon {
|
|||
|
|
filter:
|
|||
|
|
drop-shadow(0 1px 2px rgba(255, 255, 255, 0.1)) grayscale(1) brightness(0.7);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 🎨 现代化用户头像 -/* 右侧垂直按钮组 */
|
|||
|
|
.right-vertical-buttons {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 16rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.user-avatar {
|
|||
|
|
width: 44px;
|
|||
|
|
height: 44px;
|
|||
|
|
animation: avatarSlideIn 0.8s cubic-bezier(0.4, 0, 0.2, 1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 测试按钮样式 */
|
|||
|
|
.test-favorite-btn {
|
|||
|
|
width: 88rpx;
|
|||
|
|
height: 88rpx;
|
|||
|
|
background: linear-gradient(145deg, #007AFF 0%, #5AC8FA 50%, #AF52DE 100%);
|
|||
|
|
border-radius: 50%;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
position: relative;
|
|||
|
|
box-shadow:
|
|||
|
|
0 8rpx 24rpx rgba(0, 122, 255, 0.3),
|
|||
|
|
0 3rpx 8rpx rgba(0, 122, 255, 0.2),
|
|||
|
|
inset 0 1rpx 0 rgba(255, 255, 255, 0.3);
|
|||
|
|
border: 3rpx solid rgba(255, 255, 255, 0.95);
|
|||
|
|
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|||
|
|
backdrop-filter: blur(10rpx);
|
|||
|
|
z-index: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.test-favorite-btn:active {
|
|||
|
|
transform: scale(0.92);
|
|||
|
|
box-shadow:
|
|||
|
|
0 4rpx 16rpx rgba(0, 122, 255, 0.4),
|
|||
|
|
0 2rpx 6rpx rgba(0, 122, 255, 0.3),
|
|||
|
|
inset 0 1rpx 0 rgba(255, 255, 255, 0.2);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes avatarSlideIn {
|
|||
|
|
from {
|
|||
|
|
opacity: 0;
|
|||
|
|
transform: translateX(60rpx) scale(0.8);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
to {
|
|||
|
|
opacity: 1;
|
|||
|
|
transform: translateX(0) scale(1);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.avatar-container {
|
|||
|
|
width: 88rpx;
|
|||
|
|
height: 88rpx;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background: linear-gradient(145deg, #007AFF 0%, #5AC8FA 50%, #AF52DE 100%);
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
position: relative;
|
|||
|
|
box-shadow:
|
|||
|
|
0 8rpx 24rpx rgba(0, 122, 255, 0.3),
|
|||
|
|
0 3rpx 8rpx rgba(0, 122, 255, 0.2),
|
|||
|
|
inset 0 1rpx 0 rgba(255, 255, 255, 0.3);
|
|||
|
|
border: 3rpx solid rgba(255, 255, 255, 0.95);
|
|||
|
|
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|||
|
|
backdrop-filter: blur(10rpx);
|
|||
|
|
z-index: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.avatar-container:active {
|
|||
|
|
transform: scale(0.92);
|
|||
|
|
box-shadow:
|
|||
|
|
0 4rpx 16rpx rgba(0, 122, 255, 0.4),
|
|||
|
|
0 2rpx 6rpx rgba(0, 122, 255, 0.3),
|
|||
|
|
inset 0 1rpx 0 rgba(255, 255, 255, 0.2);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 悬停效果 */
|
|||
|
|
@media (hover: hover) {
|
|||
|
|
.avatar-container:hover {
|
|||
|
|
transform: scale(1.05);
|
|||
|
|
box-shadow:
|
|||
|
|
0 12rpx 32rpx rgba(0, 122, 255, 0.4),
|
|||
|
|
0 4rpx 12rpx rgba(0, 122, 255, 0.3),
|
|||
|
|
inset 0 1rpx 0 rgba(255, 255, 255, 0.4);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.avatar-image {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
position: relative;
|
|||
|
|
z-index: 10;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.avatar-text {
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
font-weight: 700;
|
|||
|
|
color: white;
|
|||
|
|
text-transform: uppercase;
|
|||
|
|
text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
|
|||
|
|
letter-spacing: 1rpx;
|
|||
|
|
z-index: 2;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 🎯 方向小针指示器 */
|
|||
|
|
.online-dot {
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: -8rpx;
|
|||
|
|
right: -8rpx;
|
|||
|
|
width: 40rpx;
|
|||
|
|
height: 40rpx;
|
|||
|
|
background: url('/images/map/maker_position.png') no-repeat center center;
|
|||
|
|
background-size: contain;
|
|||
|
|
transform-origin: 50% 50%;
|
|||
|
|
z-index: 3;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 方向针样式设置完成 */
|
|||
|
|
|
|||
|
|
/* 右侧功能按钮组 */
|
|||
|
|
.right-controls {
|
|||
|
|
position: absolute;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 12px;
|
|||
|
|
z-index: 50;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.control-btn {
|
|||
|
|
width: 44px;
|
|||
|
|
height: 44px;
|
|||
|
|
background: rgba(255, 255, 255, 0.95);
|
|||
|
|
backdrop-filter: blur(20px);
|
|||
|
|
border-radius: 22px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
|||
|
|
border: 1px solid rgba(255, 255, 255, 0.8);
|
|||
|
|
transition: all 0.2s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.control-btn:active {
|
|||
|
|
transform: scale(0.95);
|
|||
|
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn-icon {
|
|||
|
|
font-size: 18px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.refresh-icon {
|
|||
|
|
transition: transform 0.3s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.refresh-btn:active .refresh-icon {
|
|||
|
|
transform: rotate(180deg);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 底部定位按钮 - 新增 */
|
|||
|
|
.location-btn {
|
|||
|
|
position: absolute;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translateX(-50%);
|
|||
|
|
z-index: 60;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-btn-inner {
|
|||
|
|
width: 40px;
|
|||
|
|
height: 40px;
|
|||
|
|
background: #41414149;
|
|||
|
|
backdrop-filter: blur(20px);
|
|||
|
|
border-radius: 50%;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
position: relative;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-btn:active .location-btn-inner {
|
|||
|
|
transform: scale(0.95);
|
|||
|
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-btn .location-btn-inner .location-icon {
|
|||
|
|
position: relative;
|
|||
|
|
z-index: 2;
|
|||
|
|
animation: none;
|
|||
|
|
width: 32px;
|
|||
|
|
height: 32px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-btn .location-btn-inner .location-icon image {
|
|||
|
|
width: 22px;
|
|||
|
|
height: 22px;
|
|||
|
|
display: block;
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 0;
|
|||
|
|
filter: brightness(0) invert(1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-ripple {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 50%;
|
|||
|
|
left: 50%;
|
|||
|
|
width: 0;
|
|||
|
|
height: 0;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background: rgba(102, 126, 234, 0.3);
|
|||
|
|
transform: translate(-50%, -50%);
|
|||
|
|
animation: location-ripple 2s ease-in-out infinite;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes location-ripple {
|
|||
|
|
0% {
|
|||
|
|
width: 0;
|
|||
|
|
height: 0;
|
|||
|
|
opacity: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
100% {
|
|||
|
|
width: 80px;
|
|||
|
|
height: 80px;
|
|||
|
|
opacity: 0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 地图动态浮层 */
|
|||
|
|
.feed-bubble-overlay {
|
|||
|
|
position: absolute;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
z-index: 1200;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.feed-bubble-card {
|
|||
|
|
position: relative;
|
|||
|
|
width: calc(100% - 160rpx);
|
|||
|
|
max-width: 700rpx;
|
|||
|
|
padding: 32rpx 32rpx 28rpx;
|
|||
|
|
border-radius: 36rpx;
|
|||
|
|
background: rgba(24, 26, 36, 0.88);
|
|||
|
|
color: #ffffff;
|
|||
|
|
box-shadow: 0 28rpx 60rpx rgba(0, 0, 0, 0.35);
|
|||
|
|
backdrop-filter: blur(28rpx);
|
|||
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.feed-bubble-card.sunset {
|
|||
|
|
background: linear-gradient(160deg, rgba(59, 31, 99, 0.92), rgba(226, 92, 121, 0.85));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.feed-bubble-card.ocean {
|
|||
|
|
background: linear-gradient(160deg, rgba(26, 61, 110, 0.9), rgba(66, 185, 208, 0.82));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.feed-bubble-handle {
|
|||
|
|
width: 88rpx;
|
|||
|
|
height: 8rpx;
|
|||
|
|
border-radius: 999rpx;
|
|||
|
|
background: rgba(255, 255, 255, 0.28);
|
|||
|
|
margin: 0 auto 26rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.feed-bubble-header {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
gap: 24rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.feed-bubble-title-block {
|
|||
|
|
flex: 1;
|
|||
|
|
min-width: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.feed-bubble-title {
|
|||
|
|
display: block;
|
|||
|
|
font-size: 36rpx;
|
|||
|
|
font-weight: 600;
|
|||
|
|
letter-spacing: 1rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.feed-bubble-subtitle {
|
|||
|
|
display: block;
|
|||
|
|
margin-top: 8rpx;
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
color: rgba(255, 255, 255, 0.75);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.feed-bubble-chip-group {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 16rpx;
|
|||
|
|
align-items: flex-end;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.feed-bubble-chip {
|
|||
|
|
padding: 6rpx 20rpx;
|
|||
|
|
border-radius: 999rpx;
|
|||
|
|
background: rgba(255, 255, 255, 0.2);
|
|||
|
|
font-size: 22rpx;
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.feed-bubble-chip.heat {
|
|||
|
|
background: rgba(255, 194, 140, 0.24);
|
|||
|
|
color: #ffe9db;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.feed-bubble-close {
|
|||
|
|
/* 调整位置到右上角 */
|
|||
|
|
position: absolute;
|
|||
|
|
top: 1px;
|
|||
|
|
right: 1px;
|
|||
|
|
|
|||
|
|
/* 扩大点击区域 */
|
|||
|
|
width: 50px;
|
|||
|
|
height: 50px;
|
|||
|
|
|
|||
|
|
/* 保持图标居中 */
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
|
|||
|
|
/* 原有样式保留 */
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: rgba(255, 255, 255, 0.6);
|
|||
|
|
|
|||
|
|
/* 可选：添加点击反馈 */
|
|||
|
|
border-radius: 50%;
|
|||
|
|
transition: background-color 0.2s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
.feed-bubble-close:active {
|
|||
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
.feed-bubble-meta {
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
gap: 32rpx;
|
|||
|
|
margin: 28rpx 0 12rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.feed-bubble-meta-item {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
min-width: 140rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.feed-bubble-meta-label {
|
|||
|
|
font-size: 22rpx;
|
|||
|
|
color: rgba(255, 255, 255, 0.6);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.feed-bubble-meta-value {
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
font-weight: 500;
|
|||
|
|
margin-top: 6rpx;
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.feed-bubble-loading,
|
|||
|
|
.feed-bubble-empty {
|
|||
|
|
text-align: center;
|
|||
|
|
padding: 48rpx 0;
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
color: rgba(255, 255, 255, 0.75);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.feed-bubble-scroll {
|
|||
|
|
margin: 6rpx 0 18rpx;
|
|||
|
|
padding-bottom: 6rpx;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.feed-bubble-card-item {
|
|||
|
|
position: relative;
|
|||
|
|
width: 220rpx;
|
|||
|
|
height: 200rpx;
|
|||
|
|
border-radius: 26rpx;
|
|||
|
|
overflow: hidden;
|
|||
|
|
margin-right: 24rpx;
|
|||
|
|
flex: 0 0 auto;
|
|||
|
|
display: inline-block;
|
|||
|
|
background: rgba(255, 255, 255, 0.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.feed-bubble-card-thumb {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.feed-bubble-card-gradient {
|
|||
|
|
position: absolute;
|
|||
|
|
inset: 0;
|
|||
|
|
background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 10%, rgba(0, 0, 0, 0.75) 90%);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.feed-bubble-card-info {
|
|||
|
|
position: absolute;
|
|||
|
|
left: 18rpx;
|
|||
|
|
right: 18rpx;
|
|||
|
|
bottom: 18rpx;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 6rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.feed-bubble-card-title {
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #ffffff;
|
|||
|
|
white-space: normal;
|
|||
|
|
line-height: 1.34;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.feed-bubble-card-desc {
|
|||
|
|
font-size: 22rpx;
|
|||
|
|
color: rgba(255, 255, 255, 0.75);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.feed-bubble-actions {
|
|||
|
|
margin-top: 12rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.feed-bubble-action {
|
|||
|
|
width: 100%;
|
|||
|
|
text-align: center;
|
|||
|
|
padding: 22rpx 0;
|
|||
|
|
border-radius: 999rpx;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
font-weight: 600;
|
|||
|
|
letter-spacing: 1rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.feed-bubble-action.primary {
|
|||
|
|
background: linear-gradient(135deg, rgba(92, 124, 255, 0.95), rgba(72, 200, 255, 0.95));
|
|||
|
|
color: #ffffff;
|
|||
|
|
box-shadow: 0 16rpx 28rpx rgba(86, 143, 255, 0.35);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.feed-bubble-action:active {
|
|||
|
|
opacity: 0.86;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.feed-bubble-tip {
|
|||
|
|
margin-top: 18rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
font-size: 22rpx;
|
|||
|
|
color: rgba(255, 255, 255, 0.55);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 用户详情卡片 - 现代化设计 */
|
|||
|
|
.user-card {
|
|||
|
|
position: absolute;
|
|||
|
|
left: 16px;
|
|||
|
|
right: 16px;
|
|||
|
|
background: rgba(0, 0, 0, 0.95);
|
|||
|
|
backdrop-filter: blur(20px);
|
|||
|
|
border-radius: 20px;
|
|||
|
|
padding: 20px;
|
|||
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
|
|||
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|||
|
|
transform: translateY(100%);
|
|||
|
|
opacity: 0;
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
z-index: 100000;
|
|||
|
|
/* 高于相机按钮 */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.user-card.show {
|
|||
|
|
transform: translateY(0);
|
|||
|
|
opacity: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 已移除上沿彩条 */
|
|||
|
|
.card-backdrop {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-header {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-avatar {
|
|||
|
|
width: 48px;
|
|||
|
|
height: 48px;
|
|||
|
|
background: linear-gradient(23deg, #68F9FE 0%, #AA93ED 100%);
|
|||
|
|
border-radius: 12px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
margin-right: 12px;
|
|||
|
|
box-shadow: 0 4px 16px rgba(104, 249, 254, 0.3);
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
.card-avatar-url {
|
|||
|
|
margin-right: 12px;
|
|||
|
|
width: 48px;
|
|||
|
|
height: 48px;
|
|||
|
|
border-radius: 24px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
background: #f0f0f0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.avatar-img {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
object-fit: cover; /* 保持比例并裁剪多余部分 */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
/* 用户头像样式 */
|
|||
|
|
.card-avatar image {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
display: block;
|
|||
|
|
object-fit: cover;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* POI地点头像样式 - 与其他按钮统一渐变 */
|
|||
|
|
.card-avatar.poi-avatar {
|
|||
|
|
background: linear-gradient(23deg, #68F9FE 0%, #AA93ED 100%);
|
|||
|
|
box-shadow: 0 4px 16px rgba(104, 249, 254, 0.3);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-avatar-text {
|
|||
|
|
color: white;
|
|||
|
|
font-size: 18px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-info {
|
|||
|
|
flex: 1;
|
|||
|
|
min-width: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-name {
|
|||
|
|
font-size: 18px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #fff;
|
|||
|
|
margin-bottom: 4px;
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
.image-getaddress {
|
|||
|
|
margin-top: 20px;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 35px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-distance {
|
|||
|
|
font-size: 13px;
|
|||
|
|
color: #ccc;
|
|||
|
|
margin-bottom: 4px;
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-status {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 4px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.status-dot {
|
|||
|
|
width: 8px;
|
|||
|
|
height: 8px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background: #2ed573;
|
|||
|
|
animation: pulse 2s ease-in-out infinite;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes pulse {
|
|||
|
|
|
|||
|
|
0%,
|
|||
|
|
100% {
|
|||
|
|
opacity: 1;
|
|||
|
|
transform: scale(1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
50% {
|
|||
|
|
opacity: 0.7;
|
|||
|
|
transform: scale(1.2);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.status-text {
|
|||
|
|
font-size: 11px;
|
|||
|
|
color: #2ed573;
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-close {
|
|||
|
|
width: 32px;
|
|||
|
|
height: 32px;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
background: rgba(255, 255, 255, 0.1);
|
|||
|
|
transition: all 0.2s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-close:active {
|
|||
|
|
background: rgba(255, 255, 255, 0.2);
|
|||
|
|
transform: scale(0.9);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.close-icon {
|
|||
|
|
font-size: 16px;
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-actions {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 12px;
|
|||
|
|
padding-top: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 统一按钮样式 - 与发起群聊页面确定按钮风格一致 */
|
|||
|
|
.action-btn {
|
|||
|
|
flex: 1;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
/* 修改为水平排列 */
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
gap: 6px;
|
|||
|
|
padding: 12px 8px;
|
|||
|
|
/* 调整为更适合水平排列的内边距 */
|
|||
|
|
border-radius: 16px;
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
position: relative;
|
|||
|
|
overflow: hidden;
|
|||
|
|
background: linear-gradient(23deg, #68F9FE 0%, #AA93ED 100%);
|
|||
|
|
border: 1px solid rgba(104, 249, 254, 0.7);
|
|||
|
|
box-shadow: 0 6px 16px rgba(104, 249, 254, 0.3);
|
|||
|
|
/* 增强阴影效果 */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.action-btn-share {
|
|||
|
|
/* 1. 清除按钮自身基础样式 */
|
|||
|
|
border: none;
|
|||
|
|
/* 去除边框 */
|
|||
|
|
background-color: transparent;
|
|||
|
|
/* 背景色设为透明 */
|
|||
|
|
padding: 0;
|
|||
|
|
/* 清除内边距 */
|
|||
|
|
margin: 0;
|
|||
|
|
/* 清除外边距 */
|
|||
|
|
border-radius: 0;
|
|||
|
|
/* 可选，去除圆角 */
|
|||
|
|
line-height: 1;
|
|||
|
|
/* 调整行高，避免额外空间 */
|
|||
|
|
|
|||
|
|
/* 2. 设置按钮尺寸（或由内容决定） */
|
|||
|
|
display: inline-block;
|
|||
|
|
/* 使按钮尺寸由内容撑开 */
|
|||
|
|
width: auto;
|
|||
|
|
height: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 3. 【关键】清除小程序按钮独特的伪元素边框 */
|
|||
|
|
.action-btn-share::after {
|
|||
|
|
border: none !important;
|
|||
|
|
/* 必须使用 !important 确保覆盖默认样式 */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 4. 设置按钮内部图片的样式 */
|
|||
|
|
.action-btn-share image {
|
|||
|
|
display: block;
|
|||
|
|
/* 消除图片底部的空隙 */
|
|||
|
|
width: 80rpx;
|
|||
|
|
/* 请根据您的图片尺寸和设计需求调整宽度 */
|
|||
|
|
height: 100rpx;
|
|||
|
|
/* 请根据您的图片尺寸和设计需求调整高度 */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
/* 渐变背景增强 */
|
|||
|
|
.action-btn::before {
|
|||
|
|
content: '';
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
background: linear-gradient(23deg, #68F9FE 0%, #AA93ED 100%);
|
|||
|
|
z-index: -1;
|
|||
|
|
opacity: 0.8;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.action-btn:active {
|
|||
|
|
transform: scale(0.98);
|
|||
|
|
box-shadow: 0 2px 8px rgba(104, 249, 254, 0.3);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 确保所有按钮使用相同的渐变背景 */
|
|||
|
|
.chat-btn,
|
|||
|
|
.add-btn,
|
|||
|
|
.profile-btn {
|
|||
|
|
/* 继承基础action-btn样式，不再重复定义渐变背景 */
|
|||
|
|
box-shadow: 0 6px 16px rgba(104, 249, 254, 0.3);
|
|||
|
|
/* 确保与基础按钮相同的阴影效果 */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 点击效果优化 */
|
|||
|
|
.chat-btn:active,
|
|||
|
|
.add-btn:active,
|
|||
|
|
.profile-btn:active {
|
|||
|
|
transform: scale(0.96);
|
|||
|
|
/* 更强的缩放效果 */
|
|||
|
|
box-shadow: 0 3px 8px rgba(104, 249, 254, 0.4);
|
|||
|
|
/* 点击时的阴影变化 */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
.action-text {
|
|||
|
|
font-size: 13px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #000000;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 浮动通知 */
|
|||
|
|
.floating-notifications {
|
|||
|
|
position: absolute;
|
|||
|
|
z-index: 90;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.notification-item {
|
|||
|
|
background: rgba(255, 255, 255, 0.95);
|
|||
|
|
padding: 12rpx 20rpx;
|
|||
|
|
border-radius: 32rpx;
|
|||
|
|
backdrop-filter: blur(20rpx);
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 12rpx;
|
|||
|
|
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
|
|||
|
|
margin-bottom: 12rpx;
|
|||
|
|
animation: slide-in-left 0.3s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.notification-icon {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.notification-text {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #2c3e50;
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes slide-in-left {
|
|||
|
|
from {
|
|||
|
|
transform: translateX(-100%);
|
|||
|
|
opacity: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
to {
|
|||
|
|
transform: translateX(0);
|
|||
|
|
opacity: 1;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 加载提示 - 优化设计 */
|
|||
|
|
.loading-overlay {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
z-index: 100;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.loading-content {
|
|||
|
|
text-align: center;
|
|||
|
|
color: white;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.loading-spinner {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.spinner-ring {
|
|||
|
|
width: 20px;
|
|||
|
|
height: 20px;
|
|||
|
|
border: 2px solid rgba(255, 255, 255, 0.3);
|
|||
|
|
border-top: 2px solid white;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
margin: 0 3px;
|
|||
|
|
animation: spin 1s linear infinite;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.spinner-ring:nth-child(2) {
|
|||
|
|
animation-delay: 0.1s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.spinner-ring:nth-child(3) {
|
|||
|
|
animation-delay: 0.2s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes spin {
|
|||
|
|
0% {
|
|||
|
|
transform: rotate(0deg);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
100% {
|
|||
|
|
transform: rotate(360deg);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.loading-text {
|
|||
|
|
font-size: 16px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
margin-bottom: 8px;
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.loading-subtitle {
|
|||
|
|
font-size: 13px;
|
|||
|
|
opacity: 0.8;
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 响应式设计 */
|
|||
|
|
@media (max-width: 375px) {
|
|||
|
|
.right-controls {
|
|||
|
|
right: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.control-btn {
|
|||
|
|
width: 40px;
|
|||
|
|
height: 40px;
|
|||
|
|
border-radius: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn-icon {
|
|||
|
|
font-size: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-btn-inner {
|
|||
|
|
width: 52px;
|
|||
|
|
height: 52px;
|
|||
|
|
border-radius: 26px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-btn .location-icon {
|
|||
|
|
font-size: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.user-card {
|
|||
|
|
left: 12px;
|
|||
|
|
right: 12px;
|
|||
|
|
padding: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-avatar {
|
|||
|
|
width: 44px;
|
|||
|
|
height: 44px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-avatar-text {
|
|||
|
|
font-size: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.action-btn {
|
|||
|
|
padding: 10px 6px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 深色模式支持 */
|
|||
|
|
@media (prefers-color-scheme: dark) {
|
|||
|
|
|
|||
|
|
.control-btn,
|
|||
|
|
.location-btn-inner,
|
|||
|
|
.user-card {
|
|||
|
|
background: rgba(42, 42, 42, 0.95);
|
|||
|
|
border-color: rgba(255, 255, 255, 0.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-name {
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-distance,
|
|||
|
|
.close-icon,
|
|||
|
|
.action-text {
|
|||
|
|
color: #ccc;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-close {
|
|||
|
|
background: rgba(255, 255, 255, 0.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-close:active {
|
|||
|
|
background: rgba(255, 255, 255, 0.2);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 🔥 ===== 新增浮动UI样式 ===== */
|
|||
|
|
|
|||
|
|
/* 浮动头像 */
|
|||
|
|
.floating-avatar {
|
|||
|
|
position: fixed;
|
|||
|
|
right: 32rpx;
|
|||
|
|
z-index: 1000;
|
|||
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.floating-avatar:active {
|
|||
|
|
transform: scale(0.95);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.floating-avatar .avatar-container {
|
|||
|
|
width: 96rpx;
|
|||
|
|
height: 96rpx;
|
|||
|
|
position: relative;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
overflow: hidden;
|
|||
|
|
box-shadow: 0 8rpx 32rpx rgba(102, 126, 234, 0.4);
|
|||
|
|
border: 6rpx solid rgba(255, 255, 255, 0.95);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.floating-avatar .user-avatar {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.floating-avatar .avatar-ring {
|
|||
|
|
position: absolute;
|
|||
|
|
top: -6rpx;
|
|||
|
|
left: -6rpx;
|
|||
|
|
right: -6rpx;
|
|||
|
|
bottom: -6rpx;
|
|||
|
|
border: 4rpx solid transparent;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background: linear-gradient(45deg, #667eea, #764ba2, #f093fb);
|
|||
|
|
background-clip: border-box;
|
|||
|
|
animation: avatar-ring-rotate 3s linear infinite;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes avatar-ring-rotate {
|
|||
|
|
0% {
|
|||
|
|
transform: rotate(0deg);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
100% {
|
|||
|
|
transform: rotate(360deg);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.floating-avatar .online-indicator {
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 8rpx;
|
|||
|
|
right: 8rpx;
|
|||
|
|
width: 24rpx;
|
|||
|
|
height: 24rpx;
|
|||
|
|
background: #27ae60;
|
|||
|
|
border: 4rpx solid white;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
|
|||
|
|
animation: online-pulse 2s ease-in-out infinite;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes online-pulse {
|
|||
|
|
|
|||
|
|
0%,
|
|||
|
|
100% {
|
|||
|
|
transform: scale(1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
50% {
|
|||
|
|
transform: scale(1.1);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 底部浮动按钮组 */
|
|||
|
|
.floating-buttons {
|
|||
|
|
position: fixed;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translateX(-50%);
|
|||
|
|
display: flex;
|
|||
|
|
gap: 24rpx;
|
|||
|
|
z-index: 1000;
|
|||
|
|
background: rgba(255, 255, 255, 0.95);
|
|||
|
|
backdrop-filter: blur(20rpx);
|
|||
|
|
border-radius: 40rpx;
|
|||
|
|
padding: 16rpx 40rpx;
|
|||
|
|
box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.05);
|
|||
|
|
border: 2rpx solid rgba(255, 255, 255, 0.8);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.floating-btn {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 8rpx;
|
|||
|
|
padding: 12rpx 24rpx;
|
|||
|
|
background: transparent;
|
|||
|
|
border-radius: 32rpx;
|
|||
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|||
|
|
position: relative;
|
|||
|
|
overflow: hidden;
|
|||
|
|
min-width: 100rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.floating-btn:active {
|
|||
|
|
transform: scale(0.95);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.floating-btn::before {
|
|||
|
|
content: '';
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
|
|||
|
|
opacity: 0;
|
|||
|
|
transition: opacity 0.3s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.floating-btn:active::before {
|
|||
|
|
opacity: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.floating-btn .btn-icon {
|
|||
|
|
position: relative;
|
|||
|
|
width: 56rpx;
|
|||
|
|
height: 56rpx;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
background: #667eea;
|
|||
|
|
box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.2);
|
|||
|
|
z-index: 2;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.floating-btn .icon-emoji {
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
color: white;
|
|||
|
|
filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.2));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 移除图标光晕效果 */
|
|||
|
|
|
|||
|
|
/* 移除光晕动画 */
|
|||
|
|
|
|||
|
|
.floating-btn .btn-label {
|
|||
|
|
font-size: 22rpx;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #333;
|
|||
|
|
z-index: 2;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 🎨 现代化通知徽章 */
|
|||
|
|
.floating-btn .notification-badge {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 8rpx;
|
|||
|
|
right: 8rpx;
|
|||
|
|
min-width: 40rpx;
|
|||
|
|
height: 40rpx;
|
|||
|
|
background: linear-gradient(145deg, #FF6B6B 0%, #FF8E8E 100%);
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
border: 3rpx solid rgba(255, 255, 255, 0.9);
|
|||
|
|
box-shadow:
|
|||
|
|
0 6rpx 20rpx rgba(255, 107, 107, 0.4),
|
|||
|
|
0 2rpx 8rpx rgba(255, 107, 107, 0.3),
|
|||
|
|
inset 0 1rpx 0 rgba(255, 255, 255, 0.3);
|
|||
|
|
z-index: 3;
|
|||
|
|
animation: badgePulse 2s ease-in-out infinite;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes badgePulse {
|
|||
|
|
|
|||
|
|
0%,
|
|||
|
|
100% {
|
|||
|
|
transform: scale(1);
|
|||
|
|
box-shadow:
|
|||
|
|
0 6rpx 20rpx rgba(255, 107, 107, 0.4),
|
|||
|
|
0 2rpx 8rpx rgba(255, 107, 107, 0.3),
|
|||
|
|
inset 0 1rpx 0 rgba(255, 255, 255, 0.3);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
50% {
|
|||
|
|
transform: scale(1.1);
|
|||
|
|
box-shadow:
|
|||
|
|
0 8rpx 24rpx rgba(255, 107, 107, 0.5),
|
|||
|
|
0 3rpx 12rpx rgba(255, 107, 107, 0.4),
|
|||
|
|
inset 0 1rpx 0 rgba(255, 255, 255, 0.4);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.floating-btn .badge-text {
|
|||
|
|
font-size: 20rpx;
|
|||
|
|
font-weight: 700;
|
|||
|
|
color: white;
|
|||
|
|
line-height: 1;
|
|||
|
|
padding: 0 6rpx;
|
|||
|
|
text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.2);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 按钮特定样式 */
|
|||
|
|
.friends-btn .btn-icon {
|
|||
|
|
background: #2ed573;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.messages-btn .btn-icon {
|
|||
|
|
background: #667eea;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 地点按钮 - 当前选中状态 */
|
|||
|
|
.floating-btn.messages-btn:nth-child(3) .btn-icon {
|
|||
|
|
background: #ff9500;
|
|||
|
|
box-shadow: 0 4rpx 16rpx rgba(255, 149, 0, 0.3);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 侧边操作按钮 */
|
|||
|
|
.side-actions,
|
|||
|
|
.right-actions {
|
|||
|
|
position: fixed;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 24rpx;
|
|||
|
|
z-index: 900;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.side-actions {
|
|||
|
|
left: 32rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.right-actions {
|
|||
|
|
right: 32rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.action-btn {
|
|||
|
|
width: 88rpx;
|
|||
|
|
height: 88rpx;
|
|||
|
|
background: rgba(255, 255, 255, 0.95);
|
|||
|
|
backdrop-filter: blur(20rpx);
|
|||
|
|
border-radius: 50%;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
box-shadow: 0 6rpx 24rpx rgba(0, 0, 0, 0.12);
|
|||
|
|
border: 2rpx solid rgba(255, 255, 255, 0.8);
|
|||
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|||
|
|
position: relative;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.action-btn:active {
|
|||
|
|
transform: scale(0.9);
|
|||
|
|
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.16);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.action-btn .action-icon {
|
|||
|
|
font-size: 36rpx;
|
|||
|
|
filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.1));
|
|||
|
|
z-index: 2;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.action-btn .btn-ripple {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 50%;
|
|||
|
|
left: 50%;
|
|||
|
|
width: 0;
|
|||
|
|
height: 0;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background: rgba(102, 126, 234, 0.2);
|
|||
|
|
transform: translate(-50%, -50%);
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.action-btn:active .btn-ripple {
|
|||
|
|
width: 120rpx;
|
|||
|
|
height: 120rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 特定按钮样式 */
|
|||
|
|
.location-btn .action-icon {
|
|||
|
|
color: #667eea;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.layer-btn .action-icon {
|
|||
|
|
color: #2ed573;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.search-btn .action-icon {
|
|||
|
|
color: #ff9500;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.nearby-btn .action-icon {
|
|||
|
|
color: #ff6b6b;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.post-btn .action-icon {
|
|||
|
|
color: #a55eea;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.nearby-count {
|
|||
|
|
position: absolute;
|
|||
|
|
top: -8rpx;
|
|||
|
|
right: -8rpx;
|
|||
|
|
min-width: 32rpx;
|
|||
|
|
height: 32rpx;
|
|||
|
|
background: #ff4757;
|
|||
|
|
border-radius: 16rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
font-size: 18rpx;
|
|||
|
|
font-weight: 700;
|
|||
|
|
color: white;
|
|||
|
|
border: 3rpx solid white;
|
|||
|
|
box-shadow: 0 4rpx 12rpx rgba(255, 71, 87, 0.4);
|
|||
|
|
z-index: 3;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 响应式适配 */
|
|||
|
|
@media (max-width: 375px) {
|
|||
|
|
.floating-avatar {
|
|||
|
|
right: 24rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.floating-avatar .avatar-container {
|
|||
|
|
width: 80rpx;
|
|||
|
|
height: 80rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.floating-buttons {
|
|||
|
|
gap: 24rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.floating-btn {
|
|||
|
|
padding: 20rpx;
|
|||
|
|
min-width: 100rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.floating-btn .btn-icon {
|
|||
|
|
width: 56rpx;
|
|||
|
|
height: 56rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.floating-btn .icon-emoji {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.side-actions,
|
|||
|
|
.right-actions {
|
|||
|
|
gap: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.side-actions {
|
|||
|
|
left: 24rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.right-actions {
|
|||
|
|
right: 24rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.action-btn {
|
|||
|
|
width: 72rpx;
|
|||
|
|
height: 72rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.action-btn .action-icon {
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 🔥 ===== 新增样式 ===== */
|
|||
|
|
|
|||
|
|
/* 用户头像通知小红点 */
|
|||
|
|
.user-avatar .notification-dot {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 8rpx;
|
|||
|
|
right: 8rpx;
|
|||
|
|
width: 16rpx;
|
|||
|
|
height: 16rpx;
|
|||
|
|
background: #ff4757;
|
|||
|
|
border: 3rpx solid white;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
box-shadow: 0 4rpx 12rpx rgba(255, 71, 87, 0.4);
|
|||
|
|
z-index: 10;
|
|||
|
|
animation: notification-pulse 2s ease-in-out infinite;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes notification-pulse {
|
|||
|
|
|
|||
|
|
0%,
|
|||
|
|
100% {
|
|||
|
|
transform: scale(1);
|
|||
|
|
opacity: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
50% {
|
|||
|
|
transform: scale(1.2);
|
|||
|
|
opacity: 0.8;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 附近的人数量显示 */
|
|||
|
|
.right-controls .nearby-count {
|
|||
|
|
position: absolute;
|
|||
|
|
top: -8rpx;
|
|||
|
|
right: -8rpx;
|
|||
|
|
min-width: 32rpx;
|
|||
|
|
height: 32rpx;
|
|||
|
|
background: #ff4757;
|
|||
|
|
border-radius: 16rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
font-size: 18rpx;
|
|||
|
|
font-weight: 700;
|
|||
|
|
color: white;
|
|||
|
|
border: 3rpx solid white;
|
|||
|
|
box-shadow: 0 4rpx 12rpx rgba(255, 71, 87, 0.4);
|
|||
|
|
z-index: 3;
|
|||
|
|
padding: 0 6rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 附近的人按钮样式 */
|
|||
|
|
.right-controls .nearby-btn {
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.right-controls .nearby-icon {
|
|||
|
|
font-size: 20px;
|
|||
|
|
color: #ff6b6b;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 深色模式适配 */
|
|||
|
|
@media (prefers-color-scheme: dark) {
|
|||
|
|
|
|||
|
|
.floating-btn,
|
|||
|
|
.action-btn {
|
|||
|
|
background: rgba(42, 42, 42, 0.95);
|
|||
|
|
border-color: rgba(255, 255, 255, 0.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.floating-btn .btn-label {
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.floating-avatar .avatar-container {
|
|||
|
|
border-color: rgba(42, 42, 42, 0.95);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.user-avatar .notification-dot,
|
|||
|
|
.nearby-count {
|
|||
|
|
border-color: rgba(42, 42, 42, 0.95);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 📱 响应式设计 - 现代化导航适配 */
|
|||
|
|
@media screen and (max-width: 375px) {
|
|||
|
|
|
|||
|
|
/* 小屏幕适配 */
|
|||
|
|
.floating-buttons {
|
|||
|
|
gap: 32rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.floating-btn {
|
|||
|
|
min-width: 120rpx;
|
|||
|
|
padding: 24rpx 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.floating-btn .btn-icon {
|
|||
|
|
width: 64rpx;
|
|||
|
|
height: 64rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.floating-btn .icon-emoji {
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.floating-btn .btn-label {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.avatar-container {
|
|||
|
|
width: 80rpx;
|
|||
|
|
height: 80rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.avatar-text {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.online-dot {
|
|||
|
|
width: 20rpx;
|
|||
|
|
height: 20rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media screen and (min-width: 414px) {
|
|||
|
|
|
|||
|
|
/* 大屏幕优化 */
|
|||
|
|
.floating-buttons {
|
|||
|
|
gap: 48rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.floating-btn {
|
|||
|
|
min-width: 160rpx;
|
|||
|
|
padding: 32rpx 28rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.floating-btn .btn-icon {
|
|||
|
|
width: 80rpx;
|
|||
|
|
height: 80rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.floating-btn .icon-emoji {
|
|||
|
|
font-size: 40rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.floating-btn .btn-label {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.avatar-container {
|
|||
|
|
width: 96rpx;
|
|||
|
|
height: 96rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.avatar-text {
|
|||
|
|
font-size: 36rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.online-dot {
|
|||
|
|
width: 28rpx;
|
|||
|
|
height: 28rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 🎨 特殊设备适配 */
|
|||
|
|
@media screen and (max-height: 667px) {
|
|||
|
|
|
|||
|
|
/* iPhone SE等小屏设备 */
|
|||
|
|
.floating-buttons {
|
|||
|
|
bottom: calc(env(safe-area-inset-bottom) + 32rpx) !important;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media screen and (min-height: 812px) {
|
|||
|
|
|
|||
|
|
/* iPhone X及以上设备 */
|
|||
|
|
.floating-buttons {
|
|||
|
|
bottom: calc(env(safe-area-inset-bottom) + 48rpx) !important;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 🎨 横屏适配 */
|
|||
|
|
@media screen and (orientation: landscape) {
|
|||
|
|
.floating-buttons {
|
|||
|
|
gap: 24rpx;
|
|||
|
|
bottom: calc(env(safe-area-inset-bottom) + 24rpx) !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.floating-btn {
|
|||
|
|
min-width: 100rpx;
|
|||
|
|
padding: 20rpx 16rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.floating-btn .btn-label {
|
|||
|
|
font-size: 22rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.avatar-container {
|
|||
|
|
width: 72rpx;
|
|||
|
|
height: 72rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.avatar-text {
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.remind-slider-block {
|
|||
|
|
margin: 18px 0 8px 0;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.remind-label {
|
|||
|
|
font-size: 15px;
|
|||
|
|
color: #333;
|
|||
|
|
margin-right: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.remind-value {
|
|||
|
|
font-size: 15px;
|
|||
|
|
color: #667eea;
|
|||
|
|
margin-left: 8px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.remind-desc {
|
|||
|
|
font-size: 13px;
|
|||
|
|
color: #888;
|
|||
|
|
margin-top: 8px;
|
|||
|
|
text-align: left;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.remind-title-block {
|
|||
|
|
margin-bottom: 8px;
|
|||
|
|
text-align: left;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.remind-title {
|
|||
|
|
font-size: 18px;
|
|||
|
|
font-weight: 700;
|
|||
|
|
color: #333;
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.remind-subtitle {
|
|||
|
|
font-size: 13px;
|
|||
|
|
color: #888;
|
|||
|
|
margin-top: 2px;
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.remind-friends-mode-row {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: flex-end;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
gap: 12px;
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.remind-friends-block {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
gap: 4px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.remind-friends-avatars {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 4px;
|
|||
|
|
margin-top: 2px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.avatar-placeholder {
|
|||
|
|
background: #f0f0f0;
|
|||
|
|
color: #bbb;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.remind-mode-block {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.remind-mode-radio {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.remind-mode-label {
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #333;
|
|||
|
|
margin-right: 8px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 2px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.remind-value.highlight {
|
|||
|
|
color: #ff9500;
|
|||
|
|
font-size: 17px;
|
|||
|
|
font-weight: 700;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.remind-mode-checkbox {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 好友选择弹窗样式 */
|
|||
|
|
.friend-select-modal {
|
|||
|
|
z-index: 20000;
|
|||
|
|
position: fixed;
|
|||
|
|
left: 0;
|
|||
|
|
top: 0;
|
|||
|
|
right: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
background: rgba(0, 0, 0, 0.45);
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.friend-select-content {
|
|||
|
|
background: #fff;
|
|||
|
|
border-radius: 18px;
|
|||
|
|
width: 320px;
|
|||
|
|
max-width: 90vw;
|
|||
|
|
max-height: 70vh;
|
|||
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: stretch;
|
|||
|
|
padding: 20px 16px 12px 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.friend-select-header {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
margin-bottom: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.friend-select-title {
|
|||
|
|
font-size: 18px;
|
|||
|
|
font-weight: 700;
|
|||
|
|
color: #333;
|
|||
|
|
flex: 1;
|
|||
|
|
text-align: left;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.friend-select-close {
|
|||
|
|
font-size: 22px;
|
|||
|
|
color: #888;
|
|||
|
|
padding: 0 8px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: color 0.2s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.friend-select-close:active {
|
|||
|
|
color: #ff4757;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
/* 好友选择弹窗美化 */
|
|||
|
|
.share-friends-list {
|
|||
|
|
/* 确保滚动容器有足够内边距，避免内容贴边 */
|
|||
|
|
padding: 0 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.friend-list-scroll {
|
|||
|
|
max-height: 45vh;
|
|||
|
|
padding-bottom: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.result-info-title {
|
|||
|
|
color: #fff;
|
|||
|
|
margin-top: 20px;
|
|||
|
|
padding: 0 10px;
|
|||
|
|
/* 与内容区对齐 */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.friend-item {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 10px;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
margin-bottom: 8px;
|
|||
|
|
background: transparent;
|
|||
|
|
position: relative;
|
|||
|
|
cursor: pointer;
|
|||
|
|
/* 关键：使用justify-content: space-between实现两端对齐 */
|
|||
|
|
justify-content: space-between;
|
|||
|
|
/* 固定左右内边距，确保文字长时两侧距离相等 */
|
|||
|
|
margin-left: auto;
|
|||
|
|
margin-right: auto;
|
|||
|
|
width: calc(100% - 20px);
|
|||
|
|
/* 减去左右间距，确保居中对齐 */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 增加交互反馈 */
|
|||
|
|
.friend-item:hover {
|
|||
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.friend-avatar {
|
|||
|
|
width: 80px;
|
|||
|
|
height: 80px;
|
|||
|
|
border-radius: 10%;
|
|||
|
|
/* 取消底部margin，改为右侧margin与文字分隔 */
|
|||
|
|
margin-right: 15px;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
/* 头像不压缩 */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.friend-name {
|
|||
|
|
/* 使用rpx保持移动端适配一致性 */
|
|||
|
|
width: 70px;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #fff;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
/* 关键：文字区域自适应，通过容器padding控制两侧距离 */
|
|||
|
|
padding-right: 15px;
|
|||
|
|
/* 与头像左侧间距保持一致 */
|
|||
|
|
flex-grow: 1;
|
|||
|
|
/* 文字区域占满剩余空间 */
|
|||
|
|
text-align: left;
|
|||
|
|
/* 确保文字左对齐 */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
.friend-item:active {
|
|||
|
|
transform: scale(0.97);
|
|||
|
|
box-shadow: 0 2px 8px rgba(24, 144, 255, 0.10);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.friend-item.selected {
|
|||
|
|
background: #e6f7ff;
|
|||
|
|
border: 1.5px solid #1890ff;
|
|||
|
|
box-shadow: 0 2px 12px rgba(24, 144, 255, 0.10);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.friend-item.selected .friend-avatar,
|
|||
|
|
.friend-item.selected .friend-avatar-txt {
|
|||
|
|
border: 2.5px solid #1890ff;
|
|||
|
|
box-shadow: 0 0 0 2px #bae7ff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.friend-item.disabled {
|
|||
|
|
background: #f5f5f5;
|
|||
|
|
color: #bbb;
|
|||
|
|
cursor: not-allowed;
|
|||
|
|
opacity: 0.7;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.friend-item.disabled .friend-avatar,
|
|||
|
|
.friend-item.disabled .friend-avatar-txt {
|
|||
|
|
filter: grayscale(1);
|
|||
|
|
border: 2px solid #eee;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.friend-avatar,
|
|||
|
|
.friend-avatar-txt {
|
|||
|
|
width: 36px;
|
|||
|
|
height: 36px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
margin-right: 12px;
|
|||
|
|
background: #f0f0f0;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
font-size: 16px;
|
|||
|
|
color: #888;
|
|||
|
|
font-weight: 600;
|
|||
|
|
border: 2px solid #f0f0f0;
|
|||
|
|
transition: border 0.18s, box-shadow 0.18s, filter 0.18s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.friend-nickname {
|
|||
|
|
font-size: 15px;
|
|||
|
|
color: #222;
|
|||
|
|
font-weight: 500;
|
|||
|
|
flex: 1;
|
|||
|
|
letter-spacing: 0.5px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.friend-item.selected .friend-nickname {
|
|||
|
|
color: #1890ff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.friend-check {
|
|||
|
|
margin-left: auto;
|
|||
|
|
color: #1890ff;
|
|||
|
|
font-size: 18px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
background: #fff;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
width: 26px;
|
|||
|
|
height: 26px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
box-shadow: 0 1px 4px rgba(24, 144, 255, 0.08);
|
|||
|
|
border: 2px solid #e6f7ff;
|
|||
|
|
transition: background 0.18s, color 0.18s, border 0.18s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.friend-item.selected .friend-check {
|
|||
|
|
background: #1890ff;
|
|||
|
|
color: #fff;
|
|||
|
|
border: 2px solid #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.friend-item.disabled .friend-check {
|
|||
|
|
background: #eee;
|
|||
|
|
color: #bbb;
|
|||
|
|
border: 2px solid #eee;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.friend-selected-row {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 8px;
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
min-height: 40px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.friend-selected-avatar {
|
|||
|
|
width: 36px;
|
|||
|
|
height: 36px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background: #f0f0f0;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
position: relative;
|
|||
|
|
font-size: 18px;
|
|||
|
|
color: #888;
|
|||
|
|
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.08);
|
|||
|
|
border: 2px solid #667eea;
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: box-shadow 0.2s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.friend-selected-avatar:active {
|
|||
|
|
box-shadow: 0 4px 16px rgba(102, 126, 234, 0.18);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.friend-selected-remove {
|
|||
|
|
position: absolute;
|
|||
|
|
top: -8px;
|
|||
|
|
right: -8px;
|
|||
|
|
width: 18px;
|
|||
|
|
height: 18px;
|
|||
|
|
background: #ff4757;
|
|||
|
|
color: #fff;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
font-size: 13px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
box-shadow: 0 2px 8px rgba(255, 71, 87, 0.18);
|
|||
|
|
border: 2px solid #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.friend-selected-placeholder {
|
|||
|
|
background: #f8f8f8;
|
|||
|
|
color: #bbb;
|
|||
|
|
border: 2px dashed #ddd;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.friend-search-input {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 32px;
|
|||
|
|
border: 1px solid #e0e0e0;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
padding: 0 12px;
|
|||
|
|
font-size: 15px;
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
outline: none;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.friend-select-done[disabled] {
|
|||
|
|
background: #eee !important;
|
|||
|
|
color: #bbb !important;
|
|||
|
|
border: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-actions-right {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 8px;
|
|||
|
|
position: absolute;
|
|||
|
|
right: 12px;
|
|||
|
|
top: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.remind-save-btn {
|
|||
|
|
padding: 0 14px;
|
|||
|
|
height: 28px;
|
|||
|
|
line-height: 28px;
|
|||
|
|
font-size: 14px;
|
|||
|
|
border-radius: 14px;
|
|||
|
|
margin-right: 2px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 底部导航栏 */
|
|||
|
|
.bottom-tab-bar {
|
|||
|
|
position: fixed;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
height: 56px;
|
|||
|
|
background: #fff;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-around;
|
|||
|
|
box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06);
|
|||
|
|
z-index: 10001;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tab-btn {
|
|||
|
|
flex: 1;
|
|||
|
|
height: 40px;
|
|||
|
|
margin: 0 8px;
|
|||
|
|
border: none;
|
|||
|
|
background: none;
|
|||
|
|
font-size: 16px;
|
|||
|
|
color: #666;
|
|||
|
|
border-radius: 20px;
|
|||
|
|
transition: background 0.2s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tab-btn:active {
|
|||
|
|
background: #f0f4ff;
|
|||
|
|
color: #1890ff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 地点标记弹窗美化 */
|
|||
|
|
.location-mark-modal {
|
|||
|
|
z-index: 20000;
|
|||
|
|
position: fixed;
|
|||
|
|
left: 0;
|
|||
|
|
top: 0;
|
|||
|
|
right: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
background: rgba(0, 0, 0, 0.45);
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-mark-content {
|
|||
|
|
background: #fff;
|
|||
|
|
border-radius: 24px;
|
|||
|
|
width: 370px;
|
|||
|
|
max-width: 96vw;
|
|||
|
|
max-height: 80vh;
|
|||
|
|
box-shadow: 0 12px 40px rgba(24, 144, 255, 0.10), 0 2px 8px rgba(0, 0, 0, 0.10);
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
padding: 0 0 18px 0;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-mark-header {
|
|||
|
|
position: relative;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
height: 56px;
|
|||
|
|
background: #f8fbff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-mark-title {
|
|||
|
|
font-size: 20px;
|
|||
|
|
font-weight: 700;
|
|||
|
|
color: #222;
|
|||
|
|
letter-spacing: 1px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-mark-close {
|
|||
|
|
position: absolute;
|
|||
|
|
right: 18px;
|
|||
|
|
top: 50%;
|
|||
|
|
transform: translateY(-50%);
|
|||
|
|
font-size: 22px;
|
|||
|
|
color: #bbb;
|
|||
|
|
padding: 4px 8px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: background 0.2s, color 0.2s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-mark-close:active {
|
|||
|
|
background: #f0f4ff;
|
|||
|
|
color: #ff4757;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-mark-divider {
|
|||
|
|
height: 1px;
|
|||
|
|
background: #f0f4ff;
|
|||
|
|
margin: 0 0 8px 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-mark-search-row {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
background: #f4f7fa;
|
|||
|
|
border-radius: 18px;
|
|||
|
|
margin: 16px 18px 10px 18px;
|
|||
|
|
padding: 0 10px;
|
|||
|
|
box-shadow: 0 1px 4px rgba(24, 144, 255, 0.04);
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.search-icon {
|
|||
|
|
font-size: 15px;
|
|||
|
|
color: #b0b8c7;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-mark-search {
|
|||
|
|
flex: 1;
|
|||
|
|
height: 36px;
|
|||
|
|
border: none;
|
|||
|
|
background: transparent;
|
|||
|
|
font-size: 15px;
|
|||
|
|
outline: none;
|
|||
|
|
padding: 0 4px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.clear-icon {
|
|||
|
|
font-size: 16px;
|
|||
|
|
color: #b0b8c7;
|
|||
|
|
margin-left: 4px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: color 0.2s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.clear-icon:active {
|
|||
|
|
color: #ff4757;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-mark-list {
|
|||
|
|
flex: 1;
|
|||
|
|
min-height: 120px;
|
|||
|
|
max-height: 340px;
|
|||
|
|
overflow-y: auto;
|
|||
|
|
padding: 0 12px 0 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-mark-item-card {
|
|||
|
|
background: #fff;
|
|||
|
|
border-radius: 16px;
|
|||
|
|
box-shadow: 0 2px 12px rgba(24, 144, 255, 0.06);
|
|||
|
|
margin-bottom: 16px;
|
|||
|
|
padding: 0 0 0 0;
|
|||
|
|
transition: box-shadow 0.2s;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-mark-item-card:active {
|
|||
|
|
box-shadow: 0 4px 18px rgba(24, 144, 255, 0.13);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-mark-item-main {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
padding: 16px 16px 10px 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-mark-item-info {
|
|||
|
|
flex: 1;
|
|||
|
|
min-width: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-mark-name-row {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 8px;
|
|||
|
|
margin-bottom: 2px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-mark-name {
|
|||
|
|
font-size: 17px;
|
|||
|
|
font-weight: 700;
|
|||
|
|
color: #1890ff;
|
|||
|
|
max-width: 110px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-mark-edit-btn,
|
|||
|
|
.location-mark-del-btn {
|
|||
|
|
font-size: 13px;
|
|||
|
|
padding: 0 8px;
|
|||
|
|
height: 24px;
|
|||
|
|
line-height: 24px;
|
|||
|
|
border-radius: 12px;
|
|||
|
|
margin-left: 2px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
border: none;
|
|||
|
|
background: #f4f7fa;
|
|||
|
|
color: #1890ff;
|
|||
|
|
transition: background 0.2s, color 0.2s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-mark-edit-btn:active {
|
|||
|
|
background: #e6f7ff;
|
|||
|
|
color: #1761a0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-mark-del-btn {
|
|||
|
|
color: #ff4757;
|
|||
|
|
background: #fff0f0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-mark-del-btn:active {
|
|||
|
|
background: #ffeaea;
|
|||
|
|
color: #c82333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-mark-edit-btn .iconfont,
|
|||
|
|
.location-mark-del-btn .iconfont {
|
|||
|
|
font-size: 15px;
|
|||
|
|
margin-right: 2px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-mark-coord {
|
|||
|
|
font-size: 13px;
|
|||
|
|
color: #888;
|
|||
|
|
overflow: hidden;
|
|||
|
|
margin-top: 2px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-mark-meta {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: flex-end;
|
|||
|
|
gap: 8px;
|
|||
|
|
margin-left: 14px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-mark-friends {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 2px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-mark-friend-avatar {
|
|||
|
|
width: 28px;
|
|||
|
|
height: 28px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background: #f0f0f0;
|
|||
|
|
border: 1.5px solid #fff;
|
|||
|
|
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
font-size: 15px;
|
|||
|
|
color: #888;
|
|||
|
|
font-weight: 600;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-mark-friend-avatar image {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-mark-friend-btn {
|
|||
|
|
width: 28px;
|
|||
|
|
height: 28px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background: #e6f7ff;
|
|||
|
|
color: #1890ff;
|
|||
|
|
font-size: 20px;
|
|||
|
|
line-height: 28px;
|
|||
|
|
padding: 0;
|
|||
|
|
border: none;
|
|||
|
|
margin-left: 2px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
box-shadow: 0 1px 4px rgba(24, 144, 255, 0.08);
|
|||
|
|
transition: background 0.2s, color 0.2s;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-mark-friend-btn:active {
|
|||
|
|
background: #bae7ff;
|
|||
|
|
color: #1761a0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-mark-type-tag {
|
|||
|
|
font-size: 13px;
|
|||
|
|
color: #fff;
|
|||
|
|
border-radius: 12px;
|
|||
|
|
padding: 3px 16px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
user-select: none;
|
|||
|
|
font-weight: 600;
|
|||
|
|
box-shadow: 0 1px 4px rgba(24, 144, 255, 0.08);
|
|||
|
|
transition: background 0.2s;
|
|||
|
|
margin-top: 4px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-mark-type-tag.arrive {
|
|||
|
|
background: linear-gradient(90deg, #1890ff 60%, #40a9ff 100%);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-mark-type-tag.leave {
|
|||
|
|
background: linear-gradient(90deg, #faad14 60%, #ffd666 100%);
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-mark-type-tag:active {
|
|||
|
|
filter: brightness(0.92);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-mark-empty {
|
|||
|
|
text-align: center;
|
|||
|
|
color: #bbb;
|
|||
|
|
font-size: 16px;
|
|||
|
|
margin-top: 60px;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.empty-icon {
|
|||
|
|
font-size: 38px;
|
|||
|
|
color: #e6f7ff;
|
|||
|
|
margin-bottom: 2px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 遮罩层 */
|
|||
|
|
.location-mark-mask {
|
|||
|
|
position: fixed;
|
|||
|
|
left: 0;
|
|||
|
|
top: 0;
|
|||
|
|
right: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
background: rgba(0, 0, 0, 0.45);
|
|||
|
|
z-index: 20000;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 弹窗内容区 */
|
|||
|
|
.location-mark-dialog {
|
|||
|
|
position: fixed;
|
|||
|
|
left: 50%;
|
|||
|
|
top: 50%;
|
|||
|
|
transform: translate(-50%, -50%);
|
|||
|
|
background: #fff;
|
|||
|
|
border-radius: 24px;
|
|||
|
|
width: 370px;
|
|||
|
|
max-width: 96vw;
|
|||
|
|
max-height: 80vh;
|
|||
|
|
box-shadow: 0 12px 40px rgba(24, 144, 255, 0.10), 0 2px 8px rgba(0, 0, 0, 0.10);
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
padding: 0 0 18px 0;
|
|||
|
|
overflow: hidden;
|
|||
|
|
z-index: 20001;
|
|||
|
|
animation: locationMarkDialogFadeIn 0.25s cubic-bezier(.4, 0, .2, 1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 弹窗动画 */
|
|||
|
|
@keyframes locationMarkDialogFadeIn {
|
|||
|
|
0% {
|
|||
|
|
opacity: 0;
|
|||
|
|
transform: translate(-50%, -46%) scale(0.96);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
100% {
|
|||
|
|
opacity: 1;
|
|||
|
|
transform: translate(-50%, -50%) scale(1);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-mark-dialog-animate {
|
|||
|
|
animation: locationMarkDialogFadeIn 0.25s cubic-bezier(.4, 0, .2, 1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 底部弹出卡片样式 */
|
|||
|
|
.location-mark-sheet {
|
|||
|
|
position: fixed;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
background: #fff;
|
|||
|
|
border-top-left-radius: 22px;
|
|||
|
|
border-top-right-radius: 22px;
|
|||
|
|
box-shadow: 0 -8px 32px rgba(24, 144, 255, 0.10), 0 -2px 8px rgba(0, 0, 0, 0.10);
|
|||
|
|
z-index: 20001;
|
|||
|
|
width: 100vw;
|
|||
|
|
max-width: 100vw;
|
|||
|
|
min-height: 220px;
|
|||
|
|
max-height: 80vh;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
animation: locationMarkSheetSlideIn 0.28s cubic-bezier(.4, 0, .2, 1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes locationMarkSheetSlideIn {
|
|||
|
|
0% {
|
|||
|
|
transform: translateY(60px);
|
|||
|
|
opacity: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
100% {
|
|||
|
|
transform: translateY(0);
|
|||
|
|
opacity: 1;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-mark-sheet-animate {
|
|||
|
|
animation: locationMarkSheetSlideIn 0.28s cubic-bezier(.4, 0, .2, 1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-mark-sheet-handle-row {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
height: 32px;
|
|||
|
|
padding: 0 12px 0 0;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-mark-sheet-handle {
|
|||
|
|
width: 44px;
|
|||
|
|
height: 5px;
|
|||
|
|
border-radius: 3px;
|
|||
|
|
background: #e6eaf0;
|
|||
|
|
margin: 10px auto 0 auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-mark-sheet-close {
|
|||
|
|
position: absolute;
|
|||
|
|
right: 16px;
|
|||
|
|
top: 8px;
|
|||
|
|
font-size: 22px;
|
|||
|
|
color: #bbb;
|
|||
|
|
padding: 4px 8px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: background 0.2s, color 0.2s;
|
|||
|
|
z-index: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-mark-sheet-close:active {
|
|||
|
|
background: #f0f4ff;
|
|||
|
|
color: #ff4757;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-mark-sheet-title {
|
|||
|
|
font-size: 18px;
|
|||
|
|
font-weight: 700;
|
|||
|
|
color: #222;
|
|||
|
|
text-align: center;
|
|||
|
|
margin-bottom: 6px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-mark-list-sheet {
|
|||
|
|
flex: 1;
|
|||
|
|
min-height: 120px;
|
|||
|
|
max-height: 54vh;
|
|||
|
|
overflow-y: auto;
|
|||
|
|
padding: 0 12px 0 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 兼容原有卡片内容美化样式 */
|
|||
|
|
|
|||
|
|
/* POI提醒操作弹窗名称可编辑样式 */
|
|||
|
|
.card-name-editable {
|
|||
|
|
margin-bottom: 2px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-name-input {
|
|||
|
|
font-size: 17px;
|
|||
|
|
font-weight: 700;
|
|||
|
|
color: #222;
|
|||
|
|
border: none;
|
|||
|
|
background: transparent;
|
|||
|
|
outline: none;
|
|||
|
|
width: 100%;
|
|||
|
|
padding: 0 0 2px 0;
|
|||
|
|
border-bottom: 1.5px solid #e6eaf0;
|
|||
|
|
transition: border-color 0.2s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-name-input:focus {
|
|||
|
|
border-bottom: 1.5px solid #1890ff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-name-tip {
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: #b0b8c7;
|
|||
|
|
margin-top: 2px;
|
|||
|
|
margin-left: 2px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 优化后的地点标记卡片布局 */
|
|||
|
|
.location-mark-item-card {
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: all 0.2s ease;
|
|||
|
|
border-radius: 12px;
|
|||
|
|
margin-bottom: 8px;
|
|||
|
|
background: #fff;
|
|||
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
|||
|
|
border: 1px solid #f0f0f0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-mark-item-card:active {
|
|||
|
|
transform: scale(0.98);
|
|||
|
|
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
|
|||
|
|
background: #f8f9fa;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-mark-item-main-opt {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
padding: 16px 16px 6px 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-mark-item-info-opt {
|
|||
|
|
flex: 1;
|
|||
|
|
min-width: 0;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-mark-name-opt {
|
|||
|
|
font-size: 17px;
|
|||
|
|
font-weight: 700;
|
|||
|
|
color: #1890ff;
|
|||
|
|
max-width: 140px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-mark-coord-opt {
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: #b0b8c7;
|
|||
|
|
margin-top: 2px;
|
|||
|
|
max-width: 140px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-mark-actions-opt {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
gap: 6px;
|
|||
|
|
margin-left: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-mark-edit-btn-opt,
|
|||
|
|
.location-mark-del-btn-opt {
|
|||
|
|
font-size: 13px;
|
|||
|
|
padding: 0 8px;
|
|||
|
|
height: 24px;
|
|||
|
|
line-height: 24px;
|
|||
|
|
border-radius: 12px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
border: none;
|
|||
|
|
background: #f4f7fa;
|
|||
|
|
color: #1890ff;
|
|||
|
|
transition: background 0.2s, color 0.2s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-mark-edit-btn-opt:active {
|
|||
|
|
background: #e6f7ff;
|
|||
|
|
color: #1761a0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-mark-del-btn-opt {
|
|||
|
|
color: #ff4757;
|
|||
|
|
background: #fff0f0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-mark-del-btn-opt:active {
|
|||
|
|
background: #ffeaea;
|
|||
|
|
color: #c82333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-mark-edit-btn-opt .iconfont,
|
|||
|
|
.location-mark-del-btn-opt .iconfont {
|
|||
|
|
font-size: 15px;
|
|||
|
|
margin-right: 2px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-mark-meta-opt {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
padding: 0 16px 12px 16px;
|
|||
|
|
gap: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-mark-friends-opt {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 2px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-mark-friend-avatar-opt {
|
|||
|
|
width: 22px;
|
|||
|
|
height: 22px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background: #f0f0f0;
|
|||
|
|
border: 1.5px solid #fff;
|
|||
|
|
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: #888;
|
|||
|
|
font-weight: 600;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-mark-friend-avatar-opt image {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-mark-friend-btn-opt {
|
|||
|
|
width: 22px;
|
|||
|
|
height: 22px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background: #e6f7ff;
|
|||
|
|
color: #1890ff;
|
|||
|
|
font-size: 16px;
|
|||
|
|
line-height: 22px;
|
|||
|
|
padding: 0;
|
|||
|
|
border: none;
|
|||
|
|
margin-left: 2px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
box-shadow: 0 1px 4px rgba(24, 144, 255, 0.08);
|
|||
|
|
transition: background 0.2s, color 0.2s;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-mark-friend-btn-opt:active {
|
|||
|
|
background: #bae7ff;
|
|||
|
|
color: #1761a0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-mark-type-tag-opt {
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: #fff;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
padding: 2px 12px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
user-select: none;
|
|||
|
|
font-weight: 600;
|
|||
|
|
box-shadow: 0 1px 4px rgba(24, 144, 255, 0.08);
|
|||
|
|
transition: background 0.2s;
|
|||
|
|
margin-left: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-mark-type-tag-opt.arrive {
|
|||
|
|
background: linear-gradient(90deg, #1890ff 60%, #40a9ff 100%);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-mark-type-tag-opt.leave {
|
|||
|
|
background: linear-gradient(90deg, #faad14 60%, #ffd666 100%);
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-mark-type-tag-opt:active {
|
|||
|
|
filter: brightness(0.92);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 地点标记浮动按钮 */
|
|||
|
|
.location-mark-fab {
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 20px;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translateX(-50%);
|
|||
|
|
width: 56px;
|
|||
|
|
height: 56px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
|
|||
|
|
box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|||
|
|
z-index: 10;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-mark-fab:active {
|
|||
|
|
transform: translateX(-50%) scale(0.95);
|
|||
|
|
box-shadow: 0 2px 8px rgba(24, 144, 255, 0.4);
|
|||
|
|
background: linear-gradient(135deg, #1761a0 0%, #1890ff 100%);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-mark-fab-icon {
|
|||
|
|
font-size: 28px;
|
|||
|
|
font-weight: 300;
|
|||
|
|
color: #fff;
|
|||
|
|
line-height: 1;
|
|||
|
|
user-select: none;
|
|||
|
|
transition: transform 0.2s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-mark-fab:active .location-mark-fab-icon {
|
|||
|
|
transform: rotate(45deg);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*POI周边列表弹窗*/
|
|||
|
|
.poi-around-modal {
|
|||
|
|
position: fixed;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
top: 0;
|
|||
|
|
z-index: 9999;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: flex-end;
|
|||
|
|
justify-content: center;
|
|||
|
|
font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.poi-around-mask {
|
|||
|
|
position: absolute;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
top: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
background: rgba(0, 0, 0, 0.32);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.poi-around-sheet {
|
|||
|
|
position: relative;
|
|||
|
|
width: 92vw;
|
|||
|
|
max-width: 500px;
|
|||
|
|
background: #fff;
|
|||
|
|
border-radius: 18px 18px 0 0;
|
|||
|
|
padding: 24px 18px 18px 18px;
|
|||
|
|
box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.10);
|
|||
|
|
z-index: 1;
|
|||
|
|
min-height: 220px;
|
|||
|
|
animation: popUpSheet 0.25s cubic-bezier(.4, 1.4, .6, 1) 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes popUpSheet {
|
|||
|
|
from {
|
|||
|
|
transform: translateY(100px);
|
|||
|
|
opacity: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
to {
|
|||
|
|
transform: translateY(0);
|
|||
|
|
opacity: 1;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.poi-around-close-x {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 14px;
|
|||
|
|
right: 14px;
|
|||
|
|
width: 32px;
|
|||
|
|
height: 32px;
|
|||
|
|
background: #f5f6fa;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
color: #888;
|
|||
|
|
font-size: 20px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: background 0.2s, color 0.2s;
|
|||
|
|
z-index: 2;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.poi-around-close-x:active {
|
|||
|
|
background: #e6eaf0;
|
|||
|
|
color: #1890ff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.poi-around-title {
|
|||
|
|
font-size: 19px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
margin-bottom: 16px;
|
|||
|
|
text-align: center;
|
|||
|
|
letter-spacing: 1px;
|
|||
|
|
color: #222;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.poi-around-list {
|
|||
|
|
max-height: 52vh;
|
|||
|
|
overflow-y: auto;
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.poi-around-item {
|
|||
|
|
padding: 14px 0 10px 0;
|
|||
|
|
border-bottom: 1px solid #f0f0f0;
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: background 0.18s;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.poi-around-item:active {
|
|||
|
|
background: #f5f8ff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.poi-around-name {
|
|||
|
|
font-size: 16px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #1890ff;
|
|||
|
|
margin-bottom: 2px;
|
|||
|
|
word-break: break-all;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.poi-around-address {
|
|||
|
|
font-size: 13px;
|
|||
|
|
color: #888;
|
|||
|
|
margin-top: 1px;
|
|||
|
|
word-break: break-all;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.poi-around-distance {
|
|||
|
|
font-size: 13px;
|
|||
|
|
color: #faad14;
|
|||
|
|
margin-top: 2px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.poi-around-close-btn {
|
|||
|
|
margin: 18px auto 0 auto;
|
|||
|
|
width: 90px;
|
|||
|
|
text-align: center;
|
|||
|
|
background: #f5f5f5;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
padding: 10px 0;
|
|||
|
|
color: #666;
|
|||
|
|
font-size: 15px;
|
|||
|
|
letter-spacing: 1px;
|
|||
|
|
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
|
|||
|
|
transition: background 0.2s, color 0.2s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.poi-around-close-btn:active {
|
|||
|
|
background: #e6eaf0;
|
|||
|
|
color: #1890ff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.poi-around-empty {
|
|||
|
|
text-align: center;
|
|||
|
|
color: #bbb;
|
|||
|
|
padding: 32px 0;
|
|||
|
|
font-size: 15px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**搜索结果信息**/
|
|||
|
|
.result-info-modal {
|
|||
|
|
position: fixed;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
z-index: 999999;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: flex-end;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.merchant-info-meta-text {
|
|||
|
|
font-size: 20px;
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.merchant-info-meta-content {
|
|||
|
|
margin-top: 10rpx;
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.result-info-card {
|
|||
|
|
width: 100%;
|
|||
|
|
background: #1C1C1E;
|
|||
|
|
border-radius: 20px 20px 0 0;
|
|||
|
|
box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.10);
|
|||
|
|
padding: 0px 20px 18px 20px;
|
|||
|
|
margin-bottom: env(safe-area-inset-bottom);
|
|||
|
|
position: relative;
|
|||
|
|
animation: slideUp 0.25s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**商家信息**/
|
|||
|
|
.merchant-info-modal {
|
|||
|
|
position: fixed;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
z-index: 9999;
|
|||
|
|
background: rgba(0, 0, 0, 0.3);
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: flex-end;
|
|||
|
|
/* 为安卓设备提供足够的底部间距，避免内容被遮挡 */
|
|||
|
|
/* 在安卓上 env(safe-area-inset-bottom) 会返回 0，所以最小间距是 160rpx */
|
|||
|
|
padding-bottom: calc(40rpx + env(safe-area-inset-bottom) + 140rpx);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.merchant-info-card {
|
|||
|
|
width: 92vw;
|
|||
|
|
background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
|
|||
|
|
border-radius: 32rpx;
|
|||
|
|
box-shadow: 0 -12rpx 60rpx rgba(0, 0, 0, 0.15);
|
|||
|
|
padding: 48rpx 40rpx 40rpx;
|
|||
|
|
/* 移除 margin-bottom，改用父容器的 padding-bottom 来提供间距 */
|
|||
|
|
position: relative;
|
|||
|
|
animation: slideUp 0.3s ease-out;
|
|||
|
|
max-height: 70vh;
|
|||
|
|
overflow-y: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes slideUp {
|
|||
|
|
from {
|
|||
|
|
transform: translateY(100%);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
to {
|
|||
|
|
transform: translateY(0);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.close-btn-abs {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 14rpx;
|
|||
|
|
right: 14rpx;
|
|||
|
|
background: rgba(207, 207, 207, 0.95);
|
|||
|
|
border: 2rpx solid rgba(0, 0, 0, 0.08);
|
|||
|
|
border-radius: 50%;
|
|||
|
|
width: 64rpx;
|
|||
|
|
height: 64rpx;
|
|||
|
|
line-height: 64rpx;
|
|||
|
|
font-size: 44rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
z-index: 10;
|
|||
|
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
|
|||
|
|
padding: 0;
|
|||
|
|
transition: all 0.2s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.close-btn-abs .close-icon {
|
|||
|
|
color: #666;
|
|||
|
|
font-size: 40rpx;
|
|||
|
|
font-weight: 300;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.close-btn-abs:active {
|
|||
|
|
background: rgba(0, 0, 0, 0.05);
|
|||
|
|
transform: scale(0.95);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 菜品信息容器 */
|
|||
|
|
.dish-info-container {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 32rpx;
|
|||
|
|
margin-top: 8rpx;
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
.dish-image-row{
|
|||
|
|
display: flex;
|
|||
|
|
gap: 24rpx;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
}
|
|||
|
|
.dish-description{
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #666;
|
|||
|
|
display: block; /* 确保文本元素正确显示 */
|
|||
|
|
width: 100%;
|
|||
|
|
line-height: 1.6;
|
|||
|
|
}
|
|||
|
|
.dish-description-row{
|
|||
|
|
overflow: hidden;
|
|||
|
|
display: -webkit-box;
|
|||
|
|
-webkit-box-orient: vertical;
|
|||
|
|
-webkit-line-clamp: 2; /* 最多显示2行 */
|
|||
|
|
line-clamp: 2; /* 标准属性，提升兼容性 */
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
word-break: break-all;
|
|||
|
|
line-height: 1.6;
|
|||
|
|
max-height: calc(1.6em * 2); /* 限制最大高度为2行 */
|
|||
|
|
margin-top: 4rpx;
|
|||
|
|
}
|
|||
|
|
/* 左侧：菜品宣传图 */
|
|||
|
|
.dish-image {
|
|||
|
|
width: 220rpx;
|
|||
|
|
height: 220rpx;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 右侧：菜品详情 */
|
|||
|
|
.dish-detail {
|
|||
|
|
flex: 1;
|
|||
|
|
min-width: 0; /* 允许 flex 子元素收缩 */
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 16rpx;
|
|||
|
|
overflow: hidden; /* 防止内容溢出 */
|
|||
|
|
padding-top: 4rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 第一行：标题 */
|
|||
|
|
.dish-title-row {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
min-width: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.dish-title {
|
|||
|
|
font-size: 36rpx;
|
|||
|
|
font-weight: 700;
|
|||
|
|
color: #2c3e50;
|
|||
|
|
line-height: 1.5;
|
|||
|
|
width: 100%;
|
|||
|
|
overflow: hidden;
|
|||
|
|
display: -webkit-box;
|
|||
|
|
-webkit-box-orient: vertical;
|
|||
|
|
-webkit-line-clamp: 2; /* 最多显示2行 */
|
|||
|
|
line-clamp: 2; /* 标准属性，提升兼容性 */
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
word-break: break-all;
|
|||
|
|
max-height: calc(1.5em * 2); /* 限制最大高度为2行 */
|
|||
|
|
letter-spacing: 0.5rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 第二行：销售数据和排名 */
|
|||
|
|
.dish-sales-row {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 24rpx;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
}
|
|||
|
|
.dish-info-address{
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
color: #666;
|
|||
|
|
margin-top: 8rpx;
|
|||
|
|
display: block; /* 确保文本元素正确显示 */
|
|||
|
|
width: 100%;
|
|||
|
|
padding: 16rpx 20rpx;
|
|||
|
|
background: linear-gradient(135deg, #f8f9fa 0%, #f1f3f5 100%);
|
|||
|
|
border-radius: 16rpx;
|
|||
|
|
border: 1rpx solid rgba(0, 0, 0, 0.05);
|
|||
|
|
line-height: 1.6;
|
|||
|
|
word-break: break-all;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.dish-sales {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #666;
|
|||
|
|
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
|
|||
|
|
border-radius: 12rpx;
|
|||
|
|
padding: 8rpx 16rpx;
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
flex-shrink: 1; /* 允许收缩 */
|
|||
|
|
min-width: 0;
|
|||
|
|
border: 1rpx solid rgba(0, 0, 0, 0.05);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.dish-ranking {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #ff6f3c;
|
|||
|
|
background: linear-gradient(135deg, #fff5f2 0%, #ffe5d9 100%);
|
|||
|
|
border-radius: 12rpx;
|
|||
|
|
padding: 8rpx 16rpx;
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
flex-shrink: 1; /* 允许收缩 */
|
|||
|
|
min-width: 0;
|
|||
|
|
border: 1rpx solid rgba(255, 111, 60, 0.2);
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 第三行：评分和店铺信息 */
|
|||
|
|
.dish-rating-row {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
gap: 16rpx;
|
|||
|
|
flex-wrap: nowrap;
|
|||
|
|
min-width: 0; /* 允许 flex 子元素收缩 */
|
|||
|
|
overflow: hidden; /* 防止内容溢出 */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.dish-rating-left {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 16rpx;
|
|||
|
|
flex: 1;
|
|||
|
|
min-width: 0; /* 允许 flex 子元素收缩 */
|
|||
|
|
overflow: hidden; /* 防止内容溢出 */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.dish-rating {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #ff6f3c;
|
|||
|
|
font-weight: 700;
|
|||
|
|
flex-shrink: 0; /* 评分不压缩 */
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.dish-shop-name {
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
color: #666;
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
flex: 1;
|
|||
|
|
min-width: 0; /* 允许 flex 子元素收缩 */
|
|||
|
|
padding-left: 12rpx;
|
|||
|
|
border-left: 2rpx solid #e0e0e0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.dish-district {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #999;
|
|||
|
|
margin-left: auto;
|
|||
|
|
flex-shrink: 0; /* 防止被压缩 */
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
max-width: 200rpx; /* 限制最大宽度 */
|
|||
|
|
background: #f5f5f5;
|
|||
|
|
padding: 6rpx 12rpx;
|
|||
|
|
border-radius: 8rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 第四行：价格信息 */
|
|||
|
|
.dish-price-row {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
gap: 16rpx;
|
|||
|
|
flex-wrap: nowrap;
|
|||
|
|
margin-top: 12rpx;
|
|||
|
|
padding: 24rpx 20rpx;
|
|||
|
|
background: linear-gradient(135deg, #f5e9e9 0%, #ffffff 100%);
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
border: 1rpx solid rgba(255, 111, 60, 0.15);
|
|||
|
|
position: relative;
|
|||
|
|
min-width: 0; /* 允许 flex 子元素收缩 */
|
|||
|
|
overflow: hidden; /* 防止内容溢出 */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.dish-price-left {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
gap: 8rpx;
|
|||
|
|
flex: 1;
|
|||
|
|
min-width: 0; /* 允许 flex 子元素收缩 */
|
|||
|
|
flex-wrap: nowrap;
|
|||
|
|
z-index: 2;
|
|||
|
|
margin-right: 100rpx;
|
|||
|
|
overflow: hidden; /* 防止内容溢出 */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.dish-group-price {
|
|||
|
|
font-size: 42rpx;
|
|||
|
|
font-weight: 700;
|
|||
|
|
color: #ff6f3c;
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
width: 100%;
|
|||
|
|
line-height: 1.2;
|
|||
|
|
letter-spacing: 1rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.dish-discount {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #ff6f3c;
|
|||
|
|
background: linear-gradient(135deg, #fff5f2 0%, #ffe5d9 100%);
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
padding: 6rpx 14rpx;
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
width: fit-content;
|
|||
|
|
border: 1rpx solid rgba(255, 111, 60, 0.2);
|
|||
|
|
font-weight: 500;
|
|||
|
|
margin-top: 8rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.dish-original-price {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #999;
|
|||
|
|
text-decoration: line-through;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.dish-go-btn {
|
|||
|
|
width: 180rpx;
|
|||
|
|
height: 80rpx;
|
|||
|
|
position: absolute;
|
|||
|
|
right: 0;
|
|||
|
|
top: 50%;
|
|||
|
|
transform: translateY(-50%);
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
z-index: 1;
|
|||
|
|
filter: drop-shadow(0 4rpx 8rpx rgba(0, 0, 0, 0.1));
|
|||
|
|
transition: transform 0.2s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.dish-buy-btn {
|
|||
|
|
background: linear-gradient(135deg, #ff6f3c 0%, #ff8c5a 100%);
|
|||
|
|
color: #fff;
|
|||
|
|
border: none;
|
|||
|
|
border-radius: 40rpx;
|
|||
|
|
padding: 2rpx 40rpx;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
font-weight: 600;
|
|||
|
|
margin-left: auto;
|
|||
|
|
box-shadow: 0 4rpx 16rpx rgba(255, 111, 60, 0.3);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.dish-buy-btn:active {
|
|||
|
|
opacity: 0.8;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.merchant-info-header {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: flex-start;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 2px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.merchant-name {
|
|||
|
|
font-size: 20px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
color: #222;
|
|||
|
|
flex: 1;
|
|||
|
|
line-height: 1.2;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.merchant-info-row {
|
|||
|
|
margin: 8px 0 0 0;
|
|||
|
|
color: #666;
|
|||
|
|
font-size: 14px;
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
gap: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.merchant-info-meta {
|
|||
|
|
margin-top: 2px;
|
|||
|
|
color: #999;
|
|||
|
|
font-size: 13px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.merchant-address {
|
|||
|
|
color: #fff;
|
|||
|
|
font-size: 15px;
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.merchant-packages {
|
|||
|
|
margin: 16px 0 8px 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.package-card {
|
|||
|
|
background: #f7f8fa;
|
|||
|
|
border-radius: 12px;
|
|||
|
|
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
|
|||
|
|
padding: 12px 14px 10px 14px;
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
transition: box-shadow 0.2s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.package-card-header {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 2px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.package-title {
|
|||
|
|
font-weight: 600;
|
|||
|
|
font-size: 15px;
|
|||
|
|
color: #333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.package-price {
|
|||
|
|
color: #1aad19;
|
|||
|
|
font-weight: bold;
|
|||
|
|
font-size: 15px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.package-desc {
|
|||
|
|
color: #888;
|
|||
|
|
font-size: 13px;
|
|||
|
|
margin-top: 2px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.merchant-actions {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: flex-start;
|
|||
|
|
margin-top: 14px;
|
|||
|
|
gap: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
.merchant-navigation-img {
|
|||
|
|
width: 80rpx;
|
|||
|
|
/* 图标宽度 */
|
|||
|
|
height: 80rpx;
|
|||
|
|
/* 图标高度 */
|
|||
|
|
margin-bottom: 10rpx;
|
|||
|
|
/* 图标与文字的间距 */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.action-text-navigation {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
/* 文字大小 */
|
|||
|
|
color: #fff;
|
|||
|
|
/* 文字颜色 */
|
|||
|
|
text-align: center;
|
|||
|
|
/* 文字自身居中（增强对齐效果） */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.share-friends-scroll {
|
|||
|
|
/* 容器样式，根据需要调整 */
|
|||
|
|
padding: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.share-friends-list-share {
|
|||
|
|
/* 滚动容器不换行 */
|
|||
|
|
white-space: nowrap;
|
|||
|
|
/* 移除滚动条但保留功能（可选） */
|
|||
|
|
scrollbar-width: none;
|
|||
|
|
-webkit-overflow-scrolling: touch;
|
|||
|
|
/* 平滑滚动 */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 隐藏滚动条 */
|
|||
|
|
.share-friends-list-share::-webkit-scrollbar {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.friend-item-share {
|
|||
|
|
/* 每个好友项 inline-block 确保横向排列 */
|
|||
|
|
display: inline-block;
|
|||
|
|
/* 文本居中对齐 */
|
|||
|
|
text-align: center;
|
|||
|
|
/* 项之间的间距 */
|
|||
|
|
margin-right: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.avatar-container-share {
|
|||
|
|
/* 头像容器固定宽度，确保对齐 */
|
|||
|
|
width: 64px;
|
|||
|
|
height: 64px;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
/* 水平居中 */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.friend-avatar-share {
|
|||
|
|
/* 头像样式 */
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
border-radius: 10%;
|
|||
|
|
/* 圆形头像 */
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.friend-name-share {
|
|||
|
|
/* 文本样式 */
|
|||
|
|
display: inline-block;
|
|||
|
|
max-width: 80px;
|
|||
|
|
/* 最大宽度，根据需要调整 */
|
|||
|
|
margin-top: 8px;
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #fff;
|
|||
|
|
/* 文字超出时显示省略号 */
|
|||
|
|
white-space: nowrap;
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
/* 关键：左右内边距相等，确保对称 */
|
|||
|
|
padding: 0 8px;
|
|||
|
|
/* 计算宽度确保整体居中 */
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.merchant-actions-img {
|
|||
|
|
height: 25px;
|
|||
|
|
width: 60px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.action-btn {
|
|||
|
|
flex: 1;
|
|||
|
|
margin: 0;
|
|||
|
|
background: linear-gradient(23deg, #68F9FE 0%, #AA93ED 100%);
|
|||
|
|
color: #000000;
|
|||
|
|
border-radius: 9px;
|
|||
|
|
font-size: 16px;
|
|||
|
|
padding: 10px 0;
|
|||
|
|
border: 1px solid rgba(104, 249, 254, 0.7);
|
|||
|
|
font-weight: 500;
|
|||
|
|
transition: background 0.15s, color 0.15s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.action-btn:active {
|
|||
|
|
background: linear-gradient(23deg, #AA93ED, #68F9FE);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.action-fav {
|
|||
|
|
color: #000000;
|
|||
|
|
background: linear-gradient(23deg, #68F9FE 0%, #AA93ED 100%);
|
|||
|
|
border: 1px solid rgba(104, 249, 254, 0.7);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.action-fav-share {
|
|||
|
|
color: #000000;
|
|||
|
|
background: linear-gradient(23deg, #68F9FE 0%, #AA93ED 100%);
|
|||
|
|
border: 1px solid rgba(104, 249, 254, 0.7);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.action-fav:active {
|
|||
|
|
background: linear-gradient(23deg, #AA93ED, #68F9FE);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.action-nav {
|
|||
|
|
color: #000000;
|
|||
|
|
background: linear-gradient(23deg, #68F9FE 0%, #AA93ED 100%);
|
|||
|
|
border: 1px solid rgba(104, 249, 254, 0.7);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.action-nav:active {
|
|||
|
|
background: linear-gradient(23deg, #AA93ED, #68F9FE);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.action-remind {
|
|||
|
|
color: #000000;
|
|||
|
|
background: linear-gradient(23deg, #68F9FE 0%, #AA93ED 100%);
|
|||
|
|
border: 1px solid rgba(104, 249, 254, 0.7);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.action-remind:active {
|
|||
|
|
background: linear-gradient(23deg, #AA93ED, #68F9FE);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 静态数据标记样式 */
|
|||
|
|
.callout-static-data-icon {
|
|||
|
|
width: 50px;
|
|||
|
|
/* 方形静态数据标记的宽度，比用户头像(35)大 */
|
|||
|
|
height: 50px;
|
|||
|
|
/* 方形静态数据标记的高度，比用户头像(45)大 */
|
|||
|
|
border-radius: 8px;
|
|||
|
|
/* 稍微圆角，保持方形外观 */
|
|||
|
|
background: rgba(255, 255, 255, 0.95);
|
|||
|
|
border: 2px solid rgba(255, 255, 255, 0.8);
|
|||
|
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
|
|||
|
|
margin: 4px 0;
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.callout-static-data-desc {
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: #666;
|
|||
|
|
margin-top: 2px;
|
|||
|
|
text-align: center;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
max-width: 100px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 聚合点通用样式 */
|
|||
|
|
.callout-cluster {
|
|||
|
|
width: 40rpx;
|
|||
|
|
height: 40rpx;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
border: 2rpx solid white;
|
|||
|
|
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.2);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.callout-cluster-count {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
font-weight: bold;
|
|||
|
|
color: white;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
.callout-feed {
|
|||
|
|
position: relative;
|
|||
|
|
width: 86px;
|
|||
|
|
height: 77px;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
border: 2px solid #000;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
.callout-feed-cluster {
|
|||
|
|
width: 48px;
|
|||
|
|
height: 48px;
|
|||
|
|
border-radius: 24px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
border: 2px solid #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
.online-thumb {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
z-index: 2; /* 在线图在上层 */
|
|||
|
|
opacity: 0; /* 初始透明 */
|
|||
|
|
transition: opacity 0.3s ease; /* 平滑过渡效果 */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 加载完成后显示在线图片 */
|
|||
|
|
.online-thumb.loaded {
|
|||
|
|
opacity: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
.callout-feed-cluster {
|
|||
|
|
font-size: 16px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.callout-feed-count {
|
|||
|
|
font-size: 16px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ===================== 炫酷地图气泡 callout ===================== */
|
|||
|
|
.customCallout,
|
|||
|
|
.callout-vertical {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: flex-start;
|
|||
|
|
min-width: 110px;
|
|||
|
|
max-width: 180px;
|
|||
|
|
z-index: 999;
|
|||
|
|
background: transparent;
|
|||
|
|
box-shadow: none;
|
|||
|
|
border: none;
|
|||
|
|
padding: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.callout-bubble {
|
|||
|
|
background: linear-gradient(23deg, #68F9FE 0%, #AA93ED 100%);
|
|||
|
|
border-radius: 18px;
|
|||
|
|
box-shadow: 0 4px 24px 0 rgba(104, 249, 254, 0.25), 0 0 12px 2px #fff3;
|
|||
|
|
padding: 10px 16px 8px 16px;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
position: relative;
|
|||
|
|
border: 2px solid #fff;
|
|||
|
|
animation: callout-pop 0.4s cubic-bezier(.68, -0.55, .27, 1.55);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes callout-pop {
|
|||
|
|
0% {
|
|||
|
|
transform: scale(0.7);
|
|||
|
|
opacity: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
80% {
|
|||
|
|
transform: scale(1.1);
|
|||
|
|
opacity: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
100% {
|
|||
|
|
transform: scale(1);
|
|||
|
|
opacity: 1;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.callout-user .callout-bubble {
|
|||
|
|
background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
|
|||
|
|
box-shadow: 0 4px 24px 0 rgba(67, 233, 123, 0.18), 0 0 12px 2px #fff3;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.callout-merchant .callout-bubble {
|
|||
|
|
background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
|
|||
|
|
box-shadow: 0 4px 24px 0 rgba(250, 112, 154, 0.18), 0 0 12px 2px #fff3;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.callout-static .callout-bubble {
|
|||
|
|
background: linear-gradient(135deg, #4285f4 0%, #34a853 100%);
|
|||
|
|
box-shadow: 0 4px 24px 0 rgba(66, 133, 244, 0.18), 0 0 12px 2px #fff3;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.callout-nickname {
|
|||
|
|
font-size: 15px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
color: rgb(8, 8, 8);
|
|||
|
|
margin-bottom: 6px;
|
|||
|
|
text-align: center;
|
|||
|
|
letter-spacing: 1px;
|
|||
|
|
text-shadow: 0 2px 8px #0006, 0 0 6px #fff8;
|
|||
|
|
max-width: 120px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.callout-text-glow {
|
|||
|
|
text-shadow: 0 0 8px #fff, 0 2px 8px #0006, 0 0 16px #fff8;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.callout-avatar {
|
|||
|
|
width: 38px;
|
|||
|
|
height: 38px;
|
|||
|
|
border-radius: 50%; /* 圆形显示 */
|
|||
|
|
border: 2px solid #fff;
|
|||
|
|
box-shadow: 0 0 8px 1px #fff8, 0 2px 4px #0003;
|
|||
|
|
background: #eee; /* 图片加载前的占位背景 */
|
|||
|
|
object-fit: cover; /* 核心：从中心裁剪，保持比例填充容器 */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
.callout-avatar-dot {
|
|||
|
|
width: 15px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
height: 15px;
|
|||
|
|
background: #eee;
|
|||
|
|
object-fit: cover;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
.callout-avatar-dot-stranger {
|
|||
|
|
margin-top: -15px;
|
|||
|
|
margin-left: 15px;
|
|||
|
|
width: 15px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
height: 15px;
|
|||
|
|
background: #eee;
|
|||
|
|
object-fit: cover;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.callout-avatar-dot-mine {
|
|||
|
|
width: 16px; /* 适当当缩小尺寸 */
|
|||
|
|
height: 16px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 15px; /* 距离头像底部2px */
|
|||
|
|
right: 15px; /* 距离头像右侧2px */
|
|||
|
|
border: 2px solid #ffffffff; /* 白色边框与头像边框呼应 */
|
|||
|
|
z-index: 2; /* 确保在头像上方显示 */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 解决头像被截断的容器样式 */
|
|||
|
|
.mine-avatar-container {
|
|||
|
|
position: relative;
|
|||
|
|
width: 88px;
|
|||
|
|
/* 比头像大10px，避免边缘截断 */
|
|||
|
|
height: 88px;
|
|||
|
|
overflow: visible;
|
|||
|
|
/* 关键：允许内容超出容器显示 */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 修复头像显示不全问题 */
|
|||
|
|
.callout-avatar-mine {
|
|||
|
|
width: 44px;
|
|||
|
|
/* 原始头像尺寸 */
|
|||
|
|
height: 44px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
/* 保持圆形 */
|
|||
|
|
border: 2px solid #fff;
|
|||
|
|
position: absolute;
|
|||
|
|
top: 50%;
|
|||
|
|
/* 垂直居中 */
|
|||
|
|
left: 50%;
|
|||
|
|
/* 水平居中 */
|
|||
|
|
transform: translate(-50%, -50%);
|
|||
|
|
/* 精准居中 */
|
|||
|
|
z-index: 1;
|
|||
|
|
/* 确保头像在容器底层 */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 方向箭头样式（优化位置避免遮挡头像） */
|
|||
|
|
.direction-indicator {
|
|||
|
|
position: absolute;
|
|||
|
|
width: 18px;
|
|||
|
|
height: 18px;
|
|||
|
|
left: 50%;
|
|||
|
|
transform-origin: 50% 40px;
|
|||
|
|
/* 旋转原点=头像中心 */
|
|||
|
|
z-index: 2;
|
|||
|
|
/* 箭头在头像上方 */
|
|||
|
|
margin-left: -9px;
|
|||
|
|
margin-top:4px;
|
|||
|
|
pointer-events: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
.callout-avatar-glow {
|
|||
|
|
box-shadow: 0 0 16px 4px #38f9d7cc, 0 2px 8px #0003;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.callout-battery {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
font-size: 13px;
|
|||
|
|
color: rgb(10, 10, 10);
|
|||
|
|
margin-top: 2px;
|
|||
|
|
text-shadow: 0 1px 4px #0006;
|
|||
|
|
font-weight: 500;
|
|||
|
|
background: rgba(0, 0, 0, 0.12);
|
|||
|
|
border-radius: 8px;
|
|||
|
|
padding: 2px 8px 2px 4px;
|
|||
|
|
min-width: 38px;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.callout-battery-glow {
|
|||
|
|
text-shadow: 0 0 8px #fff, 0 1px 4px #0006;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.callout-battery-icon {
|
|||
|
|
width: 16px;
|
|||
|
|
height: 16px;
|
|||
|
|
margin-right: 4px;
|
|||
|
|
vertical-align: middle;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.callout-merchant-icon {
|
|||
|
|
width: 44px;
|
|||
|
|
height: 44px;
|
|||
|
|
border-radius: 12px;
|
|||
|
|
margin-bottom: 4px;
|
|||
|
|
background: #fff;
|
|||
|
|
object-fit: cover;
|
|||
|
|
box-shadow: 0 0 12px 2px #fff8, 0 2px 8px #0002;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 商家名称高亮显示样式 */
|
|||
|
|
.callout-merchant-name {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
font-weight: bold;
|
|||
|
|
color: #382200;
|
|||
|
|
text-align: center;
|
|||
|
|
padding: 8rpx 32rpx;
|
|||
|
|
background: #FFFFFF;
|
|||
|
|
border-radius: 24rpx;
|
|||
|
|
border: 2rpx solid #000000;
|
|||
|
|
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
|
|||
|
|
white-space: normal;
|
|||
|
|
word-wrap: break-word;
|
|||
|
|
word-break: break-all;
|
|||
|
|
min-width: 160rpx;
|
|||
|
|
max-width: 300rpx;
|
|||
|
|
letter-spacing: 1rpx;
|
|||
|
|
display: inline-flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
min-height: 56rpx;
|
|||
|
|
line-height: 1.2;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.callout-merchant-name-active {
|
|||
|
|
background: #FFE5D9;
|
|||
|
|
border-color: #FF6F3C;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.callout-merchant-glow {
|
|||
|
|
box-shadow: 0 0 16px 4px #fa709acc, 0 2px 8px #0003;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
/* 兼容旧结构的圆形icon和内容 */
|
|||
|
|
.circle {
|
|||
|
|
width: 20px;
|
|||
|
|
height: 20px;
|
|||
|
|
border: 1px solid #ccc;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.icon {
|
|||
|
|
width: 16px;
|
|||
|
|
height: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.content {
|
|||
|
|
flex: 0 1 auto;
|
|||
|
|
margin: 0 10px;
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 显示模式筛选弹窗样式 */
|
|||
|
|
.filter-modal {
|
|||
|
|
position: fixed;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
z-index: 1000;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.filter-mask {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
background: rgba(0, 0, 0, 0.5);
|
|||
|
|
backdrop-filter: blur(4px);
|
|||
|
|
animation: fadeIn 0.3s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.filter-options {
|
|||
|
|
position: relative;
|
|||
|
|
background: rgba(255, 255, 255, 0.95);
|
|||
|
|
backdrop-filter: blur(20px);
|
|||
|
|
border-radius: 24rpx;
|
|||
|
|
padding: 20rpx 0;
|
|||
|
|
box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.15);
|
|||
|
|
border: 1px solid rgba(255, 255, 255, 0.8);
|
|||
|
|
animation: slideUp 0.3s ease;
|
|||
|
|
min-width: 60%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes fadeIn {
|
|||
|
|
from {
|
|||
|
|
opacity: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
to {
|
|||
|
|
opacity: 1;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes slideUp {
|
|||
|
|
from {
|
|||
|
|
opacity: 0;
|
|||
|
|
transform: translateY(20rpx) scale(0.98);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
to {
|
|||
|
|
opacity: 1;
|
|||
|
|
transform: translateY(0) scale(1);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.filter-option {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 20rpx;
|
|||
|
|
padding: 30rpx 40rpx;
|
|||
|
|
transition: all 0.2s ease;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.filter-option:active {
|
|||
|
|
background: rgba(0, 0, 0, 0.03);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.filter-option.active {
|
|||
|
|
background: rgba(102, 126, 234, 0.08);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.filter-option.active::before {
|
|||
|
|
content: '';
|
|||
|
|
position: absolute;
|
|||
|
|
left: 0;
|
|||
|
|
top: 50%;
|
|||
|
|
transform: translateY(-50%);
|
|||
|
|
width: 6rpx;
|
|||
|
|
height: 40rpx;
|
|||
|
|
background: linear-gradient(135deg, #667eea, #764ba2);
|
|||
|
|
border-radius: 0 3rpx 3rpx 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.filter-icon {
|
|||
|
|
font-size: 36rpx;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.filter-text {
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
color: #333;
|
|||
|
|
font-weight: 500;
|
|||
|
|
flex: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.filter-option.active .filter-text {
|
|||
|
|
color: #667eea;
|
|||
|
|
font-weight: 600;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 分割线 */
|
|||
|
|
.filter-options .filter-option:not(:last-child)::after {
|
|||
|
|
content: '';
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 0;
|
|||
|
|
left: 40rpx;
|
|||
|
|
right: 40rpx;
|
|||
|
|
height: 1rpx;
|
|||
|
|
background: rgba(0, 0, 0, 0.06);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 适配横屏和不同尺寸设备 */
|
|||
|
|
@media (min-width: 768px) {
|
|||
|
|
.filter-options {
|
|||
|
|
min-width: 40%;
|
|||
|
|
max-width: 320px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 深色模式支持 */
|
|||
|
|
@media (prefers-color-scheme: dark) {
|
|||
|
|
.filter-options {
|
|||
|
|
background: rgba(26, 26, 26, 0.95);
|
|||
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.filter-text {
|
|||
|
|
color: #e0e0e0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.filter-option:active {
|
|||
|
|
background: rgba(255, 255, 255, 0.05);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.filter-option.active {
|
|||
|
|
background: rgba(102, 126, 234, 0.15);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.filter-option:not(:last-child)::after {
|
|||
|
|
background: rgba(255, 255, 255, 0.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.filter-option.active .filter-text {
|
|||
|
|
color: #8ea0fc;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 调试按钮 */
|
|||
|
|
.debug-button {
|
|||
|
|
position: absolute;
|
|||
|
|
width: 44px;
|
|||
|
|
height: 44px;
|
|||
|
|
background: rgba(255, 255, 255, 0.9);
|
|||
|
|
border-radius: 50%;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|||
|
|
z-index: 10;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.debug-icon {
|
|||
|
|
font-size: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ===== 搜索相关样式 ===== */
|
|||
|
|
/* 搜索按钮样式：圆形、半透明黑色背景 */
|
|||
|
|
.search-btn {
|
|||
|
|
width: 44px;
|
|||
|
|
/* 按钮宽度 */
|
|||
|
|
height: 44px;
|
|||
|
|
/* 按钮高度 */
|
|||
|
|
background: rgba(0, 0, 0, 0.8);
|
|||
|
|
/* 半透明黑色背景 */
|
|||
|
|
border-radius: 50%;
|
|||
|
|
/* 圆形按钮 */
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
|||
|
|
/* 阴影效果 */
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
/* 平滑过渡动画 */
|
|||
|
|
margin-right: 8px;
|
|||
|
|
/* 在个人主页按钮左边保留适当间距 */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 搜索按钮点击状态：缩小并变为不透明黑色 */
|
|||
|
|
.search-btn:active {
|
|||
|
|
transform: scale(0.95);
|
|||
|
|
/* 缩小效果 */
|
|||
|
|
background: rgba(0, 0, 0, 1);
|
|||
|
|
/* 不透明黑色 */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 搜索按钮内图标样式：白色SVG图标 */
|
|||
|
|
.search-btn .search-icon {
|
|||
|
|
width: 20px;
|
|||
|
|
/* 图标宽度 */
|
|||
|
|
height: 20px;
|
|||
|
|
/* 图标高度 */
|
|||
|
|
filter: brightness(0) invert(1);
|
|||
|
|
/* 滤镜效果：将图标变为白色 */
|
|||
|
|
position: static;
|
|||
|
|
/* left: auto; */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 搜索建议列表容器 */
|
|||
|
|
.search-suggestions-container {
|
|||
|
|
position: absolute;
|
|||
|
|
top: calc(var(--nav-bar-height, 88px) + 70px);
|
|||
|
|
left: 20rpx;
|
|||
|
|
right: 20rpx;
|
|||
|
|
max-height: 500rpx;
|
|||
|
|
background-color: rgba(0, 0, 0, 0.9);
|
|||
|
|
border-radius: 16rpx;
|
|||
|
|
padding: 20rpx;
|
|||
|
|
z-index: 200;
|
|||
|
|
overflow-y: auto;
|
|||
|
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.5);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 搜索中状态 */
|
|||
|
|
.searching-status {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
padding: 40rpx 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.searching-spinner {
|
|||
|
|
width: 32rpx;
|
|||
|
|
height: 32rpx;
|
|||
|
|
border: 4rpx solid rgba(255, 255, 255, 0.3);
|
|||
|
|
border-radius: 50%;
|
|||
|
|
border-top-color: #fff;
|
|||
|
|
animation: spin 1s linear infinite;
|
|||
|
|
margin-right: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes spin {
|
|||
|
|
to {
|
|||
|
|
transform: rotate(360deg);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.searching-text {
|
|||
|
|
color: #fff;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 搜索历史 */
|
|||
|
|
.search-history-header {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
padding-bottom: 20rpx;
|
|||
|
|
border-bottom: 1rpx solid rgba(255, 255, 255, 0.2);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.search-history-title {
|
|||
|
|
color: #aaa;
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.search-history-clear {
|
|||
|
|
color: #ff9500;
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.search-history-list {
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
gap: 16rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.search-history-item {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|||
|
|
padding: 12rpx 24rpx;
|
|||
|
|
border-radius: 32rpx;
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.search-history-item:active {
|
|||
|
|
background-color: rgba(255, 255, 255, 0.2);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.history-icon {
|
|||
|
|
width: 24rpx;
|
|||
|
|
height: 24rpx;
|
|||
|
|
margin-right: 12rpx;
|
|||
|
|
filter: brightness(0) invert(1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 搜索建议列表 */
|
|||
|
|
/* .search-suggestions-list {
|
|||
|
|
|
|||
|
|
} */
|
|||
|
|
.search-suggestion-item {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
padding: 24rpx 0;
|
|||
|
|
border-bottom: 1rpx solid rgba(255, 255, 255, 0.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.search-suggestion-item:last-child {
|
|||
|
|
border-bottom: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.search-suggestion-item:active {
|
|||
|
|
background-color: rgba(255, 255, 255, 0.05);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.suggestion-content {
|
|||
|
|
flex: 1;
|
|||
|
|
margin-right: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.suggestion-title {
|
|||
|
|
display: block;
|
|||
|
|
color: #fff;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
margin-bottom: 8rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.suggestion-address {
|
|||
|
|
display: block;
|
|||
|
|
color: #aaa;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
line-height: 1.4;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.suggestion-distance {
|
|||
|
|
color: #ff9500;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 无结果提示 */
|
|||
|
|
.no-results {
|
|||
|
|
text-align: center;
|
|||
|
|
padding: 60rpx 20rpx;
|
|||
|
|
color: #aaa;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 适配iOS安全区域 */
|
|||
|
|
@media screen and (device-width: 375px) and (device-height: 812px) {
|
|||
|
|
.search-suggestions-container {
|
|||
|
|
top: calc(var(--nav-bar-height, 88px) + 80px);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 搜索框容器样式：圆角矩形、白色背景、阴影效果 */
|
|||
|
|
.search-input-wrapper {
|
|||
|
|
width: 100%;
|
|||
|
|
max-width: 100%;
|
|||
|
|
height: 44px;
|
|||
|
|
/* 搜索框高度 */
|
|||
|
|
background: #ffffff;
|
|||
|
|
/* 白色背景 */
|
|||
|
|
border-radius: 24px;
|
|||
|
|
/* 圆角 */
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 0 16px;
|
|||
|
|
/* 左右内边距 */
|
|||
|
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
|||
|
|
/* 阴影效果 */
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
/* 过渡动画 */
|
|||
|
|
animation: searchBoxSlideIn 0.3s ease;
|
|||
|
|
/* 滑入动画 */
|
|||
|
|
backdrop-filter: blur(10px);
|
|||
|
|
/* 背景模糊效果 */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 废弃的样式，使用.search-input-wrapper替代 */
|
|||
|
|
.search-input-container {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 搜索框滑入动画：从上方淡入并下滑 */
|
|||
|
|
@keyframes searchBoxSlideIn {
|
|||
|
|
from {
|
|||
|
|
opacity: 0;
|
|||
|
|
/* 透明 */
|
|||
|
|
transform: translateY(-10px);
|
|||
|
|
/* 向上偏移 */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
to {
|
|||
|
|
opacity: 1;
|
|||
|
|
/* 不透明 */
|
|||
|
|
transform: translateY(0);
|
|||
|
|
/* 回到原位 */
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 搜索输入框样式：占据大部分空间、无边框 */
|
|||
|
|
.search-input {
|
|||
|
|
flex: 1;
|
|||
|
|
/* 占据剩余空间 */
|
|||
|
|
font-size: 14px;
|
|||
|
|
/* 字体大小 */
|
|||
|
|
color: #333;
|
|||
|
|
/* 黑色文字 */
|
|||
|
|
padding: 0;
|
|||
|
|
margin: 0;
|
|||
|
|
border: none;
|
|||
|
|
/* 无边框 */
|
|||
|
|
background: transparent;
|
|||
|
|
/* 透明背景 */
|
|||
|
|
outline: none;
|
|||
|
|
/* 无轮廓线 */
|
|||
|
|
height: 32px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 搜索输入框占位符样式：灰色半透明文字 */
|
|||
|
|
.search-input::placeholder {
|
|||
|
|
color: rgba(51, 51, 51, 0.5);
|
|||
|
|
/* 灰色半透明 */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 搜索框关闭按钮样式：居中的关闭符号 */
|
|||
|
|
.search-input-close {
|
|||
|
|
width: 24px;
|
|||
|
|
height: 24px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
color: rgba(51, 51, 51, 0.8);
|
|||
|
|
/* 灰色文字 */
|
|||
|
|
font-size: 16px;
|
|||
|
|
margin-left: 8px;
|
|||
|
|
/* 与输入框的间距 */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ===== 右上角按钮组样式 - 在flex布局中已废弃，使用.right-elements-container替代 */
|
|||
|
|
.right-top-buttons {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.avatar-container {
|
|||
|
|
position: relative;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.avatar-text {
|
|||
|
|
color: white;
|
|||
|
|
font-size: 16px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.notification-dot {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 2px;
|
|||
|
|
right: 2px;
|
|||
|
|
width: 8px;
|
|||
|
|
height: 8px;
|
|||
|
|
background: #ff4d4f;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
border: 2px solid white;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.right-vertical-buttons {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 16px;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.more-btn,
|
|||
|
|
.mapsettings-btn {
|
|||
|
|
width: 44px;
|
|||
|
|
height: 44px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.more-btn:active,
|
|||
|
|
.mapsettings-btn:active {
|
|||
|
|
transform: scale(0.95);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.more-icon,
|
|||
|
|
.mapsettings-icon {
|
|||
|
|
width: 28px;
|
|||
|
|
height: 28px;
|
|||
|
|
filter: brightness(0) saturate(100%);
|
|||
|
|
/* 浅色模式下全黑色 */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ===== 更多菜单弹窗样式 - 卡片形式 ===== */
|
|||
|
|
.more-menu-modal {
|
|||
|
|
position: fixed;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
z-index: 999;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: flex-end;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
padding-right: 20px;
|
|||
|
|
padding-top: 260px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.more-menu-mask {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
background: rgba(0, 0, 0, 0.3);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.more-menu-content {
|
|||
|
|
position: relative;
|
|||
|
|
width: 200px;
|
|||
|
|
background: #1a1a1a;
|
|||
|
|
border-radius: 12px;
|
|||
|
|
padding: 8px 0;
|
|||
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
|||
|
|
animation: popupMenu 0.25s ease-out;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes popupMenu {
|
|||
|
|
from {
|
|||
|
|
opacity: 0;
|
|||
|
|
transform: translateY(-10px) scale(0.95);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
to {
|
|||
|
|
opacity: 1;
|
|||
|
|
transform: translateY(0) scale(1);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.more-menu-item {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 14px 20px;
|
|||
|
|
transition: all 0.2s ease;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.more-menu-item:active {
|
|||
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 菜单项之间的分割线 */
|
|||
|
|
.more-menu-item:not(:last-child)::after {
|
|||
|
|
content: '';
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 0;
|
|||
|
|
left: 20px;
|
|||
|
|
right: 20px;
|
|||
|
|
height: 1px;
|
|||
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.more-menu-icon {
|
|||
|
|
width: 24px;
|
|||
|
|
height: 24px;
|
|||
|
|
margin-right: 14px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.more-menu-text {
|
|||
|
|
font-size: 15px;
|
|||
|
|
color: #ffffff;
|
|||
|
|
flex: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 更多菜单中添加好友按钮的小红点样式 */
|
|||
|
|
.more-menu-item .notification-dot {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 12px;
|
|||
|
|
right: 12px;
|
|||
|
|
width: 8px;
|
|||
|
|
height: 8px;
|
|||
|
|
background: #ff4d4f;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
border: 2px solid white;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 更多菜单项的容器样式调整 */
|
|||
|
|
.more-menu-item {
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ===== 地图设置弹窗样式 ===== */
|
|||
|
|
.map-settings-modal {
|
|||
|
|
position: fixed;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
z-index: 10002;
|
|||
|
|
/* 提高z-index，确保在底部导航栏之上 */
|
|||
|
|
display: flex;
|
|||
|
|
align-items: flex-end;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.map-settings-mask {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
background: rgba(0, 0, 0, 0.3);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.map-settings-content {
|
|||
|
|
position: relative;
|
|||
|
|
width: 100%;
|
|||
|
|
background: black;
|
|||
|
|
border-radius: 20px 20px 0 0;
|
|||
|
|
padding: 12px;
|
|||
|
|
box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.3);
|
|||
|
|
animation: slideInUp 0.3s ease;
|
|||
|
|
max-height: 80vh;
|
|||
|
|
overflow-y: auto;
|
|||
|
|
transition: transform 0.3s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.map-settings-content.sliding-down {
|
|||
|
|
transform: translateY(100%);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes slideInUp {
|
|||
|
|
from {
|
|||
|
|
transform: translateY(100%);
|
|||
|
|
opacity: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
to {
|
|||
|
|
transform: translateY(0);
|
|||
|
|
opacity: 1;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes slideOutDown {
|
|||
|
|
from {
|
|||
|
|
transform: translateY(0);
|
|||
|
|
opacity: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
to {
|
|||
|
|
transform: translateY(100%);
|
|||
|
|
opacity: 0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.map-settings-title {
|
|||
|
|
font-size: 20px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: white;
|
|||
|
|
text-align: center;
|
|||
|
|
margin-bottom: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.map-settings-section {
|
|||
|
|
margin-bottom: 24px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.map-settings-section-title {
|
|||
|
|
font-size: 16px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: white;
|
|||
|
|
margin-bottom: 16px;
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.map-layer-options {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-around;
|
|||
|
|
gap: 12px;
|
|||
|
|
margin: 0 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.map-layer-option {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 0px;
|
|||
|
|
background: transparent;
|
|||
|
|
border-radius: 20px;
|
|||
|
|
transition: all 0.2s ease;
|
|||
|
|
position: relative;
|
|||
|
|
border: 3px solid transparent;
|
|||
|
|
/* 默认无色透明边框 */
|
|||
|
|
flex: 1;
|
|||
|
|
max-width: 150px;
|
|||
|
|
height: 100px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.map-layer-option.active {
|
|||
|
|
border: 3px solid #0cff18;
|
|||
|
|
background: transparent;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.map-layer-option:active {
|
|||
|
|
transform: scale(0.98);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.map-layer-icon {
|
|||
|
|
font-size: 32px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.map-layer-text-bottom {
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: white;
|
|||
|
|
width: 100%;
|
|||
|
|
text-align: center;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
height: 100%;
|
|||
|
|
margin: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* B框 - 图标框，占四分之三 */
|
|||
|
|
.map-layer-icon-box {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 75%;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
border-top-left-radius: 12px;
|
|||
|
|
border-top-right-radius: 12px;
|
|||
|
|
padding: 16px 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 探索按钮渐变背景 - 白粉黄绿色有角度 */
|
|||
|
|
.standard-bg {
|
|||
|
|
background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 20%, #e0ffe0 60%, #8bff8b 100%);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 卫星按钮渐变背景 - 绿蓝青绿有角度 */
|
|||
|
|
.satellite-bg {
|
|||
|
|
background: linear-gradient(135deg, #00cc00 0%, #0099cc 50%, #00cccc 75%, #00ffcc 100%);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* C框 - 文本框，占四分之一 */
|
|||
|
|
.map-layer-text-box {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 25%;
|
|||
|
|
background: #333;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
border-bottom-left-radius: 12px;
|
|||
|
|
border-bottom-right-radius: 12px;
|
|||
|
|
padding: 8px 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
.map-layer-text-box-img {
|
|||
|
|
height: 100%;
|
|||
|
|
width: 100%;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
padding: 0px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.map-display-options {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
padding: 16px 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.map-display-text {
|
|||
|
|
font-size: 16px;
|
|||
|
|
color: white;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.map-settings-actions {
|
|||
|
|
margin-top: 32px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.map-settings-close-btn {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 48px;
|
|||
|
|
background: #007aff;
|
|||
|
|
color: white;
|
|||
|
|
font-size: 16px;
|
|||
|
|
border: none;
|
|||
|
|
border-radius: 24px;
|
|||
|
|
box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
|
|||
|
|
transition: all 0.2s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.map-settings-close-btn:active {
|
|||
|
|
transform: scale(0.98);
|
|||
|
|
box-shadow: 0 2px 6px rgba(0, 122, 255, 0.3);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 深色模式适配 */
|
|||
|
|
@media (prefers-color-scheme: dark) {
|
|||
|
|
.search-btn {
|
|||
|
|
background: rgba(30, 30, 30, 0.95);
|
|||
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.search-btn:active {
|
|||
|
|
background: rgba(40, 40, 40, 1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.more-icon,
|
|||
|
|
.mapsettings-icon {
|
|||
|
|
filter: none;
|
|||
|
|
/* 深色模式下使用原色 */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.search-input-wrapper {
|
|||
|
|
background: rgba(30, 30, 30, 0.95);
|
|||
|
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.search-input-container {
|
|||
|
|
background: rgba(30, 30, 30, 0.95);
|
|||
|
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.search-input {
|
|||
|
|
color: #e0e0e0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.search-input::placeholder {
|
|||
|
|
color: rgba(255, 255, 255, 0.6);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.search-input-close {
|
|||
|
|
color: #777;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.more-menu-content {
|
|||
|
|
background: #222;
|
|||
|
|
box-shadow: -4px 0 16px rgba(0, 0, 0, 0.3);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.more-menu-item:active {
|
|||
|
|
background-color: #333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.more-menu-text {
|
|||
|
|
color: #e0e0e0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.map-settings-content {
|
|||
|
|
background: #222;
|
|||
|
|
box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.3);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.map-settings-title {
|
|||
|
|
color: #e0e0e0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.map-settings-section-title {
|
|||
|
|
color: #999;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.map-layer-option {
|
|||
|
|
background: #333;
|
|||
|
|
color: #e0e0e0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.map-display-text {
|
|||
|
|
color: #e0e0e0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 深色模式下的快速发布按钮样式 */
|
|||
|
|
.quick-publish-button {
|
|||
|
|
background-color: #06b259;
|
|||
|
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.3);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 深色模式下的相机图标样式 */
|
|||
|
|
.camera-icon {
|
|||
|
|
filter: brightness(0) invert(1);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 右下角快速发布动态按钮样式 */
|
|||
|
|
.quick-publish-container {
|
|||
|
|
position: fixed;
|
|||
|
|
bottom: 100rpx;
|
|||
|
|
right: 40rpx;
|
|||
|
|
z-index: 999;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.quick-publish-button {
|
|||
|
|
width: 160rpx;
|
|||
|
|
height: 160rpx;
|
|||
|
|
background-color: #07c160;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.15);
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.quick-publish-button:active {
|
|||
|
|
transform: scale(0.95);
|
|||
|
|
opacity: 0.9;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.quick-publish-plus {
|
|||
|
|
color: white;
|
|||
|
|
font-size: 80rpx;
|
|||
|
|
font-weight: bold;
|
|||
|
|
line-height: 1;
|
|||
|
|
margin-top: -20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.quick-publish-text {
|
|||
|
|
color: white;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
margin-top: -10rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 地点收藏栏样式 */
|
|||
|
|
.location-favorite-bar {
|
|||
|
|
position: fixed;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
z-index: 1000;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: flex-end;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-favorite-mask {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-favorite-sheet {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 60vh;
|
|||
|
|
background-color: #000;
|
|||
|
|
border-top-left-radius: 30rpx;
|
|||
|
|
border-top-right-radius: 30rpx;
|
|||
|
|
position: relative;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
transform: translateY(0);
|
|||
|
|
transition: transform 0.3s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 地点收藏栏顶部 */
|
|||
|
|
.location-favorite-header {
|
|||
|
|
position: relative;
|
|||
|
|
padding-top: 20rpx;
|
|||
|
|
padding-right: 30rpx;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-favorite-sheet-handle {
|
|||
|
|
width: 80rpx;
|
|||
|
|
height: 8rpx;
|
|||
|
|
background-color: #555;
|
|||
|
|
border-radius: 4rpx;
|
|||
|
|
margin-bottom: 30rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-favorite-sheet-close {
|
|||
|
|
position: absolute;
|
|||
|
|
right: 30rpx;
|
|||
|
|
top: 20rpx;
|
|||
|
|
width: 60rpx;
|
|||
|
|
height: 60rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
color: #fff;
|
|||
|
|
font-size: 40rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 地点收藏栏搜索框 */
|
|||
|
|
.location-favorite-search {
|
|||
|
|
margin: 0 30rpx 30rpx 30rpx;
|
|||
|
|
position: relative;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.search-icon {
|
|||
|
|
position: absolute;
|
|||
|
|
left: 30rpx;
|
|||
|
|
color: #888;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.result-menu-item {
|
|||
|
|
/* 确保容器宽度充满父元素，为居中提供基础 */
|
|||
|
|
width: 100%;
|
|||
|
|
/* 开启弹性布局，方便子元素居中 */
|
|||
|
|
display: flex;
|
|||
|
|
/* 水平方向居中对齐 */
|
|||
|
|
justify-content: center;
|
|||
|
|
/* 垂直方向可根据需要调整（这里顶部对齐） */
|
|||
|
|
align-items: flex-start;
|
|||
|
|
/* 可添加适当的内边距控制位置 */
|
|||
|
|
padding: 2px 0;
|
|||
|
|
/* 上下各10px间距，左右0 */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.result-menu-item image {
|
|||
|
|
/* 控制图片大小（根据实际图片尺寸调整） */
|
|||
|
|
width: 30px;
|
|||
|
|
/* 示例宽度 */
|
|||
|
|
height: 20px;
|
|||
|
|
/* 示例高度，与宽度一致保持正方形 */
|
|||
|
|
/* 确保图片自适应容器大小 */
|
|||
|
|
object-fit: contain;
|
|||
|
|
/* 移除可能的默认间距 */
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
.location-favorite-input {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 80rpx;
|
|||
|
|
background-color: #333;
|
|||
|
|
border-radius: 40rpx;
|
|||
|
|
padding-left: 80rpx;
|
|||
|
|
padding-right: 80rpx;
|
|||
|
|
color: #fff;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.clear-icon {
|
|||
|
|
position: absolute;
|
|||
|
|
right: 30rpx;
|
|||
|
|
color: #888;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 地点收藏栏选项卡 */
|
|||
|
|
.location-favorite-tabs {
|
|||
|
|
display: flex;
|
|||
|
|
margin: 0 30rpx 30rpx 30rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-favorite-tab {
|
|||
|
|
margin-right: 40rpx;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
color: #fff;
|
|||
|
|
padding-bottom: 10rpx;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-favorite-tab.active {
|
|||
|
|
background: linear-gradient(to right, #ff0000, #0000ff);
|
|||
|
|
-webkit-background-clip: text;
|
|||
|
|
background-clip: text;
|
|||
|
|
color: transparent;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-favorite-tab.active::after {
|
|||
|
|
content: '';
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 0;
|
|||
|
|
left: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 4rpx;
|
|||
|
|
background: linear-gradient(to right, #ff0000, #0000ff);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 地点收藏栏列表 */
|
|||
|
|
.location-favorite-list {
|
|||
|
|
height: calc(100% - 240rpx);
|
|||
|
|
margin: 0 30rpx;
|
|||
|
|
padding-right: 30rpx;
|
|||
|
|
overflow-y: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-favorite-item {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
padding: 30rpx 0;
|
|||
|
|
border-bottom: 1rpx solid #333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-favorite-item-content {
|
|||
|
|
flex: 1;
|
|||
|
|
margin-right: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-favorite-item-name {
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
color: #fff;
|
|||
|
|
margin-bottom: 8rpx;
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-favorite-item-coord {
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
color: #888;
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-favorite-item-star {
|
|||
|
|
width: 60rpx;
|
|||
|
|
height: 60rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
color: #9c27b0;
|
|||
|
|
font-size: 40rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.star-icon {
|
|||
|
|
font-size: 40rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 地点收藏栏空状态 */
|
|||
|
|
.location-favorite-empty {
|
|||
|
|
text-align: center;
|
|||
|
|
padding: 100rpx 0;
|
|||
|
|
color: #666;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 滚动条样式 */
|
|||
|
|
.location-favorite-list::-webkit-scrollbar {
|
|||
|
|
width: 4rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-favorite-list::-webkit-scrollbar-track {
|
|||
|
|
background: #222;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-favorite-list::-webkit-scrollbar-thumb {
|
|||
|
|
background: #555;
|
|||
|
|
border-radius: 2rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.location-favorite-list::-webkit-scrollbar-thumb:hover {
|
|||
|
|
background: #666;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.map-feed-toggle {
|
|||
|
|
position: absolute;
|
|||
|
|
right: 40rpx;
|
|||
|
|
padding: 12rpx 24rpx;
|
|||
|
|
border-radius: 999rpx;
|
|||
|
|
background: rgba(28, 31, 43, 0.88);
|
|||
|
|
color: #ffffff;
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 12rpx;
|
|||
|
|
box-shadow: 0 12rpx 30rpx rgba(0, 0, 0, 0.25);
|
|||
|
|
backdrop-filter: blur(20rpx);
|
|||
|
|
border: 1px solid rgba(255, 255, 255, 0.12);
|
|||
|
|
z-index: 1100;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.map-feed-toggle.active {
|
|||
|
|
background: linear-gradient(135deg, rgba(93, 160, 255, 0.95), rgba(76, 226, 227, 0.9));
|
|||
|
|
box-shadow: 0 18rpx 34rpx rgba(93, 160, 255, 0.45);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.map-feed-toggle-icon {
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.map-feed-toggle-text {
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
font-weight: 500;
|
|||
|
|
letter-spacing: 2rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
/* ===== 搜索结果列表样式 ===== */
|
|||
|
|
/* 搜索结果容器样式：半透明白色背景、模糊效果 */
|
|||
|
|
.search-results-container {
|
|||
|
|
width: 100%;
|
|||
|
|
/* 宽度充满父容器 */
|
|||
|
|
background: rgba(255, 255, 255, 0.95);
|
|||
|
|
/* 半透明白色背景 */
|
|||
|
|
backdrop-filter: blur(10px);
|
|||
|
|
/* 背景模糊效果 */
|
|||
|
|
border-radius: 16px;
|
|||
|
|
/* 圆角 */
|
|||
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
|
|||
|
|
/* 阴影效果 */
|
|||
|
|
overflow: hidden;
|
|||
|
|
margin: 0 16px;
|
|||
|
|
/* 左右边距 */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 搜索结果列表样式：可滚动、限制最大高度 */
|
|||
|
|
.search-results-list {
|
|||
|
|
max-height: 400px;
|
|||
|
|
/* 最大高度，超出部分可滚动 */
|
|||
|
|
overflow-y: auto;
|
|||
|
|
/* 垂直滚动 */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 单个搜索结果项样式：横向布局、底部边框 */
|
|||
|
|
.search-result-item {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 16px;
|
|||
|
|
/* 内边距 */
|
|||
|
|
border-bottom: 1px solid #f0f0f0;
|
|||
|
|
/* 底部边框 */
|
|||
|
|
transition: background-color 0.2s ease;
|
|||
|
|
/* 背景色过渡动画 */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 搜索结果项点击状态：背景色变化 */
|
|||
|
|
.search-result-item:active {
|
|||
|
|
background-color: #f5f5f5;
|
|||
|
|
/* 点击时的背景色 */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 最后一个搜索结果项：移除底部边框 */
|
|||
|
|
.search-result-item:last-child {
|
|||
|
|
border-bottom: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 结果图标样式：居中显示、固定尺寸 */
|
|||
|
|
.result-icon {
|
|||
|
|
font-size: 24px;
|
|||
|
|
/* 图标大小 */
|
|||
|
|
margin-right: 16px;
|
|||
|
|
/* 与内容区的间距 */
|
|||
|
|
width: 32px;
|
|||
|
|
height: 32px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 结果内容区样式：占据剩余空间、防止溢出 */
|
|||
|
|
.result-content {
|
|||
|
|
flex: 1;
|
|||
|
|
/* 占据剩余空间 */
|
|||
|
|
min-width: 0;
|
|||
|
|
/* 允许内容收缩，避免flex子项溢出 */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 结果名称样式：黑色粗体、单行显示 */
|
|||
|
|
.result-name {
|
|||
|
|
font-size: 16px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
/* 加粗 */
|
|||
|
|
color: #333;
|
|||
|
|
/* 黑色文字 */
|
|||
|
|
margin-bottom: 4px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
/* 超出部分显示省略号 */
|
|||
|
|
white-space: nowrap;
|
|||
|
|
/* 不换行 */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 结果地址样式：灰色文字、单行显示 */
|
|||
|
|
.result-address {
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #666;
|
|||
|
|
/* 灰色文字 */
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ===== 未登录状态样式 ===== */
|
|||
|
|
|
|||
|
|
/* 登录提示按钮 */
|
|||
|
|
.login-prompt-btn {
|
|||
|
|
width: 48px;
|
|||
|
|
height: 48px;
|
|||
|
|
background: rgba(0, 0, 0, 0.6);
|
|||
|
|
border-radius: 24px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
margin: 10px 0;
|
|||
|
|
backdrop-filter: blur(5px);
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.login-prompt-btn:active {
|
|||
|
|
background: rgba(0, 0, 0, 0.8);
|
|||
|
|
transform: scale(0.95);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.login-prompt-text {
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: white;
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 登录后使用提示文字 */
|
|||
|
|
.login-required-text {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
padding: 8px 16px;
|
|||
|
|
background: rgba(0, 0, 0, 0.6);
|
|||
|
|
border-radius: 20px;
|
|||
|
|
backdrop-filter: blur(5px);
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.login-required-text:active {
|
|||
|
|
background: rgba(0, 0, 0, 0.8);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.login-required {
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: white;
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 登录按钮样式 */
|
|||
|
|
.login-btn {
|
|||
|
|
background: rgba(0, 0, 0, 0.6);
|
|||
|
|
color: white;
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.login-btn:active {
|
|||
|
|
background: rgba(0, 0, 0, 0.8);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
.share-friends-list {
|
|||
|
|
white-space: nowrap;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
/* 好友项 */
|
|||
|
|
.friend-item {
|
|||
|
|
display: inline-block;
|
|||
|
|
width: 120rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
margin-right: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
.friend-name {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
/* 文字大小 */
|
|||
|
|
color: #fff;
|
|||
|
|
/* 文字颜色 */
|
|||
|
|
text-align: center;
|
|||
|
|
/* 文字自身居中（增强对齐效果） */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.friend-avatar {
|
|||
|
|
width: 80rpx;
|
|||
|
|
height: 80rpx;
|
|||
|
|
border-radius: 20%;
|
|||
|
|
margin-bottom: 8rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
.friend-name {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #fff;
|
|||
|
|
display: block;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 分享选项容器（自动换行） */
|
|||
|
|
.share-options {
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
justify-content: flex-start;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 分享选项项 */
|
|||
|
|
.option-item {
|
|||
|
|
width: 25%;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 30rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.option-icon {
|
|||
|
|
width: 100rpx;
|
|||
|
|
height: 100rpx;
|
|||
|
|
margin-bottom: 8rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.option-name {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
.feed-bubble-header {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
padding: 16rpx;
|
|||
|
|
gap: 12rpx;
|
|||
|
|
}
|
|||
|
|
.feed-bubble-avatar {
|
|||
|
|
width: 80rpx;
|
|||
|
|
height: 80rpx;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
overflow: hidden;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
/* 外层容器：控制上下左右10px间距，高度自适应内容 */
|
|||
|
|
.feed-bubble-content {
|
|||
|
|
padding: 5px; /* 上下左右各10px间距 */
|
|||
|
|
width: 100%; /* 按需设置宽度（如适配父容器） */
|
|||
|
|
box-sizing: border-box; /* 避免padding撑大宽度 */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 内容容器：限制最多3行，多余显示省略号，高度自适应 */
|
|||
|
|
.content-inner {
|
|||
|
|
/* 关键：行数限制+省略号（修复压缩丢失问题） */
|
|||
|
|
display: -webkit-box;
|
|||
|
|
-webkit-line-clamp: 3; /* 最多3行 */
|
|||
|
|
/* 重点：用注释包裹，防止被代码压缩移除 */
|
|||
|
|
/*! autoprefixer: off */
|
|||
|
|
-webkit-box-orient: vertical;
|
|||
|
|
/*! autoprefixer: on */
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
|
|||
|
|
/* 调整：行高建议用具体像素（真机更稳定） */
|
|||
|
|
font-size: 14px;
|
|||
|
|
line-height: 22px; /* 替换1.5倍，14*1.5=21，取整22px，避免小数兼容性问题 */
|
|||
|
|
color: #fff;
|
|||
|
|
|
|||
|
|
/* 新增：确保宽度足够（避免内容被强制换行成1行） */
|
|||
|
|
width: 100%;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
.feed-bubble-avatar image {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
.feed-bubble-user-content {
|
|||
|
|
padding-top:5px;
|
|||
|
|
flex: 1;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
.feed-bubble-user-name {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #fff;
|
|||
|
|
margin-bottom: 8rpx;
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
.feed-bubble-post-content {
|
|||
|
|
font-size: 22rpx;
|
|||
|
|
color: #666;
|
|||
|
|
line-height: 1.5;
|
|||
|
|
display: -webkit-box;
|
|||
|
|
color: #fff;
|
|||
|
|
-webkit-line-clamp: 2;
|
|||
|
|
-webkit-box-orient: vertical;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
.feed-bubble-image-container {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 320rpx;
|
|||
|
|
overflow: hidden;
|
|||
|
|
background-color: #f5f5f5;
|
|||
|
|
}
|
|||
|
|
.feed-bubble-post-image {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
/* 禁用缩放（确保图片不被压缩） */
|
|||
|
|
transform: none !important;
|
|||
|
|
object-fit: cover; /* 核心：从中心裁剪，保持比例填充容器 */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
/* 原有样式完全保留，仅新增以下样式 + 微调定位 */
|
|||
|
|
.callout-feed-single {
|
|||
|
|
position: relative; /* 原有已存在，无需重复写，仅作提醒 */
|
|||
|
|
width: 172rpx;
|
|||
|
|
height: 152rpx;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
display: block; /* 恢复原有布局流，不使用flex */
|
|||
|
|
border: 2px solid #000;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.callout-feed-thumb {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%; /* 恢复原有图片高度，铺满容器 */
|
|||
|
|
border-radius: 10px; /* 恢复原有圆角 */
|
|||
|
|
display: block;
|
|||
|
|
z-index: 911;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 新增：左下方固定操作区（图片底部边框上方） */
|
|||
|
|
.callout-actions-fixed {
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 0px; /* 紧贴图片底部边框上方 */
|
|||
|
|
display: flex;
|
|||
|
|
width:100%;
|
|||
|
|
padding-bottom:2px;
|
|||
|
|
padding-top:2px;
|
|||
|
|
gap: 4px; /* 点赞和评论之间的间距 */
|
|||
|
|
z-index: 911; /* 确保在图片上方显示 */
|
|||
|
|
background-color: rgba(0, 0, 0, 0.3); /* 50% 透明度（中间值），黑色背景 */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 操作项通用样式 */
|
|||
|
|
.action-item {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 1px; /* 图标和数字间距 */
|
|||
|
|
padding: 1px 2px;
|
|||
|
|
border-radius: 2px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 图标样式 */
|
|||
|
|
.action-icon {
|
|||
|
|
width: 12px;
|
|||
|
|
height: 12px;
|
|||
|
|
margin:0px 5px 0px 5px
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 数字样式 */
|
|||
|
|
.action-count {
|
|||
|
|
font-size: 10px;
|
|||
|
|
color: #fff;
|
|||
|
|
left:5px;
|
|||
|
|
line-height: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 原有箭头样式保留 */
|
|||
|
|
.callout-arrow {
|
|||
|
|
width: 24rpx;
|
|||
|
|
height: 16rpx;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
margin-top: -2rpx;
|
|||
|
|
z-index: 1;
|
|||
|
|
}
|
|||
|
|
|