style: fix style utility class inconsistencies and correct CSS syntax

Clean up style-related code across all components:
- Replace deprecated color-* classes with text-[color]/text-white equivalents
- Remove redundant border-box declarations and fix broken empty box-sizing rule
- Correct invalid rounded corner class syntax
- Standardize line-height to leading-[value] utilities
- Uniform margin and padding notation to [xxpx] format
This commit is contained in:
DEV_DSW
2026-05-29 09:28:37 +08:00
parent e52f916231
commit 051f7d1134
46 changed files with 167 additions and 170 deletions

View File

@@ -1,31 +1,31 @@
<template>
<div class="create-service-order">
<div class="w-full bg-white border-box border-ff overflow-hidden rounded-20">
<div class="border-box order-header w-vw flex flex-items-center flex-justify-between bg-theme-color-50">
<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="font-size-18 font-500 color-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="border-box p-12">
<div class="bg-F5F7FA border-box flex flex-items-center p-12 rounded-10 text-[14px] color-171717 mb-12">
<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">
<span class="font-500 line-height-22 mr-20">所在位置</span>
<input placeholder="请填写所在位置" v-model="roomId" />
</div>
<div class="bg-F5F7FA border-box flex flex-items-center p-12 rounded-10 text-[14px] color-171717 mb-12">
<div class="bg-F5F7FA flex flex-items-center p-[12px] rounded-10 text-[14px] color-171717 mb-12">
<span class="font-500 line-height-22 mr-20">联系电话</span>
<input placeholder="请填写联系电话" v-model="contactPhone" @input="handleContactPhoneInput" />
</div>
<div class="bg-F5F7FA border-box p-12 rounded-10 text-[14px] font-500 color-171717 mb-12">
<div class="bg-F5F7FA p-[12px] rounded-10 text-[14px] font-500 color-171717 mb-12">
<div class="font-500 line-height-22 mb-12">需求信息描述</div>
<textarea class="h-80" placeholder="请输入需求信息描述" placeholder-class="text-[14px] font-400" maxlength="100"
v-model="contactText" />
</div>
<div class="bg-F5F7FA border-box p-12 rounded-10 text-[14px] font-500 color-171717 mb-12">
<div class="bg-F5F7FA p-[12px] rounded-10 text-[14px] font-500 color-171717 mb-12">
<div class="font-500 line-height-22 mb-12">照片上传</div>
<div class="w-80 h-80 bg-white rounded-8 overflow-hidden flex flex-items-center flex-justify-center">
@@ -43,15 +43,15 @@
</div>
</div>
<div v-else class="border-box card-content flex flex-items-center p-12">
<div class="border-box left flex-full pr-20">
<div class="text-[12px] color-525866 line-height-20 mb-4">
<div v-else class=" card-content flex flex-items-center p-[12px]">
<div class=" left flex-full pr-20">
<div class="text-[12px] text-[#525866] leading-[20px] mb-4">
所在位置{{ roomId }}
</div>
<div class="text-[12px] color-525866 line-height-20 mb-4">
<div class="text-[12px] text-[#525866] leading-[20px] mb-4">
联系方式: {{ contactPhone }}
</div>
<div class="text-[12px] color-525866 line-height-20 ellipsis-2">
<div class="text-[12px] text-[#525866] leading-[20px] ellipsis-2">
需求描述: {{ contactspan }}
</div>
</div>
@@ -59,7 +59,7 @@
<img v-if="contentImgUrl" class="right rounded-6" :src="contentImgUrl" mode="aspectFill" />
</div>
<div class="btn rounded-50 color-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-12"
@click="handleCall">
{{ isCallSuccess ? "查看服务" : "立即呼叫" }}
</div>

View File

@@ -1,11 +1,11 @@
<template>
<div class="border-box flex flex-items-center flex-justify-between mb-12">
<div class=" flex flex-items-center flex-justify-between mb-12">
<div class="left flex flex-items-center">
<span class="text-[12px] color-99A0AE mr-4">入住</span>
<span class="text-[12px] color-99A0AE mr-[4px]">入住</span>
<span class="text-[12px] color-171717 mr-16">
{{ selectedDate.startDate }}
</span>
<span class="total border-box rounded-50 flex flex-items-center font-size-11 color-43669A relative">{{
<span class="total rounded-[5px]0 flex flex-items-center font-size-11 color-43669A relative">{{
selectedDate.totalDays }}</span>
<span class="text-[12px] color-99A0AE ml-16">离店</span>
<span class="text-[12px] color-171717 ml-4">

View File

@@ -1,7 +1,7 @@
<template>
<uni-popup ref="popupRef" type="bottom" :safe-area="false" @maskClick="handleClose">
<div class="refund-popup bg-F5F7FA border-box">
<div class="border-box flex flex-items-center justify-between pt-12 pb-12 relative">
<div class="refund-popup bg-F5F7FA ">
<div class=" flex flex-items-center justify-between pt-12 pb-12 relative">
<div class="flex-full font-size-16 color-171717 line-height-24 text-center">
明细详情
</div>
@@ -9,12 +9,12 @@
<uni-icons class="close absolute" type="close" size="20" color="#CACFD8" @click="handleClose" />
</div>
<!-- 内容区域 -->
<div class="rounded-12 bg-white ml-12 mr-12 mb-40">
<div class="border-box border-bottom flex flex-items-center flex-justify-between pt-12 pb-12 ml-12 mr-12">
<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="font-size-16 font-500 color-171717">在线支付</span>
<span class="text-[14px] color-171717">239</span>
</div>
<div class="border-box flex flex-items-center flex-justify-between pt-12 pb-12 ml-12 mr-12">
<div class=" flex flex-items-center flex-justify-between pt-12 pb-12 ml-12 mr-12">
<span class="font-size-16 font-500 color-171717">房费</span>
<span class="text-[14px] color-171717">239</span>
</div>

View File

@@ -1,41 +1,41 @@
<template>
<div class="create-service-order">
<div class="w-full bg-white border-box border-ff overflow-hidden rounded-20">
<div class="border-box order-header w-vw flex flex-items-center flex-justify-between bg-theme-color-50">
<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="font-size-18 font-500 color-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="border-box p-12">
<div class="bg-F5F7FA border-box flex flex-items-center p-12 rounded-10 text-[14px] color-171717 mb-12">
<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">
<span class="font-500 line-height-22 mr-20">联系电话</span>
<input placeholder="请填写联系电话" v-model="contactPhone" />
</div>
<div class="bg-F5F7FA border-box p-12 rounded-10 text-[14px] font-500 color-171717 mb-12">
<div class="bg-F5F7FA p-[12px] rounded-10 text-[14px] font-500 color-171717 mb-12">
<div class="font-500 line-height-22 mb-12">意见内容</div>
<textarea class="h-80" placeholder="请输入反馈意见" placeholder-class="text-[14px] font-400" maxlength="100"
v-model="contactText" />
</div>
<div class="btn rounded-50 color-white bg-button flex flex-items-center flex-justify-center"
<div class="btn rounded-[5px]0 text-white bg-button flex flex-items-center flex-justify-center"
@click="handleCall">
立即提交
</div>
</div>
<div v-else class="border-box left flex-full p-12">
<div class="text-[12px] color-525866 line-height-20 mb-4">
<div v-else class=" left flex-full p-[12px]">
<div class="text-[12px] text-[#525866] leading-[20px] mb-4">
联系方式: {{ contactPhone }}
</div>
<div class="text-[12px] color-525866 line-height-20 ellipsis-2">
<div class="text-[12px] text-[#525866] leading-[20px] ellipsis-2">
意见内容: {{ contactText }}
</div>
</div>
<div class="footer-help flex flex-items-center pl-12 mb-12">
<img class="help-icon mr-4" src="./images/icon_volume.png" />
<img class="help-icon mr-[4px]" src="./images/icon_volume.png" />
<span class="text-[12px] font-500 color-FA7319">
{{ appName }}收到您的意见将第一时间为您处理!
</span>

View File

@@ -1,6 +1,6 @@
<template>
<div class="border-box border-top-8">
<div v-if="goodsData.commodityPurchaseInstruction" class="border-box pl-12 pr-12">
<div class=" border-top-8">
<div v-if="goodsData.commodityPurchaseInstruction" class=" pl-12 pr-12">
<ModuleTitle v-if="showTitle" :title="goodsData.commodityPurchaseInstruction.templateTitle" />
<div v-for="(moduleItem, index) in goodsData.commodityPurchaseInstruction
.commodityPurchaseInstructionModuleEntityList" :key="index">
@@ -13,11 +13,11 @@
}">
<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 line-height-20">
<span class="ml-4 text-[14px] color-171717 leading-[20px]">
{{ moduleItem.moduleTitle }}
</span>
</div>
<span class="flex-full text-[12px] color-525866 line-height-20 mt-4">
<span class="flex-full text-[12px] text-[#525866] leading-[20px] mt-4">
{{ moduleItem.moduleContent }}
</span>
</div>

View File

@@ -1,7 +1,7 @@
<template>
<uni-popup ref="popupRef" type="bottom" :safe-area="false" @maskClick="handleClose">
<div class="refund-popup bg-F5F7FA border-box">
<div class="border-box flex flex-items-center justify-between pt-12 pb-12 relative">
<div class="refund-popup bg-F5F7FA ">
<div class=" flex flex-items-center justify-between pt-12 pb-12 relative">
<div class="flex-full font-size-16 color-171717 line-height-24 text-center">
取消政策
</div>
@@ -9,7 +9,7 @@
<uni-icons class="close absolute" type="close" size="20" color="#CACFD8" @click="handleClose" />
</div>
<!-- 内容区域 -->
<div class="border-box rounded-12 bg-white p-12 ml-12 mr-12 mb-40">
<div class=" rounded-[12px] bg-white p-[12px] ml-12 mr-12 mb-40">
<div class="flex flex-items-center mb-8">
<uni-icons fontFamily="znicons" size="20" color="#333">
{{ iconsMap["zn-refund"] }}
@@ -18,8 +18,8 @@
{{ refundTitle }}
</span>
</div>
<div class="text-[14px] color-525866 line-height-16 mb-4" v-for="(item, index) in commodityPurchaseInstruction"
:key="index">
<div class="text-[14px] text-[#525866] line-height-16 mb-4"
v-for="(item, index) in commodityPurchaseInstruction" :key="index">
{{ item }}
</div>
</div>

View File

@@ -1,7 +1,7 @@
<template>
<div class="stepper-wrapper border-box flex flex-items-center rounded-8">
<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-500 color-000 ml-4 mr-4">
<text class="stepper-text text-center text-[14px] font-500 color-000 ml-4 mr-[4px]">
{{ value }} {{ unit }}
</text>
<uni-icons type="plus" size="24" color="#198CFF" @click="increase" />

View File

@@ -1,7 +1,7 @@
<template>
<div class="survey-questionnaire w-vw-24">
<div class="bg-white border-box border-ff overflow-hidden rounded-20">
<div class="border-box flex flex-items-center flex-justify-between bg-theme-color-50">
<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="font-size-18 font-500 color-171717 text-left ml-12">
调查问卷
</span>
@@ -10,7 +10,7 @@
<img class="w-full" :src="surveyData.bannerUrl" mode="widthFix" />
<div class="h-44 m-12 rounded-50 bg-button color-white flex flex-items-center flex-justify-center"
<div class="h-44 m-[12px] rounded-[5px]0 bg-button text-white flex flex-items-center flex-justify-center"
@click="handleCall">
前往填写
</div>

View File

@@ -1,9 +1,9 @@
<template>
<div class="bg-white rounded-12 overflow-hidden mb-12">
<div class="border-box font-size-16 font-500 color-000 line-height-24 p-12">
<div class="bg-white rounded-[12px] overflow-hidden mb-12">
<div class=" font-size-16 font-500 color-000 line-height-24 p-[12px]">
使用日期
</div>
<div class="flex flex-items-center border-box">
<div class="flex flex-items-center ">
<scroll-div class="date-scroll" scroll-x>
<div class="date-list">
<block v-for="item in openDateRangeList" :key="item.date">