Compare commits
No commits in common. "00ab94b840a37028810e51cd90b0c121510909ce" and "892fccb4d81b0eed7cad9878ae4975a9c33de3df" have entirely different histories.
00ab94b840
...
892fccb4d8
5
App.vue
5
App.vue
@ -47,11 +47,6 @@ body,
|
|||||||
width: 100vw;
|
width: 100vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*每个页面公共css */
|
|
||||||
::-webkit-scrollbar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mb12 {
|
.mb12 {
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,10 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="container">
|
<view class="container">
|
||||||
<view class="chat-ai">
|
<view class="chat-ai">
|
||||||
<view class="loading-container" >
|
|
||||||
<image v-if="isLoading" class="loading-img" src="/static/msg_loading.svg" />
|
|
||||||
<ChatMarkdown :key="textKey" :text="processedText" />
|
<ChatMarkdown :key="textKey" :text="processedText" />
|
||||||
</view>
|
|
||||||
<slot name="content"></slot>
|
<slot name="content"></slot>
|
||||||
</view>
|
</view>
|
||||||
<slot name="footer"></slot>
|
<slot name="footer"></slot>
|
||||||
@ -20,10 +17,6 @@ const props = defineProps({
|
|||||||
type: String,
|
type: String,
|
||||||
default: "",
|
default: "",
|
||||||
},
|
},
|
||||||
isLoading: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// 用于强制重新渲染的key
|
// 用于强制重新渲染的key
|
||||||
@ -69,7 +62,7 @@ watch(
|
|||||||
margin: 6px 12px;
|
margin: 6px 12px;
|
||||||
padding: 0 12px;
|
padding: 0 12px;
|
||||||
|
|
||||||
min-width: 90px;
|
min-width: 80px;
|
||||||
background: rgba(255, 255, 255, 0.4);
|
background: rgba(255, 255, 255, 0.4);
|
||||||
box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.1);
|
box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.1);
|
||||||
border-radius: 4px 20px 20px 20px;
|
border-radius: 4px 20px 20px 20px;
|
||||||
@ -77,17 +70,4 @@ watch(
|
|||||||
border-color: #ffffff;
|
border-color: #ffffff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.loading-container {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
padding: 4px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loading-img {
|
|
||||||
margin-left: -4px;
|
|
||||||
width: 32px;
|
|
||||||
height: 32px;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
@ -3,10 +3,7 @@
|
|||||||
<view v-if="!visibleWaveBtn" class="area-input">
|
<view v-if="!visibleWaveBtn" class="area-input">
|
||||||
<!-- 语音/键盘切换 -->
|
<!-- 语音/键盘切换 -->
|
||||||
<view class="input-container-voice" @click="toggleVoiceMode">
|
<view class="input-container-voice" @click="toggleVoiceMode">
|
||||||
<image
|
<image v-if="!isVoiceMode" src="/static/input_voice_icon.png"></image>
|
||||||
v-if="!isVoiceMode"
|
|
||||||
src="/static/input_voice_icon.png"
|
|
||||||
></image>
|
|
||||||
<image v-else src="/static/input_keyboard_icon.png"></image>
|
<image v-else src="/static/input_keyboard_icon.png"></image>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
@ -15,9 +12,9 @@
|
|||||||
<textarea
|
<textarea
|
||||||
ref="textareaRef"
|
ref="textareaRef"
|
||||||
v-if="!isVoiceMode"
|
v-if="!isVoiceMode"
|
||||||
class="textarea"
|
:class="['textarea', ios ? 'ios' : 'android']"
|
||||||
type="text"
|
type="text"
|
||||||
cursor-spacing="20"
|
cursor-spacing="65"
|
||||||
confirm-type="send"
|
confirm-type="send"
|
||||||
v-model="inputMessage"
|
v-model="inputMessage"
|
||||||
auto-height
|
auto-height
|
||||||
@ -93,6 +90,11 @@ const keyboardHeight = ref(0);
|
|||||||
const isVoiceMode = ref(false);
|
const isVoiceMode = ref(false);
|
||||||
const visibleWaveBtn = ref(false);
|
const visibleWaveBtn = ref(false);
|
||||||
|
|
||||||
|
// 判断当前平台是否为iOS
|
||||||
|
const ios = computed(() => {
|
||||||
|
return uni.getSystemInfoSync().platform === "ios";
|
||||||
|
});
|
||||||
|
|
||||||
// 保持和父组件同步
|
// 保持和父组件同步
|
||||||
watch(
|
watch(
|
||||||
() => props.modelValue,
|
() => props.modelValue,
|
||||||
@ -235,7 +237,7 @@ defineExpose({ focusInput });
|
|||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.area-input {
|
.area-input {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: flex-end;
|
||||||
border-radius: 22px;
|
border-radius: 22px;
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
box-shadow: 0px 0px 20px 0px rgba(52, 25, 204, 0.05);
|
box-shadow: 0px 0px 20px 0px rgba(52, 25, 204, 0.05);
|
||||||
@ -246,7 +248,6 @@ defineExpose({ focusInput });
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-self: flex-end;
|
|
||||||
width: 44px;
|
width: 44px;
|
||||||
height: 44px;
|
height: 44px;
|
||||||
|
|
||||||
@ -279,7 +280,6 @@ defineExpose({ focusInput });
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-self: flex-end;
|
|
||||||
width: 44px;
|
width: 44px;
|
||||||
height: 44px;
|
height: 44px;
|
||||||
|
|
||||||
@ -302,10 +302,17 @@ defineExpose({ focusInput });
|
|||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-height: 92px;
|
max-height: 92px;
|
||||||
min-height: 22px;
|
min-height: 44px;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
line-height: 22px;
|
line-height: normal;
|
||||||
margin: 6px 0;
|
|
||||||
|
&.android {
|
||||||
|
padding: 12px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.ios {
|
||||||
|
padding: 6px 0;
|
||||||
|
}
|
||||||
|
|
||||||
&::placeholder {
|
&::placeholder {
|
||||||
color: #cccccc;
|
color: #cccccc;
|
||||||
|
|||||||
@ -38,30 +38,23 @@
|
|||||||
<template v-if="item.msgType === MessageRole.AI">
|
<template v-if="item.msgType === MessageRole.AI">
|
||||||
<ChatCardAI
|
<ChatCardAI
|
||||||
class="message-item-ai"
|
class="message-item-ai"
|
||||||
:key="`ai-${item.msgId}-${
|
:key="`ai-${item.msgId}-${item.msg ? item.msg.length : 0}`"
|
||||||
item.msg ? item.msg.length : 0
|
|
||||||
}`"
|
|
||||||
:text="item.msg || ''"
|
:text="item.msg || ''"
|
||||||
,
|
|
||||||
:isLoading="item.isLoading"
|
|
||||||
>
|
>
|
||||||
<template #content v-if="item.toolCall">
|
<template #content v-if="item.toolCall">
|
||||||
<QuickBookingComponent
|
<QuickBookingComponent
|
||||||
v-if="
|
v-if="
|
||||||
item.toolCall.componentName ===
|
item.toolCall.componentName === CompName.quickBookingCard
|
||||||
CompName.quickBookingCard
|
|
||||||
"
|
"
|
||||||
/>
|
/>
|
||||||
<DiscoveryCardComponent
|
<DiscoveryCardComponent
|
||||||
v-else-if="
|
v-else-if="
|
||||||
item.toolCall.componentName ===
|
item.toolCall.componentName === CompName.discoveryCard
|
||||||
CompName.discoveryCard
|
|
||||||
"
|
"
|
||||||
/>
|
/>
|
||||||
<CreateServiceOrder
|
<CreateServiceOrder
|
||||||
v-else-if="
|
v-else-if="
|
||||||
item.toolCall.componentName ===
|
item.toolCall.componentName === CompName.createWorkOrderCard
|
||||||
CompName.createWorkOrderCard
|
|
||||||
"
|
"
|
||||||
/>
|
/>
|
||||||
<DetailCardCompontent
|
<DetailCardCompontent
|
||||||
@ -84,18 +77,12 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template v-else-if="item.msgType === MessageRole.ME">
|
<template v-else-if="item.msgType === MessageRole.ME">
|
||||||
<ChatCardMine
|
<ChatCardMine class="message-item-mine" :text="item.msg">
|
||||||
class="message-item-mine"
|
|
||||||
:text="item.msg"
|
|
||||||
>
|
|
||||||
</ChatCardMine>
|
</ChatCardMine>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template v-else>
|
<template v-else>
|
||||||
<ChatCardOther
|
<ChatCardOther class="message-item-other" :text="item.msg">
|
||||||
class="message-item-other"
|
|
||||||
:text="item.msg"
|
|
||||||
>
|
|
||||||
<ChatMoreTips
|
<ChatMoreTips
|
||||||
@replySent="handleReply"
|
@replySent="handleReply"
|
||||||
:itemList="mainPageDataModel.guideWords"
|
:itemList="mainPageDataModel.guideWords"
|
||||||
@ -107,12 +94,8 @@
|
|||||||
/>
|
/>
|
||||||
|
|
||||||
<RecommendPostsComponent
|
<RecommendPostsComponent
|
||||||
v-if="
|
v-if="mainPageDataModel.recommendTheme.length > 0"
|
||||||
mainPageDataModel.recommendTheme.length > 0
|
:recommendThemeList="mainPageDataModel.recommendTheme"
|
||||||
"
|
|
||||||
:recommendThemeList="
|
|
||||||
mainPageDataModel.recommendTheme
|
|
||||||
"
|
|
||||||
/>
|
/>
|
||||||
</ChatCardOther>
|
</ChatCardOther>
|
||||||
</template>
|
</template>
|
||||||
@ -221,7 +204,6 @@ let loadingTimer = null;
|
|||||||
const emits = defineEmits(["openDrawer"]);
|
const emits = defineEmits(["openDrawer"]);
|
||||||
const openDrawer = () => emits("openDrawer");
|
const openDrawer = () => emits("openDrawer");
|
||||||
|
|
||||||
/// =============事件函数↓================
|
|
||||||
const handleTouchEnd = () => {
|
const handleTouchEnd = () => {
|
||||||
clearTimeout(timer.value);
|
clearTimeout(timer.value);
|
||||||
timer.value = setTimeout(() => {
|
timer.value = setTimeout(() => {
|
||||||
@ -311,32 +293,6 @@ const sendMessageAction = (inputText) => {
|
|||||||
setTimeoutScrollToBottom();
|
setTimeoutScrollToBottom();
|
||||||
};
|
};
|
||||||
|
|
||||||
/// 添加通知
|
|
||||||
const addNoticeListener = () => {
|
|
||||||
uni.$on(SCROLL_TO_BOTTOM, () => {
|
|
||||||
setTimeout(() => {
|
|
||||||
scrollToBottom();
|
|
||||||
}, 200);
|
|
||||||
});
|
|
||||||
|
|
||||||
uni.$on(RECOMMEND_POSTS_TITLE, (value) => {
|
|
||||||
console.log("RECOMMEND_POSTS_TITLE:", value);
|
|
||||||
if (value && value.length > 0) {
|
|
||||||
handleReply(value);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
uni.$on(SEND_COMMAND_TEXT, (value) => {
|
|
||||||
console.log("SEND_COMMAND_TEXT:", value);
|
|
||||||
if (value && value.length > 0) {
|
|
||||||
commonType = "Command.quickBooking";
|
|
||||||
sendMessage(value, true);
|
|
||||||
setTimeoutScrollToBottom();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
/// =============生命周期函数↓================
|
|
||||||
onLoad(() => {
|
onLoad(() => {
|
||||||
uni.getSystemInfo({
|
uni.getSystemInfo({
|
||||||
success: (res) => {
|
success: (res) => {
|
||||||
@ -358,38 +314,6 @@ onMounted(async () => {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
/// =============页面配置↓================
|
|
||||||
// 获取最近一次的会话id
|
|
||||||
const loadRecentConversation = async () => {
|
|
||||||
const res = await recentConversation();
|
|
||||||
if (res.code === 0) {
|
|
||||||
conversationId.value = res.data.conversationId;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 加载历史消息的数据
|
|
||||||
let historyCurrentPageNum = 1;
|
|
||||||
const loadConversationMsgList = async () => {
|
|
||||||
const args = {
|
|
||||||
pageNum: historyCurrentPageNum++,
|
|
||||||
pageSize: 10,
|
|
||||||
conversationId: conversationId.value,
|
|
||||||
};
|
|
||||||
const res = await conversationMsgList(args);
|
|
||||||
};
|
|
||||||
|
|
||||||
// 获取首页数据
|
|
||||||
const getMainPageData = async () => {
|
|
||||||
const res = await mainPageData(sceneId.value);
|
|
||||||
if (res.code === 0) {
|
|
||||||
mainPageDataModel.value = res.data;
|
|
||||||
agentId.value = res.data.agentId;
|
|
||||||
initData();
|
|
||||||
setTimeoutScrollToBottom();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
/// =============对话↓================
|
|
||||||
// 初始化WebSocket
|
// 初始化WebSocket
|
||||||
const initWebSocket = () => {
|
const initWebSocket = () => {
|
||||||
// 清理旧实例
|
// 清理旧实例
|
||||||
@ -455,12 +379,13 @@ const handleWebSocketMessage = (data) => {
|
|||||||
clearInterval(loadingTimer);
|
clearInterval(loadingTimer);
|
||||||
loadingTimer = null;
|
loadingTimer = null;
|
||||||
}
|
}
|
||||||
|
|
||||||
const aiMsgIndex = chatMsgList.value.length - 1;
|
const aiMsgIndex = chatMsgList.value.length - 1;
|
||||||
if (!chatMsgList.value[aiMsgIndex] || aiMsgIndex < 0) {
|
if (!chatMsgList.value[aiMsgIndex] || aiMsgIndex < 0) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//console.log("处理WebSocket消息:", data);
|
||||||
|
|
||||||
// 确保消息内容是字符串类型
|
// 确保消息内容是字符串类型
|
||||||
if (data.content && typeof data.content !== "string") {
|
if (data.content && typeof data.content !== "string") {
|
||||||
data.content = String(data.content);
|
data.content = String(data.content);
|
||||||
@ -492,12 +417,11 @@ const handleWebSocketMessage = (data) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const msg = chatMsgList.value[aiMsgIndex].msg;
|
const msg = chatMsgList.value[aiMsgIndex].msg;
|
||||||
console.log("全量消息内容:", msg);
|
console.log('全量消息内容:', msg)
|
||||||
if (!msg || msg === "加载中." || msg.startsWith("加载中")) {
|
if (!msg || msg === '加载中.' || msg.startsWith('加载中')) {
|
||||||
chatMsgList.value[aiMsgIndex].msg = "未获取到内容,请重试";
|
chatMsgList.value[aiMsgIndex].msg = '未获取到内容,请重试';
|
||||||
chatMsgList.value[aiMsgIndex].isLoading = false;
|
|
||||||
if(data.toolCall) {
|
if(data.toolCall) {
|
||||||
chatMsgList.value[aiMsgIndex].msg = "";
|
chatMsgList.value[aiMsgIndex].msg = '';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -547,7 +471,6 @@ const initTypewriterManager = () => {
|
|||||||
onContentUpdate: (content) => {
|
onContentUpdate: (content) => {
|
||||||
const aiMsgIndex = chatMsgList.value.length - 1;
|
const aiMsgIndex = chatMsgList.value.length - 1;
|
||||||
if (aiMsgIndex >= 0 && chatMsgList.value[aiMsgIndex]) {
|
if (aiMsgIndex >= 0 && chatMsgList.value[aiMsgIndex]) {
|
||||||
chatMsgList.value[aiMsgIndex].isLoading = false;
|
|
||||||
chatMsgList.value[aiMsgIndex].msg = content;
|
chatMsgList.value[aiMsgIndex].msg = content;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@ -555,7 +478,6 @@ const initTypewriterManager = () => {
|
|||||||
onTypingComplete: (finalContent) => {
|
onTypingComplete: (finalContent) => {
|
||||||
const aiMsgIndex = chatMsgList.value.length - 1;
|
const aiMsgIndex = chatMsgList.value.length - 1;
|
||||||
if (aiMsgIndex >= 0 && chatMsgList.value[aiMsgIndex]) {
|
if (aiMsgIndex >= 0 && chatMsgList.value[aiMsgIndex]) {
|
||||||
chatMsgList.value[aiMsgIndex].isLoading = false;
|
|
||||||
chatMsgList.value[aiMsgIndex].msg = finalContent;
|
chatMsgList.value[aiMsgIndex].msg = finalContent;
|
||||||
}
|
}
|
||||||
// 打字完成后最后一次滚动到底部
|
// 打字完成后最后一次滚动到底部
|
||||||
@ -571,6 +493,60 @@ const resetMessageState = () => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const addNoticeListener = () => {
|
||||||
|
uni.$on(SCROLL_TO_BOTTOM, () => {
|
||||||
|
setTimeout(() => {
|
||||||
|
scrollToBottom();
|
||||||
|
}, 200);
|
||||||
|
});
|
||||||
|
|
||||||
|
uni.$on(RECOMMEND_POSTS_TITLE, (value) => {
|
||||||
|
console.log("RECOMMEND_POSTS_TITLE:", value);
|
||||||
|
if (value && value.length > 0) {
|
||||||
|
handleReply(value);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
uni.$on(SEND_COMMAND_TEXT, (value) => {
|
||||||
|
console.log("SEND_COMMAND_TEXT:", value);
|
||||||
|
if (value && value.length > 0) {
|
||||||
|
commonType = "Command.quickBooking";
|
||||||
|
sendMessage(value, true);
|
||||||
|
setTimeoutScrollToBottom();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 获取最近一次的会话id
|
||||||
|
const loadRecentConversation = async () => {
|
||||||
|
const res = await recentConversation();
|
||||||
|
if (res.code === 0) {
|
||||||
|
conversationId.value = res.data.conversationId;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 加载历史消息的数据
|
||||||
|
let historyCurrentPageNum = 1;
|
||||||
|
const loadConversationMsgList = async () => {
|
||||||
|
const args = {
|
||||||
|
pageNum: historyCurrentPageNum++,
|
||||||
|
pageSize: 10,
|
||||||
|
conversationId: conversationId.value,
|
||||||
|
};
|
||||||
|
const res = await conversationMsgList(args);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 获取首页数据
|
||||||
|
const getMainPageData = async () => {
|
||||||
|
const res = await mainPageData(sceneId.value);
|
||||||
|
if (res.code === 0) {
|
||||||
|
mainPageDataModel.value = res.data;
|
||||||
|
agentId.value = res.data.agentId;
|
||||||
|
initData();
|
||||||
|
setTimeoutScrollToBottom();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
// 初始化数据 首次数据加载的时候
|
// 初始化数据 首次数据加载的时候
|
||||||
const initData = () => {
|
const initData = () => {
|
||||||
const msg = {
|
const msg = {
|
||||||
@ -680,11 +656,6 @@ const stopRequest = () => {
|
|||||||
// 发送中断消息给服务器 (messageType=2)
|
// 发送中断消息给服务器 (messageType=2)
|
||||||
sendWebSocketMessage(2, "stop_request", { silent: true });
|
sendWebSocketMessage(2, "stop_request", { silent: true });
|
||||||
|
|
||||||
if (loadingTimer) {
|
|
||||||
clearInterval(loadingTimer);
|
|
||||||
loadingTimer = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 停止打字机效果
|
// 停止打字机效果
|
||||||
if (typewriterManager) {
|
if (typewriterManager) {
|
||||||
typewriterManager.stopTypewriter();
|
typewriterManager.stopTypewriter();
|
||||||
|
|||||||
@ -50,6 +50,12 @@ const sendReply = (text) => {
|
|||||||
-webkit-overflow-scrolling: touch;
|
-webkit-overflow-scrolling: touch;
|
||||||
padding-bottom: 12px;
|
padding-bottom: 12px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
/* 隐藏滚动条 */
|
||||||
|
scrollbar-width: none;
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.more-tips-item {
|
.more-tips-item {
|
||||||
|
|||||||
@ -1,71 +1,61 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="quick-access">
|
<view class="quick-access">
|
||||||
<view class="quick-access-scroll">
|
<view class="quick-access-scroll">
|
||||||
<view
|
<view class="quick-access-item" v-for="(item, index) in itemList" :key="index" @click="sendReply(item)">
|
||||||
class="quick-access-item"
|
<image class="quick-access-item-bg" src="/static/quick/quick_icon_bg.png" mode="aspectFill"></image>
|
||||||
v-for="(item, index) in itemList"
|
|
||||||
:key="index"
|
|
||||||
@click="sendReply(item)"
|
|
||||||
>
|
|
||||||
<image
|
|
||||||
class="quick-access-item-bg"
|
|
||||||
src="/static/quick/quick_icon_bg.png"
|
|
||||||
mode="aspectFill"
|
|
||||||
></image>
|
|
||||||
<view class="quick-access-item-title">
|
<view class="quick-access-item-title">
|
||||||
<image :src="item.icon"></image>
|
<image :src="item.icon"></image>
|
||||||
<text>{{ item.title }}</text>
|
<text>{{ item.title }}</text>
|
||||||
</view>
|
</view>
|
||||||
<text class="quick-access-item-content">{{
|
<text class="quick-access-item-content">{{ item.content }}</text>
|
||||||
item.content
|
|
||||||
}}</text>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { onMounted, ref } from "vue";
|
import { onMounted, ref } from 'vue';
|
||||||
const itemList = ref([]);
|
const itemList = ref([])
|
||||||
|
|
||||||
const emits = defineEmits(["replySent"]);
|
const emits = defineEmits(['replySent']);
|
||||||
|
|
||||||
const sendReply = (item) => {
|
const sendReply = (item) => {
|
||||||
emits("replySent", item); // 向父组件传递数据
|
emits('replySent', item); // 向父组件传递数据
|
||||||
};
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
initData();
|
initData()
|
||||||
});
|
})
|
||||||
|
|
||||||
const initData = () => {
|
const initData = () => {
|
||||||
itemList.value = [
|
itemList.value = [
|
||||||
{
|
{
|
||||||
icon: "/static/quick/quick_icon_yuding.png",
|
icon: '/static/quick/quick_icon_yuding.png',
|
||||||
title: "快速预定",
|
title: '快速预定',
|
||||||
content: "预定门票、房间、餐食",
|
content: '预定门票、房间、餐食',
|
||||||
type: "Command.quickBooking",
|
type: 'Command.quickBooking'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: "/static/quick/quick_icon_find.png",
|
icon: '/static/quick/quick_icon_find.png',
|
||||||
title: "探索发现",
|
title: '探索发现',
|
||||||
content: "探索玩法、出片佳地",
|
content: '探索玩法、出片佳地',
|
||||||
type: "Command.discovery",
|
type: 'Command.discovery'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: "/static/quick/quick_icon_order.png",
|
icon: '/static/quick/quick_icon_order.png',
|
||||||
title: "订单/工单",
|
title: '订单/工单',
|
||||||
content: "我的订单/工单",
|
content: '我的订单/工单',
|
||||||
type: "MyOrder",
|
type: 'MyOrder'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: "/static/quick/quick_icon_call.png",
|
icon: '/static/quick/quick_icon_call.png',
|
||||||
title: "呼叫服务",
|
title: '呼叫服务',
|
||||||
content: "加水、客房服务等",
|
content: '加水、客房服务等',
|
||||||
type: "Command.createWorkOrder",
|
type: 'Command.createWorkOrder'
|
||||||
},
|
}
|
||||||
];
|
]
|
||||||
};
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@ -78,6 +68,12 @@ const initData = () => {
|
|||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
-webkit-overflow-scrolling: touch;
|
-webkit-overflow-scrolling: touch;
|
||||||
|
|
||||||
|
/* 隐藏滚动条 */
|
||||||
|
scrollbar-width: none;
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.quick-access-item {
|
.quick-access-item {
|
||||||
@ -124,7 +120,7 @@ const initData = () => {
|
|||||||
font-family: PingFang SC, PingFang SC;
|
font-family: PingFang SC, PingFang SC;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #201f32;
|
color: #201F32;
|
||||||
line-height: 16px;
|
line-height: 16px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -135,9 +131,10 @@ const initData = () => {
|
|||||||
font-family: PingFang SC, PingFang SC;
|
font-family: PingFang SC, PingFang SC;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
color: #678cad;
|
color: #678CAD;
|
||||||
line-height: 18px;
|
line-height: 18px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -2,48 +2,42 @@
|
|||||||
<view class="top-bg-content">
|
<view class="top-bg-content">
|
||||||
<view class="top-item" >
|
<view class="top-item" >
|
||||||
<!-- :style="backgroundStyle" -->
|
<!-- :style="backgroundStyle" -->
|
||||||
<image
|
<image class="top-item-left" :src="initPageImages.welcomeImageUrl"></image>
|
||||||
class="top-item-left"
|
<image class="top-item-right" :src="initPageImages.logoImageUrl"></image>
|
||||||
:src="initPageImages.welcomeImageUrl"
|
|
||||||
></image>
|
|
||||||
<image
|
|
||||||
class="top-item-right"
|
|
||||||
:src="initPageImages.logoImageUrl"
|
|
||||||
></image>
|
|
||||||
</view>
|
</view>
|
||||||
<ChatCardAI v-if="welcomeContent.length" :text="welcomeContent" />
|
<ChatCardAI v-if="welcomeContent.length" :text='welcomeContent'/>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { defineProps, computed, ref } from "vue";
|
import { defineProps, computed, ref } from "vue";
|
||||||
import ChatCardAI from "./ChatCardAI.vue";
|
import ChatCardAI from './ChatCardAI.vue';
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
initPageImages: {
|
initPageImages: {
|
||||||
type: Object,
|
type: Object,
|
||||||
default: {
|
default: {
|
||||||
backgroundImageUrl: "",
|
backgroundImageUrl: '',
|
||||||
logoImageUrl: "",
|
logoImageUrl: '',
|
||||||
welcomeImageUrl: "",
|
welcomeImageUrl: ''
|
||||||
},
|
}
|
||||||
},
|
},
|
||||||
welcomeContent: {
|
welcomeContent: {
|
||||||
type: String,
|
type: String,
|
||||||
default:
|
default: '查信息、预定下单、探索玩法、呼叫服务、我通通可以满足,快试试问我问题吧!'
|
||||||
"查信息、预定下单、探索玩法、呼叫服务、我通通可以满足,快试试问我问题吧!",
|
}
|
||||||
},
|
})
|
||||||
});
|
|
||||||
|
|
||||||
// 计算背景样式
|
// 计算背景样式
|
||||||
const backgroundStyle = computed(() => {
|
const backgroundStyle = computed(() => {
|
||||||
return {
|
return {
|
||||||
backgroundImage: `url(${props.initPageImages.backgroundImageUrl})`,
|
backgroundImage: `url(${props.initPageImages.backgroundImageUrl})`,
|
||||||
backgroundSize: "cover",
|
backgroundSize: 'cover',
|
||||||
backgroundPosition: "center",
|
backgroundPosition: 'center',
|
||||||
backgroundRepeat: "no-repeat",
|
backgroundRepeat: 'no-repeat'
|
||||||
};
|
}
|
||||||
});
|
})
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@ -60,7 +54,7 @@ const backgroundStyle = computed(() => {
|
|||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 0 32px;
|
padding: 0 32px;
|
||||||
margin-bottom: -6px;
|
margin-bottom: -8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.top-item-left {
|
.top-item-left {
|
||||||
@ -71,5 +65,6 @@ const backgroundStyle = computed(() => {
|
|||||||
.top-item-right {
|
.top-item-right {
|
||||||
width: 130px;
|
width: 130px;
|
||||||
height: 130px;
|
height: 130px;
|
||||||
|
margin: -12px 0;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -49,6 +49,14 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
|
.area-msg-list-content {
|
||||||
|
/* 隐藏滚动条 */
|
||||||
|
scrollbar-width: none;
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.message-item-ai {
|
.message-item-ai {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
@ -133,6 +141,15 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
width: 0 !important;
|
||||||
|
height: 0 !important;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
background: transparent;
|
||||||
|
color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
// 打字机光标闪烁动画
|
// 打字机光标闪烁动画
|
||||||
.typing-cursor {
|
.typing-cursor {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|||||||
@ -2,46 +2,24 @@
|
|||||||
<view class="container">
|
<view class="container">
|
||||||
<ModuleTitle :title="commodityDTO.title" />
|
<ModuleTitle :title="commodityDTO.title" />
|
||||||
<view class="container-scroll">
|
<view class="container-scroll">
|
||||||
<view
|
<view v-for="(item, index) in commodityDTO.commodityList" :key="`${item.commodityId}-${index}`">
|
||||||
v-for="(item, index) in commodityDTO.commodityList"
|
|
||||||
:key="`${item.commodityId}-${index}`"
|
|
||||||
>
|
|
||||||
<view class="mk-card-item" @click="placeOrderHandle(item)">
|
<view class="mk-card-item" @click="placeOrderHandle(item)">
|
||||||
<!-- <view class="card-badge">超值推荐</view> -->
|
<!-- <view class="card-badge">超值推荐</view> -->
|
||||||
<image
|
<image class="card-img" :src="item.commodityIcon" mode="aspectFill" />
|
||||||
class="card-img"
|
|
||||||
:src="item.commodityIcon"
|
|
||||||
mode="aspectFill"
|
|
||||||
/>
|
|
||||||
<view class="card-content">
|
<view class="card-content">
|
||||||
<view class="card-title-column">
|
<view class="card-title-column">
|
||||||
<text class="card-title">{{
|
<text class="card-title">{{ item.commodityName }}</text>
|
||||||
item.commodityName
|
<view class="card-tags" v-for="(tag) in item.commodityTradeRuleList" :key="tag">
|
||||||
}}</text>
|
|
||||||
<view
|
|
||||||
class="card-tags"
|
|
||||||
v-for="tag in item.commodityTradeRuleList"
|
|
||||||
:key="tag"
|
|
||||||
>
|
|
||||||
<text class="card-tag">{{ tag }}</text>
|
<text class="card-tag">{{ tag }}</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<template
|
<template v-for="(serviceItem, index) in item.commodityServices" :key="serviceItem.serviceTitle">
|
||||||
v-for="(
|
<view v-if="index < 3" class="card-desc">· {{ serviceItem.serviceTitle }}</view>
|
||||||
serviceItem, index
|
|
||||||
) in item.commodityServices"
|
|
||||||
:key="serviceItem.serviceTitle"
|
|
||||||
>
|
|
||||||
<view v-if="index < 3" class="card-desc"
|
|
||||||
>· {{ serviceItem.serviceTitle }}</view
|
|
||||||
>
|
|
||||||
</template>
|
</template>
|
||||||
<view class="card-bottom-row">
|
<view class="card-bottom-row">
|
||||||
<view class="card-price-row">
|
<view class="card-price-row">
|
||||||
<text class="card-price-fu">¥</text>
|
<text class="card-price-fu">¥</text>
|
||||||
<text class="card-price">{{
|
<text class="card-price">{{ item.commodityPrice }}</text>
|
||||||
item.commodityPrice
|
|
||||||
}}</text>
|
|
||||||
<text class="card-unit">/人</text>
|
<text class="card-unit">/人</text>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
@ -55,25 +33,27 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import ModuleTitle from "@/components/ModuleTitle/index.vue";
|
import ModuleTitle from '@/components/ModuleTitle/index.vue'
|
||||||
import { defineProps } from "vue";
|
import { defineProps } from 'vue'
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
commodityDTO: {
|
commodityDTO: {
|
||||||
type: Object,
|
type: Object,
|
||||||
default: {},
|
default: {}
|
||||||
},
|
}
|
||||||
});
|
})
|
||||||
|
|
||||||
/// 去下单
|
/// 去下单
|
||||||
const placeOrderHandle = (item) => {
|
const placeOrderHandle = (item) => {
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url: `/pages/goods/index?commodityId=${item.commodityId}`,
|
url: `/pages/goods/index?commodityId=${item.commodityId}`,
|
||||||
});
|
})
|
||||||
};
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.container {
|
.container {
|
||||||
|
|
||||||
.container-scroll {
|
.container-scroll {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
@ -81,6 +61,12 @@ const placeOrderHandle = (item) => {
|
|||||||
overflow-y: hidden;
|
overflow-y: hidden;
|
||||||
margin: 4px 0;
|
margin: 4px 0;
|
||||||
|
|
||||||
|
/* 隐藏滚动条 */
|
||||||
|
scrollbar-width: none;
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
.mk-card-item {
|
.mk-card-item {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
@ -209,6 +195,7 @@ const placeOrderHandle = (item) => {
|
|||||||
line-height: 32px;
|
line-height: 32px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -2,45 +2,23 @@
|
|||||||
<view class="container">
|
<view class="container">
|
||||||
<ModuleTitle title="相关商品" />
|
<ModuleTitle title="相关商品" />
|
||||||
<view class="container-scroll">
|
<view class="container-scroll">
|
||||||
<view
|
<view v-for="(item, index) in commodityList" :key="`${item.commodityId}-${index}`">
|
||||||
v-for="(item, index) in commodityList"
|
|
||||||
:key="`${item.commodityId}-${index}`"
|
|
||||||
>
|
|
||||||
<view class="mk-card-item" @click="placeOrderHandle(item)">
|
<view class="mk-card-item" @click="placeOrderHandle(item)">
|
||||||
<image
|
<image class="card-img" :src="item.commodityPhoto" mode="aspectFill" />
|
||||||
class="card-img"
|
|
||||||
:src="item.commodityPhoto"
|
|
||||||
mode="aspectFill"
|
|
||||||
/>
|
|
||||||
<view class="card-content">
|
<view class="card-content">
|
||||||
<view class="card-title-column">
|
<view class="card-title-column">
|
||||||
<text class="card-title">{{
|
<text class="card-title">{{ item.commodityName }}</text>
|
||||||
item.commodityName
|
<view class="card-tags" v-for="(tag) in item.commodityTradeRuleList" :key="tag">
|
||||||
}}</text>
|
|
||||||
<view
|
|
||||||
class="card-tags"
|
|
||||||
v-for="tag in item.commodityTradeRuleList"
|
|
||||||
:key="tag"
|
|
||||||
>
|
|
||||||
<text class="card-tag">{{ tag }}</text>
|
<text class="card-tag">{{ tag }}</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<template
|
<template v-for="(serviceItem, index) in item.commodityServices" :key="serviceItem.serviceTitle">
|
||||||
v-for="(
|
<view v-if="index < 3" class="card-desc">· {{ serviceItem.serviceTitle }}</view>
|
||||||
serviceItem, index
|
|
||||||
) in item.commodityServices"
|
|
||||||
:key="serviceItem.serviceTitle"
|
|
||||||
>
|
|
||||||
<view v-if="index < 3" class="card-desc"
|
|
||||||
>· {{ serviceItem.serviceTitle }}</view
|
|
||||||
>
|
|
||||||
</template>
|
</template>
|
||||||
<view class="card-bottom-row">
|
<view class="card-bottom-row">
|
||||||
<view class="card-price-row">
|
<view class="card-price-row">
|
||||||
<text class="card-price-fu">¥</text>
|
<text class="card-price-fu">¥</text>
|
||||||
<text class="card-price">{{
|
<text class="card-price">{{ item.specificationPrice }}</text>
|
||||||
item.specificationPrice
|
|
||||||
}}</text>
|
|
||||||
<text class="card-unit">/人</text>
|
<text class="card-unit">/人</text>
|
||||||
</view>
|
</view>
|
||||||
<text class="card-btn">下单</text>
|
<text class="card-btn">下单</text>
|
||||||
@ -53,21 +31,22 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import ModuleTitle from "@/components/ModuleTitle/index.vue";
|
import ModuleTitle from '@/components/ModuleTitle/index.vue'
|
||||||
import { defineProps } from "vue";
|
import { defineProps } from 'vue'
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
commodityList: {
|
commodityList: {
|
||||||
type: Array,
|
type: Array,
|
||||||
default: [],
|
default: []
|
||||||
},
|
}
|
||||||
});
|
})
|
||||||
|
|
||||||
/// 去下单
|
/// 去下单
|
||||||
const placeOrderHandle = (item) => {
|
const placeOrderHandle = (item) => {
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url: `/pages/goods/index?commodityId=${item.commodityId}`,
|
url: `/pages/goods/index?commodityId=${item.commodityId}`,
|
||||||
});
|
})
|
||||||
};
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@ -81,6 +60,12 @@ const placeOrderHandle = (item) => {
|
|||||||
overflow-y: hidden;
|
overflow-y: hidden;
|
||||||
margin: 4px 0;
|
margin: 4px 0;
|
||||||
|
|
||||||
|
/* 隐藏滚动条 */
|
||||||
|
scrollbar-width: none;
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
.mk-card-item {
|
.mk-card-item {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
@ -209,6 +194,7 @@ const placeOrderHandle = (item) => {
|
|||||||
line-height: 32px;
|
line-height: 32px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -2,10 +2,7 @@
|
|||||||
<view class="container">
|
<view class="container">
|
||||||
<ModuleTitle :title="recommendTheme.themeName" />
|
<ModuleTitle :title="recommendTheme.themeName" />
|
||||||
<view class="container-scroll">
|
<view class="container-scroll">
|
||||||
<view
|
<view v-for="(item, index) in recommendTheme.recommendPostsList" :key="index">
|
||||||
v-for="(item, index) in recommendTheme.recommendPostsList"
|
|
||||||
:key="index"
|
|
||||||
>
|
|
||||||
<view class="mk-card-item" @click="sendReply(item)">
|
<view class="mk-card-item" @click="sendReply(item)">
|
||||||
<image :src="item.coverPhoto" mode="widthFix"></image>
|
<image :src="item.coverPhoto" mode="widthFix"></image>
|
||||||
<text>{{ item.topic }}</text>
|
<text>{{ item.topic }}</text>
|
||||||
@ -16,30 +13,38 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import ModuleTitle from "@/components/ModuleTitle/index.vue";
|
import ModuleTitle from '@/components/ModuleTitle/index.vue'
|
||||||
import { RECOMMEND_POSTS_TITLE } from "@/constant/constant";
|
import { RECOMMEND_POSTS_TITLE } from '@/constant/constant'
|
||||||
import { defineProps } from "vue";
|
import { defineProps } from 'vue'
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
recommendTheme: {
|
recommendTheme: {
|
||||||
type: Object,
|
type: Object,
|
||||||
default: {},
|
default: {}
|
||||||
},
|
}
|
||||||
});
|
})
|
||||||
|
|
||||||
const sendReply = (item) => {
|
const sendReply = (item) => {
|
||||||
const topic = item.userInputContent || item.topic.replace(/^#/, "");
|
const topic = item.userInputContent || item.topic.replace(/^#/, '');
|
||||||
uni.$emit(RECOMMEND_POSTS_TITLE, topic);
|
uni.$emit(RECOMMEND_POSTS_TITLE, topic);
|
||||||
};
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.container {
|
.container {
|
||||||
|
|
||||||
.container-scroll {
|
.container-scroll {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
margin-top: 4px;
|
margin-top: 4px;
|
||||||
|
|
||||||
|
/* 隐藏滚动条 */
|
||||||
|
scrollbar-width: none;
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
.mk-card-item {
|
.mk-card-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|||||||
@ -44,6 +44,12 @@
|
|||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
margin-top: 4px;
|
margin-top: 4px;
|
||||||
|
|
||||||
|
/* 隐藏滚动条 */
|
||||||
|
scrollbar-width: none;
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
.mk-card-item {
|
.mk-card-item {
|
||||||
flex-shrink: 0; /* 关键:防止 flex 布局压缩子元素宽度 */
|
flex-shrink: 0; /* 关键:防止 flex 布局压缩子元素宽度 */
|
||||||
width: 142px;
|
width: 142px;
|
||||||
|
|||||||
@ -1,49 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" width="100" height="100" style="shape-rendering: auto; display: block; background: transparent;" xmlns:xlink="http://www.w3.org/1999/xlink"><g><g transform="rotate(0 50 50)">
|
|
||||||
<rect fill="#00a6ff" height="12" width="6" ry="6" rx="3" y="24" x="47">
|
|
||||||
<animate repeatCount="indefinite" begin="-0.9166666666666666s" dur="1s" keyTimes="0;1" values="1;0" attributeName="opacity"></animate>
|
|
||||||
</rect>
|
|
||||||
</g><g transform="rotate(30 50 50)">
|
|
||||||
<rect fill="#00a6ff" height="12" width="6" ry="6" rx="3" y="24" x="47">
|
|
||||||
<animate repeatCount="indefinite" begin="-0.8333333333333334s" dur="1s" keyTimes="0;1" values="1;0" attributeName="opacity"></animate>
|
|
||||||
</rect>
|
|
||||||
</g><g transform="rotate(60 50 50)">
|
|
||||||
<rect fill="#00a6ff" height="12" width="6" ry="6" rx="3" y="24" x="47">
|
|
||||||
<animate repeatCount="indefinite" begin="-0.75s" dur="1s" keyTimes="0;1" values="1;0" attributeName="opacity"></animate>
|
|
||||||
</rect>
|
|
||||||
</g><g transform="rotate(90 50 50)">
|
|
||||||
<rect fill="#00a6ff" height="12" width="6" ry="6" rx="3" y="24" x="47">
|
|
||||||
<animate repeatCount="indefinite" begin="-0.6666666666666666s" dur="1s" keyTimes="0;1" values="1;0" attributeName="opacity"></animate>
|
|
||||||
</rect>
|
|
||||||
</g><g transform="rotate(120 50 50)">
|
|
||||||
<rect fill="#00a6ff" height="12" width="6" ry="6" rx="3" y="24" x="47">
|
|
||||||
<animate repeatCount="indefinite" begin="-0.5833333333333334s" dur="1s" keyTimes="0;1" values="1;0" attributeName="opacity"></animate>
|
|
||||||
</rect>
|
|
||||||
</g><g transform="rotate(150 50 50)">
|
|
||||||
<rect fill="#00a6ff" height="12" width="6" ry="6" rx="3" y="24" x="47">
|
|
||||||
<animate repeatCount="indefinite" begin="-0.5s" dur="1s" keyTimes="0;1" values="1;0" attributeName="opacity"></animate>
|
|
||||||
</rect>
|
|
||||||
</g><g transform="rotate(180 50 50)">
|
|
||||||
<rect fill="#00a6ff" height="12" width="6" ry="6" rx="3" y="24" x="47">
|
|
||||||
<animate repeatCount="indefinite" begin="-0.4166666666666667s" dur="1s" keyTimes="0;1" values="1;0" attributeName="opacity"></animate>
|
|
||||||
</rect>
|
|
||||||
</g><g transform="rotate(210 50 50)">
|
|
||||||
<rect fill="#00a6ff" height="12" width="6" ry="6" rx="3" y="24" x="47">
|
|
||||||
<animate repeatCount="indefinite" begin="-0.3333333333333333s" dur="1s" keyTimes="0;1" values="1;0" attributeName="opacity"></animate>
|
|
||||||
</rect>
|
|
||||||
</g><g transform="rotate(240 50 50)">
|
|
||||||
<rect fill="#00a6ff" height="12" width="6" ry="6" rx="3" y="24" x="47">
|
|
||||||
<animate repeatCount="indefinite" begin="-0.25s" dur="1s" keyTimes="0;1" values="1;0" attributeName="opacity"></animate>
|
|
||||||
</rect>
|
|
||||||
</g><g transform="rotate(270 50 50)">
|
|
||||||
<rect fill="#00a6ff" height="12" width="6" ry="6" rx="3" y="24" x="47">
|
|
||||||
<animate repeatCount="indefinite" begin="-0.16666666666666666s" dur="1s" keyTimes="0;1" values="1;0" attributeName="opacity"></animate>
|
|
||||||
</rect>
|
|
||||||
</g><g transform="rotate(300 50 50)">
|
|
||||||
<rect fill="#00a6ff" height="12" width="6" ry="6" rx="3" y="24" x="47">
|
|
||||||
<animate repeatCount="indefinite" begin="-0.08333333333333333s" dur="1s" keyTimes="0;1" values="1;0" attributeName="opacity"></animate>
|
|
||||||
</rect>
|
|
||||||
</g><g transform="rotate(330 50 50)">
|
|
||||||
<rect fill="#00a6ff" height="12" width="6" ry="6" rx="3" y="24" x="47">
|
|
||||||
<animate repeatCount="indefinite" begin="0s" dur="1s" keyTimes="0;1" values="1;0" attributeName="opacity"></animate>
|
|
||||||
</rect>
|
|
||||||
</g><g></g></g><!-- [ldio] generated by https://loading.io --></svg>
|
|
||||||
|
Before Width: | Height: | Size: 3.3 KiB |
Loading…
Reference in New Issue
Block a user