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;