refactor(ui): clean up stepper and standardize margin spacing
- replace uni-icons with van-icon in Stepper component - fix semantic markup by replacing <text> tag with <span> in Stepper - inline SCSS styles for Stepper and remove unused image and style files - standardize ml-4 utility class to ml-[4px] across multiple UI components for consistent exact 4px horizontal margins
This commit is contained in:
@@ -8,7 +8,7 @@
|
||||
<span class="total rounded-[5px] flex items-center text-[11px] color-43669A relative">{{
|
||||
selectedDate.totalDays }}晚</span>
|
||||
<span class="text-[12px] text-ink-400 ml-16">离店</span>
|
||||
<span class="text-[12px] text-[#171717] ml-4">
|
||||
<span class="text-[12px] text-[#171717] ml-[4px]">
|
||||
{{ selectedDate.endDate }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
}">
|
||||
<div class="flex items-center flex-row flex-shrink-0 mr-[8px]">
|
||||
<zn-icon :name="moduleItem.moduleIcon" size="20" color="#333"></zn-icon>
|
||||
<span class="ml-4 text-[14px] text-[#171717] leading-[20px]">
|
||||
<span class="ml-[4px] text-[14px] text-[#171717] leading-[20px]">
|
||||
{{ moduleItem.moduleTitle }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 5.8 KiB |
@@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<div class="stepper-wrapper flex items-center rounded-[8px]">
|
||||
<uni-icons type="minus" size="24" color="#D1D1D1" @click="decrease" />
|
||||
<text class="stepper-text text-center text-[14px] font-medium text-black ml-4 mr-[4px]">
|
||||
<div class="bg-[#f3f9ff] p-[4px_7px] flex items-center rounded-[8px]">
|
||||
<van-icon name="minus" size="24" color="#D1D1D1" @click="decrease" />
|
||||
<span class="max-w-[40px] text-center text-[14px] font-medium text-black ml-[4px] mr-[4px]">
|
||||
{{ value }} {{ unit }}
|
||||
</text>
|
||||
<uni-icons type="plus" size="24" color="#198CFF" @click="increase" />
|
||||
</span>
|
||||
<van-icon name="plus" size="24" color="#198CFF" @click="increase" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -65,7 +65,3 @@ const increase = () => {
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "./styles/index.scss";
|
||||
</style>
|
||||
|
||||
@@ -1,8 +0,0 @@
|
||||
.stepper-wrapper {
|
||||
background-color: #f3f9ff;
|
||||
padding: 4px 7px;
|
||||
}
|
||||
|
||||
.stepper-text {
|
||||
max-width: 40px;
|
||||
}
|
||||
@@ -2,7 +2,7 @@
|
||||
<div class="bg-[#f5f7fa] flex flex-col h-screen overflow-hidden">
|
||||
<TopNavBar title="房间相册" backgroundColor="transparent" />
|
||||
<div class="p-8">
|
||||
<span class="ml-4 text-[18px] text-[#171717] font-medium">全部({{ albumList.length }})</span>
|
||||
<span class="ml-[4px] text-[18px] text-[#171717] font-medium">全部({{ albumList.length }})</span>
|
||||
</div>
|
||||
|
||||
<scroll-div scroll-y class="scroll-container overflow-auto">
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<span class="text-[16px] text-[#171717] leading-[24px] font-medium">
|
||||
订单金额
|
||||
</span>
|
||||
<span class="amt text-[18px] font-bold color-FF3D60 ml-4">
|
||||
<span class="amt text-[18px] font-bold color-FF3D60 ml-[4px]">
|
||||
{{ orderData.payAmt }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user