154 lines
3.3 KiB
Vue
154 lines
3.3 KiB
Vue
<script>
|
|
export default {
|
|
name: "AiCopilot",
|
|
props: {
|
|
title: {default: "Copilot小助理"}
|
|
},
|
|
data() {
|
|
return {
|
|
show: false,
|
|
expand: false,
|
|
prompt: ""
|
|
}
|
|
},
|
|
computed: {
|
|
expandBtn: v => v.expand ? "收起" : "展开"
|
|
},
|
|
methods: {
|
|
handleSend() {
|
|
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<section class="AiCopilot">
|
|
<div class="copilot" v-if="show">
|
|
<div class="flex header">
|
|
<b class="fill" v-text="title"/>
|
|
<div class="expandBtn pointer" v-text="expandBtn" @click="expand=!expand"/>
|
|
<div class="minimal pointer" v-text="'最小化'" @click="show=false"/>
|
|
</div>
|
|
<div class="flex content">
|
|
<div class="left" :class="{expand}"></div>
|
|
<div class="right flex column gap-14">
|
|
<div class="fill">
|
|
|
|
</div>
|
|
<div class="sendBox flex gap-14">
|
|
<el-input type="textarea" class="fill input" autosize resize="none" v-model="prompt" placeholder="请输入..."
|
|
@change="handleSend"/>
|
|
<div class="sendBtn" @click="handleSend"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<img class="icon" src="https://cdn.sinoecare.com/i/2024/06/04/665ec6f5ef213.png" @click="show=true"/>
|
|
</section>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.AiCopilot {
|
|
position: fixed;
|
|
right: 20px;
|
|
bottom: 48px;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
gap: 18px;
|
|
|
|
.copilot {
|
|
border-radius: 0 0 8px 8px;
|
|
height: 600px;
|
|
background: #FFFFFF;
|
|
box-shadow: 0 0 20px 1px #0a255c1a;
|
|
|
|
.header {
|
|
height: 48px;
|
|
background-image: linear-gradient(90deg, #3577FD 0%, #216AFD 100%);
|
|
box-shadow: 0 2px 6px 0 #0a255c14;
|
|
border-radius: 8px 8px 0 0;
|
|
padding: 0 8px 0 14px;
|
|
color: #fff;
|
|
font-size: 14px;
|
|
gap: 14px;
|
|
|
|
& > b {
|
|
font-size: 16px;
|
|
cursor: default;
|
|
}
|
|
|
|
.expandBtn, .minimal {
|
|
padding-left: 18px;
|
|
font-weight: normal;
|
|
background-position: left center;
|
|
background-repeat: no-repeat;
|
|
background-size: 14px 14px;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.minimal {
|
|
background-image: url("https://cdn.sinoecare.com/i/2024/06/04/665ed2bd0a79e.png");
|
|
}
|
|
|
|
.expandBtn {
|
|
background-image: url("https://cdn.sinoecare.com/i/2024/06/04/665ed2bd8b021.png");
|
|
}
|
|
}
|
|
|
|
.content {
|
|
height: calc(100% - 48px);
|
|
|
|
.left {
|
|
width: 0;
|
|
height: 100%;
|
|
transition: width 1s;
|
|
|
|
&.expand {
|
|
width: 260px;
|
|
|
|
& + .right {
|
|
border-left: 1px solid #ddd;
|
|
}
|
|
}
|
|
}
|
|
|
|
.right {
|
|
width: 420px;
|
|
height: 100%;
|
|
padding: 14px;
|
|
|
|
.sendBtn {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
background: url("https://cdn.sinoecare.com/i/2024/06/04/665ed2bbdeb27.png") no-repeat center;
|
|
background-size: 100% 100%;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
:deep(.sendBox) {
|
|
width: 100%;
|
|
|
|
.input > textarea {
|
|
width: 100%;
|
|
line-height: 40px;
|
|
border-radius: 22px;
|
|
border: 1px solid #ddd;
|
|
padding: 0 14px;
|
|
box-sizing: border-box;
|
|
background: #F4F6FA;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.icon {
|
|
width: 68px;
|
|
height: 58px;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
</style>
|