Browse Source

发送按钮放入输入框内;

master
宋杰 1 week ago
parent
commit
e96bf16715
  1. 2
      src/views/components/HistoryRecord.vue
  2. 84
      src/views/homePage.vue

2
src/views/components/HistoryRecord.vue

@ -582,7 +582,7 @@ defineExpose({
//
onMounted(() => {
loadFromLocalStorage();
// loadFromLocalStorage();
});
//

84
src/views/homePage.vue

@ -740,35 +740,37 @@ onUnmounted(() => {
<!-- 第二行输入框 -->
<div class="footer-second-line">
<img :src="msgBtn" class="msg-icon" />
<el-input
type="textarea"
v-model="message"
@focus="onFocus"
@blur="onBlur"
:autosize="{ minRows: 1, maxRows: 4 }"
placeholder="请输入股票名称或股票代码..."
class="msg-input"
@keydown.enter.exact.prevent="
isLoading || isInputDisabled ? null : sendMessage()
"
:disabled="isInputDisabled"
resize="none"
>
</el-input>
<img
:src="
isInputDisabled
? 'https://d31zlh4on95l9h.cloudfront.net/images/aa192bcbc1682c97e1bc6fb422f2afff.png'
: 'https://d31zlh4on95l9h.cloudfront.net/images/e6ec2ae238ced85b74e0912e988f243e.png'
"
@click="sendMessage"
class="action-btn send-btn"
:style="{
opacity: isInputDisabled ? 0.5 : 1,
cursor: isInputDisabled ? 'not-allowed' : 'pointer',
}"
/>
<!-- <img :src="msgBtn" class="msg-icon" /> -->
<div class="input-container">
<el-input
type="textarea"
v-model="message"
@focus="onFocus"
@blur="onBlur"
:autosize="{ minRows: 1, maxRows: 4 }"
placeholder="请输入股票名称或股票代码..."
class="msg-input"
@keydown.enter.exact.prevent="
isLoading || isInputDisabled ? null : sendMessage()
"
:disabled="isInputDisabled"
resize="none"
>
</el-input>
<img
:src="
isInputDisabled
? 'https://d31zlh4on95l9h.cloudfront.net/images/aa192bcbc1682c97e1bc6fb422f2afff.png'
: 'https://d31zlh4on95l9h.cloudfront.net/images/e6ec2ae238ced85b74e0912e988f243e.png'
"
@click="sendMessage"
class="action-btn send-btn-inner"
:style="{
opacity: isInputDisabled ? 0.5 : 1,
cursor: isInputDisabled ? 'not-allowed' : 'pointer',
}"
/>
</div>
</div>
</el-footer>
</el-container>
@ -1252,6 +1254,26 @@ body {
/* margin-right: 5px; */
}
.input-container {
position: relative;
width: 100%;
}
.send-btn-inner {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
height: 28px !important;
width: auto;
z-index: 10;
transition: all 0.3s ease;
}
.send-btn-inner:hover {
transform: translateY(-50%) scale(1.1);
}
/* 音频播放动画 */
@keyframes pulse {
0% {
@ -1289,10 +1311,10 @@ body {
box-shadow: none !important;
overflow-y: auto !important;
transition: all 0.2s ease-out;
padding: 8px 20px 8px 45px !important;
resize: none !important;
line-height: 1.5 !important;
max-height: 100px !important;
padding-right: 45px !important;
}
.msg-input:deep(.el-textarea__inner::placeholder) {
@ -1304,7 +1326,7 @@ body {
.msg-input {
min-height: 34px;
width: 100%;
border-radius: 20px;
border-radius: 5px;
font-size: 16px;
transition: all 0.3s ease-out;
overflow-y: hidden;

Loading…
Cancel
Save