feat:对接新闻接口

README.md

@@ -1,5 +1,5 @@
 # qn-web
-
+#
 ## Project setup
 ```
 npm install
@@ -7,7 +7,7 @@ npm install
 
 ### Compiles and hot-reloads for development
 ```
-npm run serve
+npm run dev
 ```
 
 ### Compiles and minifies for production

package.json

@@ -7,12 +7,16 @@
     "build": "vue-cli-service build"
   },
   "dependencies": {
+    "@better-scroll/core": "^2.5.0",
     "animate.css": "^3.5.1",
     "axios": "^0.27.2",
+    "better-scroll": "^2.5.0",
     "core-js": "^3.8.3",
     "element-ui": "^2.15.9",
     "html2canvas": "^1.4.1",
+    "mockjs": "^1.1.0",
     "vue": "^2.6.14",
+    "vue-concise-slider": "^4.2.5",
     "vue-router": "^3.5.1"
   },
   "devDependencies": {

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-view />
+      <!-- <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',
+  })
+