优化
This commit is contained in:
13684185576
@ -0,0 +1,284 @@
|
||||
<template>
|
||||
<div class="mian_box" v-if="dialogShow">
|
||||
<div class="left_box">
|
||||
<div class="left_top"></div>
|
||||
<div class="left_bom">
|
||||
<!-- 聊天区域 -->
|
||||
<div class="chat-container">
|
||||
<div class="chat-messages">
|
||||
<div v-for="message in messages" :key="message.id" class="message"
|
||||
:class="message.sender === 1 ? 'sent' : 'received'">
|
||||
<img v-if="message.sender !== 1" class="message-avatar"
|
||||
src="https://randomuser.me/api/portraits/women/5.jpg" alt="张三">
|
||||
<div class="message-content">
|
||||
<div>{{ message.text }}</div>
|
||||
<div class="message-time">{{ formatTime(message.timestamp) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat-input">
|
||||
<input type="text" v-model="newMessage" placeholder="输入消息..." @keyup.enter="sendMessage">
|
||||
<button class="send-button" @click="sendMessage">
|
||||
发送
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right_box"></div>
|
||||
<el-button type="primary" style="margin:0 auto;display: block;">结束会议</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { reactive, ref, onMounted, defineExpose } from "vue";
|
||||
// 消息历史
|
||||
const messages = ref([
|
||||
{ id: 1, sender: 2, text: "你好，最近怎么样？", timestamp: new Date(Date.now() - 3600000) },
|
||||
{ id: 2, sender: 1, text: "还不错，最近在学Vue3，很有意思！", timestamp: new Date(Date.now() - 3500000) },
|
||||
{ id: 3, sender: 2, text: "太好了！Vue3确实很棒，Composition API用起来很顺手", timestamp: new Date(Date.now() - 3400000) },
|
||||
{ id: 4, sender: 1, text: "是的，尤其是setup函数和响应式API", timestamp: new Date(Date.now() - 3300000) },
|
||||
{ id: 5, sender: 3, text: "你好，在忙吗？", timestamp: new Date(Date.now() - 2800000) },
|
||||
{ id: 6, sender: 1, text: "刚吃完午饭，有什么事吗？", timestamp: new Date(Date.now() - 2700000) },
|
||||
{ id: 7, sender: 4, text: "周末有什么计划？", timestamp: new Date(Date.now() - 1800000) },
|
||||
{ id: 8, sender: 1, text: "还没想好，可能去爬山", timestamp: new Date(Date.now() - 1700000) },
|
||||
{ id: 9, sender: 5, text: "记得明天有会议", timestamp: new Date(Date.now() - 1200000) },
|
||||
{ id: 10, sender: 1, text: "谢谢提醒，我会准时参加", timestamp: new Date(Date.now() - 1100000) }
|
||||
]);
|
||||
const dialogShow=ref(false)
|
||||
const newMessage=ref()
|
||||
// 格式化时间
|
||||
function formatTime(timestamp) {
|
||||
return new Date(timestamp).toLocaleTimeString([], {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
}
|
||||
const init=()=>{
|
||||
dialogShow.value=true;
|
||||
}
|
||||
// 发送消息
|
||||
function sendMessage() {
|
||||
let message = {
|
||||
id: messages.value.length + 1,
|
||||
sender: 1,
|
||||
text: newMessage.value,
|
||||
timestamp: new Date()
|
||||
};
|
||||
messages.value.push(message);
|
||||
newMessage.value = "";
|
||||
}
|
||||
defineExpose({ init });
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.left_bom {
|
||||
width: 40vw;
|
||||
}
|
||||
|
||||
.status {
|
||||
font-size: 0.8rem;
|
||||
color: #ddd;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: #4caf50;
|
||||
border-radius: 50%;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.contacts-title {
|
||||
margin: 20px 0 15px;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.contact-list {
|
||||
overflow-y: auto;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.contact {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px 10px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 8px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.contact.active,
|
||||
.contact:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.contact img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
margin-right: 12px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.contact-info {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.contact-name {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.contact-lastmsg {
|
||||
font-size: 0.85rem;
|
||||
color: #ddd;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 150px;
|
||||
}
|
||||
|
||||
.chat-container {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.chat-header {
|
||||
padding: 15px 20px;
|
||||
border-bottom: 1px solid #eee;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.chat-header img {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
border-radius: 50%;
|
||||
margin-right: 12px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.chat-messages {
|
||||
flex-grow: 1;
|
||||
padding: 20px;
|
||||
overflow-y: auto;
|
||||
background-color: #f9f9f9;
|
||||
height: 40vh;
|
||||
overflow: auto;
|
||||
width: 40vw;
|
||||
}
|
||||
|
||||
.message {
|
||||
display: flex;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.message.received {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.message.sent {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.message-avatar {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border-radius: 50%;
|
||||
margin: 0 10px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.message-content {
|
||||
max-width: 60%;
|
||||
padding: 12px 15px;
|
||||
border-radius: 18px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.received .message-content {
|
||||
background-color: #e9e9eb;
|
||||
color: #333;
|
||||
border-top-left-radius: 4px;
|
||||
}
|
||||
|
||||
.sent .message-content {
|
||||
background-color: #3f51b5;
|
||||
color: white;
|
||||
border-top-right-radius: 4px;
|
||||
}
|
||||
|
||||
.message-time {
|
||||
font-size: 0.7rem;
|
||||
margin-top: 5px;
|
||||
opacity: 0.8;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.chat-input {
|
||||
padding: 15px 20px;
|
||||
border-top: 1px solid #eee;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.chat-input input {
|
||||
flex-grow: 1;
|
||||
padding: 12px 15px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 24px;
|
||||
outline: none;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.send-button {
|
||||
background-color: #3f51b5;
|
||||
color: white;
|
||||
border: none;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
border-radius: 50%;
|
||||
margin-left: 10px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.send-button:hover {
|
||||
background-color: #303f9f;
|
||||
}
|
||||
|
||||
.empty-chat {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
color: #888;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.current-user {
|
||||
justify-content: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.current-user img {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.contact {
|
||||
justify-content: center;
|
||||
padding: 10px 5px;
|
||||
}
|
||||
|
||||
.contact img {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -7,11 +7,9 @@
|
||||
</el-button>
|
||||
</PageTitle>
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" />
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox">
|
||||
<ul class="list noScollLine" v-loading="pageData.loading">
|
||||
<li class="list-item" v-for="(item, index) in pageData.list" :key="`tableData${index}`">
|
||||
@ -67,14 +65,16 @@
|
||||
</div>
|
||||
<!-- 详情 -->
|
||||
<DetailForm ref="detailDiloag" @updateDate="getList" />
|
||||
<RoomDetail />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import DetailForm from "./components/detailForm.vue";
|
||||
import RoomDetail from "./components/roomDetail.vue";
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<div class="head_box">
|
||||
<span class="title">经验分享{{ title }} </span>
|
||||
<div>
|
||||
<el-button type="primary" size="small" :loading="loading" @click="submit">保存</el-button>
|
||||
<!-- <el-button type="primary" size="small" :loading="loading" @click="submit">保存</el-button> -->
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
@ -59,7 +59,7 @@ const mode = "default";
|
||||
const dataBt = ref(`<p class="html_bt">
|
||||
<h4 style=\"text-align: center;\"><span style=\"color: rgb(225, 60, 57); font-size: 32px; font-family: 标楷体;\">林芝市公安局情指中心</span></h4>
|
||||
<h4 style=\"text-align: center;\"><span style=\"color: rgb(225, 60, 57); font-size: 32px; font-family: 标楷体;\">研判专刊（初稿）</span></h4></p>
|
||||
<p style="text-align: center;"><span style="color: rgb(225, 60, 57); font-size: 22px; font-family: 标楷体;">市公安局情指中心编 ${timeValidate(new Date(), 'td')}</span></p>
|
||||
<p style="text-align: center;"><span style="color: rgb(225, 60, 57); font-size: 22px; font-family: 标楷体;">市公安局情指中心编 ${timeValidate(new Date(), 'td')}</span></p>
|
||||
<hr/>`)
|
||||
//编辑器配置
|
||||
const editorConfig = {
|
||||
|
||||
@ -30,8 +30,7 @@
|
||||
}"></Pages>
|
||||
</div>
|
||||
<!-- 编辑详情 -->
|
||||
<EditAddForm v-if="show" ref="detailDiloag" :dic="{ D_GS_BQ_LX }"
|
||||
@updateDate="getList" />
|
||||
<EditAddForm v-if="show" ref="detailDiloag" :dic="{ D_GS_BQ_LX }" @updateDate="getList" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -149,8 +148,7 @@ const addEdit = (type, row) => {
|
||||
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight =
|
||||
window.innerHeight - searchBox.value.offsetHeight - 250;
|
||||
pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 250;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user