赞
踩
- <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>
效果图:
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。