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

feat: 首页主题样式调整

Browse Source
This commit is contained in:
duanshuwen
2025-10-15 19:38:01 +08:00
parent 11268d5be9
commit 6c35146b36
8 changed files with 80 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/pages/index/components/chat/ChatInputArea/index.vue
View File

@@ -6,12 +6,12 @@
<image
class="voice-icon"
v-if="!isVoiceMode"
src="https://oss.nianxx.cn/mp/static/version_1_0_1/input_voice_icon.png"
src="https://oss.nianxx.cn/mp/static/version_101/home/input_voice_icon.png"
/>
<image
class="voice-icon"
v-else
src="https://oss.nianxx.cn/mp/static/version_1_0_1/input_keyboard_icon.png"
src="https://oss.nianxx.cn/mp/static/version_101/home/input_keyboard_icon.png"
/>
</view>
@@ -57,7 +57,7 @@
<image
v-else
class="send-icon"
src="https://oss.nianxx.cn/mp/static/version_1_0_1/input_send_icon.png"
src="https://oss.nianxx.cn/mp/static/version_101/home/input_send_icon.png"
/>
</view>
</view>

5
src/pages/index/components/chat/ChatMainList/index.vue
View File

@@ -7,7 +7,7 @@
<!-- 消息列表（可滚动区域） -->
<scroll-view
class="main flex-full"
class="main flex-full overflow-hidden scroll-y"
scroll-y
:scroll-top="scrollTop"
:scroll-with-animation="true"
@@ -77,8 +77,7 @@
</template>
<template v-else-if="item.msgType === MessageRole.ME">
<ChatCardMine class="message-item-mine" :text="item.msg">
</ChatCardMine>
<ChatCardMine class="message-item-mine" :text="item.msg" />
</template>
<template v-else>

3
src/pages/index/components/chat/ChatMainList/styles/index.scss
View File

@@ -1,4 +1,5 @@
.footer {
height: 118px;
// touch-action: pan-x;
padding-bottom: calc(constant(safe-area-inset-bottom) + 8px);
padding-bottom: calc(env(safe-area-inset-bottom) + 8px);
}

66
src/pages/index/components/chat/ChatQuickAccess/index.vue
View File

@@ -1,22 +1,18 @@
<template>
<view class="quick-access">
<view class="quick-access-scroll">
<view
class="quick-access-item"
v-for="(item, index) in itemList"
:key="index"
@click="sendReply(item)"
>
<image
class="quick-access-item-bg"
src="https://oss.nianxx.cn/mp/static/quick/quick_icon_bg.png"
mode="aspectFill"
/>
<view class="quick-access-item-title">
<image class="quick-access-item-icon" :src="item.icon" />
<text>{{ item.title }}</text>
</view>
<text class="quick-access-item-content">{{ item.content }}</text>
<view
class="quick-access border-box flex flex-nowrap items-center ml-20 pt-8 pb-8"
>
<view
class="item border-box rounded-50 flex flex-row items-center"
v-for="(item, index) in itemList"
:key="index"
@click="sendReply(item)"
>
<view class="flex items-center justify-center">
<image v-if="item.icon" class="icon" :src="item.icon" />
<text class="font-size-14 color-2D91FF line-height-20">
{{ item.title }}
</text>
</view>
</view>
</view>
@@ -25,7 +21,25 @@
<script setup>
import { onMounted, ref } from "vue";
import { currentClientType, ClientType } from "@/constant/base";
const itemList = ref([]);
const itemList = ref([
{
icon: "",
title: "快速预定",
},
{
icon: "",
title: "探索发现",
},
{
icon: "",
title: "反馈意见",
},
{
icon: "https://oss.nianxx.cn/mp/static/version_101/home/more.png",
title: "更多",
},
]);
const emits = defineEmits(["replySent"]);
@@ -33,9 +47,9 @@ const sendReply = (item) => {
emits("replySent", item); // 向父组件传递数据
};
onMounted(() => {
initData();
});
// onMounted(() => {
// initData();
// });
const initData = () => {
itemList.value =
@@ -43,24 +57,28 @@ const initData = () => {
? [
{
icon: "https://oss.nianxx.cn/mp/static/quick/quick_icon_yuding.png",
showIcon: false,
title: "快速预定",
content: "预定门票、房间、餐食",
type: "Command.quickBooking",
},
{
icon: "https://oss.nianxx.cn/mp/static/quick/quick_icon_find.png",
showIcon: false,
title: "探索发现",
content: "探索玩法、出片佳地",
type: "Command.discovery",
},
{
icon: "https://oss.nianxx.cn/mp/static/quick/quick_icon_call.png",
showIcon: false,
title: "反馈意见",
content: "有意见告诉沐沐",
type: "Command.feedbackCard",
},
{
icon: "https://oss.nianxx.cn/mp/static/quick/quick_icon_order.png",
showIcon: false,
title: "订单/工单",
content: "我的订单/工单",
type: "MyOrder",
@@ -69,24 +87,28 @@ const initData = () => {
: [
{
icon: "https://oss.nianxx.cn/mp/static/quick/quick_icon_yuding.png",
showIcon: false,
title: "快速预定",
content: "预定门票、房间、餐食",
type: "Command.quickBooking",
},
{
icon: "https://oss.nianxx.cn/mp/static/quick/quick_icon_find.png",
showIcon: false,
title: "探索发现",
content: "探索玩法、出片佳地",
type: "Command.discovery",
},
{
icon: "https://oss.nianxx.cn/mp/static/quick/quick_icon_order.png",
showIcon: false,
title: "订单/工单",
content: "我的订单/工单",
type: "MyOrder",
},
{
icon: "https://oss.nianxx.cn/mp/static/quick/quick_icon_call.png",
showIcon: false,
title: "反馈意见",
content: "有意见告诉朵朵",
type: "Command.feedbackCard",

78
src/pages/index/components/chat/ChatQuickAccess/styles/index.scss
View File

@@ -1,67 +1,15 @@
.quick-access {
width: 100%;
&-scroll {
display: flex;
flex-direction: row;
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
.quick-access-item {
flex: 0 0 104px;
border-radius: 8px;
margin: 4px 4px 8px 4px;
box-shadow: 0 2px 5px 0px rgba(0, 0, 0, 0.1);
padding: 12px;
display: inline-flex;
flex-direction: column;
position: relative;
&:first-child {
margin-left: 12px;
}
&:last-child {
margin-right: 12px;
}
.quick-access-item-bg {
position: absolute;
top: 0;
left: 0;
z-index: 0;
border-radius: 8px;
width: 128px;
height: 56px;
}
.quick-access-item-title {
display: flex;
align-items: center;
z-index: 1;
.quick-access-item-icon {
width: 16px;
height: 16px;
margin-right: 4px;
}
text {
font-weight: 500;
font-size: $uni-font-size-sm;
color: #201f32;
line-height: 16px;
}
}
.quick-access-item-content {
z-index: 1;
margin-top: 4px;
font-size: 10px;
color: #678cad;
line-height: 18px;
}
}
gap: 0 9px;
}
.item {
border: 1px solid #fff;
background-color: rgba(255, 255, 255, 0.5);
padding: 4px 8px;
}
.icon {
width: 20px;
height: 20px;
margin-right: 2px;
}

4
src/static/scss/margin.scss
View File

@@ -18,3 +18,7 @@
.mb-12 {
margin-bottom: 12px;
}
.ml-20 {
margin-left: 20px;
}

8
src/static/scss/padding.scss
View File

@@ -3,6 +3,14 @@
padding: 8px;
}
.pt-8 {
padding-top: 8px;
}
.pb-8 {
padding-bottom: 8px;
}
.p-12 {
padding: 12px;
}

4
src/static/scss/rounded.scss
View File

@@ -19,6 +19,10 @@
border-radius: 20px;
}
.rounded-50 {
border-radius: 50px;
}
.rounded-full {
border-radius: 50%;
}