update

src/api/api.ts

@@ -71,123 +71,39 @@ const jtxw = {
     return res;
   },
 }
-/**信息公开模块 */
-const xxgk = {
-  /**企业信息 */
-  qyxx: {
-    /**机构设置 */
-    jgsz: async () => {
-      const res = await axios.$get(`/xxgk/hdysz`)
-      return res;
-    },
-    /**排水公司信息公开 */
-    psgsxxgk: async () => {
-      const res = await axios.$get(`/xxgk/psgsxxgk`)
-      return res;
-    },
-    /**水厂环境信息公开 */
-    schjxxgk: async () => {
-      const res = await axios.$get(`/xxgk/schjxxgk`)
-      return res;
-    },
-    /**行业自律 */
-    xyzl: async () => {
-      const res = await axios.$get(`/xxgk/xyzl`)
-      return res;
-    },
-    /**长春水务集团2018年政府信息公开年度工作报告 */
-    sw2018: async () => {
-      const res = await axios.$get(`/xxgk/ccswjt2018nzfxxgkndgzbg`)
-      return res;
-    },
-    /**长春水务集团2019年工作 */
-    sw2019: async () => {
-      const res = await axios.$get(`/xxgk/ccswjt2019ngz`)
-      return res;
-    },
-    /**智慧水务(互联网+供水服务) */
-    zhswfw: async () => {
-      const res = await axios.$get(`/xxgk/zhswfw`)
-      return res;
-    },
-  },
-  /**企业服务 */
-  qyfw: {
-    /**获得用水(用水发展) */
-    hdysz: async () => {
-      const res = await axios.$get(`/xxgk/hdysz`)
-      return res;
-    },
-    /**智慧水务 */
-    zhswz: async () => {
-      const res = await axios.$get(`/xxgk/zhswz`)
-      return res;
-    },
-    /**客户服务 */
-    khfwz: async () => {
-      const res = await axios.$get(`/xxgk/khfwz`)
-      return res;
-    },
-    /**用水常识 */
-    yscsz: async () => {
-      const res = await axios.$get(`/xxgk/yscsz`)
-      return res;
-    },
-    /**新区营商环境 */
-    xqyshj: async () => {
-      const res = await axios.$get(`/xxgk/xqyshj`)
-      return res;
-    },
-    /**服务信息 */
-    fwxx: async () => {
-      const res = await axios.$get(`/xxgk/fwxx`)
-      return res;
-    },
-    /**服务项目 */
-    fwxm: async () => {
-      const res = await axios.$get(`/xxgk/fwxm`)
-      return res;
-    },
-    /**服务收费 */
-    fwsf: async () => {
-      const res = await axios.$get(`/xxgk/fwsf`)
-      return res;
-    },
-    /**服务监督 */
-    fwjd: async () => {
-      const res = await axios.$get(`/xxgk/fwjd`)
-      return res;
-    },
-    /**应急服务预案 */
-    yjfwya: async () => {
-      const res = await axios.$get(`/xxgk/yjfwya`)
-      return res;
-    },
-    /**决策信息公开 */
-    jcxxgk: async () => {
-      const res = await axios.$get(`/xxgk/jcxxgk`)
-      return res;
-    },
-    /**重要政策落实情况 */
-    zyzclsqk: async () => {
-      const res = await axios.$get(`/xxgk/zyzclsqk`)
-      return res;
-    },
-    /**企业生产经营情况 */
-    qyscjyqk: async () => {
-      const res = await axios.$get(`/xxgk/qyscjyqk`)
-      return res;
-    },
-    /**企业与相对人的争议解决方式 */
-    qyyxdrdzyjjfs: async () => {
-      const res = await axios.$get(`/xxgk/qyyxdrdzyjjfs`)
-      return res;
-    },
-  },
+/**
+ * 信息公开模块
+ * 企业信息:
+ * 机构设置:jgsz
+ * 排水公司信息公开:psgsxxgk
+ * 水厂环境信息公开:schjxxgk
+ * 行业自律:xyzl
+ * 长春水务集团2018年政府信息公开年度工作报告:sw2018
+ * 长春水务集团2019年工作:sw2019
+ * 智慧水务(互联网+供水服务):zhswfw
+ * 企业服务:
+ * 获得用水(用水发展):hdysz
+ * 智慧水务:zhswz
+ * 客户服务:khfwz
+ * 用水常识:yscsz
+ * 新区营商环境:xqyshj
+ * 服务信息:fwxx
+ * 服务项目:fwxm
+ * 服务收费:fwsf
+ * 服务监督:fwjd
+ * 应急服务预案:yjfwya
+ * 决策信息公开:jcxxgk
+ * 重要政策落实情况:zyzclsqk
+ * 企业生产经营情况:qyscjyqk
+ * 企业与相对人的争议解决方式:qyyxdrdzyjjfs
+ */
+const xxgk = async (type: string) => {
+  const res = await axios.$get(`/xxgk/${type}`)
+  return res;
 }
 /**民意征集模块 */
 const myzj = {
-  rdhy: async (query: object = {}) => {
+  rdhy: async (query: any = {}) => {
     const res = await axios.$get(`/myzj/list/rdhy`, query)
     return res;
   },
@@ -222,7 +138,7 @@ const gsxx = {
    * 管网压力: gwylz;
    * 采购价格信息发布: cgjgxxgbz 
    */
-  query: async (type: string, query: object) => {
+  query: async (type: string, query: any) => {
     const res = await axios.$get(`/gsxx/list/${type}`, query)
     return res;
   },

src/router/modules/winRouter.ts

@@ -40,25 +40,9 @@ export const winRouter = [
     },
   },
   {
-    path: '/messService',
-    component: () => import('../../views/win/messService.vue'),
-    name: 'messService',
-    meta: {
-      title: '信息公开',
-    },
-  },
-  {
-    path: '/messServiceWater',
-    component: () => import('../../views/win/messServiceWater.vue'),
-    name: 'messServiceWater',
-    meta: {
-      title: '信息公开',
-    },
-  },
-  {
-    path: '/messInfo',
-    component: () => import('../../views/win/messInfo.vue'),
-    name: 'messInfo',
+    path: '/messDetail',
+    component: () => import('../../views/win/messDetail.vue'),
+    name: 'messDetail',
     meta: {
       title: '信息公开',
     },
@@ -79,6 +63,14 @@ export const winRouter = [
       title: '供水信息',
     },
   },
+  {
+    path: '/watersupplyDetail',
+    component: () => import('../../views/win/watersupplyDetail.vue'),
+    name: 'watersupplyDetail',
+    meta: {
+      title: '供水信息',
+    },
+  },
   {
     path: '/inwaterIndex',
     component: () => import('../../views/win/inwaterIndex.vue'),
@@ -87,4 +79,12 @@ export const winRouter = [
       title: '走进水务',
     },
   },
+  {
+    path: '/inwaterDetail',
+    component: () => import('../../views/win/inwaterDetail.vue'),
+    name: 'inwaterDetail',
+    meta: {
+      title: '走进水务',
+    },
+  },
 ]

src/views/win/messInfo.vue

@@ -6,40 +6,33 @@
         <menusIndex />
       </el-col>
       <el-col :span="24" class="bottom">
-        <el-col :span="24" class="zero"> title </el-col>
-        <el-col :span="24" class="zero"> content </el-col>
-      </el-col>
-      <el-col :span="24" class="foot">
-        <foot-index />
+        <el-col :span="24" class="zero top">
+          <top-index :info="{ title: '走进水务', enTitle: 'Water affairs' }" />
+        </el-col>
+        <el-col :span="24" class="zero"> 
+          <detail></detail>
+        </el-col>
+        <el-col :span="24" class="foot">
+          <foot-index />
+        </el-col>
       </el-col>
     </el-col>
   </el-row>
 </template>
 <script setup lang="ts">
-// 信息公开-企业信息详情页
 // TODO:需要自己排下版
 /* 菜单 */
 import menusIndex from '../../components/windows/menusIndex.vue'
 /* 底部信息 */
 import footIndex from '../../components/windows/footIndex.vue'
-import { common } from '@/api/api'
+import detail from './inwaterParts/detail.vue'
 import { get } from 'lodash-es'
-import { ref, onMounted, computed } from 'vue'
+import { computed } from 'vue'
 import { useRoute } from 'vue-router'
 const route = useRoute()
-const data = ref()
-onMounted(() => {
-  init()
-})
-const content_id = computed(() => {
-  return get(route, 'query.content_id')
+const type = computed(() => {
+  return get(route, 'query.type')
 })
-const init = async () => {
-  const result = await common.content(content_id.value)
-  if (result.errcode == 0) {
-    data.value = get(result, 'data')
-  }
-}
 </script>
 <style scoped lang="scss">
 .introduce {
@@ -48,7 +41,7 @@ const init = async () => {
   .bigImage {
     height: 480px;
     overflow: hidden;
-    background-image: url('/brief5.png');
+    background-image: url('/water1.png');
     background-repeat: no-repeat;
     background-size: 100% 100%;
   }
@@ -66,7 +59,7 @@ const init = async () => {
     }
 
     .bottom {
-      height: calc(100vh - 350px);
+      height: calc(100vh - 66px);
       overflow-y: auto;
       margin: 0 auto;
 

src/views/win/inwaterIndex.vue

@@ -1,27 +1,26 @@
 <template>
-      <el-row class="inwater">
-            <el-col :span="24" class="bigImage"></el-col>
-            <el-col :span="24" class="info">
-                  <el-col :span="24" class="menus">
-                        <menusIndex />
-                  </el-col>
-                  <el-col :span="24" class="bottom">
-                        <el-col :span="24" class="zero top">
-                              <top-index :info="{ title: '走进水务', enTitle: 'Water affairs' }" />
-                        </el-col>
-                        <el-col :span="24" class="zero">
-                              <honor-index />
-                        </el-col>
-                        <el-col :span="24" class="zero">
-                              <address-index />
-                        </el-col>
-                        <el-col :span="24" class="foot">
-                              <foot-index />
-                        </el-col>
-                  </el-col>
-            </el-col>
-      </el-row>
-
+  <el-row class="inwater">
+    <el-col :span="24" class="bigImage"></el-col>
+    <el-col :span="24" class="info">
+      <el-col :span="24" class="menus">
+        <menusIndex />
+      </el-col>
+      <el-col :span="24" class="bottom">
+        <el-col :span="24" class="zero top">
+          <top-index :info="{ title: '走进水务', enTitle: 'Water affairs' }" />
+        </el-col>
+        <el-col :span="24" class="zero">
+          <honor-index />
+        </el-col>
+        <el-col :span="24" class="zero">
+          <address-index />
+        </el-col>
+        <el-col :span="24" class="foot">
+          <foot-index />
+        </el-col>
+      </el-col>
+    </el-col>
+  </el-row>
 </template>
 
 <script setup lang="ts">
@@ -37,51 +36,46 @@ import honorIndex from './inwaterParts/honorIndex.vue'
 /* 地址 */
 import addressIndex from './inwaterParts/addressIndex.vue'
 
-
 /* 底部信息 */
 import footIndex from '../../components/windows/footIndex.vue'
 </script>
 <style scoped lang="scss">
 .inwater {
-      position: relative;
-
-      .bigImage {
-            height: 480px;
-            overflow: hidden;
-            background-image: url('/inwater1.png');
-            background-repeat: no-repeat;
-            background-size: 100% 100%;
+  position: relative;
+
+  .bigImage {
+    height: 480px;
+    overflow: hidden;
+    background-image: url('/inwater1.png');
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .info {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: 100vh;
+    overflow: hidden;
+
+    .menus {
+      height: 66px;
+      overflow: hidden;
+    }
+
+    .bottom {
+      height: calc(100vh - 66px);
+      overflow-y: auto;
+      margin: 0 auto;
+
+      .zero {
+        margin: 0 0 40px 0;
       }
 
-      .info {
-            position: absolute;
-            top: 0;
-            width: 100%;
-            height: 100vh;
-            overflow: hidden;
-
-            .menus {
-                  height: 66px;
-                  overflow: hidden;
-            }
-
-            .bottom {
-                  height: calc(100vh - 66px);
-                  overflow-y: auto;
-                  margin: 0 auto;
-
-
-                  .zero {
-                        margin: 0 0 40px 0;
-
-                  }
-
-                  .top {
-                        padding: 0 17%;
-                  }
-
-            }
+      .top {
+        padding: 0 17%;
       }
-
+    }
+  }
 }
 </style>

src/views/win/inwaterParts/honorIndex.vue

@@ -1,188 +1,198 @@
 <template>
-      <el-row class="main animate__animated animate__backInLeft">
-            <el-col :span="24" class="info">
-                  <el-col :span="24" class="top">
-                        <dividerIndex :info="{ title: '资质荣誉', enTitle: 'Qualification and Honor' }" />
-                  </el-col>
-                  <el-col :span="24" class="infoList">
-                        <el-col :span="2" class="imgs">
-                              <el-image class="images" :src="left1" />
-                        </el-col>
-                        <el-col :span="20" class="center">
-                              <el-col :span="24" class="center1">
-                                    <el-col :span="8" class="list" v-for="(item, index) in list1" :key="index">
-                                          <el-col :span="24" class="imgs">
-                                                <el-image class="images" :src="item.url" />
-                                          </el-col>
-                                          <el-col :span="24" class="title">
-                                                {{ item.title }}
-                                          </el-col>
-                                    </el-col>
-                              </el-col>
-                              <el-col :span="24" class="center2">
-                                    <el-col :span="6" class="list" v-for="(item, index) in list2" :key="index">
-                                          <el-col :span="24" class="imgs">
-                                                <el-image class="images" :src="item.url" />
-                                          </el-col>
-                                          <el-col :span="24" class="title">
-                                                {{ item.title }}
-                                          </el-col>
-                                    </el-col>
-                              </el-col>
-                        </el-col>
-                        <el-col :span="2" class="imgs imgs1">
-                              <el-image class="images" :src="right1" />
-                        </el-col>
-                  </el-col>
+  <el-row class="main animate__animated animate__backInLeft">
+    <el-col :span="24" class="info">
+      <el-col :span="24" class="top">
+        <dividerIndex :info="{ title: '资质荣誉', enTitle: 'Qualification and Honor' }" />
+      </el-col>
+      <el-col :span="24" class="infoList">
+        <el-col :span="2" class="imgs">
+          <el-image class="images" :src="left1" />
+        </el-col>
+        <el-col :span="20" class="center">
+          <el-col :span="24" class="center1">
+            <el-col :span="8" class="list" v-for="(item, index) in list1" :key="index" @click="toOpen(item)">
+              <el-col :span="24" class="imgs">
+                <el-image class="images" :src="item.url" />
+              </el-col>
+              <el-col :span="24" class="title">
+                {{ item.title }}
+              </el-col>
             </el-col>
-      </el-row>
+          </el-col>
+          <el-col :span="24" class="center2">
+            <el-col
+              :span="6"
+              class="list"
+              v-for="(item, index) in list2"
+              :key="index"
+              @click="toOpen(item)"
+            >
+              <el-col :span="24" class="imgs">
+                <el-image class="images" :src="item.url" />
+              </el-col>
+              <el-col :span="24" class="title">
+                {{ item.title }}
+              </el-col>
+            </el-col>
+          </el-col>
+        </el-col>
+        <el-col :span="2" class="imgs imgs1">
+          <el-image class="images" :src="right1" />
+        </el-col>
+      </el-col>
+    </el-col>
+  </el-row>
 </template>
 
 <script setup lang="ts">
 // 基础
 import { ref } from 'vue'
 import dividerIndex from '../../../components/windows/dividerIndex.vue'
-
+import { get } from 'lodash-es';
 
 const left1 = ref('inwater2.png')
 const right1 = ref('inwater3.png')
 
 const list1 = ref([
-      {
-            title: '客服中心',
-            url: 'inwater6.png'
-      },
-      {
-            title: '水务集团',
-            url: 'inwater7.png'
-      },
-      {
-            title: '朝阳分公司',
-            url: 'inwater8.png'
-      }
+  {
+    title: '客服中心',
+    url: 'inwater6.png',
+    path: '/inwaterDetail?tag=1',
+  },
+  {
+    title: '水务集团',
+    url: 'inwater7.png',
+    path: '/inwaterDetail?tag=2',
+  },
+  {
+    title: '朝阳分公司',
+    url: 'inwater8.png',
+    path: '/inwaterDetail?tag=3',
+  },
 ])
 const list2 = ref([
-      {
-            title: '信息中心',
-            url: 'inwater9.png'
-      },
-      {
-            title: '党委工作部',
-            url: 'inwater10.png'
-      },
-      {
-            title: '第一净水厂',
-            url: 'inwater11.png'
-      },
-      {
-            title: '第二净水厂',
-            url: 'inwater12.png'
-      }
+  {
+    title: '信息中心',
+    url: 'inwater9.png',
+    path: '/inwaterDetail?tag=4',
+  },
+  {
+    title: '党委工作部',
+    url: 'inwater10.png',
+    path: '/inwaterDetail?tag=5',
+  },
+  {
+    title: '第一净水厂',
+    url: 'inwater11.png',
+    path: '/inwaterDetail?tag=6',
+  },
+  {
+    title: '第二净水厂',
+    url: 'inwater12.png',
+    path: '/inwaterDetail?tag=7',
+  },
 ])
 
+const toOpen = (data: any) => {
+  const path = get(data, 'path')
+  window.open(`/${import.meta.env.VITE_BASE_URL}${path}`)
+}
 </script>
 <style scoped lang="scss">
 .main {
-      .top {
-            padding: 0 17%;
-            margin: 40px 0;
+  .top {
+    padding: 0 17%;
+    margin: 40px 0;
+  }
+
+  .infoList {
+    padding: 0 10%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .imgs {
+      .images {
+        width: 100%;
+        height: 380px;
       }
-
-      .infoList {
-            padding: 0 10%;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-
-            .imgs {
-
-                  .images {
-                        width: 100%;
-                        height: 380px;
-                  }
+    }
+
+    .center {
+      .center1 {
+        display: flex;
+        padding: 0 15%;
+        margin: 0 0 20px 0;
+
+        .list {
+          background-image: url('/inwater4.png');
+          background-repeat: no-repeat;
+          background-size: 100% 100%;
+          text-align: center;
+          position: relative;
+          height: 40vh;
+
+          .imgs {
+            .images {
+              position: absolute;
+              left: 33.5px;
+              top: 25px;
+              width: 77%;
+              height: 34vh;
             }
+          }
+
+          .title {
+            position: absolute;
+            bottom: 40px;
+            width: 100%;
+            text-align: center;
+            color: rgb(255, 255, 255);
+            font-family: '黑体';
+            font-size: 24px;
+            font-weight: 700;
+            line-height: 32px;
+            letter-spacing: 2px;
+          }
+        }
+      }
 
-            .center {
-                  .center1 {
-                        display: flex;
-                        padding: 0 15%;
-                        margin: 0 0 20px 0;
-
-                        .list {
-                              background-image: url('/inwater4.png');
-                              background-repeat: no-repeat;
-                              background-size: 100% 100%;
-                              text-align: center;
-                              position: relative;
-                              height: 40vh;
-
-                              .imgs {
-                                    .images {
-                                          position: absolute;
-                                          left: 33.5px;
-                                          top: 25px;
-                                          width: 77%;
-                                          height: 34vh;
-
-                                    }
-
-                              }
-
-                              .title {
-                                    position: absolute;
-                                    bottom: 40px;
-                                    width: 100%;
-                                    text-align: center;
-                                    color: rgb(255, 255, 255);
-                                    font-family: '黑体';
-                                    font-size: 24px;
-                                    font-weight: 700;
-                                    line-height: 32px;
-                                    letter-spacing: 2px;
-                              }
-                        }
-                  }
-
-                  .center2 {
-                        display: flex;
-
-                        .list {
-                              background-image: url('/inwater5.png');
-                              background-repeat: no-repeat;
-                              background-size: 100% 100%;
-                              text-align: center;
-                              position: relative;
-                              height: 25vh;
-
-                              .imgs {
-                                    .images {
-                                          position: absolute;
-                                          left: 37px;
-                                          top: 15px;
-                                          width: 77%;
-                                          height: 21.2vh;
-                                    }
-
-                              }
-
-                              .title {
-                                    position: absolute;
-                                    bottom: 30px;
-                                    width: 100%;
-                                    text-align: center;
-                                    color: rgb(255, 255, 255);
-                                    font-family: '黑体';
-                                    font-size: 24px;
-                                    font-weight: 700;
-                                    line-height: 32px;
-                                    letter-spacing: 2px;
-                              }
-                        }
-                  }
+      .center2 {
+        display: flex;
+
+        .list {
+          background-image: url('/inwater5.png');
+          background-repeat: no-repeat;
+          background-size: 100% 100%;
+          text-align: center;
+          position: relative;
+          height: 25vh;
+
+          .imgs {
+            .images {
+              position: absolute;
+              left: 37px;
+              top: 15px;
+              width: 77%;
+              height: 21.2vh;
             }
-
+          }
+
+          .title {
+            position: absolute;
+            bottom: 30px;
+            width: 100%;
+            text-align: center;
+            color: rgb(255, 255, 255);
+            font-family: '黑体';
+            font-size: 24px;
+            font-weight: 700;
+            line-height: 32px;
+            letter-spacing: 2px;
+          }
+        }
       }
-
-
+    }
+  }
 }
-</style>
+</style>

src/views/win/messDetail.vue

@@ -0,0 +1,91 @@
+<template>
+  <el-row class="mess">
+    <el-col :span="24" class="bigImage"></el-col>
+    <el-col :span="24" class="info">
+      <el-col :span="24" class="menus">
+        <menusIndex />
+      </el-col>
+      <el-col :span="24" class="bottom">
+        <el-col :span="24" class="zero top">
+          <top-index :info="info" />
+        </el-col>
+        <el-col :span="24" class="zero">
+          <info-detail v-if="type === 'info'"></info-detail>
+          <water-detail v-else-if="type === 'water'"></water-detail>
+          <service-detail v-if="type === 'service'"></service-detail>
+        </el-col>
+        <el-col :span="24" class="foot">
+          <foot-index />
+        </el-col>
+      </el-col>
+    </el-col>
+  </el-row>
+</template>
+<script setup lang="ts">
+// TODO:需要自己排下版
+/* 菜单 */
+import menusIndex from '../../components/windows/menusIndex.vue'
+/* 底部信息 */
+import footIndex from '../../components/windows/footIndex.vue'
+import infoDetail from './messParts/infoDetail.vue'
+import waterDetail from './messParts/waterDetail.vue'
+import serviceDetail from './messParts/serviceDetail.vue'
+import { get } from 'lodash-es'
+import { computed, onMounted, ref } from 'vue'
+import { useRoute } from 'vue-router'
+const route = useRoute()
+const type = computed(() => {
+  return get(route, 'query.type')
+})
+const info = ref({ title: '集团介绍', enTitle: 'INTRODUCTION' })
+onMounted(() => {
+  if (type.value === 'water') {
+    info.value = { title: '用水发展', enTitle: 'Develop' }
+  } else if (type.value === 'service') {
+    info.value = { title: '企业服务', enTitle: 'Service' }
+  } else if (type.value === 'info') {
+    info.value = { title: '企业信息', enTitle: 'Information' }
+  }
+})
+</script>
+
+<style scoped lang="scss">
+.mess {
+  position: relative;
+
+  .bigImage {
+    height: 480px;
+    overflow: hidden;
+    background-image: url('/water1.png');
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .info {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: 100vh;
+    overflow: hidden;
+
+    .menus {
+      height: 66px;
+      overflow: hidden;
+    }
+
+    .bottom {
+      height: calc(100vh - 66px);
+      overflow-y: auto;
+      margin: 0 auto;
+
+      .zero {
+        margin: 0 0 40px 0;
+      }
+
+      .top {
+        padding: 0 17%;
+      }
+    }
+  }
+}
+</style>

src/views/win/messParts/commessIndex.vue

@@ -32,7 +32,7 @@ const list = ref<any[]>([
   {
     url: 'commess1.png',
     title: '机构设置',
-    to: '/messInfo?tag=1',
+    to: '/messDetail?tag=1&type=info',
   },
   {
     url: 'commess2.png',
@@ -42,32 +42,32 @@ const list = ref<any[]>([
   {
     url: 'commess3.png',
     title: '排水公司信息公开',
-    to: '/messInfo?tag=3',
+    to: '/messDetail?tag=3&type=info',
   },
   {
     url: 'commess4.png',
     title: '水厂环境信息公开',
-    to: '/messInfo?tag=4',
+    to: '/messDetail?tag=4&type=info',
   },
   {
     url: 'commess5.png',
     title: '行业自律',
-    to: '/messInfo?tag=5',
+    to: '/messDetail?tag=5&type=info',
   },
   {
     url: 'commess6.png',
     title: '长春水务集团2018年政府信息公开',
-    to: '/messInfo?tag=6',
+    to: '/messDetail?tag=6&type=info',
   },
   {
     url: 'commess7.png',
     title: '长春水务集团2019年工作',
-    to: '/messInfo?tag=7',
+    to: '/messDetail?tag=7&type=info',
   },
   {
     url: 'commess8.png',
     title: '智慧水务（互联网+供水服务）',
-    to: '/messInfo?tag=8',
+    to: '/messDetail?tag=8&type=info',
   },
 ])
 const toOpen = (path: string) => {

src/views/win/messParts/infoDetail.vue

@@ -0,0 +1,180 @@
+<template>
+  <el-row class="main animate__animated animate__backInLeft">
+    <el-col :span="24" class="info">
+      <el-col :span="24" class="tabs">
+        <el-col
+          :span="5"
+          :class="['tabList', item.id == tabActive ? 'tabActiveList' : '']"
+          v-for="(item, index) in tabList"
+          :key="index"
+          @click="tabChange(item)"
+        >
+          {{ item.title }}
+        </el-col>
+      </el-col>
+      <el-col :span="24" class="infoList">
+        <p>{{ viewData.title }}</p>
+        <span v-html="viewData.txt"></span>
+      </el-col>
+    </el-col>
+  </el-row>
+</template>
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { get } from 'lodash-es'
+import { useRoute, useRouter } from 'vue-router'
+const route = useRoute()
+const router = useRouter()
+const tabList = ref([
+  {
+    id: '1',
+    title: '机构设置',
+    type: 'jgsz',
+  },
+  // 政策法规跳走
+  {
+    id: '2',
+    title: '政策法规',
+    type: 'zcfg',
+  },
+  {
+    id: '3',
+    title: '排水公司信息公开',
+    type: 'psgsxxgk',
+  },
+  {
+    id: '4',
+    title: '水厂环境信息公开',
+    type: 'schjxxgk',
+  },
+  {
+    id: '5',
+    title: '行业自律',
+    type: 'xyzl',
+  },
+  {
+    id: '6',
+    title: '长春水务集团2018年政府信息公开',
+    type: 'sw2018',
+  },
+  {
+    id: '7',
+    title: '长春水务集团2019年工作',
+    type: 'sw2019',
+  },
+  {
+    id: '8',
+    title: '智慧水务（互联网+供水服务）',
+    type: 'zhswfw',
+  },
+])
+const tabActive = ref('1')
+/* 选择 */
+const tabChange = (event: { id: string }) => {
+  if (event.id == '2') {
+    // 需要跳转到政策列表
+    router.push(`/newsIndex?tag=2`)
+    return
+  }
+  tabActive.value = event.id
+  toSearch()
+}
+import { xxgk } from '@/api/api'
+const viewData = ref({
+  channel_id: '',
+  title: '长春水投集团涉民、涉企供水服务大厅、服务网点一览表',
+  txt: `<p>xxx</p>`,
+})
+/* 查询 */
+const toSearch = async () => {
+  const tab = tabList.value.find((f) => f.id == tabActive.value)
+  if (!tab) return
+  const type = get(tab, 'type')
+  const result = await xxgk(type)
+  if (result.errcode == 0) {
+    const data = get(result, 'data.data', {})
+    if (Object.keys(data).length > 1) {
+      // 因为默认会带上channel_id,所以只有key大于2的时候才是有数据
+      viewData.value = data
+    }
+  }
+}
+
+/* 初始化 */
+onMounted(() => {
+  const id: any = get(route, 'query.tag')
+  if (!id) {
+    toSearch()
+    return
+  }
+  tabActive.value = `${id}`
+  toSearch()
+})
+</script>
+
+<style scoped lang="scss">
+.main {
+  padding: 0 17%;
+
+  .info {
+    .tabs {
+      display: flex;
+      margin: 0 0 50px 0;
+
+      .tabList {
+        text-align: center;
+        color: rgb(102, 102, 102);
+        font-family: '黑体';
+        font-size: 18px;
+        font-weight: 500;
+        line-height: 26px;
+        letter-spacing: 0px;
+        border-bottom: 4px solid transparent;
+      }
+
+      .tabList:hover {
+        cursor: pointer;
+        color: rgb(25, 25, 26);
+        border-bottom: 4px solid rgb(21, 134, 255);
+      }
+
+      .tabActiveList {
+        color: rgb(25, 25, 26);
+        border-bottom: 4px solid rgb(21, 134, 255);
+      }
+    }
+
+    .infoList {
+      .list {
+        display: flex;
+        border-bottom: 1px solid rgb(217, 217, 217);
+        padding: 30px 0;
+
+        .title {
+          color: rgb(25, 25, 26);
+          font-family: '黑体';
+          font-size: 24px;
+          font-weight: 500;
+          line-height: 35px;
+          letter-spacing: 0px;
+          text-align: left;
+        }
+
+        .date {
+          color: rgb(25, 25, 26);
+          font-family: '黑体';
+          font-size: 24px;
+          font-weight: 500;
+          line-height: 32px;
+          letter-spacing: 0px;
+          text-align: left;
+        }
+      }
+
+      .list:last-child {
+        border-bottom: none;
+      }
+    }
+  }
+}
+</style>

src/views/win/messParts/serviceDetail.vue

@@ -0,0 +1,231 @@
+<template>
+  <el-row class="main animate__animated animate__backInLeft">
+    <el-col :span="24" class="info">
+      <el-col :span="24" class="tabs">
+        <el-col
+          :span="3"
+          :class="['tabList', item.id == tabActive ? 'tabActiveList' : '']"
+          v-for="(item, index) in tabList"
+          :key="index"
+          @click="tabChange(item)"
+        >
+          {{ item.title }}
+        </el-col>
+      </el-col>
+      <el-col :span="24" class="infoList">
+        <span v-html="viewData.txt"></span>
+      </el-col>
+    </el-col>
+  </el-row>
+</template>
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { get } from 'lodash-es'
+const tabList = ref([
+  // 用水发展需要跳到用水的详情页
+  {
+    id: '1',
+    title: '用水发展',
+    type: 'ysfz',
+  },
+  {
+    id: '2',
+    title: '服务信息',
+    type: 'fwxx',
+  },
+  {
+    id: '3',
+    title: '服务项目',
+    type: 'fwxm',
+  },
+  {
+    id: '4',
+    title: '服务收费',
+    type: 'fwsf',
+  },
+  {
+    id: '5',
+    title: '服务监督',
+    type: 'fwjd',
+  },
+  {
+    id: '6',
+    title: '应急服务预案',
+    type: 'yjfwya',
+  },
+  {
+    id: '7',
+    title: '决策信息公开',
+    type: 'jcxxgk',
+  },
+  {
+    id: '8',
+    title: '重要政策落实情况',
+    type: 'zyzclsqk',
+  },
+  {
+    id: '9',
+    title: '企业生产经营情况',
+    type: 'qyscjyqk',
+  },
+  {
+    id: '10',
+    title: '企业与相对人的争议解决方式',
+    type: 'qyyxdrdzyjjfs',
+  },
+])
+const tabActive = ref('3')
+/* 选择 */
+const tabChange = (event: { id: string }) => {
+  if (event.id == '1') {
+    // 需要跳转到用水详情页
+    return
+  }
+  tabActive.value = event.id
+  toSearch()
+}
+import { xxgk } from '@/api/api'
+const viewData = ref({
+  channel_id: '',
+  txt: `<p>（一）服务承诺
+
+    1、安全供水：保证安全不间断供水，根据《城镇供水服务》（GB/T32063-2015）,市政供水管网压力合格率达到96%。
+
+    2、管网施工：严格执行工程施工规范，做好安全防护，文明施工，完工后及时通知有关部门修复路面，设置安全防护及警示装置，做到完工料净现场清，并及时告知相关单位修复路面。
+
+    3、供水水质：水质符合国家《生活饮用水卫生标准》。按照国家标准，对供水泵站，用户终端用水进行水质监测， 按国家规定的标准规范采水化验进行水质检测；用户反映水质问题，24小时内采样化验，3个工作日内向用户答复；建立水质污染应急预案，如遇水质污染事件，按照应急预案处理。
+
+    4、严格执行价格主管部门制定的水价及收费政策，以表计量，抄表计费准确，水价、服务标准、服务程序在供水营业场所、 集团网站及新闻媒体公开。用户发展收费标准在业务办理场所公布。
+
+5、对欠水费用户依法采取停水措施的，提前送达停水通知书，费用结清后尽快恢复供水。
+
+ 6、各供水分公司服务大厅实行一站式服务，用户办理更名、发票开具、低保户水费减免、 阶梯水价人口登记等业务，资料齐全的，当场受理。
+
+    7、停水通知：
+
+    计划停水：提前24小时通过新闻媒体公告。因管网抢修停水的，根据供水范围，通过现场张贴公告， 电台、电视台插播紧急停水通知、集团网站刊登公告等多种方式告知用户。
+
+    突发性停水：在抢修的同时通知客户，及时发布停水通知，具备条件的在受影响范围内用户所在地张贴通知。
+
+    同时供水热线接线员解答用户来电咨询，并报告上级主管部门。
+
+    8、市政管网报漏维修：接报后（除交通拥堵等特殊情况外）2小时到达现场查勘，管径小于300毫米的， 修复不超过24小时，管径300毫米以上的，连续抢修。
+
+    9、二次供水管网维修：日常维护和管理好供水管道与设施。发现或接到属于维修范围的报漏， 一般情况下维修人员2小时内赶到现场。具备维修条件的，小修一般不超过24小时，大修一般不超过48小时。
+
+     10、供水服务热线8981234524小时受理业务咨询、信息查询、供水用户诉求及报漏维修。 受理用户诉求后，对管理范围内的供水问题，一般问题在5个工作日内给予解决并答复处理结果。
+
+（二）服务行为准则
+
+    一、礼貌待人、主动热情、态度和蔼、语言规范、举止文明。
+
+    二、工作时间，保持工作环境干净整洁，着装得体、仪容整洁、佩戴工牌、精神饱满。不玩游戏、不吃零食、 不吸烟、不串岗、不说笑打闹、不大声喧哗、不搬弄是非、不做与工作无关的私事。
+
+    三、解答问题时，要百问不厌，坚持微笑，不随意打断对方讲话，不推诿、怠慢。
+
+    四、接待用户时，要熟悉相关业务，为用户提供一站式服务、一次性告知。
+
+    五、业务办理时，提供便捷高效服务，按章办事，进行相应的服务指引。
+
+    六、处理投诉时，严格执行投诉处理程序，及时交办、跟踪与督办。
+
+    七、施工时，要文明施工、标示明确、设立围挡。
+
+    八、严格执行首问责任制，切实为用户释疑解难。
+
+    九、遵纪守法、遵守廉洁自律规范、遵守职业道德。</p>`,
+})
+/* 查询 */
+const toSearch = async () => {
+  const tab = tabList.value.find((f) => f.id == tabActive.value)
+  if (!tab) return
+  const type = get(tab, 'type')
+  const result = await xxgk(type)
+  if (result.errcode == 0) {
+    const data = get(result, 'data.data', {})
+    if (Object.keys(data).length > 1) {
+      // 因为默认会带上channel_id,所以只有key大于2的时候才是有数据
+      viewData.value = data
+    }
+  }
+}
+import { useRoute } from 'vue-router'
+const route = useRoute()
+/* 初始化 */
+onMounted(() => {
+  const id: any = get(route, 'query.tag')
+  if (!id) {
+    toSearch()
+    return
+  }
+  tabActive.value = `${id}`
+  toSearch()
+})
+</script>
+
+<style scoped lang="scss">
+.main {
+  padding: 0 17%;
+
+  .info {
+    .tabs {
+      display: flex;
+      margin: 0 0 50px 0;
+
+      .tabList {
+        text-align: center;
+        color: rgb(102, 102, 102);
+        font-family: '黑体';
+        font-size: 18px;
+        font-weight: 500;
+        line-height: 26px;
+        letter-spacing: 0px;
+        border-bottom: 4px solid transparent;
+      }
+
+      .tabList:hover {
+        cursor: pointer;
+        color: rgb(25, 25, 26);
+        border-bottom: 4px solid rgb(21, 134, 255);
+      }
+
+      .tabActiveList {
+        color: rgb(25, 25, 26);
+        border-bottom: 4px solid rgb(21, 134, 255);
+      }
+    }
+
+    .infoList {
+      .list {
+        display: flex;
+        border-bottom: 1px solid rgb(217, 217, 217);
+        padding: 30px 0;
+
+        .title {
+          color: rgb(25, 25, 26);
+          font-family: '黑体';
+          font-size: 24px;
+          font-weight: 500;
+          line-height: 35px;
+          letter-spacing: 0px;
+          text-align: left;
+        }
+
+        .date {
+          color: rgb(25, 25, 26);
+          font-family: '黑体';
+          font-size: 24px;
+          font-weight: 500;
+          line-height: 32px;
+          letter-spacing: 0px;
+          text-align: left;
+        }
+      }
+
+      .list:last-child {
+        border-bottom: none;
+      }
+    }
+  }
+}
+</style>

src/views/win/messParts/serviceIndex.vue

@@ -32,52 +32,52 @@ const list = ref<any[]>([
   {
     url: 'mess1.png',
     title: '用水发展',
-    to: '/messServiceWater?tag=1',
+    to: '/messDetail?tag=1&type=water',
   },
   {
     url: 'mess2.png',
     title: '服务信息',
-    to: '/messService?tag=1',
+    to: '/messDetail?tag=2&type=service',
   },
   {
     url: 'mess3.png',
     title: '服务项目',
-    to: '/messService?tag=2',
+    to: '/messDetail?tag=3&type=service',
   },
   {
     url: 'mess4.png',
     title: '服务收费',
-    to: '/messService?tag=3',
+    to: '/messDetail?tag=4&type=service',
   },
   {
     url: 'mess5.png',
     title: '服务监督',
-    to: '/messService?tag=4',
+    to: '/messDetail?tag=5&type=service',
   },
   {
     url: 'mess6.png',
     title: '应急服务预案',
-    to: '/messService?tag=5',
+    to: '/messDetail?tag=6&type=service',
   },
   {
     url: 'mess7.png',
     title: '决策信息公开',
-    to: '/messService?tag=6',
+    to: '/messDetail?tag=7&type=service',
   },
   {
     url: 'mess8.png',
     title: '重要政策落实情况',
-    to: '/messService?tag=7',
+    to: '/messDetail?tag=8&type=service',
   },
   {
     url: 'mess9.png',
     title: '企业生产经营情况',
-    to: '/messService?tag=8',
+    to: '/messDetail?tag=9&type=service',
   },
   {
     url: 'mess10.png',
     title: '企业与相对人的争议解决方式',
-    to: '/messService?tag=9',
+    to: '/messDetail?tag=10&type=service',
   },
 ])
 const toOpen = (path: string) => {

src/views/win/messParts/waterDetail.vue

@@ -0,0 +1,158 @@
+<template>
+  <el-row class="main animate__animated animate__backInLeft">
+    <el-col :span="24" class="info">
+      <el-col :span="24" class="tabs">
+        <el-col
+          :span="5"
+          :class="['tabList', item.id == tabActive ? 'tabActiveList' : '']"
+          v-for="(item, index) in tabList"
+          :key="index"
+          @click="tabChange(item)"
+        >
+          {{ item.title }}
+        </el-col>
+      </el-col>
+      <el-col :span="24" class="infoList">
+        <p>{{ viewData.title }}</p>
+        <span v-html="viewData.txt"></span>
+      </el-col>
+    </el-col>
+  </el-row>
+</template>
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { get } from 'lodash-es'
+const tabList = ref([
+  {
+    id: '1',
+    title: '获得用水',
+    type: 'hdysz',
+  },
+  {
+    id: '2',
+    title: '智慧服务',
+    type: 'zhswz',
+  },
+  {
+    id: '3',
+    title: '客户服务',
+    type: 'khfwz',
+  },
+  // 用水尝试和新区营商环境是content列表,到content显示
+  {
+    id: '4',
+    title: '用水常识',
+    type: 'yscsz',
+  },
+  {
+    id: '5',
+    title: '新区营商环境',
+    type: 'xqyshj',
+  },
+])
+const tabActive = ref('1')
+/* 选择 */
+const tabChange = (event: { id: string }) => {
+  tabActive.value = event.id
+  toSearch()
+}
+import { xxgk } from '@/api/api'
+const viewData = ref({
+  channel_id: '',
+  title: '长春水投集团涉民、涉企供水服务大厅、服务网点一览表',
+  txt: `<p>xxx</p>`,
+})
+/* 查询 */
+const toSearch = async () => {
+  const tab = tabList.value.find((f) => f.id == tabActive.value)
+  if (!tab) return
+  const type = get(tab, 'type')
+  const result = await xxgk(type)
+  if (result.errcode == 0) {
+    const data = get(result, 'data.data', {})
+    if (Object.keys(data).length > 1) {
+      // 因为默认会带上channel_id,所以只有key大于2的时候才是有数据
+      viewData.value = data
+    }
+  }
+}
+import { useRoute } from 'vue-router'
+const route = useRoute()
+/* 初始化 */
+onMounted(() => {
+  const id: any = get(route, 'query.tag')
+  if (!id) {
+    toSearch()
+    return
+  }
+  tabActive.value = `${id}`
+  toSearch()
+})
+</script>
+
+<style scoped lang="scss">
+.main {
+  padding: 0 17%;
+
+  .info {
+    .tabs {
+      display: flex;
+      margin: 0 0 50px 0;
+
+      .tabList {
+        text-align: center;
+        color: rgb(102, 102, 102);
+        font-family: '黑体';
+        font-size: 18px;
+        font-weight: 500;
+        line-height: 26px;
+        letter-spacing: 0px;
+        border-bottom: 4px solid transparent;
+      }
+
+      .tabList:hover {
+        cursor: pointer;
+        color: rgb(25, 25, 26);
+        border-bottom: 4px solid rgb(21, 134, 255);
+      }
+
+      .tabActiveList {
+        color: rgb(25, 25, 26);
+        border-bottom: 4px solid rgb(21, 134, 255);
+      }
+    }
+
+    .infoList {
+      .list {
+        display: flex;
+        border-bottom: 1px solid rgb(217, 217, 217);
+        padding: 30px 0;
+
+        .title {
+          color: rgb(25, 25, 26);
+          font-family: '黑体';
+          font-size: 24px;
+          font-weight: 500;
+          line-height: 35px;
+          letter-spacing: 0px;
+          text-align: left;
+        }
+
+        .date {
+          color: rgb(25, 25, 26);
+          font-family: '黑体';
+          font-size: 24px;
+          font-weight: 500;
+          line-height: 32px;
+          letter-spacing: 0px;
+          text-align: left;
+        }
+      }
+
+      .list:last-child {
+        border-bottom: none;
+      }
+    }
+  }
+}
+</style>

src/views/win/messServiceWater.vue

@@ -1,83 +0,0 @@
-<template>
-  <el-row class="introduce">
-    <el-col :span="24" class="bigImage"></el-col>
-    <el-col :span="24" class="info">
-      <el-col :span="24" class="menus">
-        <menusIndex />
-      </el-col>
-      <el-col :span="24" class="bottom">
-        <el-col :span="24" class="zero"> title </el-col>
-        <el-col :span="24" class="zero"> content </el-col>
-      </el-col>
-      <el-col :span="24" class="foot">
-        <foot-index />
-      </el-col>
-    </el-col>
-  </el-row>
-</template>
-<script setup lang="ts">
-// 信息公开-企业服务-用水发展的详情页
-// TODO:需要自己排下版
-/* 菜单 */
-import menusIndex from '../../components/windows/menusIndex.vue'
-/* 底部信息 */
-import footIndex from '../../components/windows/footIndex.vue'
-import { common } from '@/api/api'
-import { get } from 'lodash-es'
-import { ref, onMounted, computed } from 'vue'
-import { useRoute } from 'vue-router'
-const route = useRoute()
-const data = ref()
-onMounted(() => {
-  init()
-})
-const content_id = computed(() => {
-  return get(route, 'query.content_id')
-})
-const init = async () => {
-  const result = await common.content(content_id.value)
-  if (result.errcode == 0) {
-    data.value = get(result, 'data')
-  }
-}
-</script>
-<style scoped lang="scss">
-.introduce {
-  position: relative;
-
-  .bigImage {
-    height: 480px;
-    overflow: hidden;
-    background-image: url('/brief5.png');
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-  }
-
-  .info {
-    position: absolute;
-    top: 0;
-    width: 100%;
-    height: 100vh;
-    overflow: hidden;
-
-    .menus {
-      height: 66px;
-      overflow: hidden;
-    }
-
-    .bottom {
-      height: calc(100vh - 350px);
-      overflow-y: auto;
-      margin: 0 auto;
-
-      .zero {
-        margin: 0 0 40px 0;
-      }
-
-      .top {
-        padding: 0 17%;
-      }
-    }
-  }
-}
-</style>

src/views/win/newsDetail.vue

@@ -6,11 +6,15 @@
         <menusIndex />
       </el-col>
       <el-col :span="24" class="bottom">
-        <el-col :span="24" class="zero"> title </el-col>
-        <el-col :span="24" class="zero"> content </el-col>
-      </el-col>
-      <el-col :span="24" class="foot">
-        <foot-index />
+        <el-col :span="24" class="zero top">
+          <top-index :info="{ title: '集团新闻', enTitle: 'NEWS' }" />
+        </el-col>
+        <el-col :span="24" class="zero"> 
+          <detail></detail>
+        </el-col>
+        <el-col :span="24" class="foot">
+          <foot-index />
+        </el-col>
       </el-col>
     </el-col>
   </el-row>
@@ -21,24 +25,7 @@
 import menusIndex from '../../components/windows/menusIndex.vue'
 /* 底部信息 */
 import footIndex from '../../components/windows/footIndex.vue'
-import { common } from '@/api/api'
-import { get } from 'lodash-es'
-import { ref, onMounted, computed } from 'vue'
-import { useRoute } from 'vue-router'
-const route = useRoute()
-const data = ref()
-onMounted(() => {
-  init()
-})
-const content_id = computed(() => {
-  return get(route, 'query.content_id')
-})
-const init = async () => {
-  const result = await common.content(content_id.value)
-  if (result.errcode == 0) {
-    data.value = get(result, 'data')
-  }
-}
+import detail from './newsParts/detail.vue'
 </script>
 <style scoped lang="scss">
 .introduce {
@@ -47,7 +34,7 @@ const init = async () => {
   .bigImage {
     height: 480px;
     overflow: hidden;
-    background-image: url('/brief5.png');
+    background-image: url('/water1.png');
     background-repeat: no-repeat;
     background-size: 100% 100%;
   }
@@ -65,7 +52,7 @@ const init = async () => {
     }
 
     .bottom {
-      height: calc(100vh - 350px);
+      height: calc(100vh - 66px);
       overflow-y: auto;
       margin: 0 auto;
 

src/views/win/newsParts/listIndex.vue

@@ -145,9 +145,15 @@ const toDetail = (data: object) => {
   const content_id = get(data, 'content_id')
   window.open(`/${import.meta.env.VITE_BASE_URL}/newsDetail?content_id=${content_id}`)
 }
+import { useRoute } from 'vue-router'
+const route = useRoute()
 /* 初始化 */
 onMounted(() => {
-  toSearch()
+  const tag = get(route, 'query.tag')
+  if (tag) {
+    let e: any = { id: tag }
+    tabChange(e)
+  } else toSearch()
 })
 </script>
 <style scoped lang="scss">

src/views/win/messService.vue

@@ -6,40 +6,33 @@
         <menusIndex />
       </el-col>
       <el-col :span="24" class="bottom">
-        <el-col :span="24" class="zero"> title </el-col>
-        <el-col :span="24" class="zero"> content </el-col>
-      </el-col>
-      <el-col :span="24" class="foot">
-        <foot-index />
+        <el-col :span="24" class="zero top">
+          <top-index :info="{ title: '供水信息', enTitle: 'Water supply information' }" />
+        </el-col>
+        <el-col :span="24" class="zero">
+          <detail></detail>
+        </el-col>
+        <el-col :span="24" class="foot">
+          <foot-index />
+        </el-col>
       </el-col>
     </el-col>
   </el-row>
 </template>
 <script setup lang="ts">
-// 信息公开-企业服务-服务的详情页
 // TODO:需要自己排下版
 /* 菜单 */
 import menusIndex from '../../components/windows/menusIndex.vue'
 /* 底部信息 */
 import footIndex from '../../components/windows/footIndex.vue'
-import { common } from '@/api/api'
+import detail from './watersupplyParts/detail.vue'
 import { get } from 'lodash-es'
-import { ref, onMounted, computed } from 'vue'
+import { computed } from 'vue'
 import { useRoute } from 'vue-router'
 const route = useRoute()
-const data = ref()
-onMounted(() => {
-  init()
-})
-const content_id = computed(() => {
-  return get(route, 'query.content_id')
+const type = computed(() => {
+  return get(route, 'query.type')
 })
-const init = async () => {
-  const result = await common.content(content_id.value)
-  if (result.errcode == 0) {
-    data.value = get(result, 'data')
-  }
-}
 </script>
 <style scoped lang="scss">
 .introduce {
@@ -48,7 +41,7 @@ const init = async () => {
   .bigImage {
     height: 480px;
     overflow: hidden;
-    background-image: url('/brief5.png');
+    background-image: url('/water1.png');
     background-repeat: no-repeat;
     background-size: 100% 100%;
   }
@@ -66,7 +59,7 @@ const init = async () => {
     }
 
     .bottom {
-      height: calc(100vh - 350px);
+      height: calc(100vh - 66px);
       overflow-y: auto;
       margin: 0 auto;
 

src/views/win/watersupplyParts/listIndex.vue

@@ -21,7 +21,13 @@
       </el-col>
       <template v-else>
         <el-col :span="24" class="infoList">
-          <el-col :span="24" class="list" v-for="(item, index) in list" :key="index">
+          <el-col
+            :span="24"
+            class="list"
+            v-for="(item, index) in list"
+            :key="index"
+            @click="toDetail(item)"
+          >
             <el-col :span="20" class="title textOver">
               {{ item.title }}
             </el-col>
@@ -44,6 +50,7 @@ import { ref, onMounted } from 'vue'
 import pagesIndex from '../../../components/windows/pagesIndex.vue'
 import onlinePay from './onlinePay.vue'
 import { get } from 'lodash-es'
+import { ElMessageBox } from 'element-plus'
 
 const tabList = ref([
   {
@@ -127,6 +134,12 @@ const dealNowTag = (id: string) => {
   if (!type) return
   if (type == 'toLogin') {
     // TODO:跳转至登录
+    ElMessageBox.alert('请登录', '提示', {
+      confirmButtonText: '确定',
+      callback: () => {
+        // TODO:跳转
+      },
+    })
   } else if (type == 'gov') {
     // 跳转到吉林省政府平台
     window.location.href = 'https://zwfw.jl.gov.cn/jlszwfw/'
@@ -159,6 +172,10 @@ onMounted(() => {
   const id: any = get(route, 'query.tag')
   if (id) dealNowTag(id)
 })
+const toDetail = (data: any) => {
+  const content_id = get(data, 'content_id')
+  window.open(`/${import.meta.env.VITE_BASE_URL}/watersupplyDetail?content_id=${content_id}`)
+}
 </script>
 <style scoped lang="scss">
 .main {