sannongzixunwang_web/components/zhinengqwnda.vue

<template>
    <div>
        <div class="head">
            <img src="../static/ai/headLogo.png" alt="" class="logo">
            <span>智能问答</span>
            <img src="../static/ai/down.png" class="rightDown">
        </div>
        <div class="context">
            <el-scrollbar height="345px">
                <!-- <p v-for="item in 50" :key="item" class="scrollbar-demo-item">{{ item }}</p> -->
                <p class="start">2025-01-20 09:35:30 开始沟通</p>
                <div class="aiSpeak">
                    <img src="../static/ai/headLogo.png" alt="" class="ailogo">
                    <div class="reply">
                        <span class='time'>2025-01-20 09:35:30</span>
                        <p>你好呀！很高兴见到你。无论是想聊聊天、寻求帮助还是探讨问题，我都在这儿等着陪你呢！有什么我可以帮你的吗？ </p>
                    </div>
                </div>
                <div class="userSpeak">
                    <div class="reply">
                        <span class='time'>2025-01-20 09:35:30</span>
                        <p>你好呀！很高兴见到你。无论是想聊聊天、寻求帮助还是探讨问题，我都在这儿等着陪你呢！有什么我可以帮你的吗？ </p>
                    </div>
                    <img src="../static/ai/headLogo.png" alt="" class="user">
                </div>
                <!-- <div class="userSpeak">
                    <div class="reply">
                        <span class='time'>2025-01-20 09:35:30</span>
                        <p>你好呀！很高兴见到你。无论是想聊聊天、寻求帮助还是探讨问题，我都在这儿等着陪你呢！有什么我可以帮你的吗？ </p>
                    </div>
                    <img src="../static/ai/headLogo.png" alt="" class="user">
                </div> -->
                <div class="aiSpeak">
                    <img src="../static/ai/headLogo.png" alt="" class="ailogo">
                    <div class="reply">
                        <span class='time'>2025-01-20 09:35:30</span>
                        <p>你好呀！很高兴见到你。无论是想聊聊天、寻求帮助还是探讨问题，我都在这儿等着陪你呢！有什么我可以帮你的吗？ </p>
                    </div>
                </div>
                <!-- <div class="userSpeak">
                    <div class="reply">
                        <span class='time'>2025-01-20 09:35:30</span>
                        <p>你好呀！很高兴见到你。无论是想聊聊天、寻求帮助还是探讨问题，我都在这儿等着陪你呢！有什么我可以帮你的吗？ </p>
                    </div>
                    <img src="../static/ai/headLogo.png" alt="" class="user">
                </div> -->
            </el-scrollbar>
        </div>
        <div class="buttom">
            <el-input v-model="textarea" :rows="4" type="textarea" placeholder="请简短描述你的问题" resize="none" />
            <button class="submit">发送</button>
        </div>

    </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElScrollbar, ElInput } from 'element-plus'
const textarea = ref('')
</script>

<style lang="less" scoped>
.head {
    height: 74px;
    line-height: 74px;
    width: 100%;
    background-color: #19499F;
    color: #fff;
    font-size: 16px;

    .logo {
        width: 40px;
        height: 40px;
        margin-left: 20px;
        margin-right: 10px;
        vertical-align: middle;
    }

    .rightDown {
        float: right;
        margin-right: 15px;
        margin-top: 25px;
    }
}

.context {
    .start {
        font-family: Microsoft YaHei, Microsoft YaHei;
        color: #7E7E80;
        font-size: 12px;
        margin-top: 15px;
        text-align: center;
    }
    .aiSpeak{
        width: auto;
        // overflow: hidden;
        margin-top:30px;
        margin-right:80px;

        .ailogo{
            float: left;
            width: 30px;
            height: 30px;
            border: 1px solid #19499F;
            margin-left: 15px;
            margin-right: 10px;
            box-sizing: border-box;
        }
        .reply{
            // float: left;
            .time{
                font-family: Microsoft YaHei, Microsoft YaHei;
                font-weight: 400;
                font-size: 14px;
                color: #B1B1B1;
                line-height: 16px;
            }
            >p{
                width:222px;
                overflow: hidden;
                padding: 15px 20px;
                margin-top: 5px;
                box-sizing: border-box;
                background-color: #f5f5f5;
                font-family: Microsoft YaHei, Microsoft YaHei;
                font-weight: 400;
                font-size: 14px;
                color: #333333;
                line-height: 15px;
            }

        }
    }
    .userSpeak{
        // overflow: hidden;
        margin-top:30px;
        margin-left: 80px;
        float: right;
       
        .reply{
            float: left;
            .time{
                font-family: Microsoft YaHei, Microsoft YaHei;
                font-weight: 400;
                font-size: 14px;
                color: #B1B1B1;
                line-height: 16px;
            }
            >p{
                width:222px;
                overflow: hidden;
                padding: 15px 20px;
                margin-top: 5px;
                box-sizing: border-box;
                background-color: #f5f5f5;
                font-family: Microsoft YaHei, Microsoft YaHei;
                font-weight: 400;
                font-size: 14px;
                color: #333333;
                line-height: 15px;
            }

        }
        .user{
            float: left;
            width: 30px;
            height: 30px;
            border: 1px solid #19499F;
            margin-right: 15px;
            margin-left: 10px;
            box-sizing: border-box;
        }
    }
}

.buttom {
    height: 135px;
    width: 100%;
    background-color: #fff;
    border-top: 1px solid #ccc;

    .submit {
        width: 48px;
        height: 28px;
        background-color: #19499F;
        color: #fff;
        border: none;
        border-radius: 5px;
        float: right;
        margin-bottom: 20px;
        margin-right: 20px;
    }
}

:deep(.el-textarea__inner:hover) {
    box-shadow: none;
}

:deep(.el-textarea__inner) {
    box-shadow: none;
}

:deep(.el-textarea__inner:focus) {
    box-shadow: none;
}
</style>