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>