59 lines
1.3 KiB
Vue
59 lines
1.3 KiB
Vue
<script>
|
|
import AiDrag from "./AiDrag.vue";
|
|
|
|
export default {
|
|
name: "AiAssist",
|
|
components: {AiDrag},
|
|
data() {
|
|
return {
|
|
dialog: false,
|
|
prompt: ""
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<section class="AiAssist">
|
|
<div class="pointer" @click="dialog=true">
|
|
<img src="https://cdn.cunwuyun.cn/dvcp/dv/aiIcon.png"/>
|
|
<div class="avatar-text" v-text="'全局AI助手'"/>
|
|
</div>
|
|
<ai-drag class="assistDialog" v-if="dialog" :resizable="false">
|
|
<dv-border-box-1 background-color="#001C30">
|
|
<div class="inbox">
|
|
<div>慧智会言</div>
|
|
<el-input v-model="prompt" placeholder="您说,我在听~" clearable size="small">
|
|
<template #append><i class="el-icon-microphone">语音输入</i></template>
|
|
</el-input>
|
|
</div>
|
|
</dv-border-box-1>
|
|
</ai-drag>
|
|
</section>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.AiAssist {
|
|
.avatar-text {
|
|
text-align: center;
|
|
color: white;
|
|
}
|
|
|
|
:deep(.assistDialog) {
|
|
.border-box-content {
|
|
padding: 8px 10px;
|
|
width: initial;
|
|
}
|
|
|
|
.inbox {
|
|
min-width: 400px;
|
|
box-shadow: 4px 4px 10px #23ECFD inset, -4px -4px 10px #23ECFD inset;
|
|
height: 100%;
|
|
$v: 14px;
|
|
$vv: calc(100% - #{$v});
|
|
clip-path: polygon($v 0, $vv 0, 100% $v, 100% $vv, $vv 100%, $v 100%, 0 $vv, 0 $v);
|
|
}
|
|
}
|
|
}
|
|
</style>
|