<template>
<div class="achievements">
<el-card>
<div slot="header" class="title">框架</div>
<div class="content">
<el-tabs v-model="activeTab">
<el-tab-pane label="聊天界面">
<div class="chat">
<!-- 聊天界面内容 -->
</div>
<el-input
v-model="inputMessage"
placeholder="请输入消息"
clearable
@keyup.enter.native="sendMessage"
></el-input>
</el-tab-pane>
<el-tab-pane label="常见问题解答">
<div class="faq">
<!-- 常见问题解答内容 -->
</div>
</el-tab-pane>
</el-tabs>
</div>
</el-card>
</div>
</template>
<script>
export default {
data() {
return {
activeTab: '聊天界面'
}
}
}
</script>
<style scoped>
.achievements {
margin: 20px;
}
.title {
font-size: 18px;
font-weight: bold;
}
.content {
margin-top: 20px;
}
.chat {
height: 300px;
background-color: #f5f5f5;
}
.faq {
height: 300px;
background-color: #f5f5f5;
}
</style>
效果图: