Browse Source

style(ui): 替换图片组件为图标字体并统一主题色样式

- StatusTip 组件中移除图片引用,使用图标字体代替
- 将多个选择组件中的图片替换为图标字体,减少静态资源依赖
- 修改 iconfont 字体文件版本号,确保图标资源更新生效
- 替换classfiy页面头部背景为渐变样式
- 统一子包中按钮背景色为主题色变量
- 优化 commonTab 下 classfiy 组件导航栏背景透明及渐变色样式
- 移除部分多余的图片标签,改为条件渲染图标字体,提高渲染效率
zhangtao 6 days ago
parent
commit
58e5e201ff

+ 1 - 10
src/components/StatusTip.vue

@@ -1,22 +1,13 @@
 <script setup lang="ts">
 import { statusTipProps } from 'wot-design-uni/components/wd-status-tip/types'
-import { StaticUrl } from '@/config'
 
 const props = defineProps({ ...statusTipProps, image: { type: String, default: '' }, imageSize: { type: String, default: '248rpx' } })
-const imgs = computed(() => {
-  if (props.image)
-    return `${StaticUrl}/${props.image}`
-  return `${StaticUrl}/status-tip.png`
-})
 </script>
 
 <template>
   <wd-status-tip v-bind="props">
     <template #image>
-      <image
-        :style="{ width: imageSize, height: imageSize }"
-        :src="imgs"
-      />
+      <i class="iconfont text-[var(--them-color)]" :style="{ fontSize: imageSize }">&#xe659;</i>
     </template>
   </wd-status-tip>
 </template>

BIN
src/iconfont/iconfont.ttf


BIN
src/iconfont/iconfont.woff


BIN
src/iconfont/iconfont.woff2


+ 4 - 4
src/iconfont/index.css

@@ -1,9 +1,9 @@
 @font-face {
   font-family: "iconfont"; /* Project id 5175205 */
-  src: url('iconfont.woff2?t=1778550882188') format('woff2'),
-       url('iconfont.woff?t=1778550882188') format('woff'),
-       url('iconfont.ttf?t=1778550882188') format('truetype'),
-       url('iconfont.svg?t=1778550882188#iconfont') format('svg');
+  src: url('iconfont.woff2?t=1778556699734') format('woff2'),
+       url('iconfont.woff?t=1778556699734') format('woff'),
+       url('iconfont.ttf?t=1778556699734') format('truetype'),
+       url('iconfont.svg?t=1778556699734#iconfont') format('svg');
 }
 
 .iconfont {

+ 1 - 1
src/pages/classfiy/index.vue

@@ -44,7 +44,7 @@ getCategories()
         </view>
       </template>
     </wd-navbar>
-    <view class="h176rpx bg-[var(--them-color)]" />
+    <view class="header-linear h176rpx" />
     <view class="wraper">
       <scroll-view class="w200rpx" :scroll-into-view-offset="-150" enable-passive scroll-with-animation scroll-y :scroll-into-view="`id${active}`">
         <view v-for="item in classfiylist" :id="`id${item.id}`" :key="item.id" :class="[item.id == active ? 'bg-white' : '']" class="relative h100rpx flex items-center justify-center whitespace-nowrap text-28rpx">

+ 34 - 37
src/subPack-film/choose-film/index.vue

@@ -2,7 +2,6 @@
 import { ref, watch } from 'vue'
 import selectTime from '../components/choose-time.vue'
 import { timeFormat } from '../utils/index'
-import { StaticUrl } from '@/config'
 
 interface brand {
   id: number
@@ -191,28 +190,25 @@ onLoad((options) => {
           <view class="choose-item-title">
             全城
           </view>
-          <image
-            class="icon" :src="StaticUrl + (active == 0 ? '/film-choose-active.png' : '/film-choose.png')"
-            mode="scaleToFill"
-          />
+          <view class="iconfont ml10rpx text-30rpx" :class="[active == 0 ? 'text-[var(--them-color)]' : '']">
+            &#xe656;
+          </view>
         </view>
         <view class="choose-item" :class="[active == 1 ? 'active' : '']" @click="handleChoose(1)">
           <view class="choose-item-title">
             品牌
           </view>
-          <image
-            class="icon" :src="StaticUrl + (active == 1 ? '/film-choose-active.png' : '/film-choose.png')"
-            mode="scaleToFill"
-          />
+          <view class="iconfont ml10rpx text-30rpx" :class="[active == 1 ? 'text-[var(--them-color)]' : '']">
+            &#xe656;
+          </view>
         </view>
         <view class="choose-item" :class="[active == 2 ? 'active' : '']" @click="handleChoose(2)">
           <view class="choose-item-title">
             特色
           </view>
-          <image
-            class="icon" :src="StaticUrl + (active == 2 ? '/film-choose-active.png' : '/film-choose.png')"
-            mode="scaleToFill"
-          />
+          <view class="iconfont ml10rpx text-30rpx" :class="[active == 2 ? 'text-[var(--them-color)]' : '']">
+            &#xe656;
+          </view>
         </view>
       </view>
     </view>
@@ -264,28 +260,25 @@ onLoad((options) => {
             <view class="choose-item-title">
               全城
             </view>
-            <image
-              class="icon" :src="StaticUrl + (active == 0 ? '/film-choose-active.png' : '/film-choose.png')"
-              mode="scaleToFill"
-            />
+            <view class="iconfont ml10rpx text-30rpx" :class="[active == 0 ? 'text-[var(--them-color)]' : '']">
+              &#xe656;
+            </view>
           </view>
           <view class="choose-item" :class="[active == 1 ? 'active' : '']" @click="handleChoose(1)">
             <view class="choose-item-title">
               品牌
             </view>
-            <image
-              class="icon" :src="StaticUrl + (active == 1 ? '/film-choose-active.png' : '/film-choose.png')"
-              mode="scaleToFill"
-            />
+            <view class="iconfont ml10rpx text-30rpx" :class="[active == 1 ? 'text-[var(--them-color)]' : '']">
+              &#xe656;
+            </view>
           </view>
           <view class="choose-item" :class="[active == 2 ? 'active' : '']" @click="handleChoose(2)">
             <view class="choose-item-title">
               特色
             </view>
-            <image
-              class="icon" :src="StaticUrl + (active == 2 ? '/film-choose-active.png' : '/film-choose.png')"
-              mode="scaleToFill"
-            />
+            <view class="iconfont ml10rpx text-30rpx" :class="[active == 2 ? 'text-[var(--them-color)]' : '']">
+              &#xe656;
+            </view>
           </view>
         </view>
         <view v-if="active == 0" class="choose-box">
@@ -302,10 +295,13 @@ onLoad((options) => {
               <view class="name">
                 全城
               </view>
-              <image
+              <!-- <image
                 v-if="query.districtId === ''" class="icon" :src="`${StaticUrl}/film-choose-icon.png`"
                 mode="scaleToFill"
-              />
+              /> -->
+              <view v-if="query.districtId === ''" class="iconfont ml10rpx text-30rpx text-[var(--them-color)]">
+                &#xe657;
+              </view>
             </view>
             <view
               v-for="(item, index) in cityList[currentCity].districts" :key="index" class="choose-item"
@@ -314,10 +310,13 @@ onLoad((options) => {
               <view class="name" :class="[query.districtId == item.districtId ? 'active' : '']">
                 {{ item.districtName }}
               </view>
-              <image
+              <!-- <image
                 v-if="query.districtId == item.districtId" class="icon" :src="`${StaticUrl}/film-choose-icon.png`"
                 mode="scaleToFill"
-              />
+              /> -->
+              <view v-if="query.districtId == item.districtId" class="iconfont ml10rpx text-30rpx text-[var(--them-color)]">
+                &#xe657;
+              </view>
             </view>
           </view>
         </view>
@@ -327,19 +326,17 @@ onLoad((options) => {
               <view class="name">
                 全部
               </view>
-              <image
-                v-if="query.brandId === ''" class="icon" :src="`${StaticUrl}/film-choose-icon.png`"
-                mode="scaleToFill"
-              />
+              <view v-if="query.brandId === ''" class="iconfont ml10rpx text-30rpx text-[var(--them-color)]">
+                &#xe657;
+              </view>
             </view>
             <view v-for="(item, index) in brandList" :key="index" class="choose-item" @click="choose(item.brandId)">
               <view class="name" :class="[query.brandId == item.brandId ? 'active' : '']">
                 {{ item.brandName }}
               </view>
-              <image
-                v-if="query.brandId == item.brandId" class="icon" :src="`${StaticUrl}/film-choose-icon.png`"
-                mode="scaleToFill"
-              />
+              <view v-if="query.brandId == item.brandId" class="iconfont ml10rpx text-30rpx text-[var(--them-color)]">
+                &#xe657;
+              </view>
             </view>
           </view>
         </view>

+ 1 - 1
src/subPack-film/index/index.vue

@@ -134,7 +134,7 @@ onMounted(() => {
             height: 44rpx;
             line-height: 44rpx;
             text-align: center;
-            background: #9ED605;
+            background: var(--them-color);
             border-radius: 26rpx 26rpx 26rpx 26rpx;
             font-size: 28rpx;
             color: #FFFFFF;

+ 1 - 1
src/subPack-film/movie/index.vue

@@ -451,7 +451,7 @@ onMounted(() => {
           height: 52rpx;
           line-height: 52rpx;
           text-align: center;
-          background: #9ED605;
+          background: var(--them-color);
           border-radius: 26rpx 26rpx 26rpx 26rpx;
           font-size: 28rpx;
           color: #FFFFFF;

+ 5 - 5
src/subPack-xsb/commonTab/components/classfiy.vue

@@ -401,7 +401,7 @@ export default {
 <template>
   <view class="page-xsb">
     <wd-navbar
-      title="" custom-style="background-color:var(--them-color)" :bordered="false" :z-index="9999" safe-area-inset-top
+      title="" :custom-style="`background-color: ${hexToRgba(useManualThemeStore().themeVars.colorTheme as string, 0)};`" :bordered="false" :z-index="9999" safe-area-inset-top
       fixed
     >
       <template #left>
@@ -429,7 +429,7 @@ export default {
       </template>
     </wd-navbar>
     <view
-      class="h162rpx flex items-center justify-between bg-[var(--them-color)] pl24rpx"
+      class="header-linear h162rpx flex items-center justify-between pl24rpx"
       :style="{ paddingTop: `${(Number(statusBarHeight) || 44) + MenuButtonHeight + 12}px` }"
     >
       <scroll-view
@@ -474,7 +474,7 @@ export default {
       </view>
       <wd-popup v-model="show" :z-index="9998" position="top" custom-style="border-radius:32rpx;">
         <view
-          class="box-border bg-#F4FFD1 p24rpx"
+          class="header-linear box-border p24rpx"
           :style="{ paddingTop: `${(Number(statusBarHeight) || 44) + MenuButtonHeight + 12}px` }"
         >
           <view class="mb24rpx mt24rpx text-28rpx font-semibold">
@@ -853,7 +853,7 @@ export default {
       <template #footer>
         <view class="box-border w-full flex items-center justify-between py20rpx">
           <view class="w-48%">
-            <wd-button plain hairline block @click="selectGoods = false">
+            <wd-button hairline plain block @click="selectGoods = false">
               取消
             </wd-button>
           </view>
@@ -873,7 +873,7 @@ export default {
 
 <style scoped lang="scss">
 .right-nav {
-  background: linear-gradient(180deg, #FAFFEC 0%, #F6FFDE 11%, #E7FFA5 100%);
+  background: linear-gradient( 139deg, #FAFFEC 0%, var(--them-color) 100%);
   box-shadow: -10rpx 0rpx 12rpx 2rpx rgba(0, 0, 0, 0.07);
 }