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

refactor: convert legacy color classes to tailwind syntax

Browse Source 
Replace all custom `bg-*` utility classes across Vue components with Tailwind's arbitrary hex color notation (e.g. `bg-[#f7f7f7]`). Remove redundant hardcoded background color definitions from src/static/scss/background.scss, clean up template formatting, and update gradient button styles to use direct hex values.
This commit is contained in:
duanshuwen
2026-07-24 15:56:35 +08:00
parent d3d15b1a19
commit aa0203819c
27 changed files with 225 additions and 527 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/pages/goods/album/index.vue
View File

@@ -1,27 +1,17 @@
<template>
<view class="bg-F5F7FA flex flex-col h-screen overflow-hidden">
<view class="bg-[#f5f7fa] flex flex-col h-screen overflow-hidden">
<TopNavBar title="房间相册" backgroundColor="transparent" />
<view class="p-8">
<text class="ml-4 font-size-18 color-171717 font-500"
>全部({{ albumList.length }})</text
>
<text class="ml-4 font-size-18 color-171717 font-500">全部({{ albumList.length }})</text>
</view>
<scroll-view scroll-y class="scroll-container overflow-auto">
<view class="pl-4 pr-4 pb-24">
<view class="grid-container">
<view
class="album-item"
v-for="(item, index) in albumList"
:key="index"
>
<view class="album-item" v-for="(item, index) in albumList" :key="index">
<view class="album-image-wrapper">
<image
class="album-image"
:src="item.photoUrl"
mode="aspectFill"
@click="handlePreview(item.photoUrl)"
></image>
<image class="album-image" :src="item.photoUrl" mode="aspectFill" @click="handlePreview(item.photoUrl)">
</image>
<view class="album-title">{{ item.name }}</view>
</view>
</view>
@@ -87,11 +77,9 @@ const handlePreview = (photoUrl) => {
left: 0;
right: 0;
padding: 8px;
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.6) 100%
);
background: linear-gradient(180deg,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.6) 100%);
color: #fff;
font-size: 14px;
font-weight: 500;

58
src/pages/goods/index.vue
View File

@@ -1,20 +1,12 @@
<template>
<view class="goods-container bg-gray">
<TopNavBar
:title="navOpacity < 0.5 ? '' : '商品详情'"
:background="`rgba(217, 238, 255, ${navOpacity})`"
<view class="goods-container bg-[#f5f5f5]">
<TopNavBar :title="navOpacity < 0.5 ? '' : '商品详情'" :background="`rgba(217, 238, 255, ${navOpacity})`"
:titleColor="navOpacity < 0.5 ? '#ffffff' : '#000000'"
:backIconColor="navOpacity < 0.5 ? '#ffffff' : '#000000'"
/>
:backIconColor="navOpacity < 0.5 ? '#ffffff' : '#000000'" />
<!-- 滚动区域 -->
<scroll-view class="content-wrapper" scroll-y @scroll="handleScroll">
<ImageSwiper
:border-radius="0"
:height="300"
:images="goodsData.commodityPhotoList"
thumbnailBottom="42px"
/>
<ImageSwiper :border-radius="0" :height="300" :images="goodsData.commodityPhotoList" thumbnailBottom="42px" />
<view class="goods-content">
<!-- 商品信息组件 -->
@@ -24,21 +16,17 @@
<LocationCard :orderData="goodsData" />
<!-- 日期选择区域 -->
<DateSelector
v-if="goodsData.orderType == 0"
@showCalendar="showCalendar"
:checkInDate="selectedDate.startDate"
:checkOutDate="selectedDate.endDate"
:checkInDay="''"
:checkOutDay="''"
:nights="selectedDate.totalDays"
/>
<DateSelector v-if="goodsData.orderType == 0" @showCalendar="showCalendar" :checkInDate="selectedDate.startDate"
:checkOutDate="selectedDate.endDate" :checkInDay="''" :checkOutDay="''" :nights="selectedDate.totalDays" />
<!-- 商品套餐组件 -->
<GoodPackage v-if="goodsData.orderType != 0 && goodsData.commodityPackageConfig && goodsData.commodityPackageConfig.length > 0" :goodsData="goodsData" />
<GoodPackage
v-if="goodsData.orderType != 0 && goodsData.commodityPackageConfig && goodsData.commodityPackageConfig.length > 0"
:goodsData="goodsData" />
<!-- 商品设施组件 -->
<GoodFacility v-if="goodsData.commodityEquipment && goodsData.commodityEquipment.length > 0" :goodsData="goodsData" />
<GoodFacility v-if="goodsData.commodityEquipment && goodsData.commodityEquipment.length > 0"
:goodsData="goodsData" />
<!-- 商品详情组件 -->
<GoodDetail :goodsData="goodsData" />
@@ -47,33 +35,19 @@
<!-- 立即抢购 -->
<view class="footer border-top">
<view
class="amt font-size-20 font-bold color-FF3D60 line-height-28 flex flex-items-center mr-8"
>
<view class="amt font-size-20 font-bold color-FF3D60 line-height-28 flex flex-items-center mr-8">
{{ calculatedTotalPrice }}
</view>
<view
class="btn border-box rounded-10 flex flex-items-center ml-auto pl-8"
@click="navigateToPay(goodsData)"
>
<image
class="icon"
src="https://oss.nianxx.cn/mp/static/version_101/common/btn.png"
/>
<view class="btn border-box rounded-10 flex flex-items-center ml-auto pl-8" @click="navigateToPay(goodsData)">
<image class="icon" src="https://oss.nianxx.cn/mp/static/version_101/common/btn.png" />
<text class="font-size-16 font-500 color-white">立即预定</text>
</view>
</view>
<!-- 日历组件 -->
<Calender
:visible="calendarVisible"
mode="range"
:range-require-price="true"
:price-data="priceData"
@close="handleCalendarClose"
@range-select="handleDateSelect"
/>
<Calender :visible="calendarVisible" mode="range" :range-require-price="true" :price-data="priceData"
@close="handleCalendarClose" @range-select="handleDateSelect" />
</view>
</template>