From 0b7865733542931c7c3fcf74febd30fe145af957 Mon Sep 17 00:00:00 2001
From: suerprisePlus <15810472099@163.com>
Date: 星期三, 12 六月 2024 09:38:18 +0800
Subject: [PATCH] 页面修改
---
src/components/Chat/chatList.vue | 349 +++++++++++++++++++++++++++++++++++++++------------------
1 files changed, 237 insertions(+), 112 deletions(-)
diff --git a/src/components/Chat/chatList.vue b/src/components/Chat/chatList.vue
index ed7eda0..b1e8e3d 100644
--- a/src/components/Chat/chatList.vue
+++ b/src/components/Chat/chatList.vue
@@ -1,31 +1,52 @@
<template>
<div class="body">
- <div :style="pageConfig.width|setWidth">
+ <div :style="pageConfig.width | setWidth">
<div class="web__main" ref="main">
<div
class="web__main-item"
- v-for="(item,index) in list"
+ v-for="(item, index) in list"
:key="loding(index)"
- :class="{'web__main-item--mine':item.mine}"
+ :class="{ 'web__main-item--mine': item.mine }"
>
- <div class="web__main-user">
- <img :src="item.img" />
- <cite>
- {{item.name}}
- <i>{{item.date}}</i>
- </cite>
+ <div class="web__main_content">
+ <div>
+ <img :src="item.img" />
+ </div>
+ <div class="web__main_Date">
+ <div>
+ <cite>
+ <div>
+ {{ item.name }}
+ </div>
+ <div>
+ {{ item.date }}
+ </div>
+ </cite>
+ </div>
+
+ <div class="web__main-text">
+ <div class="web__main-arrow"></div>
+ <span
+ v-html="handleDetail(item.text.text)"
+ ref="content"
+ ></span>
+ <ul class="web__main-list" v-if="item.text.list">
+ <li
+ @click="handleItemMsg(citem)"
+ v-for="(citem, cindex) in item.text.list"
+ :key="cindex"
+ >
+ {{ citem.text }}
+ </li>
+ </ul>
+ </div>
+ </div>
</div>
- <div class="web__main-text">
- <div class="web__main-arrow"></div>
- <span v-html="handleDetail(item.text.text)" ref="content"></span>
- <ul class="web__main-list" v-if="item.text.list">
- <li
- @click="handleItemMsg(citem)"
- v-for="(citem,cindex) in item.text.list"
- :key="cindex"
- >{{citem.text}}</li>
- </ul>
- </div>
+ <!-- <div class="web__main-user">
+
+
+ </div> -->
+ <!-- -->
</div>
</div>
</div>
@@ -36,17 +57,17 @@
:before-close="handleClose"
class="web__dialog"
>
- <img :src="imgSrc" v-if="imgSrc" style="width:100%;object-fit: cover;" />
+ <img :src="imgSrc" v-if="imgSrc" style="width: 100%; object-fit: cover" />
<video
:src="videoSrc"
v-if="videoSrc"
- style="width:100%;object-fit: cover;"
+ style="width: 100%; object-fit: cover"
controls="controls"
></video>
<audio
:src="audioSrc"
v-if="audioSrc"
- style="width:100%;object-fit: cover;"
+ style="width: 100%; object-fit: cover"
controls="controls"
></audio>
</el-dialog>
@@ -54,17 +75,17 @@
</template>
<script>
-import emojiParser from 'wechat-emoji-parser'
+import emojiParser from "wechat-emoji-parser";
export default {
- name: 'JwChat_list',
+ name: "JwChat_list",
filters: {
- setWidth (value) {
- let width = value
+ setWidth(value) {
+ let width = value;
if (`${value}`.match(/^\d+$/)) {
- width = value + 'px'
+ width = value + "px";
}
- return width
+ return width;
}
},
props: {
@@ -76,114 +97,123 @@
},
list: {
type: Array,
- default: () => ([])
+ default: () => []
}
},
- data () {
+ data() {
return {
load: false,
show: false,
- imgSrc: '',
- videoSrc: '',
- audioSrc: ''
- }
+ imgSrc: "",
+ videoSrc: "",
+ audioSrc: ""
+ };
},
watch: {
- load (newval) {
+ load(newval) {
if (newval) {
- this.$emit('load', true)
+ this.$emit("load", true);
this.$nextTick(() => {
- this.load = false
- })
+ this.load = false;
+ });
}
}
},
methods: {
- loding (index) {
- const size = this.list.length
+ loding(index) {
+ const size = this.list.length;
if (index == size - 1) {
setTimeout(() => {
- this.load = true
+ this.load = true;
}, 200);
}
- return index
+ return index;
},
//澶勭悊鎺掔増
- handleDetail (html = '') {
+ handleDetail(html = "") {
// console.log(html)
let result = html;
- result = emojiParser(result).replace(/(<img src)/g, '<img data-class="iconBox" data-src')
+ result = emojiParser(result).replace(
+ /(<img src)/g,
+ '<img data-class="iconBox" data-src'
+ );
setTimeout(() => {
const list = this.$refs.content;
- list.forEach(ele => {
+ list.forEach((ele) => {
for (let i = 0; i < ele.children.length; i++) {
const child = ele.children[i];
- if (child.getAttribute('data-flag') != 0) {
- child.setAttribute('data-flag', 0)
+ if (child.getAttribute("data-flag") != 0) {
+ child.setAttribute("data-flag", 0);
child.onclick = () => {
- this.handleEvent(child)
+ this.handleEvent(child);
};
- if (child.tagName === 'IMG') {
- child.className = 'web__msg--img'
- const icon = child.getAttribute('data-class')
- if (icon !== 'iconBox') child.type = "IMG"
- child.src = child.getAttribute('data-src')
- } else if (child.tagName === 'VIDEO') {
- child.type = "VIDEO"
- child.className = 'web__msg--video'
- child.src = child.getAttribute('data-src')
- } else if (child.tagName === 'AUDIO') {
- child.type = "AUDIO"
- child.className = 'web__msg--audio'
- child.controls = 'controls';
- child.src = child.getAttribute('data-src')
- } else if (child.tagName === 'FILE') {
- child.type = "FILE"
- child.className = 'web__msg--file'
- child.innerHTML = `<h2>File</h2><span>${child.getAttribute('data-name')}</span>`
- } else if (child.tagName === 'MAP') {
- child.type = "MAP"
- child.className = 'web__msg--file web__msg--map'
- child.innerHTML = `<h2>Map</h2><span>${child.getAttribute('data-longitude')} , ${child.getAttribute('data-latitude')}<br />${child.getAttribute('data-address')}</span>`
+ if (child.tagName === "IMG") {
+ child.className = "web__msg--img";
+ const icon = child.getAttribute("data-class");
+ if (icon !== "iconBox") child.type = "IMG";
+ child.src = child.getAttribute("data-src");
+ } else if (child.tagName === "VIDEO") {
+ child.type = "VIDEO";
+ child.className = "web__msg--video";
+ child.src = child.getAttribute("data-src");
+ } else if (child.tagName === "AUDIO") {
+ child.type = "AUDIO";
+ child.className = "web__msg--audio";
+ child.controls = "controls";
+ child.src = child.getAttribute("data-src");
+ } else if (child.tagName === "FILE") {
+ child.type = "FILE";
+ child.className = "web__msg--file";
+ child.innerHTML = `<h2>File</h2><span>${child.getAttribute(
+ "data-name"
+ )}</span>`;
+ } else if (child.tagName === "MAP") {
+ child.type = "MAP";
+ child.className = "web__msg--file web__msg--map";
+ child.innerHTML = `<h2>Map</h2><span>${child.getAttribute(
+ "data-longitude"
+ )} , ${child.getAttribute(
+ "data-latitude"
+ )}<br />${child.getAttribute("data-address")}</span>`;
}
}
}
});
- }, 0)
+ }, 0);
return result;
},
//澶勭悊浜嬩欢
- handleEvent (params) {
+ handleEvent(params) {
const callback = () => {
- if (params.type === 'IMG') {
+ if (params.type === "IMG") {
this.imgSrc = params.src;
this.show = true;
- } else if (params.type === 'VIDEO') {
+ } else if (params.type === "VIDEO") {
this.videoSrc = params.src;
this.show = true;
- } else if (params.type === 'AUDIO') {
+ } else if (params.type === "AUDIO") {
this.audioSrc = params.src;
this.show = true;
- } else if (params.type === 'FILE') {
- window.open(params.src)
+ } else if (params.type === "FILE") {
+ window.open(params.src);
}
- }
- if (typeof this.beforeOpen === 'function') {
- this.beforeOpen(params, callback)
+ };
+ if (typeof this.beforeOpen === "function") {
+ this.beforeOpen(params, callback);
} else {
callback();
}
},
- handleClose (done) {
+ handleClose(done) {
this.imgSrc = undefined;
this.videoSrc = undefined;
this.audioSrc = undefined;
done();
- },
- },
-}
+ }
+ }
+};
</script>
-<style>
+<style scoped>
.web__msg--img,
.web__msg--video,
.web__msg--file {
@@ -207,15 +237,14 @@
display: inline-block;
}
</style>
-<style scoped>
+<style scoped>
.web__main-item {
position: relative;
font-size: 0;
- margin-bottom:30px;
- padding-left: 60px;
+ margin-bottom: 30px;
+ /* padding-left: 60px; */
min-height: 68px;
text-align: left;
-
}
.web__main-user,
@@ -228,7 +257,8 @@
}
.web__main-user {
- position: absolute;
+ width: 100%;
+ /* position: absolute; */
left: 3px;
}
@@ -239,36 +269,65 @@
}
.web__main-user cite {
- position: absolute;
- left: 60px;
- top: -2px;
- /* width: 500px; */
+ /* position: absolute; */
+ /* left: 60px;
+ top: -2px; */
line-height: 24px;
font-size: 18px;
white-space: nowrap;
color: #999;
text-align: left;
font-style: normal;
+ width: 100%;
+ font-family: "Arial", sans-serif;
+ display: flex;
+ justify-content: space-between;
}
.web__main-user cite i {
padding-left: 0px;
font-style: normal;
}
-
+.citeTitle {
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+}
.web__main-text {
- max-width: 40%;
+ /* max-width: 40%; */
+ width: 100%;
position: relative;
line-height: 22px;
- margin-top: 25px;
- padding: 8px 15px;
- background-color: #f3f3f3;
+ /* margin-top: 25px; */
+ padding: 8px 0px;
+ /* background-color: #f3f3f3; */
border-radius: 3px;
- border: 1px solid #f0f0f0;
- color: #000;
+ /* border: 1px solid #f0f0f0; */
+ color: #f2f2f2;
+ font-family: "Arial", sans-serif;
+ font-size: 16px;
word-break: break-all;
}
-
+.web__main_content {
+ width: 100%;
+ padding: 10px 0px;
+ display: flex;
+}
+.web__main_Date {
+ flex: 1;
+ padding: 0px 15px;
+}
+.web__main_Date cite {
+ line-height: 24px;
+ font-size: 14px;
+ white-space: nowrap;
+ color: #f2f2f2;
+ text-align: left;
+ font-style: normal;
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+}
.web__main-arrow {
top: 6px;
left: -8px;
@@ -280,7 +339,7 @@
border-style: solid;
border-width: 8px;
border-left-width: 0;
- border-right-color: #ebeef5;
+ /* border-right-color: #ebeef5; */
font-family: Microsoft YaHei;
}
@@ -296,7 +355,7 @@
border-style: solid;
border-width: 7px;
border-left-width: 0;
- border-right-color: #ebeef5;
+ /* border-right-color: #ebeef5; */
}
.web__main-item--mine .web__main-text .web__main-arrow {
@@ -306,7 +365,7 @@
border-style: solid;
border-width: 8px;
border-right-width: 0;
- border-left-color: #f3f3f3;
+ /* border-left-color: #f3f3f3; */
}
.web__main-item--mine .web__main-text .web__main-arrow::after {
@@ -316,7 +375,7 @@
border-style: solid;
border-width: 7px;
border-right-width: 0;
- border-left-color: #f3f3f3;
+ /* border-left-color: #f3f3f3; */
}
.web__main-list {
@@ -353,12 +412,78 @@
.web__main-item--mine .web__main-text {
margin-left: 0;
- text-align: left;
- background-color: #f3f3f3;
- font-family: Microsoft YaHei;
- /* color: #fff; */
+ text-align: right;
+ /* background-color: #f3f3f3; */
+ font-family: "Arial", sans-serif;
+ font-size: 16px;
+ color: #f2f2f2;
}
.web__main-text img {
max-width: 200px;
}
-</style>
\ No newline at end of file
+</style>
+<style>
+.parentBox {
+ height: 100%;
+ /* background: rgb(31, 31, 31); */
+ padding: 20px;
+}
+.loadBox .loaderContantBox {
+ color: white;
+ font-size: 40px;
+ overflow: hidden;
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ transform: translateZ(0);
+ /* animation锛氳瀹氬畬鎴愬姩鐢绘墍鑺辫垂鐨勬椂闂达紝璇ュ睘鎬у繀椤昏瀹氾紝鍚﹀垯鍔ㄧ敾鏃堕暱涓�0锛屾棤娉曟挱鏀� */
+ animation: loadBox 1.7s infinite ease, round 1.7s infinite ease;
+}
+
+@keyframes loadBox {
+ 0% {
+ box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,
+ 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
+ }
+
+ 5%,
+ 95% {
+ box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,
+ 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
+ }
+
+ 10%,
+ 59% {
+ box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em,
+ -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em,
+ -0.297em -0.775em 0 -0.477em;
+ }
+
+ 20% {
+ box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em,
+ -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em,
+ -0.749em -0.34em 0 -0.477em;
+ }
+
+ 38% {
+ box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em,
+ -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em,
+ -0.82em -0.09em 0 -0.477em;
+ }
+
+ 100% {
+ box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,
+ 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
+ }
+}
+
+@keyframes round {
+ 0% {
+ transform: rotate(0deg); /* 寮�濮嬫棆杞� div 鍏冪礌 */
+ }
+
+ 100% {
+ transform: rotate(360deg); /* 缁撴潫鏃嬭浆 div 鍏冪礌 */
+ }
+}
+</style>
--
Gitblit v1.9.3