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(() => { onMounted(() => {
loadFromLocalStorage();
// loadFromLocalStorage();
}); });
// //

30
src/views/homePage.vue

@ -740,7 +740,8 @@ onUnmounted(() => {
<!-- 第二行输入框 --> <!-- 第二行输入框 -->
<div class="footer-second-line"> <div class="footer-second-line">
<img :src="msgBtn" class="msg-icon" />
<!-- <img :src="msgBtn" class="msg-icon" /> -->
<div class="input-container">
<el-input <el-input
type="textarea" type="textarea"
v-model="message" v-model="message"
@ -763,13 +764,14 @@ onUnmounted(() => {
: 'https://d31zlh4on95l9h.cloudfront.net/images/e6ec2ae238ced85b74e0912e988f243e.png' : 'https://d31zlh4on95l9h.cloudfront.net/images/e6ec2ae238ced85b74e0912e988f243e.png'
" "
@click="sendMessage" @click="sendMessage"
class="action-btn send-btn"
class="action-btn send-btn-inner"
:style="{ :style="{
opacity: isInputDisabled ? 0.5 : 1, opacity: isInputDisabled ? 0.5 : 1,
cursor: isInputDisabled ? 'not-allowed' : 'pointer', cursor: isInputDisabled ? 'not-allowed' : 'pointer',
}" }"
/> />
</div> </div>
</div>
</el-footer> </el-footer>
</el-container> </el-container>
<el-container <el-container
@ -1252,6 +1254,26 @@ body {
/* margin-right: 5px; */ /* 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 { @keyframes pulse {
0% { 0% {
@ -1289,10 +1311,10 @@ body {
box-shadow: none !important; box-shadow: none !important;
overflow-y: auto !important; overflow-y: auto !important;
transition: all 0.2s ease-out; transition: all 0.2s ease-out;
padding: 8px 20px 8px 45px !important;
resize: none !important; resize: none !important;
line-height: 1.5 !important; line-height: 1.5 !important;
max-height: 100px !important; max-height: 100px !important;
padding-right: 45px !important;
} }
.msg-input:deep(.el-textarea__inner::placeholder) { .msg-input:deep(.el-textarea__inner::placeholder) {
@ -1304,7 +1326,7 @@ body {
.msg-input { .msg-input {
min-height: 34px; min-height: 34px;
width: 100%; width: 100%;
border-radius: 20px;
border-radius: 5px;
font-size: 16px; font-size: 16px;
transition: all 0.3s ease-out; transition: all 0.3s ease-out;
overflow-y: hidden; overflow-y: hidden;

Loading…
Cancel
Save