zoujing/YGChatCS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: migrate to tailwind arbitrary width classes

Browse Source 
remove the unused src/static/scss/width.scss file and its import from index.scss, replace all existing custom width utility class usages with the equivalent Tailwind arbitrary width syntax
This commit is contained in:
duanshuwen
2026-07-24 22:28:16 +08:00
parent 3d41691b65
commit 4af4255610
17 changed files with 22 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,7 +1,7 @@
<template>
<view class="create-service-order">
<view class="w-full bg-white border-ff overflow-hidden rounded-[20px]">
<view class="border-box order-header w-vw flex flex-items-center flex-justify-between bg-[#F0F8F3]">
<view class="border-box order-header w-screen flex flex-items-center flex-justify-between bg-[#F0F8F3]">
<text class="text-[18px] font-[500] text-[#171717] text-left ml-[12px]">
{{ isCallSuccess ? "服务已创建" : "呼叫服务" }}
</text>
@@ -28,7 +28,7 @@
<view class="bg-[#f5f7fa] p-[12px] rounded-[10px] text-[14px] font-[500] text-[#171717] mb-[12px]">
<view class="font-[500] leading-[22px] mb-[12px]">照片上传</view>
<view class="w-80 h-80 bg-white rounded-[8px] overflow-hidden flex flex-items-center flex-justify-center">
<view class="w-[80px] h-80 bg-white rounded-[8px] overflow-hidden flex flex-items-center flex-justify-center">
<view v-if="contentImgUrl" class="w-full h-full relative inline-block">
<image class="w-full h-full block" :src="contentImgUrl" mode="aspectFill" />
<uni-icons class="close-btn absolute z-10" type="close" size="20" color="#6A717F"

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

@@ -1,7 +1,7 @@
<template>
<view class="create-service-order">
<view class="w-full bg-white border-ff overflow-hidden rounded-[20px]">
<view class="border-box order-header w-vw flex flex-items-center flex-justify-between bg-[#F0F8F3]">
<view class="border-box order-header w-screen flex flex-items-center flex-justify-between bg-[#F0F8F3]">
<text class="text-[18px] font-[500] text-[#171717] text-left ml-[12px]">
{{ isCallSuccess ? "反馈已创建" : "反馈意见" }}
</text>

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

@@ -1,11 +1,11 @@
<template>
<view class="survey-questionnaire w-vw-24">
<view class="survey-questionnaire w-[calc(100vw_-_24px)]">
<view class="bg-white border-ff overflow-hidden rounded-[20px]">
<view class="border-box flex flex-items-center flex-justify-between bg-[#F0F8F3]">
<text class="text-[18px] font-[500] text-[#171717] text-left ml-[12px]">
调查问卷
</text>
<image class="w-102 h-72" :src="surveyData.logoUrl" mode="widthFix" />
<image class="w-[102px] h-72" :src="surveyData.logoUrl" mode="widthFix" />
</view>
<image class="w-full" :src="surveyData.bannerUrl" mode="widthFix" />

2
src/pages-order/order/components/GoodsInfo/index.vue
View File

@@ -26,7 +26,7 @@
</view>
<view class="flex text-[12px]">
<text class="w-60 text-[#99a0ae]">购买数量</text>
<text class="w-[60px] text-[#99a0ae]">购买数量</text>
<text class="text-[#525866]">{{ commodityAmount }}</text>
</view>

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

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

4
src/pages-order/order/components/UserInfo/index.vue
View File

@@ -2,12 +2,12 @@
<view class="bg-white rounded-[10px] p-[12px] mb-[12px]" v-if="hasConsumerData">
<view v-for="(item, index) in consumerList" :key="index">
<view class="flex mb-[8px] text-[12px]">
<text class="w-60 text-[#99a0ae]">住客姓名</text>
<text class="w-[60px] text-[#99a0ae]">住客姓名</text>
<text class="text-[#525866]">{{ item.visitorName }}</text>
</view>
</view>
<view class="flex text-[12px]">
<text class="w-60 text-[#99a0ae]">联系电话</text>
<text class="w-[60px] text-[#99a0ae]">联系电话</text>
<text class="text-[#525866]">{{ contactPhone }}</text>
</view>
</view>

2
src/pages/ChatMain/ChatTopNavBar/index.vue
View File

@@ -19,7 +19,7 @@
</text>
</view>
<view class="w-24 h-24"></view>
<view class="w-[24px] h-24"></view>
</view>
</template>

2
src/pages/ChatModule/AigcPhotoCard/index.vue
View File

@@ -1,7 +1,7 @@
<template>
<view class="w-full bg-white border-ff overflow-hidden rounded-[20px] flex flex-col">
<!-- 占位撑开 -->
<view class="w-vw"></view>
<view class="w-screen"></view>
<view class="aigc-photo-card relative rounded-[24px] overflow-hidden w-full"
:class="{ 'is-disabled': disabled, 'is-empty': !videoUrl }" @click="handleAction">

2
src/pages/ChatModule/AnswerComponent/index.vue
View File

@@ -1,7 +1,7 @@
<template>
<view v-if="shouldRenderCard" class="w-full bg-white border-ff overflow-hidden rounded-[20px] flex flex-col">
<!-- 占位撑开 -->
<view class="w-vw"></view>
<view class="w-screen"></view>
<view class="flex flex-col px-[16px] pt-[16px] pb-[12px] border-box" @click="lookDetailAction">
<view v-if="tag" class="long-answer-tag" :style="longAnswerTagStyle">{{ tag }}</view>
<view v-if="title" class="flex flex-row flex-items-start flex-justify-start mb-[4px]">

2
src/pages/ChatModule/DetailCardCompontent/index.vue
View File

@@ -1,6 +1,6 @@
<template>
<view class="w-full pb-[12px]">
<view class="w-vw"></view>
<view class="w-screen"></view>
<template v-if="toolCall.picture && toolCall.picture.length > 0">
<ModuleTitle :title="图片详情" />
<ImageSwiper :images="toolCall.picture" thumbnailBottom="12px" />

2
src/pages/ChatModule/GeneratorPhotoComponent/index.vue
View File

@@ -1,7 +1,7 @@
<template>
<view class="container w-full border-ff overflow-hidden rounded-[24px] flex flex-col">
<!-- 占位撑开 -->
<view class="w-vw"></view>
<view class="w-screen"></view>
<view class="content flex flex-col m-[4px] rounded-[24px]">
<view class="flex flex-col p-[6px] flex-items-center justify-center">
<image class="w-full rounded-[20px]" :src="componentDataMap.background" mode="widthFix" />

2
src/pages/ChatModule/LongTextGuideCardPreview/index.vue
View File

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

6
src/pages/ChatModule/OpenMapComponent/index.vue
View File

@@ -1,10 +1,10 @@
<template>
<view class="w-full bg-white border-ff overflow-hidden rounded-[20px] flex flex-col">
<!-- 占位撑开 -->
<view class="w-vw"></view>
<view class="w-screen"></view>
<view class="flex flex-items-center flex-justify-between p-[12px] border-box" @click="openMap">
<view class="rounded-[16px] p-[16px] bg-[#F0F8F3]">
<view class="w-32 h-32 rounded-full bg-white flex flex-items-center flex-justify-center">
<view class="w-[32px] h-32 rounded-full bg-white flex flex-items-center flex-justify-center">
<uni-icons type="location" size="16" color="#171717" />
</view>
</view>
@@ -12,7 +12,7 @@
<view class="font-color-900 text-[14px]">打开导览地图</view>
<view class="font-color-500 text-[12px] mt-[6px]">距你 {{ distance }} · 步行 {{ walk }}</view>
</view>
<view class="ml-[12px] flex flex-items-center flex-justify-center w-32 h-32 rounded-full bg-[#f2f5f8]">
<view class="ml-[12px] flex flex-items-center flex-justify-center w-[32px] h-32 rounded-full bg-[#f2f5f8]">
<uni-icons class="mb-[2px]" type="right" size="12" color="#99A0AE" />
</view>
</view>

2
src/pages/ChatModule/SharedVisual/ActionRow.vue
View File

@@ -2,7 +2,7 @@
<view class="visual-action-row flex flex-items-center gap-[12px] p-[12px] bg-white rounded-[18px] border-box"
:class="{ 'is-disabled': disabled }" @click="handleClick">
<view
class="visual-action-row__icon flex flex-items-center flex-justify-center w-42 h-42 rounded-[14px] text-[18px] font-bold"
class="visual-action-row__icon flex flex-items-center flex-justify-center w-[42px] h-42 rounded-[14px] text-[18px] font-bold"
:class="toneClass">
<slot name="icon">{{ icon }}</slot>
</view>

2
src/pages/ChatModule/ZModuleBase/index.vue
View File

@@ -1,7 +1,7 @@
<template>
<view class="container w-full border-ff overflow-hidden rounded-[24px] flex flex-col">
<!-- 占位撑开 -->
<view class="w-vw"></view>
<view class="w-screen"></view>
<view class="flex flex-col m-[4px] rounded-[24px]">
<slot name="content"></slot>
</view>

1
src/static/scss/index.scss
View File

@@ -5,4 +5,3 @@
@import "./font-family.scss";
@import "./overflow.scss";
@import "./scroll.scss";
@import "./width.scss";

75
src/static/scss/width.scss
View File

@@ -1,75 +0,0 @@
.w-full {
width: 100%;
}
.w-vw {
width: 100vw;
}
.w-auto {
width: auto;
}
.w-vw-24 {
width: calc(100vw - 24px);
}
.w-8 {
width: 8px;
}
.w-10 {
width: 10px;
}
.w-12 {
width: 12px;
}
.w-16 {
width: 16px;
}
.w-24 {
width: 24px;
}
.w-32 {
width: 32px;
}
.w-42 {
width: 42px;
}
.w-44 {
width: 44px;
}
.w-54 {
width: 54px;
}
.w-72 {
width: 72px;
}
.w-50 {
width: 50%;
}
.w-60 {
width: 60px;
}
.w-64 {
width: 64px;
}
.w-80 {
width: 80px;
}
.w-102 {
width: 102px;
}