wallet_app/src/views/im/chat/index.vue

<template>
    <div class="container">
        <div class="chat-bg"></div>
        <div class="header-chat">
            <svg-icon class="page-icon" name="lf-arrow" @click="goBack"/>
            <div class="header-title">群聊（8）</div>
            <svg-icon class="page-icon" name="more"  @click="goDetail"/>
        </div>
        <div class="chat-list">
            <div v-for="(item,index) in 2">
                <div class="chat-time">23:{{ 20+index }}</div>
                <div class="box" v-for="(text,i) in 10">
                    <div class="list-item" :class="i % 2 === 0 ? '' : 'flex-reverse'">
                        <van-image class="list-img" :class="i % 2 === 0 ? 'mr12' : 'ml12'" round src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"/>
                        <div class="list-cont">
                            <div :class="i % 2 === 0 ? '' : 'text-right'">苏苏编号</div>
                            <!-- 名片 -->
                            <div class="business-card" v-if="i % 2 === 0">
                                <div class="business-card-cont">
                                    <van-image class="list-img mr12" round src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"/>
                                    <div>名字名字</div>
                                </div>
                                <div class="line"></div>
                                <div class="business-card-text">个人名片</div>
                            </div>
                            <!-- 文本信息 -->
                            <div class="content" v-if="i % 2 !== 0">文本信息文本信息文本信息文本信息文本信息文本信息文本信息文本信息</div>
                        </div>
                    </div>
                     <!--消息撤回 -->
                     <div class="withdrawal">
                        <div class="withdrawal-text">哈哈哈撤回了一条消息</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 输入框 -->
        <div class="page-foot">
            <div class="flex-box">
                <svg-icon class="page-icon" name="voice" />
                <van-field 
                    rows="1" 
                    type="textarea" 
                    :border="false" 
                    autosize class="input" v-model="text" placeholder="输入文本"
                />
                <svg-icon class="page-icon mr12" name="emoji" />
                <svg-icon class="page-icon" name="add2" />
            </div>
        </div>
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter();


const text = ref('')
const goBack = () => {
    router.push('im')
}
const goDetail = () => {
    router.push('detail')
}
</script>

<style lang="less" scoped>
.mr12{
    margin-right: 12px;
}
.ml12{
    margin-left: 12px;
}
.text-right{
    text-align: right;
}
.page-icon{
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}
.container{
    height: 100vh;
    display: flex;
    flex-direction: column;
    .chat-bg{
        height: 126px;
        background: linear-gradient( 90deg, @theme-color1 0%, #40A4FB 100%);
        position: absolute;
        left: 0;
        right: 0;
        z-index: -1;
    }
    .header-chat{
        padding-top: 56px;
        margin: 0 16px;
        display: flex;
        align-items: center;
        color: @theme-color1;
        .header-title{
            flex: 1;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 19px;
            color: #FFFFFF;
            text-align: center;
        }
    }
    .chat-list{
        background: #F7F8FA;
        border-radius: 30px 30px 0 0;
        flex: 1;
        overflow: auto;
        margin-top: 20px;
        padding:0 16px 24px;
        .chat-time{
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 12px;
            color: #8D8D8D;
            text-align: center;
            margin: 20px 0;
        }
        .box{
            .list-item{
                display: flex;
                margin-bottom: 24px;
                .list-img{
                    width: 44px;
                    height: 44px;
                    flex-shrink: 0;
                }
                .list-cont{
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 400;
                    font-size: 12px;
                    color: #8D8D8D;
                    .business-card{
                        width: 199px;
                        height: 93px;
                        background: #FFFFFF;
                        border-radius: 10px;
                        margin-top: 8px;
                        padding: 10px;
                        box-sizing: border-box;
                        .business-card-cont{
                            display: flex;
                            align-items: center;
                            font-family: PingFang SC, PingFang SC;
                            font-weight: 400;
                            font-size: 15px;
                            color: #000000;
                        }
                        .line{
                            height: 1px;
                            background: #F2F2F2;
                            margin: 10px 0 6px;
                        }
                        .business-card-text{
                            font-family: PingFang SC, PingFang SC;
                            font-weight: 400;
                            font-size: 10px;
                            color: #8D8D8D;
                        }
                    }
                    .content{
                        max-width: 230px;
                        background: #4D71FF;
                        border-radius: 10px;
                        margin-top: 8px;
                        padding: 8px 17px;
                        font-family: PingFang SC, PingFang SC;
                        font-weight: 400;
                        font-size: 15px;
                        color: #FFFFFF;
                    }
                } 
            }
            .withdrawal{
                display: flex;
                justify-content: center;
                margin-bottom: 24px;
                .withdrawal-text{
                    width: 142px;
                    height: 29px;
                    line-height: 29px;
                    box-sizing: border-box;
                    background: #F2F2F2;
                    border-radius: 4px;
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 400;
                    font-size: 12px;
                    color: #8D8D8D;
                    text-align: center;
                }
            }
            .flex-reverse{
                flex-direction: row-reverse;
            }
        }
    }
    .chat-list::-webkit-scrollbar{
        width: 0;
    }
    .page-foot{
        position: relative;
		background-color: #fff;
        .flex-box {
            padding: 8px 16px;
			display: flex;
			align-items: center;
            box-sizing: border-box;
            .input{
                flex: 1;
                background: #F2F2F2;
                border-radius: 17px;
                border: 1px solid #D8D8D8;
                padding: 6px 16px;
                font-weight: 500;
                font-size: 15px;
                margin: 0 12px;
                overflow-y: auto;
            }
        }
    }
}
</style>