feat:对接新闻接口

README.md

@@ -1,5 +1,5 @@
 # qn-web
-
+#
 ## Project setup
 ```
 npm install

public/index.html

@@ -14,7 +14,245 @@
     <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
         Please enable it to continue.</strong>
   </noscript>
-  <div id="app"></div>
+  <div id="app">
+    <div id="app">
+      <div id="loader-wrapper">
+        <div id="loader"></div>
+        <div class="loader-section section-left"></div>
+        <div class="loader-section section-right"></div>
+        <div class="load_title">正在加载,请耐心等待
+
+        </div>
+      </div>
+    </div>
+  </div>
 </body>
+<style>
+  .chromeframe {
+    margin: 0.2em 0;
+    background: #ccc;
+    color: #000;
+    padding: 0.2em 0;
+  }
+
+  #loader-wrapper {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 999999;
+  }
+
+  #loader {
+    display: block;
+    position: relative;
+    left: 50%;
+    top: 50%;
+    width: 150px;
+    height: 150px;
+    margin: -75px 0 0 -75px;
+    border-radius: 50%;
+    border: 3px solid transparent;
+    /* COLOR 1 */
+    border-top-color: #FFF;
+    -webkit-animation: spin 2s linear infinite;
+    /* Chrome, Opera 15+, Safari 5+ */
+    -ms-animation: spin 2s linear infinite;
+    /* Chrome, Opera 15+, Safari 5+ */
+    -moz-animation: spin 2s linear infinite;
+    /* Chrome, Opera 15+, Safari 5+ */
+    -o-animation: spin 2s linear infinite;
+    /* Chrome, Opera 15+, Safari 5+ */
+    animation: spin 2s linear infinite;
+    /* Chrome, Firefox 16+, IE 10+, Opera */
+    z-index: 1001;
+  }
+
+  #loader:before {
+    content: "";
+    position: absolute;
+    top: 5px;
+    left: 5px;
+    right: 5px;
+    bottom: 5px;
+    border-radius: 50%;
+    border: 3px solid transparent;
+    /* COLOR 2 */
+    border-top-color: #FFF;
+    -webkit-animation: spin 3s linear infinite;
+    /* Chrome, Opera 15+, Safari 5+ */
+    -moz-animation: spin 3s linear infinite;
+    /* Chrome, Opera 15+, Safari 5+ */
+    -o-animation: spin 3s linear infinite;
+    /* Chrome, Opera 15+, Safari 5+ */
+    -ms-animation: spin 3s linear infinite;
+    /* Chrome, Opera 15+, Safari 5+ */
+    animation: spin 3s linear infinite;
+    /* Chrome, Firefox 16+, IE 10+, Opera */
+  }
+
+  #loader:after {
+    content: "";
+    position: absolute;
+    top: 15px;
+    left: 15px;
+    right: 15px;
+    bottom: 15px;
+    border-radius: 50%;
+    border: 3px solid transparent;
+    border-top-color: #FFF;
+    /* COLOR 3 */
+    -moz-animation: spin 1.5s linear infinite;
+    /* Chrome, Opera 15+, Safari 5+ */
+    -o-animation: spin 1.5s linear infinite;
+    /* Chrome, Opera 15+, Safari 5+ */
+    -ms-animation: spin 1.5s linear infinite;
+    /* Chrome, Opera 15+, Safari 5+ */
+    -webkit-animation: spin 1.5s linear infinite;
+    /* Chrome, Opera 15+, Safari 5+ */
+    animation: spin 1.5s linear infinite;
+    /* Chrome, Firefox 16+, IE 10+, Opera */
+  }
+
+
+  @-webkit-keyframes spin {
+    0% {
+      -webkit-transform: rotate(0deg);
+      /* Chrome, Opera 15+, Safari 3.1+ */
+      -ms-transform: rotate(0deg);
+      /* IE 9 */
+      transform: rotate(0deg);
+      /* Firefox 16+, IE 10+, Opera */
+    }
+
+    100% {
+      -webkit-transform: rotate(360deg);
+      /* Chrome, Opera 15+, Safari 3.1+ */
+      -ms-transform: rotate(360deg);
+      /* IE 9 */
+      transform: rotate(360deg);
+      /* Firefox 16+, IE 10+, Opera */
+    }
+  }
+
+  @keyframes spin {
+    0% {
+      -webkit-transform: rotate(0deg);
+      /* Chrome, Opera 15+, Safari 3.1+ */
+      -ms-transform: rotate(0deg);
+      /* IE 9 */
+      transform: rotate(0deg);
+      /* Firefox 16+, IE 10+, Opera */
+    }
+
+    100% {
+      -webkit-transform: rotate(360deg);
+      /* Chrome, Opera 15+, Safari 3.1+ */
+      -ms-transform: rotate(360deg);
+      /* IE 9 */
+      transform: rotate(360deg);
+      /* Firefox 16+, IE 10+, Opera */
+    }
+  }
+
+
+  #loader-wrapper .loader-section {
+    position: fixed;
+    top: 0;
+    width: 51%;
+    height: 100%;
+    background: #7171C6;
+    /* Old browsers */
+    z-index: 1000;
+    -webkit-transform: translateX(0);
+    /* Chrome, Opera 15+, Safari 3.1+ */
+    -ms-transform: translateX(0);
+    /* IE 9 */
+    transform: translateX(0);
+    /* Firefox 16+, IE 10+, Opera */
+  }
+
+  #loader-wrapper .loader-section.section-left {
+    left: 0;
+  }
+
+  #loader-wrapper .loader-section.section-right {
+    right: 0;
+  }
+
+  /* Loaded */
+
+  .loaded #loader-wrapper .loader-section.section-left {
+    -webkit-transform: translateX(-100%);
+    /* Chrome, Opera 15+, Safari 3.1+ */
+    -ms-transform: translateX(-100%);
+    /* IE 9 */
+    transform: translateX(-100%);
+    /* Firefox 16+, IE 10+, Opera */
+    -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
+    transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
+  }
+
+  .loaded #loader-wrapper .loader-section.section-right {
+    -webkit-transform: translateX(100%);
+    /* Chrome, Opera 15+, Safari 3.1+ */
+    -ms-transform: translateX(100%);
+    /* IE 9 */
+    transform: translateX(100%);
+    /* Firefox 16+, IE 10+, Opera */
+    -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
+    transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
+  }
+
+  .loaded #loader {
+    opacity: 0;
+    -webkit-transition: all 0.3s ease-out;
+    transition: all 0.3s ease-out;
+  }
+
+  .loaded #loader-wrapper {
+    visibility: hidden;
+    -webkit-transform: translateY(-100%);
+    /* Chrome, Opera 15+, Safari 3.1+ */
+    -ms-transform: translateY(-100%);
+    /* IE 9 */
+    transform: translateY(-100%);
+    /* Firefox 16+, IE 10+, Opera */
+    -webkit-transition: all 0.3s 1s ease-out;
+    transition: all 0.3s 1s ease-out;
+  }
+
+  /* JavaScript Turned Off */
+
+  .no-js #loader-wrapper {
+    display: none;
+  }
+
+  .no-js h1 {
+    color: #222222;
+  }
+
+  #loader-wrapper .load_title {
+    font-family: 'Open Sans';
+    color: #FFF;
+    font-size: 19px;
+    width: 100%;
+    text-align: center;
+    z-index: 9999999999999;
+    position: absolute;
+    top: 60%;
+    opacity: 1;
+    line-height: 30px;
+  }
+
+  #loader-wrapper .load_title span {
+    font-weight: normal;
+    font-style: italic;
+    font-size: 13px;
+    color: #FFF;
+    opacity: 0.5;
+  }
+</style>
 
 </html>

src/App.vue

@@ -1,7 +1,9 @@
 <template>
   <div id="app">
-    <router-link to="/"></router-link>
+    <transition name="fade">
+      <!-- <router-link to="/"></router-link> -->
       <router-view />
+    </transition>
   </div>
 </template>
 <script>
@@ -25,4 +27,15 @@
 ::-webkit-scrollbar-thumb:hover {
   background: rgba(0, 0, 0, 0.3);
 }
+
+#app {
+  .fade-enter-active,
+  .fade-leave-avtive {
+    transition: opacity 2s;
+  }
+  .fade-enter,
+  .fade-leave-to {
+    opacity: 0;
+  }
+}
 </style>

src/api/api.js

@@ -1,274 +1,13 @@
 import request from "@/utils/request";
-// 事故快报
+
-export function getAccidentList(data) {
+export function getPress(row) {
-  return request({
-    url: "zzhController/getAccidentList.action",
-    method: "get",
-    params: data,
-  });
-}
-// 资料库
-export function getWxData_baseList(data) {
-  return request({
-    url: "zzhController/getWxData_baseList.action",
-    method: "get",
-    params: data,
-  });
-}
-// 专家库 机构库
-export function getMemberList(data) {
-  return request({
-    url: "zzhController/getMemberList.action",
-    method: "get",
-    params: data,
-  });
-}
-// 风险库行业
-export function getRiskTypelistWX(data) {
-  return request({
-    url: "/adminController/getRiskTypelistWX.action",
-    method: "get",
-    params: data,
-  });
-}
-// 子行业
-export function getRiskClassListWX(data) {
-  return request({
-    url: "/adminController/getRiskClassListWX.action",
-    method: "get",
-    params: data,
-  });
-}
-//分项
-export function getRiskListWX(data) {
-  return request({
-    url: "/adminController/getRiskListWX.action",
-    method: "get",
-    params: data,
-  });
-}
-// 风险库详情
-export function getRiskDetaidentBySidWX(data) {
-  return request({
-    url: "/adminController/getRiskDetaidentBySidWX.action",
-    method: "get",
-    params: data,
-  });
-}
-// 资料库分类
-export function getDataBaseType(data) {
-  return request({
-    url: "/zzhController/getDataBaseType.action",
-    method: "get",
-    params: data,
-  });
-}
-// 机构库详情
-export function getMemberBySid(data) {
-  return request({
-    url: "/zzhController/getMemberBySid.action",
-    method: "get",
-    params: data,
-  });
-}
-// 机构库相关推荐
-export function getOrgMember(data) {
-  return request({
-    url: "/zzhController/getOrgMember.action",
-    method: "get",
-    params: data,
-  });
-}
-// 省份
-export function getPosition(data) {
-  return request({
-    url: "/zzhController/getPosition.action",
-    method: "get",
-    params: data,
-  });
-}
-// 市
-export function getPpositionByB(data) {
-  return request({
-    url: "/zzhController/getPpositionByB.action",
-    method: "get",
-    params: data,
-  });
-}
-// 专家相关资料
-export function getDataBaseList(data) {
-  return request({
-    url: "/zzhController/getDataBaseList.action",
-    method: "get",
-    params: data,
-  });
-}
-// 事故类型
-export function getAccidentType(data) {
-  return request({
-    url: "/zzhController/getAccidentType.action",
-    method: "get",
-    params: data,
-  });
-}
-// 事故等级
-export function getAccidentLevel(data) {
-  return request({
-    url: "/zzhController/getAccidentLevel.action",
-    method: "get",
-    params: data,
-  });
-}
-// 事故快报详情
-export function getAccidentBysid(data) {
-  return request({
-    url: "/zzhController/getAccidentBysid.action",
-    method: "get",
-    params: data,
-  });
-}
-// 法规库
-export function getAllLawDetailList(data) {
-  return request({
-    url: "/zzhController/getAllLawDetailList.action",
-    method: "get",
-    params: data,
-  });
-}
-// 法规类型
-export function getAllLibLawType(data) {
-  return request({
-    url: "/zzhController/getAllLibLawType.action",
-    method: "get",
-    params: data,
-  });
-}
-// 法规适用领域
-export function getAllLibLawIndustry(data) {
-  return request({
-    url: "/zzhController/getAllLibLawIndustry.action",
-    method: "get",
-    params: data,
-  });
-}
-// 法规详情
-export function getLawDetailBysid(data) {
-  return request({
-    url: "/zzhController/getLawDetailBysid.action",
-    method: "get",
-    params: data,
-  });
-}
-// 登录
-export function addMemberPcLogin(data) {
-  return request({
-    url: "/zzhController/addMemberPcLogin.action",
-    method: "get",
-    params: data,
-  });
-}
-// 获取用户userid、sid、member
-export function getMemberPcLogin(data) {
-  return request({
-    url: "/zzhController/getMemberPcLogin.action",
-    method: "get",
-    params: data,
-  });
-}
-// 判断用户是否有邮箱
-export function getMemberPointsAndEmail(data) {
-  return request({
-    url: "/zzhController/getMemberPointsAndEmail.action",
-    method: "get",
-    params: data,
-  });
-}
-// 法规下载
-export function getFileDownlode(data) {
-  return request({
-    url: "/zzhController/getFileDownlode.action",
-    method: "get",
-    params: data,
-  });
-}
-// 增加法规预览量
-export function updateLawPreview(data) {
-  return request({
-    url: "/zzhController/updateLawPreview.action",
-    method: "get",
-    params: data,
-  });
-}
-// 增加法规下载量
-export function updateLawDownload(data) {
-  return request({
-    url: "/zzhController/updateLawDownload.action",
-    method: "get",
-    params: data,
-  });
-}
-// 资料库详情
-export function getWxDataBaseBySid(data) {
-  return request({
-    url: "/zzhController/getWxDataBaseBySid.action",
-    method: "get",
-    params: data,
-  });
-}
-// 增加资料下载量
-export function updateDataBaseNum(data) {
-  return request({
-    url: "/zzhController/updateDataBaseNum.action",
-    method: "get",
-    params: data,
-  });
-}
-// 点击个人中心
-export function getAuthUser(data) {
-  return request({
-    url: "/zzhController/getAuthUser.action",
-    method: "get",
-    params: data,
-  });
-}
-// 推荐事故
-export function getAccidentRecommend(data) {
-  return request({
-    url: "/zzhController/getAccidentRecommend.action",
-    method: "get",
-    params: data,
-  });
-}
-// 法规高级搜索是否超过今日搜索量
-export function getDataSeeCount(data) {
-  return request({
-    url: "/zzhController/getDataSeeCount.action",
-    method: "get",
-    params: data,
-  });
-}
-// 法规高级搜索 查询数据
-export function getLibLawSearch(data) {
-  return request({
-    url: "/zzhController/getLibLawSearch.action",
-    method: "get",
-    params: data,
-  });
-}
-// 事故快报查看是否超过今日查看量
-export function getDangerSee(data) {
-  return request({
-    url: "/zzhController/getDangerSee.action",
-    method: "get",
-    params: data,
-  });
-}
-// 精品风险库事故快报详情
-export function getRiskPayorder(data) {
   return request({
-    url: "/zzhController/getRiskPayorder.action",
+    url: "/openApi/v1/notice/page?size="+row.pageSize +"&current=" +row.currentPage +"&category=" +row.category,
     method: "get",
-    params: data,
+    headers: {
+      'AppId': row.Appld,
+      'AppSecret': row.AppSecret,
+    },
   });
 }
 

src/api/mock.js

@@ -0,0 +1,10 @@
+
+import mockRequests from '@/mockAjax'
+ 
+//获取默认设置的接口
+export const product = () =>
+  mockRequests({
+    url: '/product',
+    method: 'get',
+  })
+

src/components/header.vue

@@ -4,7 +4,11 @@
     <div class="nav">
       <div class="modelWidth max flex">
         <div style="flex: 1">
-          <el-image style="height: 60px" :src="require('@/assets/img/blogo.png')" fit="contain"></el-image>
+          <el-image
+            style="height: 60px"
+            :src="require('@/assets/img/blogo.png')"
+            fit="contain"
+          ></el-image>
         </div>
         <div class="menu">
           <div
@@ -30,24 +34,44 @@
                     v-for="(item, index) in serve"
                     :key="index"
                     @mouseenter="handleServe(index)"
-                  >{{ item.name }}</div>
+                  >
+                    {{ item.name }}
+                  </div>
                 </div>
                 <div class="box-right" v-show="showIndex == 0">
-                  <div class="platform" v-for="(item, index) in platform" :key="index">
+                  <div
+                    class="platform"
+                    v-for="(item, index) in platform"
+                    :key="index"
+                  >
                     <div class="top">{{ item.title }}</div>
-                    <div class="bottom" @click="handleProduct">{{ item.name }}</div>
+                    <div class="bottom" @click="handleProduct(item.id)">
+                      {{ item.name }}
+                    </div>
                   </div>
                 </div>
                 <div class="box-right" v-show="showIndex == 1">
-                  <div class="platform" v-for="(item, index) in platform1" :key="index">
+                  <div
+                    class="platform"
+                    v-for="(item, index) in platform1"
+                    :key="index"
+                  >
                     <div class="top">{{ item.title }}</div>
-                    <div class="bottom" @click="handleProduct">{{ item.name }}</div>
+                    <div class="bottom" @click="handleProduct(item.id)">
+                      {{ item.name }}
+                    </div>
                   </div>
                 </div>
                 <div class="box-right" v-show="showIndex == 2">
-                  <div class="platform" v-for="(item, index) in platform2" :key="index">
+                  <div
+                    class="platform"
+                    v-for="(item, index) in platform2"
+                    :key="index"
+                  >
                     <div class="top">{{ item.title }}</div>
-                    <div class="bottom" @click="handleProduct">{{ item.name }}</div>
+                    <div class="bottom" @click="handleProduct(item.id)">
+                      {{ item.name }}
+                    </div>
                   </div>
                 </div>
               </div>
@@ -69,74 +93,61 @@ export default {
       serve: [
         {
           name: "数据服务",
-          id: 1
+          id: 1,
         },
         {
           name: "工业SAAS平台",
-          id: 2
+          id: 2,
         },
         {
           name: "硬件产品",
-          id: 3
+          id: 3,
-        }
+        },
       ],
       platform: [
         {
-          title: "大数据技术1",
+          id: 4,
-          name: "大数据核验平台"
+          title: "企业信息核验",
-        },
+          name: "企业组织机构信息核验",
-        {
-          title: "大数据技术1",
-          name: "大数据核验平台"
         },
         {
-          title: "大数据技术1",
+          id: 5,
-          name: "大数据核验平台"
+          title: "企业信息核验",
+          name: "企业营业执照OCR识别",
         },
-        {
-          title: "大数据技术1",
-          name: "大数据核验平台"
-        }
       ],
       platform1: [
         {
-          title: "大数据技术2",
+          id: 1,
-          name: "大数据核验平台"
+          title: "工业互联网",
+          name: "主动标识载体公共服务平台",
         },
         {
-          title: "大数据技术2",
+          id: 2,
-          name: "大数据核验平台"
+          title: "物联网",
+          name: "青鸟翼联平台",
         },
         {
-          title: "大数据技术2",
+          id: 3,
-          name: "大数据核验平台"
+          title: "区块链",
+          name: "授权存证公共服务平台",
         },
-        {
-          title: "大数据技术2",
-          name: "大数据核验平台"
-        }
       ],
       platform2: [
         {
-          title: "大数据技术3",
+          id: 6,
-          name: "大数据核验平台"
+          title: "标识应用一体机",
+          name: "工业标识应用一体机",
         },
         {
-          title: "大数据技术3",
+          id: 7,
-          name: "大数据核验平台"
+          title: "标识安全数采网关",
+          name: "主动标识安全数采网关",
         },
-        {
-          title: "大数据技术3",
-          name: "大数据核验平台"
-        },
-        {
-          title: "大数据技术3",
-          name: "大数据核验平台"
-        }
       ],
 
       timer: null,
-      showIndex: 0
+      showIndex: 0,
     };
   },
   created() {},
@@ -145,35 +156,39 @@ export default {
     hanldeNav(index) {
       if (index == 0) {
         this.$router.push({
-          path: "/"
+          path: "/",
         });
       }
+
       if (index == 3) {
         this.$router.push({
-          path: "/pressCenter"
+          path: "/pressCenter",
         });
       }
       if (index == 4) {
         this.$router.push({
-          path: "/aboutUs"
+          path: "/aboutUs",
         });
       }
       if (index == 2) {
         this.$router.push({
-          path: "/solve"
+          path: "/solve",
         });
       }
     },
-    handleProduct() {
+    handleProduct(index) {
       this.$router.push({
-        path: "/product"
+        path: "/product",
+        query: {
+          index: index,
+        },
       });
     },
     //产品服务
     handleServe(index) {
       this.showIndex = index;
-    }
+    },
-  }
+  },
 };
 </script>
 <style lang="less" scoped>
@@ -274,7 +289,7 @@ export default {
             display: flex;
 
             padding: 30px;
-            justify-content: center;
+
             flex-wrap: wrap;
             .platform {
               width: 25%;

src/main.js

@@ -4,17 +4,14 @@ import router from "./router";
 import Element from "element-ui";
 import "element-ui/lib/theme-chalk/index.css";
 import animated from 'animate.css'
-import axios from "axios";
+import '@/mock/mockServe.js'
 Vue.use(animated);
 Vue.use(Element);
 import "@/assets/css/style.css";
-Vue.prototype.$http = axios
+
-require('./mock'); //引入mock数据，关闭则注释该行
+
 Vue.config.productionTip = false;
 new Vue({
   router,
   render: (h) => h(App),
 }).$mount("#app");
-// router.afterEach((to, from, next) => {
-//   window.scrollTo(0, 0);
-// });

src/mock/index.js

@@ -1,4 +0,0 @@
-const Mock = require('mockjs');
-//格式： Mock.mock( url, post/get , 返回的数据)；
-Mock.mock('/home/userInfo', 'get', require('./json/home'));
-Mock.mock('/news/press', 'get', require('./json/news'));

src/mock/json/home.json

@@ -1,39 +0,0 @@
-{
-  "result": "success",
-  "data": {
-    "number": {
-      "a": "61",
-      "b": "2300",
-      "c": "2700"
-    },
-    "left": [
-      {
-        "name": "国家工业互联网标识解析二级节点",
-        "detail": "工业互联网标识解析体系类似互联网领域的域名解析系统（DNS）， 是全球工业互联网安全运行的核心基础设施之一。"
-      },
-      {
-        "name": "国家中小企业工业互联网数字化转型促进中心",
-        "detail": "国家中小企业工业互联网数字化转型促进中心是全国唯一一家面向中小企业、立足优势产业集聚、服务民立足优势产业集聚、服务民"
-      },
-      {
-        "name": "济南市先进制造业和数字经济标志性产业链群链主企业",
-        "detail": "济南市工业和信息化局按照“系统集成能力强、国内外市场占有率高、 产品竞争力强、产业链拉动作用大”的原则，从10个标志性产业链群。"
-      }
-    ],
-    "right": [
-      {
-        "name": "国家高新技术企业",
-        "detail": "工业互联网标识解析体系类似互联网领域的域名解析系统（DNS）， 是全球工业互联网安全运行的核心基础设施之一。"
-      },
-      {
-        "name": "山东省科技型、创新型中小企业",
-        "detail": "国家中小企业工业互联网数字化转型促进中心是全国唯一一家面向中小企业、立足优势产业集聚、服务民立足优势产业集聚、服务民"
-      },
-      {
-        "name": "山东省大数据创新服务机构",
-        "detail": "大数据时代到来，数据价值及数据库国产化的重要性日益凸显，加快推动大数据产业高质量发展，对于抢抓新时代产业变革新机遇、构对于抢抓新时代产业变革新机遇、构"
-      }
-    ]
-  },
-  "msg": ""
-}

src/mock/json/news.json

@@ -1,22 +0,0 @@
-{
-  "result": "success",
-  "data": {
-    "records": [
-      {
-        "img": "",
-        "time": "20220",
-        "name": "工业互联网标识解析平台应用推广论坛暨远盾网络二级节点建设启动仪式成功召开",
-        "detail": "7月18日，为加快工业互联网标识解析二级节点建设，深化标识解析应用推广，加快形成面向重点行业的规模化标识解析服务能力，发挥榜样带头作用，加快推进工业互联网创新发展，助力全省新旧动能转换。在济南市成功召开工业互联网标识解析平台应用推广论坛暨远盾网络二级节点建设启动仪式。"
-      },
-      {
-        "name": "国家中小企业工业互联网数字化转型促进中心",
-        "detail": "国家中小企业工业互联网数字化转型促进中心是全国唯一一家面向中小企业、立足优势产业集聚、服务民立足优势产业集聚、服务民"
-      },
-      {
-        "name": "济南市先进制造业和数字经济标志性产业链群链主企业",
-        "detail": "济南市工业和信息化局按照“系统集成能力强、国内外市场占有率高、 产品竞争力强、产业链拉动作用大”的原则，从10个标志性产业链群。"
-      }
-    ]
-  },
-  "msg": ""
-}

src/mock/mockServe.js

@@ -0,0 +1,13 @@
+// 先引入mockjs模块
+import Mock from 'mockjs'
+// 把JSON数据格式引入进来
+// [JSON数据格式根本没有对外暴露，但是可以引入]，因为 webpack默认对外暴露的：图片、JSON数据格式
+import product from './product.json'
+
+ 
+
+// mock数据:第一个参数：请求地址   第二个参数：请求数据（200代表请求成功，data代表数据）
+Mock.mock('/mock/product', {
+  code: 200,
+  data: product,
+})

src/mock/product.json

@@ -0,0 +1,635 @@
+[
+  {
+    "introduction": "山东青鸟工业互联网有限公司自主研发的工业标识物联网能力平台，是为工业互 联网领域企业客户提供智能的工业标识卡连接管理服务，包括卡信息查询、生命周期管理、卡账单查询管理等功能。使用户全面掌握网络连接状态、计费情况和连接历史日志，是用户进行大数据分析、能力开放、故障诊断的重要工具。用户可通过物联网连接管理平台完全自助完成物联卡的管理，降低了用户的运营成本。",
+    "advantage": [
+      {
+        "name": "基于标识安全基座",
+        "value": "支持独立安全存储、防篡改、防攻击能力，达到EAL4+安全等级"
+      },
+      {
+        "name": "数据加密",
+        "value": "对传输过程中的如标识注册、更新加密等数据进行更高级别的数据加密。"
+      },
+      {
+        "name": "接入便捷",
+        "value": "统一三大运营商接口，缩短开发周期，帮助用户节省开发和运营成本。"
+      },
+      {
+        "name": "产品全面",
+        "value": "支持三大运营商，支持插拔式，网络制式包括 3G/4G。"
+      },
+      {
+        "name": "使用安全",
+        "value": "协议设计采用标准安全方案，外网全链路加密，杜绝窃听，确保用户数据安全。"
+      },
+      {
+        "name": "数据统计",
+        "value": "实时展示用户持有的物联卡流量、资费和状态等详细信息，同时也提供了流量资费超量预警。"
+      },
+      {
+        "name": "优质服务",
+        "value": "秉承服务宗旨，快速响应用户需求，承诺7 × 24小时极速响应。"
+      },
+      {
+        "name": "开放共赢",
+        "value": "坚持开放的政策，积极探索物联网行业，尽我们所能满足用户需求。"
+      }
+    ],
+    "functions": [
+      {
+        "img": "/image/product/t1.png",
+        "title": "短信发送功能",
+        "detail": "我们支持给物联卡下发短信，向用户服务器推送回执以及回复，满足用户使用非数据通道控制设备的功能。"
+      },
+      {
+        "img": "/image/product/t2.png",
+        "title": "卡片信息查询",
+        "detail": "用户既可查询账户持有的所有卡片信息，功能齐全。"
+      },
+      {
+        "img": "/image/product/t3.png",
+        "title": "卡片资费管理",
+        "detail": "可进行资费管理，同时满足平台用户和终端用户管理卡片需求。"
+      },
+      {
+        "img": "/image/product/t4.png",
+        "title": "流量信息展示",
+        "detail": "控制台可查看整个流量池或者单卡流量使用情况，方便用户进行个性化的套餐管理，优化成本。"
+      },
+      {
+        "img": "/image/product/t5.png",
+        "title": "自动告警功能",
+        "detail": "支持自定义告警阈值设置，实现短信、邮件和 API 等多种方式流量自动化告警，有效降低流量使用的风险性。"
+      }
+    ],
+    "architecture": [
+      {
+        "title": "基础管理",
+        "architectureArray": [
+          "通道管理",
+          "元流量池管理",
+          "元套餐管理",
+          "础卡管理"
+        ]
+      },
+      {
+        "title": "通信管理",
+        "architectureArray": [
+          "出库卡管理",
+          "套餐组管理",
+          "套餐管理",
+          "流量池管理"
+        ]
+      },
+      {
+        "title": "信息管理",
+        "architectureArray": [
+          "日流量历史查询",
+          "月流量历史查询",
+          "卡信息管理"
+        ]
+      },
+      {
+        "title": "系统管理",
+        "architectureArray": [
+          "用户管理",
+          "机构管理",
+          "岗位管理",
+          "字典管理"
+        ]
+      }
+    ],
+    "scenario": [
+      {
+        "title": "智能制造工厂",
+        "img": " /image/product/cj1.png",
+        "introduce": "智慧工厂定位管理系统通过应用目前最先进的超宽带定位技术，配合5G，通过工业标识卡以电子标签作为标识码，将其与人员进行绑定，并且在定位区域内，无需任何高精度基站，对电子标签进行识别和定位，由此实现了对受控目标的实时定位和追踪管理，系统定位精度达到0.3米。人员轨迹连续，无偏跳。同时标签协议亦可无缝对接门禁系统，可根据授权刷卡开门。"
+      },
+      {
+        "title": "智慧农业",
+        "img": " /image/product/cj1.png",
+        "introduce": "工业标识卡与传感器和音视频设备结合，完成远程视频监控、牲畜健康状况监控等功能。"
+      },
+      {
+        "title": "车联网",
+        "img": " /image/product/cj1.png",
+        "introduce": "使用工业标识卡满足行车记录仪、后视镜、导航、车载 Wi-Fi 的数据联网需求。"
+      },
+      {
+        "title": "共享设备",
+        "img": " /image/product/cj1.png",
+        "introduce": "使用工业标识卡及窄带物联技术完成设备地理位置信息上报、开锁等功能。"
+      },
+      {
+        "title": "环境监测",
+        "img": " /image/product/cj1.png",
+        "introduce": "空气污染物指标、水质检测实时上报，工业标识卡稳定的数据通道，能够帮助用户实时获取这些信息。"
+      }
+    ]
+  },
+  {
+    "introduction": "平台与传统的服务平台或应用平台架构不同，是基于主动标识载体的工业软件一体化服务平台，不单是一个独立在云端的平台架构，而是在设计之初就使用边云结合、边缘连接处理异构数据、边缘实现人工智能采集数据、边缘进行主动标识操作的创新模式。平台促进企业的信息化与标识解析体系的融合，提升标识解析二级节点接入企业节点数量、标识解析注册数量。使标识解析体系落地并能下沉到企业工业软件和生产流程中，解决产品全环节追溯难、质量管控精度差、设备运营管理效率低、生产运营数据缺失等问题，提高企业管理精细度、优化企业业务流程过程。平台与主动标识安全数采网关结合，管理企业IOT设备，并根据边缘计算网关上传的数据中，各设备、传感器标识进行合法性验证，保证数据安全。",
+    "type": 1,
+    "bantitle": "主动标识载体公共服务平台",
+    "bancontent": "基于主动标识载体的工业软件一体化服务平台，不单是一个独立在云端的平台架构，而是在设计之初就使用边云结合、边缘连接处理异构数据、边缘实现人工智能采集数据、边缘进行主动标识操作的创新模式。",
+    "advantage": [
+      {
+        "name": "企业客户建设节点、使用标识意向提升",
+        "value": "平台从全流程上打通了企业实施具体标识应用的各项条件，标准化应用方式将过去让客户做“简答题”变成了“填空题、选择题”，企业客户对照具体应用，落实到自己企业生产流程中去，可以快速的把应用模式确定下来，使客户建设企业节点、接入二级节点的意向变为主动。"
+      },
+      {
+        "name": "适配企业信息化不同条件，快速上线",
+        "value": "根据企业自身信息化的情况，有条件的建立应用接口打通企业各工业软件，暂时没有条件的就直接租用服务平台应用，通过数据导入方式快速应用上线。"
+      },
+      {
+        "name": "应用试点取得的显著成效",
+        "value": "服务平台上线前，二级节点接入企业数20家，标识注册量2000万个；试点应用推广的3个月内，二级节点接入企业数增长到61家，标识注册量达到6000万个，标识日解析量约400万次。"
+      },
+      {
+        "name": "基于标识安全基座",
+        "value": "将工业互联网标识解析体系作为数据交互的基础构建。"
+      },
+      {
+        "name": "数据互通共享",
+        "value": "在企业现有工业软件层面，有多种手段解决数据共享互通。"
+      },
+      {
+        "name": "数据互通共享",
+        "value": "在企业现有工业软件层面，有多种手段解决数据共享互通。"
+      }
+    ],
+    "functions": [
+      {
+        "img": "/image/product/t1.png",
+        "title": "基于主动标识",
+        "detail": "IDIS功能即标识解析本地化企业节点，负责与二级节点进行数据交互。"
+      },
+      {
+        "img": "/image/product/t2.png",
+        "title": "标识开放API",
+        "detail": "在企业内网，开放标识解析API给企业内其他应用调用。"
+      },
+      {
+        "img": "/image/product/t3.png",
+        "title": "标识可信安全通信",
+        "detail": "与主动标识安全数采网关结合，管理企业IOT设备，并根据边缘计算网关上传的数据中，各设备、传感器标识进行合法性验证，保证数据安全。"
+      },
+      {
+        "img": "/image/product/t4.png",
+        "title": "数据与多系统对接",
+        "detail": "可再次整合边缘计算网关上传的数据，与工业云平台、各工业系统进行数据对接。"
+      }
+    ],
+    "architecture": [
+      {
+        "img": "/image/product/zt1.png"
+      },
+      {
+        "img": "/image/product/zt2.png"
+      }
+    ],
+    "scenario": [
+      {
+        "title": "工业互联网供应链",
+        "img": " /image/product/cj1.png",
+        "introduce": ""
+      },
+      {
+        "title": "环保优化",
+        "img": " /image/product/cj1.png",
+        "introduce": "利用主动标识载体工业一体化服务平台创新技术，可以实时采集各种气体和废水排放数据，构建关键指标的监控，并且结合实时的工艺参数，通过精细的数据分析，寻找环保指标和产能指标的最优组合，在保证环保指标的前提下，降低企业的运营成本。"
+      },
+      {
+        "title": "防伪标识",
+        "img": " /image/product/cj1.png",
+        "introduce": "使用工业标识卡满足行车记录仪、后视镜、导航、车载 Wi-Fi 的数据联网需求。"
+      }
+    ]
+  },
+  {
+    "introduction": "山东青鸟工业互联网有限公司自主研发的工业标识物联网能力平台，是为工业互联网领域企业客户提供智能的工业标识卡连接管理服务，能够与标识服务节点或标识数据应用平台主动建立连接，并承载证书、算法与密钥等安全信息，功能包括卡信息查询、生命周期管理、卡账单查询管理等。使用户全面掌握网络连接状态、计费情况和连接历史日志，是用户进行大数据分析、能力开放、故障诊断的重要工具。用户可通过物联网连接管理平台完全自助完成物联卡的管理，降低运营成本，主动标识载体卡的发展，有助于扩大工业互联网标识解析的覆盖面，促进标识产业及工业企业向智能化、网络化、数字化方向发展。",
+    "type": 2,
+    "bantitle": "青鸟翼联平台",
+    "bancontent": "山东青鸟工业互联网有限公司自主研发的工业标识物联网能力平台，是为工业互联网领域企业客户提供智能的工业标识卡连接管理服务，能够与标识服务节点或标识数据应用平台主动建立连接，并承载证书、算法与密钥等安全信息，功能包括卡信息查询、生命周期管理、卡账单查询管理等。",
+    "advantage": [
+      {
+        "name": "基于标识安全基座",
+        "value": "具备物联网卡可鉴权、联网的功能外，支持独立安全存储、防篡改、防攻击能力，达到 EAL4+安全等级。"
+      },
+      {
+        "name": "数据加密",
+        "value": "对传输过程中的如标识注册、更新加密等数据进行更高级别的数据加密，具备证书、算法、标识数据和密钥的安全存储及通过逻辑通道加解密能力。"
+      },
+      {
+        "name": "接入便捷",
+        "value": "统一三大运营商接口，缩短开发周期，帮助用户节省开发和运营成本。"
+      },
+      {
+        "name": "产品全面",
+        "value": "支持三大运营商，支持插拔式，网络制式包括 3G/4G。"
+      },
+      {
+        "name": "使用安全",
+        "value": "协议设计采用标准安全方案，外网全链路加密，杜绝窃听，确保用户数据安全。"
+      },
+      {
+        "name": "数据统计",
+        "value": "实时展示用户持有的物联卡流量、资费和状态等详细信息，同时也提供了流量资费超量预警。"
+      },
+      {
+        "name": "优质服务",
+        "value": "秉承服务宗旨，快速响应用户需求，承诺7 × 24小时极速响应。"
+      },
+      {
+        "name": "开放共赢",
+        "value": "坚持开放的政策，积极探索物联网行业，尽我们所能满足用户需求。"
+      }
+    ],
+    "functions": [
+      {
+        "img": "/image/product/t1.png",
+        "title": "卡片信息查询",
+        "detail": "用户既可查询账户持有的所有卡片信息，功能齐全。"
+      },
+      {
+        "img": "/image/product/t2.png",
+        "title": "卡片资费管理",
+        "detail": "可进行资费管理，同时满足平台用户和终端用户管理卡片需求。"
+      },
+      {
+        "img": "/image/product/t3.png",
+        "title": "流量信息展示",
+        "detail": "控制台可查看整个流量池或者单卡流量使用情况，方便用户进行个性化的套餐管理，优化成本。"
+      },
+      {
+        "img": "/image/product/t4.png",
+        "title": "短信发送功能",
+        "detail": "我们支持给物联卡下发短信，向用户服务器推送回执以及回复，满足用户使用非数据通道控制设备的功能。 "
+      },
+      {
+        "img": "/image/product/t5.png",
+        "title": "自动告警功能",
+        "detail": "支持自定义告警阈值设置，实现短信、邮件和 API 等多种方式流量自动化告警，有效降低流量使用的风险性。"
+      }
+    ],
+    "architecture": [
+      {
+        "title": "基础管理",
+        "architectureArray": [
+          "通道管理",
+          "元流量池管理",
+          "元套餐管理",
+          "础卡管理"
+        ]
+      },
+      {
+        "title": "通信管理",
+        "architectureArray": [
+          "出库卡管理",
+          "套餐组管理",
+          "套餐管理",
+          "流量池管理"
+        ]
+      },
+      {
+        "title": "信息管理",
+        "architectureArray": [
+          "日流量历史查询",
+          "月流量历史查询",
+          "卡信息管理"
+        ]
+      },
+      {
+        "title": "系统管理",
+        "architectureArray": [
+          "用户管理",
+          "机构管理",
+          "岗位管理",
+          "字典管理"
+        ]
+      }
+    ],
+    "scenario": [
+      {
+        "title": "智能制造工厂",
+        "img": " /image/product/cj1.png",
+        "introduce": "智慧工厂定位管理系统通过应用目前最先进的超宽带定位技术，配合5G，通过工业标识卡以电子标签作为标识码，将其与人员进行绑定，并且在定位区域内，无需任何高精度基站，对电子标签进行识别和定位，由此实现了对受控目标的实时定位和追踪管理，系统定位精度达到0.3米。人员轨迹连续，无偏跳。同时标签协议亦可无缝对接门禁系统，可根据授权刷卡开门。"
+      },
+      {
+        "title": "智慧农业",
+        "img": " /image/product/cj1.png",
+        "introduce": "工业标识卡与传感器和音视频设备结合，完成远程视频监控、牲畜健康状况监控等功能。"
+      },
+      {
+        "title": "车联网",
+        "img": " /image/product/cj1.png",
+        "introduce": "使用工业标识卡满足行车记录仪、后视镜、导航、车载 Wi-Fi 的数据联网需求。"
+      },
+      {
+        "title": "共享设备",
+        "img": " /image/product/cj1.png",
+        "introduce": "使用工业标识卡及窄带物联技术完成设备地理位置信息上报、开锁等功能。"
+      },
+      {
+        "title": "环境监测",
+        "img": " /image/product/cj1.png",
+        "introduce": "空气污染物指标、水质检测实时上报，工业标识卡稳定的数据通道，能够帮助用户实时获取这些信息。"
+      }
+    ]
+  },
+  {
+    "introduction": "授权存证公共服务平台可将银行、工业、制造业、经销商、监管方等多方的授权信息进行区块链存证，将产品如流转信息、合格证状态等信息上链同步修改合格证的状态，其他参与方可以实时追溯合格证的变化状态参与方之间无需通过互相对接来更新相关合格证的信息，通过数据多方的协作，提升业务办事效率，该服务以一套标准化接口方案实现业务对接。对于每个业务模块可以通过标准化接口快速接入体系，依托标准化接入模板、开发测试等流程进行链上接入，保证业务应用与链上技术分离。数据上链保证了数据的不可纂改性，在数据协作方面，银行、工业、制造业、经销商、监管方多方对现有产品合格证录入、提证、盘库、出库等数据状态同步上链更新，同时，其他参与方可以直接通过链上查询各产品合格证全生命周期记录，包含合格证更新时间、更新主题等信息进一步提升了合格证监管可信度，通过数据多方的协作，提升业务办事效率。平台该服务将产品合格证全流程的信息保存在链上，保证了产品合格证流转信息的完整性，数据信息经过系统同时需要业务审核之后才触发上链，保证了数据的准确性和真实性以及数据要素的价值。平台通过对产品合格证信息和质押物环境信息进行服务化，对经销商、核心企业和银行多方提供相应服务。对数据进行分析提供经销商融资情况，其中核心企业和银行等参与方可以通过此数据，判断经销商的经营情况以及在当地的规模，对质押物环境信息分析，判断储存环境是否适合，可以及时的调整相应策略，以达到风险管控和保障的目的。",
+    "type": 1,
+    "bantitle": "授权存证公共服务平台",
+    "bancontent": "授权存证公共服务平台可将银行、工业、制造业、经销商、监管方等多方的授权信息进行区块链存证，将产品如流转信息、合格证状态等信息上链同步修改合格证的状态，其他参与方可以实时追溯合格证的变化状态参与方之间无需通过互相对接来更新相关合格证的信息，通过数据多方的协作，提升业务办事效率，该服务以一套标准化接口方案实现业务对接。",
+    "advantage": [
+      {
+        "name": "主体合法合规",
+        "value": "系统对区块链节点运营主体有严格的评审，明确区块链节点运营主体的真实身份、联系方式等信息，保证区块链运营主体具有与服务规模相适应的技术人员及专业能力，并且有完善的管理机制。"
+      },
+      {
+        "name": "过程合法合规",
+        "value": "系统对电子数据的生成、收集、传输过程符合相关法律法规的要求。"
+      },
+      {
+        "name": "方式合法合规",
+        "value": "系统使用公信力机构认证的取证工具，也可以通过从事电子数据检验鉴定机构的专职人员来进行规范化和制度化的取证，并保证证据获得的合法性。系统应保证所存电子数据可以被验证与追溯，可以通过法院电子证据平台、司法鉴定机构或其他方式对证据进行追溯核验。"
+      },
+      {
+        "name": "数据强一致性",
+        "value": "数据的强一致性是指区块链系统中各个节点存储的上链数据的一致性，进而达到数据可信共享的目的。数据上链之前先通过多方共识，避免数据不加校验的上链、避免数据在多节点的不一致，保证数据经过足够多节点的多方背书、多方签名再写入各个节点。每个节点在参与数据上链工作前，检查自身落链区块的高度是不是最新，如果不是最新则需要先从其他节点进行区块数据同步后，方可参与数据上链共识。"
+      },
+      {
+        "name": "系统便利性",
+        "value": "简单、便捷、安全的访问、使用方式是用户使用的另一大需求，主要体现在接入、使用的便捷。包括节点部署及组网的便利性、开放接口的便利性。"
+      },
+      {
+        "name": "系统可靠安全性",
+        "value": "安全性是司法存证是否可以被法院采信的基础，在应用的各个层面都有涉及，主要体现在系统的安全、数据的安全。系统安全包含：运行环境的安全、软件的安全、网络传输的安全。数据安全包含：数据存储安全、数据的不易篡改、数据的访问留痕、数据的隐私。"
+      }
+    ],
+    "functions": [
+      {
+        "img": "/image/product/t1.png",
+        "title": "分布式存储",
+        "detail": "其核心在于先将数据分割成诸多小块，然后通过开放节点的存储空间而建立分布式数据库。通过任何单一节点均无法获取到完整的数据信息，也无法完成单独记账；分布式存储能够利用每个节点的空余空间存储数据信息，可解决数据库中数据容易被篡改、容易丢失和难恢复等问题。"
+      },
+      {
+        "img": "/image/product/t2.png",
+        "title": "共识机制",
+        "detail": "在分布式存储空间中，多节点通过异步通信的方式组成网络集群，异步网络中需要借助于容错规则，保证不同主机之间具备可靠的共识状态，以避免可能出现的错误信息传播。电子证据的区块链存证技术在金融犯罪侦查中，共识机制用于解决没有信任的个体之间不同结点上存证数据的一致性和有效性问题。"
+      },
+      {
+        "img": "/image/product/t3.png",
+        "title": "加密算法",
+        "detail": "本文采用区块链技术中常用的哈希算法，它可以将输入的任意长度的数据信息在合理的时间内转换为固定长度的输出，具有碰撞阻力和隐秘性等属性，可用作数字签名，存证完整性检验和存证一致性验证。"
+      },
+      {
+        "img": "/image/product/t4.png",
+        "title": "点对点传输",
+        "detail": "等级相同的节点作为中心服务器和客户端，任意两个节点之间可以进行交互，交互结束后全网每一个节点都会同步本次交互，这是点对点传输最大的特点。在金融犯罪侦查中，这样的传输模式有利于避免因个别服务器故障而导致存证结果不准确或不全的情况。 "
+      },
+      {
+        "img": "/image/product/t5.png",
+        "title": "自动告警功能",
+        "detail": "支持自定义告警阈值设置，实现短信、邮件和 API 等多种方式流量自动化告警，有效降低流量使用的风险性。"
+      }
+    ],
+    "architecture": [
+      {
+        "img": "/image/product/zt4.png"
+      }
+    ],
+    "scenario": [
+      {
+        "title": "智慧可信警务",
+        "img": " /image/product/cj1.png",
+        "introduce": "警务系统赋能，提高警方身份的真实可信性，打造智慧警务。"
+      },
+      {
+        "title": "智慧可信消防",
+        "img": " /image/product/cj1.png",
+        "introduce": "为应急消防赋能，提供灾情信息的全流程追溯，精准便捷救援。"
+      },
+      {
+        "title": "智慧可信社区",
+        "img": " /image/product/cj1.png",
+        "introduce": "为智慧社区赋能，提高业主身份的真实可信性，提高小区安全等级，打造安全社区。"
+      },
+      {
+        "title": "智慧可信教育",
+        "img": " /image/product/cj1.png",
+        "introduce": "对教育行业内不同细分领域，提升教育行业网站安全防护水平和访问性能。"
+      },
+      {
+        "title": "智慧可信金融",
+        "img": " /image/product/cj1.png",
+        "introduce": "进行可信身份的录入、授权、认证、验证、展示及注销的全流程的整合，确保签发的身份可信，且所展示的身份信息防篡改、可溯源、具有法律效力，有效解决了主叫方身份无法被可信识别的问题监管部门接到用户举报后，通过业务管理平台调取存证库中相应凭证，并向企业请求对比原始数据，以核查数据真实情况，进而查看用户授权情况，判断企业是否确实存在违规营销情况。"
+      },
+      {
+        "title": "智慧可信办公",
+        "img": " /image/product/cj1.png",
+        "introduce": "对企业OA、视频会议、办公应用、客户管理等通讯APP，集成可信通信能力，显示可信身份信息，确保安全可信。"
+      }
+    ]
+  },
+  {
+    "bantitle": "企业组织机构信息核验",
+    "type": 4,
+    "bancontent": "按照业务用户传入的统一社会信用代码、组织机构名称进行组织机构信息核验，并返回核验结果。"
+  },
+  {
+    "bantitle": "营业执照OCR识别",
+    "type": 4,
+    "bancontent": "根据营业执照图片的传入，通过光学字符识别技术，识别证件上的文字信息。"
+  },
+  {
+    "introduction": "工业标识应用一体机，简称工业标识一体机，搭载工业物联网平台，具备设备管理、设备联网、数据采集、智能分析、可视化创新应用等多重能力，适配上百种工业协议，提供软硬一体化交付，开箱即用的工业物联网服务。",
+    "type": 1,
+    "bantitle": "工业标识应用一体机",
+    "bancontent": "工业标识应用一体机，简称工业标识一体机，搭载工业物联网平台，具备设备管理、设备联网、数据采集、智能分析、可视化创新应用等多重能力，适配上百种工业协议，提供软硬一体化交付，开箱即用的工业物联网服务。",
+    "advantage": [
+      {
+        "name": "简化业务部署",
+        "value": "采用一体化交付，自动化部署，支持室外、室内、IDC环境安装。开放兼容，便于软件集成。保障部署、集成效率，助其在新业务上抢占先机。"
+      },
+      {
+        "name": "支持智能化改造",
+        "value": "不改变产线结构，减少对生产的影响，自动采集工业设备关键数据。"
+      },
+      {
+        "name": "全场景覆盖",
+        "value": "上百种工业设备数据采集协议模板，无需复杂配置可对接市面主流的生产设备。"
+      },
+      {
+        "name": "标识解析节点管理",
+        "value": "内嵌标识解析中间件，能够面向特定企业提供标识编码注册和标识解析服务。"
+      },
+      {
+        "name": "适配多种网络环境",
+        "value": "支持有线网络、4G 5G无线网络、串口转网口等多种网络连接环境。"
+      },
+      {
+        "name": "快速灵活配置",
+        "value": "提供软硬一体化交付，支持采集频率可配置，支持集中配置管理，一站式解决工业设备数据采集复杂性的问题。"
+      }
+    ],
+    "functions": [
+      {
+        "img": "/image/product/t1.png",
+        "title": "设备管理",
+        "detail": "可对海量设备进行管理和控制，如设备的接入，包含设备端SDK、认证、协议等，对设备进行管理。"
+      },
+      {
+        "img": "/image/product/t2.png",
+        "title": "标识解析企业节点管理",
+        "detail": "内嵌标识解析企业中间件，能够面向特定企业提供标识编码注册和标识解析服务。"
+      },
+      {
+        "img": "/image/product/t3.png",
+        "title": "数据采集",
+        "detail": "内置上百种工业设备数据采集协议模板，自动采集工业设备关键数据。"
+      },
+      {
+        "img": "/image/product/t4.png",
+        "title": "数据分析",
+        "detail": "对海量设备接入的数据进行数据模型分析、数据多维度展示。"
+      },
+      {
+        "img": "/image/product/t5.png",
+        "title": "数据应用",
+        "detail": "可支撑工厂智能制造对设备数据应用分析场景。"
+      }
+    ],
+    "architecture": [
+      {
+        "img": "/image/product/zt5.png"
+      }
+    ],
+    "scenario": [
+      {
+        "title": "智慧工业",
+        "img": " /image/product/cj1.png",
+        "introduce": "工业标识应用一体机可对工业制造流水线，进行生产过程检测监控，除了简化生产数据的收集、处理和显示来提高生产效率和灵活性外，还可实时监控生产机器的状态以及设备、照明、空调设备的能源消耗，实现运营成本的降低。"
+      },
+      {
+        "title": "智能终端能终端",
+        "img": " /image/product/cj1.png",
+        "introduce": "工业标识应用一体机在智能自助终端的应用上，在自助图书馆、自助售卖机、智能柜员机、自助售检票机、自助回收机、智能物流分拣系统、移动支付、传输设备等方面应用，给人们的生活带来极大的便捷。"
+      },
+      {
+        "title": "智慧城市",
+        "img": " /image/product/cj1.png",
+        "introduce": "在智慧城市建设中，工业标识应用一体机在智慧交通、政务城市、公共服务、智慧医疗、智慧教育、智慧办公、智慧酒店、智慧银行、智能家居、智慧社区、智慧园区、环境监测仪等发挥不可或缺的作用。"
+      },
+      {
+        "title": "物联网",
+        "img": " /image/product/cj1.png",
+        "introduce": "在物联网方面，云计算、大数据分析、智能电网、智能建筑、楼控系统、视觉/图像传感器、环境质量传感器、供应链系统、公共安全、车联网、智能通信、智能农业控制等都需使用到工业标识应用一体机电脑进行操控。"
+      },
+      {
+        "title": "智慧楼宇",
+        "img": " /image/product/cj1.png",
+        "introduce": "灵活的人机互动界面，供底层系统管理人员随时查看、修改，了解实时状态，为突发状况的处理提供数据支持，同时显示楼宇能耗管理系统做能耗分析界面，针对设备运行情况进行设备分析设备维护等，通过工业一体机电脑的显示控制，都将大大提高企业的管理效率。"
+      }
+    ]
+  },
+  {
+    "introduction": "主动标识安全数采网关，又叫标识数采终端，作为企业内部工业互联网对接各设备、传感器的核心部件，基于Arm+Linux平台设计开发的工业用标识数采终端，终端使用边缘计算机架构，集成微核心操作系统，可短时间内完成开机，数据采集与协议转换采用了低代码平台，可通过对节点的拖拽规划流程，大大降低了云端对协议报文的解析与处理，可以对数据进行清洗过滤，只采真实所需数据，报文数据本地解析，本地处理可以低时延，减轻云端负荷。主动标识安全数采网关的应用，主要是通过工业互联网标识解析体系赋予主动标识载体设备唯一数字身份，发挥终端自身的通信能力，自动向标识解析体系或其他系统发起标识解析等操作请求， 通过解析网络，完成终端寻址、身份验证、指令下发等操作，从而增强数据安全性和操作性，实现载体数据订阅、载体身份认证、载体命令直达等应用场景。",
+    "type": 1,
+    "bantitle": "主动标识安全数采网关",
+    "bancontent": "主动标识安全数采网关，又叫标识数采终端，作为企业内部工业互联网对接各设备、传感器的核心部件，基于Arm+Linux平台设计开发的工业用标识数采终端，终端使用边缘计算机架构，集成微核心操作系统，可短时间内完成开机，数据采集与协议转换采用了低代码平台，可通过对节点的拖拽规划流程，大大降低了云端对协议报文的解析与处理，可以对数据进行清洗过滤，只采真实所需数据，报文数据本地解析，本地处理可以低时延，减轻云端负荷。",
+    "advantage": [
+      {
+        "name": "标识本地化",
+        "value": "包含IDIS功能，即标识解析本地化企业节点，负责与二级节点进行数据交互；在企业内网，开放标识解析API给企业内其他应用调用。"
+      },
+      {
+        "name": "可靠数据安全框架",
+        "value": "与边缘标识规约管理机结合，管理企业IOT设备，并根据边缘计算网关上传的数据中，各设备、传感器标识进行合法性验证，保证数据安全。"
+      },
+      {
+        "name": "高效数据对接",
+        "value": "可再次整合边缘计算网关上传的数据，与工业云平台、各工业系统进行数据对接。"
+      },
+      {
+        "name": "通信协议栈丰富",
+        "value": "支持几百种通信协议，涵盖工业、电力、石油、楼宇、智能制造、新能源等领域。"
+      },
+      {
+        "name": "支持访问多种数据库",
+        "value": "可以直接访问多种关系数据，包括SQLSERVER、MYSQL、ORACLE、SQLITE等。"
+      },
+      {
+        "name": "便捷二次开发",
+        "value": "支持多种脚本进行边缘计算，包括JAVASCRIPT、LUA、PYTHON脚本等。"
+      },
+      {
+        "name": "智能边缘计算",
+        "value": "支持逻辑表达式，问答式进行边缘计算。"
+      },
+      {
+        "name": "远程管理",
+        "value": "支持远程管理，同时内置路由功能，可以管理或者配置下一级各种网络设备。"
+      },
+      {
+        "name": "多主站访问",
+        "value": "支持485多主代理功能，比如同时让多个MODUBS主站访问设备。"
+      }
+    ],
+    "functions": [
+      {
+        "img": "/image/product/t1.png",
+        "title": "标识安全UICC卡",
+        "detail": "具备物联网卡可鉴权、联网的功能外，还支持独立安全存储、防篡改、防攻击能力，硬件达到 EAL4+安全等级，具备证书、算法、标识数据和密钥的安全存储及通过逻辑通道加解密能力。"
+      },
+      {
+        "img": "/image/product/t2.png",
+        "title": "设备连接-边缘解析",
+        "detail": "工业采集的数据通常为ModBus、645、S7、OPC或自定义的数据格式，边缘计算网关接收到数据后本地对数据进行计算解析，实时高效，有效减轻云端负荷。"
+      },
+      {
+        "img": "/image/product/t3.png",
+        "title": "边缘计算-数据清洗",
+        "detail": "边缘计算网关可以对数据进行清洗过滤，数据只有在符合要求时才会进行数据采集输出，减少数据干扰和对流量的消耗。"
+      },
+      {
+        "img": "/image/product/t4.png",
+        "title": "内网穿透-远程运维",
+        "detail": "边缘计算网关采用唯一ID，可以通过客户端进行内网穿透，对设备进行远程控制、及配置管理，边缘计算网关可以远程进行程序编程及维护。"
+      },
+      {
+        "img": "/image/product/t5.png",
+        "title": "自带缓存-数据安全",
+        "detail": "边缘计算机可在网络异常时将数据缓存，待网络恢复时将数据补发续传。"
+      }
+    ],
+    "architecture": [
+      {
+        "img": "/image/product/zt6.png"
+      }
+    ],
+    "scenario": [
+      {
+        "title": "远程运维",
+        "img": " /image/product/cj1.png",
+        "introduce": "现场有温湿度、一氧化碳、甲烷、PM2.5数据进行实时监控，通过主动标识安全数采网关进行数据收集；另一个现场有一台PLC需要进行远程维护，包括PLC程序下载、运行状态监测，维护端可远程来完成对PLC的操作。"
+      },
+      {
+        "title": "工业生产",
+        "img": " /image/product/cj1.png",
+        "introduce": "工业安全生产管理方面，通过主动标识安全数采网关实时在线监测和告警，以及基于工艺参数的趋势预测实现智能告警，甚至针对特定场景下的视频监控实现关键危险事件的智能识别，进而避免潜在的风险事件，以及实时性要求很高的安全场合，有效保障了工业生产安全。"
+      },
+      {
+        "title": "环保优化",
+        "img": " /image/product/cj1.png",
+        "introduce": "利用主动标识安全数采网关创新技术，可以实时采集各种气体和废水排放数据，构建关键指标的监控，并且结合实时的工艺参数，通过精细的数据分析，寻找环保指标和产能指标的最优组合，在保证环保指标的前提下，降低企业的运营成本。"
+      },
+      {
+        "title": "能源管理",
+        "img": " /image/product/cj1.png",
+        "introduce": "制造业企业的水、电、气等各种能源消耗，毫无疑问是运营成本的关键贡献因素。利用主动标识安全数采网关特有技术，可帮助企业构建能耗分布，帮助操作人员实时监控各类储罐液位、流量、温度和其他关键参数，计算关键环节的能耗指标，和既定的能耗基线进行对比，得出能耗差距；同时结合工艺限制条件的数据分析，可以找到满足产品生产质量和产能要求前提下的最优能源配置。"
+      }
+    ]
+  }
+]

src/mockAjax.js

@@ -0,0 +1,36 @@
+import axios from 'axios'
+//引入进度条
+// import nprogress from 'nprogress'
+//引入进度条样式
+// import 'nprogress/nprogress.css'
+//1利用axios对象的方法create，去创建一个axios实例
+//2request就是axios，只不过稍微配置一下
+const requests = axios.create({
+  //基础路径，发请求的时候，路径带有api
+  baseURL: '/mock',
+  //代表请求超时的时间5秒
+  timeout: 5000,
+})
+//请求拦截器：在发请求之前，请求拦截器可以检测到，可以在请求发出去之前做一些事情
+requests.interceptors.request.use((config) => {
+  //config：配置对象，对象里面有一个属性很重要，headers请求头
+  //进度条开始
+  // nprogress.start()
+  return config
+})
+//响应拦截器
+requests.interceptors.response.use(
+  (res) => {
+    //成功的回调函数：服务器响应数据回来后，响应拦截器可以检测到，可以做一些事情
+    //进度条结束
+    // nprogress.done()
+    return res.data
+  },
+  (error) => {
+    //响应失败的回调函数
+    return Promise.reject(new Error('faile'))
+  }
+)
+ 
+//对外暴露
+export default requests

src/router/index.js

@@ -7,6 +7,11 @@ import PressDetail from "../views/pressDetail.vue";
 import Product from "../views/product.vue";
 import Solve from "../views/solve.vue";
 Vue.use(VueRouter);
+const originalPush = VueRouter.prototype.push
+
+VueRouter.prototype.push = function push(location) {
+  return originalPush.call(this, location).catch(err => err)
+}
 const routes = [
   {
     path: "/",

src/utils/request.js

@@ -12,8 +12,7 @@ const toLogin = () => {
   });
 };
 const service = axios.create({
-  // baseURL: "https://zhinengku.zhixunanquan.com/fsms-library/",
+  baseURL:"/apis",
-  baseURL:"/fsms-library",
   timeout: 5000,
 });
 service.defaults.headers.post["Content-Type"] =
@@ -22,17 +21,13 @@ service.defaults.headers.post["Content-Type"] =
 // 请求拦截器
 service.interceptors.request.use(
   (config) => {
-    // 登录流程控制中，根据本地是否存在token判断用户的登录情况
+    // const token = localStorage.getItem("token");
-    // 但是即使token存在，也有可能token是过期的，所以在每次的请求头中携带token
+    // token && (config.headers.Authorization = token);
-    // 后台根据携带的token判断用户的登录情况，并返回给我们对应的状态码
-    // 而后我们可以在响应拦截器中，根据状态码进行一些统一的操作。
-    const token = localStorage.getItem("token");
-    token && (config.headers.Authorization = token);
     return config;
   },
   (error) => {
     // 处理请求错误
-    return Promise.reject(error);
+    return Promise.reject(error,111);
   }
 );
 // 响应拦截器
@@ -41,9 +36,9 @@ service.interceptors.response.use(
   (response) => {
     const res = response.data;
     if (res.code == 200) {
-      return Promise.reject(res);
-    } else {
      return res;
+    } else {
+       return Promise.reject(res);
     }
   },
   //请求失败
@@ -53,12 +48,6 @@ service.interceptors.response.use(
       // 请求已发出，但是不在30分钟的范围
       errorHandle(response.status, response.data.message);
       return Promise.reject(response);
-    } else {
-      // 处理断网的情况
-      // eg:请求超时或断网时，更新state的network状态
-      // network状态在app.vue中控制着一个全局的断网提示组件的显示隐藏
-      // 关于断网组件中的刷新重新获取数据，会在断网组件中说明
-      // store.commit('changeNetwork', false);
     } 
   }
 );

src/views/aboutUs.vue

@@ -25,11 +25,11 @@
       </el-menu>
     </div>
     <div style="margin-top: 50px">
-      <!-- 公司介绍 -->
+      <!-- 公司简介 -->
       <div class="box-style">
         <div class="box-style-box">
           <div class="floor">
-            <headline heading="公司介绍" footing="Company introduction" />
+            <headline heading="公司简介" footing="Company introduction" />
             <div class="floor1">
               <div>
                 山东青鸟工业互联网有限公司为山东省第4家获批的国家工业互联网标识解析二级节点（综合型）、国家高新技术企业、山东省双软企业、科技型中小企业、创新型中小企业、山东省第一批网络安全重点企业、山东省大数据创新服务机构、济南市工业互联网产业链群链主企业，主要从事物联网领域的标识解析系统研发与服务，是一家致力于为客户提供可信数字基础设施的标识解析增值运营商，提供物联网、工业云、工业大数据等产品、解决方案及平台运营。公司运营中心位于济南中央商务区CBD。团队核心成员毕业于山东大学、吉林大学、中国人大、山东财经等知名高校，均在物联网、大数据、通信运营领域拥有
@@ -158,97 +158,22 @@
               </div>
               <div class="floor4-photos modelWidth">
                 <div class="top flex">
-                  <div>
+                  <div v-for="(item, index) in lphoto" :key="index">
-                    <el-image
-                      style="width: 100%"
-                      :src="require('@/assets/img/us/l1.png')"
-                      fit="fill"
-                    ></el-image>
-                  </div>
-                  <div>
-                    <el-image
-                      style="width: 100%"
-                      :src="require('@/assets/img/us/l2.png')"
-                      fit="fill"
-                    ></el-image>
-                  </div>
-                  <div>
-                    <el-image
-                      style="width: 100%"
-                      :src="require('@/assets/img/us/l3.png')"
-                      fit="fill"
-                    ></el-image>
-                  </div>
-                  <div>
                     <el-image
                       style="width: 100%"
-                      :src="require('@/assets/img/us/l4.png')"
+                      :src="item"
-                      fit="fill"
-                    ></el-image>
-                  </div>
-                  <div>
-                    <el-image
-                      style="width: 100%"
-                      :src="require('@/assets/img/us/l5.png')"
                       fit="fill"
+                      :preview-src-list="lphoto"
                     ></el-image>
                   </div>
                 </div>
                 <div class="bottom flex">
-                  <div>
+                  <div v-for="(item, index) in sphoto" :key="index">
-                    <el-image
-                      style="width: 100%"
-                      :src="require('@/assets/img/us/s1.png')"
-                      fit="fill"
-                    ></el-image>
-                  </div>
-                  <div>
-                    <el-image
-                      style="width: 100%"
-                      :src="require('@/assets/img/us/s2.png')"
-                      fit="fill"
-                    ></el-image>
-                  </div>
-                  <div>
-                    <el-image
-                      style="width: 100%"
-                      :src="require('@/assets/img/us/s3.png')"
-                      fit="fill"
-                    ></el-image>
-                  </div>
-                  <div>
-                    <el-image
-                      style="width: 100%"
-                      :src="require('@/assets/img/us/s4.png')"
-                      fit="fill"
-                    ></el-image>
-                  </div>
-                  <div>
-                    <el-image
-                      style="width: 100%"
-                      :src="require('@/assets/img/us/s5.png')"
-                      fit="fill"
-                    ></el-image>
-                  </div>
-                  <div>
-                    <el-image
-                      style="width: 100%"
-                      :src="require('@/assets/img/us/s6.png')"
-                      fit="fill"
-                    ></el-image>
-                  </div>
-                  <div>
-                    <el-image
-                      style="width: 100%"
-                      :src="require('@/assets/img/us/s7.png')"
-                      fit="fill"
-                    ></el-image>
-                  </div>
-                  <div>
                     <el-image
                       style="width: 100%"
-                      :src="require('@/assets/img/us/s7.png')"
+                      :src="item"
                       fit="fill"
+                      :preview-src-list="sphoto"
                     ></el-image>
                   </div>
                 </div>
@@ -382,8 +307,27 @@ export default {
           ],
         },
       ],
-
+      lphoto: [
+        require("@/assets/img/us/l1.png"),
+        require("@/assets/img/us/l2.png"),
+        require("@/assets/img/us/l3.png"),
+        require("@/assets/img/us/l4.png"),
+        require("@/assets/img/us/l5.png"),
+      ],
+      sphoto: [
+        require("@/assets/img/us/s1.png"),
+        require("@/assets/img/us/s2.png"),
+        require("@/assets/img/us/s3.png"),
+        require("@/assets/img/us/s4.png"),
+        require("@/assets/img/us/s5.png"),
+        require("@/assets/img/us/s6.png"),
+        require("@/assets/img/us/s7.png"),
+      ],
       scrollIndex: null,
+      srcList: [
+        "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
+        "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg",
+      ],
     };
   },
   created() {

src/views/home.vue

@@ -22,7 +22,6 @@
             src="@/assets/img/home/logo3.png"
           />
           <div class="exponentTitle">平台服务指数</div>
-          <div class="more-box">更多数据 →</div>
         </div>
       </div>
       <div class="enterprise flex_center">
@@ -65,7 +64,12 @@
         <headline heading="工业SaaS平台" footing="INDUSTRIALSAASPLAIFORM" />
 
         <div class="detail">
-          <div class="detail-box" v-for="(item, index) in saas" :key="index">
+          <div
+            class="detail-box"
+            v-for="(item, index) in saas"
+            :key="index"
+            @click="handleOut(item.url)"
+          >
             <div class="contant">
               <div>
                 <img style="width: 55px" :src="item.img" alt />
@@ -99,7 +103,7 @@
     </div>
 
     <!-- 解决方案 -->
-    <div
+    <!-- <div
       class="box-style"
       style="
         background: linear-gradient(0deg, #f5f8fe 0%, #ffffff 100%);
@@ -158,7 +162,7 @@
           </div>
         </div>
       </div>
-    </div>
+    </div> -->
 
     <!-- 关于我们 -->
     <div
@@ -252,25 +256,23 @@
             <!-- <div class="black">山东青鸟工业互联网有限公司祝您新年快乐</div> -->
           </div>
           <div class="jo-right">
-            <div class="jo-content" v-for="item in 3" :key="item">
+            <div
-              <div class="jo-img">
+              class="jo-content"
-                <el-image
+              v-for="(item, index) in this.pressArr"
-                  style="height: 100%"
+              :key="index"
-                  :src="require('@/assets/img/home/pressleft.png')"
+              @click="handleDetail(item)"
-                ></el-image>
+            >
+              <div class="jo-img" style="height: 100%">
+                <el-image style="height: 100%" :src="item.thumb"></el-image>
               </div>
               <div class="jo-detail">
                 <div class="jo-title">
-                  热烈祝贺山东青鸟顺利通过国家“高新技术企业”认定
+                  {{ item.title }}
                 </div>
                 <div class="jo-title-bottom">
-                  根据《高新技术企业认定管理办法》（国科发火〔2016〕32号）
+                  <div v-html="item.content" style="font-size: 7px"></div>
-                  和《高新技术企业认定管理工作指引》（国科发火〔2016〕...
-                </div>
-                <div class="jo-more">
-                  了结更多
-                  <i class="el-icon-video-play"></i>
                 </div>
+                <div class="jo-more">了结更多</div>
               </div>
             </div>
           </div>
@@ -316,7 +318,7 @@
 import top from "@/components/header.vue";
 import bottom from "@/components/footer.vue";
 import headline from "@/components/headline.vue";
-
+import { getPress } from "@/api/api";
 export default {
   name: "HomeView",
   components: {
@@ -328,12 +330,14 @@ export default {
     return {
       solutabsIndex: "1",
       activeIndexs: 0,
+      pressArr: [],
       saas: [
         {
           name: "1",
           img: require("@/assets/img/home/d1.png"),
           title1: "基于工业互联网标识解析的",
-          title2: "大数据核验平台",
+          title2: "二级节点",
+          url: "http://code.qnaiot.com",
           arr: [
             {
               icon: "",
@@ -358,6 +362,7 @@ export default {
           img: require("@/assets/img/home/d2.png"),
           title1: "基于区块链+标识解析的",
           title2: "授权通信存证平台",
+          url: "https://boss.bifauth.cn/#/login",
           arr: [
             {
               icon: "",
@@ -382,6 +387,7 @@ export default {
           img: require("@/assets/img/home/d3.png"),
           title1: "基于物联网sim卡的",
           title2: "青鸟翼联平台",
+          url: "http://boss.qnaiot.com/#/login",
           arr: [
             {
               icon: "",
@@ -406,6 +412,7 @@ export default {
           img: require("@/assets/img/home/d2.png"),
           title1: "基于工业互联网标识解析的",
           title2: "主动标识载体公共服务平台",
+          url: "http://platform.qnaiot.com/",
           arr: [
             {
               icon: "",
@@ -426,7 +433,49 @@ export default {
           ],
         },
       ],
-      detail: {}, //mock
+      detail: {
+        number: {
+          a: "61",
+          b: "2300",
+          c: "2700",
+        },
+        left: [
+          {
+            name: "国家工业互联网标识解析二级节点",
+            detail:
+              "工业互联网标识解析体系类似互联网领域的域名解析系统（DNS）， 是全球工业互联网安全运行的核心基础设施之一。",
+          },
+
+          {
+            name: "山东省科技型、创新型中小企业",
+            detail:
+              "国家中小企业工业互联网数字化转型促进中心是全国唯一一家面向中小企业、立足优势产业集聚、服务民立足优势产业集聚、服务民",
+          },
+          {
+            name: "国家中小企业工业互联网数字化转型促进中心",
+            detail:
+              "国家中小企业工业互联网数字化转型促进中心是全国唯一一家面向中小企业、立足优势产业集聚、服务民立足优势产业集聚、服务民",
+          },
+        ],
+        right: [
+          {
+            name: "国家高新技术企业",
+            detail:
+              "工业互联网标识解析体系类似互联网领域的域名解析系统（DNS）， 是全球工业互联网安全运行的核心基础设施之一。",
+          },
+
+          {
+            name: "山东省大数据创新服务机构",
+            detail:
+              "大数据时代到来，数据价值及数据库国产化的重要性日益凸显，加快推动大数据产业高质量发展，对于抢抓新时代产业变革新机遇、构对于抢抓新时代产业变革新机遇、构",
+          },
+          {
+            name: "济南市先进制造业和数字经济标志性产业链群链主企业",
+            detail:
+              "济南市工业和信息化局按照“系统集成能力强、国内外市场占有率高、 产品竞争力强、产业链拉动作用大”的原则，从10个标志性产业链群。",
+          },
+        ],
+      },
       company: [
         {
           img: require("@/assets/img/home/jt1.png"),
@@ -443,23 +492,37 @@ export default {
       ],
     };
   },
-  mounted() {
+  created() {
-    this.getMockData();
+    this.getDetails(1);
   },
-
   methods: {
+    getDetails(type) {
+      getPress({
+        Appld: "000000",
+        AppSecret: "123456",
+        pageSize: 10,
+        currentPage: 1,
+        category: type,
+      }).then((res) => {
+        if (res.code == 200) {
+          this.pressArr = res.data.records;
+          console.log(this.pressArr, "this.pressArr");
+        }
+      });
+    },
     handleSelect(e) {
       this.solutabsIndex = e;
     },
-
+    handleOut(url) {
-    getMockData() {
+      window.location.href = url;
-      this.$http
+    },
-        .get("/home/userInfo")
+    //跳转详情
-        .then((res) => {
+    handleDetail(detail) {
-          this.detail = res.data && res.data.data;
+      this.$router.push({
-        })
+        path: "/pressDetail",
-        .catch(function (err) {
+        query: {
-          console.log(err);
+          detail: detail,
+        },
       });
     },
   },
@@ -508,8 +571,10 @@ export default {
         font-style: italic;
         color: #ffffff;
         position: absolute;
-        top: 25%;
+        top: 35%;
         right: 80px;
+        display: flex;
+        align-items: center;
       }
       .more-box {
         position: absolute;
@@ -618,6 +683,7 @@ export default {
       }
       .detail-box {
         width: 20%;
+        cursor: pointer;
         .contant {
           width: 100%;
           padding: 40px 20px 20px 20px;
@@ -942,7 +1008,7 @@ export default {
           width: 100%;
           display: flex;
           align-items: center;
-
+          cursor: pointer;
           .jo-img {
             width: 30%;
             display: flex;
@@ -962,10 +1028,8 @@ export default {
               position: absolute;
               right: 0;
               bottom: 0;
-
+              font-size: 1px;
-              font-size: 10px;
               font-family: PingFang SC;
-              font-weight: 400;
               color: #ffffff;
               line-height: 18px;
               text-align: center;

src/views/pressCenter.vue

@@ -28,29 +28,25 @@
       <div class="pres">
         <div
           class="pres-box"
-          v-for="item in 7"
+          v-for="(item, index) in this.pressArr"
-          :key="item"
+          :key="index"
-          @click="handleDetail"
+          @click="handleDetail(item)"
         >
           <el-card :body-style="{ padding: '0px' }" shadow="hover">
             <div class="list">
-              <div class="top">
+              <div class="top" style="height: 200px">
                 <el-image
-                  style="width: 100%"
+                  style="width: 100%; height: 100%"
-                  :src="require('@/assets/img/home/pres.png')"
+                  :src="item.thumb"
                   fit="scale-down"
                 ></el-image>
               </div>
               <div class="year">
-                <div class="year-box">2022.02.02</div>
+                <div class="year-box">{{ item.releaseTime.slice(0, 10) }}</div>
               </div>
               <div class="content">
                 <div class="content-title">
-                  热烈祝贺山东青鸟顺利通过DCMM贯标评估
+                  {{ item.title }}
-                </div>
-                <div class="content-bottom">
-                  根据中国电子信息行业联合会所公布获得数据管理能力成熟度(DCMM)等级证书的企业名单，山东青鸟工业互联网有限公司经公司申报、评估审查等严格的评审程序，顺利通过...
-                  根据中国电子信息行业联合会所公布获得数据管理能力成熟度(DCMM)等级证书的企业名单，山东青鸟工业互联网有限公司经公司申报、评估审查等严格的评审程序，顺利通过...
                 </div>
               </div>
             </div>
@@ -77,6 +73,7 @@
 import top from "@/components/header.vue";
 import bottom from "@/components/footer.vue";
 import headline from "@/components/headline.vue";
+import { getPress } from "@/api/api";
 export default {
   name: "HomeView",
   components: {
@@ -87,13 +84,10 @@ export default {
   data() {
     return {
       activeIndexs: 3,
-      solutabsIndex: "0",
+      solutabsIndex: "1",
-      pressTitle: "全部",
+      pressArr: [],
+      pressTitle: "公司资讯",
       type: [
-        {
-          name: "全部",
-          index: "0",
-        },
         {
           name: "公司资讯",
           index: "1",
@@ -109,18 +103,37 @@ export default {
       ],
     };
   },
+  created() {
+    this.getDetail(1);
+  },
   methods: {
+    getDetail(type) {
+      getPress({
+        Appld: "000000",
+        AppSecret: "123456",
+        pageSize: 10,
+        currentPage: 1,
+        category: type,
+      }).then((res) => {
+        if (res.code == 200) {
+          this.pressArr = res.data.records;
+        }
+      });
+    },
     handleSelect(e) {
+      console.log(e, 98);
       this.pressTitle = this.type[e].name;
       this.pressIndex = e;
+      this.getDetail(e);
     },
     //跳转详情
-    handleDetail() {
+    handleDetail(detail) {
       this.$router.push({
         path: "/pressDetail",
         query: {
           title: this.pressTitle,
           index: this.pressIndex,
+          detail: detail,
         },
       });
     },