mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-15 13:56:43 +08:00
feat(portal): 支持消息内容的 Markdown 和 LaTeX 渲染- 引入 markdown-it 与 highlight.js 实现 Markdown 渲染- 集成 KaTeX 支持数学公式显示
- 更新消息组件以支持实时渲染 Markdown 与 LaTeX - 调整 AI 对话框宽度为百分比布局 - 优化初始欢迎文案格式并添加段落间距 - 添加必要的依赖项：katex、markdown-it、markdown-it-highlightjs 等- 配置 vue-katex 插件并定义分隔符规则 - 使用 null-loader 处理部分资源加载问题
This commit is contained in:
陈昱达
16
src/main.js
16
src/main.js
@@ -3,6 +3,22 @@ import App from './App.vue'
|
||||
import router from './router'
|
||||
import store from './store'
|
||||
|
||||
import vueKatexEs from "vue-katex";
|
||||
import "katex/dist/katex.min.css"
|
||||
|
||||
|
||||
Vue.use(vueKatexEs,{
|
||||
globalOptions:{
|
||||
delimiters:[
|
||||
{left:"$$",right:"$$",display:true},
|
||||
{left:"$",right:"$",display:false},
|
||||
{left:"\\[",right:"\\]",display:true},
|
||||
{left:"\\(",right:"\\)",display:false}
|
||||
],
|
||||
throwOnError:true
|
||||
}
|
||||
})
|
||||
|
||||
//import './mock/index'
|
||||
|
||||
import xpage from '@/utils/xpage'
|
||||
|
||||
446
src/views/portal/case/AICall.vue
Normal file
446
src/views/portal/case/AICall.vue
Normal file
@@ -0,0 +1,446 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 最大化状态的弹窗 -->
|
||||
<el-dialog
|
||||
v-if="dialogVisible"
|
||||
:visible="true"
|
||||
width="65%"
|
||||
:close-on-click-modal="false"
|
||||
:show-close="true"
|
||||
@close="onClose"
|
||||
class="case-expert-dialog"
|
||||
:modal="false"
|
||||
:append-to-body="true"
|
||||
:fullscreen="false"
|
||||
top="10vh"
|
||||
v-show="windowState === 'maximized'"
|
||||
>
|
||||
<!-- 标题 -->
|
||||
<div slot="title" class="dialog-title">
|
||||
<span>案例专家</span>
|
||||
<el-button
|
||||
type="text"
|
||||
class="window-control-btn"
|
||||
@click="minimizeWindow"
|
||||
>
|
||||
<i class="el-icon-minus"></i>
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 内容区域 -->
|
||||
<div class="content-wrapper">
|
||||
<div
|
||||
class="welcome-message"
|
||||
ref="messageContainer"
|
||||
@scroll="handleScroll"
|
||||
>
|
||||
<div class="message-text" v-for="(item, index) in messageList" :key="index">
|
||||
<messages :messageData="item" :suggestions="suggestions"></messages>
|
||||
</div>
|
||||
<div class="message-suggestions" v-if="messageList.length > 0 && messageList[messageList.length-1].textCompleted">
|
||||
<div class="suggestion-item" v-for="(item, index) in suggestions" :key="index">
|
||||
<a @click="sendSuggestions(item)"> {{ item }} →</a>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="isLoading" class="loading-message">
|
||||
<div class="loading-dots">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 输入框区域 -->
|
||||
<send-message
|
||||
v-model="AIContent"
|
||||
:message-list="messageList"
|
||||
:suggestions="suggestions"
|
||||
@loading="handleLoading"
|
||||
@update-message="updateMessage"
|
||||
@update-suggestions="updateSuggestions"
|
||||
@new-conversation="startNewConversation"
|
||||
:disabled="isLoading"
|
||||
class="input-area-wrapper"
|
||||
ref="sendMessage"
|
||||
/>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 最小化状态的弹窗 -->
|
||||
<div
|
||||
class="minimized-window"
|
||||
v-show="windowState === 'minimized' && showMinimizedWindow"
|
||||
@click="onMinimizedWindowClick"
|
||||
>
|
||||
<div class="minimized-content">
|
||||
<span class="window-title">案例专家</span>
|
||||
<el-button
|
||||
type="text"
|
||||
class="window-control-btn"
|
||||
@click.stop="onMinimizedWindowClick"
|
||||
>
|
||||
<i class="el-icon-full-screen"></i>
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="minimized-message">
|
||||
<div v-if="messageList.length <= 1 && messageList[0].isBot">
|
||||
当前暂无对话内容，去创建对话吧
|
||||
</div>
|
||||
<div v-else>
|
||||
{{ getLastUserMessage() }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
import messages from './components/messages.vue'
|
||||
import sendMessage from './components/sendMessage.vue'
|
||||
|
||||
export default {
|
||||
name: 'CaseExpertDialog',
|
||||
props: {
|
||||
dialogVisible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
components: {
|
||||
messages,
|
||||
sendMessage
|
||||
},
|
||||
computed: {
|
||||
...mapState('app', ['showAICallMinimized']),
|
||||
showMinimizedWindow() {
|
||||
// 只有在Vuex状态为true时才显示最小化窗口
|
||||
return this.showAICallMinimized;
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
AIContent: '',
|
||||
isLoading: false,
|
||||
windowState: 'maximized', // 'maximized' 或 'minimized'
|
||||
messageList: [
|
||||
{
|
||||
typing:true,
|
||||
isBot: true, // 是否为机器人
|
||||
text: `\n\n **您好！我是京东方案侧智能问答助手，随时为您服务。** \n\n
|
||||
\n\n我可以帮您快速查找和解读平台内的各类案例内容。只需输入您想了解的问题或关键词，我会从案例库中精准匹配相关信息，并提供清晰的解答。每条回答都会附上来源链接，方便您随时查阅原始案例全文。\n\n
|
||||
\n\n我还会根据您的提问，智能推荐相关延伸问题，助您更高效地探索知识、解决问题。\n\n
|
||||
\n\n现在，欢迎随时向我提问，开启高效的知识查询体验吧！\n\n `
|
||||
}
|
||||
],
|
||||
suggestions:[],
|
||||
isAutoScroll: true // 是否自动滚动
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
dialogVisible(newVal) {
|
||||
console.log(newVal);
|
||||
// 移除之前的逻辑，因为现在通过事件机制处理状态恢复
|
||||
},
|
||||
messageList: {
|
||||
handler() {
|
||||
this.$nextTick(() => {
|
||||
this.scrollToBottom();
|
||||
});
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onClose() {
|
||||
console.log('关闭弹窗')
|
||||
this.$emit('close')
|
||||
// 可以在这里执行其他逻辑
|
||||
},
|
||||
|
||||
minimizeWindow() {
|
||||
this.windowState = 'minimized';
|
||||
},
|
||||
|
||||
maximizeWindow() {
|
||||
this.windowState = 'maximized';
|
||||
},
|
||||
|
||||
getLastUserMessage() {
|
||||
// 从后往前找用户消息
|
||||
for (let i = this.messageList.length - 1; i >= 0; i--) {
|
||||
if (!this.messageList[i].isBot) {
|
||||
// 移除HTML标签只返回纯文本
|
||||
const tempDiv = document.createElement('div');
|
||||
tempDiv.innerHTML = this.messageList[i].text;
|
||||
return tempDiv.textContent || tempDiv.innerText || '';
|
||||
}
|
||||
}
|
||||
return '';
|
||||
},
|
||||
|
||||
// 处理加载状态
|
||||
handleLoading(status) {
|
||||
this.isLoading = status;
|
||||
},
|
||||
|
||||
// 更新消息
|
||||
updateMessage(message) {
|
||||
// 由于Vue的响应式系统，message对象的更改会自动更新视图
|
||||
// 这里不需要额外的操作
|
||||
},
|
||||
updateSuggestions(arr){
|
||||
this.suggestions = arr
|
||||
},
|
||||
// 处理建议
|
||||
sendSuggestions(item){
|
||||
// this.suggestions = []
|
||||
this.AIContent = item
|
||||
setTimeout(()=>{
|
||||
this.$refs.sendMessage.handleSend()
|
||||
this.AIContent = ''
|
||||
},500)
|
||||
},
|
||||
startNewConversation() {
|
||||
this.messageList = [
|
||||
{
|
||||
isBot: true,
|
||||
text: `<p><b>您好！我是京东方案侧智能问答助手，随时为您服务。</b></p>
|
||||
<p>我可以帮您快速查找和解读平台内的各类案例内容。只需输入您想了解的问题或关键词，我会从案例库中精准匹配相关信息，并提供清晰的解答。每条回答都会附上来源链接，方便您随时查阅原始案例全文。</p>
|
||||
<p>我还会根据您的提问，智能推荐相关延伸问题，助您更高效地探索知识、解决问题。</p>
|
||||
<p>现在，欢迎随时向我提问，开启高效的知识查询体验吧！</p>`
|
||||
}
|
||||
];
|
||||
this.AIContent = '';
|
||||
this.isLoading = false;
|
||||
},
|
||||
|
||||
// 处理滚动事件
|
||||
handleScroll(event) {
|
||||
const element = event.target;
|
||||
// 判断是否滚动到底部
|
||||
const isAtBottom = element.scrollHeight - element.scrollTop <= element.clientHeight + 1;
|
||||
|
||||
// 如果滚动到底部，则开启自动滚动
|
||||
// 如果离开底部，则关闭自动滚动
|
||||
this.isAutoScroll = isAtBottom;
|
||||
},
|
||||
|
||||
// 滚动到底部
|
||||
scrollToBottom() {
|
||||
if (this.isAutoScroll && this.$refs.messageContainer) {
|
||||
this.$refs.messageContainer.scrollTop = this.$refs.messageContainer.scrollHeight;
|
||||
}
|
||||
},
|
||||
|
||||
// 最小化窗口的点击事件处理方法
|
||||
onMinimizedWindowClick() {
|
||||
// 当点击最小化窗口时，如果dialogVisible为false，则通过事件通知父组件显示对话框
|
||||
if (!this.dialogVisible) {
|
||||
this.$emit('restore');
|
||||
}
|
||||
// 然后将窗口状态设置为最大化
|
||||
this.windowState = 'maximized';
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.case-expert-dialog {
|
||||
::v-deep .el-dialog{
|
||||
background: url("./components/u762.svg") no-repeat ;
|
||||
background-size: cover;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
|
||||
//background-color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
::v-deep .el-dialog__body{
|
||||
padding: 10px;
|
||||
//font-size: 12px;
|
||||
*{
|
||||
font-size:unset ;
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-title {
|
||||
background: transparent;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
padding-right: 20px;
|
||||
|
||||
.icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.window-control-btn {
|
||||
font-size: 18px;
|
||||
padding: 5px 10px;
|
||||
color: #333; /* 黑色图标 */
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.message-suggestions{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.suggestion-item{
|
||||
cursor: pointer;
|
||||
float: right;
|
||||
padding: 5px 15px;
|
||||
box-sizing: border-box;
|
||||
background-color: rgba(228, 231, 237, 1);
|
||||
border-radius: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
.content-wrapper {
|
||||
padding: 20px;
|
||||
background-color: transparent;
|
||||
border-radius: 8px;
|
||||
height: 550px;
|
||||
position: relative;
|
||||
//margin-bottom: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.welcome-message {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 10px;
|
||||
flex:1;
|
||||
overflow-y: auto;
|
||||
|
||||
.avatar {
|
||||
margin-right: 12px;
|
||||
img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background-color: #007aff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.message-text {
|
||||
width: 100%;
|
||||
//margin-bottom: 15px;
|
||||
|
||||
p {
|
||||
color: #333;
|
||||
//font-size: 14px;
|
||||
line-height: 1.6;
|
||||
margin: 8px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.loading-message {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
margin-bottom: 15px;
|
||||
|
||||
.avatar {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background-color: #007aff;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.loading-dots {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background-color: #999;
|
||||
margin-right: 5px;
|
||||
animation: loading 1.4s infinite ease-in-out both;
|
||||
|
||||
&:nth-child(1) {
|
||||
animation-delay: -0.32s;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
animation-delay: -0.16s;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input-area-wrapper {
|
||||
//position: absolute;
|
||||
//bottom: 10px;
|
||||
//width: calc(100% - 40px);
|
||||
}
|
||||
|
||||
@keyframes loading {
|
||||
0%, 80%, 100% {
|
||||
transform: scale(0);
|
||||
}
|
||||
40% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.minimized-window {
|
||||
position: fixed;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
width: 300px;
|
||||
background: url("./components/u762.svg") no-repeat;
|
||||
background-size: cover;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
z-index: 2000;
|
||||
cursor: pointer;
|
||||
|
||||
.minimized-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px 15px;
|
||||
border-bottom: 1px solid #eee;
|
||||
|
||||
.window-title {
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.window-control-btn {
|
||||
font-size: 16px;
|
||||
padding: 3px 8px;
|
||||
color: #000000; /* 黑色图标 */
|
||||
}
|
||||
}
|
||||
|
||||
.minimized-message {
|
||||
padding: 15px;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
min-height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
316
src/views/portal/case/components/messages.vue
Normal file
316
src/views/portal/case/components/messages.vue
Normal file
@@ -0,0 +1,316 @@
|
||||
<!--消息渲染-->
|
||||
<script>
|
||||
import MarkdownIt from 'markdown-it';
|
||||
import highlight from 'markdown-it-highlightjs'
|
||||
import "highlight.js/styles/a11y-dark.css"
|
||||
import katex from "katex"
|
||||
|
||||
const md = new MarkdownIt({
|
||||
}).use(highlight);
|
||||
export default {
|
||||
name: "message",
|
||||
props: {
|
||||
messageData: {
|
||||
type: Object,
|
||||
default: function () {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
suggestions: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
md,
|
||||
displayText: '',
|
||||
typingTimer: null,
|
||||
typingSpeed: 30, // 打字机速度（毫秒/字符）
|
||||
showAllCaseRefers: false // 控制是否显示所有案例引用
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 计算需要显示的案例引用
|
||||
displayedCaseRefers() {
|
||||
if (this.showAllCaseRefers || !this.messageData.caseRefers) {
|
||||
return this.messageData.caseRefers || [];
|
||||
}
|
||||
return this.messageData.caseRefers.slice(0, 3);
|
||||
},
|
||||
// 判断是否需要显示"查看更多"按钮
|
||||
shouldShowMoreButton() {
|
||||
return this.messageData.caseRefers && this.messageData.caseRefers.length > 3;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'messageData.text': {
|
||||
handler(newVal) {
|
||||
if (newVal && this.messageData.isBot && !this.messageData.typing) {
|
||||
// this.startTyping(newVal)
|
||||
this.displayText = newVal || ''
|
||||
} else {
|
||||
this.displayText = newVal || ''
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toUrl(item) {
|
||||
console.log(item);
|
||||
this.$router.push({
|
||||
path: '/case/detail',
|
||||
query: {
|
||||
id: item.caseId
|
||||
}
|
||||
})
|
||||
},
|
||||
startTyping(text) {
|
||||
// 清除之前的定时器
|
||||
if (this.typingTimer) {
|
||||
clearInterval(this.typingTimer)
|
||||
this.typingTimer = null
|
||||
}
|
||||
|
||||
// 初始化
|
||||
// this.displayText = ''
|
||||
let index = 0
|
||||
|
||||
// 开始打字机效果
|
||||
this.typingTimer = setInterval(() => {
|
||||
if (index < text.length) {
|
||||
this.displayText += md.render(text.charAt(index))
|
||||
index++
|
||||
} else {
|
||||
// 打字完成，清除定时器
|
||||
clearInterval(this.typingTimer)
|
||||
this.typingTimer = null
|
||||
}
|
||||
}, this.typingSpeed)
|
||||
},
|
||||
// 切换显示所有案例引用
|
||||
toggleShowAllCaseRefers() {
|
||||
this.showAllCaseRefers = !this.showAllCaseRefers;
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
// 组件销毁前清除定时器
|
||||
if (this.typingTimer) {
|
||||
clearInterval(this.typingTimer)
|
||||
this.typingTimer = null
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="messages">
|
||||
<!-- 机器人消息-->
|
||||
<div v-if="messageData.isBot" class="bot-message">
|
||||
<div class="bot-think" v-if="messageData.thinkText" v-katex:auto v-html="md.render(messageData.thinkText)"></div>
|
||||
<div v-katex:auto v-html="md.render(displayText)" ></div>
|
||||
<div v-if="messageData.caseRefers && messageData.caseRefers.length > 0 && messageData.textCompleted">
|
||||
<div class="case-refers">
|
||||
<div class="case-refers-title">
|
||||
<span> <i class="iconfont icon-think"></i> 引用案例</span>
|
||||
<span v-if="shouldShowMoreButton" class="more" @click="toggleShowAllCaseRefers">
|
||||
{{ showAllCaseRefers ? '收起' : '查看更多' }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="case-refers-list">
|
||||
<div class="case-refers-item" v-for="item in displayedCaseRefers" :key="item.caseId">
|
||||
<div class="case-refers-item-title">
|
||||
<a @click="toUrl(item)" class="title">{{ item.title }}</a>
|
||||
<span class="case-refers-item-timer">{{item.uploadTime}}</span>
|
||||
</div>
|
||||
<div class="case-refers-item-author">
|
||||
<span class="user"></span>
|
||||
<span>{{ item.authorName }}</span>
|
||||
<span class="case-inter-orginInfo">{{ item.orgInfo }}</span>
|
||||
</div>
|
||||
<div class="case-refers-item-keywords">
|
||||
<span v-for="keyword in item.keywords" :key="keyword">{{ keyword }}</span>
|
||||
</div>
|
||||
|
||||
<div class="message-content">{{item.content}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 非机器人消息-->
|
||||
<div v-else class="user-message">
|
||||
<div class="message-text">
|
||||
<div v-html="messageData.text"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 推荐问题-->
|
||||
|
||||
<!-- <div v-if="suggestions && suggestions.length > 0">-->
|
||||
<!-- <div class="suggestions">-->
|
||||
<!-- <div class="suggestions-title">-->
|
||||
<!-- <span>推荐问题</span>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="suggestions-list">-->
|
||||
<!-- <div class="suggestions-item" v-for="item in suggestions">-->
|
||||
<!-- <div class="suggestions-item-title">-->
|
||||
<!-- {{item}}-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.messages {
|
||||
width: 100%;
|
||||
|
||||
.bot-message {
|
||||
background-color: #fff;
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.bot-think {
|
||||
color: #909399;
|
||||
padding-bottom: 5px;
|
||||
position: relative;
|
||||
padding-left: 10px;
|
||||
|
||||
&:before {
|
||||
content: ' ';
|
||||
border-left: 0.5px solid #909399;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: -3px;
|
||||
transform: scaleX(0.5);
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.case-refers {
|
||||
margin-top: 10px;
|
||||
|
||||
.case-refers-title {
|
||||
font-weight: bold;
|
||||
margin-bottom: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.icon-think {
|
||||
background-image: url("./map.svg") ;
|
||||
width: 15px;
|
||||
height: 13px;
|
||||
display: inline-block;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.more{
|
||||
font-size: 10px;
|
||||
padding: 2px 6px;
|
||||
background-color: #F4F7FD;
|
||||
border-radius: 5px;
|
||||
color:#577EE1;font-weight: unset;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.case-refers-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
|
||||
.case-refers-item {
|
||||
//margin-right: 10px;
|
||||
margin-bottom: 5px;
|
||||
border: 1px solid rgba(144, 147, 153, 0.44);
|
||||
padding: 5px;
|
||||
border-radius: 5px;
|
||||
|
||||
.case-refers-item-title {
|
||||
font-size: 14px;
|
||||
margin-bottom: 5px;
|
||||
font-weight: 600;
|
||||
color: #000;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
.title{
|
||||
max-width: 70% ;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
|
||||
}
|
||||
.case-refers-item-timer{
|
||||
font-size: 10px;
|
||||
margin-right: 20px;
|
||||
color:#cecece;
|
||||
font-weight: unset!important;
|
||||
}
|
||||
}
|
||||
.case-refers-item-author{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.user{
|
||||
background-image: url("./user.svg");
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
display: inline-block;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.case-inter-orginInfo{
|
||||
font-size: 10px;
|
||||
color: rgba(144, 147, 153, 0.44);margin-left: 5px;
|
||||
|
||||
}
|
||||
}
|
||||
.case-refers-item-author,
|
||||
.case-refers-item-keywords {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-message {
|
||||
float: right;
|
||||
padding: 5px 15px;
|
||||
box-sizing: border-box;
|
||||
background-color: rgba(228, 231, 237, 1);
|
||||
border-radius: 5px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.case-refers-item-keywords{
|
||||
margin-top: 5px;
|
||||
span{
|
||||
padding: 1px 4px;
|
||||
background-color: #F4F7FD;
|
||||
border-radius: 5px;
|
||||
font-size: 10px!important;
|
||||
color:#577EE1
|
||||
}
|
||||
span + span{
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
.message-content{
|
||||
font-size: 12px!important;
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user