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

feat: 主题颜色的调整，现在支持切换颜色

Browse Source
This commit is contained in:
zoujing
2026-03-10 15:51:55 +08:00
parent 9cfde3f10a
commit df8a7f4de7
29 changed files with 106 additions and 267 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/pages-quick/components/Tabs/index.vue
View File

@@ -1,30 +1,19 @@
<template>
<view class="tab-container relative">
<view class="tab-wrapper flex flex-items-center flex-justify-center">
<view
v-for="(item, index) in tabList"
:key="index"
:class="[
'tab-item flex flex-full flex-items-center flex-justify-center relative',
activeIndex === index && 'tab-item-active',
]"
@click="handleTabClick(index)"
>
<view v-for="(item, index) in tabList" :key="index" :class="[
'tab-item flex flex-full flex-items-center flex-justify-center relative',
activeIndex === index && 'tab-item-active',
]" @click="handleTabClick(index)">
<view class="absolute flex flex-items-center">
<uni-icons
class="icon mr-4"
fontFamily="znicons"
size="20"
:color="activeIndex === index ? '#2D91FF' : '#525866'"
>
<uni-icons class="icon mr-4" fontFamily="znicons" size="20"
:color="activeIndex === index ? '$theme-color-500' : '#525866'">
{{ zniconsMap[item.icon] }}
</uni-icons>
<text
:class="[
'font-size-16 font-500 color-525866 ',
activeIndex === index && 'tab-text-active',
]"
>
<text :class="[
'font-size-16 font-500 color-525866 ',
activeIndex === index && 'tab-text-active',
]">
{{ item.label }}
</text>
</view>
@@ -32,17 +21,14 @@
</view>
<!-- 下划线指示器 -->
<view
:class="[
'tab-indicator absolute',
indicatorAnimating && 'animating',
indicatorInitialized && 'initialized',
]"
:style="{
left: indicatorLeft + 'px',
width: indicatorWidth + 'px',
}"
></view>
<view :class="[
'tab-indicator absolute',
indicatorAnimating && 'animating',
indicatorInitialized && 'initialized',
]" :style="{
left: indicatorLeft + 'px',
width: indicatorWidth + 'px',
}"></view>
</view>
</template>

8
src/pages-quick/components/Tabs/styles/index.scss
View File

@@ -1,5 +1,5 @@
.tab-wrapper {
background-color: #d9eeff;
background-color: $theme-color-100;
height: 48px;
}
@@ -24,19 +24,19 @@
border-radius: 20px 20px 0 0;
transform: perspective(40px) rotateX(6deg) translate(0, -1px);
transform-origin: bottom bottom;
box-shadow: 0 -0.5px 0 #2d91ff;
box-shadow: 0 -0.5px 0 $theme-color-500;
}
}
.tab-text-active {
color: #2d91ff;
color: $theme-color-500;
z-index: 3;
}
.tab-indicator {
bottom: 0;
height: 3px;
background-color: #2d91ff;
background-color: $theme-color-500;
border-radius: 4px 4px 0 0;
transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1),
width 0.3s cubic-bezier(0.4, 0, 0.2, 1);

44
src/pages-quick/list.vue
View File

@@ -1,23 +1,13 @@
<template>
<z-paging
ref="paging"
v-model="dataList"
use-virtual-list
:force-close-inner-list="true"
cell-height-mode="dynamic"
safe-area-inset-bottom
@query="queryList"
>
<z-paging ref="paging" v-model="dataList" use-virtual-list :force-close-inner-list="true" cell-height-mode="dynamic"
safe-area-inset-bottom @query="queryList">
<template #top>
<TopNavBar title="快速预定" />
<Tabs @change="handleTabChange" />
<!-- 选择入住、离店日期 -->
<view
class="bg-white border-box flex flex-items-center p-12"
v-if="currentType === '0'"
>
<view class="bg-white border-box flex flex-items-center p-12" v-if="currentType === '0'">
<view class="in flex flex-items-center">
<text class="font-size-11 font-500 color-99A0AE mr-4">入住</text>
<text class="font-size-14 font-500 color-171717">
@@ -26,9 +16,7 @@
</view>
<!-- 几晚 -->
<text
class="nights bg-E5E8EE border-box font-size-11 font-500 color-525866 rounded-50 ml-8 mr-8"
>
<text class="nights bg-E5E8EE border-box font-size-11 font-500 color-525866 rounded-50 ml-8 mr-8">
{{ selectedDate.totalDays }}晚
</text>
@@ -40,32 +28,16 @@
</view>
<!-- 日期图标 -->
<uni-icons
class="ml-auto"
type="calendar"
size="24"
color="#2D91FF"
@click="calendarVisible = true"
/>
<uni-icons class="ml-auto" type="calendar" size="24" color="$theme-color-500" @click="calendarVisible = true" />
</view>
</template>
<Card
v-for="(item, index) in dataList"
:key="index"
:item="item"
:selectedDate="selectedDate"
/>
<Card v-for="(item, index) in dataList" :key="index" :item="item" :selectedDate="selectedDate" />
</z-paging>
<!-- 日历组件 -->
<Calender
:visible="calendarVisible"
mode="range"
:default-value="selectedDate"
@close="handleCalendarClose"
@range-select="handleDateSelect"
/>
<Calender :visible="calendarVisible" mode="range" :default-value="selectedDate" @close="handleCalendarClose"
@range-select="handleDateSelect" />
</template>
<script setup>