给更多页添加头部和底部并修改本地userid

src/App.vue

@@ -14,6 +14,12 @@ export default {
   width: 1400px;
   margin: 0 auto;
 }
+.min_h_241 {
+  min-height: calc(100vh - 241px);
+}
+.min_h_285 {
+  min-height: calc(100vh - 285px);
+}
 .p0-100 {
   padding: 0 100px;
 }

src/api/home/home.js

@@ -29,3 +29,17 @@ export function getInformation(params) {
     params
   });
 }
+// 获取政策解读列表
+export function getPolicyRead2(params) {
+  return request({
+    url: '/mobile/getPolicyRead',
+    params
+  });
+}
+// 获取资讯列表
+export function getInformation2(params) {
+  return request({
+    url: '/mobile/getInformation',
+    params
+  });
+}

src/store/modules/user.js

@@ -25,7 +25,7 @@ const user = {
     },
     SET_USER_ID: (state, userId) => {
       state.userId = userId;
-      localStorage.setItem('userId', userId);
+      localStorage.setItem('web-userId', userId);
     },
     SET_AVATAR: (state, avatar) => {
       state.avatar = avatar;

src/views/components/footer/index.vue

@@ -0,0 +1,145 @@
+<template>
+  <div>
+    <div class="my_footer">
+      <div style="height: 4px; background: #ffa32c"></div>
+      <div class="footer_one content">
+        <div class="footer_two">
+          <div class="footer_left">
+            <div class="footer_left_one"></div>
+            <div class="footer_left_two">
+              <i>24小时服务热线</i>
+            </div>
+            <div class="footer_left_three">
+              <i>0551-xxxx-xxx</i>
+            </div>
+          </div>
+          <div>
+            <h3>合肥嘉策信息技术服务有限公司</h3>
+            <div>
+              地址：安徽省合肥市高新区黄山路601号科技创新公共服务中心412-414室
+            </div>
+            <div style="margin:15px 0">联系人：小杨老师、小黄老师</div>
+            <div>电话：19805659038、15855136916</div>
+          </div>
+          <div class="footer_right">
+            <div class="item">
+              <img src="@/assets/image/wx02.png" alt="" />
+              <div>嘉策公众号</div>
+            </div>
+            <div class="item">
+              <img src="@/assets/image/qq02.png" alt="" />
+              <div>QQ群</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="hc_bottom">
+      <div class="content text">
+        <span>CopyRight 2020-2021</span>
+        <span>版权所有 合肥嘉策信息技术服务有限公司</span>
+        <span>皖ICP备45619723号-1</span>
+        <!-- <span>技术支持：安徽商挈智能科技有限公司</span> -->
+      </div>
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+.my_footer {
+  background-color: #eeeeee;
+  .footer_one {
+    p {
+      text-align: center;
+      font-size: 14px;
+      color: #666;
+      span {
+        i {
+          margin-right: 3px;
+          img {
+            vertical-align: middle;
+          }
+        }
+      }
+      span:nth-child(2) {
+        margin-left: 40px;
+      }
+    }
+  }
+  .footer_two {
+    // border-bottom: 1px solid #dcdcdc;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .footer_left {
+      padding: 40px 0;
+      .footer_left_one {
+        width: 392px;
+        height: 63px;
+        background: url(~@/assets/image/02.png) no-repeat left center;
+        background-size: 90% 90%;
+      }
+      .footer_left_two {
+        margin: 10px 0;
+        font-size: 13px;
+        color: #666;
+      }
+      .footer_left_three {
+        font-size: 22px;
+        color: #555;
+      }
+      .footer_left_l {
+        font-size: 18px;
+        color: #333;
+        margin-right: 30px;
+      }
+      .footer_left_r {
+        font-size: 16px;
+        color: #666;
+        i {
+          img {
+            vertical-align: middle;
+          }
+        }
+      }
+    }
+    .footer_right {
+      display: flex;
+      .item {
+        font-size: 18px;
+        color: #333;
+        margin-right: 50px;
+        text-align: center;
+      }
+    }
+  }
+  .footer_three {
+    text-align: center;
+    padding: 36px 0;
+    div {
+      font-size: 16px;
+      color: #3394ff;
+      span:nth-child(2) {
+        margin: 0 39px;
+      }
+    }
+    p {
+      font-size: 14px;
+      color: #333;
+    }
+  }
+}
+.hc_bottom {
+  width: 100%;
+  height: 35px;
+  text-align: center;
+  line-height: 35px;
+  background: #ccc;
+  .text {
+    color: #777;
+    font-size: 12px;
+    span {
+      margin-right: 15px;
+    }
+  }
+}
+</style>

src/views/components/header/index.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="my_header">
+    <div class="title content p0-100">
+      <el-row :gutter="20">
+        <el-col :span="8">
+          <img
+            src="@/assets/logo/logo2.png"
+            alt=""
+            style="vertical-align: middle;"
+          />
+        </el-col>
+        <el-col :span="16">
+          <el-row
+            style="justify-content: flex-end;height: 100%;align-items: center;padding-right: 30px;"
+          >
+            <el-col :span="8">
+              <div class="search">
+                <el-input
+                  v-model.trim="input"
+                  placeholder="请输入搜索关键字"
+                  @keyup.enter.native="toSearch"
+                ></el-input>
+                <el-button type="warning" @click="toSearch">一站搜</el-button>
+              </div>
+            </el-col>
+          </el-row>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      input: ''
+    };
+  },
+  methods: {
+    toSearch() {
+      if (!this.input.length) return this.msgError('请输入搜索关键字');
+      let routerJump = this.$router.resolve({
+        path: '/search',
+        query: { val: this.input }
+      });
+      window.open(routerJump.href, '_blank');
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+.my_header {
+  position: fixed;
+  z-index: 1;
+  width: 100%;
+  height: 48px;
+  line-height: 48px;
+  background: #3d3e3e;
+  .title {
+    color: #fff;
+    padding: 0;
+    .el-row {
+      display: flex;
+      .search {
+        align-items: center;
+        display: flex;
+        height: 30px;
+        overflow: hidden;
+        /deep/input {
+          color: #fff;
+          border-left: 0;
+          border-right: 0;
+          border-radius: 6px 0 0 6px;
+          background-color: rgba(255, 255, 255, 0.2);
+        }
+        .el-button {
+          height: 30px;
+          border-top-left-radius: 0;
+          border-bottom-left-radius: 0;
+          background-color: #ffa32c;
+          font-size: 16px;
+          padding: 0 16px;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/home/achievements.vue

@@ -94,9 +94,7 @@
           </div>
         </div>
         <div style="text-align: center;margin:30px 0" v-show="!total">
-          <div
+          <div style="height:210px;display: inline-block;color:#999">
-            style="width:210px;height:210px;display: inline-block;color:#999"
-          >
             <img
               style="width:100%;height:100%;"
               src="@/assets/image/empty.png"

src/views/home/demand.vue

@@ -70,9 +70,7 @@
           </div>
         </div>
         <div style="text-align: center;margin:30px 0" v-show="!total">
-          <div
+          <div style="height:210px;display: inline-block;color:#999">
-            style="width:210px;height:210px;display: inline-block;color:#999"
-          >
             <img
               style="width:100%;height:100%;"
               src="@/assets/image/empty.png"

src/views/home/notice.vue

@@ -125,9 +125,7 @@
         </div>
 
         <div style="text-align: center;margin:30px 0" v-show="!total">
-          <div
+          <div style="height:210px;display: inline-block;color:#999">
-            style="width:210px;height:210px;display: inline-block;color:#999"
-          >
             <img
               style="width:100%;height:100%;"
               src="@/assets/image/empty.png"

src/views/index.vue

@@ -92,57 +92,20 @@
     <div class="content" style="padding: 10px 0">
       <router-view></router-view>
     </div>
-    <div class="my_footer">
+    <footerPage />
-      <div style="height: 4px; background: #ffa32c"></div>
-      <div class="footer_one content">
-        <div class="footer_two">
-          <div class="footer_left">
-            <div class="footer_left_one"></div>
-            <div class="footer_left_two">
-              <i>24小时服务热线</i>
-            </div>
-            <div class="footer_left_three">
-              <i>0551-6336-6313</i>
-            </div>
-          </div>
-          <div>
-            <h3>合肥嘉策信息技术服务有限公司</h3>
-            <div>
-              地址：安徽省合肥市高新区黄山路601号科技创新公共服务中心412-414室
-            </div>
-            <div style="margin:15px 0">联系人：小杨老师、小黄老师</div>
-            <div>电话：19805659038、15855136916</div>
-          </div>
-          <div class="footer_right">
-            <div class="item">
-              <img src="@/assets/image/wx02.png" alt="" />
-              <div>嘉策公众号</div>
-            </div>
-            <div class="item">
-              <img src="@/assets/image/qq02.png" alt="" />
-              <div>QQ群</div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="hc_bottom">
-      <div class="content text">
-        <span>CopyRight 2020-2021</span>
-        <span>版权所有 合肥嘉策信息技术服务有限公司</span>
-        <span>皖ICP备45619723号-1</span>
-        <span>技术支持：安徽商挈智能科技有限公司</span>
-      </div>
-    </div>
   </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex';
+import footerPage from './components/footer';
 // import user from '@/store/modules/user';
 // import { getMsgCount } from '@/api/home/news';
 export default {
   name: 'home',
+  components: {
+    footerPage
+  },
   data() {
     return {
       input: '',
@@ -358,103 +321,6 @@ export default {
       }
     }
   }
-  .my_footer {
-    background-color: #eeeeee;
-    .footer_one {
-      p {
-        text-align: center;
-        font-size: 14px;
-        color: #666;
-        span {
-          i {
-            margin-right: 3px;
-            img {
-              vertical-align: middle;
-            }
-          }
-        }
-        span:nth-child(2) {
-          margin-left: 40px;
-        }
-      }
-    }
-    .footer_two {
-      // border-bottom: 1px solid #dcdcdc;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      .footer_left {
-        padding: 40px 0;
-        .footer_left_one {
-          width: 392px;
-          height: 63px;
-          background: url(~@/assets/image/02.png) no-repeat left center;
-          background-size: 90% 90%;
-        }
-        .footer_left_two {
-          margin: 10px 0;
-          font-size: 13px;
-          color: #666;
-        }
-        .footer_left_three {
-          font-size: 22px;
-          color: #555;
-        }
-        .footer_left_l {
-          font-size: 18px;
-          color: #333;
-          margin-right: 30px;
-        }
-        .footer_left_r {
-          font-size: 16px;
-          color: #666;
-          i {
-            img {
-              vertical-align: middle;
-            }
-          }
-        }
-      }
-      .footer_right {
-        display: flex;
-        .item {
-          font-size: 18px;
-          color: #333;
-          margin-right: 50px;
-          text-align: center;
-        }
-      }
-    }
-    .footer_three {
-      text-align: center;
-      padding: 36px 0;
-      div {
-        font-size: 16px;
-        color: #3394ff;
-        span:nth-child(2) {
-          margin: 0 39px;
-        }
-      }
-      p {
-        font-size: 14px;
-        color: #333;
-      }
-    }
-  }
-  .hc_bottom {
-    width: 100%;
-    height: 35px;
-    text-align: center;
-    line-height: 35px;
-    background: #ccc;
-    .text {
-      color: #777;
-      font-size: 12px;
-      span {
-        margin-right: 15px;
-      }
-    }
-  }
 }
 /deep/.el-badge__content.is-fixed {
   top: 5px;

src/views/portrait.vue

@@ -1,57 +1,84 @@
 <template>
-  <div class="portrait_page content">
+  <div class="portrait_page">
-    <div class="header" v-if="type == 'policy'">
+    <headerPage />
-      <span class="span">{{ val }}：</span>
+    <div class="padding-top content min_h_241">
-      <el-radio
+      <div class="search">
-        v-model="queryParams.labelId"
+        <div class="search_input" style="display:flex">
-        v-for="item in portraitList"
+          <span v-if="type == 'policy'">政策画像检索</span>
-        :key="item.id"
+          <span v-if="type == 'policyRead'">政策解读检索</span>
-        :label="item.id"
+          <span v-if="type == 'information'">资讯快报检索</span>
-        border
+          <el-input
-        @change="handleClick"
+            v-model="queryParams.title"
-        >{{ item.name }}</el-radio
+            placeholder="请输入搜索关键字"
-      >
+            @keyup.enter.native="getPortraitList"
-    </div>
+          ></el-input>
-    <div class="header" v-else-if="type == 'policyRead'">
+          <el-button type="warning" @click="getPortraitList">搜索</el-button>
-      <span class="span">{{ val }}：</span>
+        </div>
-      <el-radio
+      </div>
-        v-model="queryParams.attributeId"
+      <div class="header" v-if="type == 'policy'">
-        v-for="item in attributeOptions"
+        <span class="span">{{ val }}：</span>
-        :key="item.value"
+        <el-radio
-        :label="item.value"
+          v-model="queryParams.labelId"
-        border
+          v-for="item in portraitList"
-        @change="handleClick"
+          :key="item.id"
-        >{{ item.label }}</el-radio
+          :label="item.id"
-      >
+          border
-    </div>
+          @change="handleClick"
-    <div class="screen_l_b" v-for="item in portraitData" :key="item.id">
+          >{{ item.name }}</el-radio
-      <div class="title text_hidden_one pointer">
-        <router-link
-          target="_blank"
-          :to="{
-            path: '/result',
-            query: { key: type, id: item.id }
-          }"
         >
-          {{ item.title }}
-        </router-link>
       </div>
-      <div class="info" v-if="type != 'information'">
+      <div class="header" v-else-if="type == 'policyRead'">
-        <span>来源：{{ item.source }}</span>
+        <span class="span">{{ val }}：</span>
-        <span>发布：{{ item.listDate }}</span>
+        <el-radio
+          v-model="queryParams.attribute"
+          v-for="item in attributeOptions"
+          :key="item.value"
+          :label="item.value"
+          border
+          @change="handleClick"
+          >{{ item.label }}</el-radio
+        >
       </div>
-      <div class="info" style="justify-content: flex-end;" v-else>
+      <div class="screen_l_b" v-for="item in portraitData" :key="item.id">
-        <span>发布：{{ item.createTime }}</span>
+        <div class="title text_hidden_one pointer">
+          <router-link
+            target="_blank"
+            :to="{
+              path: '/result',
+              query: { key: type, id: item.id }
+            }"
+          >
+            {{ item.title }}
+          </router-link>
+        </div>
+        <div class="info" v-if="type != 'information'">
+          <span>来源：{{ item.source }}</span>
+          <span>发布：{{ item.listDate }}</span>
+        </div>
+        <div class="info" style="justify-content: flex-end;" v-else>
+          <span>发布：{{ item.createTime }}</span>
+        </div>
       </div>
+      <div style="text-align: center;margin:30px 0" v-show="!total">
+        <div style="height:210px;display: inline-block;color:#999">
+          <img
+            style="width:100%;height:100%;"
+            src="@/assets/image/empty.png"
+            alt=""
+          />
+          暂无数据
+        </div>
+      </div>
+      <!-- 分页 -->
+      <pagination
+        v-show="total > 0"
+        :total="total"
+        :page.sync="queryParams.pageNum"
+        :limit.sync="queryParams.pageSize"
+        @pagination="getPortraitList"
+      />
     </div>
-    <!-- 分页 -->
+    <footerPage />
-    <pagination
-      v-show="total > 0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getPortraitList"
-    />
   </div>
 </template>
 
@@ -59,8 +86,14 @@
 import { getPolicyMatch } from '@/api/home/notice';
 import { mapGetters } from 'vuex';
 import { userInfo, getLabelSetting } from '@/api/home/info';
-import { getPolicyRead, getInformation } from '@/api/home/home';
+import { getPolicyRead2, getInformation2 } from '@/api/home/home';
+import footerPage from './components/footer';
+import headerPage from './components/header';
 export default {
+  components: {
+    footerPage,
+    headerPage
+  },
   data() {
     return {
       type: '',
@@ -106,12 +139,12 @@ export default {
           this.total = data.total;
         });
       } else if (this.type == 'policyRead') {
-        getPolicyRead(this.queryParams).then(({ data }) => {
+        getPolicyRead2(this.queryParams).then(({ data }) => {
           this.portraitData = data.list;
           this.total = data.total;
         });
       } else if (this.type == 'information') {
-        getInformation(this.queryParams).then(({ data }) => {
+        getInformation2(this.queryParams).then(({ data }) => {
           this.portraitData = data.list;
           this.total = data.total;
         });
@@ -152,7 +185,7 @@ export default {
         }
       });
     } else if (key == 'policyRead') {
-      this.queryParams.attributeId = this.attributeOptions[0].value;
+      this.queryParams.attribute = this.attributeOptions[0].value;
       this.getPortraitList();
     } else if (key == 'information') {
       this.getPortraitList();
@@ -168,39 +201,74 @@ export default {
 
 <style lang="scss" scoped>
 .portrait_page {
-  margin-top: 30px;
+  .padding-top {
-  .header {
+    padding-top: 70px;
-    display: flex;
+    .search {
-    align-items: center;
+      text-align: center;
-    height: 90px;
+      margin-bottom: 26px;
-    padding: 30px;
+      .search_input {
-    background-color: #f5f5f5;
+        display: flex;
-    .el-tabs {
+        justify-content: center;
-      margin-left: 20px;
+        align-items: center;
-      /deep/.el-tabs__nav-wrap::after {
+        /deep/.el-input--medium .el-input__inner {
-        height: 0;
+          height: 40px;
+          line-height: 40px;
+          border-radius: 6px 0 0 6px;
+          border: 1px solid #ffa32c;
+          border-right: 0;
+        }
+        span:nth-child(1) {
+          color: #333;
+          font-size: 24px;
+          margin-right: 21px;
+        }
+        .el-input {
+          width: 304px;
+        }
+        .el-button {
+          border-radius: 0 6px 6px 0;
+          background-color: #ffa32c;
+          font-size: 18px;
+        }
       }
     }
-    /deep/.el-radio__input {
+    .header {
-      display: none;
-    }
-  }
-  .screen_l_b {
-    height: 110px;
-    line-height: 45px;
-    margin-top: 20px;
-    padding: 0 20px;
-    border-bottom: 1px solid #e3e3e3;
-    .title {
-      font-size: 18px;
-      color: #333;
-      // text-align: left;
-    }
-    .info {
-      font-size: 16px;
-      color: #999;
       display: flex;
-      justify-content: space-between;
+      align-items: center;
+      height: 90px;
+      padding: 30px;
+      background-color: #f5f5f5;
+      .el-tabs {
+        margin-left: 20px;
+        /deep/.el-tabs__nav-wrap::after {
+          height: 0;
+        }
+      }
+      /deep/.el-radio__input {
+        display: none;
+      }
+    }
+
+    .screen_l_b {
+      padding: 0 20px;
+      height: 110px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      border-bottom: 1px solid #e3e3e3;
+
+      .title {
+        font-size: 18px;
+        color: #333;
+        margin-bottom: 16px;
+        text-align: left;
+      }
+      .info {
+        font-size: 16px;
+        color: #999;
+        display: flex;
+        justify-content: space-between;
+      }
     }
   }
 }

src/views/result.vue

@@ -2,11 +2,10 @@
   <!-- 预览弹出层 -->
   <div class="result_page">
     <el-backtop target=".result_page" :visibility-height="500"></el-backtop>
-    <div class="my_header">
+    <!-- <div class="my_header">
       <div class="title content p0-100">
         <el-row :gutter="20">
           <el-col :span="8">
-            <!-- <span>嘉策科技创新服务平台</span> -->
             <img
               src="@/assets/logo/logo2.png"
               alt=""
@@ -29,16 +28,12 @@
               </el-col>
             </el-row>
           </el-col>
-          <!-- <el-col :span="8" style="text-align: right">
-            <span
-              >服务热线：<span style="color: #ffa32c">400-0507-580</span></span
-            >
-          </el-col> -->
         </el-row>
       </div>
-    </div>
+    </div> -->
+    <headerPage />
 
-    <div class="my_main content p0-100" style="display: flex">
+    <div class="my_main content p0-100 min_h_285" style="display: flex">
       <div class="l" style="width: 75%; background-color: #fff; padding: 30px">
         <h2>{{ formData.title }}</h2>
         <div class="info" v-if="type != 'information'">
@@ -148,7 +143,7 @@
               <i>24小时服务热线</i>
             </div>
             <div class="footer_left_three">
-              <i>0551-6336-6313</i>
+              <i>0551-xxxx-xxx</i>
             </div>
           </div>
           <div>
@@ -196,9 +191,11 @@ import { getPolicyList, getRead } from '@/api/home/notice';
 import { mapGetters } from 'vuex';
 import { add, cancel } from '@/api/search';
 import Editor from '@/components/Editor';
+import headerPage from './components/header';
 export default {
   components: {
-    Editor
+    Editor,
+    headerPage
   },
   data() {
     return {

src/views/search.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="search_page">
-    <div class="content">
+    <headerPage />
+    <div class="content min_h_241" style="padding-top:70px">
       <div class="item" v-for="(value, key, index) in list" :key="index">
         <!-- 政策 -->
         <div>
@@ -13,13 +14,13 @@
           <el-divider></el-divider>
           <div class="item_i" v-for="(item, index2) in value" :key="index2">
             <div>
-              <h4 class="pointer">
+              <div class="item_title pointer">
                 <router-link
                   target="_blank"
                   :to="{ path: '/result', query: { key, id: item.id } }"
                   >{{ item.title }}</router-link
                 >
-              </h4>
+              </div>
               <div class="info" v-if="key == 'policy' || key == 'policyRead'">
                 <div>来源：{{ item.source }}</div>
                 <div>发布：{{ item.listDate }}</div>
@@ -51,12 +52,13 @@
         </div>
       </div>
     </div>
-    <popup
+    <footerPage />
+    <!-- <popup
       :dialogVisible="dialogVisible"
       :type="type"
       :formData="formData"
       @close="dialogVisible = false"
-    />
+    /> -->
   </div>
 </template>
 <script>
@@ -69,9 +71,13 @@ import {
   getInfo3
 } from '@/api/search';
 import popup from './components/dialog';
+import footerPage from './components/footer';
+import headerPage from './components/header';
 export default {
   components: {
-    popup
+    popup,
+    footerPage,
+    headerPage
   },
   data() {
     return {
@@ -117,11 +123,17 @@ export default {
         border-radius: 6px;
       }
       .item_i {
+        .item_title {
+          font-size: 18px;
+          color: #333;
+          margin-bottom: 16px;
+          text-align: left;
+        }
         .info {
           display: flex;
           justify-content: space-between;
-          font-size: 14px;
+          font-size: 16px;
-          color: #333;
+          color: #999;
           .el-tag {
             margin-right: 10px;
           }