875 lines
18 KiB
Vue
875 lines
18 KiB
Vue
<template>
|
|
<view class="home-new">
|
|
<!-- Header & Search -->
|
|
<view class="header-fixed">
|
|
<view :style="{ paddingTop: statusBarHeight + 'px' }"></view>
|
|
<view class="header-content">
|
|
<!-- Location -->
|
|
<view class="location-bar">
|
|
<view class="location-inner" @click="getUserLocal">
|
|
<view class="iconfont icon-dizhi location-icon"></view>
|
|
<text class="location-text">{{ address }}</text>
|
|
<view class="iconfont icon-xiangxia location-arrow"></view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- Search Bar -->
|
|
<view class="search-container">
|
|
<input
|
|
type="text"
|
|
placeholder="请输入商家名称搜索"
|
|
class="search-input"
|
|
v-model="searchVal" />
|
|
<view class="search-icon-left">
|
|
<view class="iconfont icon-sousuo"></view>
|
|
</view>
|
|
<view class="search-btn" @click.stop="clickSearch">搜索</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- Main Content -->
|
|
<view class="main-content">
|
|
<!-- Banner / Hero -->
|
|
<view class="banner-hero">
|
|
<!-- Background Pattern Decoration -->
|
|
<view class="banner-decoration banner-decoration-top"></view>
|
|
<view class="banner-decoration banner-decoration-bottom"></view>
|
|
|
|
<view class="banner-inner">
|
|
<view class="banner-title">
|
|
玩赚积分<text class="banner-title-yellow">商城</text>
|
|
</view>
|
|
<view class="banner-subtitle-wrapper">
|
|
<view class="banner-divider"></view>
|
|
<text class="banner-subtitle">积分当钱花 · 兑换无上限</text>
|
|
<view class="banner-divider"></view>
|
|
</view>
|
|
|
|
<view class="banner-buttons">
|
|
<view class="banner-btn banner-btn-primary">
|
|
<text class="banner-btn-icon">💎</text> 积分兑换
|
|
</view>
|
|
<view class="banner-btn banner-btn-secondary">同城兑换</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- Quick Actions Grid -->
|
|
<view class="nav-grid-wrapper">
|
|
<view class="nav-grid">
|
|
<view
|
|
class="nav-item"
|
|
v-for="(item, index) in navigationList"
|
|
:key="index"
|
|
@click="toPage(item)">
|
|
<view class="nav-icon-wrapper">
|
|
<image :src="item.icon" class="nav-icon" mode="aspectFit" />
|
|
</view>
|
|
<text class="nav-label">{{ item.name }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- Store List -->
|
|
<view class="store-section">
|
|
<view class="store-header">
|
|
<view class="store-header-line"></view>
|
|
附近商家
|
|
</view>
|
|
|
|
<view class="store-list">
|
|
<view
|
|
class="store-item"
|
|
v-for="(item, index) in merList"
|
|
:key="index"
|
|
@click="toMerDetails(item)">
|
|
<view class="store-image-wrapper">
|
|
<image
|
|
:src="item.head_photo"
|
|
class="store-image"
|
|
mode="aspectFill" />
|
|
<!-- <view class="store-badge" v-if="index < 3">严选</view> -->
|
|
</view>
|
|
<view class="store-info">
|
|
<view class="store-name">{{ item.name }}</view>
|
|
<view class="store-rating">
|
|
<view class="rating-stars">
|
|
<text class="stars-text">★★★★★</text>
|
|
<text class="rating-score">5.0分</text>
|
|
</view>
|
|
<text class="rating-divider">|</text>
|
|
<text class="rating-sales">月售 1000+</text>
|
|
</view>
|
|
<view class="store-distance">
|
|
<text class="distance-placeholder">.</text>
|
|
<text class="distance-text">
|
|
距离我{{
|
|
calculateDistance(
|
|
userLocalNum.t,
|
|
userLocalNum.l,
|
|
Number(item.lat),
|
|
Number(item.lon),
|
|
)
|
|
}}
|
|
</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- Empty State -->
|
|
<view v-if="merList.length === 0" class="store-empty">
|
|
暂无附近商家
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<Popup :imgArr="imgList" />
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import Taro from '@tarojs/taro';
|
|
import { ref } from 'vue';
|
|
import { getHomeList } from '@/api/home';
|
|
import { getMerList } from '@/api/goods';
|
|
import { bindParent } from '@/api/user';
|
|
import { calculateDistance } from '@/utils';
|
|
import Popup from '@/components/Popup.vue';
|
|
|
|
const statusBarHeight = Taro.getSystemInfoSync().statusBarHeight || 20;
|
|
|
|
const address = ref('获取位置中...');
|
|
const searchVal = ref('');
|
|
const navigationList = ref<any[]>([]);
|
|
const merList = ref<any[]>([]);
|
|
const pageVal = ref({
|
|
page: 1,
|
|
total: 0,
|
|
});
|
|
const userLocalNum = ref({
|
|
l: 0,
|
|
t: 0,
|
|
});
|
|
|
|
const imgList = ref([require('../../../static/zhenggai.png')]);
|
|
|
|
// Lifecycle
|
|
Taro.useLoad(() => {
|
|
getPrivacy();
|
|
getUserLocal();
|
|
getNavLists();
|
|
checkBindParent();
|
|
});
|
|
|
|
Taro.useShareAppMessage(() => ({
|
|
title: '捷兑通',
|
|
path: `/pages/index/index?scene=${Taro.getStorageSync('token')}`,
|
|
imageUrl: 'https://upload.jdt168.com/1714375021923881119_Share.jpg',
|
|
}));
|
|
|
|
Taro.useReachBottom(() => {
|
|
if (merList.value.length >= pageVal.value.total) {
|
|
if (pageVal.value.total > 0) {
|
|
Taro.showToast({ title: '没有更多了', icon: 'none' });
|
|
}
|
|
return;
|
|
}
|
|
pageVal.value.page += 1;
|
|
fetchMerList();
|
|
});
|
|
|
|
// Methods
|
|
const checkBindParent = async () => {
|
|
if (Taro.getStorageSync('token') && Taro.getStorageSync('bind_id')) {
|
|
try {
|
|
const res: any = await bindParent({
|
|
uid: Taro.getStorageSync('bind_id'),
|
|
});
|
|
Taro.showToast({
|
|
title: res.msg,
|
|
});
|
|
Taro.removeStorageSync('bind_id');
|
|
} catch (error) {
|
|
Taro.removeStorageSync('bind_id');
|
|
}
|
|
}
|
|
};
|
|
|
|
const getPrivacy = () => {
|
|
Taro.getPrivacySetting({
|
|
success: res => {
|
|
if (res.needAuthorization) {
|
|
Taro.requirePrivacyAuthorize({
|
|
success: () => console.log('用户同意授权'),
|
|
fail: () => {
|
|
console.log('用户拒绝授权');
|
|
// Taro.exitMiniProgram();
|
|
},
|
|
});
|
|
}
|
|
},
|
|
});
|
|
};
|
|
|
|
const getUserLocal = () => {
|
|
Taro.getLocation({
|
|
type: 'wgs84',
|
|
success: res => {
|
|
userLocalNum.value.l = res.longitude;
|
|
userLocalNum.value.t = res.latitude;
|
|
fetchAddress(res.latitude, res.longitude);
|
|
// Refresh list with location
|
|
pageVal.value.page = 1;
|
|
merList.value = [];
|
|
fetchMerList();
|
|
},
|
|
fail: () => {
|
|
address.value = '未能获取定位';
|
|
// Load list anyway
|
|
fetchMerList();
|
|
},
|
|
});
|
|
};
|
|
|
|
const fetchAddress = (lat, lon) => {
|
|
Taro.request({
|
|
url: `https://api.tianditu.gov.cn/geocoder?postStr={'lon':${lon},'lat':${lat},'ver':1}&type=geocode&tk=42db4f3dfd1a18d31e73ee90aa2ce054`,
|
|
method: 'GET',
|
|
success: res => {
|
|
const { msg, result } = res.data;
|
|
if (msg === 'ok') {
|
|
address.value = `${result.addressComponent.county}${result.addressComponent.town}${result.addressComponent.address}`;
|
|
}
|
|
},
|
|
});
|
|
};
|
|
|
|
const getNavLists = async () => {
|
|
const defaults = [
|
|
{
|
|
type: 1,
|
|
icon: '//p0.meituan.net/csc/f33ad2443a67e9f3474a1d5fd9d529db7504.png',
|
|
url: '/pages/users/settled_mer/index',
|
|
name: '商户入驻',
|
|
},
|
|
{
|
|
type: 1,
|
|
icon: '//p0.meituan.net/csc/0403cf37dd14a6b44b22ffccaa2878f95703.png',
|
|
url: '/pages/allClassList/index',
|
|
name: '全部服务',
|
|
},
|
|
];
|
|
|
|
try {
|
|
const res = await getHomeList();
|
|
const apiList = res.data.data.map(item => ({
|
|
ID: item.ID,
|
|
type: 2,
|
|
icon: item.icon,
|
|
url: item.url,
|
|
name: item.name,
|
|
}));
|
|
navigationList.value = [...apiList, ...defaults];
|
|
} catch (e) {
|
|
console.error(e);
|
|
navigationList.value = defaults;
|
|
}
|
|
};
|
|
|
|
const fetchMerList = async () => {
|
|
try {
|
|
const res = await getMerList({
|
|
PageNum: pageVal.value.page,
|
|
PageSize: 10,
|
|
// class_id: 0
|
|
});
|
|
pageVal.value.total = res.data.total;
|
|
if (res.data.data) {
|
|
merList.value.push(...res.data.data);
|
|
}
|
|
} catch (e) {
|
|
console.error(e);
|
|
}
|
|
};
|
|
|
|
const clickSearch = () => {
|
|
if (!searchVal.value)
|
|
return Taro.showToast({ title: '请输入商家名称', icon: 'none' });
|
|
Taro.navigateTo({ url: `/pages/search/index?name=${searchVal.value}` });
|
|
searchVal.value = '';
|
|
};
|
|
|
|
const toPage = item => {
|
|
item.type !== 1
|
|
? Taro.navigateTo({
|
|
url: `/pages/search/index?id=${item.ID}&name=${item.name}`,
|
|
})
|
|
: Taro.navigateTo({ url: item.url });
|
|
};
|
|
|
|
const toMerDetails = item => {
|
|
Taro.navigateTo({ url: `/pages/mer/mer_detail/index?bid=${item.bid}` });
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import './home-new.scss';
|
|
|
|
/* 所有新版样式包裹在 .home-new 作用域下 */
|
|
.home-new {
|
|
/* Header Styles */
|
|
.header-fixed {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 50;
|
|
background: linear-gradient(180deg, #eff6ff 0%, #f5f6f7 100%);
|
|
}
|
|
|
|
.header-content {
|
|
padding: 10px 20px 10px;
|
|
}
|
|
|
|
.location-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 10px;
|
|
font-size: 22px;
|
|
color: #6b7280;
|
|
}
|
|
|
|
.location-inner {
|
|
display: flex;
|
|
align-items: center;
|
|
max-width: 90%;
|
|
background-color: rgba(255, 255, 255, 0.6);
|
|
padding: 8px 16px;
|
|
border-radius: 50px;
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.location-icon {
|
|
width: 26px;
|
|
height: 26px;
|
|
margin-right: 8px;
|
|
color: #374151;
|
|
}
|
|
|
|
.location-text {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.location-arrow {
|
|
width: 20px;
|
|
height: 20px;
|
|
margin-left: 8px;
|
|
color: #9ca3af;
|
|
}
|
|
|
|
.search-container {
|
|
position: relative;
|
|
// margin: 10px auto;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.search-input {
|
|
height: 70px;
|
|
background-color: #ffffff;
|
|
border: none;
|
|
border-radius: 20px;
|
|
padding: 10px 20px 10px 70px;
|
|
font-size: 28px;
|
|
}
|
|
|
|
.search-icon-left {
|
|
position: absolute;
|
|
left: 20px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
color: #9ca3af;
|
|
font-size: 30px;
|
|
}
|
|
|
|
.search-btn {
|
|
position: absolute;
|
|
right: 10px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
background: linear-gradient(90deg, #fa2c19 0%, #ff5d45 100%);
|
|
color: #ffffff;
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
padding: 12px 30px;
|
|
border-radius: 16px;
|
|
box-shadow: 0 4px 6px rgba(250, 44, 25, 0.2);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 10;
|
|
}
|
|
|
|
/* Main Content */
|
|
.main-content {
|
|
padding: 0 20px 180px;
|
|
}
|
|
|
|
/* Banner Hero */
|
|
.banner-hero {
|
|
position: relative;
|
|
border-radius: 20px;
|
|
overflow: hidden;
|
|
background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
|
|
height: 280px;
|
|
margin-top: 20px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
|
}
|
|
|
|
.banner-decoration {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
opacity: 0.1;
|
|
}
|
|
|
|
.banner-decoration-top {
|
|
top: -80px;
|
|
right: -80px;
|
|
width: 240px;
|
|
height: 240px;
|
|
background-color: rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
.banner-decoration-bottom {
|
|
bottom: -60px;
|
|
left: -60px;
|
|
width: 180px;
|
|
height: 180px;
|
|
background-color: rgba(147, 197, 253, 0.3);
|
|
}
|
|
|
|
.banner-inner {
|
|
position: relative;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
padding: 30px;
|
|
}
|
|
|
|
.banner-title {
|
|
font-size: 60px;
|
|
font-weight: 900;
|
|
color: #ffffff;
|
|
letter-spacing: 4px;
|
|
font-style: italic;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.banner-title-yellow {
|
|
color: #fde047;
|
|
}
|
|
|
|
.banner-subtitle-wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-bottom: 30px;
|
|
opacity: 0.95;
|
|
}
|
|
|
|
.banner-divider {
|
|
width: 60px;
|
|
height: 1px;
|
|
background-color: rgba(255, 255, 255, 0.5);
|
|
}
|
|
|
|
.banner-subtitle {
|
|
color: #ffffff;
|
|
font-size: 22px;
|
|
font-weight: 500;
|
|
letter-spacing: 2px;
|
|
}
|
|
|
|
.banner-buttons {
|
|
display: flex;
|
|
width: 100%;
|
|
max-width: 600px;
|
|
gap: 20px;
|
|
}
|
|
|
|
.banner-btn {
|
|
flex: 1;
|
|
border-radius: 50px;
|
|
padding: 15px 0;
|
|
font-size: 26px;
|
|
font-weight: bold;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
pointer-events: none;
|
|
transform: scale(0.9);
|
|
}
|
|
|
|
.banner-btn-primary {
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
color: #ffffff;
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.banner-btn-secondary {
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
color: rgba(255, 255, 255, 0.8);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.banner-btn-icon {
|
|
font-size: 36px;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* Navigation Grid */
|
|
.nav-grid-wrapper {
|
|
background-color: #ffffff;
|
|
border-radius: 20px;
|
|
padding: 30px;
|
|
margin-top: 20px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
|
}
|
|
|
|
.nav-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 20px;
|
|
}
|
|
|
|
.nav-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.nav-icon-wrapper {
|
|
width: 88px;
|
|
height: 88px;
|
|
border-radius: 50%;
|
|
background-color: #f9fafb;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.nav-icon {
|
|
width: 60px;
|
|
height: 60px;
|
|
}
|
|
|
|
.nav-label {
|
|
font-size: 22px;
|
|
font-weight: 500;
|
|
color: #374151;
|
|
text-align: center;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Featured Section */
|
|
.featured-section {
|
|
display: flex;
|
|
gap: 20px;
|
|
height: 280px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.featured-card {
|
|
background-color: #ffffff;
|
|
border-radius: 20px;
|
|
overflow: hidden;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
|
position: relative;
|
|
}
|
|
|
|
.featured-card-left {
|
|
flex: 1.2;
|
|
background: linear-gradient(135deg, #fff7ed 0%, #ffffff 100%);
|
|
border: 1px solid #fed7aa;
|
|
padding: 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.featured-content {
|
|
position: relative;
|
|
z-index: 10;
|
|
}
|
|
|
|
.featured-title {
|
|
font-size: 30px;
|
|
font-weight: bold;
|
|
color: #1f2937;
|
|
}
|
|
|
|
.featured-desc {
|
|
font-size: 20px;
|
|
color: #f97316;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.featured-btn {
|
|
margin-top: 20px;
|
|
background: linear-gradient(90deg, #f97316 0%, #ef4444 100%);
|
|
color: #ffffff;
|
|
font-size: 22px;
|
|
font-weight: bold;
|
|
padding: 10px 20px;
|
|
border-radius: 50px;
|
|
border: none;
|
|
display: inline-block;
|
|
line-height: 1.5;
|
|
box-shadow: 0 2px 4px rgba(249, 115, 22, 0.3);
|
|
}
|
|
|
|
.featured-bg {
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
opacity: 0.1;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.featured-svg {
|
|
width: 180px;
|
|
height: 180px;
|
|
color: #ea580c;
|
|
transform: rotate(-12deg) translate(30px, 30px);
|
|
}
|
|
|
|
.featured-card-right {
|
|
flex: 1;
|
|
border: 1px solid #e5e7eb;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.featured-image {
|
|
height: 67%;
|
|
position: relative;
|
|
}
|
|
|
|
.featured-img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.featured-overlay {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.6) 100%);
|
|
padding: 10px 15px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.featured-overlay-title {
|
|
color: #ffffff;
|
|
font-weight: bold;
|
|
font-size: 26px;
|
|
}
|
|
|
|
.featured-footer {
|
|
height: 33%;
|
|
padding: 0 15px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.featured-footer-left {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.featured-footer-title {
|
|
font-size: 22px;
|
|
font-weight: bold;
|
|
color: #1f2937;
|
|
}
|
|
|
|
.featured-footer-arrow {
|
|
width: 44px;
|
|
height: 44px;
|
|
border-radius: 50%;
|
|
background-color: #eff6ff;
|
|
color: #3b82f6;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 24px;
|
|
}
|
|
|
|
/* Store Section */
|
|
.store-section {
|
|
padding-bottom: 20px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.store-header {
|
|
font-size: 30px;
|
|
font-weight: bold;
|
|
color: #1f2937;
|
|
padding: 0 8px 15px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.store-header-line {
|
|
width: 6px;
|
|
height: 30px;
|
|
background-color: #fa2c19;
|
|
border-radius: 50px;
|
|
margin-right: 15px;
|
|
}
|
|
|
|
.store-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
}
|
|
|
|
.store-item {
|
|
background-color: #ffffff;
|
|
border-radius: 20px;
|
|
padding: 15px;
|
|
display: flex;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
|
border: 1px solid #f9fafb;
|
|
}
|
|
|
|
.store-image-wrapper {
|
|
width: 180px;
|
|
height: 180px;
|
|
flex-shrink: 0;
|
|
background-color: #f3f4f6;
|
|
border-radius: 16px;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
.store-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.store-badge {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
background-color: #eab308;
|
|
color: #ffffff;
|
|
font-size: 20px;
|
|
padding: 4px 12px;
|
|
border-bottom-right-radius: 16px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.store-info {
|
|
margin-left: 20px;
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 180px;
|
|
justify-content: space-between;
|
|
padding: 8px 0;
|
|
}
|
|
|
|
.store-name {
|
|
font-weight: bold;
|
|
color: #1f2937;
|
|
font-size: 30px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.store-rating {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 22px;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.rating-stars {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-right: 15px;
|
|
}
|
|
|
|
.stars-text {
|
|
color: #fbbf24;
|
|
font-size: 20px;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.rating-score {
|
|
color: #fa2c19;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.rating-divider {
|
|
color: #d1d5db;
|
|
margin: 0 10px;
|
|
}
|
|
|
|
.rating-sales {
|
|
color: #6b7280;
|
|
}
|
|
|
|
.store-distance {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.distance-placeholder {
|
|
font-size: 22px;
|
|
color: transparent;
|
|
user-select: none;
|
|
}
|
|
|
|
.distance-text {
|
|
font-size: 22px;
|
|
color: #9ca3af;
|
|
}
|
|
|
|
.store-empty {
|
|
text-align: center;
|
|
padding: 80px 0;
|
|
color: #9ca3af;
|
|
font-size: 26px;
|
|
}
|
|
|
|
.iconfont {
|
|
font-size: inherit;
|
|
}
|
|
|
|
} /* .home-new 作用域结束 */
|
|
</style>
|