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

fix: clean up deprecated props, fix scroll issues and styles

Browse Source 
- remove deprecated `mode="aspectFill"` prop from all image and img tags
- replace deprecated `scroll-y` directive with modern overflow-y-auto and scrollbar hiding classes
- refactor notice page to use TypeScript and proper route query handling
- update styling and layout for NoticeMessage, Tabs and QuickCard components
- fix spacing inconsistencies across multiple pages
This commit is contained in:
duanshuwen
2026-06-26 21:13:16 +08:00
parent 3ca8db42b8
commit 89fd9acb71
13 changed files with 61 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,7 +1,7 @@
<template>
<div
class="bg-white rounded-[24px] overflow-hidden w-full border border-[rgba(226,232,240,0.72)] shadow-[0_12px_30px_rgba(15,23,42,0.05)] box-border">
<img class="block w-full h-[184px]" :src="data.image" mode="aspectFill" />
<img class="block w-full h-[184px]" :src="data.image" />
<div class="px-24 pb-24 pt-7 box-border">
<div class="flex items-center min-w-0">

7
src/pages/home/components/LongTextGuideCardPreview/guide.vue
View File

@@ -2,8 +2,7 @@
<div class="flex flex-col h-screen overflow-hidden bg-[#e5efe9]">
<TopNavBar title="漂流攻略" background="#E5EFE9" />
<div class="flex-1 min-h-0 overflow-y-auto scrollbar-none [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden"
scroll-y>
<div class="flex-1 min-h-0 overflow-y-auto scrollbar-none [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden">
<div class="box-border">
<div class="overflow-hidden">
<div class="pt-4 px-[18px] pb-[14px] border-b border-[rgba(15,23,42,0.06)]">
@@ -22,7 +21,7 @@
</div>
<img class="block w-full h-[160px] my-1 mt-1 mb-4 rounded-[14px] bg-[#f1f5f9]"
src="https://one-feel-config-images-bucket.oss-cn-chengdu.aliyuncs.com/comp1.jpg" mode="aspectFill" />
src="https://one-feel-config-images-bucket.oss-cn-chengdu.aliyuncs.com/comp1.jpg" />
<div class="mt-[18px] mb-2 text-[#1e293b] text-[13px] font-black leading-5">下水前，这几样别落下</div>
<div
@@ -54,7 +53,7 @@
<div class="flex gap-[10px] px-4 pb-[2px]">
<div v-for="product in products" :key="product.name"
class="w-[220px] shrink-0 overflow-hidden border border-[#f1f5f9] rounded-[20px] bg-white shadow-[0_2px_12px_rgba(15,23,42,0.04)]">
<img class="w-full h-[110px] bg-[#f1f5f9]" :src="product.img" mode="aspectFill" />
<img class="w-full h-[110px] bg-[#f1f5f9]" :src="product.img" />
<div class="pt-[10px] px-3 pb-3">
<div v-if="product.saleTag"
class="inline-flex w-fit mb-1 px-[6px] py-[2px] rounded-[6px] text-[#f43f5e] bg-[#fef2f2] text-[9px] font-black">

7
src/pages/home/components/LongTextGuideCardPreview/photo.vue
View File

@@ -2,8 +2,7 @@
<div class="flex flex-col h-screen overflow-hidden bg-[#e5efe9]">
<TopNavBar title="拍照攻略" background="#E5EFE9" />
<div class="flex-1 min-h-0 overflow-y-auto scrollbar-none [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden"
scroll-y>
<div class="flex-1 min-h-0 overflow-y-auto scrollbar-none [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden">
<div class="box-border">
<div class="overflow-hidden">
<div class="pt-4 px-[18px] pb-[14px] border-b border-[rgba(15,23,42,0.06)]">
@@ -47,7 +46,7 @@
查看机位图
</div>
<div class="relative mx-4 mb-3 overflow-hidden rounded-[16px] bg-[#f8fafc]" @click="predivPhoto">
<img class="w-full h-[200px] bg-[#f1f5f9]" :src="photo.thumb" mode="aspectFill" />
<img class="w-full h-[200px] bg-[#f1f5f9]" :src="photo.thumb" />
<div
class="absolute inset-x-0 bottom-0 px-[14px] pt-7 pb-3 bg-[linear-gradient(to_top,rgba(15,23,42,0.58),rgba(15,23,42,0))]">
<div class="text-white text-[13px] font-black leading-[18px]">{{ photo.title }}</div>
@@ -65,7 +64,7 @@
</div>
<div class="mx-4 mb-3 overflow-hidden border border-[#f1f5f9] rounded-[16px] bg-white">
<div class="relative">
<img class="w-full h-[160px] bg-[#f1f5f9]" :src="aigc.img" mode="aspectFill" />
<img class="w-full h-[160px] bg-[#f1f5f9]" :src="aigc.img" />
<div
class="absolute top-[10px] left-[10px] px-[10px] py-1 rounded-[10px] text-white bg-[linear-gradient(135deg,#8b5cf6,#6366f1)] shadow-[0_2px_8px_rgba(99,102,241,0.35)] text-[10px] font-black">
AI 生成

5
src/pages/home/components/LongTextGuideCardPreview/poi.vue
View File

@@ -2,8 +2,7 @@
<div class="flex flex-col h-screen overflow-hidden bg-[#e5efe9]">
<TopNavBar title="景点故事" background="#E5EFE9" />
<div class="flex-1 min-h-0 overflow-y-auto scrollbar-none [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden"
scroll-y>
<div class="flex-1 min-h-0 overflow-y-auto scrollbar-none [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden">
<div class="box-border">
<div class="overflow-hidden">
<div class="pt-4 px-[18px] pb-[14px] border-b border-[rgba(15,23,42,0.06)]">
@@ -22,7 +21,7 @@
</div>
<img class="block w-full h-[160px] my-1 mt-1 mb-4 rounded-[14px] bg-[#f1f5f9]"
src="https://one-feel-config-images-bucket.oss-cn-chengdu.aliyuncs.com/comp2.jpg" mode="aspectFill" />
src="https://one-feel-config-images-bucket.oss-cn-chengdu.aliyuncs.com/comp2.jpg" />
<div class="mt-[18px] mb-2 text-[#1e293b] text-[13px] font-black leading-5">站在这儿，看什么</div>
<div

3
src/pages/home/components/LongTextGuideCardPreview/route.vue
View File

@@ -2,8 +2,7 @@
<div class="flex flex-col h-screen overflow-hidden bg-[#e5efe9]">
<TopNavBar title="路线指引" background="#E5EFE9" />
<div class="flex-1 min-h-0 overflow-y-auto scrollbar-none [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden"
scroll-y>
<div class="flex-1 min-h-0 overflow-y-auto scrollbar-none [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden">
<div class="box-border">
<div class="overflow-hidden">
<div class="pt-4 px-[18px] pb-[14px] border-b border-[rgba(15,23,42,0.06)]">

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

@@ -2,7 +2,7 @@
<div
class="bg-white rounded-[24px] overflow-hidden w-full border border-[rgba(226,232,240,0.72)] shadow-[0_12px_30px_rgba(15,23,42,0.05)] box-border">
<div class="relative">
<img class="block w-full h-[248px]" :src="data.image" mode="aspectFill" />
<img class="block w-full h-[248px]" :src="data.image" />
<div
class="absolute left-4 bottom-4 flex items-center text-white text-[12px] font-bold h-[34px] px-3 rounded-[8px] bg-[rgba(15,23,42,0.72)] leading-[34px]">
<span class="mr-[6px] text-[15px] leading-[15px]">{{ badge.icon }}</span>

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

@@ -33,7 +33,7 @@
</div>
</div>
<image class="block w-full h-[250px]" :src="detail.image" mode="aspectFill" />
<image class="block w-full h-[250px]" :src="detail.image" />
<div class="pt-[22px] px-5 pb-7 box-border">
<div class="text-[#1e293b] font-size-20 font-bold leading-7">

14
src/pages/home/components/NoticeMessage/index.vue
View File

@@ -1,12 +1,13 @@
<template>
<div v-if="hasBannerList">
<van-swipe class="h-[50px] mt-[8px]" loop vertical :show-indicators="false">
<van-swipe class="h-[50px] mt-[8px] rounded-[12px] bg-white px-[12px]" loop vertical :autoplay="autoplay"
:show-indicators="false">
<van-swipe-item v-for="item in bannerList" :key="item.entityName">
<div class="swiper-item bg-white flex flex-col items-start justify-between px-[12px]" @click="clickItem(item)">
<div class="h-full flex flex-col items-start justify-center" @click="clickItem(item)">
<span class="text-[#0CCD58] text-[12px] text-[600]">
{{ item.entityName }}
</span>
<div class="flex flex-row justify-between">
<div class="w-full flex flex-row justify-between">
<span class="text-[#0CCD58] text-[10px] text-[500]">
{{ t("home.notice.publishedAt") }}{{ item.effectiveStartTime }}
</span>
@@ -81,13 +82,6 @@ const clickItem = (item) => {
</script>
<style lang="scss" scoped>
.swiper-item {
display: block;
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
border-radius: 12px;
border: 1px solid #C7D2FE;
}
.underline-text {
text-decoration: underline;
text-decoration-color: #0CCD58;

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

@@ -15,7 +15,7 @@
<div class="grid grid-cols-2 gap-[16px] mt-7">
<div v-for="item in items" :key="item.id || item.name" class="min-w-0 active:opacity-[0.86]"
:class="{ 'opacity-[0.55]': disabled }" @click="handleSelect(item)">
<img class="block w-full h-[140px] rounded-[18px]" :src="item.image" mode="aspectFill" />
<img class="block w-full h-[140px] rounded-[18px]" :src="item.image" />
<div v-for="field in item.fields" :key="field.label" class="mt-3">
<div class="text-[#94A3B8] text-[12px] font-bold leading-4">
{{ field.label }}

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

@@ -2,7 +2,7 @@
<div
class="bg-white rounded-[24px] overflow-hidden border border-[#0f172a]/[0.04] shadow-[0_10px_28px_rgba(15,23,42,0.04)]">
<div class="h-[206px] pt-[8px] px-[8px] relative">
<image class="poi-detail-card__image w-full h-full block rounded-18" :src="data.image" mode="aspectFill" />
<image class="poi-detail-card__image w-full h-full block rounded-18" :src="data.image" />
<div
class="absolute top-[18px] left-[22px] min-h-[30px] px-[12px] rounded-full text-[#059669] bg-white/90 backdrop-blur-[8px] flex items-center gap-4 text-[10px] font-bold">
<span class="text-[13px] leading-none">⌖</span>

60
src/pages/notice/index.vue
View File

@@ -6,11 +6,11 @@
</div>
<!-- ✅ 滚动区域 -->
<div class="flex-1 overflow-hidden" scroll-y>
<div class="pb-24 overflow-hidden">
<img v-if="coverImage" class="w-full block" :src="coverImage" mode="aspectFill" />
<div class="flex-1 overflow-y-auto scrollbar-none [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden">
<div class="pb-[24px] overflow-hidden">
<img v-if="coverImage" class="w-full block" :src="coverImage" />
<div class="pt-16 px-12 pb-24 ">
<div class="pt-[16px] px-[12px] pb-[24px] ">
<div class="text-[#171717] text-[16px] font-semibold">{{ detailTitle }}</div>
<div v-if="publishTime" class="notice-time-tag flex flex-row items-center mt-[16px]">
@@ -19,8 +19,6 @@
publishTime }}</span>
</div>
<div class="mt-[16px] mx-12 bg-gray w-full height-1"></div>
<div class="mt-[16px] color-666 text-[14px] leading-[20px]">{{ noticeContent }}</div>
</div>
</div>
@@ -28,14 +26,22 @@
</div>
</template>
<script setup>
<script setup lang="ts">
import { computed, ref, watch } from "vue";
import { useRoute } from "vue-router";
import TopNavBar from "@/components/TopNavBar/index.vue";
import { computed, ref } from "vue";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
type NoticeData = {
entityName?: string;
effectiveStartTime?: string;
imgUrl?: string;
eventDescription?: string;
};
const noticeData = ref({});
const { t } = useI18n();
const route = useRoute();
const noticeData = ref<NoticeData>({});
const detailTitle = computed(() => {
return noticeData.value.entityName?.trim() || t("home.notice.detailTitle");
@@ -46,23 +52,35 @@ const publishTime = computed(() => {
});
const coverImage = computed(() => {
return noticeData.value.eventImage?.trim();
return noticeData.value.imgUrl?.trim();
});
const noticeContent = computed(() => {
return noticeData.value.eventDescription?.trim();
});
// TODO
// onLoad((query = {}) => {
// if (query.noticeData) {
// try {
// noticeData.value = JSON.parse(decodeURIComponent(query.noticeData));
// } catch (error) {
// console.warn("noticeData parse failed:", error);
// }
// }
// });
const parseNoticeData = (value: unknown) => {
const rawValue = Array.isArray(value) ? value[0] : value;
if (typeof rawValue !== "string" || !rawValue) {
noticeData.value = {};
return;
}
try {
noticeData.value = JSON.parse(decodeURIComponent(rawValue));
} catch (error) {
noticeData.value = {};
console.warn("noticeData parse failed:", error);
}
};
watch(
() => route.query.noticeData,
(value) => {
parseNoticeData(value);
},
{ immediate: true },
);
</script>

6
src/pages/quick/components/Card/index.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="bg-white p-[8px] rounded-[12px] flex items-start m-[12px]" @click.stop="handleClick(item)">
<img class="w-[80px] h-[80px] rounded-[10px]" :src="item.commodityPhoto" />
<div class="max-w-[259px] flex-1 pl-[12px]">
<div class="flex-1 pl-[12px]">
<div class="text-[16px] leading-[24px] text-[#171717] mb-[4px]">
{{ item.commodityName }}
</div>
@@ -22,9 +22,9 @@
<span v-if="item.stockUnitLabel" class="text-[12px] leading-[16px] text-ink-400">
/{{ item.stockUnitLabel }}
</span>
<span
<!-- <span
class="ml-[16px] rounded-[10px] px-[8px] py-[4px] text-white [background:linear-gradient(90deg,#ff3d60_57%,#ff990c_100%)]">{{
t("quick.card.orderShort") }}</span>
t("quick.card.orderShort") }}</span> -->
</div>
</div>
</div>

2
src/pages/quick/components/Tabs/index.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="relative">
<div
class="bg-[#e8fff1] h-[48px] overflow-x-auto whitespace-nowrap justify-start flex items-center [-webkit-overflow-scrolling:touch]">
class="bg-[#e8fff1] h-[48px] overflow-x-auto overflow-y-hidden whitespace-nowrap justify-start flex items-center [-webkit-overflow-scrolling:touch] touch-pan-x scrollbar-none [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden">
<div v-for="(item, index) in tabList" :key="item.id" :class="[
'h-full flex-none flex items-center justify-center relative px-[12px] min-w-[68px]',
activeIndex === index &&