|
@@ -1,162 +1,117 @@
|
|
|
<template>
|
|
|
- <div
|
|
|
- class="main_right_height"
|
|
|
- style="background: #f1f1f1; position: relative"
|
|
|
- >
|
|
|
- <el-row style="background: #ffffff">
|
|
|
- <el-col :span="1"> </el-col>
|
|
|
- <el-col :span="22">
|
|
|
- <span class="musicTitle"
|
|
|
- >智能对话<span class="refrshSmart"
|
|
|
- ><i
|
|
|
- class="el-icon-refresh"
|
|
|
- title="刷新"
|
|
|
- @click="init('start')"
|
|
|
- ></i></span
|
|
|
- ></span>
|
|
|
- <!-- <el-col :span="11">
|
|
|
- <span class="musicTitle" >智能对话</span></el-col
|
|
|
- > -->
|
|
|
- <!-- <el-col :span="11"
|
|
|
- ><span class="musicTitle" >刷新</span></el-col
|
|
|
- > -->
|
|
|
-
|
|
|
- <!-- <i
|
|
|
- class="el-icon-arrow-left"
|
|
|
- style="cursor: pointer"
|
|
|
- @click="goBack()"
|
|
|
- ></i> -->
|
|
|
-
|
|
|
- <el-divider></el-divider>
|
|
|
- </el-col>
|
|
|
- <el-col :span="1"> </el-col>
|
|
|
- </el-row>
|
|
|
- <el-row
|
|
|
- id="contant1"
|
|
|
- style="
|
|
|
- height: 66vh !important;
|
|
|
- display: block !important;
|
|
|
- overflow-y: auto !important;
|
|
|
- "
|
|
|
- >
|
|
|
- <el-col :span="1"> </el-col>
|
|
|
- <el-col :span="22">
|
|
|
- <div class="chat-window">
|
|
|
- <div
|
|
|
- class="chat-msg-content"
|
|
|
- id="rongqi"
|
|
|
- v-for="content in chatContents"
|
|
|
- :key="content.index"
|
|
|
- >
|
|
|
+ <div class="main_right_height">
|
|
|
+ <div class="smart_content">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="1"> </el-col>
|
|
|
+ <el-col :span="22">
|
|
|
+ <div class="chat-window" id="contant1">
|
|
|
<div
|
|
|
- v-if="content.from == 1"
|
|
|
- :key="content.id"
|
|
|
- class="main_answer_right"
|
|
|
- style="margin-top: 10px"
|
|
|
+ class="chat-msg-content"
|
|
|
+ id="rongqi"
|
|
|
+ v-for="content in chatContents"
|
|
|
+ :key="content.index"
|
|
|
>
|
|
|
- <div class="img-wrapper">
|
|
|
- <img
|
|
|
- width="60px"
|
|
|
- heigth="60px"
|
|
|
- class="img"
|
|
|
- style="border-radius: 50%"
|
|
|
- :src="from1"
|
|
|
- />
|
|
|
- </div>
|
|
|
- <div class="message-wrapper message-wrapper-left">
|
|
|
- <div class="message">{{ content.question }}</div>
|
|
|
+ <div
|
|
|
+ v-if="content.from == 1"
|
|
|
+ :key="content.id"
|
|
|
+ class="main_answer_right"
|
|
|
+ style="margin-top: 10px"
|
|
|
+ >
|
|
|
+ <div class="img-wrapper">
|
|
|
+ <img width="60px" heigth="60px" class="img" :src="from1" />
|
|
|
+ </div>
|
|
|
+ <div class="message-wrapper message-wrapper-left">
|
|
|
+ <div class="message">{{ content.question }}</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <el-row v-else style="margin-top: 10px">
|
|
|
- <el-col :span="10"> </el-col>
|
|
|
- <el-col :span="14">
|
|
|
- <div class="main_answer_left" style="float: right">
|
|
|
- <div class="message-wrapper message-wrapper-right">
|
|
|
- <div class="message">{{ content.answer }}</div>
|
|
|
+ <el-row v-else style="margin-top: 10px">
|
|
|
+ <el-col :span="10"> </el-col>
|
|
|
+ <el-col :span="14">
|
|
|
+ <div class="main_answer_left" style="float: right">
|
|
|
+ <div class="message-wrapper message-wrapper-right">
|
|
|
+ <div class="message">{{ content.answer }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="img-wrapper">
|
|
|
+ <img
|
|
|
+ width="60px"
|
|
|
+ heigth="60px"
|
|
|
+ class="img"
|
|
|
+ :src="from2"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="img-wrapper">
|
|
|
- <img width="60px" heigth="60px" class="img" :src="from2" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="1"> </el-col>
|
|
|
- </el-row>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="1"> </el-col>
|
|
|
+ </el-row>
|
|
|
|
|
|
- <el-row v-show="inputFlag === 1" class="footSend">
|
|
|
- <el-col :span="1"> </el-col>
|
|
|
- <el-col :span="21">
|
|
|
- <el-input
|
|
|
- class="xl_input"
|
|
|
- placeholder="请输入内容"
|
|
|
- v-model="desc"
|
|
|
- @keyup.enter.native="sendMsg"
|
|
|
- clearable
|
|
|
- >
|
|
|
- </el-input>
|
|
|
- </el-col>
|
|
|
- <el-col :span="2" style="">
|
|
|
- <!-- <i style="line-height:138px" title="发送" @click="sendMsg" class="el-icon-s-promotion"></i
|
|
|
- > -->
|
|
|
-
|
|
|
- <el-button
|
|
|
- icon="el-icon-s-promotion "
|
|
|
- :disabled="!sendMsgFlag"
|
|
|
- class="xl_d_send"
|
|
|
- circle
|
|
|
- @click="sendMsg"
|
|
|
- ></el-button>
|
|
|
- <!-- <i style='' class="el-icon-s-promotion " ></i> -->
|
|
|
- <!-- <el-button
|
|
|
- size="mini"
|
|
|
- title="发送"
|
|
|
- class="xl_d_button"
|
|
|
- @click="sendMsg"
|
|
|
- >发送</el-button
|
|
|
- > -->
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <el-row v-show="inputFlag === 2" class="footSendSelect">
|
|
|
- <el-col :span="1"> </el-col>
|
|
|
- <el-col :span="22" style="margin-top: 20px;margin-bottom: 20px">
|
|
|
- <div>
|
|
|
- <el-radio
|
|
|
- style="margin-top: 10px"
|
|
|
- v-for="(item, index) in scale_checkItems"
|
|
|
- :key="index"
|
|
|
- v-model="radio"
|
|
|
- :label="item"
|
|
|
- fill="#57ACBB"
|
|
|
- @change="selectRadio(item)"
|
|
|
- >{{ item }}</el-radio
|
|
|
- >
|
|
|
- </div></el-col
|
|
|
- >
|
|
|
- <el-col :span="1"> </el-col>
|
|
|
- </el-row>
|
|
|
- <el-row v-show="inputFlag === 3" class="footSendSelect">
|
|
|
- <el-col :span="1"> </el-col>
|
|
|
- <el-col :span="22" style="margin-top: 20px;margin-bottom:20px">
|
|
|
- <div>
|
|
|
- <el-radio
|
|
|
- :disabled="!scaleSelectFlag"
|
|
|
- style="margin-top: 10px"
|
|
|
- v-for="(item, index) in scale_checkItems"
|
|
|
- :key="index"
|
|
|
- v-model="radio"
|
|
|
- :label="item"
|
|
|
- fill="#57ACBB"
|
|
|
- @change="choiceTriger(item)"
|
|
|
- >{{ item }}</el-radio
|
|
|
+ <el-row v-show="inputFlag === 1" class="footSend">
|
|
|
+ <el-col :span="1"> </el-col>
|
|
|
+ <el-col :span="21">
|
|
|
+ <el-input
|
|
|
+ class="xl_input"
|
|
|
+ type="textarea"
|
|
|
+ resize="none"
|
|
|
+ placeholder="请输入内容"
|
|
|
+ v-model="desc"
|
|
|
+ show-word-limit
|
|
|
+ @keyup.enter.native="sendMsg"
|
|
|
+ clearable
|
|
|
>
|
|
|
- </div></el-col
|
|
|
- >
|
|
|
- <el-col :span="1"> </el-col>
|
|
|
- </el-row>
|
|
|
+ </el-input>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="2" style="">
|
|
|
+
|
|
|
+ <el-button
|
|
|
+
|
|
|
+ :disabled="!sendMsgFlag"
|
|
|
+ class="xl_d_send"
|
|
|
+
|
|
|
+ @click="sendMsg"
|
|
|
+ >发送</el-button>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row v-show="inputFlag === 2" class="footSendSelect">
|
|
|
+ <el-col :span="1"> </el-col>
|
|
|
+ <el-col :span="22" style="margin-top: 20px; margin-bottom: 20px">
|
|
|
+ <div>
|
|
|
+ <el-radio
|
|
|
+ style="margin-top: 10px"
|
|
|
+ v-for="(item, index) in scale_checkItems"
|
|
|
+ :key="index"
|
|
|
+ v-model="radio"
|
|
|
+ :label="item"
|
|
|
+ fill="#57ACBB"
|
|
|
+ @change="selectRadio(item)"
|
|
|
+ >{{ item }}</el-radio
|
|
|
+ >
|
|
|
+ </div></el-col
|
|
|
+ >
|
|
|
+ <el-col :span="1"> </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row v-show="inputFlag === 3" class="footSendSelect">
|
|
|
+ <el-col :span="1"> </el-col>
|
|
|
+ <el-col :span="22" style="margin-top: 20px; margin-bottom: 20px">
|
|
|
+ <div>
|
|
|
+ <el-radio
|
|
|
+ :disabled="!scaleSelectFlag"
|
|
|
+ style="margin-top: 10px"
|
|
|
+ v-for="(item, index) in scale_checkItems"
|
|
|
+ :key="index"
|
|
|
+ v-model="radio"
|
|
|
+ :label="item"
|
|
|
+ fill="#57ACBB"
|
|
|
+ @change="choiceTriger(item)"
|
|
|
+ >{{ item }}</el-radio
|
|
|
+ >
|
|
|
+ </div></el-col
|
|
|
+ >
|
|
|
+ <el-col :span="1"> </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
@@ -462,7 +417,7 @@ export default {
|
|
|
question: "欢迎来到智能对话",
|
|
|
from1: HeadImg,
|
|
|
},
|
|
|
-//接下来我们将进行测试
|
|
|
+ //接下来我们将进行测试
|
|
|
{
|
|
|
from: 1,
|
|
|
question: "接下来让我们聊一聊吧",
|
|
@@ -491,7 +446,7 @@ export default {
|
|
|
this.sleep(101).then(() => {
|
|
|
contant1.scrollTop = contant1.scrollHeight;
|
|
|
});
|
|
|
- this.preList=[];
|
|
|
+ this.preList = [];
|
|
|
this.getDom();
|
|
|
console.log(this.preList);
|
|
|
|
|
@@ -518,6 +473,7 @@ export default {
|
|
|
},
|
|
|
|
|
|
sendMsg() {
|
|
|
+
|
|
|
this.sendMsgFlag = false;
|
|
|
let contant1 = document.getElementById("contant1");
|
|
|
let tmp = {
|
|
@@ -882,7 +838,7 @@ export default {
|
|
|
//判断是否是已婚
|
|
|
////已婚0 未婚 1 离异 2
|
|
|
let married = sessionStorage.getItem("isMarried");
|
|
|
- if (married=='0') {
|
|
|
+ if (married == "0") {
|
|
|
//从7个中抽取3个
|
|
|
console.log(this.getDomList(3, 7));
|
|
|
} else {
|
|
@@ -1160,30 +1116,29 @@ export default {
|
|
|
/* text-align: right; */
|
|
|
}
|
|
|
.message-wrapper {
|
|
|
- background-color: #f7f8fa;
|
|
|
+ background-color: #ffffff;
|
|
|
}
|
|
|
.message-wrapper-left {
|
|
|
- border-radius: 0 1rem 1rem 1rem;
|
|
|
+ margin-left: 10px;
|
|
|
+ /* border-radius: 0 1rem 1rem 1rem; */
|
|
|
+ border-radius: 4px 4px 4px 4px;
|
|
|
max-width: 20.86667rem;
|
|
|
display: inline-table;
|
|
|
- margin-top: 25px;
|
|
|
}
|
|
|
.message-wrapper-right {
|
|
|
- border-radius: 1rem 0 1rem 1rem;
|
|
|
+ margin-right: 10px;
|
|
|
+ border-radius: 4px 4px 4px 4px;
|
|
|
max-width: 20.86667rem;
|
|
|
display: inline-table;
|
|
|
- margin-top: 25px;
|
|
|
+ background-color: #1fd18e;
|
|
|
+ color: #ffffff;
|
|
|
+ /* margin-top: 25px; */
|
|
|
}
|
|
|
.message {
|
|
|
word-break: break-all;
|
|
|
- padding: 10px;
|
|
|
+ padding: 18px;
|
|
|
/* font-size: 20px; */
|
|
|
}
|
|
|
-.main_right_height {
|
|
|
- height: 95vh !important;
|
|
|
- display: block !important;
|
|
|
- overflow-y: auto !important;
|
|
|
-}
|
|
|
|
|
|
.xl_d_button {
|
|
|
background: rgb(87, 172, 187);
|
|
@@ -1226,48 +1181,80 @@ export default {
|
|
|
}
|
|
|
.footSend {
|
|
|
background: #ffffff;
|
|
|
- padding-top: 20px;
|
|
|
- padding-bottom: 55px;
|
|
|
position: absolute;
|
|
|
- width: 100%;
|
|
|
- bottom: 0px;
|
|
|
+ height: 80px;
|
|
|
+ margin-left: 2%;
|
|
|
+ /* padding-top: 20px;
|
|
|
+ padding-bottom: 55px; */
|
|
|
+ /* position: absolute;
|
|
|
+ width: 100%; */
|
|
|
+ width: 90%;
|
|
|
+ bottom: 40px;
|
|
|
+}
|
|
|
+.footSend >>> .el-textarea__inner {
|
|
|
+ border: 0px solid #ffffff !important;
|
|
|
}
|
|
|
.footSendSelect {
|
|
|
background: #ffffff;
|
|
|
-
|
|
|
- padding-bottom: 40px;
|
|
|
+ /* padding-bottom: 40px; */
|
|
|
position: absolute;
|
|
|
- width: 100%;
|
|
|
- bottom: 0px;
|
|
|
+ margin-left: 2%;
|
|
|
+ width: 90%;
|
|
|
+ bottom: 40px;
|
|
|
}
|
|
|
.xl_d_send {
|
|
|
- background: rgb(87, 172, 187) !important;
|
|
|
+ margin-top:18px;
|
|
|
+ color:#087B50;
|
|
|
+ background: #C6F0ED!important;
|
|
|
opacity: 1;
|
|
|
- border-radius: 50%;
|
|
|
- font-size: 20px;
|
|
|
+ font-size: 14px;
|
|
|
font-family: PingFang SC;
|
|
|
font-weight: 400;
|
|
|
- color: #ffffff;
|
|
|
text-align: center;
|
|
|
}
|
|
|
.xl_d_send:hover {
|
|
|
- background: rgb(87, 172, 187) !important;
|
|
|
+ margin-top:18px;
|
|
|
+ color:#087B50;
|
|
|
+ background: #C6F0ED!important;
|
|
|
opacity: 1;
|
|
|
- border-radius: 50%;
|
|
|
- font-size: 20px;
|
|
|
+ font-size: 14px;
|
|
|
font-family: PingFang SC;
|
|
|
font-weight: 400;
|
|
|
- color: #ffffff;
|
|
|
text-align: center;
|
|
|
}
|
|
|
.xl_d_send:focus {
|
|
|
- background: rgb(87, 172, 187) !important;
|
|
|
+ margin-top:18px;
|
|
|
+ color:#087B50;
|
|
|
+ background: #C6F0ED!important;
|
|
|
opacity: 1;
|
|
|
- border-radius: 50%;
|
|
|
- font-size: 20px;
|
|
|
+ font-size: 14px;
|
|
|
font-family: PingFang SC;
|
|
|
font-weight: 400;
|
|
|
- color: #ffffff;
|
|
|
text-align: center;
|
|
|
}
|
|
|
+.main_right_height {
|
|
|
+ /* padding:40px; */
|
|
|
+ height: 100vh !important;
|
|
|
+ display: block !important;
|
|
|
+ overflow-y: auto !important;
|
|
|
+ background-color: #ffffff;
|
|
|
+}
|
|
|
+
|
|
|
+.smart_content {
|
|
|
+ height: 90%;
|
|
|
+ margin-top: 5%;
|
|
|
+ width: 94%;
|
|
|
+ margin-left: 3%;
|
|
|
+ border-radius: 40px;
|
|
|
+ background: #f6f6f6;
|
|
|
+}
|
|
|
+.chat-window {
|
|
|
+ height: 70vh;
|
|
|
+ overflow: auto;
|
|
|
+ /* overflow-y:hidden; */
|
|
|
+}
|
|
|
+/* .contant1{
|
|
|
+ height:70vh;
|
|
|
+ overflow:auto;
|
|
|
+} */
|
|
|
</style>
|