feat: redesign FacilityLocationCard and RoutePlanCard with improved layout, styles, and mock data; enhance user interaction and visual appeal

src/pages/ChatModule/FacilityLocationCard/index.vue

@@ -1,38 +1,50 @@
 <template>
-  <CardShell class="facility-location-card" variant="soft">
+  <view class="facility-location-card bg-white rounded-24 overflow-hidden w-full">
-    <view class="facility-location-card__hero">
+    <image
-      <MediaFrame class="facility-location-card__image h-170" :src="data.cover" />
+      class="facility-location-card__image block w-full"
-      <view class="facility-location-card__overlay">
+      :src="data.image"
-        <BadgePill :label="data.badge" tone="blue" />
+      mode="aspectFill"
-        <view class="facility-location-card__title">{{ data.title }}</view>
+    />
-      </view>
+
-    </view>
+    <view class="facility-location-card__body px-24 pb-24">
-    <view class="facility-location-card__body px-16 pb-16">
+      <view class="facility-location-card__title-row flex flex-items-center">
-      <view class="facility-location-card__desc color-64748B font-size-12 font-700">{{ data.description }}</view>
+        <view class="facility-location-card__badge color-2563EB bg-EFF6FF font-size-12 font-900">
-      <view class="facility-location-card__list">
+          {{ type.text }}
-        <view
+        </view>
-          v-for="item in facilities"
+        <view class="facility-location-card__title color-1E293B font-size-18 font-900 ellipsis-1">
-          :key="item.id || item.name"
+          {{ data.title }}
-          class="facility-location-card__item flex flex-items-center gap-10 border-bottom-F1F5F9"
-          @click="handleSelect(item)"
-        >
-          <view class="facility-location-card__dot rounded-full"></view>
-          <view class="facility-location-card__info flex-full">
-            <view class="facility-location-card__name color-1E293B font-size-13 font-900">{{ item.name }}</view>
-            <view class="facility-location-card__meta color-94A3B8 font-size-10 font-700">{{ item.meta }}</view>
-          </view>
-          <view class="facility-location-card__distance color-0891B2 font-size-11 font-900">{{ item.distance }}</view>
         </view>
       </view>
+
+      <view class="facility-location-card__distance flex flex-items-center color-94A3B8 font-size-14 font-900">
+        <text class="facility-location-card__distance-icon">{{ distance.icon }}</text>
+        <text>{{ distance.text }}</text>
+      </view>
+
+      <view class="facility-location-card__location bg-F8FAFC rounded-20">
+        <view class="facility-location-card__location-label flex flex-items-center color-64748B font-size-13 font-900">
+          <text class="facility-location-card__location-dot">{{ location.icon }}</text>
+          <text>{{ location.label }}</text>
+        </view>
+        <view class="facility-location-card__location-text color-1E293B font-size-16 font-900">
+          {{ location.text }}
+        </view>
+      </view>
+
+      <view
+        class="facility-location-card__button flex flex-items-center flex-justify-center bg-0F172A color-white font-size-18 font-900"
+        :class="{ 'is-disabled': disabled }"
+        @click="handleAction"
+      >
+        <text class="facility-location-card__button-icon">{{ action.icon }}</text>
+        <text>{{ action.text }}</text>
+      </view>
     </view>
-  </CardShell>
+  </view>
 </template>
 
 <script setup>
 import { computed } from "vue";
-import CardShell from "../SharedVisual/CardShell.vue";
-import MediaFrame from "../SharedVisual/MediaFrame.vue";
-import BadgePill from "../SharedVisual/BadgePill.vue";
 
 const props = defineProps({
   data: {
@@ -45,13 +57,17 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(["select"]);
+const emit = defineEmits(["action", "select"]);
 
-const facilities = computed(() => props.data.facilities || []);
+const type = computed(() => props.data.type || {});
+const distance = computed(() => props.data.distance || {});
+const location = computed(() => props.data.location || {});
+const action = computed(() => props.data.action || {});
 
-const handleSelect = (item) => {
+const handleAction = () => {
   if (props.disabled) return;
-  emit("select", item);
+  emit("action", props.data);
+  emit("select", props.data);
 };
 </script>
 

src/pages/ChatModule/FacilityLocationCard/mocks.js

@@ -1,11 +1,21 @@
 export default {
-  title: "附近设施位置",
+  id: "wolongtan-restroom",
-  badge: "设施引导",
+  title: "卧龙潭公厕",
-  cover: "https://images.unsplash.com/photo-1518005020951-eccb494ad742?auto=format&fit=crop&w=900&q=80",
+  image: "https://images.unsplash.com/photo-1584622650111-993a426fbf0a?auto=format&fit=crop&w=900&q=80",
-  description: "根据你当前位置推荐最近的服务点和补给点。",
+  type: {
-  facilities: [
+    text: "厕所",
-    { id: "f1", name: "游客中心", meta: "咨询、补给、卫生间", distance: "120m" },
+  },
-    { id: "f2", name: "观光车站", meta: "前往水上森林", distance: "260m" },
+  distance: {
-    { id: "f3", name: "咖啡轻食", meta: "可短暂停留", distance: "360m" },
+    icon: "⌖",
-  ],
+    text: "距你约 200 米",
+  },
+  location: {
+    icon: "●",
+    label: "所在位置",
+    text: "卧龙潭景点入口右侧",
+  },
+  action: {
+    icon: "↗",
+    text: "带我去",
+  },
 };

src/pages/ChatModule/FacilityLocationCard/styles/index.scss

@@ -1,58 +1,87 @@
-.facility-location-card__hero {
+.facility-location-card {
-  position: relative;
+  border: 1px solid rgba(226, 232, 240, 0.72);
-  padding: 8px;
+  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
+  box-sizing: border-box;
 }
 
 .facility-location-card__image {
-}
+  height: 184px;
-
-.facility-location-card__overlay {
-  position: absolute;
-  left: 20px;
-  right: 20px;
-  bottom: 20px;
-}
-
-.facility-location-card__title {
-  margin-top: 8px;
-  color: #fff;
-  font-size: 18px;
-  font-weight: 900;
-  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.24);
 }
 
 .facility-location-card__body {
-  padding-top: 6px;
+  padding-top: 28px;
+  box-sizing: border-box;
 }
 
-.facility-location-card__desc {
+.facility-location-card__title-row {
-  line-height: 20px;
-}
-
-.facility-location-card__list {
-  margin-top: 14px;
-}
-
-.facility-location-card__item {
-  padding: 11px 0;
-}
-
-.facility-location-card__dot {
-  width: 8px;
-  height: 8px;
-  background: #06b6d4;
-}
-
-.facility-location-card__info {
   min-width: 0;
 }
 
-.facility-location-card__name {
+.facility-location-card__badge {
+  height: 30px;
+  margin-right: 12px;
+  padding: 0 12px;
+  border: 1px solid #bfdbfe;
+  border-radius: 10px;
+  line-height: 30px;
+  white-space: nowrap;
+  box-sizing: border-box;
 }
 
-.facility-location-card__meta {
+.facility-location-card__title {
-  margin-top: 3px;
+  min-width: 0;
+  line-height: 24px;
 }
 
 .facility-location-card__distance {
+  margin-top: 8px;
+  line-height: 18px;
+}
+
+.facility-location-card__distance-icon {
+  margin-right: 5px;
+  font-size: 15px;
+  line-height: 15px;
+}
+
+.facility-location-card__location {
+  margin-top: 24px;
+  padding: 18px 20px;
+  box-sizing: border-box;
+}
+
+.facility-location-card__location-label {
+  line-height: 18px;
+}
+
+.facility-location-card__location-dot {
+  margin-right: 8px;
+  color: #ec4899;
+  font-size: 14px;
+  line-height: 14px;
+}
+
+.facility-location-card__location-text {
+  margin-top: 12px;
+  line-height: 22px;
+}
+
+.facility-location-card__button {
+  height: 54px;
+  margin-top: 20px;
+  border-radius: 16px;
+}
+
+.facility-location-card__button:active {
+  opacity: 0.86;
+}
+
+.facility-location-card__button.is-disabled {
+  opacity: 0.55;
+}
+
+.facility-location-card__button-icon {
+  margin-right: 8px;
+  font-size: 19px;
+  line-height: 19px;
 }

src/pages/ChatModule/RoutePlanCard/index.vue

@@ -1,54 +1,113 @@
 <template>
-  <view class="route-plan-card">
+  <view class="route-plan-card w-full">
-    <CardShell v-if="!detailOpen" class="route-plan-card__summary flex flex-items-center gap-12 p-12" pressable :disabled="disabled" @select="openDetail">
+    <view
-      <MediaFrame class="route-plan-card__cover w-60 h-60 flex-shrink-0" :src="data.cover" />
+      v-if="!detailOpen"
-      <view class="route-plan-card__summary-body flex-full">
+      class="route-plan-card__summary flex flex-items-center bg-white rounded-24 overflow-hidden w-full"
-        <view class="route-plan-card__title color-1E293B font-size-14 font-900 ellipsis-1">{{ data.title }}</view>
+      :class="{ 'is-disabled': disabled }"
-        <view class="route-plan-card__chips flex flex-wrap gap-6">
+      @click="openDetail"
-          <BadgePill v-for="tag in tags" :key="tag" :label="tag" tone="green" />
+    >
+      <image
+        class="route-plan-card__cover block flex-shrink-0"
+        :src="data.image"
+        mode="aspectFill"
+      />
+      <view class="route-plan-card__body flex-full">
+        <view class="route-plan-card__title color-1E293B font-size-18 font-900 ellipsis-1">
+          {{ data.title }}
+        </view>
+        <view class="route-plan-card__tags flex flex-items-center">
+          <view
+            v-for="tag in summaryTags"
+            :key="tag.id || tag.text"
+            class="route-plan-card__tag font-size-12 font-900"
+            :class="getTagClass(tag.tone)"
+          >
+            {{ tag.text }}
+          </view>
         </view>
       </view>
-      <view class="route-plan-card__arrow color-CBD5E1 font-700">›</view>
+      <view class="route-plan-card__arrow flex-shrink-0"></view>
-    </CardShell>
+    </view>
 
-    <DetailShell
+    <view v-else class="route-plan-card__detail bg-white rounded-24 overflow-hidden w-full">
-      v-else
+      <view class="route-plan-card__detail-head flex flex-items-center">
-      :title="data.title"
+        <view
-      :tag="data.duration"
+          class="route-plan-card__back flex flex-items-center flex-justify-center rounded-full flex-shrink-0"
-      tone="green"
+          @click="closeDetail"
-      @back="closeDetail"
+        >
-    >
+          ‹
-      <view class="route-plan-card__flow p-16">
+        </view>
+        <view class="route-plan-card__detail-title color-1E293B font-size-18 font-900 ellipsis-1 flex-full">
+          {{ data.title }}
+        </view>
+        <view class="route-plan-card__detail-badge color-047857 bg-ECFDF5 font-size-12 font-900">
+          {{ detail.badge }}
+        </view>
+      </view>
+
+      <view class="route-plan-card__timeline">
         <template v-for="(node, index) in nodes" :key="node.id || node.title">
-          <view class="route-plan-card__node flex flex-items-center gap-10 p-10 rounded-18 bg-F8FAFC" @click="handleSelect(node)">
+          <view
-            <view class="route-plan-card__num flex flex-items-center flex-justify-center w-24 h-24 rounded-full color-white font-size-12 font-900">{{ index + 1 }}</view>
+            class="route-plan-card__node-wrap"
-            <MediaFrame class="route-plan-card__node-img w-54 h-54 flex-shrink-0" :src="node.cover" />
+            :class="{ 'is-disabled': disabled }"
-            <view class="route-plan-card__node-body flex-full">
+            @click="handleSelect(node)"
-              <view class="route-plan-card__node-title color-1E293B font-size-13 font-900 ellipsis-1">{{ node.title }}</view>
+          >
-              <view class="route-plan-card__node-desc color-94A3B8 font-size-10 font-700 ellipsis-1">{{ node.description }}</view>
+            <view class="route-plan-card__node-number flex flex-items-center flex-justify-center rounded-full color-047857 bg-ECFDF5 font-size-12 font-900">
-              <BadgePill v-if="node.tip" :label="node.tip" tone="amber" />
+              {{ index + 1 }}
+            </view>
+            <view class="route-plan-card__node bg-white rounded-20 flex flex-items-center">
+              <image
+                class="route-plan-card__node-image block flex-shrink-0"
+                :src="node.image"
+                mode="aspectFill"
+              />
+              <view class="route-plan-card__node-body flex-full">
+                <view class="route-plan-card__node-title color-1E293B font-size-16 font-900 ellipsis-1">
+                  {{ node.title }}
+                </view>
+                <view class="route-plan-card__node-desc color-94A3B8 font-size-12 font-800 ellipsis-1">
+                  {{ node.description }}
+                </view>
+                <view
+                  v-if="node.tag"
+                  class="route-plan-card__node-tag color-D97706 bg-FFFBEB font-size-12 font-900"
+                >
+                  {{ node.tag }}
+                </view>
+              </view>
             </view>
           </view>
-          <view v-if="index < connectors.length" class="route-plan-card__connector">
+
-            <view class="route-plan-card__line"></view>
+          <view v-if="connectors[index]" class="route-plan-card__connector">
-            <view class="route-plan-card__connector-text color-64748B font-size-11 font-800">{{ connectors[index] }}</view>
+            <view class="route-plan-card__connector-line"></view>
+            <view class="route-plan-card__connector-arrow"></view>
+            <view class="route-plan-card__connector-chip flex flex-items-center bg-F8FAFC rounded-full color-64748B font-size-12 font-900">
+              <text class="route-plan-card__connector-icon">{{ connectors[index].icon }}</text>
+              <text>{{ connectors[index].text }}</text>
+            </view>
           </view>
         </template>
-        <view v-if="tips.length" class="route-plan-card__tips mt-12 p-12 rounded-18 bg-FFFBEB">
+      </view>
-          <view class="route-plan-card__tips-title font-size-12 font-900">{{ data.tipsTitle }}</view>
+
-          <view v-for="tip in tips" :key="tip" class="route-plan-card__tip">{{ tip }}</view>
+      <view v-if="tips.length" class="route-plan-card__tips bg-F8FAFC rounded-20">
+        <view class="route-plan-card__tips-title color-64748B font-size-14 font-900">
+          {{ detail.tipsTitle }}
+        </view>
+        <view
+          v-for="tip in tips"
+          :key="tip"
+          class="route-plan-card__tip flex flex-items-center color-334155 font-size-13 font-900"
+        >
+          <view class="route-plan-card__tip-dot rounded-full flex-shrink-0"></view>
+          <view>{{ tip }}</view>
         </view>
       </view>
-    </DetailShell>
+    </view>
   </view>
 </template>
 
 <script setup>
 import { computed, ref } from "vue";
-import CardShell from "../SharedVisual/CardShell.vue";
-import DetailShell from "../SharedVisual/DetailShell.vue";
-import MediaFrame from "../SharedVisual/MediaFrame.vue";
-import BadgePill from "../SharedVisual/BadgePill.vue";
 
 const props = defineProps({
   data: {
@@ -64,10 +123,16 @@ const props = defineProps({
 const emit = defineEmits(["select", "back"]);
 
 const detailOpen = ref(false);
-const tags = computed(() => props.data.tags || []);
+const detail = computed(() => props.data.detail || {});
-const nodes = computed(() => props.data.nodes || []);
+const summaryTags = computed(() => props.data.summaryTags || []);
-const connectors = computed(() => props.data.connectors || []);
+const nodes = computed(() => detail.value.nodes || []);
-const tips = computed(() => props.data.tips || []);
+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";
+};
 
 const openDetail = () => {
   if (props.disabled) return;

src/pages/ChatModule/RoutePlanCard/mocks.js

@@ -1,14 +1,74 @@
 export default {
-  title: "半日轻松游览路线",
+  id: "east-in-west-out",
-  duration: "约 2.5 小时",
+  title: "经典东进西出",
-  cover: "https://images.unsplash.com/photo-1500534314209-a25ddb2bd429?auto=format&fit=crop&w=600&q=80",
+  image: "https://images.unsplash.com/photo-1441974231531-c6227db76b6e?auto=format&fit=crop&w=400&q=80",
-  tags: ["亲子友好", "少走回头路", "含观光车"],
+  summaryTags: [
-  tipsTitle: "出行贴士",
+    {
-  nodes: [
+      id: "spots",
-    { id: "n1", title: "游客中心", description: "补给和领取地图", cover: "https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&w=400&q=80" },
+      text: "4 个景点",
-    { id: "n2", title: "翠谷瀑布", description: "核心观景点", cover: "https://images.unsplash.com/photo-1432405972618-c60b0225b8f9?auto=format&fit=crop&w=400&q=80" },
+      tone: "green",
-    { id: "n3", title: "水上森林", description: "慢游和拍照", cover: "https://images.unsplash.com/photo-1441974231531-c6227db76b6e?auto=format&fit=crop&w=400&q=80", tip: "推荐停留" },
+    },
+    {
+      id: "duration",
+      text: "5–6 小时",
+      tone: "gray",
+    },
+    {
+      id: "direction",
+      text: "东进西出",
+      tone: "gray",
+    },
   ],
-  connectors: ["步行约 5 分钟", "观光车约 6 分钟"],
+  detail: {
-  tips: ["雨天注意栈道防滑。", "带老人小孩建议优先使用观光车。"],
+    badge: "4 个景点",
+    tipsTitle: "出行贴士",
+    nodes: [
+      {
+        id: "xiaoqikong-bridge",
+        title: "小七孔古桥",
+        description: "清代古桥，景区得名之处",
+        image: "https://images.unsplash.com/photo-1500534314209-a25ddb2bd429?auto=format&fit=crop&w=400&q=80",
+      },
+      {
+        id: "cuigu-waterfall",
+        title: "翠谷瀑布",
+        description: "落差110米，国内罕见跌水群",
+        image: "https://images.unsplash.com/photo-1432405972618-c60b0225b8f9?auto=format&fit=crop&w=400&q=80",
+      },
+      {
+        id: "water-forest",
+        title: "水上森林",
+        description: "水中有树，绝无仅有",
+        image: "https://images.unsplash.com/photo-1441974231531-c6227db76b6e?auto=format&fit=crop&w=400&q=80",
+        tag: "可竹筏游览",
+      },
+      {
+        id: "wolongtan",
+        title: "卧龙潭",
+        description: "蓝柔深潭，漂流终点",
+        image: "https://images.unsplash.com/photo-1559734840-f9509ee5677f?auto=format&fit=crop&w=400&q=80",
+        tag: "可卧龙潭漂流",
+      },
+    ],
+    connectors: [
+      {
+        icon: "👣",
+        text: "步行 · 约5分钟",
+      },
+      {
+        icon: "🚌",
+        text: "观光车 · 约6分钟",
+      },
+      {
+        icon: "🚣",
+        text: "漂流 · 约40分钟",
+      },
+    ],
+    tips: [
+      "旺季9点前入园，避开团客高峰",
+      "中午在翠谷小吃摊补给",
+      "下午2点后拍翠谷瀑布最出片",
+      "观光车票50元，建议入园即购",
+    ],
+  },
 };

src/pages/ChatModule/RoutePlanCard/styles/index.scss

@@ -2,38 +2,135 @@
   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__summary-body {
+.route-plan-card__body {
   min-width: 0;
+  margin-left: 18px;
 }
 
 .route-plan-card__title {
+  line-height: 24px;
 }
 
-.route-plan-card__chips {
+.route-plan-card__tags {
-  margin-top: 8px;
+  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 {
-  font-size: 24px;
+  width: 12px;
+  height: 12px;
+  margin-left: 14px;
+  border-top: 2px solid #cbd5e1;
+  border-right: 2px solid #cbd5e1;
+  transform: rotate(45deg);
 }
 
-.route-plan-card__flow {
+.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__num {
+.route-plan-card__node-image {
-  background: #10b981;
+  width: 64px;
-}
+  height: 64px;
-
+  margin-right: 14px;
-.route-plan-card__node-img {
+  border-radius: 10px;
 }
 
 .route-plan-card__node-body {
@@ -41,40 +138,90 @@
 }
 
 .route-plan-card__node-title {
+  line-height: 22px;
 }
 
 .route-plan-card__node-desc {
-  margin: 4px 0 6px;
+  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 {
-  display: flex;
+  position: relative;
-  align-items: center;
+  height: 56px;
-  gap: 10px;
-  padding: 8px 0 8px 22px;
 }
 
-.route-plan-card__line {
+.route-plan-card__connector-line {
+  position: absolute;
+  left: 50%;
+  top: 0;
   width: 2px;
-  height: 24px;
+  height: 52px;
-  border-radius: 4px;
+  border-radius: 2px;
-  background: #d1fae5;
+  background: #bbf7d0;
 }
 
-.route-plan-card__connector-text {
+.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 {
-  color: #92400e;
+  margin-bottom: 14px;
-  margin-bottom: 8px;
+  line-height: 18px;
 }
 
 .route-plan-card__tip {
-  color: #b45309;
+  min-height: 22px;
-  font-size: 11px;
+  line-height: 22px;
-  font-weight: 700;
+}
-  line-height: 18px;
+
+.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;
 }