duanshuwen/nianxx-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: standardize tailwind classes and cleanup legacy styles

Browse Source 
Replace `flex-shrink-0` with `shrink-0` across components for consistency
Migrate legacy color utility classes to inline hex Tailwind classes
Replace background color utility classes with inline hex equivalents
Delete unused SCSS style files for ScenicImageCard and RoutePlanCard
Refactor RoutePlanCard to use inline Tailwind styles instead of external CSS
Update icon component usage in RoutePlanCard to match project standards
This commit is contained in:
DEV_DSW
2026-05-29 14:32:05 +08:00
parent f0a149d8a6
commit 79770b03d4
14 changed files with 74 additions and 341 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/GoodDetail/index.vue
View File

@@ -11,7 +11,7 @@
.commodityPurchaseInstructionModuleEntityList.length -
1,
}">
<div class="flex items-center flex-row flex-shrink-0 mr-[8px]">
<div class="flex items-center flex-row shrink-0 mr-[8px]">
<zn-icon :name="moduleItem.moduleIcon" size="20" color="#333"></zn-icon>
<span class="ml-[4px] text-[14px] text-[#171717] leading-[20px]">
{{ moduleItem.moduleTitle }}

2
src/pages/home/components/ChatLongAnswer/index.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="flex flex-col bg-liner h-screen overflow-hidden">
<!-- ✅ 顶部固定导航 -->
<div class="flex-shrink-0">
<div class="shrink-0">
<TopNavBar :title="title" background="transparent" />
</div>

4
src/pages/home/components/FacilityLocationCard/index.vue
View File

@@ -12,13 +12,13 @@
</div>
</div>
<div class="facility-location-card__distance flex items-center color-94A3B8 text-[14px] font-bold">
<div class="facility-location-card__distance flex items-center text-[#94A3B8] text-[14px] font-bold">
<span class="facility-location-card__distance-icon">{{ distance.icon }}</span>
<span>{{ distance.text }}</span>
</div>
<div class="facility-location-card__location bg-[#f8fafc] rounded-[20px]">
<div class="facility-location-card__location-label flex items-center color-64748B text-[13px] font-bold">
<div class="facility-location-card__location-label flex items-center text-[#64748B] text-[13px] font-bold">
<span class="facility-location-card__location-dot">{{ location.icon }}</span>
<span>{{ location.label }}</span>
</div>

12
src/pages/home/components/LongTextGuideCard/index.vue
View File

@@ -9,7 +9,7 @@
<div class="long-text-guide-card__summary-title text-[#1e293b] text-[18px] font-bold">
{{ item.title }}
</div>
<div class="long-text-guide-card__summary-text color-94A3B8 text-[14px] font-medium ellipsis-2">
<div class="long-text-guide-card__summary-text text-[#94A3B8] text-[14px] font-medium ellipsis-2">
{{ item.summary }}
</div>
<div class="long-text-guide-card__summary-footer flex items-center justify-between">
@@ -52,9 +52,9 @@
<div class="long-text-guide-card__section-title text-[#1e293b] text-[16px] font-bold">
{{ activeItem.sectionTitle }}
</div>
<div class="long-text-guide-card__tip-block bg-ECFDF5">
<div class="long-text-guide-card__tip-block bg-[#ecfdf5]">
<div v-for="(tip, index) in activeItem.tips || []" :key="tip"
class="long-text-guide-card__tip color-047857 text-[14px] font-800">
class="long-text-guide-card__tip text-[#047857] text-[14px] font-800">
{{ index + 1 }} {{ tip }}
</div>
</div>
@@ -72,7 +72,7 @@
</div>
<div v-if="activeItem.action?.type === 'map'" class="long-text-guide-card__action-zone">
<div class="long-text-guide-card__action-label color-94A3B8 text-[11px] font-800">
<div class="long-text-guide-card__action-label text-[#94A3B8] text-[11px] font-800">
{{ activeItem.action.label }}
</div>
<div class="long-text-guide-card__map-card rounded-[16px] overflow-hidden">
@@ -86,7 +86,7 @@
<div class="long-text-guide-card__map-bar flex items-center bg-white">
<div class="flex-1">
<div class="text-[#1e293b] text-[15px] font-bold">{{ activeItem.action.title }}</div>
<div class="color-94A3B8 text-[12px] font-800 mt-2">{{ activeItem.action.subtitle }}</div>
<div class="text-[#94A3B8] text-[12px] font-800 mt-2">{{ activeItem.action.subtitle }}</div>
</div>
<div class="long-text-guide-card__nav-btn text-white bg-0F172A text-[14px] font-bold"
@click="handleAction(activeItem)">
@@ -97,7 +97,7 @@
</div>
<div v-else-if="activeItem.action?.type === 'image'" class="long-text-guide-card__action-zone">
<div class="long-text-guide-card__action-label color-94A3B8 text-[11px] font-800">
<div class="long-text-guide-card__action-label text-[#94A3B8] text-[11px] font-800">
{{ activeItem.action.label }}
</div>
<div class="long-text-guide-card__photo-card relative" @click="handleAction(activeItem)">

2
src/pages/home/components/LongTextGuideCardPreview/index.vue
View File

@@ -11,7 +11,7 @@
<div class="long-text-guide-card__summary-title text-[#1e293b] text-[18px] font-bold">
{{ item.title }}
</div>
<div class="long-text-guide-card__summary-text color-94A3B8 text-[14px] font-medium ellipsis-2">
<div class="long-text-guide-card__summary-text text-[#94A3B8] text-[14px] font-medium ellipsis-2">
{{ item.summary }}
</div>
<div class="long-text-guide-card__summary-footer flex items-center justify-between">

2
src/pages/home/components/MapNavigationCard/index.vue
View File

@@ -13,7 +13,7 @@
<div class="map-navigation-card__title text-[#1e293b] text-[18px] font-bold truncate">
{{ data.title }}
</div>
<div class="map-navigation-card__distance color-94A3B8 text-[14px] font-bold truncate">
<div class="map-navigation-card__distance text-[#94A3B8] text-[14px] font-bold truncate">
{{ data.distance }}
</div>
</div>

8
src/pages/home/components/NoticeCard/index.vue
View File

@@ -1,14 +1,14 @@
<template>
<div class="notice-card w-full">
<div v-if="!detailOpen" class="notice-card__summary bg-FFFBEB rounded-[24px] w-full">
<div v-if="!detailOpen" class="notice-card__summary bg-[#FFFBEB] rounded-[24px] w-full">
<div class="notice-card__summary-title color-B45309 text-[16px] font-bold">
{{ summary.title }}
</div>
<div class="notice-card__summary-content color-D97706 text-[14px] font-bold">
<div class="notice-card__summary-content text-[#D97706] text-[14px] font-bold">
{{ summary.content }}
</div>
<div class="notice-card__summary-footer flex items-center justify-between">
<div class="notice-card__summary-time color-D97706 text-[12px] font-bold">
<div class="notice-card__summary-time text-[#D97706] text-[12px] font-bold">
{{ summary.publishTime }}
</div>
<div class="notice-card__summary-link color-B45309 text-[14px] font-bold" :class="{ 'is-disabled': disabled }"
@@ -20,7 +20,7 @@
<div v-else class="notice-card__detail bg-white rounded-[24px] overflow-hidden w-full">
<div class="notice-card__detail-head flex items-center">
<div class="notice-card__back flex items-center justify-center rounded-full flex-shrink-0" @click="closeDetail">
<div class="notice-card__back flex items-center justify-center rounded-full shrink-0" @click="closeDetail">
<uni-icons type="left" size="16" color="#CBD5E1"></uni-icons>
</div>
<div class="notice-card__head-title text-[#1e293b] text-[18px] font-bold">

2
src/pages/home/components/NoticeMessage/detail.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="flex flex-col bg-liner h-screen overflow-hidden">
<!-- ✅ 顶部固定导航 -->
<div class="flex-shrink-0">
<div class="shrink-0">
<TopNavBar :title="detailTitle" background="transparent" />
</div>

19
src/pages/home/components/PoiCompareCard/index.vue
View File

@@ -2,7 +2,7 @@
<div class="poi-compare-card w-full">
<div v-if="!isDetail" class="poi-compare-card__overdiv bg-white rounded-[24px] overflow-hidden">
<div class="poi-compare-card__head flex items-center">
<div class="poi-compare-card__mark flex items-center justify-center rounded-full flex-shrink-0">
<div class="poi-compare-card__mark flex items-center justify-center rounded-full shrink-0">
{{ data.icon }}
</div>
<div class="poi-compare-card__title text-[#1e293b] text-[18px] font-bold truncate flex-1">
@@ -15,7 +15,7 @@
:class="{ 'is-disabled': disabled }" @click="handleSelect(item)">
<img class="poi-compare-card__image block w-full" :src="item.image" mode="aspectFill" />
<div v-for="field in item.fields" :key="field.label" class="poi-compare-card__field">
<div class="poi-compare-card__field-label color-94A3B8 text-[12px] font-800">
<div class="poi-compare-card__field-label text-[#94A3B8] text-[12px] font-800">
{{ field.label }}
</div>
<div v-if="field.tone" class="poi-compare-card__chip text-[12px] font-bold"
@@ -37,14 +37,13 @@
<div v-else class="poi-compare-card__detail-card bg-white rounded-[24px] overflow-hidden">
<div class="poi-compare-card__detail-head flex items-center">
<div class="poi-compare-card__back flex items-center justify-center rounded-full flex-shrink-0"
@click="closeDetail">
<div class="poi-compare-card__back flex items-center justify-center rounded-full shrink-0" @click="closeDetail">
<uni-icons type="left" size="16" color="#CBD5E1"></uni-icons>
</div>
<div class="poi-compare-card__detail-title text-[#1e293b] font-size-20 font-bold flex-1">
{{ detail.title }}
</div>
<div class="poi-compare-card__compare-label color-94A3B8 text-[12px] font-bold">
<div class="poi-compare-card__compare-label text-[#94A3B8] text-[12px] font-bold">
{{ detail.compareLabel }}
</div>
</div>
@@ -58,7 +57,7 @@
</div>
</div>
<div v-for="row in detail.rows" :key="row.label" class="poi-compare-card__table-row poi-compare-card__data-row">
<div class="poi-compare-card__row-label color-94A3B8 text-[12px] font-bold">
<div class="poi-compare-card__row-label text-[#94A3B8] text-[12px] font-bold">
{{ row.label }}
</div>
<div v-for="cell in row.values" :key="row.label + '-' + cell.text"
@@ -69,12 +68,12 @@
</div>
<div class="poi-compare-card__recommend">
<div class="poi-compare-card__recommend-title color-94A3B8 text-[12px] font-bold">
<div class="poi-compare-card__recommend-title text-[#94A3B8] text-[12px] font-bold">
{{ detail.recommendTitle }}
</div>
<div class="poi-compare-card__tips">
<div v-for="tip in detail.tips" :key="tip.text" class="poi-compare-card__tip flex gap-10">
<div class="poi-compare-card__dot rounded-full flex-shrink-0" :class="getDotClass(tip.tone)" />
<div class="poi-compare-card__dot rounded-full shrink-0" :class="getDotClass(tip.tone)" />
<div class="poi-compare-card__tip-text text-[#334155] text-[14px] font-bold">
{{ tip.text }}
</div>
@@ -117,8 +116,8 @@ const detail = computed(() => props.data.detail || {});
const getToneClass = (tone) => {
const toneMap = {
green: "poi-compare-card__chip--green color-047857 bg-ECFDF5",
amber: "poi-compare-card__chip--amber color-D97706 bg-FFFBEB",
green: "poi-compare-card__chip--green text-[#047857] bg-[#ecfdf5]",
amber: "poi-compare-card__chip--amber text-[#D97706] bg-[#FFFBEB]",
};
return toneMap[tone] || "";
};

4
src/pages/home/components/PoiDetailCard/index.vue
View File

@@ -14,8 +14,8 @@
</div>
<div class="poi-detail-card__tip flex items-center gap-10">
<div class="poi-detail-card__spark color-047857 text-[18px] font-bold">✦</div>
<div class="poi-detail-card__tip-text color-047857 text-[14px] font-800">
<div class="poi-detail-card__spark text-[#047857] text-[18px] font-bold">✦</div>
<div class="poi-detail-card__tip-text text-[#047857] text-[14px] font-800">
{{ data.tip?.text }}
</div>
</div>

2
src/pages/home/components/RecommendationListCard/index.vue
View File

@@ -11,7 +11,7 @@
{{ item.title }}
</div>
<div
class="recommendation-list-card__distance flex items-center gap-4 mt-4 color-94A3B8 text-[12px] font-800">
class="recommendation-list-card__distance flex items-center gap-4 mt-4 text-[#94A3B8] text-[12px] font-800">
<span class="recommendation-list-card__pin">⌖</span>
<span>{{ item.distance }}</span>
</div>

81
src/pages/home/components/RoutePlanCard/index.vue
View File

@@ -1,81 +1,90 @@
<template>
<div class="route-plan-card w-full">
<div class="w-full">
<div v-if="!detailOpen"
class="route-plan-card__summary flex items-center bg-white rounded-[24px] overflow-hidden w-full"
:class="{ 'is-disabled': disabled }" @click="openDetail">
<img class="route-plan-card__cover block flex-shrink-0" :src="data.image" mode="aspectFill" />
<div class="route-plan-card__body flex-1">
<div class="route-plan-card__title text-[#1e293b] text-[18px] font-bold truncate">
class="min-h-[108px] px-[20px] py-[16px] flex items-center bg-white rounded-[24px] overflow-hidden w-full border border-slate-200/72 [box-shadow:0_10px_28px_rgba(15,23,42,0.05)] active:opacity-86"
:class="{ 'opacity-55': disabled }" @click="openDetail">
<img class="w-[76px] h-[76px] rounded-[10px] block shrink-0" :src="data.image" />
<div class="min-w-0 ml-[18px] flex-1">
<div class="leading-[24px] text-[#1e293b] text-[18px] font-bold truncate">
{{ data.title }}
</div>
<div class="route-plan-card__tags flex items-center">
<div v-for="tag in summaryTags" :key="tag.id || tag.text" class="route-plan-card__tag text-[12px] font-bold"
<div class="min-w-0 mt-[10px] flex items-center space-x-2">
<div v-for="tag in summaryTags" :key="tag.id || tag.text"
class="h-[24px] px-[11px] rounded-full leading-[24px] text-[12px] font-bold whitespace-nowrap"
:class="getTagClass(tag.tone)">
{{ tag.text }}
</div>
</div>
</div>
<div class="flex-shrink-0">
<uni-icons type="right" size="16" color="#CBD5E1"></uni-icons>
<div class="shrink-0">
<van-icon name="arrow-right" size="16" color="#CBD5E1"></van-icon>
</div>
</div>
<div v-else class="route-plan-card__detail bg-white rounded-[24px] overflow-hidden w-full">
<div class="route-plan-card__detail-head flex items-center">
<div class="route-plan-card__back flex items-center justify-center rounded-full flex-shrink-0"
<div v-else
class="bg-white rounded-[24px] overflow-hidden w-full border border-slate-200/72 [box-shadow:0_10px_28px_rgba(15,23,42,0.05)]">
<div class="min-w-0 h-[70px] px-[22px] border-b border-slate-100 flex items-center">
<div
class="w-[34px] h-[34px] mr-3.5 text-slate-500 text-[28px] leading-none bg-slate-50 flex items-center justify-center rounded-full shrink-0"
@click="closeDetail">
<uni-icons type="left" size="16" color="#CBD5E1"></uni-icons>
<van-icon name="arrow-left" size="16" color="#CBD5E1"></van-icon>
</div>
<div class="route-plan-card__detail-title text-[#1e293b] text-[18px] font-bold truncate flex-1">
<div class="min-w-0 leading-[24px] text-[#1e293b] text-[18px] font-bold truncate flex-1">
{{ data.title }}
</div>
<div class="route-plan-card__detail-badge color-047857 bg-ECFDF5 text-[12px] font-bold">
<div
class="h-[26px] ml-3 px-3 rounded-full leading-[26px] whitespace-nowrap text-[#047857] bg-[#ecfdf5] text-[12px] font-bold">
{{ detail.badge }}
</div>
</div>
<div class="route-plan-card__timeline">
<div class="pt-[26px] py-[18px]">
<template v-for="(node, index) in nodes" :key="node.id || node.title">
<div class="route-plan-card__node-wrap" :class="{ 'is-disabled': disabled }" @click="handleSelect(node)">
<div class="active:opacity-86 relative" :class="{ 'opacity-55': disabled }" @click="handleSelect(node)">
<div
class="route-plan-card__node-number flex items-center justify-center rounded-full color-047857 bg-ECFDF5 text-[12px] font-bold">
class="absolute left-5 top-1/2 z-10 w-[26px] h-[26px] -translate-y-1/2 flex items-center justify-center rounded-full text-[#047857] bg-[#ecfdf5] text-[12px] font-bold">
{{ index + 1 }}
</div>
<div class="route-plan-card__node bg-white rounded-[20px] flex items-center">
<img class="route-plan-card__node-image block flex-shrink-0" :src="node.image" mode="aspectFill" />
<div class="route-plan-card__node-body flex-1">
<div class="route-plan-card__node-title text-[#1e293b] text-[16px] font-bold truncate">
<div
class="min-h-[88px] pt-3 pr-4 pb-3 pl-[56px] border border-gray-200 bg-white rounded-[20px] flex items-center">
<img class="w-16 h-16 mr-3.5 rounded-[10px] object-cover block shrink-0" :src="node.image" />
<div class="min-w-0 flex-1">
<div class="leading-[22px] text-[#1e293b] text-[16px] font-bold truncate">
{{ node.title }}
</div>
<div class="route-plan-card__node-desc color-94A3B8 text-[12px] font-800 truncate">
<div class="mt-[4px] leading-[18px] text-[#94A3B8] text-[12px] font-800 truncate">
{{ node.description }}
</div>
<div v-if="node.tag" class="route-plan-card__node-tag color-D97706 bg-FFFBEB text-[12px] font-bold">
<div v-if="node.tag"
class="inline-flex items-center h-[22px] mt-1.5 px-[9px] border border-amber-200 rounded-full leading-[22px] text-[#D97706] bg-[#FFFBEB] text-[12px] font-bold">
{{ node.tag }}
</div>
</div>
</div>
</div>
<div v-if="connectors[index]" class="route-plan-card__connector">
<div class="route-plan-card__connector-line"></div>
<div class="route-plan-card__connector-arrow"></div>
<div v-if="connectors[index]" class="relative h-[56px]">
<div class="absolute left-1/2 top-0 w-[2px] h-[52px] -translate-x-1/2 rounded-[2px] bg-green-200"></div>
<div
class="route-plan-card__connector-chip flex items-center bg-[#f8fafc] rounded-full color-64748B text-[12px] font-bold">
<span class="route-plan-card__connector-icon">{{ connectors[index].icon }}</span>
class="absolute left-1/2 top-[42px] w-2.5 h-2.5 border-r-2 border-r-[#86efac] border-b-2 border-b-[#86efac] [-translate-x-4px] rotate-45">
</div>
<div
class="absolute right-0 top-3.5 h-7 px-3 border border-gray-200 leading-7 text-gray-600 flex items-center bg-[#f8fafc] rounded-full text-[#64748B] text-[12px] font-bold">
<span class="mr-[5px]">{{ connectors[index].icon }}</span>
<span>{{ connectors[index].text }}</span>
</div>
</div>
</template>
</div>
<div v-if="tips.length" class="route-plan-card__tips bg-[#f8fafc] rounded-[20px]">
<div class="route-plan-card__tips-title color-64748B text-[14px] font-bold">
<div v-if="tips.length"
class="mt-[26px] mx-5 pt-4.5 pr-4.5 pb-4.5 pl-5 border border-slate-200 bg-[#f8fafc] rounded-[20px]">
<div class="mb-[14px] leading-[18px] text-[#64748B] text-[14px] font-bold">
{{ detail.tipsTitle }}
</div>
<div v-for="tip in tips" :key="tip"
class="route-plan-card__tip flex items-center text-[#334155] text-[13px] font-bold">
<div class="route-plan-card__tip-dot rounded-full flex-shrink-0"></div>
class="min-h-[22px] leading-[22px] mt-[4px] flex items-center text-[#334155] text-[13px] font-bold">
<div class="w-[5px] h-[5px] mr-[12px] bg-[#cbd5e1] rounded-full shrink-0"></div>
<div>{{ tip }}</div>
</div>
</div>
@@ -107,8 +116,8 @@ const connectors = computed(() => detail.value.connectors || []);
const tips = computed(() => detail.value.tips || []);
const getTagClass = (tone) => {
if (tone === "green") return "color-047857 bg-ECFDF5";
return "color-64748B bg-[#f1f5f9]";
if (tone === "green") return "text-[#047857] bg-[#ecfdf5]";
return "text-[#64748B] bg-[#f1f5f9]";
};
const openDetail = () => {

227
src/pages/home/components/RoutePlanCard/styles/index.scss
View File

@@ -1,227 +0,0 @@
.route-plan-card {
width: 100%;
}
.route-plan-card__summary,
.route-plan-card__detail {
border: 1px solid rgba(226, 232, 240, 0.72);
box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
box-sizing: border-box;
}
.route-plan-card__summary {
min-height: 108px;
padding: 16px 20px;
}
.route-plan-card__summary:active,
.route-plan-card__node-wrap:active {
opacity: 0.86;
}
.route-plan-card__summary.is-disabled,
.route-plan-card__node-wrap.is-disabled {
opacity: 0.55;
}
.route-plan-card__cover {
width: 76px;
height: 76px;
border-radius: 10px;
}
.route-plan-card__body {
min-width: 0;
margin-left: 18px;
}
.route-plan-card__title {
line-height: 24px;
}
.route-plan-card__tags {
min-width: 0;
margin-top: 10px;
}
.route-plan-card__tag {
height: 24px;
padding: 0 11px;
border-radius: 999px;
line-height: 24px;
white-space: nowrap;
}
.route-plan-card__tag + .route-plan-card__tag {
margin-left: 8px;
}
.route-plan-card__arrow {
width: 12px;
height: 12px;
margin-left: 14px;
border-top: 2px solid #cbd5e1;
border-right: 2px solid #cbd5e1;
transform: rotate(45deg);
}
.route-plan-card__detail {
padding-bottom: 26px;
}
.route-plan-card__detail-head {
min-width: 0;
height: 70px;
padding: 0 22px;
border-bottom: 1px solid #f1f5f9;
box-sizing: border-box;
}
.route-plan-card__back {
width: 34px;
height: 34px;
margin-right: 14px;
color: #64748b;
font-size: 28px;
line-height: 1;
background: #f8fafc;
}
.route-plan-card__detail-title {
min-width: 0;
line-height: 24px;
}
.route-plan-card__detail-badge {
height: 26px;
margin-left: 12px;
padding: 0 12px;
border-radius: 999px;
line-height: 26px;
white-space: nowrap;
}
.route-plan-card__timeline {
padding: 26px 18px 0;
}
.route-plan-card__node-wrap {
position: relative;
}
.route-plan-card__node-number {
position: absolute;
left: 20px;
top: 50%;
z-index: 2;
width: 26px;
height: 26px;
transform: translateY(-50%);
}
.route-plan-card__node {
min-height: 88px;
padding: 12px 16px 12px 56px;
border: 1px solid #e5e7eb;
box-sizing: border-box;
}
.route-plan-card__node-image {
width: 64px;
height: 64px;
margin-right: 14px;
border-radius: 10px;
}
.route-plan-card__node-body {
min-width: 0;
}
.route-plan-card__node-title {
line-height: 22px;
}
.route-plan-card__node-desc {
margin-top: 4px;
line-height: 18px;
}
.route-plan-card__node-tag {
display: inline-flex;
align-items: center;
height: 22px;
margin-top: 6px;
padding: 0 9px;
border: 1px solid #fde68a;
border-radius: 999px;
line-height: 22px;
}
.route-plan-card__connector {
position: relative;
height: 56px;
}
.route-plan-card__connector-line {
position: absolute;
left: 50%;
top: 0;
width: 2px;
height: 52px;
border-radius: 2px;
background: #bbf7d0;
}
.route-plan-card__connector-arrow {
position: absolute;
left: 50%;
top: 42px;
width: 10px;
height: 10px;
border-right: 2px solid #86efac;
border-bottom: 2px solid #86efac;
transform: translateX(-4px) rotate(45deg);
}
.route-plan-card__connector-chip {
position: absolute;
right: 0;
top: 14px;
height: 28px;
padding: 0 12px;
border: 1px solid #e5e7eb;
line-height: 28px;
box-sizing: border-box;
}
.route-plan-card__connector-icon {
margin-right: 5px;
}
.route-plan-card__tips {
margin: 26px 20px 0;
padding: 18px 18px 18px 20px;
border: 1px solid #e2e8f0;
box-sizing: border-box;
}
.route-plan-card__tips-title {
margin-bottom: 14px;
line-height: 18px;
}
.route-plan-card__tip {
min-height: 22px;
line-height: 22px;
}
.route-plan-card__tip + .route-plan-card__tip {
margin-top: 4px;
}
.route-plan-card__tip-dot {
width: 5px;
height: 5px;
margin-right: 12px;
background: #cbd5e1;
}

48
src/pages/home/components/ScenicImageCard/styles/index.scss
View File

@@ -1,48 +0,0 @@
.scenic-image-card {
height: 324px;
background: #e2e8f0;
}
.scenic-image-card:active,
.scenic-image-card__expand:active {
opacity: 0.86;
}
.scenic-image-card.is-disabled {
opacity: 0.55;
}
.scenic-image-card__image {
height: 100%;
}
.scenic-image-card__expand {
position: absolute;
top: 16px;
right: 16px;
z-index: 2;
width: 40px;
height: 40px;
background: rgba(15, 23, 42, 0.36);
line-height: 40px;
}
.scenic-image-card__caption {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 72px 22px 20px;
background: linear-gradient(180deg, rgba(15, 23, 42, 0) 0%, rgba(15, 23, 42, 0.72) 100%);
}
.scenic-image-card__title {
line-height: 24px;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
}
.scenic-image-card__subtitle {
margin-top: 4px;
line-height: 18px;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
}