2 Commits

Author SHA1 Message Date
df8a7f4de7 feat: 主题颜色的调整,现在支持切换颜色 2026-03-10 15:51:55 +08:00
9cfde3f10a feat: 主题颜色的定义 2026-03-10 10:19:55 +08:00
28 changed files with 107 additions and 154 deletions

View File

@@ -1,6 +1,6 @@
{ {
"zhinian": { "zhinian": {
"clientId": "6", "clientId": "8",
"appId": "wx5e79df5996572539", "appId": "wx5e79df5996572539",
"name": "智念", "name": "智念",
"placeholder": "快告诉智念您在想什么~", "placeholder": "快告诉智念您在想什么~",

View File

@@ -4,7 +4,7 @@
class="w-full bg-white border-box border-ff overflow-hidden rounded-20" class="w-full bg-white border-box border-ff overflow-hidden rounded-20"
> >
<view <view
class="border-box order-header w-vw flex flex-items-center flex-justify-between bg-EEF8FF" class="border-box order-header w-vw flex flex-items-center flex-justify-between bg-theme-color-50"
> >
<text class="font-size-18 font-500 color-171717 text-left ml-12"> <text class="font-size-18 font-500 color-171717 text-left ml-12">
{{ isCallSuccess ? "服务已创建" : "呼叫服务" }} {{ isCallSuccess ? "服务已创建" : "呼叫服务" }}

View File

@@ -15,7 +15,7 @@
</text> </text>
</view> </view>
<view class="flex flex-items-center" v-if="showBtn" @click="emit('click')"> <view class="flex flex-items-center" v-if="showBtn" @click="emit('click')">
<text class="font-size-12 color-2D91FF line-height-16">房间详情</text> <text class="font-size-12 theme-color-500 line-height-16">房间详情</text>
<uni-icons type="right" size="15" color="#99A0AE" /> <uni-icons type="right" size="15" color="#99A0AE" />
</view> </view>
</view> </view>

View File

@@ -4,7 +4,7 @@
class="w-full bg-white border-box border-ff overflow-hidden rounded-20" class="w-full bg-white border-box border-ff overflow-hidden rounded-20"
> >
<view <view
class="border-box order-header w-vw flex flex-items-center flex-justify-between bg-EEF8FF" class="border-box order-header w-vw flex flex-items-center flex-justify-between bg-theme-color-50"
> >
<text class="font-size-18 font-500 color-171717 text-left ml-12"> <text class="font-size-18 font-500 color-171717 text-left ml-12">
{{ isCallSuccess ? "反馈已创建" : "反馈意见" }} {{ isCallSuccess ? "反馈已创建" : "反馈意见" }}

View File

@@ -1,7 +1,7 @@
<template> <template>
<view class="survey-questionnaire w-vw-24"> <view class="survey-questionnaire w-vw-24">
<view class="bg-white border-box border-ff overflow-hidden rounded-20"> <view class="bg-white border-box border-ff overflow-hidden rounded-20">
<view class="border-box flex flex-items-center flex-justify-between bg-EEF8FF"> <view class="border-box flex flex-items-center flex-justify-between bg-theme-color-50">
<text class="font-size-18 font-500 color-171717 text-left ml-12"> <text class="font-size-18 font-500 color-171717 text-left ml-12">
调查问卷 调查问卷
</text> </text>

View File

@@ -1,7 +1,7 @@
// TopNavBar 组件样式 // TopNavBar 组件样式
.top-nav-bar { .top-nav-bar {
width: 100%; width: 100%;
background-color: #d9eeff; background-color: $theme-color-100;
&--fixed { &--fixed {
position: fixed; position: fixed;

View File

@@ -2,7 +2,7 @@
<view class="booking h-screen flex flex-col"> <view class="booking h-screen flex flex-col">
<TopNavBar <TopNavBar
titleAlign="center" titleAlign="center"
backgroundColor="#D9EEFF" :backgroundColor="$theme-color-100"
backIconColor="#000" backIconColor="#000"
:shadow="false" :shadow="false"
> >
@@ -53,7 +53,7 @@
> >
<view class="flex flex-items-center"> <view class="flex flex-items-center">
<text <text
class="font-size-12 color-2D91FF line-height-16" class="font-size-12 theme-color-500 line-height-16"
@click="refundVisible = true" @click="refundVisible = true"
>取消政策</text >取消政策</text
> >

View File

@@ -1,4 +1,4 @@
.booking { .booking {
background: linear-gradient(180deg, #d9eeff 0%, #f5f7fa 100%) 0 86px / 100% background: linear-gradient(180deg, $theme-color-100 0%, #f5f7fa 100%) 0 86px / 100%
100px no-repeat; 100px no-repeat;
} }

View File

@@ -22,7 +22,7 @@
> >
<view class="color-525866">取消政策及说明</view> <view class="color-525866">取消政策及说明</view>
<view class="flex flex-items-center" @click="emit('click')"> <view class="flex flex-items-center" @click="emit('click')">
<text class="color-2D91FF mr-4">查看详情</text> <text class="theme-color-500 mr-4">查看详情</text>
<uni-icons type="right" size="12" color="#99A0AE" /> <uni-icons type="right" size="12" color="#99A0AE" />
</view> </view>
</view> </view>

View File

@@ -14,7 +14,7 @@
'right border-none rounded-10 flex flex-full flex-items-center flex-justify-center font-size-14 font-500 color-white', 'right border-none rounded-10 flex flex-full flex-items-center flex-justify-center font-size-14 font-500 color-white',
{ {
'bg-FF3D60': statusCode === '0', 'bg-FF3D60': statusCode === '0',
'bg-2D91FF': ['1', '2', '3', '4', '5', '6'].includes(statusCode), 'theme-color-500': ['1', '2', '3', '4', '5', '6'].includes(statusCode),
}, },
]" ]"
@click="handleButtonClick(orderData)" @click="handleButtonClick(orderData)"

View File

@@ -30,7 +30,7 @@
} }
&.tag-4 { &.tag-4 {
color: #2d91ff; color: $theme-color-500;
} }
&.tag-5 { &.tag-5 {

View File

@@ -1,6 +1,6 @@
<template> <template>
<view class="order-detail-page flex flex-col h-screen"> <view class="order-detail-page flex flex-col h-screen">
<TopNavBar titleAlign="center" background="#D9EEFF" title="订单详情" /> <TopNavBar titleAlign="center" :background="$theme-color-100" title="订单详情" />
<view <view
class="order-detail-wrapper border-box flex-full overflow-hidden scroll-y" class="order-detail-wrapper border-box flex-full overflow-hidden scroll-y"

View File

@@ -1,14 +1,8 @@
<template> <template>
<z-paging <z-paging
bg-color="linear-gradient(180deg, #D9EEFF 0%, #F5F7FA 100%) 0 86px / 100% 100px no-repeat" :bg-color="'linear-gradient(180deg, ' + $theme-color-100 + ' 0%, #F5F7FA 100%) 0 86px / 100% 100px no-repeat'"
ref="paging" ref="paging" v-model="dataList" use-virtual-list :force-close-inner-list="true" cell-height-mode="dynamic"
v-model="dataList" safe-area-inset-bottom @query="queryList">
use-virtual-list
:force-close-inner-list="true"
cell-height-mode="dynamic"
safe-area-inset-bottom
@query="queryList"
>
<template #top> <template #top>
<TopNavBar title="全部订单" /> <TopNavBar title="全部订单" />
</template> </template>
@@ -17,12 +11,7 @@
<CustomEmpty statusText="您暂无订单" /> <CustomEmpty statusText="您暂无订单" />
</template> </template>
<OrderCard <OrderCard v-for="(item, index) in dataList" :key="item.id || index" :orderData="item" @click="handleOrderClick" />
v-for="(item, index) in dataList"
:key="item.id || index"
:orderData="item"
@click="handleOrderClick"
/>
</z-paging> </z-paging>
</template> </template>

View File

@@ -1,4 +1,4 @@
.order-detail-wrapper { .order-detail-wrapper {
background: linear-gradient(180deg, #d9eeff 0%, #f5f7fa 100%); background: linear-gradient(180deg, $theme-color-100 0%, #f5f7fa 100%);
padding: 0 12px 40px; padding: 0 12px 40px;
} }

View File

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

View File

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

View File

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

View File

@@ -1,30 +1,18 @@
<template> <template>
<z-paging <z-paging
bg-color="linear-gradient(180deg, #D9EEFF 0%, #F5F7FA 100%) 0 86px / 100% 100px no-repeat" :bg-color="'linear-gradient(180deg, ' + $theme - color - 100 + ' 0%, #F5F7FA 100%) 0 86px / 100% 100px no-repeat'"
ref="paging" ref="paging" v-model="dataList" use-virtual-list :force-close-inner-list="true" cell-height-mode="dynamic"
v-model="dataList" safe-area-inset-bottom @query="queryList">
use-virtual-list
:force-close-inner-list="true"
cell-height-mode="dynamic"
safe-area-inset-bottom
@query="queryList"
>
<template #top> <template #top>
<TopNavBar title="呼叫服务" /> <TopNavBar title="呼叫服务" />
</template> </template>
<template #empty> <template #empty>
<CustomEmpty <CustomEmpty emptyIcon="https://oss.nianxx.cn/mp/static/version_101/order/service_empty.png"
emptyIcon="https://oss.nianxx.cn/mp/static/version_101/order/service_empty.png" statusText="您暂无呼叫服务" />
statusText="您暂无呼叫服务"
/>
</template> </template>
<OrderCard <OrderCard v-for="(item, index) in dataList" :key="item.id || index" :orderData="item" />
v-for="(item, index) in dataList"
:key="item.id || index"
:orderData="item"
/>
</z-paging> </z-paging>
</template> </template>

View File

@@ -65,7 +65,7 @@
#8afcf8 0%, #8afcf8 0%,
rgba(138, 252, 248, 0) 100% rgba(138, 252, 248, 0) 100%
), ),
#2d91ff; $theme-color-500;
} }
.send-icon { .send-icon {

View File

@@ -4,7 +4,7 @@
@click="sendReply(item)"> @click="sendReply(item)">
<view class="flex items-center justify-center"> <view class="flex items-center justify-center">
<image v-if="item.icon" class="icon" :src="item.icon" /> <image v-if="item.icon" class="icon" :src="item.icon" />
<text class="font-size-14 color-2D91FF line-height-20"> <text class="font-size-14 theme-color-500 line-height-20">
{{ item.title }} {{ item.title }}
</text> </text>
</view> </view>

View File

@@ -18,6 +18,6 @@
} }
.tag-text { .tag-text {
color: #2d91ff; /* 蓝色文字,可根据设计调整 */ color: $theme-color-500;
font-size: $uni-font-size-base; font-size: $uni-font-size-base;
} }

View File

@@ -23,7 +23,7 @@
} }
.right { .right {
background-color: #2d91ff; background-color: $theme-color-500;
border-radius: 5px; border-radius: 5px;
padding: 6px; padding: 6px;
} }

View File

@@ -17,9 +17,9 @@
<view class="login-agreement flex flex-items-center"> <view class="login-agreement flex flex-items-center">
<CheckBox v-model="isAgree"> <CheckBox v-model="isAgree">
<text class="font-size-12 color-525866">我已阅读并同意</text> <text class="font-size-12 color-525866">我已阅读并同意</text>
<text class="font-size-12 color-2D91FF ml-4 mr-4" @click.stop="handleAgreeClick('service')">服务协议</text> <text class="font-size-12 theme-color-500 ml-4 mr-4" @click.stop="handleAgreeClick('service')">服务协议</text>
<text class="font-size-12 color-525866"></text> <text class="font-size-12 color-525866"></text>
<text class="font-size-12 color-2D91FF ml-4 mr-4" @click.stop="handleAgreeClick('privacy')">隐私协议</text> <text class="font-size-12 theme-color-500 ml-4 mr-4" @click.stop="handleAgreeClick('privacy')">隐私协议</text>
<text class="font-size-12 color-525866">\n</text> <text class="font-size-12 color-525866">\n</text>
<text class="font-size-12 color-525866 ml-30">授权与账号关联操作</text> <text class="font-size-12 color-525866 ml-30">授权与账号关联操作</text>
</CheckBox> </CheckBox>

View File

@@ -30,7 +30,7 @@
width: 304px; width: 304px;
.login-btn { .login-btn {
background: #2d91ff; background: $theme-color-500;
width: 100%; width: 100%;
border-radius: 10px; border-radius: 10px;
} }

View File

@@ -23,31 +23,29 @@
background-color: #f5f7fa; background-color: #f5f7fa;
} }
.bg-EEF8FF {
background-color: #eef8ff;
}
.bg-FF3D60 { .bg-FF3D60 {
background-color: #ff3d60; background-color: #ff3d60;
} }
.bg-2D91FF { .bg-theme-color-500 {
background-color: #2d91ff; background-color: $theme-color-500;
}
.bg-theme-color-50 {
background-color: $theme-color-50;
} }
.bg-liner { .bg-liner {
background: linear-gradient(205deg, #8ae3fc 0%, rgba(138, 227, 252, 0) 20%), background: linear-gradient(205deg, $theme-color-100 0%, rgba(138, 227, 252, 0) 20%),
linear-gradient(155deg, #fef7e1 0%, rgba(254, 247, 225, 0) 20%), linear-gradient(155deg, #fef7e1 0%, rgba(254, 247, 225, 0) 20%),
radial-gradient( radial-gradient(48% 48% at 61% 118%,
48% 48% at 61% 118%,
#ffffff 0%, #ffffff 0%,
rgba(255, 255, 255, 0) 100% rgba(255, 255, 255, 0) 100%),
), linear-gradient(180deg, rgba(238, 248, 255, 0) 0%, $theme-color-50 50%), $theme-color-50;
linear-gradient(180deg, rgba(238, 248, 255, 0) 0%, #eef8ff 50%), #eef8ff;
} }
.bg-button { .bg-button {
background: linear-gradient(90deg, #2d91ff 0%, #4de4ff 100%); background: linear-gradient(90deg, $theme-color-500 0%, #4de4ff 100%);
} }
.bg-transparent { .bg-transparent {

View File

@@ -40,8 +40,8 @@
color: #ff3d60; color: #ff3d60;
} }
.color-2D91FF { .theme-color-500 {
color: #2d91ff; color: $theme-color-500;
} }
.color-43669A { .color-43669A {

View File

@@ -12,6 +12,32 @@
* 如果你的项目同样使用了scss预处理你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件 * 如果你的项目同样使用了scss预处理你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
*/ */
/* 主题颜色:蓝色 */
// $theme-color-800: #174BB6;
// $theme-color-700: #19428F;
// $theme-color-500: #2D91FF;
// $theme-color-100: #D9EEFF;
// $theme-color-50: #EEF8FF;
/* 主题颜色:绿色 */
$theme-color-800: #0B7034;
$theme-color-700: #0B5C2D;
$theme-color-500: #0CCD58;
$theme-color-100: #E8FFF1;
$theme-color-50: #F0F8F3;
// text 颜色
$text-color-900: #181B25;
$text-color-800: #222530;
$text-color-700: #2B303B;
$text-color-600: #525866;
$text-color-500: #717784;
$text-color-400: #99A0AE;
$text-color-300: #CACFD8;
$text-color-200: #E5E8EE;
$text-color-100: #F2F5F8;
$text-color-50: #F9FAFB;
/* 颜色变量 */ /* 颜色变量 */
/* 行为相关颜色 */ /* 行为相关颜色 */

View File

@@ -1,13 +1,7 @@
<template> <template>
<view class="zero-markdown-view"> <view class="zero-markdown-view">
<mp-html <mp-html :key="mpkey" :selectable="selectable" :scroll-table="scrollTable" :tag-style="tagStyle" :markdown="true"
:key="mpkey" :content="contentAi">
:selectable="selectable"
:scroll-table="scrollTable"
:tag-style="tagStyle"
:markdown="true"
:content="contentAi"
>
</mp-html> </mp-html>
</view> </view>
</template> </template>
@@ -35,7 +29,7 @@ export default {
}, },
themeColor: { themeColor: {
type: String, type: String,
default: "#2D91FF", default: "#181B25",
}, },
codeBgColor: { codeBgColor: {
type: String, type: String,
@@ -47,11 +41,11 @@ export default {
}, },
fontColor: { fontColor: {
type: String, type: String,
default: "#171717", default: "#181B25",
}, },
fontSubColor: { fontSubColor: {
type: String, type: String,
default: "#4D4D4D", default: "#717784",
}, },
aiMode: { aiMode: {
type: Boolean, type: Boolean,