|
|
@@ -0,0 +1,281 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <u-navbar title="留言"></u-navbar>
|
|
|
+ <view class="message">
|
|
|
+ <!-- <scroll-view id="scrollview" class="chat-window" scroll-y="true" :style="{height: style.contentViewHeight + 'px'}" :scroll-with-animation="true" :scroll-top="scrollTop"> -->
|
|
|
+ <view class="cu-chat">
|
|
|
+ <view class="messageRecord">
|
|
|
+ <view class="messageRecord-time">12:30</view>
|
|
|
+ <view class="messageRecord-item messageRecord-left">
|
|
|
+ <view class="messageRecord-img">
|
|
|
+ <u-avatar :src="src1" mode="square" size="80"></u-avatar>
|
|
|
+ </view>
|
|
|
+ <view class="messageRecord-news">
|
|
|
+ <h4>尼玛</h4>
|
|
|
+ <view class="messageRecord-text">
|
|
|
+ asdasd阿斯达岁的阿斯阿斯达岁的阿斯阿斯达岁的阿斯阿斯达岁的阿斯
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- <image class="messageRecord-pic" :src="src" /> -->
|
|
|
+ </view>
|
|
|
+ <view class="messageRecord-item messageRecord-right">
|
|
|
+ <view class="messageRecord-news">
|
|
|
+ <h4>尼玛</h4>
|
|
|
+ <view class="messageRecord-text">
|
|
|
+ asdasd阿斯达岁的阿斯@~~~
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- <image class="messageRecord-pic" :src="src" /> -->
|
|
|
+ <view class="messageRecord-img">
|
|
|
+ <u-avatar :src="src2" mode="square" size="80"></u-avatar>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="messageRecord-time">12:30</view>
|
|
|
+ <view class="messageRecord-item messageRecord-left">
|
|
|
+ <view class="messageRecord-img">
|
|
|
+ <u-avatar :src="src1" mode="square" size="80"></u-avatar>
|
|
|
+ </view>
|
|
|
+ <view class="messageRecord-news">
|
|
|
+ <h4>尼玛</h4>
|
|
|
+ <view class="messageRecord-text">
|
|
|
+ asdasd阿斯达岁的阿斯阿斯达岁的阿斯阿斯达岁的阿斯阿斯达岁的阿斯
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- <image class="messageRecord-pic" :src="src" /> -->
|
|
|
+ </view>
|
|
|
+ <view class="messageRecord-item messageRecord-right">
|
|
|
+ <view class="messageRecord-news">
|
|
|
+ <h4>尼玛</h4>
|
|
|
+ <view class="messageRecord-text">
|
|
|
+ asdasd阿斯达岁的阿斯@~~~
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- <image class="messageRecord-pic" :src="src" /> -->
|
|
|
+ <view class="messageRecord-img">
|
|
|
+ <u-avatar :src="src2" mode="square" size="80"></u-avatar>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="messageRecord-time">12:30</view>
|
|
|
+ <view class="messageRecord-item messageRecord-left">
|
|
|
+ <view class="messageRecord-img">
|
|
|
+ <u-avatar :src="src1" mode="square" size="80"></u-avatar>
|
|
|
+ </view>
|
|
|
+ <view class="messageRecord-news">
|
|
|
+ <h4>尼玛</h4>
|
|
|
+ <view class="messageRecord-text">
|
|
|
+ asdasd阿斯达岁的阿斯阿斯达岁的阿斯阿斯达岁的阿斯阿斯达岁的阿斯
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- <image class="messageRecord-pic" :src="src" /> -->
|
|
|
+ </view>
|
|
|
+ <view class="messageRecord-item messageRecord-right">
|
|
|
+ <view class="messageRecord-news">
|
|
|
+ <h4>尼玛</h4>
|
|
|
+ <view class="messageRecord-text">
|
|
|
+ asdasd阿斯达岁的阿斯@~~~
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- <image class="messageRecord-pic" :src="src" /> -->
|
|
|
+ <view class="messageRecord-img">
|
|
|
+ <u-avatar :src="src2" mode="square" size="80"></u-avatar>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="messageRecord-time">12:30</view>
|
|
|
+ <view class="messageRecord-item messageRecord-left">
|
|
|
+ <view class="messageRecord-img">
|
|
|
+ <u-avatar :src="src1" mode="square" size="80"></u-avatar>
|
|
|
+ </view>
|
|
|
+ <view class="messageRecord-news">
|
|
|
+ <h4>尼玛</h4>
|
|
|
+ <view class="messageRecord-text">
|
|
|
+ asdasd阿斯达岁的阿斯阿斯达岁的阿斯阿斯达岁的阿斯阿斯达岁的阿斯
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- <image class="messageRecord-pic" :src="src" /> -->
|
|
|
+ </view>
|
|
|
+ <view class="messageRecord-item messageRecord-right">
|
|
|
+ <view class="messageRecord-news">
|
|
|
+ <h4>尼玛</h4>
|
|
|
+ <view class="messageRecord-text">
|
|
|
+ asdasd阿斯达岁的阿斯@~~~
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- <image class="messageRecord-pic" :src="src" /> -->
|
|
|
+ <view class="messageRecord-img">
|
|
|
+ <u-avatar :src="src2" mode="square" size="80"></u-avatar>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- </scroll-view> -->
|
|
|
+ <view class="messageInput">
|
|
|
+ <view class="messageInput-box">
|
|
|
+ <u-input maxlength="300" />
|
|
|
+ </view>
|
|
|
+ <view class="messageInput-btn">
|
|
|
+ <u-icon custom-prefix="custom-icon" name="send-plane-fill" color="#fff"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ src1: '/static/img/sexMan.png',
|
|
|
+ src2:'/static/img/sexWoman.png',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ page{
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ }
|
|
|
+ .messageRecord-news h4{
|
|
|
+ margin-bottom: 5px;
|
|
|
+ font-weight: normal;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ .message-head{
|
|
|
+ background-color: #fff;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ height: 120rpx;
|
|
|
+ .message-head-item{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ span{
|
|
|
+ margin-top:6rpx;
|
|
|
+ font-size: 20rpx;
|
|
|
+ color:#666;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .message{
|
|
|
+ // height: calc(100vh - 288rpx);
|
|
|
+ overflow-y: auto;
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ position: relative;
|
|
|
+ padding: 30rpx;
|
|
|
+ padding-bottom: 80px;
|
|
|
+ .messageRecord{
|
|
|
+ .messageRecord-item{
|
|
|
+ margin-bottom: 40rpx;
|
|
|
+ }
|
|
|
+ .messageRecord-pic{
|
|
|
+ width:auto;
|
|
|
+ border-radius: 5px;
|
|
|
+ overflow: hidden;
|
|
|
+ max-height: 120px;
|
|
|
+ }
|
|
|
+ .messageRecord-img{
|
|
|
+ overflow: hidden;
|
|
|
+ height: 80rpx;
|
|
|
+ min-width:100rpx;
|
|
|
+ }
|
|
|
+ .messageRecord-text{
|
|
|
+ background-color: #fff;
|
|
|
+ padding:18rpx 30rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ min-height:40px ;
|
|
|
+ position: relative;
|
|
|
+ margin-left: 5px;
|
|
|
+ }
|
|
|
+ .messageRecord-left{
|
|
|
+ display: flex;
|
|
|
+ .messageRecord-text::after{
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ left: -8px;
|
|
|
+ top: 10px;
|
|
|
+ border-top: 10px solid transparent;
|
|
|
+ border-right: 8px solid #fff;
|
|
|
+ border-bottom: 10px solid transparent;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .messageRecord-right{
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ position: relative;
|
|
|
+ .messageRecord-img{
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+ .messageRecord-news h4{
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+ .messageRecord-text{
|
|
|
+ background: #ff5e5e;
|
|
|
+ color:#fff;
|
|
|
+ position: relative;
|
|
|
+ margin-right: 5px;
|
|
|
+ &:after{
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ right: -8px;
|
|
|
+ top: 10px;
|
|
|
+ border-top: 10px solid transparent;
|
|
|
+ border-left: 8px solid #ff5e5e;
|
|
|
+ border-bottom: 10px solid transparent;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .messageInput{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ position: fixed;
|
|
|
+ padding: 20rpx;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom:0;
|
|
|
+ background-color: #fff;
|
|
|
+ min-height: 50rpx;
|
|
|
+ border-top: 1px solid #eee;
|
|
|
+ }
|
|
|
+ .u-size-mini{
|
|
|
+ height:56rpx!important;
|
|
|
+ padding: 0 24rpx!important;
|
|
|
+ }
|
|
|
+ .messageInput-box{
|
|
|
+ flex: 1;
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ border-radius:32rpx;
|
|
|
+ margin: 0 20rpx;
|
|
|
+ padding-left: 20px;
|
|
|
+ }
|
|
|
+ .messageRecord-time{
|
|
|
+ text-align: center;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color:#999;
|
|
|
+ margin: 30rpx 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .u-input--border{
|
|
|
+ border:none;
|
|
|
+ }
|
|
|
+ .messageInput-btn{
|
|
|
+ background-color: #ff5e5e;
|
|
|
+ height: 28px;
|
|
|
+ width: 28px;
|
|
|
+ border-radius: 50%;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 28px;
|
|
|
+ }
|
|
|
+</style>
|
