|
@@ -1,36 +1,41 @@
|
|
|
<template>
|
|
|
<div class="smart-comparison">
|
|
|
- <div class="top">
|
|
|
- <div
|
|
|
- v-for="(item, index) in fileList"
|
|
|
- :key="item"
|
|
|
- class="list-item"
|
|
|
- @click="toggleFile(item)"
|
|
|
- @mouseenter="handleMouseEnter(index)"
|
|
|
- @mouseleave="handleMouseLeave(index)"
|
|
|
- >
|
|
|
- <div class="file-item">{{ item.f_title }}</div>
|
|
|
- <div class="close-icon" v-if="hoveredIndex === index">
|
|
|
- <CloseCircleOutlined class="close-icon-font" @click="remove(item)" />
|
|
|
- </div>
|
|
|
- <div class="vs-font" v-if="index != fileList.length - 1">VS</div>
|
|
|
- </div>
|
|
|
+ <div class="header">
|
|
|
+ <home-header sub-title="自然资源大模型工具" />
|
|
|
</div>
|
|
|
- <div class="content">
|
|
|
- <div class="left">
|
|
|
- <div class="pdf">
|
|
|
- <PDFViewer :src="current.url" ref="ifRef" v-if="current.url"> </PDFViewer>
|
|
|
+ <div class="content-box">
|
|
|
+ <div class="top">
|
|
|
+ <div
|
|
|
+ v-for="(item, index) in fileList"
|
|
|
+ :key="item"
|
|
|
+ class="list-item"
|
|
|
+ @click="toggleFile(item)"
|
|
|
+ @mouseenter="handleMouseEnter(index)"
|
|
|
+ @mouseleave="handleMouseLeave(index)"
|
|
|
+ >
|
|
|
+ <div class="file-item">{{ item.f_title }}</div>
|
|
|
+ <div class="close-icon" v-if="hoveredIndex === index">
|
|
|
+ <CloseCircleOutlined class="close-icon-font" @click="remove(item)" />
|
|
|
+ </div>
|
|
|
+ <div class="vs-font" v-if="index != fileList.length - 1">VS</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <a-affix :offsetTop="20">
|
|
|
- <div class="right" :class="{ zm: zoomFlag }">
|
|
|
- <AiAssistant :data="fileList" />
|
|
|
-
|
|
|
- <!-- <div class="title">AI政策对比助手</div>
|
|
|
- <div class="dialogue-box">可复用部分,全局查找 “文件内容太多,读起来太累了?”</div>
|
|
|
- <div class="return-home" @click="returnHome"><span>➥</span><span>全部政策</span></div> -->
|
|
|
+ <div class="content">
|
|
|
+ <div class="left">
|
|
|
+ <div class="pdf">
|
|
|
+ <PDFViewer :src="current.url" ref="ifRef" v-if="current.url"> </PDFViewer>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </a-affix>
|
|
|
+ <a-affix :offsetTop="20">
|
|
|
+ <div class="right" :class="{ zm: zoomFlag }">
|
|
|
+ <AiAssistant :data="fileList" />
|
|
|
+
|
|
|
+ <!-- <div class="title">AI政策对比助手</div>
|
|
|
+ <div class="dialogue-box">可复用部分,全局查找 “文件内容太多,读起来太累了?”</div>
|
|
|
+ <div class="return-home" @click="returnHome"><span>➥</span><span>全部政策</span></div> -->
|
|
|
+ </div>
|
|
|
+ </a-affix>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
@@ -38,6 +43,7 @@
|
|
|
/**
|
|
|
* @description 智能对比
|
|
|
*/
|
|
|
+import HomeHeader from '@/views/home/components/HomeHeader.vue';
|
|
|
import { ref, onMounted, watch, toRefs, nextTick } from 'vue';
|
|
|
import { CloseCircleOutlined } from '@ant-design/icons-vue';
|
|
|
import PDFViewer from '@/components/pdf/PDFViewerSearch.vue';
|
|
@@ -183,113 +189,115 @@ const toggleFile = (item) => {
|
|
|
.smart-comparison {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- flex-wrap: wrap;
|
|
|
- font-family: Alibaba PuHuiTi 2;
|
|
|
- position: relative;
|
|
|
- z-index: 1;
|
|
|
-
|
|
|
- .top {
|
|
|
- width: 1280px;
|
|
|
- height: auto;
|
|
|
- margin-top: 20px;
|
|
|
- margin-bottom: 20px;
|
|
|
+ >.content-box {
|
|
|
+ height: calc(100% - 60px);
|
|
|
display: flex;
|
|
|
- // justify-content: space-between;
|
|
|
justify-content: center;
|
|
|
- .list-item {
|
|
|
- width: auto;
|
|
|
- cursor: pointer;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ font-family: Alibaba PuHuiTi 2;
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
+ .top {
|
|
|
+ width: 1280px;
|
|
|
+ height: auto;
|
|
|
+ margin-top: 20px;
|
|
|
+ margin-bottom: 20px;
|
|
|
display: flex;
|
|
|
- position: relative;
|
|
|
- }
|
|
|
- .file-item {
|
|
|
- width: 345px;
|
|
|
- height: 106px;
|
|
|
- background: #ffffff;
|
|
|
- box-shadow: 0px 1px 8px 0px #e4e4e4;
|
|
|
- border-radius: 10px;
|
|
|
- border: 1px solid #3c8afb;
|
|
|
- padding: 20px;
|
|
|
- line-height: 30px;
|
|
|
- }
|
|
|
- .vs-font {
|
|
|
- width: auto;
|
|
|
- height: 106px;
|
|
|
- font-weight: bold;
|
|
|
- font-size: 24px;
|
|
|
- color: #2185f2;
|
|
|
- line-height: 106px;
|
|
|
- margin: 0px 47px;
|
|
|
- }
|
|
|
- .close-icon {
|
|
|
- position: absolute;
|
|
|
- top: 42px;
|
|
|
- left: 335px;
|
|
|
- .close-icon-font {
|
|
|
- color: #fff;
|
|
|
- background-color: #2185f2;
|
|
|
- border-radius: 50%;
|
|
|
- font-size: 20px;
|
|
|
+ // justify-content: space-between;
|
|
|
+ justify-content: center;
|
|
|
+ .list-item {
|
|
|
+ width: auto;
|
|
|
cursor: pointer;
|
|
|
+ display: flex;
|
|
|
+ position: relative;
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
- .content {
|
|
|
- width: 1280px;
|
|
|
- height: auto;
|
|
|
- display: flex;
|
|
|
- margin-bottom: 20px;
|
|
|
- .left {
|
|
|
- flex: 1;
|
|
|
- min-height: calc(100vh - 270px);
|
|
|
- background: #ffffff;
|
|
|
- box-shadow: 0px 1px 8px 0px #e4e4e4;
|
|
|
- border-radius: 10px;
|
|
|
- .pdf {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
+ .file-item {
|
|
|
+ width: 345px;
|
|
|
+ height: 106px;
|
|
|
+ background: #ffffff;
|
|
|
+ box-shadow: 0px 1px 8px 0px #e4e4e4;
|
|
|
+ border-radius: 10px;
|
|
|
+ border: 1px solid #3c8afb;
|
|
|
+ padding: 20px;
|
|
|
+ line-height: 30px;
|
|
|
}
|
|
|
- }
|
|
|
- .right {
|
|
|
- width: 320px;
|
|
|
- margin-left: 20px;
|
|
|
- background: #ffffff;
|
|
|
- box-shadow: 0px 1px 8px 0px #e4e4e4;
|
|
|
- border-radius: 10px;
|
|
|
- position: relative;
|
|
|
- .title {
|
|
|
- font-weight: 600;
|
|
|
- font-size: 20px;
|
|
|
- color: #000;
|
|
|
- line-height: 50px;
|
|
|
- border-bottom: 1px solid #eaeaea;
|
|
|
+ .vs-font {
|
|
|
+ width: auto;
|
|
|
+ height: 106px;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 24px;
|
|
|
+ color: #2185f2;
|
|
|
+ line-height: 106px;
|
|
|
+ margin: 0px 47px;
|
|
|
}
|
|
|
- .return-home {
|
|
|
+ .close-icon {
|
|
|
position: absolute;
|
|
|
- top: 620px;
|
|
|
- left: 0;
|
|
|
- height: 40px;
|
|
|
- width: 460px;
|
|
|
- background-color: #fff;
|
|
|
+ top: 42px;
|
|
|
+ left: 335px;
|
|
|
+ .close-icon-font {
|
|
|
+ color: #fff;
|
|
|
+ background-color: #2185f2;
|
|
|
+ border-radius: 50%;
|
|
|
+ font-size: 20px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .content {
|
|
|
+ width: 1280px;
|
|
|
+ height: auto;
|
|
|
+ display: flex;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ .left {
|
|
|
+ flex: 1;
|
|
|
+ min-height: calc(100vh - 270px);
|
|
|
+ background: #ffffff;
|
|
|
box-shadow: 0px 1px 8px 0px #e4e4e4;
|
|
|
border-radius: 10px;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- cursor: pointer;
|
|
|
- span {
|
|
|
- margin: 0 5px;
|
|
|
- font-size: 16px;
|
|
|
+ .pdf {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
}
|
|
|
}
|
|
|
- .return-home:hover {
|
|
|
- color: #1677ff;
|
|
|
+ .right {
|
|
|
+ width: 320px;
|
|
|
+ margin-left: 20px;
|
|
|
+ background: #ffffff;
|
|
|
+ box-shadow: 0px 1px 8px 0px #e4e4e4;
|
|
|
+ border-radius: 10px;
|
|
|
+ position: relative;
|
|
|
+ .title {
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 20px;
|
|
|
+ color: #000;
|
|
|
+ line-height: 50px;
|
|
|
+ border-bottom: 1px solid #eaeaea;
|
|
|
+ }
|
|
|
+ .return-home {
|
|
|
+ position: absolute;
|
|
|
+ top: 620px;
|
|
|
+ left: 0;
|
|
|
+ height: 40px;
|
|
|
+ width: 460px;
|
|
|
+ background-color: #fff;
|
|
|
+ box-shadow: 0px 1px 8px 0px #e4e4e4;
|
|
|
+ border-radius: 10px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ cursor: pointer;
|
|
|
+ span {
|
|
|
+ margin: 0 5px;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .return-home:hover {
|
|
|
+ color: #1677ff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .zm {
|
|
|
+ width: 640px;
|
|
|
}
|
|
|
- }
|
|
|
- .zm {
|
|
|
- width: 640px;
|
|
|
}
|
|
|
}
|
|
|
}
|