|
|
@@ -1,229 +1,296 @@
|
|
|
<template>
|
|
|
- <div style="height:100%;width:80%;margin:0 auto;">
|
|
|
- <div>
|
|
|
- <div id="step1">
|
|
|
- <carousel></carousel>
|
|
|
+ <div class="home">
|
|
|
+ <div class="main">
|
|
|
+ <div>
|
|
|
+ <el-carousel :interval="4000" type="card">
|
|
|
+ <el-carousel-item v-for="item in srcList" :key="item.src" >
|
|
|
+ <el-image :src="require('../../assets/' + item.src)" class="medium"></el-image>
|
|
|
+ <!-- <el-image :src="item.src" class="medium"></el-image> -->
|
|
|
+ <el-button round class="btnImg" @click="solution(item)">寻找解决方案</el-button>
|
|
|
+ </el-carousel-item>
|
|
|
+ </el-carousel>
|
|
|
</div>
|
|
|
- <div class="imgDiv">
|
|
|
- <img class="logo" src="@/assets/logo-3.png" alt="">
|
|
|
- </div>
|
|
|
- <div class="home_search" >
|
|
|
- <div class="input_search" id="step2">
|
|
|
- <el-input :placeholder="getPlaceholder()" v-model="queryParams.content" class="input-with-select">
|
|
|
- <el-select v-model="queryParams.select" slot="prepend" placeholder="请选择" style="width:100px">
|
|
|
- <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
|
|
- </el-select>
|
|
|
- <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
|
|
|
- </el-input>
|
|
|
- </div>
|
|
|
+ <div>
|
|
|
+ <h2>知识产权风控与组织记忆系统</h2>
|
|
|
+ </div>
|
|
|
+ <div class="serch" >
|
|
|
+ <el-select v-model="queryParams.queryType" placeholder="请选择" :change="selectChange" class="special">
|
|
|
+ <el-option
|
|
|
+ v-for="item in options"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-input placeholder="请输入内容" v-model="queryParams.query" clearable class="queryInput"></el-input>
|
|
|
+ <el-button @click="query">
|
|
|
+ <i class="el-icon-search"></i>
|
|
|
+ </el-button>
|
|
|
|
|
|
</div>
|
|
|
+ <div>
|
|
|
+ <el-tabs v-model="activeName" @tab-click="handleClick">
|
|
|
+ <el-tab-pane label="事件" name="event">
|
|
|
+ <eventTable></eventTable>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="专题库" name="project">
|
|
|
+ <projectTable></projectTable>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="报告" name="report">
|
|
|
+ <reportTable></reportTable>
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <el-link class="link" @click="seeMore">查看更多> > ></el-link>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div :style="{'margin-top':margin_top}">
|
|
|
- <el-tabs v-model="activeName" @tab-click="handleClick">
|
|
|
- <el-tab-pane label="事件" name="event">
|
|
|
- <div style="background:white;padding:10px 0 20px;">
|
|
|
- <QuestionTable @checkVisual="checkVisual" :show="true"></QuestionTable>
|
|
|
+ <!-- 底部 -->
|
|
|
+ <div class="footer" >
|
|
|
+ <div class="footerDiv">
|
|
|
+ <div class="footerDiv_one">
|
|
|
+ <div class="one_div1">
|
|
|
+ <div class="logo">
|
|
|
+ <img class="img" src="@/assets/logo-3.png" style="background: #fff;"/>
|
|
|
+ <h4>知识产权风控与组织记忆系统</h4>
|
|
|
+ </div>
|
|
|
+ <el-link class="bei">粤IPC备010101010101</el-link>
|
|
|
</div>
|
|
|
- </el-tab-pane>
|
|
|
- <el-tab-pane label="专题库" name="workspace">
|
|
|
- <div style="background:white;padding:10px 0 20px;">
|
|
|
- <Project @checkVisual="checkVisual" :show="true"></Project>
|
|
|
+ </div>
|
|
|
+ <div class="footerDiv_two">
|
|
|
+ <div class="two_div1"></div>
|
|
|
+ <div class="two_div2">
|
|
|
+ <el-link class="elLink1">联系我们</el-link>
|
|
|
+ <el-link class="elLink2" >反馈建议</el-link>
|
|
|
</div>
|
|
|
- </el-tab-pane>
|
|
|
- <el-tab-pane label="报告" name="report">
|
|
|
- <div style="background:white;padding:10px 0 20px;">
|
|
|
- <Report @checkVisual="checkVisual" :show="true"></Report>
|
|
|
+ </div>
|
|
|
+ <div class="footerDiv_two">
|
|
|
+ <div class="two_div1"></div>
|
|
|
+ <div class="two_div2">
|
|
|
+ <el-link class="elLink1" href="">官方网站</el-link>
|
|
|
+ <el-link class="elLink2" href="">xswip.cn</el-link>
|
|
|
</div>
|
|
|
-
|
|
|
- </el-tab-pane>
|
|
|
- </el-tabs>
|
|
|
+ </div>
|
|
|
+ <div class="footerDiv_two">
|
|
|
+ <div class="two_div1"></div>
|
|
|
+ <div class="two_div2" style="">
|
|
|
+ <el-link class="elLink1">实时动态</el-link>
|
|
|
+ <div class="elLink2">
|
|
|
+ <i class="iconfont icon-weixinfang "></i>
|
|
|
+ </div>
|
|
|
+ <!-- <el-link class="elLink2" href=""></el-link> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
-
|
|
|
- <visualDialog ref="visualDialog"></visualDialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-// import Project from './components/project.vue'
|
|
|
-import Project from '@/views/visual/components/drawer/components/project.vue';
|
|
|
-import Report from '@/views/visual/components/drawer/components/report.vue';
|
|
|
-// import Report from './components/report.vue'
|
|
|
-import QuestionTable from "@/views/questionEvent/components/questionIndex.vue";
|
|
|
-import visualDialog from './components/visualDialog.vue'
|
|
|
-import { openVisual } from './components/mixins';
|
|
|
-
|
|
|
-import carousel from './components/carousel.vue'
|
|
|
+import eventTable from '../event/components/view/table.vue';
|
|
|
+import projectTable from '../project/components/view/table.vue';
|
|
|
+import reportTable from '../report/components/view/table.vue';
|
|
|
export default {
|
|
|
components: {
|
|
|
- Project,
|
|
|
- Report,
|
|
|
- visualDialog,
|
|
|
- carousel,
|
|
|
- QuestionTable
|
|
|
+ eventTable,
|
|
|
+ projectTable,
|
|
|
+ reportTable,
|
|
|
},
|
|
|
- props: {},
|
|
|
- mixins:[openVisual],
|
|
|
data() {
|
|
|
return {
|
|
|
- show:false,
|
|
|
- margin_top:'0px',
|
|
|
- activeName:'event',
|
|
|
- options:[
|
|
|
- {
|
|
|
- label:'专题库',
|
|
|
- value:'Workspace',
|
|
|
- placeholder:'请输入专题库名称'
|
|
|
- },
|
|
|
- {
|
|
|
- label:'专利',
|
|
|
- value:'patentNo',
|
|
|
- placeholder:'请输入专利'
|
|
|
- },
|
|
|
- {
|
|
|
- label:'产品',
|
|
|
- value:'Product',
|
|
|
- placeholder:'请输入产品名称'
|
|
|
- },
|
|
|
- {
|
|
|
- label:'事件',
|
|
|
- value:'QuestionEvent',
|
|
|
- placeholder:'请输入事件名称'
|
|
|
- },
|
|
|
- {
|
|
|
- label:'报告',
|
|
|
- value:'AllReport',
|
|
|
- placeholder:'请输入报告名称'
|
|
|
- },
|
|
|
+ srcList: [
|
|
|
+ // {src:'@/assets/lun1.jpg'},
|
|
|
+ // {src:'@/assets/lun2.jpg'},
|
|
|
+ // {src:'@/assets/lun3.jpg'},
|
|
|
+ {src:'lun1.jpg'},
|
|
|
+ {src:'lun2.jpg'},
|
|
|
+ {src:'lun3.jpg'},
|
|
|
+ ],
|
|
|
+ options: [
|
|
|
+ {value:0,label:'专题库'},
|
|
|
+ {value:1,label:'报告'},
|
|
|
+ {value:2,label:'事件'},
|
|
|
],
|
|
|
-
|
|
|
queryParams:{
|
|
|
- content:'',
|
|
|
- select:''
|
|
|
+ queryType: '',
|
|
|
+ query:'',
|
|
|
},
|
|
|
- };
|
|
|
+ activeName: "event",
|
|
|
+ }
|
|
|
},
|
|
|
- watch: {},
|
|
|
- computed: {},
|
|
|
- created() {},
|
|
|
mounted() {
|
|
|
- document.getElementsByClassName('el-main')[0].addEventListener("scroll", this.handleScroll)
|
|
|
+
|
|
|
},
|
|
|
methods: {
|
|
|
- //监听滚动条的位置
|
|
|
- handleScroll(){
|
|
|
- let demo = document.querySelector('.home_search')
|
|
|
- const scrollTop = document.getElementsByClassName('el-main')[0].scrollTop
|
|
|
- if(scrollTop >= 250 && !this.show) {
|
|
|
- this.show = true
|
|
|
- demo.classList.add('fixHeader')
|
|
|
- this.margin_top = '70px'
|
|
|
- } else if(scrollTop < 250 && this.show){
|
|
|
- this.show = false
|
|
|
- demo.classList.remove('fixHeader')
|
|
|
- this.margin_top = '0px'
|
|
|
+ // 查看更多
|
|
|
+ seeMore() {
|
|
|
+ switch (this.activeName) {
|
|
|
+ case 'event'://事件
|
|
|
+
|
|
|
+ break;
|
|
|
+ case 'project'://专题库
|
|
|
+
|
|
|
+ break;
|
|
|
+ case 'report'://报告
|
|
|
+
|
|
|
+ break;
|
|
|
+
|
|
|
+ default:
|
|
|
+ break;
|
|
|
}
|
|
|
- // console.log('滚动条位置:', scrollTop);
|
|
|
},
|
|
|
- //切换tag
|
|
|
- handleClick(){},
|
|
|
- //获取提示信息
|
|
|
- getPlaceholder(){
|
|
|
- if(this.queryParams.select){
|
|
|
- var a = this.options.find(item=>{
|
|
|
- return item.value == this.queryParams.select
|
|
|
- }).placeholder
|
|
|
- }else{
|
|
|
- var a = '请输入内容'
|
|
|
- }
|
|
|
- return a
|
|
|
+ // 切换tab
|
|
|
+ handleClick(tab, event) {
|
|
|
+ console.log(tab, event);
|
|
|
},
|
|
|
- //查询
|
|
|
- search(){
|
|
|
- if(!this.queryParams.select){
|
|
|
- this.$message.error('请选择需要检索的信息')
|
|
|
- return false
|
|
|
- }
|
|
|
- localStorage.searchContent = this.queryParams.content
|
|
|
- this.$router.push({
|
|
|
- name:this.queryParams.select,
|
|
|
- })
|
|
|
- setTimeout(function () {
|
|
|
- localStorage.searchContent = ''
|
|
|
- }, 1000);
|
|
|
+ // select change
|
|
|
+ selectChange(val) {
|
|
|
+ console.log(val);
|
|
|
+ },
|
|
|
+ // 搜索
|
|
|
+ query() {
|
|
|
+ console.log(this.queryParams);
|
|
|
},
|
|
|
+ // 解决方案
|
|
|
+ solution(){},
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
+
|
|
|
<style lang="scss">
|
|
|
- .el-carousel__item:nth-child(2n) {
|
|
|
- background-color: #99a9bf;
|
|
|
+.home{
|
|
|
+ .el-carousel__container{
|
|
|
+ height: 200px;
|
|
|
}
|
|
|
-
|
|
|
- .el-carousel__item:nth-child(2n+1) {
|
|
|
- background-color: #d3dce6;
|
|
|
- }
|
|
|
- .fixHeader{
|
|
|
- .input-with-select{
|
|
|
- // min-width: 654px;
|
|
|
- // width: 50%;
|
|
|
- // margin-left:20px;
|
|
|
+ .serch{
|
|
|
+ // select整体颜色改变
|
|
|
+ .el-select .el-input__inner{
|
|
|
+ background: #316192;
|
|
|
+ border: 1px solid #316192;
|
|
|
+ }
|
|
|
+ // select中选中项颜色、上下角颜色改变
|
|
|
+ .el-select .el-input .el-select__caret{
|
|
|
+ color:#fff;
|
|
|
+ }
|
|
|
+ .special {
|
|
|
+ .el-input__inner{
|
|
|
+ border-radius: 0px;
|
|
|
+ color: aliceblue !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .queryInput{
|
|
|
+ .el-input__inner{
|
|
|
+ border-radius: 0px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-button{
|
|
|
+ border-radius: 0px;
|
|
|
+ background: #316192;
|
|
|
+ border: 1px solid #316192;
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
</style>
|
|
|
<style lang="scss" scoped>
|
|
|
-.small{
|
|
|
- color: #475669;
|
|
|
- font-size: 14px;
|
|
|
- opacity: 0.75;
|
|
|
- line-height: 150px;
|
|
|
- margin: 0;
|
|
|
-}
|
|
|
-.fixHeader{
|
|
|
- width:100% !important;
|
|
|
- height: 50px;
|
|
|
- background: white;
|
|
|
- max-height: 50px;
|
|
|
- position: fixed;
|
|
|
- top:40px;
|
|
|
- left:0;
|
|
|
- right:0;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- z-index: 999;
|
|
|
- margin:0 auto;
|
|
|
- // .logo1{
|
|
|
- // // width:100px;
|
|
|
- // height: 40px;
|
|
|
- // margin-right:20px;
|
|
|
- // }
|
|
|
- .input_search{
|
|
|
- width: 50%;
|
|
|
+.home{
|
|
|
+ .main{
|
|
|
+ width: 80%;
|
|
|
+ margin: auto;
|
|
|
+ .medium{
|
|
|
+ width: 100%;
|
|
|
+ height: 260px;
|
|
|
+ }
|
|
|
+ .btnImg{
|
|
|
+ position: absolute;
|
|
|
+ top: 75%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, 0px);
|
|
|
+ }
|
|
|
+ h2{
|
|
|
+ text-align: center;
|
|
|
+ color: #316192;
|
|
|
+ }
|
|
|
+ .serch{
|
|
|
+ min-width: 654px;
|
|
|
+ width: 50%;
|
|
|
+ display: flex;
|
|
|
+ margin: auto;
|
|
|
+ i{
|
|
|
+ color: aliceblue;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .link{
|
|
|
+ float: right;
|
|
|
+ margin-top: 10px;
|
|
|
+ color: #409EFF;
|
|
|
+ }
|
|
|
}
|
|
|
-}
|
|
|
-.home_search{
|
|
|
-
|
|
|
- min-width: 654px;
|
|
|
- width: 50%;
|
|
|
- height: 50px;
|
|
|
- // min-height: 50px;
|
|
|
- // max-height: 510px;
|
|
|
- // position:absolute;
|
|
|
- // left: 0;
|
|
|
- // right: 0;
|
|
|
- // top: 0;
|
|
|
- // bottom: 0;
|
|
|
- margin:20px auto;
|
|
|
-
|
|
|
-}
|
|
|
-.imgDiv{
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- margin-bottom:10px;
|
|
|
-
|
|
|
-}
|
|
|
- .logo{
|
|
|
- width:100px;
|
|
|
+ .footer{
|
|
|
+ width: 100%;
|
|
|
+ height: 200px;
|
|
|
+ margin-top: 80px;
|
|
|
+ background: #316192;
|
|
|
+ .footerDiv{
|
|
|
+ width: 1000px;
|
|
|
+ height: 100%
|
|
|
+ ;margin: auto;
|
|
|
+ display: flex;
|
|
|
+ .footerDiv_one{
|
|
|
+ width: 400px;
|
|
|
+ position: relative;
|
|
|
+ .one_div1{
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%,-50%);
|
|
|
+ }
|
|
|
+ .logo{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ .img{
|
|
|
+ width: 100px;
|
|
|
+ height: 50px;
|
|
|
+ }
|
|
|
+ h4{
|
|
|
+ width: 220px;
|
|
|
+ margin-left: 10px;
|
|
|
+ color: aliceblue;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .bei{
|
|
|
+ color: aliceblue;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .footerDiv_two{
|
|
|
+ width: 200px;
|
|
|
+ position: relative;
|
|
|
+ .two_div1{
|
|
|
+ width: 100%;
|
|
|
+ height: 50px;
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%,-50%);
|
|
|
+ border-left: 2px solid aliceblue;
|
|
|
+
|
|
|
+ }
|
|
|
+ .two_div2{
|
|
|
+ text-align: center;
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%,-50%);
|
|
|
+ .elLink1{
|
|
|
+ margin-bottom: 15px;
|
|
|
+ color: aliceblue ;
|
|
|
+ }
|
|
|
+ .elLink2{
|
|
|
+ color: aliceblue;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
-</style>
|
|
|
+}
|
|
|
+</style>
|
zhuhao
