refactor: convert legacy color classes to tailwind syntax
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:
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<view class="notice-card w-full">
|
||||
<view v-if="!detailOpen" class="notice-card__summary bg-FFFBEB rounded-24 w-full">
|
||||
<view v-if="!detailOpen" class="notice-card__summary bg-[#fffbeb] rounded-24 w-full">
|
||||
<view class="notice-card__summary-title color-B45309 font-size-16 font-900">
|
||||
{{ summary.title }}
|
||||
</view>
|
||||
@@ -11,11 +11,8 @@
|
||||
<view class="notice-card__summary-time color-D97706 font-size-12 font-900">
|
||||
{{ summary.publishTime }}
|
||||
</view>
|
||||
<view
|
||||
class="notice-card__summary-link color-B45309 font-size-14 font-900"
|
||||
:class="{ 'is-disabled': disabled }"
|
||||
@click="openDetail"
|
||||
>
|
||||
<view class="notice-card__summary-link color-B45309 font-size-14 font-900" :class="{ 'is-disabled': disabled }"
|
||||
@click="openDetail">
|
||||
{{ summary.actionText }}
|
||||
</view>
|
||||
</view>
|
||||
@@ -23,10 +20,8 @@
|
||||
|
||||
<view v-else class="notice-card__detail bg-white rounded-24 overflow-hidden w-full">
|
||||
<view class="notice-card__detail-head flex flex-items-center">
|
||||
<view
|
||||
class="notice-card__back flex flex-items-center flex-justify-center rounded-full flex-shrink-0"
|
||||
@click="closeDetail"
|
||||
>
|
||||
<view class="notice-card__back flex flex-items-center flex-justify-center rounded-full flex-shrink-0"
|
||||
@click="closeDetail">
|
||||
<uni-icons type="left" size="16" color="#CBD5E1"></uni-icons>
|
||||
</view>
|
||||
<view class="notice-card__head-title color-1E293B font-size-18 font-900">
|
||||
@@ -34,31 +29,21 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<image
|
||||
class="notice-card__image block w-full"
|
||||
:src="detail.image"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
<image class="notice-card__image block w-full" :src="detail.image" mode="aspectFill" />
|
||||
|
||||
<view class="notice-card__detail-body">
|
||||
<view class="notice-card__detail-title color-1E293B font-size-20 font-900">
|
||||
{{ detail.title }}
|
||||
</view>
|
||||
<view class="notice-card__time-pill flex flex-items-center bg-F8FAFC color-475569 font-size-13 font-900">
|
||||
<view class="notice-card__time-pill flex flex-items-center bg-[#f8fafc] color-475569 font-size-13 font-900">
|
||||
<text class="notice-card__time-icon">{{ detail.timeIcon }}</text>
|
||||
<text>{{ detail.publishTime }}</text>
|
||||
</view>
|
||||
<view class="notice-card__divider"></view>
|
||||
<view
|
||||
v-for="paragraph in paragraphs"
|
||||
:key="paragraph.id"
|
||||
class="notice-card__paragraph color-475569 font-size-14 font-800"
|
||||
>
|
||||
<text
|
||||
v-for="segment in paragraph.segments"
|
||||
:key="segment.text"
|
||||
:class="{ 'notice-card__strong': segment.strong }"
|
||||
>
|
||||
<view v-for="paragraph in paragraphs" :key="paragraph.id"
|
||||
class="notice-card__paragraph color-475569 font-size-14 font-800">
|
||||
<text v-for="segment in paragraph.segments" :key="segment.text"
|
||||
:class="{ 'notice-card__strong': segment.strong }">
|
||||
{{ segment.text }}
|
||||
</text>
|
||||
</view>
|
||||
|
||||
Reference in New Issue
Block a user