Compare commits
7 Commits
892fccb4d8
...
00ab94b840
| Author | SHA1 | Date | |
|---|---|---|---|
| 00ab94b840 | |||
| 79af18e772 | |||
| ef8d388837 | |||
| 6e365fd187 | |||
| a4d0286f1e | |||
| 49e8332fc0 | |||
| 80fc947bbf |
47
App.vue
47
App.vue
@ -5,32 +5,32 @@ import { goLogin } from "@/hooks/useGoLogin";
|
||||
import { goHome } from "@/hooks/useGoHome";
|
||||
|
||||
onLaunch(async () => {
|
||||
console.log("App Launch");
|
||||
console.log("App Launch");
|
||||
|
||||
const token = uni.getStorageSync("token");
|
||||
const token = uni.getStorageSync("token");
|
||||
|
||||
// 检测是否绑定手机号和token
|
||||
if (!token) {
|
||||
goLogin();
|
||||
// 检测是否绑定手机号和token
|
||||
if (!token) {
|
||||
goLogin();
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if (token) {
|
||||
const res = await checkPhone();
|
||||
|
||||
if (res.data) {
|
||||
goHome();
|
||||
return;
|
||||
}
|
||||
|
||||
if (token) {
|
||||
const res = await checkPhone();
|
||||
|
||||
if (res.data) {
|
||||
goHome();
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
onShow(() => {
|
||||
console.log("App Show");
|
||||
console.log("App Show");
|
||||
});
|
||||
|
||||
onHide(() => {
|
||||
console.log("App Hide");
|
||||
console.log("App Hide");
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -41,13 +41,18 @@ onHide(() => {
|
||||
page,
|
||||
body,
|
||||
#app {
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
background-color: #e9f3f7;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
background-color: #e9f3f7;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
/*每个页面公共css */
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mb12 {
|
||||
margin-bottom: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,11 +1,14 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="chat-ai">
|
||||
<ChatMarkdown :key="textKey" :text="processedText" />
|
||||
<slot name="content"></slot>
|
||||
<view class="container">
|
||||
<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" />
|
||||
</view>
|
||||
<slot name="content"></slot>
|
||||
</view>
|
||||
<slot name="footer"></slot>
|
||||
</view>
|
||||
<slot name="footer"></slot>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@ -13,10 +16,14 @@ import { defineProps, computed, ref, watch } from "vue";
|
||||
import ChatMarkdown from "./ChatMarkdown.vue";
|
||||
|
||||
const props = defineProps({
|
||||
text: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
text: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
isLoading: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
// 用于强制重新渲染的key
|
||||
@ -24,50 +31,63 @@ const textKey = ref(0);
|
||||
|
||||
// 处理文本内容
|
||||
const processedText = computed(() => {
|
||||
if (!props.text) {
|
||||
return "";
|
||||
}
|
||||
if (!props.text) {
|
||||
return "";
|
||||
}
|
||||
|
||||
// 确保文本是字符串类型
|
||||
const textStr = String(props.text);
|
||||
// 确保文本是字符串类型
|
||||
const textStr = String(props.text);
|
||||
|
||||
// 处理加载状态的文本
|
||||
if (textStr.includes("加载中") || textStr.includes("...")) {
|
||||
return textStr;
|
||||
}
|
||||
|
||||
// 处理加载状态的文本
|
||||
if (textStr.includes("加载中") || textStr.includes("...")) {
|
||||
return textStr;
|
||||
}
|
||||
|
||||
return textStr;
|
||||
});
|
||||
|
||||
// 监听text变化，强制重新渲染
|
||||
watch(
|
||||
() => props.text,
|
||||
(newText, oldText) => {
|
||||
if (newText !== oldText) {
|
||||
textKey.value++;
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
() => props.text,
|
||||
(newText, oldText) => {
|
||||
if (newText !== oldText) {
|
||||
textKey.value++;
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 100%; // ✅ 限制最大宽度
|
||||
overflow-x: hidden; // ✅ 防止横向撑开
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 100%; // ✅ 限制最大宽度
|
||||
overflow-x: hidden; // ✅ 防止横向撑开
|
||||
|
||||
.chat-ai {
|
||||
margin: 6px 12px;
|
||||
padding: 0 12px;
|
||||
.chat-ai {
|
||||
margin: 6px 12px;
|
||||
padding: 0 12px;
|
||||
|
||||
min-width: 80px;
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 4px 20px 20px 20px;
|
||||
border: 1px solid;
|
||||
border-color: #ffffff;
|
||||
}
|
||||
min-width: 90px;
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 4px 20px 20px 20px;
|
||||
border: 1px solid;
|
||||
border-color: #ffffff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
.loading-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.loading-img {
|
||||
margin-left: -4px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -1,62 +1,65 @@
|
||||
<template>
|
||||
<view class="input-area-wrapper">
|
||||
<view v-if="!visibleWaveBtn" class="area-input">
|
||||
<!-- 语音/键盘切换 -->
|
||||
<view class="input-container-voice" @click="toggleVoiceMode">
|
||||
<image v-if="!isVoiceMode" src="/static/input_voice_icon.png"></image>
|
||||
<image v-else src="/static/input_keyboard_icon.png"></image>
|
||||
</view>
|
||||
<view class="input-area-wrapper">
|
||||
<view v-if="!visibleWaveBtn" class="area-input">
|
||||
<!-- 语音/键盘切换 -->
|
||||
<view class="input-container-voice" @click="toggleVoiceMode">
|
||||
<image
|
||||
v-if="!isVoiceMode"
|
||||
src="/static/input_voice_icon.png"
|
||||
></image>
|
||||
<image v-else src="/static/input_keyboard_icon.png"></image>
|
||||
</view>
|
||||
|
||||
<!-- 输入框/语音按钮容器 -->
|
||||
<view class="input-button-container">
|
||||
<textarea
|
||||
ref="textareaRef"
|
||||
v-if="!isVoiceMode"
|
||||
:class="['textarea', ios ? 'ios' : 'android']"
|
||||
type="text"
|
||||
cursor-spacing="65"
|
||||
confirm-type="send"
|
||||
v-model="inputMessage"
|
||||
auto-height
|
||||
:confirm-hold="true"
|
||||
:placeholder="placeholder"
|
||||
:show-confirm-bar="false"
|
||||
:hold-keyboard="holdKeyboard"
|
||||
:adjust-position="true"
|
||||
:disable-default-padding="true"
|
||||
maxlength="300"
|
||||
@confirm="sendMessage"
|
||||
@focus="handleFocus"
|
||||
@blur="handleBlur"
|
||||
@touchstart="handleTouchStart"
|
||||
@touchend="handleTouchEnd"
|
||||
/>
|
||||
<!-- 输入框/语音按钮容器 -->
|
||||
<view class="input-button-container">
|
||||
<textarea
|
||||
ref="textareaRef"
|
||||
v-if="!isVoiceMode"
|
||||
class="textarea"
|
||||
type="text"
|
||||
cursor-spacing="20"
|
||||
confirm-type="send"
|
||||
v-model="inputMessage"
|
||||
auto-height
|
||||
:confirm-hold="true"
|
||||
:placeholder="placeholder"
|
||||
:show-confirm-bar="false"
|
||||
:hold-keyboard="holdKeyboard"
|
||||
:adjust-position="true"
|
||||
:disable-default-padding="true"
|
||||
maxlength="300"
|
||||
@confirm="sendMessage"
|
||||
@focus="handleFocus"
|
||||
@blur="handleBlur"
|
||||
@touchstart="handleTouchStart"
|
||||
@touchend="handleTouchEnd"
|
||||
/>
|
||||
|
||||
<view
|
||||
v-if="isVoiceMode"
|
||||
class="hold-to-talk-button"
|
||||
@longpress="handleVoiceTouchStart"
|
||||
@touchend="handleVoiceTouchEnd"
|
||||
@touchcancel="handleVoiceTouchEnd"
|
||||
>
|
||||
按住 说话
|
||||
<view
|
||||
v-if="isVoiceMode"
|
||||
class="hold-to-talk-button"
|
||||
@longpress="handleVoiceTouchStart"
|
||||
@touchend="handleVoiceTouchEnd"
|
||||
@touchcancel="handleVoiceTouchEnd"
|
||||
>
|
||||
按住 说话
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="input-container-send">
|
||||
<view class="input-container-send-btn" @click="sendMessage">
|
||||
<image
|
||||
v-if="props.isSessionActive"
|
||||
src="/static/input_stop_icon.png"
|
||||
></image>
|
||||
<image v-else src="/static/input_send_icon.png"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="input-container-send">
|
||||
<view class="input-container-send-btn" @click="sendMessage">
|
||||
<image
|
||||
v-if="props.isSessionActive"
|
||||
src="/static/input_stop_icon.png"
|
||||
></image>
|
||||
<image v-else src="/static/input_send_icon.png"></image>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 录音按钮 -->
|
||||
<RecordingWaveBtn v-if="visibleWaveBtn" ref="recordingWaveBtnRef" />
|
||||
</view>
|
||||
|
||||
<!-- 录音按钮 -->
|
||||
<RecordingWaveBtn v-if="visibleWaveBtn" ref="recordingWaveBtnRef" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@ -67,18 +70,18 @@ const plugin = requirePlugin("WechatSI");
|
||||
const manager = plugin.getRecordRecognitionManager();
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: String,
|
||||
holdKeyboard: Boolean,
|
||||
isSessionActive: Boolean,
|
||||
stopRequest: Function,
|
||||
modelValue: String,
|
||||
holdKeyboard: Boolean,
|
||||
isSessionActive: Boolean,
|
||||
stopRequest: Function,
|
||||
});
|
||||
const emit = defineEmits([
|
||||
"update:modelValue",
|
||||
"send",
|
||||
"noHideKeyboard",
|
||||
"keyboardShow",
|
||||
"keyboardHide",
|
||||
"sendVoice",
|
||||
"update:modelValue",
|
||||
"send",
|
||||
"noHideKeyboard",
|
||||
"keyboardShow",
|
||||
"keyboardHide",
|
||||
"sendVoice",
|
||||
]);
|
||||
|
||||
const textareaRef = ref(null);
|
||||
@ -90,144 +93,139 @@ const keyboardHeight = ref(0);
|
||||
const isVoiceMode = ref(false);
|
||||
const visibleWaveBtn = ref(false);
|
||||
|
||||
// 判断当前平台是否为iOS
|
||||
const ios = computed(() => {
|
||||
return uni.getSystemInfoSync().platform === "ios";
|
||||
});
|
||||
|
||||
// 保持和父组件同步
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(val) => {
|
||||
inputMessage.value = val;
|
||||
}
|
||||
() => props.modelValue,
|
||||
(val) => {
|
||||
inputMessage.value = val;
|
||||
}
|
||||
);
|
||||
|
||||
// 当子组件的 inputMessage 变化时，通知父组件（但要避免循环更新）
|
||||
watch(inputMessage, (val) => {
|
||||
// 只有当值真正不同时才emit，避免循环更新
|
||||
if (val !== props.modelValue) {
|
||||
emit("update:modelValue", val);
|
||||
}
|
||||
// 只有当值真正不同时才emit，避免循环更新
|
||||
if (val !== props.modelValue) {
|
||||
emit("update:modelValue", val);
|
||||
}
|
||||
});
|
||||
|
||||
// 切换语音/文本模式
|
||||
const toggleVoiceMode = () => {
|
||||
isVoiceMode.value = !isVoiceMode.value;
|
||||
isVoiceMode.value = !isVoiceMode.value;
|
||||
};
|
||||
|
||||
// 处理语音按钮长按开始
|
||||
const handleVoiceTouchStart = () => {
|
||||
manager.start({ lang: "zh_CN" });
|
||||
manager.start({ lang: "zh_CN" });
|
||||
|
||||
visibleWaveBtn.value = true;
|
||||
visibleWaveBtn.value = true;
|
||||
|
||||
// 启动音频条动画
|
||||
nextTick(() => {
|
||||
if (recordingWaveBtnRef.value) {
|
||||
recordingWaveBtnRef.value.startAnimation();
|
||||
}
|
||||
});
|
||||
// 启动音频条动画
|
||||
nextTick(() => {
|
||||
if (recordingWaveBtnRef.value) {
|
||||
recordingWaveBtnRef.value.startAnimation();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 处理语音按钮长按结束
|
||||
const handleVoiceTouchEnd = () => {
|
||||
manager.stop();
|
||||
manager.stop();
|
||||
|
||||
// 停止音频条动画
|
||||
if (recordingWaveBtnRef.value) {
|
||||
recordingWaveBtnRef.value.stopAnimation();
|
||||
}
|
||||
// 停止音频条动画
|
||||
if (recordingWaveBtnRef.value) {
|
||||
recordingWaveBtnRef.value.stopAnimation();
|
||||
}
|
||||
|
||||
visibleWaveBtn.value = false;
|
||||
visibleWaveBtn.value = false;
|
||||
};
|
||||
|
||||
// 处理发送原语音
|
||||
const initRecord = () => {
|
||||
manager.onRecognize = (res) => {
|
||||
let text = res.result;
|
||||
inputMessage.value = text;
|
||||
};
|
||||
// 识别结束事件
|
||||
manager.onStop = (res) => {
|
||||
console.log(res, 37);
|
||||
let text = res.result;
|
||||
manager.onRecognize = (res) => {
|
||||
let text = res.result;
|
||||
inputMessage.value = text;
|
||||
};
|
||||
// 识别结束事件
|
||||
manager.onStop = (res) => {
|
||||
console.log(res, 37);
|
||||
let text = res.result;
|
||||
|
||||
if (text == "") {
|
||||
console.log("没有说话");
|
||||
return;
|
||||
}
|
||||
if (text == "") {
|
||||
console.log("没有说话");
|
||||
return;
|
||||
}
|
||||
|
||||
inputMessage.value = text;
|
||||
// 在语音识别完成后发送消息
|
||||
emit("send", text);
|
||||
};
|
||||
inputMessage.value = text;
|
||||
// 在语音识别完成后发送消息
|
||||
emit("send", text);
|
||||
};
|
||||
};
|
||||
|
||||
// 监听键盘高度变化
|
||||
onMounted(() => {
|
||||
// 监听键盘弹起
|
||||
uni.onKeyboardHeightChange((res) => {
|
||||
keyboardHeight.value = res.height;
|
||||
if (res.height) {
|
||||
emit("keyboardShow", res.height);
|
||||
} else {
|
||||
emit("keyboardHide");
|
||||
}
|
||||
});
|
||||
// 监听键盘弹起
|
||||
uni.onKeyboardHeightChange((res) => {
|
||||
keyboardHeight.value = res.height;
|
||||
if (res.height) {
|
||||
emit("keyboardShow", res.height);
|
||||
} else {
|
||||
emit("keyboardHide");
|
||||
}
|
||||
});
|
||||
|
||||
initRecord();
|
||||
initRecord();
|
||||
});
|
||||
|
||||
const sendMessage = () => {
|
||||
if (props.isSessionActive) {
|
||||
// 如果会话进行中，调用停止请求函数
|
||||
if (props.stopRequest) {
|
||||
props.stopRequest();
|
||||
}
|
||||
} else {
|
||||
// 否则发送新消息
|
||||
if (!inputMessage.value.trim()) return;
|
||||
emit("send", inputMessage.value);
|
||||
if (props.isSessionActive) {
|
||||
// 如果会话进行中，调用停止请求函数
|
||||
if (props.stopRequest) {
|
||||
props.stopRequest();
|
||||
}
|
||||
} else {
|
||||
// 否则发送新消息
|
||||
if (!inputMessage.value.trim()) return;
|
||||
emit("send", inputMessage.value);
|
||||
|
||||
// 发送后保持焦点（可选）
|
||||
if (props.holdKeyboard && textareaRef.value) {
|
||||
nextTick(() => {
|
||||
textareaRef.value.focus();
|
||||
});
|
||||
// 发送后保持焦点（可选）
|
||||
if (props.holdKeyboard && textareaRef.value) {
|
||||
nextTick(() => {
|
||||
textareaRef.value.focus();
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleFocus = () => {
|
||||
isFocused.value = true;
|
||||
emit("noHideKeyboard");
|
||||
isFocused.value = true;
|
||||
emit("noHideKeyboard");
|
||||
};
|
||||
|
||||
const handleBlur = () => {
|
||||
isFocused.value = false;
|
||||
isFocused.value = false;
|
||||
};
|
||||
|
||||
const handleTouchStart = () => {
|
||||
emit("noHideKeyboard");
|
||||
emit("noHideKeyboard");
|
||||
};
|
||||
|
||||
const handleTouchEnd = () => {
|
||||
emit("noHideKeyboard");
|
||||
emit("noHideKeyboard");
|
||||
};
|
||||
|
||||
// 手动聚焦输入框
|
||||
const focusInput = () => {
|
||||
if (textareaRef.value) {
|
||||
textareaRef.value.focus();
|
||||
}
|
||||
if (textareaRef.value) {
|
||||
textareaRef.value.focus();
|
||||
}
|
||||
};
|
||||
|
||||
// 手动失焦输入框
|
||||
const blurInput = () => {
|
||||
if (textareaRef.value) {
|
||||
textareaRef.value.blur();
|
||||
}
|
||||
if (textareaRef.value) {
|
||||
textareaRef.value.blur();
|
||||
}
|
||||
};
|
||||
|
||||
// 暴露方法给父组件
|
||||
@ -236,92 +234,87 @@ defineExpose({ focusInput });
|
||||
|
||||
<style scoped lang="scss">
|
||||
.area-input {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
border-radius: 22px;
|
||||
background-color: #ffffff;
|
||||
box-shadow: 0px 0px 20px 0px rgba(52, 25, 204, 0.05);
|
||||
margin: 0 12px;
|
||||
margin-bottom: 8px;
|
||||
|
||||
.input-container-voice {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
|
||||
image {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
.input-button-container {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hold-to-talk-button {
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
color: #333333;
|
||||
font-size: 16px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 22px;
|
||||
background-color: #ffffff;
|
||||
transition: all 0.2s ease;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
box-shadow: 0px 0px 20px 0px rgba(52, 25, 204, 0.05);
|
||||
margin: 0 12px;
|
||||
margin-bottom: 8px;
|
||||
|
||||
.input-container-send {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
.input-container-voice {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
align-self: flex-end;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
|
||||
.input-container-send-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
image {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
image {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
.textarea {
|
||||
flex: 1;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
max-height: 92px;
|
||||
min-height: 44px;
|
||||
font-size: 16px;
|
||||
line-height: normal;
|
||||
|
||||
&.android {
|
||||
padding: 12px 0;
|
||||
.input-button-container {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&.ios {
|
||||
padding: 6px 0;
|
||||
.hold-to-talk-button {
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
color: #333333;
|
||||
font-size: 16px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #ffffff;
|
||||
transition: all 0.2s ease;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: #cccccc;
|
||||
line-height: normal;
|
||||
.input-container-send {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
align-self: flex-end;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
|
||||
.input-container-send-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
.textarea {
|
||||
flex: 1;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
max-height: 92px;
|
||||
min-height: 22px;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
margin: 6px 0;
|
||||
|
||||
&::placeholder {
|
||||
color: #cccccc;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -50,12 +50,6 @@ const sendReply = (text) => {
|
||||
-webkit-overflow-scrolling: touch;
|
||||
padding-bottom: 12px;
|
||||
box-sizing: border-box;
|
||||
|
||||
/* 隐藏滚动条 */
|
||||
scrollbar-width: none;
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.more-tips-item {
|
||||
|
||||
@ -1,140 +1,143 @@
|
||||
<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="/static/quick/quick_icon_bg.png" mode="aspectFill"></image>
|
||||
<view class="quick-access-item-title">
|
||||
<image :src="item.icon"></image>
|
||||
<text>{{ item.title }}</text>
|
||||
</view>
|
||||
<text class="quick-access-item-content">{{ item.content }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<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="/static/quick/quick_icon_bg.png"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
<view class="quick-access-item-title">
|
||||
<image :src="item.icon"></image>
|
||||
<text>{{ item.title }}</text>
|
||||
</view>
|
||||
<text class="quick-access-item-content">{{
|
||||
item.content
|
||||
}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, ref } from 'vue';
|
||||
const itemList = ref([])
|
||||
|
||||
const emits = defineEmits(['replySent']);
|
||||
|
||||
const sendReply = (item) => {
|
||||
emits('replySent', item); // 向父组件传递数据
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
initData()
|
||||
})
|
||||
|
||||
const initData = () => {
|
||||
itemList.value = [
|
||||
{
|
||||
icon: '/static/quick/quick_icon_yuding.png',
|
||||
title: '快速预定',
|
||||
content: '预定门票、房间、餐食',
|
||||
type: 'Command.quickBooking'
|
||||
},
|
||||
{
|
||||
icon: '/static/quick/quick_icon_find.png',
|
||||
title: '探索发现',
|
||||
content: '探索玩法、出片佳地',
|
||||
type: 'Command.discovery'
|
||||
},
|
||||
{
|
||||
icon: '/static/quick/quick_icon_order.png',
|
||||
title: '订单/工单',
|
||||
content: '我的订单/工单',
|
||||
type: 'MyOrder'
|
||||
},
|
||||
{
|
||||
icon: '/static/quick/quick_icon_call.png',
|
||||
title: '呼叫服务',
|
||||
content: '加水、客房服务等',
|
||||
type: 'Command.createWorkOrder'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
import { onMounted, ref } from "vue";
|
||||
const itemList = ref([]);
|
||||
|
||||
const emits = defineEmits(["replySent"]);
|
||||
|
||||
const sendReply = (item) => {
|
||||
emits("replySent", item); // 向父组件传递数据
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
initData();
|
||||
});
|
||||
|
||||
const initData = () => {
|
||||
itemList.value = [
|
||||
{
|
||||
icon: "/static/quick/quick_icon_yuding.png",
|
||||
title: "快速预定",
|
||||
content: "预定门票、房间、餐食",
|
||||
type: "Command.quickBooking",
|
||||
},
|
||||
{
|
||||
icon: "/static/quick/quick_icon_find.png",
|
||||
title: "探索发现",
|
||||
content: "探索玩法、出片佳地",
|
||||
type: "Command.discovery",
|
||||
},
|
||||
{
|
||||
icon: "/static/quick/quick_icon_order.png",
|
||||
title: "订单/工单",
|
||||
content: "我的订单/工单",
|
||||
type: "MyOrder",
|
||||
},
|
||||
{
|
||||
icon: "/static/quick/quick_icon_call.png",
|
||||
title: "呼叫服务",
|
||||
content: "加水、客房服务等",
|
||||
type: "Command.createWorkOrder",
|
||||
},
|
||||
];
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.quick-access {
|
||||
width: 100%;
|
||||
|
||||
&-scroll {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
overflow-x: auto;
|
||||
white-space: nowrap;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
/* 隐藏滚动条 */
|
||||
scrollbar-width: none;
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
|
||||
image {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
text {
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
color: #201F32;
|
||||
line-height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.quick-access-item-content {
|
||||
z-index: 1;
|
||||
margin-top: 4px;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 10px;
|
||||
color: #678CAD;
|
||||
line-height: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.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;
|
||||
|
||||
image {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
text {
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
color: #201f32;
|
||||
line-height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.quick-access-item-content {
|
||||
z-index: 1;
|
||||
margin-top: 4px;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 10px;
|
||||
color: #678cad;
|
||||
line-height: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,70 +1,75 @@
|
||||
<template>
|
||||
<view class="top-bg-content">
|
||||
<view class="top-item" >
|
||||
<!-- :style="backgroundStyle" -->
|
||||
<image class="top-item-left" :src="initPageImages.welcomeImageUrl"></image>
|
||||
<image class="top-item-right" :src="initPageImages.logoImageUrl"></image>
|
||||
</view>
|
||||
<ChatCardAI v-if="welcomeContent.length" :text='welcomeContent'/>
|
||||
</view>
|
||||
<view class="top-bg-content">
|
||||
<view class="top-item">
|
||||
<!-- :style="backgroundStyle" -->
|
||||
<image
|
||||
class="top-item-left"
|
||||
:src="initPageImages.welcomeImageUrl"
|
||||
></image>
|
||||
<image
|
||||
class="top-item-right"
|
||||
:src="initPageImages.logoImageUrl"
|
||||
></image>
|
||||
</view>
|
||||
<ChatCardAI v-if="welcomeContent.length" :text="welcomeContent" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { defineProps, computed, ref } from "vue";
|
||||
import ChatCardAI from './ChatCardAI.vue';
|
||||
import { defineProps, computed, ref } from "vue";
|
||||
import ChatCardAI from "./ChatCardAI.vue";
|
||||
|
||||
const props = defineProps({
|
||||
initPageImages: {
|
||||
type: Object,
|
||||
default: {
|
||||
backgroundImageUrl: '',
|
||||
logoImageUrl: '',
|
||||
welcomeImageUrl: ''
|
||||
}
|
||||
},
|
||||
welcomeContent: {
|
||||
type: String,
|
||||
default: '查信息、预定下单、探索玩法、呼叫服务、我通通可以满足，快试试问我问题吧!'
|
||||
}
|
||||
})
|
||||
|
||||
// 计算背景样式
|
||||
const backgroundStyle = computed(() => {
|
||||
return {
|
||||
backgroundImage: `url(${props.initPageImages.backgroundImageUrl})`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
backgroundRepeat: 'no-repeat'
|
||||
}
|
||||
})
|
||||
const props = defineProps({
|
||||
initPageImages: {
|
||||
type: Object,
|
||||
default: {
|
||||
backgroundImageUrl: "",
|
||||
logoImageUrl: "",
|
||||
welcomeImageUrl: "",
|
||||
},
|
||||
},
|
||||
welcomeContent: {
|
||||
type: String,
|
||||
default:
|
||||
"查信息、预定下单、探索玩法、呼叫服务、我通通可以满足，快试试问我问题吧!",
|
||||
},
|
||||
});
|
||||
|
||||
// 计算背景样式
|
||||
const backgroundStyle = computed(() => {
|
||||
return {
|
||||
backgroundImage: `url(${props.initPageImages.backgroundImageUrl})`,
|
||||
backgroundSize: "cover",
|
||||
backgroundPosition: "center",
|
||||
backgroundRepeat: "no-repeat",
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.top-bg-content {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
}
|
||||
.top-bg-content {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.top-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 32px;
|
||||
margin-bottom: -8px;
|
||||
}
|
||||
.top-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 32px;
|
||||
margin-bottom: -6px;
|
||||
}
|
||||
|
||||
.top-item-left {
|
||||
width: 118px;
|
||||
height: 52px;
|
||||
}
|
||||
.top-item-left {
|
||||
width: 118px;
|
||||
height: 52px;
|
||||
}
|
||||
|
||||
.top-item-right {
|
||||
width: 130px;
|
||||
height: 130px;
|
||||
margin: -12px 0;
|
||||
}
|
||||
.top-item-right {
|
||||
width: 130px;
|
||||
height: 130px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -49,14 +49,6 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.area-msg-list-content {
|
||||
/* 隐藏滚动条 */
|
||||
scrollbar-width: none;
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.message-item-ai {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
@ -140,15 +132,6 @@
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
width: 0 !important;
|
||||
height: 0 !important;
|
||||
-webkit-appearance: none;
|
||||
background: transparent;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
// 打字机光标闪烁动画
|
||||
.typing-cursor {
|
||||
|
||||
@ -1,201 +1,214 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<ModuleTitle :title="commodityDTO.title" />
|
||||
<view class="container-scroll">
|
||||
<view v-for="(item, index) in commodityDTO.commodityList" :key="`${item.commodityId}-${index}`">
|
||||
<view class="container">
|
||||
<ModuleTitle :title="commodityDTO.title" />
|
||||
<view class="container-scroll">
|
||||
<view
|
||||
v-for="(item, index) in commodityDTO.commodityList"
|
||||
:key="`${item.commodityId}-${index}`"
|
||||
>
|
||||
<view class="mk-card-item" @click="placeOrderHandle(item)">
|
||||
<!-- <view class="card-badge">超值推荐</view> -->
|
||||
<image class="card-img" :src="item.commodityIcon" mode="aspectFill" />
|
||||
<view class="card-content">
|
||||
<view class="card-title-column">
|
||||
<text class="card-title">{{ item.commodityName }}</text>
|
||||
<view class="card-tags" v-for="(tag) in item.commodityTradeRuleList" :key="tag">
|
||||
<text class="card-tag">{{ tag }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<template v-for="(serviceItem, index) in item.commodityServices" :key="serviceItem.serviceTitle">
|
||||
<view v-if="index < 3" class="card-desc">· {{ serviceItem.serviceTitle }}</view>
|
||||
</template>
|
||||
<view class="card-bottom-row">
|
||||
<view class="card-price-row">
|
||||
<text class="card-price-fu">￥</text>
|
||||
<text class="card-price">{{ item.commodityPrice }}</text>
|
||||
<text class="card-unit">/人</text>
|
||||
</view>
|
||||
<!-- <view class="card-badge">超值推荐</view> -->
|
||||
<image
|
||||
class="card-img"
|
||||
:src="item.commodityIcon"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
<view class="card-content">
|
||||
<view class="card-title-column">
|
||||
<text class="card-title">{{
|
||||
item.commodityName
|
||||
}}</text>
|
||||
<view
|
||||
class="card-tags"
|
||||
v-for="tag in item.commodityTradeRuleList"
|
||||
:key="tag"
|
||||
>
|
||||
<text class="card-tag">{{ tag }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<template
|
||||
v-for="(
|
||||
serviceItem, index
|
||||
) in item.commodityServices"
|
||||
:key="serviceItem.serviceTitle"
|
||||
>
|
||||
<view v-if="index < 3" class="card-desc"
|
||||
>· {{ serviceItem.serviceTitle }}</view
|
||||
>
|
||||
</template>
|
||||
<view class="card-bottom-row">
|
||||
<view class="card-price-row">
|
||||
<text class="card-price-fu">￥</text>
|
||||
<text class="card-price">{{
|
||||
item.commodityPrice
|
||||
}}</text>
|
||||
<text class="card-unit">/人</text>
|
||||
</view>
|
||||
|
||||
<text class="card-btn">下单</text>
|
||||
</view>
|
||||
</view>
|
||||
<text class="card-btn">下单</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import ModuleTitle from '@/components/ModuleTitle/index.vue'
|
||||
import { defineProps } from 'vue'
|
||||
const props = defineProps({
|
||||
commodityDTO: {
|
||||
type: Object,
|
||||
default: {}
|
||||
}
|
||||
})
|
||||
|
||||
/// 去下单
|
||||
const placeOrderHandle = (item) => {
|
||||
uni.navigateTo({
|
||||
url: `/pages/goods/index?commodityId=${item.commodityId}`,
|
||||
})
|
||||
}
|
||||
import ModuleTitle from "@/components/ModuleTitle/index.vue";
|
||||
import { defineProps } from "vue";
|
||||
const props = defineProps({
|
||||
commodityDTO: {
|
||||
type: Object,
|
||||
default: {},
|
||||
},
|
||||
});
|
||||
|
||||
/// 去下单
|
||||
const placeOrderHandle = (item) => {
|
||||
uni.navigateTo({
|
||||
url: `/pages/goods/index?commodityId=${item.commodityId}`,
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
.container {
|
||||
.container-scroll {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
margin: 4px 0;
|
||||
|
||||
.container-scroll {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
margin: 4px 0;
|
||||
.mk-card-item {
|
||||
position: relative;
|
||||
|
||||
/* 隐藏滚动条 */
|
||||
scrollbar-width: none;
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: start;
|
||||
width: 188px;
|
||||
// height: 244px;
|
||||
background-color: #ffffff;
|
||||
border-radius: 10px;
|
||||
margin-right: 8px;
|
||||
padding-bottom: 12px;
|
||||
|
||||
.mk-card-item {
|
||||
position: relative;
|
||||
.card-badge {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 8px;
|
||||
background: #ffe7b2;
|
||||
color: #b97a00;
|
||||
font-size: 12px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: start;
|
||||
width: 188px;
|
||||
// height: 244px;
|
||||
background-color: #ffffff;
|
||||
border-radius: 10px;
|
||||
margin-right: 8px;
|
||||
padding-bottom: 12px;
|
||||
.card-img {
|
||||
width: 188px;
|
||||
height: 114px;
|
||||
border-radius: 10px;
|
||||
object-fit: cover; /* 确保图片不变形，保持比例裁剪 */
|
||||
flex-shrink: 0; /* 防止图片被压缩 */
|
||||
}
|
||||
|
||||
.card-badge {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 8px;
|
||||
background: #ffe7b2;
|
||||
color: #b97a00;
|
||||
font-size: 12px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
z-index: 2;
|
||||
}
|
||||
.card-content {
|
||||
box-sizing: border-box;
|
||||
padding: 10px 12px 0 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: start;
|
||||
width: 100%;
|
||||
flex: 1; /* 让内容区域占据剩余空间 */
|
||||
overflow: hidden; /* 防止内容溢出 */
|
||||
}
|
||||
|
||||
.card-img {
|
||||
width: 188px;
|
||||
height: 114px;
|
||||
border-radius: 10px;
|
||||
object-fit: cover; /* 确保图片不变形，保持比例裁剪 */
|
||||
flex-shrink: 0; /* 防止图片被压缩 */
|
||||
}
|
||||
.card-title-column {
|
||||
display: flex;
|
||||
align-items: start;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
box-sizing: border-box;
|
||||
padding: 10px 12px 0 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: start;
|
||||
width: 100%;
|
||||
flex: 1; /* 让内容区域占据剩余空间 */
|
||||
overflow: hidden; /* 防止内容溢出 */
|
||||
}
|
||||
.card-title {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #222;
|
||||
width: 100%;
|
||||
/* 限制标题最多显示两行 */
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
line-height: 1.4;
|
||||
max-height: 2.8em; /* 2行的高度 */
|
||||
}
|
||||
|
||||
.card-title-column {
|
||||
display: flex;
|
||||
align-items: start;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
.card-tags {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: start;
|
||||
padding: 6px 0;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #222;
|
||||
width: 100%;
|
||||
/* 限制标题最多显示两行 */
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
line-height: 1.4;
|
||||
max-height: 2.8em; /* 2行的高度 */
|
||||
}
|
||||
.card-tag {
|
||||
background: #f5f5f5;
|
||||
color: #ff6600;
|
||||
font-size: 10px;
|
||||
border-radius: 4px;
|
||||
padding: 0 6px;
|
||||
margin-left: 2px;
|
||||
border: 1px solid #ff6600;
|
||||
}
|
||||
|
||||
.card-tags {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: start;
|
||||
padding: 6px 0;
|
||||
}
|
||||
.card-desc {
|
||||
font-size: 13px;
|
||||
color: #888;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.card-tag {
|
||||
background: #f5f5f5;
|
||||
color: #ff6600;
|
||||
font-size: 10px;
|
||||
border-radius: 4px;
|
||||
padding: 0 6px;
|
||||
margin-left: 2px;
|
||||
border: 1px solid #ff6600;
|
||||
}
|
||||
.card-bottom-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 8px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.card-desc {
|
||||
font-size: 13px;
|
||||
color: #888;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.card-price-row {
|
||||
.card-price-fu {
|
||||
color: #ff6600;
|
||||
font-size: 11px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.card-bottom-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 8px;
|
||||
width: 100%;
|
||||
}
|
||||
.card-price {
|
||||
color: #ff6600;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.card-unit {
|
||||
font-size: 11px;
|
||||
color: #888;
|
||||
font-weight: normal;
|
||||
margin-left: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.card-price-row {
|
||||
.card-price-fu {
|
||||
color: #ff6600;
|
||||
font-size: 11px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.card-price {
|
||||
color: #ff6600;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.card-unit {
|
||||
font-size: 11px;
|
||||
color: #888;
|
||||
font-weight: normal;
|
||||
margin-left: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.card-btn {
|
||||
background: #ff6600;
|
||||
color: #fff;
|
||||
font-size: 15px;
|
||||
border-radius: 20px;
|
||||
padding: 0 18px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.card-btn {
|
||||
background: #ff6600;
|
||||
color: #fff;
|
||||
font-size: 15px;
|
||||
border-radius: 20px;
|
||||
padding: 0 18px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,200 +1,214 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<ModuleTitle title="相关商品" />
|
||||
<view class="container-scroll">
|
||||
<view v-for="(item, index) in commodityList" :key="`${item.commodityId}-${index}`">
|
||||
<view class="mk-card-item" @click="placeOrderHandle(item)">
|
||||
<image class="card-img" :src="item.commodityPhoto" mode="aspectFill" />
|
||||
<view class="card-content">
|
||||
<view class="card-title-column">
|
||||
<text class="card-title">{{ item.commodityName }}</text>
|
||||
<view class="card-tags" v-for="(tag) in item.commodityTradeRuleList" :key="tag">
|
||||
<text class="card-tag">{{ tag }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<template v-for="(serviceItem, index) in item.commodityServices" :key="serviceItem.serviceTitle">
|
||||
<view v-if="index < 3" class="card-desc">· {{ serviceItem.serviceTitle }}</view>
|
||||
</template>
|
||||
<view class="card-bottom-row">
|
||||
<view class="card-price-row">
|
||||
<text class="card-price-fu">￥</text>
|
||||
<text class="card-price">{{ item.specificationPrice }}</text>
|
||||
<text class="card-unit">/人</text>
|
||||
</view>
|
||||
<text class="card-btn">下单</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="container">
|
||||
<ModuleTitle title="相关商品" />
|
||||
<view class="container-scroll">
|
||||
<view
|
||||
v-for="(item, index) in commodityList"
|
||||
:key="`${item.commodityId}-${index}`"
|
||||
>
|
||||
<view class="mk-card-item" @click="placeOrderHandle(item)">
|
||||
<image
|
||||
class="card-img"
|
||||
:src="item.commodityPhoto"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
<view class="card-content">
|
||||
<view class="card-title-column">
|
||||
<text class="card-title">{{
|
||||
item.commodityName
|
||||
}}</text>
|
||||
<view
|
||||
class="card-tags"
|
||||
v-for="tag in item.commodityTradeRuleList"
|
||||
:key="tag"
|
||||
>
|
||||
<text class="card-tag">{{ tag }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<template
|
||||
v-for="(
|
||||
serviceItem, index
|
||||
) in item.commodityServices"
|
||||
:key="serviceItem.serviceTitle"
|
||||
>
|
||||
<view v-if="index < 3" class="card-desc"
|
||||
>· {{ serviceItem.serviceTitle }}</view
|
||||
>
|
||||
</template>
|
||||
<view class="card-bottom-row">
|
||||
<view class="card-price-row">
|
||||
<text class="card-price-fu">￥</text>
|
||||
<text class="card-price">{{
|
||||
item.specificationPrice
|
||||
}}</text>
|
||||
<text class="card-unit">/人</text>
|
||||
</view>
|
||||
<text class="card-btn">下单</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import ModuleTitle from '@/components/ModuleTitle/index.vue'
|
||||
import { defineProps } from 'vue'
|
||||
const props = defineProps({
|
||||
commodityList: {
|
||||
type: Array,
|
||||
default: []
|
||||
}
|
||||
})
|
||||
|
||||
/// 去下单
|
||||
const placeOrderHandle = (item) => {
|
||||
uni.navigateTo({
|
||||
url: `/pages/goods/index?commodityId=${item.commodityId}`,
|
||||
})
|
||||
}
|
||||
import ModuleTitle from "@/components/ModuleTitle/index.vue";
|
||||
import { defineProps } from "vue";
|
||||
const props = defineProps({
|
||||
commodityList: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
});
|
||||
|
||||
/// 去下单
|
||||
const placeOrderHandle = (item) => {
|
||||
uni.navigateTo({
|
||||
url: `/pages/goods/index?commodityId=${item.commodityId}`,
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
margin: 6px 0 0;
|
||||
.container {
|
||||
margin: 6px 0 0;
|
||||
|
||||
.container-scroll {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
margin: 4px 0;
|
||||
.container-scroll {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
margin: 4px 0;
|
||||
|
||||
/* 隐藏滚动条 */
|
||||
scrollbar-width: none;
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.mk-card-item {
|
||||
position: relative;
|
||||
|
||||
.mk-card-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: start;
|
||||
width: 188px;
|
||||
// height: 244px;
|
||||
background-color: #ffffff;
|
||||
border-radius: 10px;
|
||||
margin-right: 8px;
|
||||
padding-bottom: 12px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: start;
|
||||
width: 188px;
|
||||
// height: 244px;
|
||||
background-color: #ffffff;
|
||||
border-radius: 10px;
|
||||
margin-right: 8px;
|
||||
padding-bottom: 12px;
|
||||
.card-badge {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 8px;
|
||||
background: #ffe7b2;
|
||||
color: #b97a00;
|
||||
font-size: 12px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.card-badge {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 8px;
|
||||
background: #ffe7b2;
|
||||
color: #b97a00;
|
||||
font-size: 12px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
z-index: 2;
|
||||
}
|
||||
.card-img {
|
||||
width: 188px;
|
||||
height: 114px;
|
||||
border-radius: 10px;
|
||||
object-fit: cover; /* 确保图片不变形，保持比例裁剪 */
|
||||
flex-shrink: 0; /* 防止图片被压缩 */
|
||||
}
|
||||
|
||||
.card-img {
|
||||
width: 188px;
|
||||
height: 114px;
|
||||
border-radius: 10px;
|
||||
object-fit: cover; /* 确保图片不变形，保持比例裁剪 */
|
||||
flex-shrink: 0; /* 防止图片被压缩 */
|
||||
}
|
||||
.card-content {
|
||||
box-sizing: border-box;
|
||||
padding: 10px 12px 0 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: start;
|
||||
width: 100%;
|
||||
flex: 1; /* 让内容区域占据剩余空间 */
|
||||
overflow: hidden; /* 防止内容溢出 */
|
||||
}
|
||||
|
||||
.card-content {
|
||||
box-sizing: border-box;
|
||||
padding: 10px 12px 0 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: start;
|
||||
width: 100%;
|
||||
flex: 1; /* 让内容区域占据剩余空间 */
|
||||
overflow: hidden; /* 防止内容溢出 */
|
||||
}
|
||||
.card-title-column {
|
||||
display: flex;
|
||||
align-items: start;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.card-title-column {
|
||||
display: flex;
|
||||
align-items: start;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
.card-title {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #222;
|
||||
width: 100%;
|
||||
/* 限制标题最多显示两行 */
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
line-height: 1.4;
|
||||
max-height: 2.8em; /* 2行的高度 */
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #222;
|
||||
width: 100%;
|
||||
/* 限制标题最多显示两行 */
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
line-height: 1.4;
|
||||
max-height: 2.8em; /* 2行的高度 */
|
||||
}
|
||||
.card-tags {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: start;
|
||||
padding: 6px 0;
|
||||
}
|
||||
|
||||
.card-tags {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: start;
|
||||
padding: 6px 0;
|
||||
}
|
||||
|
||||
.card-tag {
|
||||
background: #f5f5f5;
|
||||
color: #ff6600;
|
||||
font-size: 10px;
|
||||
border-radius: 4px;
|
||||
padding: 0 6px;
|
||||
margin-left: 2px;
|
||||
.card-tag {
|
||||
background: #f5f5f5;
|
||||
color: #ff6600;
|
||||
font-size: 10px;
|
||||
border-radius: 4px;
|
||||
padding: 0 6px;
|
||||
margin-left: 2px;
|
||||
border: 1px solid #ff6600;
|
||||
}
|
||||
}
|
||||
|
||||
.card-desc {
|
||||
font-size: 13px;
|
||||
color: #888;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.card-desc {
|
||||
font-size: 13px;
|
||||
color: #888;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.card-bottom-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 8px;
|
||||
width: 100%;
|
||||
}
|
||||
.card-bottom-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 8px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.card-price-row {
|
||||
.card-price-fu {
|
||||
color: #ff6600;
|
||||
font-size: 11px;
|
||||
font-weight: normal;
|
||||
}
|
||||
.card-price-row {
|
||||
.card-price-fu {
|
||||
color: #ff6600;
|
||||
font-size: 11px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.card-price {
|
||||
color: #ff6600;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.card-unit {
|
||||
font-size: 11px;
|
||||
color: #888;
|
||||
font-weight: normal;
|
||||
margin-left: 2px;
|
||||
}
|
||||
}
|
||||
.card-price {
|
||||
color: #ff6600;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.card-unit {
|
||||
font-size: 11px;
|
||||
color: #888;
|
||||
font-weight: normal;
|
||||
margin-left: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.card-btn {
|
||||
background: #ff6600;
|
||||
color: #fff;
|
||||
font-size: 15px;
|
||||
border-radius: 20px;
|
||||
padding: 0 18px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.card-btn {
|
||||
background: #ff6600;
|
||||
color: #fff;
|
||||
font-size: 15px;
|
||||
border-radius: 20px;
|
||||
padding: 0 18px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,72 +1,67 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<ModuleTitle :title="recommendTheme.themeName" />
|
||||
<view class="container-scroll">
|
||||
<view v-for="(item, index) in recommendTheme.recommendPostsList" :key="index">
|
||||
<view class="container">
|
||||
<ModuleTitle :title="recommendTheme.themeName" />
|
||||
<view class="container-scroll">
|
||||
<view
|
||||
v-for="(item, index) in recommendTheme.recommendPostsList"
|
||||
:key="index"
|
||||
>
|
||||
<view class="mk-card-item" @click="sendReply(item)">
|
||||
<image :src="item.coverPhoto" mode="widthFix"></image>
|
||||
<text>{{ item.topic }}</text>
|
||||
<image :src="item.coverPhoto" mode="widthFix"></image>
|
||||
<text>{{ item.topic }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import ModuleTitle from '@/components/ModuleTitle/index.vue'
|
||||
import { RECOMMEND_POSTS_TITLE } from '@/constant/constant'
|
||||
import { defineProps } from 'vue'
|
||||
const props = defineProps({
|
||||
recommendTheme: {
|
||||
type: Object,
|
||||
default: {}
|
||||
}
|
||||
})
|
||||
|
||||
const sendReply = (item) => {
|
||||
const topic = item.userInputContent || item.topic.replace(/^#/, '');
|
||||
uni.$emit(RECOMMEND_POSTS_TITLE, topic);
|
||||
}
|
||||
import ModuleTitle from "@/components/ModuleTitle/index.vue";
|
||||
import { RECOMMEND_POSTS_TITLE } from "@/constant/constant";
|
||||
import { defineProps } from "vue";
|
||||
const props = defineProps({
|
||||
recommendTheme: {
|
||||
type: Object,
|
||||
default: {},
|
||||
},
|
||||
});
|
||||
|
||||
const sendReply = (item) => {
|
||||
const topic = item.userInputContent || item.topic.replace(/^#/, "");
|
||||
uni.$emit(RECOMMEND_POSTS_TITLE, topic);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
.container {
|
||||
.container-scroll {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
overflow-x: auto;
|
||||
margin-top: 4px;
|
||||
|
||||
.container-scroll {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
overflow-x: auto;
|
||||
margin-top: 4px;
|
||||
.mk-card-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: start;
|
||||
width: 188px;
|
||||
height: 154px;
|
||||
background-color: #ffffff;
|
||||
border-radius: 10px;
|
||||
margin-right: 8px;
|
||||
|
||||
/* 隐藏滚动条 */
|
||||
scrollbar-width: none;
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mk-card-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: start;
|
||||
width: 188px;
|
||||
height: 154px;
|
||||
background-color: #ffffff;
|
||||
border-radius: 10px;
|
||||
margin-right: 8px;
|
||||
|
||||
image {
|
||||
width: 188px;
|
||||
height: 112px;
|
||||
}
|
||||
text {
|
||||
padding: 12px;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
image {
|
||||
width: 188px;
|
||||
height: 112px;
|
||||
}
|
||||
text {
|
||||
padding: 12px;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -44,12 +44,6 @@
|
||||
overflow-x: auto;
|
||||
margin-top: 4px;
|
||||
|
||||
/* 隐藏滚动条 */
|
||||
scrollbar-width: none;
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mk-card-item {
|
||||
flex-shrink: 0; /* 关键：防止 flex 布局压缩子元素宽度 */
|
||||
width: 142px;
|
||||
|
||||
49
static/msg_loading.svg
Normal file
49
static/msg_loading.svg
Normal file
@ -0,0 +1,49 @@
|
||||
<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>
|
||||
|
After Width: | Height: | Size: 3.3 KiB |
Loading…
Reference in New Issue
Block a user