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

refactor: clean up components, fix date label font size

Browse Source 
- Delete unused local image asset and unused GoodInfo SCSS stylesheet
- Replace legacy border utility classes with modern Tailwind border-t syntax
- Fix incorrect 100px font size on date selector input labels, update to 10px
- Refactor LocationCard to use Lucide Phone/Navigation icons instead of VanIcons, improve button styling
- Overhaul ImageSwiper component: add proper refs, improve scroll logic, replace VanIcons with Lucide icons, clean up redundant code
- Update goods detail and quick booking pages to properly use Pinia selected date store, add date data normalization
- Fix scrollbar styles and linear gradient syntax in goods detail page
- Update development environment auth token for local development
This commit is contained in:
duanshuwen
2026-05-31 21:05:22 +08:00
parent 83279ca9bd
commit 6c353163df
10 changed files with 137 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/pages/goods/components/DateSelector/index.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="flex items-end justify-between my-[12px] px-[12px]" @click="showCalendar">
<div class="flex-1 relative">
<div class="absolute top-[-6px] left-[12px] text-[100px] text-ink-600 bg-white px-[4px]">入住日期</div>
<div class="absolute top-[-6px] left-[12px] text-[10px] text-ink-600 bg-white px-[4px]">入住日期</div>
<div class="flex items-center justify-start border border-[#f0f0f0] rounded-[8px] px-[12px] py-[10px] bg-white">
<div class="flex items-baseline gap-[4px]">
<span class="text-[16px] font-medium text-[#333]">{{ checkInDate }}</span>
@@ -15,7 +15,7 @@
</div>
<div class="flex-1 relative">
<div class="absolute top-[-6px] left-[12px] text-[100px] text-ink-600 bg-white px-[4px]">退房日期</div>
<div class="absolute top-[-6px] left-[12px] text-[10px] text-ink-600 bg-white px-[4px]">退房日期</div>
<div class="flex items-center justify-start border border-[#f0f0f0] rounded-[8px] px-[12px] py-[10px] bg-white">
<div class="flex items-baseline gap-[4px]">
<span class="text-[16px] font-medium text-[#333]">{{ checkOutDate }}</span>

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

@@ -1,5 +1,5 @@
<template>
<div class="border-top-8">
<div class="border-t-[8px] border-t-[#f5f5f5]">
<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-b border-ink-200': index < goodsData.commodityEquipment.length - 1,

32
src/pages/goods/components/GoodInfo/styles/index.scss
View File

@@ -1,32 +0,0 @@
.good-info {
// 标题区域
// 设施信息区域
.facilities-section {
margin-top: 12px;
.facilities-grid {
display: flex;
flex-wrap: wrap;
gap: 8px;
.facility-item {
display: flex;
align-items: center;
gap: 4px;
padding: 8px;
background: #fafafa;
border-radius: 6px;
.facility-text {
font-size: 12px;
color: #333;
line-height: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
}
}

12
src/pages/goods/components/LocationCard/index.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="flex items-center mt-[12px] p-[12px] bg-white border border-t border-[#e0e0e0]">
<div class="flex items-center mt-[12px] p-[12px] bg-white border-t border-[#e0e0e0]">
<div class="flex flex-col flex-1">
<span class="text-[14px] font-medium text-ink-800">位于 {{ orderData.oneLevelAddress }}</span>
<span class="mt-[4px] text-[12px] text-ink-500">{{ orderData.commodityAddress }}</span>
@@ -7,15 +7,16 @@
<div class="flex items-center gap-[10px] ml-[16px]">
<div>
<div class="actions-btn">
<van-icon type="paperplane-filled" size="16" color="#171717" />
<div class="w-[28px] h-[28px] rounded-[10px] bg-[#F5F5F5] flex items-center justify-center">
<Navigation size="16" color="#171717" />
</div>
<span class="text-[12px] text-ink-600">导航</span>
</div>
<div>
<div class="actions-btn" @click.stop="callPhone">
<van-icon type="phone-filled" size="16" color="#171717" />
<div class="w-[28px] h-[28px] rounded-[10px] bg-[#F5F5F5] flex items-center justify-center"
@click.stop="callPhone">
<Phone size="16" color="#171717" />
</div>
<span class="text-[12px] text-ink-600">电话</span>
</div>
@@ -25,6 +26,7 @@
<script setup>
import { defineProps } from "vue";
import { Phone, Navigation } from '@lucide/vue'
const props = defineProps({
orderData: {