|
@@ -4,39 +4,89 @@
|
|
|
<img src="../../assets/img/Group 467.png" alt="" />
|
|
|
</div>
|
|
|
<div class="search">
|
|
|
- <input type="text" placeholder="请输入文档信息" class="cen—top-input" />
|
|
|
- <span class="cen—top-span">快速搜索</span>
|
|
|
+ <el-input
|
|
|
+ type="text"
|
|
|
+ placeholder="请输入文档信息"
|
|
|
+ v-model="input"
|
|
|
+ ></el-input>
|
|
|
+ <span class="cen—top-span" @click="searchs">快速搜索</span>
|
|
|
<img
|
|
|
src="../../assets/img/ri:search-2-line@2x.png"
|
|
|
class="cen—top-img"
|
|
|
/>
|
|
|
</div>
|
|
|
<div class="main">
|
|
|
- <ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto">
|
|
|
- <li v-for="i in count" class="infinite-list-item" :key="i">{{ i }}</li>
|
|
|
- </ul>
|
|
|
+ <div v-for="item in count" :key="item.id" class="main-main">
|
|
|
+ <div class="one" @click="docName(item.id,item.content.info.docName)">{{ item.content.info.docName }}</div>
|
|
|
+ <div class="two">
|
|
|
+ <div class="two1">
|
|
|
+ <img src="../../assets/img/UserCircle.png" />
|
|
|
+ {{ item.content.info.createBy }}
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <img src="../../assets/img/Clock.png" />
|
|
|
+ {{ item.content.info.createTime }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="three"
|
|
|
+ v-for="highlightFieldsContentItem in item.highlightFields.content"
|
|
|
+ :key="highlightFieldsContentItem.id"
|
|
|
+ v-html="highlightFieldsContentItem"
|
|
|
+ style="white-space: normal"
|
|
|
+ ></div>
|
|
|
+ <ul class="four">
|
|
|
+ <li v-for="tagName in item.content.info.tagList" :key="tagName.id">
|
|
|
+ {{ tagName.tagName }}
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+
|
|
|
+
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- checkList: [],
|
|
|
- value1: '',
|
|
|
- count: 0,
|
|
|
- };
|
|
|
+import { ret } from "@/api/doc/share1.js";
|
|
|
+
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ //搜索框绑定
|
|
|
+ input: "",
|
|
|
+ //搜索出来的数据
|
|
|
+ count: [],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //查找返回的数据
|
|
|
+ searchs() {
|
|
|
+ // ret({content:"项目",page:0,size:10}).then(item=>console.log(item))
|
|
|
+ ret({ content: this.input, page: 0, size: 10 }).then((item) => {
|
|
|
+ this.count = item;
|
|
|
+ // console.log('response cont',this.count);
|
|
|
+ });
|
|
|
},
|
|
|
- methods:{
|
|
|
- load () {
|
|
|
- this.count += 2
|
|
|
- },
|
|
|
- }
|
|
|
- };
|
|
|
+ //预览界面
|
|
|
+ docName(curentDocId,curentDocName) {
|
|
|
|
|
|
+ this.$tab.openPage(
|
|
|
+ window.open("/individual/Pre/user/" + curentDocId, '_blank'),
|
|
|
+ localStorage.setItem("docName",curentDocName)
|
|
|
+ )
|
|
|
+ }
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
-
|
|
|
+<style lang='scss'>
|
|
|
+.three {
|
|
|
+ margin-bottom: calc(100vw * (10 / 1920));
|
|
|
+ em {
|
|
|
+ color: #f00 !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
<style scoped lang='scss'>
|
|
|
.containe {
|
|
|
color: #7ea4c8;
|
|
@@ -47,7 +97,7 @@
|
|
|
width: calc(100vw * (220 / 1920));
|
|
|
height: calc(100vh * (57 / 1080));
|
|
|
margin-left: calc(100vw * (860 / 1920));
|
|
|
- margin-top: calc(100vh * (122 / 1080));
|
|
|
+ margin-top: calc(100vh * (100 / 1080));
|
|
|
margin-bottom: calc(100vh * (40 / 1080));
|
|
|
img {
|
|
|
width: 100%;
|
|
@@ -59,7 +109,7 @@
|
|
|
width: calc(100vw * (864 / 1920));
|
|
|
height: calc(100vh * (50 / 1080));
|
|
|
margin-left: calc(100vw * (528 / 1920));
|
|
|
- margin-bottom: calc(100vh * (40 / 1080));
|
|
|
+ margin-bottom: calc(100vh * (50 / 1080));
|
|
|
position: relative;
|
|
|
.cen—top-img {
|
|
|
width: calc(100vw * (24 / 1920));
|
|
@@ -68,13 +118,10 @@
|
|
|
left: calc(100vw * (15 / 1920));
|
|
|
top: calc(100vh * (15 / 1080));
|
|
|
}
|
|
|
- .cen—top-input {
|
|
|
+ .el-input {
|
|
|
width: calc(100vw * (750 / 1920));
|
|
|
height: calc(100vh * (50 / 1080));
|
|
|
- padding-left: calc(100vw * (53 / 1920));
|
|
|
margin-right: calc(100vw * (14 / 1920));
|
|
|
- background: #14265e80;
|
|
|
- border: 1px solid #01d1ffff;
|
|
|
}
|
|
|
.cen—top-span {
|
|
|
display: inline-block;
|
|
@@ -86,54 +133,67 @@
|
|
|
line-height: calc(100vh * (50 / 1080));
|
|
|
}
|
|
|
}
|
|
|
- .range,.category {
|
|
|
- width: calc(100vw * (480 / 1920));
|
|
|
- height: calc(100vh * (36 / 1080));
|
|
|
- margin-left: calc(100vw * (528 / 1920));
|
|
|
- margin-bottom: calc(100vh * (30 / 1080));
|
|
|
- line-height: calc(100vh * (36 / 1080));
|
|
|
- display: flex;
|
|
|
- .range-ul{
|
|
|
+ .main {
|
|
|
+ width: calc(100vw * (1450 / 1920));
|
|
|
+ height: calc(100vh * (670 / 1080));
|
|
|
+ // background: seagreen;
|
|
|
+ margin-left: calc(100vw * (230 / 1920));
|
|
|
+ overflow: auto;
|
|
|
+ .main-main {
|
|
|
+ width: calc(100vw * (1430 / 1920));
|
|
|
+ // height: calc(100vh * (220 / 1080));
|
|
|
+ padding: calc(100vh * (20 / 1080));
|
|
|
+ border-bottom: 1px dashed #083b61ff;
|
|
|
+ .one {
|
|
|
+ margin-bottom: calc(100vw * (10 / 1920));
|
|
|
+ color: #2e8aecff;
|
|
|
+ font-size: 14px;
|
|
|
+ text-decoration: underline;
|
|
|
+ }
|
|
|
+ .two {
|
|
|
+ margin-bottom: calc(100vh * (10 / 1080));
|
|
|
+ display: flex;
|
|
|
+ .two1 {
|
|
|
+ margin-right: calc(100vw * (30 / 1920));
|
|
|
+ }
|
|
|
+ img {
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .four {
|
|
|
display: flex;
|
|
|
list-style: none;
|
|
|
padding: 0;
|
|
|
- li{
|
|
|
- width: calc(100vw * (90 / 1920));
|
|
|
- height: calc(100vh * (36 / 1080));
|
|
|
- margin-left: calc(100vw * (10 / 1920));
|
|
|
+ li {
|
|
|
+ // width: calc(100vw * (62 / 1920));
|
|
|
+ // height: calc(100vh * (24 / 1080));
|
|
|
+ border: 1px solid #ff9839ff;
|
|
|
+ background: #bba99240;
|
|
|
+ padding: 0 5px;
|
|
|
+ margin-right: calc(100vw * (5 / 1920));
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
- .time {
|
|
|
- width: calc(100vw * (1333 / 1920));
|
|
|
- height: calc(100vh * (36 / 1080));
|
|
|
- margin-left: calc(100vw * (528 / 1920));
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- .el-checkbox-group{
|
|
|
- .el-checkbox{
|
|
|
- margin-right: calc(100vw * (70 / 1920));
|
|
|
- }
|
|
|
- .el-date-picker{
|
|
|
- height: calc(100vh * (36 / 1080));
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .main{
|
|
|
- width: calc(100vw * (1450/ 1920));
|
|
|
- height: calc(100vh * (670 / 1080));
|
|
|
- background: salmon;
|
|
|
- margin-left: calc(100vw * (230 / 1920));
|
|
|
- .infinite-list{
|
|
|
- width: calc(100vw * (1450/ 1920));
|
|
|
- height: calc(100vh * (670 / 1080));
|
|
|
- list-style: none;
|
|
|
- padding: 0;
|
|
|
- .infinite-list-item{
|
|
|
- width: calc(100vw * (1450/ 1920));
|
|
|
- height: calc(100vh * (230 / 1080));
|
|
|
- }
|
|
|
- }
|
|
|
+ //滚动条样式
|
|
|
+ ::-webkit-scrollbar {
|
|
|
+ width: 3.5px;
|
|
|
+ }
|
|
|
+ ::-webkit-scrollbar-track {
|
|
|
+ background-color: rgba(0, 0, 0, 0);
|
|
|
}
|
|
|
+ ::-webkit-scrollbar-thumb {
|
|
|
+ background: #2e8aec;
|
|
|
+ border-radius: 3px;
|
|
|
+ }
|
|
|
+ ::-webkit-scrollbar-thumb:hover {
|
|
|
+ background: #2e8aec;
|
|
|
+ }
|
|
|
+}
|
|
|
+::v-deep .el-input--medium .el-input__inner {
|
|
|
+ padding-left: calc(100vw * (50 / 1920));
|
|
|
+ background: #14265e80;
|
|
|
+ border: 1px solid #01d1ffff;
|
|
|
+ color: #7ea4c8ff;
|
|
|
}
|
|
|
</style>
|