小程序和web端聊天界面样式

小程序端：

<template>
	<view   style="display: flex;flex-direction: column;height: 100vh;border: 1px solid lightgray;border-radius: 5px;">
		<scroll-view scroll-y style="flex: 1;overflow: auto;">
			<view style="padding: 0 20rpx;">
				<view style="text-align: left;" v-for="(item,index) in chatList" :key="index">
					<view v-if="item.type === 0" style="
					margin-bottom: 5px;padding:5px 5px 5px 5px;display: flex;justify-content: left;align-items: flex-start;"  >
						<image src="../../../static/images/tabbar/mine.png"
						style="width: 25px;height: 25px;"></image>
						<view  style="vertical-align: top;width: 60%;border: 1px solid;border-radius: 5px;
						background-color: #b4dbff;padding: 3px 3px 3px 3px;">{{item.msg}}</view>
						<image v-if="false" src="../../../static/images/icon/default.png"
						style="width: 100px;height: 100px;"></image>
					</view>
					<view v-if="item.type === 1" style="
					margin-bottom: 5px;padding:5px 5px 5px 5px;display: flex;align-items: top;justify-content:flex-end;">
						<image v-if="false" src="../../../static/images/icon/default.png"
						style="width: 100px;height: 100px;"></image>
						<view  style="vertical-align: top;width: 60%;border: 1px solid;border-radius: 5px;
						background-color: #b4dbff;padding: 3px 3px 3px 3px;">{{item.msg}}</view>
						<image src="../../../static/images/tabbar/mine.png"
						style="width: 25px;height: 25px;margin-right: 2px;"></image>
					</view>
				</view>
			</view>
		</scroll-view>
		<view style="background-color: ghostwhite;border: 1px solid lightgray;border-radius: 5px;
		min-height: 60px;
		position:sticky;bottom: 0;display: flex;justify-content: center;align-items: center;">
			<textarea focus maxlength="-1" auto-height placeholder="请输入..." 
			style="padding: 6px 6px 6px 6px;text-align: left;border: 1px solid lightgray;border-radius: 5px;margin-left: 5px;
			width: 70%;line-height: 15px;font-size: 12px;margin: 6px 6px 6px 6px;min-height: 30px;max-height: 100px;"
			@input="getContent($event)" v-model="value"/>
			<button type="primary" size="mini" style="width: 60px;height: 27px;font-size: 11px;"
			v-if="btnshow">发送</button>
			<image src="../../../static/images/icon/send.png" style="width: 30px;height: 30px;"
			 @click="open"></image>
			<uni-popup ref="popup"
			style="background-color: #fff;">
				<view style="height: 100%;flex: 1;
				background-color: #fff;
				padding: 4px 4px 4px 4px;">
					<view style="text-align: right;" @click="close">关闭</view>
					<view style="align-items: center;justify-content: left;display: flex;flex-direction: row;">
						<image src="../../../static/images/icon/photograph.png"
						style="width: 30px;height: 30px;margin-right: 8px;"></image>
						<image src="../../../static/images/icon/phone.png"
						style="width: 30px;height: 30px;margin-right: 8px;"></image>
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value:'',
				btnshow:false,
				userinfo:{},
				chatList:[{type:0,msg:'奥斯卡打瑟瑟发奥斯卡打瑟瑟发抖发送的开速度好看奥斯卡打瑟瑟发抖发送的开速度好看抖发送的开速度好看'},{type:0,msg:'奥斯卡打开速度好看'},{type:0,msg:'奥斯卡打开速度好看'},
				,{type:1,msg:'奥斯卡打开速释放锁度好看'},{type:0,msg:'奥斯卡打开萨达萨达十大速度好看'},{type:0,msg:'奥斯萨达萨达十大是大卡打开速度好看'},{type:0,msg:'奥斯卡打开速度好看'},
				,{type:1,msg:'奥斯卡打开速撒打算打算度好看'},{type:0,msg:'奥斯卡打开速撒大声地打算多所度好看'},{type:0,msg:'奥斯卡打开速度好看'}],
			}
		},
		onLoad:function(option){
			/* const item = JSON.parse(decodeURIComponent(option.userinfo))
			if(item){
				this.userinfo=item;
			} */
		},
		methods: {
			open(){
				this.$refs.popup.open('bottom')
			},
			close(){
				this.$refs.popup.close();
			},
			getContent(e){
				if(e){
				    this.btnshow=true;
				}else{
					this.btnshow=false;
					this.inputHeight=30;
				}
			},
		}
	}
</script>

<style>
<style>

web端：

<template>
  <div class="app-container">
    <div class="left">
      <div v-for="(i,index) in 15" class="user" :key="index" :id='content(index)' @click="select(index)">
        <img src="../../../assets/logo/logo.png" :class="{avataronline:onlinestatus==1,avataroffline:onlinestatus==0}"/>
        <span class="nickName">清风霁月</span>
        <span class="time">2023-02-01 12:12:12</span>
        <div class="msgcontent">
          <span class="msg">新消息提醒</span>
          <span class="msgtotal">12</span>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="header">
        <img src="../../../assets/logo/logo.png" class="avatar"/>
        <span class="nickName">清风霁月</span>
      </div>
      <div class="center" >
        <div v-for="i in 15">
          <div class="leftcontent">
            <div class="time">2023-12-23 23:23:23</div>
            <div class="leftimg">
              <img src="../../../assets/logo/logo.png"  class="leftavatar"/>
            </div>
            <div class="leftmsg">
              <span v-if="false" >内容a是发送到发的是否发送发送的是发送到发的是否发送发送的
              是发送到发的是否发送发送的是发送到发的是否发送发送的
              是发送到发的是否发送发送的是发送到发的是否发送发送的是发送到发的是否发送发送的
              是发送到发的是否发送发送的是发送到发的是否发送发送的是发送到发的是否发送发送的是发送到发的是否发送发送的
              是发送到发的是否发送发送的</span>
              <img  src="../../../assets/logo/logo.png" class="imgcontent"/>
            </div>
          </div>
          <div class="rightcontent">
            <div class="time">2023-12-23 23:23:23</div>
            <img src="../../../assets/logo/logo.png" class="rightavatar"/>
            <div class="rightmsg">
              <span>是发送到发的是否发送发送的</span>
              <img  v-if="false"  src="../../../assets/logo/logo.png" class="imgcontent"/>
            </div>
          </div>
        </div>
      </div>
      <div class="footer">
        <el-input v-model="input" class="input"
        placeholder="请输入..." autosize type="textarea"
        :autosize="{minRows:2,maxRows:3}" autofocus/>
        <el-button type="primary" size="medium">发送</el-button>
        <img class="phone"  src="../../../assets/icons/photo.png"/>
      </div>
    </div>
  </div>
</template>

<script>
  import {getUser,getInfo} from '@/api/blog/reception/user'
  export default {
      name: "MsgLetter",
      data() {
        return {
          blogUser:{},
          loginUser:{},
          onlinestatus:1,
          input:'',
        }
      },
      created() {
        const blogUserId = this.$route.params && this.$route.params.blogUserId;
        this.getBlogUser(blogUserId);
        this.getLoginUser();
      },
      methods:{
        content(index){
          return 'content'+index;
        },
        select(index){
          var id='content'+index;
          document.getElementById(id).style.backgroundColor='#b4bedd'
          for(var i=0;i < 15;i++){
            if(i != index){
              var id='content'+i;
              document.getElementById(id).style.backgroundColor='#dee2f3'
            }
          }
        },
        getLoginUser(){
          getInfo().then(response=>{
            console.log("loginuser:"+JSON.stringify(response.data))
            this.loginUser=response.data;
          })
        },
        getBlogUser(blogUserId){
          getUser(blogUserId).then(response=>{
            console.log("user:"+JSON.stringify(response.data))
            this.blogUser=response.data;
          })
        }
      }
  }
</script>

<style lang="scss">
  ::-webkit-scrollbar{
    display: none;
  }
  .app-container{
    border-radius: 4px;
    padding:2px 2px 2px 2px;
    height:100%;
    .left{
      background-color: #dee2f3;
      width:15%;
      height:100%;
      float:left;
      overflow: scroll;
      .user{
        height:10%;
        border-right: 1px solid lightgray;
        border-bottom: 1px solid lightgray;
        .avataronline{
          width:40px;
          height:40px;
          border-radius: 50px;
          margin:3px 3px 3px 3px;
          vertical-align: middle;
          background-color: #95b3f3;
        }
        .avataroffline{
          width:40px;
          height:40px;
          border-radius: 50px;
          margin:3px 3px 3px 3px;
          vertical-align: middle;
          background-color: #95b3f3;

          -webkit-filter:grayscale(100%);
          -o-filter:grayscale(100%);
          -moz-filter:grayscale(100%);
          -ms-filter:grayscale(100%);
          filter:grayscale(100%);
          filter:gray;
        }
        .nickName{
        }
        .time{
          margin:15px 5px 3px 3px;
          float:right;
          color:dimgray;
        }
        .msgcontent{
          padding:3px 3px 3px 3px;
          .msg{
            padding-left: 10px;
            float:left;
            color:#717171;
          }
          .msgtotal{
            display: inline-block;
            margin-right: 3px;
            margin-bottom: 5px;
            float:right;
            background-color: red;
            border-radius: 50%;
            padding:3px 3px 3px 3px;
          }
        }

      }
    }
    .right{
      width:85%;
      height:100%;
      float:left;
      .header{
        height:8%;
        background-color: #dee2f3;
        .avatar{
          width:40px;
          height:40px;
          border-radius: 50px;
          margin:10px 8px 10px 10px;
          vertical-align: middle;
          background-color: #95b3f3;
        }
      }
      .center{
        overflow: scroll;
        background-color: whitesmoke;
        height:80%;
        .leftcontent{
          background-color: whitesmoke;
          height:auto;
          padding:5px 5px 5px 5px;
          .time{
            color:lightgray;
            margin:5px 5px 5px 5px;
            padding:5px 5px 5px 5px;
            text-align: center;
          }
          .leftimg{
             float:left;
            .leftavatar{
              width:40px;
              height:40px;
              border-radius: 50px;
              background-color: #95b3f3;
            }
          }
          .leftmsg{
            padding:5px 5px 5px 5px;
            margin-left: 20px;
            float:left;
            background-color: #4c7ef3;
            width:auto;
            max-width:60%;
            border-radius: 5px;
            letter-spacing: 0.1em;
            position: relative;
            .imgcontent{
              width:150px;
              height:150px;
            }
          }
          .leftmsg:before{
            content:'';
            position: absolute;
            left:-10px;
            top:calc();
            border-top: 6px solid transparent;
            border-bottom:  6px solid transparent;
            border-right: 10px solid #ccc;
          }
        }
        .leftcontent:after{
          content:'.';
          display:block;
          height:0;
          clear:both;
          visibility: hidden;
        }
        .rightcontent:after{
          content:'.';
          display:block;
          height:0;
          clear:both;
          visibility: hidden;
        }
        .rightcontent{
          background-color: whitesmoke;
          height:auto;
          padding:5px 5px 5px 5px;
          .time{
            color:lightgray;
            margin:5px 5px 5px 5px;
            padding:5px 5px 5px 5px;
            text-align: center;
          }
          .rightavatar{
            margin-top:5px;
            margin-right: 5px;
            float:right;
            width:40px;
            height:40px;
            border-radius: 50px;
            background-color: #95b3f3;
          }
          .rightmsg{
            padding:5px 5px 5px 5px;
            margin-top:5px;
            text-align: left;
            width:auto;
            max-width:60%;
            background-color: #95b3f3;
            float:right;
            margin-right: 20px;
            border-radius: 5px;
            margin-bottom: 5px;
            letter-spacing: 0.1em;
            position: relative;
            .imgcontent{
              width:150px;
              height:150px;
            }
          }
          .rightmsg:before{
            content:'';
            position: absolute;
            right:-10px;
            top:calc();
            border-top: 6px solid transparent;
            border-bottom:  6px solid transparent;
            border-left: 10px solid #ccc;
          }
        }
      }
      .footer{
        background-color: #e6e6e6;
        height:12%;
        display: flex;
        justify-content: center;
        align-items: center;
        .input{
          width:80%;
          min-height:70%;
          border-radius: 5px;
          margin-right: 10px;
        }
        .phone{
          margin-left:5px;
          width:38px;
          height:38px;
        }
      }

    }
  }
</style>