首页添加创新服务卡片

src/api/home/home.js

@@ -43,6 +43,20 @@ export function getInformation2(params) {
     params
   });
 }
+// 获取科技创新
+export function getScienceInnovate(params) {
+  return request({
+    url: '/mobile/getScienceInnovate',
+    params
+  });
+}
+// 获取科技创新数据回显
+export function getInfo(params) {
+  return request({
+    url: '/mobile/getInfo',
+    params
+  });
+}
 // 获取关于我们
 export function getAboutUs(params) {
   return request({

src/views/about.vue

@@ -6,30 +6,18 @@
 
     <div class="my_main content p0-100 min_h_285" style="display: flex">
       <div class="l" style="width: 77%; background-color: #fff; padding: 30px">
+        <div
+          v-if="innovateInfo.id"
+          style="text-align:center;font-weight: bold;font-size: 18px"
+        >
+          {{ innovateInfo.title }}
+        </div>
         <div id="text" class="ql-editor">
           <!-- :class="type == 'policy' && aboutInfo.method == 1 ? '' : 'ql-editor'" -->
           <!-- <editor v-model="aboutInfo.text" :min-height="192" /> -->
-          <div v-html="aboutInfo.evenMore" />
+          <div v-html="aboutInfo.evenMore" v-if="aboutInfo.id" />
+          <div v-html="innovateInfo.details" v-else />
         </div>
-        <!-- <h2 style="text-align:center">关于我们</h2>
-        <p style="color:#999;line-height:1.75;text-indent:2em">
-          合肥嘉策信息技术服务有限公司成立于2018年05月22日，注册地位于安徽省合肥市高新区嶺湖墅76幢508室，法定代表人为时加红。经营范围包括信息系统集成咨询及服务；软件开发、技术服务、技术咨询、技术推广、技术转让；数据分析、加工、处理；基础软件服务；应用软件服务；机器人系统集成设备、工业智能装备及自动化辅助设备研发及销售；计算机设备及配件、计算机耗材用品、网络设备及材料、节能设备的研发和销售。（依法须经批准的项目，经相关部门批准后方可开展经营活动）
-        </p>
-        <div style="text-align:center">
-          <img src="@/assets/image/03.png" alt="" />
-        </div>
-        <p style="color:#999;line-height:1.75;text-indent:2em">
-          合肥嘉策信息技术服务有限公司成立于2018年05月22日，注册地位于安徽省合肥市高新区嶺湖墅76幢508室，法定代表人为时加红。经营范围包括信息系统集成咨询及服务；软件开发、技术服务、技术咨询、技术推广、技术转让；数据分析、加工、处理；基础软件服务；应用软件服务；机器人系统集成设备、工业智能装备及自动化辅助设备研发及销售；计算机设备及配件、计算机耗材用品、网络设备及材料、节能设备的研发和销售。（依法须经批准的项目，经相关部门批准后方可开展经营活动）
-        </p>
-        <div style="text-align:center">
-          <img src="@/assets/image/03.png" alt="" />
-        </div>
-        <p style="color:#999;line-height:1.75;text-indent:2em">
-          合肥嘉策信息技术服务有限公司成立于2018年05月22日，注册地位于安徽省合肥市高新区嶺湖墅76幢508室，法定代表人为时加红。经营范围包括信息系统集成咨询及服务；软件开发、技术服务、技术咨询、技术推广、技术转让；数据分析、加工、处理；基础软件服务；应用软件服务；机器人系统集成设备、工业智能装备及自动化辅助设备研发及销售；计算机设备及配件、计算机耗材用品、网络设备及材料、节能设备的研发和销售。（依法须经批准的项目，经相关部门批准后方可开展经营活动）
-        </p>
-        <div style="text-align:center">
-          <img src="@/assets/image/03.png" alt="" />
-        </div> -->
       </div>
       <div
         class="r"
@@ -87,7 +75,7 @@ import {
   getInfo3
 } from '@/api/search';
 import { getPolicyList, getRead } from '@/api/home/notice';
-import { getAboutUs } from '@/api/home/home';
+import { getAboutUs, getInfo as getDetails } from '@/api/home/home';
 import { mapGetters } from 'vuex';
 import { add, cancel } from '@/api/search';
 import Editor from '@/components/Editor';
@@ -107,7 +95,8 @@ export default {
       type: '',
       noticeList: [],
       total: {},
-      aboutInfo: {}
+      aboutInfo: {},
+      innovateInfo: {}
     };
   },
   computed: {
@@ -115,15 +104,19 @@ export default {
   },
   methods: {},
   created() {
-    let { key, id } = this.$route.query;
-    this.type = key;
-
+    let { id } = this.$route.query;
+    if (id) {
+      getDetails({ id }).then(res => {
+        this.innovateInfo = res.data;
+      });
+    } else {
+      getAboutUs().then(res => {
+        this.aboutInfo = res.data;
+      });
+    }
     getPolicyList({ pageNum: 1, pageSize: 5 }).then(({ data }) => {
       this.noticeList = data.list;
     });
-    getAboutUs().then(res => {
-      this.aboutInfo = res.data;
-    });
   }
 };
 </script>

src/views/home/home.vue

@@ -228,8 +228,7 @@
           <img
             src="@/assets/image/icon_l.png"
             alt=""
-            style="vertical-align:
-          middle;margin-right: 3px;"
+            style="margin-right: 3px;"
           />
           <img src="@/assets/image/icon_r.png" alt="" />
         </p>
@@ -398,6 +397,30 @@
           </div>
         </div>
       </div>
+      <div style="padding:0 15px">
+        <p style="margin-bottom:0">
+          <img
+            src="@/assets/image/icon_cx.png"
+            alt=""
+            style="margin-right: 3px;"
+          />
+          <img src="@/assets/image/icon_cx2.png" alt="" />
+        </p>
+        <div class="advert">
+          <div class="item" v-for="item in innovateList" :key="item.id">
+            <router-link
+              target="_blank"
+              :to="{ path: '/about', query: { id: item.id } }"
+            >
+              <img :src="item.pic" alt="" />
+              <div class="card">
+                <div class="title text_hidden_one">{{ item.title }}</div>
+                <div class="text text_hidden_one" v-html="item.details"></div>
+              </div>
+            </router-link>
+          </div>
+        </div>
+      </div>
     </div>
     <div class="about">
       <div class="p0-100">
@@ -470,7 +493,8 @@ import {
   getPolicyRead,
   getInformation,
   getAboutUs,
-  getPartner
+  getPartner,
+  getScienceInnovate
 } from '@/api/home/home';
 import vueSeamlessScroll from 'vue-seamless-scroll';
 export default {
@@ -481,6 +505,7 @@ export default {
     return {
       listData: [],
       listData2: [],
+      innovateList: [], // 创新服务列表
       classOption: {
         step: 1,
         limitMoveNum: 8,
@@ -546,6 +571,9 @@ export default {
     getInformation(this.queryParams3).then(({ data }) => {
       this.list3 = data.list;
     });
+    getScienceInnovate().then(({ data }) => {
+      this.innovateList = data;
+    });
     getAboutUs().then(res => {
       this.aboutInfo = res.data;
     });
@@ -786,6 +814,56 @@ export default {
     }
   }
 }
+.advert {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  .item {
+    width: 24%;
+    margin-top: 12px;
+    position: relative;
+    &:nth-child(n + 5) {
+      margin-bottom: 0;
+    }
+    img {
+      width: 100%;
+      max-height: 165px;
+    }
+    .card {
+      padding: 0 15px;
+      width: 80%;
+      height: 70px;
+      text-align: center;
+      position: absolute;
+      bottom: 15px;
+      right: 10%;
+      // background: linear-gradient(to right, #8d9cff 0%, #7679ff 100%);
+      background-color: #3394ff;
+      opacity: 0.9;
+      font-size: 15px;
+      color: #fff;
+      cursor: pointer;
+      transition: bottom 0.5s;
+      &:hover {
+        bottom: 30px;
+        transition: bottom 0.5s;
+      }
+      .title {
+        width: 100%;
+        margin: 10px 0;
+      }
+      /deep/.text > p {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        width: 100%;
+        margin: 0;
+        font-size: 12px;
+        color: #fff;
+      }
+    }
+  }
+}
 .city_list {
   margin-top: 10px;
   padding: 10px 0;