GEKE_PHONE/pages/component/messageshow.vue

<template>
	<view class="m-item" :id="'message'+id">
		<view class="m-left" @click="users(user.home.id)">
			<image class="head_icon" :src="user.home.img" v-if="message.user=='home'"></image>
		</view>
		
		<view class="m-content">
			<view class="m-content-head" >
				<view :class="'m-content-head-s-'+message.user" v-if="message.user=='home'">{{this.$store.getters.chatname}} {{message.date}}</view>
				<view :class="'m-content-head-s-'+message.user" v-else>{{message.date}}   {{this.$store.getters.realname}} </view>
				<view :class="'m-content-head-'+message.user">{{message.content}} </view>
			</view>
		</view>
		<view class="m-right" @click="users(user.customer.id)">
			<image class="head_icon" :src="user.customer.img" v-if="message.user=='customer'"></image>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
import api from '@/api/api'
	export default {
		data() {
			return {
				abosultPaht: "../../",
				ats:"http://10.0.0.94:8080/jeecg-boot/sys/common/static/"
				
			}
		},
		methods:{
			users:function(e){
				this.$store.commit('SET_TEMUSERID',e);
				this.$Router.push({name:'teamuser'})
			}
		},
		props: ['message', 'id'],
		computed: mapState(['user'])
	}
</script>

<style>
	.m-item {
		display: flex;
		flex-direction: row;
		padding-top: 40px;
	}
	.m-left {
		display: flex;
		width: 80px;
		justify-content: center;
		align-items: flex-start;
	}
	.m-content {
		display: flex;
		flex: 1;
		flex-direction: column;
		justify-content: center;
		word-break: break-all;
		
	}
	.m-right {
		display: flex;
		width: 80px;
		justify-content: center;
		align-items: flex-start;
	}
	.head_icon {
		width: 40px;
		height: 40px;
	}
	.m-content-head {
		position: relative;
		
	}
	.m-content-head-right {
		display: flex;
		justify-content: flex-end;
	}
	.m-content-head-home {
		text-align: left;
		background: #1482d1;
		border: 1px #1482d1 solid;
		border-radius: 5px;
		padding: 10px;
		color: white;
		width:fit-content;
		
	}
	.m-content-head-home:before {
		border: 15px solid transparent;
		border-right: 15px solid #1482d1;
		left: -26px;
		width: 0;
		height: 0;
		top: 21px;
		position: absolute;
		content: ' '
	}
	.m-content-head-customer {
		float: right;
		border: 1px white solid;
		background: white;
		border-radius: 5px;
		padding: 10px;
		width:fit-content;
	}
	.m-content-head-customer:after {
		border: 15px solid transparent;
		border-left: 15px solid white;
		top: 21px;
		right: -26px;
		width: 0;
		height: 0;
		position: absolute;
		content: ' '
	}
	.m-content-head-s-home{
		text-align: left;
		padding: 0.5px;
		
		
	}
	.m-content-head-s-customer{
		text-align: right;
		padding: 0.5px;
		
		
	}
</style>