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

style(components): standardize borders and refactor popup

Browse Source 
Replace legacy `border-bottom` CSS classes with design system's `border-b border-ink-200` across all vue components. Refactor DetailPopup to use van-popup instead of uni-popup, update icon usage, component logic and styling.
This commit is contained in:
DEV_DSW
2026-05-29 11:03:57 +08:00
parent 07d6f305b7
commit 265993313e
12 changed files with 26 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/components/DetailPopup/index.vue
View File

@@ -1,16 +1,16 @@
<template>
<uni-popup ref="popupRef" type="bottom" :safe-area="false" @maskClick="handleClose">
<div class="refund-popup bg-[#f5f7fa] ">
<van-popup ref="popupRef" position="bottom" v-model:show="show">
<div class="rounded-t-[15px] pb-10 bg-[#f5f7fa] ">
<div class=" flex items-center justify-between pt-[12px] pb-[12px] relative">
<div class="flex-1 text-[16px] text-[#171717] leading-[24px] text-center">
明细详情
</div>
<!-- 关闭按钮 -->
<uni-icons class="close absolute" type="close" size="20" color="#CACFD8" @click="handleClose" />
<van-icon class="top-[14px] right-[12px] absolute" name="cross" size="20" color="#CACFD8" @click="close" />
</div>
<!-- 内容区域 -->
<div class="rounded-[12px] bg-white ml-[12px] mr-[12px] mb-40">
<div class=" border-bottom flex items-center justify-between pt-[12px] pb-[12px] ml-[12px] mr-[12px]">
<div class="rounded-[12px] bg-white ml-[12px] mr-[12px] mb-[40px]">
<div class="border-b border-ink-200 flex items-center justify-between pt-[12px] pb-[12px] ml-[12px] mr-[12px]">
<span class="text-[16px] font-medium text-[#171717]">在线支付</span>
<span class="text-[14px] text-[#171717]">239</span>
</div>
@@ -20,11 +20,11 @@
</div>
</div>
</div>
</uni-popup>
</van-popup>
</template>
<script setup>
import { ref, computed, watch } from "vue";
import { ref, computed, defineExpose } from "vue";
// Props定义
const props = defineProps({
@@ -45,6 +45,7 @@ const emit = defineEmits(["update:modelValue"]);
// 弹窗引用
const popupRef = ref(null);
const show = ref(false)
// 获取退款模板
const commodityPurchaseInstruction = computed(() => {
@@ -56,29 +57,12 @@ const commodityPurchaseInstruction = computed(() => {
});
// 方法定义
const show = () => popupRef.value && popupRef.value.open();
const open = () => show.value = true;
const hide = () => popupRef.value && popupRef.value.close();
const close = () => show.value = false;
// 监听modelValue变化
watch(
() => props.modelValue,
(newVal) => {
if (newVal) {
show();
} else {
hide();
}
},
{ immediate: true },
);
const handleClose = () => {
emit("update:modelValue", false);
emit("close");
};
defineExpose({
open,
close,
});
</script>
<style lang="scss" scoped>
@import "./styles/index.scss";
</style>

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

@@ -5,7 +5,7 @@
<div v-for="(moduleItem, index) in goodsData.commodityPurchaseInstruction
.commodityPurchaseInstructionModuleEntityList" :key="index">
<div class="flex flex-items-start flex-col pt-[12px] pb-[12px]" :class="{
'border-bottom':
'border-b border-ink-200':
index <
goodsData.commodityPurchaseInstruction
.commodityPurchaseInstructionModuleEntityList.length -

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

@@ -9,7 +9,7 @@
<uni-icons class="close absolute" type="close" size="20" color="#CACFD8" @click="handleClose" />
</div>
<!-- 内容区域 -->
<div class=" rounded-[12px] bg-white p-[12px] ml-[12px] mr-[12px] mb-40">
<div class=" rounded-[12px] bg-white p-[12px] ml-[12px] mr-[12px] mb-[40px]">
<div class="flex items-center mb-8">
<uni-icons fontFamily="znicons" size="20" color="#333">
{{ iconsMap["zn-refund"] }}

2
src/pages/booking/components/ConactSection/index.vue
View File

@@ -16,7 +16,7 @@
<!-- 联系方式 -->
<div class="bg-white rounded-[12px] overflow-hidden">
<div class=" border-bottom text-[16px] font-medium text-black leading-[24px] p-[12px]">
<div class=" border-b border-ink-200 text-[16px] font-medium text-black leading-[24px] p-[12px]">
联系方式
</div>
<div class="flex items-center p-[12px]">

4
src/pages/booking/components/UserSection/index.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="bg-white rounded-[12px] overflow-hidden mb-[12px]">
<div class="flex items-center p-[12px] border-bottom">
<div class="flex items-center p-[12px] border-b border-ink-200">
<div class="text-[16px] font-medium text-black leading-[24px] flex-1">
入住信息
</div>
@@ -10,7 +10,7 @@
</div>
<div class=" pl-12 pr-12">
<div class=" border-bottom pt-[12px] pb-[12px] flex items-center" v-for="(item, index) in userFormList"
<div class=" border-b border-ink-200 pt-[12px] pb-[12px] flex items-center" v-for="(item, index) in userFormList"
:key="index">
<div class="text-[14px] font-medium text-ink-600 mr-[12px]">住客姓名</div>
<div class="right">

2
src/pages/booking/index.vue
View File

@@ -17,7 +17,7 @@
{{ orderData.commodityName }}
</div>
<div class=" border-bottom">
<div class=" border-b border-ink-200">
<div class="text-[12px] text-ink-400 leading-[16px] pb-[12px] break-all">
{{ orderData.commodityDescription }}
</div>

2
src/pages/goods/components/GoodFacility/index.vue
View File

@@ -2,7 +2,7 @@
<div class="border-top-8">
<div class="pt-[12px] pl-[12px] pr-[12px]" v-for="(moduleItem, index) in goodsData.commodityEquipment" :key="index">
<div class="flex flex-col items-start" :class="{
'border-bottom': index < goodsData.commodityEquipment.length - 1,
'border-b border-ink-200': index < goodsData.commodityEquipment.length - 1,
}">
<div class="flex items-center flex-row shrink-0">
<zn-icon :name="moduleItem.icon" size="20" color="#171717"></zn-icon>

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

@@ -20,7 +20,7 @@
</div>
<div v-else class="long-text-guide-card__detail-card bg-white rounded-[24px] overflow-hidden">
<div class="long-text-guide-card__detail-header flex items-center border-bottom-F1F5F9">
<div class="long-text-guide-card__detail-header flex items-center border-b border-ink-200">
<div class="long-text-guide-card__back flex items-center justify-center rounded-full font-700"
@click="closeDetail">
<uni-icons type="left" size="16" color="#CBD5E1"></uni-icons>

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

@@ -7,7 +7,7 @@
</div>
<div class="list bg-white pl-20 pr-20">
<div class="item border-bottom pt-20 pb-20" v-for="(item, index) in list" :key="index">
<div class="item border-b border-ink-200 pt-20 pb-20" v-for="(item, index) in list" :key="index">
<div class="flex items-center justify-center">
<img v-if="item.icon" class="left" :src="item.icon" />
<div class="center flex-1">

2
src/pages/home/components/SharedVisual/DetailShell.vue
View File

@@ -1,6 +1,6 @@
<template>
<CardShell variant="detail">
<div class="min-h-[48px] flex items-center px-[16px] border-bottom-F1F5F9">
<div class="min-h-[48px] flex items-center px-[16px] border-b border-ink-200">
<div
class="w-[30px] h-[30px] text-[22px] leading-[28px] mr-[8px] rounded-full bg-[#f8fafc] text-[#334155] font-bold text-center"
@click="$emit('back')">

2
src/pages/order/order/components/GoodsInfo/index.vue
View File

@@ -7,7 +7,7 @@
{{ orderData.commodityName }}
</div>
<div class=" border-bottom text-[12px] text-ink-400 leading-[16px] pb-[12px]">
<div class=" border-b border-ink-200 text-[12px] text-ink-400 leading-[16px] pb-[12px]">
{{ orderData.commodityDescription }}
</div>

2
src/pages/order/order/components/VoucherList/index.vue
View File

@@ -7,7 +7,7 @@
<div class="flex items-center justify-between py-12" :class="[
index + 1 === props.orderData.commodityPackageConfig.length
? ''
: 'border-bottom',
: 'border-b border-ink-200',
]" v-for="(item, index) in props.orderData.commodityPackageConfig" :key="item.name">
<div class="flex flex-col">
<span class="span-color-900 text-[16px]">{{ item.name }}</span>