feat: replace arrow characters with uni-icons in various cards; enhance visual consistency and user experience
This commit is contained in:
@@ -22,7 +22,7 @@
|
|||||||
<view class="faq-help-card__question color-475569 font-size-18 font-900 ellipsis-1 flex-full">
|
<view class="faq-help-card__question color-475569 font-size-18 font-900 ellipsis-1 flex-full">
|
||||||
{{ item.text }}
|
{{ item.text }}
|
||||||
</view>
|
</view>
|
||||||
<view class="faq-help-card__arrow color-CBD5E1 font-size-22 font-900 flex-shrink-0">›</view>
|
<uni-icons type="right" size="16" color="#CBD5E1"></uni-icons>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|||||||
@@ -22,7 +22,7 @@
|
|||||||
</view>
|
</view>
|
||||||
<view class="long-text-guide-card__summary-footer flex flex-items-center flex-justify-between">
|
<view class="long-text-guide-card__summary-footer flex flex-items-center flex-justify-between">
|
||||||
<text class="color-CBD5E1 font-size-12 font-800">{{ item.footer }}</text>
|
<text class="color-CBD5E1 font-size-12 font-800">{{ item.footer }}</text>
|
||||||
<text class="long-text-guide-card__arrow color-CBD5E1 font-700">›</text>
|
<uni-icons type="right" size="16" color="#CBD5E1"></uni-icons>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@@ -33,7 +33,7 @@
|
|||||||
class="long-text-guide-card__back flex flex-items-center flex-justify-center rounded-full font-700"
|
class="long-text-guide-card__back flex flex-items-center flex-justify-center rounded-full font-700"
|
||||||
@click="closeDetail"
|
@click="closeDetail"
|
||||||
>
|
>
|
||||||
‹
|
<uni-icons type="left" size="16" color="#CBD5E1"></uni-icons>
|
||||||
</view>
|
</view>
|
||||||
<view class="long-text-guide-card__detail-title color-1E293B font-size-18 font-900 ellipsis-1">
|
<view class="long-text-guide-card__detail-title color-1E293B font-size-18 font-900 ellipsis-1">
|
||||||
{{ activeItem.title }}
|
{{ activeItem.title }}
|
||||||
|
|||||||
@@ -1,49 +0,0 @@
|
|||||||
<template>
|
|
||||||
<view class="long-text-guide-combo-card">
|
|
||||||
<LongTextGuideCard
|
|
||||||
:data="data"
|
|
||||||
:disabled="disabled"
|
|
||||||
@select="$emit('select', $event)"
|
|
||||||
@back="$emit('back', $event)"
|
|
||||||
@action="$emit('action', $event)"
|
|
||||||
/>
|
|
||||||
<view v-if="actions.length" class="long-text-guide-combo-card__actions flex flex-col gap-10 mt-12 p-10 rounded-24">
|
|
||||||
<ActionRow
|
|
||||||
v-for="item in actions"
|
|
||||||
:key="item.title"
|
|
||||||
:title="item.title"
|
|
||||||
:subtitle="item.subtitle"
|
|
||||||
:icon="item.icon"
|
|
||||||
:tone="item.tone || 'green'"
|
|
||||||
:disabled="disabled"
|
|
||||||
:payload="item"
|
|
||||||
@action="$emit('action', $event)"
|
|
||||||
/>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { computed } from "vue";
|
|
||||||
import LongTextGuideCard from "../LongTextGuideCard/index.vue";
|
|
||||||
import ActionRow from "../SharedVisual/ActionRow.vue";
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
data: {
|
|
||||||
type: Object,
|
|
||||||
default: () => ({}),
|
|
||||||
},
|
|
||||||
disabled: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
defineEmits(["select", "back", "action"]);
|
|
||||||
|
|
||||||
const actions = computed(() => props.data.actions || []);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
@import "./styles/index.scss";
|
|
||||||
</style>
|
|
||||||
@@ -1,22 +0,0 @@
|
|||||||
export default {
|
|
||||||
cards: [
|
|
||||||
{
|
|
||||||
id: "combo-guide",
|
|
||||||
badge: "组合攻略",
|
|
||||||
time: "约 5 分钟阅读",
|
|
||||||
title: "一天内拍照、游览和用餐怎么安排",
|
|
||||||
summary: "把景点详情、大图机位、导航和票务入口组合到同一张攻略卡后续行动区。",
|
|
||||||
footer: "展开攻略和行动",
|
|
||||||
sections: [
|
|
||||||
{ title: "上午", content: "先拍远景与人像,再进入主步道游览。" },
|
|
||||||
{ title: "下午", content: "根据光线选择二号机位,最后去游客中心附近补给。" },
|
|
||||||
],
|
|
||||||
action: { title: "查看景点详情", subtitle: "开放时间与路线", icon: "i" },
|
|
||||||
},
|
|
||||||
],
|
|
||||||
actions: [
|
|
||||||
{ title: "查看机位图", subtitle: "高清大图与拍摄角度", icon: "▣", tone: "blue" },
|
|
||||||
{ title: "带我去这里", subtitle: "地图路线与步行距离", icon: "⌖", tone: "green" },
|
|
||||||
{ title: "相关票务", subtitle: "门票和套票入口", icon: "¥", tone: "amber" },
|
|
||||||
],
|
|
||||||
};
|
|
||||||
@@ -1,8 +0,0 @@
|
|||||||
.long-text-guide-combo-card {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.long-text-guide-combo-card__actions {
|
|
||||||
background: rgba(255, 255, 255, 0.62);
|
|
||||||
box-shadow: 0 8px 26px rgba(15, 23, 42, 0.04);
|
|
||||||
}
|
|
||||||
@@ -1,37 +0,0 @@
|
|||||||
<template>
|
|
||||||
<view class="multi-poi-recommendation-card">
|
|
||||||
<PoiDetailCard
|
|
||||||
v-for="item in items"
|
|
||||||
:key="item.id || item.title"
|
|
||||||
class="multi-poi-recommendation-card__item"
|
|
||||||
:data="item"
|
|
||||||
:disabled="disabled"
|
|
||||||
@select="$emit('select', $event)"
|
|
||||||
@action="$emit('action', $event)"
|
|
||||||
/>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { computed } from "vue";
|
|
||||||
import PoiDetailCard from "../PoiDetailCard/index.vue";
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
data: {
|
|
||||||
type: Object,
|
|
||||||
default: () => ({}),
|
|
||||||
},
|
|
||||||
disabled: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
defineEmits(["select", "action"]);
|
|
||||||
|
|
||||||
const items = computed(() => props.data.items || []);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
@import "./styles/index.scss";
|
|
||||||
</style>
|
|
||||||
@@ -1,34 +0,0 @@
|
|||||||
export default {
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
id: "poi-1",
|
|
||||||
title: "翠谷瀑布",
|
|
||||||
category: "自然景观",
|
|
||||||
cover: "https://images.unsplash.com/photo-1432405972618-c60b0225b8f9?auto=format&fit=crop&w=900&q=80",
|
|
||||||
description: "主线步道上的核心停留点,适合拍摄水景。",
|
|
||||||
facts: [
|
|
||||||
{ label: "距离", value: "500m" },
|
|
||||||
{ label: "推荐", value: "高" },
|
|
||||||
{ label: "耗时", value: "30m" },
|
|
||||||
],
|
|
||||||
tags: ["亲水", "拍照"],
|
|
||||||
actionTitle: "导航到瀑布",
|
|
||||||
actionSubtitle: "步行约 8 分钟",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "poi-2",
|
|
||||||
title: "水上森林",
|
|
||||||
category: "亲子友好",
|
|
||||||
cover: "https://images.unsplash.com/photo-1500534314209-a25ddb2bd429?auto=format&fit=crop&w=900&q=80",
|
|
||||||
description: "树影和水面交错,适合慢游和家庭出行。",
|
|
||||||
facts: [
|
|
||||||
{ label: "距离", value: "1.2km" },
|
|
||||||
{ label: "推荐", value: "中高" },
|
|
||||||
{ label: "耗时", value: "45m" },
|
|
||||||
],
|
|
||||||
tags: ["轻徒步", "观景"],
|
|
||||||
actionTitle: "导航到水上森林",
|
|
||||||
actionSubtitle: "观光车约 6 分钟",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
@@ -1,10 +0,0 @@
|
|||||||
.multi-poi-recommendation-card {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 12px;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.multi-poi-recommendation-card__item {
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
@@ -27,7 +27,7 @@
|
|||||||
class="notice-card__back flex flex-items-center flex-justify-center rounded-full flex-shrink-0"
|
class="notice-card__back flex flex-items-center flex-justify-center rounded-full flex-shrink-0"
|
||||||
@click="closeDetail"
|
@click="closeDetail"
|
||||||
>
|
>
|
||||||
‹
|
<uni-icons type="left" size="16" color="#CBD5E1"></uni-icons>
|
||||||
</view>
|
</view>
|
||||||
<view class="notice-card__head-title color-1E293B font-size-18 font-900">
|
<view class="notice-card__head-title color-1E293B font-size-18 font-900">
|
||||||
{{ detail.navTitle }}
|
{{ detail.navTitle }}
|
||||||
|
|||||||
@@ -60,7 +60,7 @@
|
|||||||
class="poi-compare-card__back flex flex-items-center flex-justify-center rounded-full flex-shrink-0"
|
class="poi-compare-card__back flex flex-items-center flex-justify-center rounded-full flex-shrink-0"
|
||||||
@click="closeDetail"
|
@click="closeDetail"
|
||||||
>
|
>
|
||||||
‹
|
<uni-icons type="left" size="16" color="#CBD5E1"></uni-icons>
|
||||||
</view>
|
</view>
|
||||||
<view class="poi-compare-card__detail-title color-1E293B font-size-20 font-900 flex-full">
|
<view class="poi-compare-card__detail-title color-1E293B font-size-20 font-900 flex-full">
|
||||||
{{ detail.title }}
|
{{ detail.title }}
|
||||||
|
|||||||
@@ -26,7 +26,9 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="route-plan-card__arrow flex-shrink-0"></view>
|
<view class="flex-shrink-0">
|
||||||
|
<uni-icons type="right" size="16" color="#CBD5E1"></uni-icons>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view v-else class="route-plan-card__detail bg-white rounded-24 overflow-hidden w-full">
|
<view v-else class="route-plan-card__detail bg-white rounded-24 overflow-hidden w-full">
|
||||||
@@ -35,7 +37,7 @@
|
|||||||
class="route-plan-card__back flex flex-items-center flex-justify-center rounded-full flex-shrink-0"
|
class="route-plan-card__back flex flex-items-center flex-justify-center rounded-full flex-shrink-0"
|
||||||
@click="closeDetail"
|
@click="closeDetail"
|
||||||
>
|
>
|
||||||
‹
|
<uni-icons type="left" size="16" color="#CBD5E1"></uni-icons>
|
||||||
</view>
|
</view>
|
||||||
<view class="route-plan-card__detail-title color-1E293B font-size-18 font-900 ellipsis-1 flex-full">
|
<view class="route-plan-card__detail-title color-1E293B font-size-18 font-900 ellipsis-1 flex-full">
|
||||||
{{ data.title }}
|
{{ data.title }}
|
||||||
|
|||||||
@@ -1,7 +1,9 @@
|
|||||||
<template>
|
<template>
|
||||||
<CardShell variant="detail">
|
<CardShell variant="detail">
|
||||||
<view class="visual-detail__header flex flex-items-center px-16 border-box border-bottom-F1F5F9">
|
<view class="visual-detail__header flex flex-items-center px-16 border-box border-bottom-F1F5F9">
|
||||||
<view class="visual-detail__back mr-8 rounded-full bg-F8FAFC color-334155 font-900 text-center" @click="$emit('back')">‹</view>
|
<view class="visual-detail__back mr-8 rounded-full bg-F8FAFC color-334155 font-900 text-center" @click="$emit('back')">
|
||||||
|
<uni-icons type="left" size="16" color="#CBD5E1"></uni-icons>
|
||||||
|
</view>
|
||||||
<view class="visual-detail__title flex-full color-1E293B font-size-14 font-900 ellipsis-1">{{ title }}</view>
|
<view class="visual-detail__title flex-full color-1E293B font-size-14 font-900 ellipsis-1">{{ title }}</view>
|
||||||
<BadgePill v-if="tag" :label="tag" :tone="tone" />
|
<BadgePill v-if="tag" :label="tag" :tone="tone" />
|
||||||
</view>
|
</view>
|
||||||
|
|||||||
Reference in New Issue
Block a user