Browse Source

发送按钮放入输入框内;

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

2
src/views/components/HistoryRecord.vue

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

30
src/views/homePage.vue

@ -740,7 +740,8 @@ onUnmounted(() => {
<!-- 第二行输入框 -->
<div class="footer-second-line">
<img :src="msgBtn" class="msg-icon" />
<!-- <img :src="msgBtn" class="msg-icon" /> -->
<div class="input-container">
<el-input
type="textarea"
v-model="message"
@ -763,13 +764,14 @@ onUnmounted(() => {
: 'https://d31zlh4on95l9h.cloudfront.net/images/e6ec2ae238ced85b74e0912e988f243e.png'
"
@click="sendMessage"
class="action-btn send-btn"
class="action-btn send-btn-inner"
:style="{
opacity: isInputDisabled ? 0.5 : 1,
cursor: isInputDisabled ? 'not-allowed' : 'pointer',
}"
/>
</div>
</div>
</el-footer>
</el-container>
<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