1

.eslintrc.js

@@ -11,7 +11,7 @@ module.exports = {
     'max-len': [
       'warn',
       {
-        code: 250,
+        code: 500,
       },
     ],
     'no-unused-vars': 'off',

src/router/index.js

@@ -153,6 +153,12 @@ const routes = [
     meta: { title: 'e专利', isleftarrow: false },
     component: () => import('../viewTwo/patent/index.vue'),
   },
+  {
+    path: '/viewTwo/patent/detail',
+    name: 'patent',
+    meta: { title: 'e专利详情', isleftarrow: true },
+    component: () => import('../viewTwo/patent/detail.vue'),
+  },
   // 科技需求
   {
     path: '/viewTwo/techol/index',

src/viewTwo/patent/detail.vue

@@ -0,0 +1,158 @@
+<template>
+  <div id="detail">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="top">
+          <NavBar v-show="navShow" :title="title" :isleftarrow="isleftarrow" @onClickLeft="back"> </NavBar>
+        </el-col>
+        <el-col :span="24" class="info">
+          <el-col :span="24" class="mainTop">
+            <van-image :src="noimage" />
+          </el-col>
+          <el-col :span="24" class="message">
+            <p>
+              <span>专利名称</span>
+              <span>{{ info.name || '暂无' }}</span>
+            </p>
+            <p>
+              <span>申请日</span>
+              <span>{{ info.create_date || '暂无' }}</span>
+            </p>
+            <p>
+              <span> 公开(公告)号</span>
+              <span>{{ info.number || '暂无' }}</span>
+            </p>
+            <p>
+              <span> 公开(公告)日</span>
+              <span>{{ info.complete_date || '暂无' }}</span>
+            </p>
+            <p>
+              <span>发明人</span>
+              <span>{{ info.inventor || '暂无' }}</span>
+            </p>
+            <p>
+              <span>发明人地址</span>
+              <span>{{ info.inventor_address || '暂无' }}</span>
+            </p>
+            <p>
+              <span>代理人</span>
+              <span>{{ info.agency_person || '暂无' }}</span>
+            </p>
+            <p>
+              <span>代理机构</span>
+              <span>{{ info.agency || '暂无' }}</span>
+            </p>
+            <p>
+              <span>专利有效性</span>
+              <span style="color:#ff0000">{{ info.effective_date || '暂无' }}</span>
+            </p>
+            <p>
+              <span>摘要</span>
+              <span>{{ info.content || '暂无' }}</span>
+            </p>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+// 专利信息
+import { patentList } from '@/util/patent.js';
+import NavBar from '@/layout/common/topInfo.vue';
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  name: 'detail',
+  props: {},
+  components: {
+    NavBar,
+  },
+  data: function() {
+    return {
+      // 头部标题
+      title: '',
+      // meta为true
+      isleftarrow: '',
+      // 返回
+      navShow: true,
+      noimage: require('@a/fmzl.jpg'),
+      info: {},
+      patentList: patentList,
+    };
+  },
+  created() {
+    this.search();
+  },
+  methods: {
+    search() {
+      let res = this.patentList.find(i => i.id == this.id);
+      console.log(res);
+      if (res) this.$set(this, `info`, res);
+    },
+    back() {
+      this.$router.push({ path: '/viewTwo/patent/index' });
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    id() {
+      return this.$route.query.id;
+    },
+  },
+  mounted() {
+    this.title = this.$route.meta.title;
+    this.isleftarrow = this.$route.meta.isleftarrow;
+  },
+  watch: {},
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  width: 100%;
+  min-height: 667px;
+  position: relative;
+  background-color: #f9fafc;
+  .top {
+    height: 46px;
+    overflow: hidden;
+  }
+  .info {
+    min-height: 570px;
+    .mainTop {
+      padding: 0px 15px;
+      margin-bottom: 10px;
+      min-height: 220px;
+      background-color: #fff;
+      .van-image {
+        height: 200px;
+      }
+    }
+    .message {
+      background: #fff;
+      padding: 0 15px;
+      min-height: 40px;
+      p {
+        min-height: 40px;
+        line-height: 40px;
+        border-bottom: 1px solid #ccc;
+        span {
+          color: #000;
+        }
+        span:nth-child(1) {
+          display: inline-block;
+          width: 100px;
+          color: #ccc;
+        }
+      }
+      p:last-child {
+        border-bottom: none;
+      }
+    }
+  }
+}
+</style>

src/viewTwo/patent/index.vue

@@ -1,32 +1,90 @@
 <template>
   <div id="index">
     <el-row>
-      <el-col :span="24">
-        <p>e专利</p>
+      <el-col :span="24" class="style">
+        <el-col :span="24" class="top">
+          <NavBar v-show="navShow" :title="title" :isleftarrow="isleftarrow"> </NavBar>
+        </el-col>
+        <el-col :span="24" class="down">
+          <el-col :span="24" class="search">
+            <van-search v-model="name" @search="search" placeholder="请输入信息标题" />
+          </el-col>
+          <el-col :span="24" class="data">
+            <list :list="list"></list>
+          </el-col>
+        </el-col>
       </el-col>
     </el-row>
   </div>
 </template>
 
 <script>
+import list from './parts/list.vue';
+// 专利信息
+import { patentList } from '@/util/patent.js';
 import { mapState, createNamespacedHelpers } from 'vuex';
+import NavBar from '@/layout/common/topInfo.vue';
 export default {
   metaInfo() {
     return { title: this.$route.meta.title };
   },
   name: 'index',
   props: {},
-  components: {},
+  components: {
+    NavBar,
+    list,
+  },
   data: function() {
-    return {};
+    return {
+      // 头部标题
+      title: '',
+      // meta为true
+      isleftarrow: '',
+      // 返回
+      navShow: true,
+      active: 0,
+      // 查询
+      name: '',
+      list: patentList,
+    };
+  },
+  async created() {},
+  methods: {
+    search() {},
   },
-  created() {},
-  methods: {},
   computed: {
     ...mapState(['user']),
   },
+  mounted() {
+    this.title = this.$route.meta.title;
+    this.isleftarrow = this.$route.meta.isleftarrow;
+  },
   watch: {},
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.style {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  background-color: #f9fafc;
+  .top {
+    height: 45px;
+    overflow: hidden;
+  }
+  .down {
+    .search {
+      position: fixed;
+      width: 100%;
+      z-index: 999;
+      border-bottom: 1px dashed #ccc;
+    }
+    .data {
+      position: absolute;
+      width: 100%;
+      top: 100px;
+    }
+  }
+}
+</style>

src/viewTwo/patent/parts/list.vue

@@ -0,0 +1,88 @@
+<template>
+  <div id="tec">
+    <el-row>
+      <el-col :span="24" class="tec">
+        <el-col :span="24" class="list" v-for="(item, index) in list" :key="index" @click.native="detailBtn(item)">
+          <el-col :span="19" class="textOver title">
+            {{ item.name }}
+          </el-col>
+          <el-col :span="5" class="date">
+            {{ item.complete_date }}
+          </el-col>
+          <el-col :span="24" class="textOver orgin">
+            专利有效性：<span>{{ item.effective_date || '暂无' }} </span>
+          </el-col>
+          <el-col :span="24" class="titlejj">
+            摘要：<span>{{ item.content }}</span>
+          </el-col>
+        </el-col>
+      </el-col>
+      <el-backtop :bottom="50" :right="10"> </el-backtop>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  name: 'tec',
+  props: {
+    list: { type: Array },
+  },
+  components: {},
+  data: function() {
+    return {};
+  },
+  created() {},
+  methods: {
+    //详情
+    detailBtn(data) {
+      this.$router.push({ path: '/viewTwo/patent/detail', query: { id: data.id } });
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.tec {
+  padding: 0 10px;
+  .list {
+    padding: 5px 0;
+    border-bottom: 1px dashed #ccc;
+    .title {
+      font-size: 16px;
+      font-weight: bold;
+    }
+    .date {
+      font-size: 14px;
+      text-align: right;
+      padding: 3px 0 0 0;
+    }
+    .orgin {
+      font-size: 14px;
+      padding: 5px 0;
+      span {
+        color: #999;
+      }
+    }
+    .titlejj {
+      font-size: 14px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      -webkit-line-clamp: 2;
+      word-break: break-all;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      span {
+        color: #999;
+      }
+    }
+  }
+}
+</style>