87 lines
1.8 KiB
Vue
87 lines
1.8 KiB
Vue
|
<template>
|
||
|
|
<div class="assist-input-wrapper flex flex-col">
|
||
|
|
<textarea class="input" type="text" v-model="inputValue" placeholder="Please input" />
|
||
|
|
<div class="operate flex align-center">
|
||
|
|
<div class="attach flex flex-center">
|
||
|
|
<img src="@/assets/icons/attach.svg" alt="" />
|
||
|
|
</div>
|
||
|
|
<el-select v-model="typeValue" placeholder="Please select">
|
||
|
|
<el-option
|
||
|
|
v-for="item in typeOptions"
|
||
|
|
class="type-option"
|
||
|
|
:key="item.value"
|
||
|
|
:label="item.label"
|
||
|
|
:value="item.value"
|
||
|
|
/>
|
||
|
|
</el-select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { computed, ref } from 'vue'
|
||
|
|
const inputValue = ref<string>('')
|
||
|
|
|
||
|
|
const typeValue = ref<string>('')
|
||
|
|
const typeOptions = ref<any[]>([
|
||
|
|
{
|
||
|
|
label: 'Sofa',
|
||
|
|
value: 'Sofa'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: 'Desk',
|
||
|
|
value: 'Desk'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: 'Chair',
|
||
|
|
value: 'Chair'
|
||
|
|
}
|
||
|
|
])
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="less" scoped>
|
||
|
|
.assist-input-wrapper {
|
||
|
|
height: 23.5rem;
|
||
|
|
width: 106.3rem;
|
||
|
|
border-radius: 2.8rem;
|
||
|
|
background-color: #fff;
|
||
|
|
border: 0.1rem solid #00000005;
|
||
|
|
box-shadow: 0px 5px 14px 0px #0000001a;
|
||
|
|
margin: 0 auto;
|
||
|
|
padding: 3.4rem 1.7rem 1.7rem 2rem;
|
||
|
|
.input {
|
||
|
|
flex: 1;
|
||
|
|
border: none;
|
||
|
|
outline: none;
|
||
|
|
padding: 0 1.4rem;
|
||
|
|
font-size: 2rem;
|
||
|
|
font-family: 'InterRegular';
|
||
|
|
font-weight: 400;
|
||
|
|
color: #000000;
|
||
|
|
resize: none;
|
||
|
|
}
|
||
|
|
.operate {
|
||
|
|
column-gap: 2rem;
|
||
|
|
.attach {
|
||
|
|
width: 4rem;
|
||
|
|
height: 4rem;
|
||
|
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
||
|
|
border-radius: 50%;
|
||
|
|
}
|
||
|
|
.el-select {
|
||
|
|
width: 13.9rem;
|
||
|
|
height: 4rem;
|
||
|
|
:deep(.el-select__wrapper) {
|
||
|
|
border-radius: 0.8rem;
|
||
|
|
height: 100%;
|
||
|
|
box-shadow: none;
|
||
|
|
border: 0.1rem solid rgba(0, 0, 0, 0.1);
|
||
|
|
.type-option{
|
||
|
|
padding: 0 1rem;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|