105 lines
3.2 KiB
Vue
105 lines
3.2 KiB
Vue
<template>
|
|
<div style="background: #ECECEC;height: 100vh;position: fixed;" v-if="aiInfo">
|
|
<img src="/public/static/left1.png" style="height: 100%;position: absolute;top: 65px">
|
|
<img src="/public/static/right6.png" style="height: 100px;position: absolute;bottom: 0px;right: 0px">
|
|
<div style="padding:10px 15px;background-color: white" @click="openUrl()">
|
|
<n-flex align="end" :size="[5,0]">
|
|
<div>
|
|
<img src="/public/static/icon_top.png" style="width: 130px;">
|
|
</div>
|
|
<div style="height: 40px;width: 2px;background: #D9D9D9;"></div>
|
|
<div>
|
|
<span style="font-size: 22px;font-weight: 600">AI</span>
|
|
<span style="font-weight: 600;font-size: 14px;margin-left: 10px">知识库</span>
|
|
</div>
|
|
</n-flex>
|
|
</div>
|
|
<div>
|
|
<div>
|
|
<img src="/public/static/top1.png" style="width: 100%">
|
|
</div>
|
|
<div style="padding: 20px">
|
|
<n-flex :size="[0,0]" align="center" justify="space-between">
|
|
<div style="height: 40px;width: 1px;background-color: #000000;"></div>
|
|
<div style="background: rgba(0,0,0,0.1);width: 90%;padding:10px 15px;font-size: 20px;font-weight: 600">
|
|
{{ aiInfo.zsk_name }}
|
|
</div>
|
|
<div style="height: 40px;width: 1px;background-color: #000000;"></div>
|
|
</n-flex>
|
|
<VueTypewriter
|
|
class="tl"
|
|
ref="typewriter"
|
|
:interval="30"
|
|
cursorStr=""
|
|
@writeIsWrite="handleWriteStart"
|
|
>
|
|
<div id="gdt" class="gdt"
|
|
style="overflow-y: scroll;height:60vh;border: 1px solid #000000;background-color: white;padding: 13px;line-height: 32px;margin-top: 20px">
|
|
<div v-html="aiInfo.zsk_explain"></div>
|
|
</div>
|
|
</VueTypewriter>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import VueTypewriter from "@/components/Writer.vue";
|
|
import {onMounted, ref} from "vue";
|
|
import {useRoute} from 'vue-router';
|
|
import router from "@/router/routes";
|
|
import $ from "jquery";
|
|
import axios from "axios";
|
|
|
|
const route = useRoute();
|
|
const position = ref(0);
|
|
const aiInfo = ref();
|
|
const typewriter = ref(null);
|
|
const infoId = ref();
|
|
onMounted(() => {
|
|
console.log(route.query.id)
|
|
infoId.value = route.query.id;
|
|
//console.log(info)
|
|
//aiInfo.value = info;
|
|
getInfo();
|
|
});
|
|
const getInfo = () =>
|
|
{
|
|
axios.post("https://jinrigushi.gushitv.com/api/dzb/zsk/find", {id: infoId.value})
|
|
.then(response => {
|
|
console.log(response)
|
|
aiInfo.value=response.data.data;
|
|
})
|
|
.catch(error => console.error('Error loading the JSON file:', error))
|
|
}
|
|
const
|
|
handleWriteStart = () => {
|
|
const ele = document.getElementsByClassName("gdt")[0];
|
|
//console.log(ele)
|
|
ele.scrollTop = ele.scrollHeight;
|
|
}
|
|
const openUrl = () => {
|
|
router.push('/').then(() => {
|
|
window.location.reload();
|
|
});
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
.gdt::-webkit-scrollbar {
|
|
width: 5px; /* 滚动条宽度 */
|
|
}
|
|
|
|
.gdt::-webkit-scrollbar-track {
|
|
background: #f1f1f1; /* 滚动条轨道背景色 */
|
|
display: none;
|
|
}
|
|
|
|
.gdt::-webkit-scrollbar-thumb {
|
|
background: #888; /* 滚动条滑块背景色 */
|
|
border-radius: 5px; /* 滑块圆角 */
|
|
}
|
|
|
|
.gdt::-webkit-scrollbar-thumb:hover {
|
|
background: #555; /* 滑块悬停时的背景色 */
|
|
}
|
|
</style>
|