feat: update AigcPhotoCard, FaqHelpCard, MapNavigationCard, NoticeCard, ScenicImageCard with new layouts, styles, and mock data; enhance user interaction and visual appeal

src/pages/ChatModule/NoticeCard/index.vue

@@ -1,56 +1,74 @@
 <template>
-  <view class="notice-card">
-    <CardShell v-if="!activeNotice" class="notice-card__list p-16" variant="soft">
-      <view class="notice-card__header flex flex-justify-between gap-12">
-        <view>
-          <view class="notice-card__title color-1E293B font-size-16 font-900">{{ data.title }}</view>
-          <view class="notice-card__subtitle color-94A3B8 font-size-11 font-700">{{ data.subtitle }}</view>
-        </view>
-        <BadgePill v-if="data.badge" :label="data.badge" tone="rose" />
+  <view class="notice-card w-full">
+    <view v-if="!detailOpen" class="notice-card__summary bg-FFFBEB rounded-24 w-full">
+      <view class="notice-card__summary-title color-B45309 font-size-16 font-900">
+        {{ summary.title }}
       </view>
-      <view
-        v-for="item in notices"
-        :key="item.id || item.title"
-        class="notice-card__item flex gap-12 border-bottom-F1F5F9"
-        :class="{ 'is-disabled': disabled }"
-        @click="openNotice(item)"
-      >
-        <view class="notice-card__item-body flex-full">
-          <view class="notice-card__item-title color-1E293B font-size-13 font-900 ellipsis-1">{{ item.title }}</view>
-          <view class="notice-card__item-desc color-94A3B8 font-size-11 font-700 ellipsis-2">{{ item.summary }}</view>
-        </view>
-        <view class="notice-card__item-date color-E11D48 font-size-10 font-900">{{ item.date }}</view>
+      <view class="notice-card__summary-content color-D97706 font-size-14 font-900">
+        {{ summary.content }}
       </view>
-    </CardShell>
-
-    <DetailShell
-      v-else
-      :title="activeNotice.title"
-      :tag="activeNotice.type"
-      tone="rose"
-      @back="closeNotice"
-    >
-      <view class="notice-card__detail p-16">
-        <MediaFrame v-if="activeNotice.cover" class="notice-card__cover h-154" :src="activeNotice.cover" />
-        <view class="notice-card__meta color-94A3B8 font-size-11 font-800">{{ activeNotice.date }}</view>
+      <view class="notice-card__summary-footer flex flex-items-center flex-justify-between">
+        <view class="notice-card__summary-time color-D97706 font-size-12 font-900">
+          {{ summary.publishTime }}
+        </view>
         <view
-          v-for="(paragraph, index) in paragraphs"
-          :key="index"
-          class="notice-card__paragraph color-475569 font-size-13 font-700"
+          class="notice-card__summary-link color-B45309 font-size-14 font-900"
+          :class="{ 'is-disabled': disabled }"
+          @click="openDetail"
         >
-          {{ paragraph }}
+          {{ summary.actionText }}
         </view>
       </view>
-    </DetailShell>
+    </view>
+
+    <view v-else class="notice-card__detail bg-white rounded-24 overflow-hidden w-full">
+      <view class="notice-card__detail-head flex flex-items-center">
+        <view
+          class="notice-card__back flex flex-items-center flex-justify-center rounded-full flex-shrink-0"
+          @click="closeDetail"
+        >
+          ‹
+        </view>
+        <view class="notice-card__head-title color-1E293B font-size-18 font-900">
+          {{ detail.navTitle }}
+        </view>
+      </view>
+
+      <image
+        class="notice-card__image block w-full"
+        :src="detail.image"
+        mode="aspectFill"
+      />
+
+      <view class="notice-card__detail-body">
+        <view class="notice-card__detail-title color-1E293B font-size-20 font-900">
+          {{ detail.title }}
+        </view>
+        <view class="notice-card__time-pill flex flex-items-center bg-F8FAFC color-475569 font-size-13 font-900">
+          <text class="notice-card__time-icon">{{ detail.timeIcon }}</text>
+          <text>{{ detail.publishTime }}</text>
+        </view>
+        <view class="notice-card__divider"></view>
+        <view
+          v-for="paragraph in paragraphs"
+          :key="paragraph.id"
+          class="notice-card__paragraph color-475569 font-size-14 font-800"
+        >
+          <text
+            v-for="segment in paragraph.segments"
+            :key="segment.text"
+            :class="{ 'notice-card__strong': segment.strong }"
+          >
+            {{ segment.text }}
+          </text>
+        </view>
+      </view>
+    </view>
   </view>
 </template>
 
 <script setup>
 import { computed, ref } from "vue";
-import CardShell from "../SharedVisual/CardShell.vue";
-import DetailShell from "../SharedVisual/DetailShell.vue";
-import BadgePill from "../SharedVisual/BadgePill.vue";
-import MediaFrame from "../SharedVisual/MediaFrame.vue";
 
 const props = defineProps({
   data: {
@@ -63,20 +81,22 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(["select", "back"]);
+const emit = defineEmits(["select", "back", "action"]);
 
-const activeNotice = ref(null);
-const notices = computed(() => props.data.notices || []);
-const paragraphs = computed(() => activeNotice.value?.paragraphs || []);
+const detailOpen = ref(false);
+const summary = computed(() => props.data.summary || {});
+const detail = computed(() => props.data.detail || {});
+const paragraphs = computed(() => detail.value.paragraphs || []);
 
-const openNotice = (item) => {
+const openDetail = () => {
   if (props.disabled) return;
-  activeNotice.value = item;
-  emit("select", item);
+  detailOpen.value = true;
+  emit("select", props.data);
+  emit("action", props.data);
 };
 
-const closeNotice = () => {
-  activeNotice.value = null;
+const closeDetail = () => {
+  detailOpen.value = false;
   emit("back");
 };
 </script>