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

style: standardize design token classes and spacing units

Browse Source 
Standardize styling across all components:
1. Replace legacy color utilities and hardcoded hex values with official design token classes
2. Update margin/padding/rounded corner values to use wrapped [px] syntax for consistency
3. Fix inconsistent line-height class names to use leading-[value] format
This commit is contained in:
DEV_DSW
2026-05-29 09:56:52 +08:00
parent 42f364809a
commit 2956287135
31 changed files with 108 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/CreateServiceOrder/index.vue
View File

@@ -2,31 +2,31 @@
<div class="create-service-order">
<div class="w-full bg-white border-ff overflow-hidden rounded-20">
<div class=" order-header w-vw flex flex-items-center flex-justify-between bg-theme-color-50">
<span class="text-[18px] font-medium color-171717 text-left ml-12">
<span class="text-[18px] font-medium text-[#171717] text-left ml-12">
{{ isCallSuccess ? "服务已创建" : "呼叫服务" }}
</span>
<img class="header-icon" src="https://oss.nianxx.cn/mp/static/version_101/home/feedback.png" />
</div>
<div v-if="!isCallSuccess" class=" p-[12px]">
<div class="bg-F5F7FA flex flex-items-center p-[12px] rounded-10 text-[14px] color-171717 mb-12">
<div class="bg-F5F7FA flex flex-items-center p-[12px] rounded-10 text-[14px] text-[#171717] mb-[12px]">
<span class="font-medium line-height-22 mr-20">所在位置</span>
<input placeholder="请填写所在位置" v-model="roomId" />
</div>
<div class="bg-F5F7FA flex flex-items-center p-[12px] rounded-10 text-[14px] color-171717 mb-12">
<div class="bg-F5F7FA flex flex-items-center p-[12px] rounded-10 text-[14px] text-[#171717] mb-[12px]">
<span class="font-medium line-height-22 mr-20">联系电话</span>
<input placeholder="请填写联系电话" v-model="contactPhone" @input="handleContactPhoneInput" />
</div>
<div class="bg-F5F7FA p-[12px] rounded-10 text-[14px] font-medium color-171717 mb-12">
<div class="font-medium line-height-22 mb-12">需求信息描述</div>
<div class="bg-F5F7FA p-[12px] rounded-10 text-[14px] font-medium text-[#171717] mb-[12px]">
<div class="font-medium line-height-22 mb-[12px]">需求信息描述</div>
<textarea class="h-80" placeholder="请输入需求信息描述" placeholder-class="text-[14px] font-400" maxlength="100"
v-model="contactText" />
</div>
<div class="bg-F5F7FA p-[12px] rounded-10 text-[14px] font-medium color-171717 mb-12">
<div class="font-medium line-height-22 mb-12">照片上传</div>
<div class="bg-F5F7FA p-[12px] rounded-10 text-[14px] font-medium text-[#171717] mb-[12px]">
<div class="font-medium line-height-22 mb-[12px]">照片上传</div>
<div class="w-80 h-80 bg-white rounded-8 overflow-hidden flex flex-items-center flex-justify-center">
<div v-if="contentImgUrl" class="w-full h-full relative inline-block">
@@ -59,7 +59,8 @@
<img v-if="contentImgUrl" class="right rounded-6" :src="contentImgUrl" mode="aspectFill" />
</div>
<div class="btn rounded-[5px]0 text-white bg-button flex flex-items-center flex-justify-center ml-12 mr-12 mb-12"
<div
class="btn rounded-[5px]0 text-white bg-button flex flex-items-center flex-justify-center ml-12 mr-12 mb-[12px]"
@click="handleCall">
{{ isCallSuccess ? "查看服务" : "立即呼叫" }}
</div>

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

@@ -1,7 +1,7 @@
<template>
<div class="empty-container flex flex-col items-center justify-center">
<img class="empty-image" :src="emptyIcon" mode="aspectFit" />
<span class="text-[12px] text-center color-99A0AE mt-8">
<span class="text-[12px] text-center text-ink-400 mt-8">
{{ statusText }}
</span>
</div>

12
src/components/DateRangeSection/index.vue
View File

@@ -1,19 +1,19 @@
<template>
<div class=" flex flex-items-center flex-justify-between mb-12">
<div class=" flex flex-items-center flex-justify-between mb-[12px]">
<div class="left flex flex-items-center">
<span class="text-[12px] color-99A0AE mr-[4px]">入住</span>
<span class="text-[12px] color-171717 mr-16">
<span class="text-[12px] text-ink-400 mr-[4px]">入住</span>
<span class="text-[12px] text-[#171717] mr-16">
{{ selectedDate.startDate }}
</span>
<span class="total rounded-[5px]0 flex flex-items-center text-[11px] color-43669A relative">{{
selectedDate.totalDays }}晚</span>
<span class="text-[12px] color-99A0AE ml-16">离店</span>
<span class="text-[12px] color-171717 ml-4">
<span class="text-[12px] text-ink-400 ml-16">离店</span>
<span class="text-[12px] text-[#171717] ml-4">
{{ selectedDate.endDate }}
</span>
</div>
<div class="flex flex-items-center" v-if="showBtn" @click="emit('click')">
<span class="text-[12px] theme-color-500 line-height-16">房间详情</span>
<span class="text-[12px] theme-color-500 leading-[16px]">房间详情</span>
<van-icon name="arrow-right" size="15" color="#99A0AE" />
</div>
</div>

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

@@ -1,8 +1,8 @@
<template>
<uni-popup ref="popupRef" type="bottom" :safe-area="false" @maskClick="handleClose">
<div class="refund-popup bg-F5F7FA ">
<div class=" flex flex-items-center justify-between pt-12 pb-12 relative">
<div class="flex-full text-[16px] color-171717 leading-[24px] text-center">
<div class=" flex flex-items-center justify-between pt-[12px] pb-[12px] relative">
<div class="flex-full text-[16px] text-[#171717] leading-[24px] text-center">
明细详情
</div>
<!-- 关闭按钮 -->
@@ -10,13 +10,13 @@
</div>
<!-- 内容区域 -->
<div class="rounded-[12px] bg-white ml-12 mr-12 mb-40">
<div class=" border-bottom flex flex-items-center flex-justify-between pt-12 pb-12 ml-12 mr-12">
<span class="text-[16px] font-medium color-171717">在线支付</span>
<span class="text-[14px] color-171717">239</span>
<div class=" border-bottom flex flex-items-center flex-justify-between pt-[12px] pb-[12px] ml-12 mr-12">
<span class="text-[16px] font-medium text-[#171717]">在线支付</span>
<span class="text-[14px] text-[#171717]">239</span>
</div>
<div class=" flex flex-items-center flex-justify-between pt-12 pb-12 ml-12 mr-12">
<span class="text-[16px] font-medium color-171717">房费</span>
<span class="text-[14px] color-171717">239</span>
<div class=" flex flex-items-center flex-justify-between pt-[12px] pb-[12px] ml-12 mr-12">
<span class="text-[16px] font-medium text-[#171717]">房费</span>
<span class="text-[14px] text-[#171717]">239</span>
</div>
</div>
</div>

10
src/components/Feedback/index.vue
View File

@@ -2,19 +2,19 @@
<div class="create-service-order">
<div class="w-full bg-white border-ff overflow-hidden rounded-20">
<div class=" order-header w-vw flex flex-items-center flex-justify-between bg-theme-color-50">
<span class="text-[18px] font-medium color-171717 text-left ml-12">
<span class="text-[18px] font-medium text-[#171717] text-left ml-12">
{{ isCallSuccess ? "反馈已创建" : "反馈意见" }}
</span>
<img class="header-icon" src="https://oss.nianxx.cn/mp/static/version_101/home/feedback.png" />
</div>
<div v-if="!isCallSuccess" class=" p-[12px]">
<div class="bg-F5F7FA flex flex-items-center p-[12px] rounded-10 text-[14px] color-171717 mb-12">
<div class="bg-F5F7FA flex flex-items-center p-[12px] rounded-10 text-[14px] text-[#171717] mb-[12px]">
<span class="font-medium line-height-22 mr-20">联系电话</span>
<input placeholder="请填写联系电话" v-model="contactPhone" />
</div>
<div class="bg-F5F7FA p-[12px] rounded-10 text-[14px] font-medium color-171717 mb-12">
<div class="font-medium line-height-22 mb-12">意见内容</div>
<div class="bg-F5F7FA p-[12px] rounded-10 text-[14px] font-medium text-[#171717] mb-[12px]">
<div class="font-medium line-height-22 mb-[12px]">意见内容</div>
<textarea class="h-80" placeholder="请输入反馈意见" placeholder-class="text-[14px] font-400" maxlength="100"
v-model="contactText" />
</div>
@@ -34,7 +34,7 @@
</div>
</div>
<div class="footer-help flex flex-items-center pl-12 mb-12">
<div class="footer-help flex flex-items-center pl-12 mb-[12px]">
<img class="help-icon mr-[4px]" src="./images/icon_volume.png" />
<span class="text-[12px] font-medium color-FA7319">
{{ appName }}收到您的意见将第一时间为您处理!

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

@@ -4,7 +4,7 @@
<ModuleTitle v-if="showTitle" :title="goodsData.commodityPurchaseInstruction.templateTitle" />
<div v-for="(moduleItem, index) in goodsData.commodityPurchaseInstruction
.commodityPurchaseInstructionModuleEntityList" :key="index">
<div class="flex flex-items-start flex-col pt-12 pb-12" :class="{
<div class="flex flex-items-start flex-col pt-[12px] pb-[12px]" :class="{
'border-bottom':
index <
goodsData.commodityPurchaseInstruction
@@ -13,7 +13,7 @@
}">
<div class="flex flex-items-center flex-row flex-shrink-0 mr-8">
<zn-icon :name="moduleItem.moduleIcon" size="20" color="#333"></zn-icon>
<span class="ml-4 text-[14px] color-171717 leading-[20px]">
<span class="ml-4 text-[14px] text-[#171717] leading-[20px]">
{{ moduleItem.moduleTitle }}
</span>
</div>

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

@@ -1,8 +1,8 @@
<template>
<uni-popup ref="popupRef" type="bottom" :safe-area="false" @maskClick="handleClose">
<div class="refund-popup bg-F5F7FA ">
<div class=" flex flex-items-center justify-between pt-12 pb-12 relative">
<div class="flex-full text-[16px] color-171717 leading-[24px] text-center">
<div class=" flex flex-items-center justify-between pt-[12px] pb-[12px] relative">
<div class="flex-full text-[16px] text-[#171717] leading-[24px] text-center">
取消政策
</div>
<!-- 关闭按钮 -->
@@ -14,11 +14,11 @@
<uni-icons fontFamily="znicons" size="20" color="#333">
{{ iconsMap["zn-refund"] }}
</uni-icons>
<span class="text-[14px] font-600 color-171717 ml-8">
<span class="text-[14px] font-600 text-[#171717] ml-8">
{{ refundTitle }}
</span>
</div>
<div class="text-[14px] text-ink-600 line-height-16 mb-4" v-for="(item, index) in commodityPurchaseInstruction"
<div class="text-[14px] text-ink-600 leading-[16px] mb-4" v-for="(item, index) in commodityPurchaseInstruction"
:key="index">
{{ item }}
</div>

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

@@ -1,7 +1,7 @@
<template>
<div class="stepper-wrapper flex flex-items-center rounded-8">
<uni-icons type="minus" size="24" color="#D1D1D1" @click="decrease" />
<text class="stepper-text text-center text-[14px] font-medium color-000 ml-4 mr-[4px]">
<text class="stepper-text text-center text-[14px] font-medium text-black ml-4 mr-[4px]">
{{ value }} {{ unit }}
</text>
<uni-icons type="plus" size="24" color="#198CFF" @click="increase" />

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

@@ -2,7 +2,7 @@
<div class="survey-questionnaire w-vw-24">
<div class="bg-white border-ff overflow-hidden rounded-20">
<div class=" flex flex-items-center flex-justify-between bg-theme-color-50">
<span class="text-[18px] font-medium color-171717 text-left ml-12">
<span class="text-[18px] font-medium text-[#171717] text-left ml-12">
调查问卷
</span>
<img class="w-102 h-72" :src="surveyData.logoUrl" mode="widthFix" />

4
src/components/UseDateRange/index.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="bg-white rounded-[12px] overflow-hidden mb-12">
<div class=" text-[16px] font-medium color-000 leading-[24px] p-[12px]">
<div class="bg-white rounded-[12px] overflow-hidden mb-[12px]">
<div class=" text-[16px] font-medium text-black leading-[24px] p-[12px]">
使用日期
</div>
<div class="flex flex-items-center ">

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

@@ -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] color-171717 font-medium">全部({{ albumList.length }})</span>
<span class="ml-4 text-[18px] text-[#171717] font-medium">全部({{ albumList.length }})</span>
</div>
<scroll-div scroll-y class="scroll-container overflow-auto">

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

@@ -1,9 +1,9 @@
<template>
<!-- 选择数量 -->
<div class=" bg-white p-[12px] rounded-[12px] flex flex-items-center mb-12">
<div class=" bg-white p-[12px] rounded-[12px] flex flex-items-center mb-[12px]">
<div class="flex-full">
<div class="text-[16px] font-medium color-000 leading-[24px]">选择数量</div>
<div class="text-[12px] color-A3A3A3 line-height-16">请选择套餐数量</div>
<div class="text-[16px] font-medium text-black leading-[24px]">选择数量</div>
<div class="text-[12px] color-A3A3A3 leading-[16px]">请选择套餐数量</div>
</div>
<div class="right">
<Stepper v-model="count" />
@@ -16,13 +16,13 @@
<!-- 联系方式 -->
<div class="bg-white rounded-[12px] overflow-hidden">
<div class=" border-bottom text-[16px] font-medium color-000 leading-[24px] p-[12px]">
<div class=" border-bottom text-[16px] font-medium text-black leading-[24px] p-[12px]">
联系方式
</div>
<div class="flex flex-items-center p-[12px]">
<div class="text-[14px] font-medium text-ink-600 mr-12">联系人姓名</div>
<div class="right">
<input class=" px-4 py-2 text-[15px] color-000 leading-[20px]" v-model.trim="userFormList[0].visitorName"
<input class=" px-4 py-2 text-[15px] text-black leading-[20px]" v-model.trim="userFormList[0].visitorName"
placeholder="请输入联系人" maxlength="20" />
</div>
</div>
@@ -30,7 +30,7 @@
<div class="flex flex-items-center p-[12px]">
<div class="text-[14px] font-medium text-ink-600 mr-12">手机号码</div>
<div class="right">
<input class=" px-4 py-2 text-[15px] color-000 leading-[20px]" v-model.trim="userFormList[0].contactPhone"
<input class=" px-4 py-2 text-[15px] text-black leading-[20px]" v-model.trim="userFormList[0].contactPhone"
placeholder="请输入联系手机" maxlength="11" />
</div>
</div>

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

@@ -1,7 +1,7 @@
<template>
<div class="bg-white rounded-[12px] overflow-hidden mb-12">
<div class="bg-white rounded-[12px] overflow-hidden mb-[12px]">
<div class="flex flex-items-center p-[12px] border-bottom">
<div class="text-[16px] font-medium color-000 leading-[24px] flex-full">
<div class="text-[16px] font-medium text-black leading-[24px] flex-full">
入住信息
</div>
<div class="right">
@@ -10,18 +10,19 @@
</div>
<div class=" pl-12 pr-12">
<div class=" border-bottom pt-12 pb-12 flex flex-items-center" v-for="(item, index) in userFormList" :key="index">
<div class=" border-bottom pt-[12px] pb-[12px] flex flex-items-center" v-for="(item, index) in userFormList"
:key="index">
<div class="text-[14px] font-medium text-ink-600 mr-12">住客姓名</div>
<div class="right">
<input class=" px-4 py-2 text-[15px] color-000 leading-[20px]" v-model.trim="item.visitorName"
<input class=" px-4 py-2 text-[15px] text-black leading-[20px]" v-model.trim="item.visitorName"
placeholder="请输入姓名" maxlength="11" />
</div>
</div>
<div class="flex flex-items-center pt-12 pb-12">
<div class="flex flex-items-center pt-[12px] pb-[12px]">
<div class="text-[14px] font-medium text-ink-600 mr-12">联系手机</div>
<div class="right">
<input class=" px-4 py-2 text-[15px] color-000 leading-[20px]" v-model.trim="userFormList[0].contactPhone"
<input class=" px-4 py-2 text-[15px] text-black leading-[20px]" v-model.trim="userFormList[0].contactPhone"
placeholder="请输入联系手机" maxlength="11" />
</div>
</div>

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

@@ -8,33 +8,34 @@
<div class="booking-content flex-full p-[12px] overflow-hidden scroll-y">
<!-- 预约内容 -->
<div class=" bg-white p-[12px] rounded-[12px] mb-12">
<div class=" bg-white p-[12px] rounded-[12px] mb-[12px]">
<!-- 酒店类型入住离店日期部分 -->
<DateRangeSection v-if="orderData.orderType == 0" :selectedDate="selectedDate" :showBtn="true"
@click="navigateToDetail(orderData)" />
<div class="text-[16px] font-medium color-000 leading-[24px] truncate">
<div class="text-[16px] font-medium text-black leading-[24px] truncate">
{{ orderData.commodityName }}
</div>
<div class=" border-bottom">
<div class="text-[12px] color-99A0AE line-height-16 pb-12 break-all">
<div class="text-[12px] text-ink-400 leading-[16px] pb-[12px] break-all">
{{ orderData.commodityDescription }}
</div>
<!-- 权益部分 -->
<div class="flex flex-items-center mb-8">
<span class="bg-F7F7F7 rounded-4 text-[11px] text-ink-600 mr-[4px] pt-4 pb-4 pl-6 pr-6"
<span
class="bg-[#f7f7f7] rounded-[4px] text-[11px] text-ink-600 mr-[4px] pt-[4px] pb-[4px] pl-[6px] pr-[6px]"
v-for="(item, index) in orderData.commodityFacilityList" :key="index">
{{ item }}
</span>
</div>
</div>
<div class=" flex flex-items-center flex-justify-between pt-12">
<div class=" flex flex-items-center flex-justify-between pt-[12px]">
<span class="text-[12px] text-ink-600 line-height-18">取消政策及说明</span>
<div class="flex flex-items-center">
<span class="text-[12px] theme-color-500 line-height-16" @click="refundVisible = true">取消政策</span>
<span class="text-[12px] theme-color-500 leading-[16px]" @click="refundVisible = true">取消政策</span>
<uni-icons type="right" size="15" color="#99A0AE" />
</div>
</div>

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

@@ -2,7 +2,7 @@
<div class="w-full bg-white border-ff overflow-hidden rounded-20 flex flex-col">
<!-- 占位撑开 -->
<div class="w-vw"></div>
<div class="flex flex-col px-16 pt-16 pb-12 ">
<div class="flex flex-col px-16 pt-16 pb-[12px] ">
<div v-if="tag" class="long-answer-tag">{{ tag }}</div>
<div v-if="title" class="flex flex-row flex-items-start flex-justify-start mb-4">
<uni-icons class="icon-active" type="fire-filled" size="18" color="opacity" />

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

@@ -8,7 +8,7 @@
<!-- ✅ 滚动区域 -->
<div class="flex-full overflow-hidden chat-scroll" scroll-y :scroll-into-div="scrollIntodivId" scroll-with-animation
@scroll="onScroll" @touchstart="onTouchStart" @touchend="onTouchEnd" @touchcancel="onTouchEnd">
<div class="flex flex-col pt-12 px-12 pb-24 gap-10">
<div class="flex flex-col pt-[12px] px-12 pb-24 gap-10">
<div v-if="headerSections.title || headerSections.tag" class="long-answer-header">
<div v-if="headerSections.title" class="long-answer-title">
{{ headerSections.title.contentValue }}

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

@@ -6,7 +6,7 @@ v
<SpriteAnimator :src="spriteStyle.ipLargeImage" :frameWidth="spriteStyle.frameWidth"
:frameHeight="spriteStyle.frameHeight" :totalFrames="spriteStyle.totalFrames" :columns="spriteStyle.columns"
:displayWidth="spriteStyle.displayWidth" :fps="16" />
<div class="welcome-text text-[14px] font-medium font-family-misans-vf color-171717 leading-[24px]">
<div class="welcome-text text-[14px] font-medium font-family-misans-vf text-[#171717] leading-[24px]">
{{ welcomeContent }}
</div>
</div>

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

@@ -2,7 +2,7 @@
<div class="w-full bg-white border-ff overflow-hidden rounded-20 flex flex-col">
<!-- 占位撑开 -->
<div class="w-vw"></div>
<div class="flex flex-col px-16 pt-16 pb-12 " @click="openDetail(item)">
<div class="flex flex-col px-16 pt-16 pb-[12px] " @click="openDetail(item)">
<div class="long-text-guide-card__badge text-[12px] font-900" :class="`is-${item.badgeTone}`">
{{ item.badge }}

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

@@ -1,8 +1,8 @@
<template>
<van-popup ref="popup" position="bottom" v-model:show="show">
<div class="popup-content pt-12 pl-12 pr-12">
<div class="header flex flex-items-center pb-12">
<div class="title flex-full text-center text-[17px] color-000 font-medium ml-24">更多服务</div>
<div class="popup-content pt-[12px] pl-12 pr-12">
<div class="header flex flex-items-center pb-[12px]">
<div class="title flex-full text-center text-[17px] text-black font-medium ml-24">更多服务</div>
<van-icon name="cross" size="24" color="#CACFD8" @click="close" />
</div>
@@ -11,14 +11,14 @@
<div class="flex flex-items-center flex-justify-center">
<img v-if="item.icon" class="left" :src="item.icon" />
<div class="center flex-full">
<div class="text-[16px] color-000 leading-[24px] font-medium">
<div class="text-[16px] text-black leading-[24px] font-medium">
{{ item.title }}
</div>
<div class="text-[12px] color-A3A3A3 line-height-16">
<div class="text-[12px] color-A3A3A3 leading-[16px]">
{{ item.content }}
</div>
</div>
<div class="right text-[12px] text-white line-height-16" @click="handleClick(item)">
<div class="right text-[12px] text-white leading-[16px]" @click="handleClick(item)">
{{ item.btnText }}
</div>
</div>

4
src/pages/home/components/NoticeMessage/detail.vue
View File

@@ -11,11 +11,11 @@
<img v-if="coverImage" class="w-full block" :src="coverImage" mode="aspectFill" />
<div class="pt-16 px-12 pb-24 ">
<div class="color-171717 text-[16px] font-weight-600">{{ detailTitle }}</div>
<div class="text-[#171717] text-[16px] font-weight-600">{{ detailTitle }}</div>
<div v-if="publishTime" class="notice-time-tag flex flex-row flex-items-center mt-[16px]">
<uni-icons type="clock" size="18" color="#5A6780" />
<span class="color-171717 text-[12px] font-weight-600 ml-8">发布时间：{{ publishTime }}</span>
<span class="text-[#171717] text-[12px] font-weight-600 ml-8">发布时间：{{ publishTime }}</span>
</div>
<div class="mt-[16px] mx-12 bg-gray w-full height-1"></div>

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

@@ -14,7 +14,7 @@
</div>
<div class="p-[4px_8px_8px]">
<div class="text-[11px] text-[#99A0AE] truncate">
<div class="text-[11px] text-ink-400 truncate">
{{ item.topic }}
</div>
</div>

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

@@ -16,7 +16,7 @@
<span>{{ item.distance }}</span>
</div>
<div
class="recommendation-list-card__button flex flex-items-center flex-justify-center mt-12 color-334155 text-[12px] font-900"
class="recommendation-list-card__button flex flex-items-center flex-justify-center mt-[12px] color-334155 text-[12px] font-900"
@click.stop="handleSelect(item)">
{{ getActionText(item) }}
</div>

8
src/pages/order/order/components/AmtSection/index.vue
View File

@@ -1,8 +1,8 @@
<template>
<div class="bg-white rounded-[12px] p-[12px] mb-12">
<div class="bg-white rounded-[12px] p-[12px] mb-[12px]">
<div class="flex flex-items-center flex-justify-between">
<div class="flex flex-items-center">
<span class="text-[16px] color-171717 leading-[24px] font-medium">
<span class="text-[16px] text-[#171717] leading-[24px] font-medium">
订单金额
</span>
<span class="amt text-[18px] font-bold color-FF3D60 ml-4">
@@ -10,11 +10,11 @@
</span>
</div>
</div>
<div v-if="orderData.orderStatus === '0'" class="text-[11px] color-99A0AE mt-4">
<div v-if="orderData.orderStatus === '0'" class="text-[11px] text-ink-400 mt-4">
超时后，订单将自动取消
</div>
<div v-if="['1', '2'].includes(orderData.orderStatus)"
class=" border-top flex flex-items-center flex-justify-between text-[12px] pt-12 mt-12">
class=" border-top flex flex-items-center flex-justify-between text-[12px] pt-[12px] mt-[12px]">
<div class="text-ink-600">取消政策及说明</div>
<div class="flex flex-items-center" @click="emit('click')">
<span class="theme-color-500 mr-[4px]">查看详情</span>

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

@@ -1,36 +1,37 @@
<template>
<div v-if="orderType == 0" class="bg-white p-[12px] rounded-[12px] mb-12">
<div v-if="orderType == 0" class="bg-white p-[12px] rounded-[12px] mb-[12px]">
<!-- 酒店类型入住离店日期部分 -->
<DateRangeSection v-if="orderData.orderType == 0" :selectedDate="selectedDate" />
<div class="text-[16px] font-medium color-000 leading-[24px] truncate">
<div class="text-[16px] font-medium text-black leading-[24px] truncate">
{{ orderData.commodityName }}
</div>
<div class=" border-bottom text-[12px] color-99A0AE line-height-16 pb-12">
<div class=" border-bottom text-[12px] text-ink-400 leading-[16px] pb-[12px]">
{{ orderData.commodityDescription }}
</div>
<!-- 权益部分 -->
<div class=" flex flex-items-center pt-12">
<span class="bg-F7F7F7 rounded-4 text-[11px] text-ink-600 mr-[4px] pt-4 pb-4 pl-6 pr-6"
<div class=" flex flex-items-center pt-[12px]">
<span class="bg-[#f7f7f7] rounded-[4px] text-[11px] text-ink-600 mr-[4px] pt-[4px] pb-[4px] pl-[6px] pr-[6px]"
v-for="(item, index) in commodityFacilityList" :key="index">
{{ item }}
</span>
</div>
</div>
<div v-if="orderType != 0" class=" bg-white p-[12px] rounded-[12px] mb-12">
<div class="text-[16px] font-medium color-000 leading-[24px] truncate mb-8">
<div v-if="orderType != 0" class=" bg-white p-[12px] rounded-[12px] mb-[12px]">
<div class="text-[16px] font-medium text-black leading-[24px] truncate mb-8">
{{ orderData.commodityName }}
</div>
<div class="flex text-[12px]">
<span class="w-60 color-99A0AE">购买数量</span>
<span class="w-60 text-ink-400">购买数量</span>
<span class="text-ink-600">{{ commodityAmount }}</span>
</div>
<div v-if="orderData.orderStatus === '0'" class=" border-top pt-12 text-[14px] font-medium color-171717 mt-12">
<div v-if="orderData.orderStatus === '0'"
class=" border-top pt-[12px] text-[14px] font-medium text-[#171717] mt-[12px]">
凭[电子凭证]直接验证使用
</div>
</div>

4
src/pages/order/order/components/OrderCard/InfoRow.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="info-row flex items-center mt-8">
<span class="label text-[12px] color-99A0AE">{{ label }}：</span>
<span class="value flex-full text-[12px] color-99A0AE">{{ value }}</span>
<span class="label text-[12px] text-ink-400">{{ label }}：</span>
<span class="value flex-full text-[12px] text-ink-400">{{ value }}</span>
</div>
</template>

4
src/pages/order/order/components/OrderCard/OrderCardContent.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="card-content pt-12">
<div class="card-content pt-[12px]">
<div class="flex items-center justify-between">
<div class="left flex-full text-[14px] leading-[20px] color-171717 mr-12">
<div class="left flex-full text-[14px] leading-[20px] text-[#171717] mr-12">
{{ orderData.commodityName }}
</div>
<div :class="[

6
src/pages/order/order/components/OrderInfo/index.vue
View File

@@ -1,15 +1,15 @@
<template>
<div class="bg-white rounded-10 p-[12px]">
<div class="flex mb-8 text-[12px]">
<span class="w-60 color-99A0AE">订单编号</span>
<span class="w-60 text-ink-400">订单编号</span>
<span class="text-ink-600">{{ orderData.orderId }}</span>
</div>
<div class="flex mb-8 text-[12px]">
<span class="w-60 color-99A0AE">下单时间</span>
<span class="w-60 text-ink-400">下单时间</span>
<span class="text-ink-600">{{ orderData.createTime }}</span>
</div>
<div class="flex text-[12px]">
<span class="w-60 color-99A0AE">支付状态</span>
<span class="w-60 text-ink-400">支付状态</span>
<span :class="[
{
'color-FF3D60': statusCode === '0' || statusCode === '3',

6
src/pages/order/order/components/UserInfo/index.vue
View File

@@ -1,13 +1,13 @@
<template>
<div class="bg-white rounded-10 p-[12px] mb-12" v-if="hasConsumerData">
<div class="bg-white rounded-10 p-[12px] mb-[12px]" v-if="hasConsumerData">
<div v-for="(item, index) in consumerList" :key="index">
<div class="flex mb-8 text-[12px]">
<span class="w-60 color-99A0AE">住客姓名</span>
<span class="w-60 text-ink-400">住客姓名</span>
<span class="text-ink-600">{{ item.visitorName }}</span>
</div>
</div>
<div class="flex text-[12px]">
<span class="w-60 color-99A0AE">联系电话</span>
<span class="w-60 text-ink-400">联系电话</span>
<span class="text-ink-600">{{ contactPhone }}</span>
</div>
</div>

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

@@ -1,6 +1,6 @@
<template>
<div class="bg-white rounded-[12px] px-12 pt-12 mb-12">
<span class="text-[16px] color-171717 leading-[24px] font-medium">
<div class="bg-white rounded-[12px] px-12 pt-[12px] mb-[12px]">
<span class="text-[16px] text-[#171717] leading-[24px] font-medium">
核销凭证列表
</span>
@@ -12,10 +12,10 @@
<div class="flex flex-col">
<span class="span-color-900 text-[16px]">{{ item.name }}</span>
<div class="flex flex-row mt-8">
<div class="bg-F5F7FA span-color-600 text-[12px] p-4 rounded-4 mr-[4px]">
<div class="bg-F5F7FA span-color-600 text-[12px] p-4 rounded-[4px] mr-[4px]">
总计{{ item.count }}{{ item.unit }}
</div>
<div class="bg-theme-color-50 theme-color-500 text-[12px] p-4 rounded-4">
<div class="bg-theme-color-50 theme-color-500 text-[12px] p-4 rounded-[4px]">
剩{{ item.count - item.writeOffCount }}{{ item.unit }}可用
</div>
</div>

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

@@ -5,7 +5,7 @@
<div class="text-[16px] leading-[24px] text-[#171717] mb-[4px]">
{{ item.commodityName }}
</div>
<div v-if="item.commodityFacility" class="text-[12px] leading-[16px] text-[#99A0AE] mb-4 truncate">
<div v-if="item.commodityFacility" class="text-[12px] leading-[16px] text-ink-400 mb-4 truncate">
{{ item.commodityFacility.join(" ") }}
</div>
<div class="text-[12px] leading-[18px] text-[#43669A]">
@@ -19,7 +19,7 @@
{{ item.specificationPrice }}
</span>
</div>
<span v-if="item.stockUnitLabel" class="text-[12px] leading-[16px] text-[#99A0AE]">
<span v-if="item.stockUnitLabel" class="text-[12px] leading-[16px] text-ink-400">
/{{ item.stockUnitLabel }}
</span>
<span

8
src/pages/quick/index.vue
View File

@@ -10,8 +10,8 @@
<div v-if="didSelectedTabItem && didSelectedTabItem.orderType == 0"
class="bg-white flex flex-items-center p-[12px]">
<div class="in flex flex-items-center">
<span class="text-[11px] font-medium color-99A0AE mr-[4px]">入住</span>
<span class="text-[14px] font-medium color-171717">
<span class="text-[11px] font-medium text-ink-400 mr-[4px]">入住</span>
<span class="text-[14px] font-medium text-[#171717]">
{{ selectedDate.startDate }}
</span>
</div>
@@ -22,8 +22,8 @@
</span>
<div class="out flex flex-items-center">
<span class="text-[11px] font-medium color-99A0AE mr-[4px]">离店</span>
<span class="text-[14px] font-medium color-171717">
<span class="text-[11px] font-medium text-ink-400 mr-[4px]">离店</span>
<span class="text-[14px] font-medium text-[#171717]">
{{ selectedDate.endDate }}
</span>
</div>