fix input

This commit is contained in:
Zhang Minghan 2023-07-19 17:24:52 +08:00
parent 08e607e5a6
commit 26b3e5ce20

View File

@ -58,7 +58,7 @@ onMounted(() => {
<div class="input-wrapper"> <div class="input-wrapper">
<div class="input"> <div class="input">
<input type="text" placeholder="写点什么" v-model="input" ref="inputEl" /> <input type="text" placeholder="写点什么" v-model="input" ref="inputEl" />
<button @click="send"><post /></button> <div class="button" @click="send"><post /></div>
</div> </div>
</div> </div>
</template> </template>
@ -116,7 +116,6 @@ onMounted(() => {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
color: var(--card-text);
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
@ -125,6 +124,7 @@ onMounted(() => {
width: 100%; width: 100%;
height: 32px; height: 32px;
margin: 4px 16px; margin: 4px 16px;
color: var(--card-text);
background: var(--card-input); background: var(--card-input);
border: 1px solid var(--card-input-border); border: 1px solid var(--card-input-border);
border-radius: 12px; border-radius: 12px;
@ -139,18 +139,19 @@ onMounted(() => {
border: 1px solid var(--card-input-border-hover); border: 1px solid var(--card-input-border-hover);
} }
.input button { .input .button {
position: absolute; position: absolute;
padding: 0.6em 1.2em;
background: none; background: none;
right: 16px; right: 16px;
transform: translateY(10px); transform: translateY(10px);
} }
.input button:hover { .input .button:hover {
cursor: pointer; cursor: pointer;
} }
.input button svg { .input .button svg {
width: 20px; width: 20px;
height: 24px; height: 24px;
transition: .4s; transition: .4s;
@ -221,4 +222,11 @@ onMounted(() => {
height: 26px; height: 26px;
} }
} }
@media screen and (max-width: 560px) {
.chat-wrapper {
height: calc(70vh - 86px);
max-height: calc(70vh - 86px);
}
}
</style> </style>