打包与图片修改

.env.dev

@@ -1,4 +0,0 @@
-# 开发环境
-NODE_ENV=production
-# 请求路径
-VITE_BASE_URL='http://localhost:9000'

.env.development

@@ -0,0 +1,6 @@
+# 开发环境
+NODE_ENV=production
+# 请求路径
+VITE_REQUEST_BASE='/warter/front/v2/api'
+
+VITE_BASE_URL="shuitou"

.env.prod

@@ -2,4 +2,6 @@
 NODE_ENV=production
 
 # 请求路径
-VITE_BASE_URL='http://localhost:9000'
+VITE_REQUEST_BASE='/warter/front/v2/api'
+
+VITE_BASE_URL="shuitou"

.gitignore

@@ -6,7 +6,7 @@ yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
-
+shuitou
 node_modules
 .DS_Store
 dist

auto-imports.d.ts

@@ -0,0 +1,10 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
+// biome-ignore lint: disable
+export {}
+declare global {
+
+}

components.d.ts

@@ -0,0 +1,36 @@
+/* eslint-disable */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+export {}
+
+/* prettier-ignore */
+declare module 'vue' {
+  export interface GlobalComponents {
+    DividerIndex: typeof import('./src/components/windows/dividerIndex.vue')['default']
+    ElButton: typeof import('element-plus/es')['ElButton']
+    ElCol: typeof import('element-plus/es')['ElCol']
+    ElForm: typeof import('element-plus/es')['ElForm']
+    ElFormItem: typeof import('element-plus/es')['ElFormItem']
+    ElIcon: typeof import('element-plus/es')['ElIcon']
+    ElImage: typeof import('element-plus/es')['ElImage']
+    ElInput: typeof import('element-plus/es')['ElInput']
+    ElLink: typeof import('element-plus/es')['ElLink']
+    ElMenu: typeof import('element-plus/es')['ElMenu']
+    ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
+    ElPagination: typeof import('element-plus/es')['ElPagination']
+    ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
+    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
+    ElRow: typeof import('element-plus/es')['ElRow']
+    ElTable: typeof import('element-plus/es')['ElTable']
+    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
+    ElTabPane: typeof import('element-plus/es')['ElTabPane']
+    ElTabs: typeof import('element-plus/es')['ElTabs']
+    FootIndex: typeof import('./src/components/windows/footIndex.vue')['default']
+    MenusIndex: typeof import('./src/components/windows/menusIndex.vue')['default']
+    PagesIndex: typeof import('./src/components/windows/pagesIndex.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    TopIndex: typeof import('./src/components/windows/topIndex.vue')['default']
+  }
+}

package.json

@@ -38,6 +38,8 @@
     "npm-run-all2": "^7.0.1",
     "prettier": "^3.3.3",
     "typescript": "~5.6.3",
+    "unplugin-auto-import": "^19.0.0",
+    "unplugin-vue-components": "^28.0.0",
     "vite": "^6.0.1",
     "vite-plugin-vue-devtools": "^7.6.5",
     "vue-tsc": "^2.1.10"

src/api/api.ts

@@ -0,0 +1,230 @@
+import { AxiosWrapper } from './axios-wrapper.js'
+const axios = new AxiosWrapper();
+/**common */
+const common = {
+  channel: async (id: any) => {
+    const result = await axios.$get(`/common/channel/${id}`)
+    return result
+  },
+  content: async (id: any) => {
+    const result = await axios.$get(`/common/content/${id}`)
+    return result
+  }
+}
+/**首页模块 */
+const index = {
+  /**集团介绍 */
+  jtjs: async () => {
+    const res = await axios.$get(`/home/jtjs`)
+    return res;
+  },
+  /**集团新闻 */
+  jtxw: async () => {
+    const res = await axios.$get(`/home/jtxw`)
+    return res;
+  }
+}
+/**集团介绍模块 */
+const jtjs = {
+  /**集团介绍 */
+  jtjs: async () => {
+    const res = await axios.$get(`/jtjs/jtjs`)
+    return res;
+  },
+  /**机构设置 */
+  jgsz: async () => {
+    const res = await axios.$get(`/jtjs/jgsz`)
+    return res;
+  },
+  /**公司介绍 */
+  gsjs: async () => {
+    const res = await axios.$get(`/jtjs/gsjs`)
+    return res;
+  },
+  /**三产风貌 */
+  scfm: async () => {
+    const res = await axios.$get(`/jtjs/scfm`)
+    return res;
+  },
+  /**三产风貌详情 */
+  scfmDetail: async (channel_id: string) => {
+    const res = await axios.$get(`/jtjs/scfm/${channel_id}`)
+    return res;
+  },
+}
+/**集团新闻模块 */
+const jtxw = {
+  /**列表查询 type:党建天地:djtd; 政策法规:zcfg; 招标采购:zbcg; 集团要闻: jtyw */
+  query: async (type: string, skip = 0, limit = 4) => {
+    const res = await axios.$get(`/jtxw/list/${type}`, { skip, limit })
+    return res;
+  },
+  /**详情查询 */
+  fetch: async (content_id: string) => {
+    const res = await axios.$get(`/jtxw/detail/${content_id}`)
+    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;
+    },
+  },
+}
+/**民意征集模块 */
+const myzj = {
+  rdhy: async () => {
+    const res = await axios.$get(`/myzj/list/rdhy`)
+    return res;
+  },
+  rdhyDetail: async (content_id: string) => {
+    const res = await axios.$get(`/myzj/detail/${content_id}`)
+    return res;
+  },
+}
+/**供水信息模块 */
+const gsxx = {
+  /**
+   * 列表查询 type: 
+   * 水务公告:swggz; 
+   * 水质报告:szbgz; 
+   * 停水信息:tsxxz; 
+   * 管网压力: gwylz;
+   * 采购价格信息发布: cgjgxxgbz 
+   */
+  query: async (type: string, skip = 0, limit = 4) => {
+    const res = await axios.$get(`/gsxx/list/${type}`, { skip, limit })
+    return res;
+  },
+  /**详情查询 */
+  fetch: async (content_id: string) => {
+    const res = await axios.$get(`/gsxx/detail/${content_id}`)
+    return res;
+  },
+}
+/**资质荣誉 */
+const zjsw = {
+  /**资质荣誉详情: type: 
+   * 客服中心: zjswkfzx; 
+   * 水务集团: zjswswjt; 
+   * 信息中心: zjswxxzx; 
+   * 党委工作部: zjswdwgzb; 
+   * 朝阳分公司: zjswcyfgs;
+   * 第一净水厂: zjswdyjsc; 
+   * 第二净水厂: zjswdejsc
+   */
+  fetch: async (type: string) => {
+    const res = await axios.$get(`/zjsw/${type}`)
+    return res;
+  }
+}
+
+export { common, index, jtjs, jtxw, xxgk, myzj, gsxx, zjsw }

src/api/axios-wrapper.ts

@@ -0,0 +1,147 @@
+/* eslint-disable no-console */
+/* eslint-disable no-param-reassign */
+
+import { get, isObject } from 'lodash-es';
+import Axios from 'axios';
+import type { IOptionsType, IQueryType, IRequestResult } from './types.util';
+
+const isNullOrUndefined = (val: any) => {
+  return val === null || val === undefined;
+};
+let currentRequests = 0;
+
+// // 参数类型设置
+// type valueType = string | number | object | boolean | Array<any>;
+// type queryType = string | number | boolean;
+
+// export interface IQueryType {
+//   [props: string]: queryType;
+// }
+// export interface IOptionsType {
+//   [props: string]: valueType;
+// }
+
+// export interface IRequestResult {
+//   errcode: string | number;
+//   errmsg: string | number;
+//   details?: string;
+//   [props: string]: any;
+// }
+
+export class AxiosWrapper {
+  constructor({ baseUrl = import.meta.env.VITE_REQUEST_BASE, unwrap = true } = {}) {
+    this.baseUrl = baseUrl;
+    this.unwrap = unwrap;
+  }
+  baseUrl: string;
+  unwrap: boolean;
+
+  // 替换uri中的参数变量
+  static merge(uri: string, query: IQueryType) {
+    if (!uri.includes(':')) {
+      return uri;
+    }
+    const keys = [];
+    const regexp = /\/:([a-z0-9_]+)/gi;
+    let res;
+    // eslint-disable-next-line no-cond-assign
+    while ((res = regexp.exec(uri)) != null) {
+      keys.push(res[1]);
+    }
+    keys.forEach((key) => {
+      const val = get(query, key);
+      if (!isNullOrUndefined(val)) {
+        uri = uri.replace(`:${key}`, `${val}`);
+      }
+    });
+    return uri;
+  }
+
+  $get(uri: string, query?: IQueryType, options?: IOptionsType) {
+    return this.$request(uri, undefined, query, options);
+  }
+
+  $post(uri: string, data: object = {}, query?: IQueryType, options?: IOptionsType) {
+    return this.$request(uri, data, query, options);
+  }
+  $delete(uri: string, data: object = {}, query?: IQueryType, options: IOptionsType = {}) {
+    options = { ...options, method: 'delete' };
+    return this.$request(uri, data, query, options);
+  }
+  async $request(uri: string, data?: object, query?: IQueryType, options?: IOptionsType) {
+    if (query && isObject(query)) {
+      const keys = Object.keys(query);
+      for (const key of keys) {
+        const val = get(query, key);
+        if (val === '') {
+          delete query[key];
+        }
+      }
+    }
+    if (isObject(query) && isObject(options)) {
+      options = { ...options, params: query, method: 'get' };
+    } else if (isObject(query) && !query.params) {
+      options = { params: query };
+    } else if (isObject(query) && query.params) {
+      options = query;
+    }
+    if (!options) options = {};
+    const params = get(options, 'params');
+    const url = AxiosWrapper.merge(uri, params as IQueryType);
+    currentRequests += 1;
+    // Indicator.open({
+    //   spinnerType: 'fading-circle',
+    // });
+    try {
+      let returnData: any;
+      const axios = Axios.create({
+        baseURL: this.baseUrl
+      });
+      // if (util.token && util.token !== null) axios.defaults.headers.common.Authorization = util.token;
+      const token = localStorage.getItem('token');
+      const apiToken = localStorage.getItem('apiToken');
+      if (token) axios.defaults.headers.common['token'] = token;
+      if (apiToken) axios.defaults.headers.common['api-token'] = apiToken;
+      const res = await axios.request({
+        method: isNullOrUndefined(data) ? 'get' : 'post',
+        url,
+        data,
+        responseType: 'json',
+        ...options
+      });
+      const returnRes: IRequestResult = res.data;
+      const { errcode, errmsg, details } = returnRes;
+      if (errcode) {
+        console.warn(`[${uri}] fail: ${errcode}-${errmsg} ${details}`);
+        return returnRes;
+      }
+      // unwrap data
+      if (this.unwrap) {
+        returnData = returnRes;
+      }
+      // 处理apiToken
+      const { apiToken: at, ...others } = returnData;
+      if (at) localStorage.setItem('apiToken', at);
+      return others;
+    } catch (err: any) {
+      let errmsg = '接口请求失败，请稍后重试';
+      if (err.response) {
+        const { status } = err.response;
+        if (status === 401) errmsg = '用户认证失败，请重新登录';
+        if (status === 403) errmsg = '当前用户不允许执行该操作';
+      }
+      console.error(
+        `[AxiosWrapper] 接口请求失败: ${err.config && err.config.url} - 
+        ${err.message}`
+      );
+      return { errcode: -1, errmsg, details: err.message };
+    } finally {
+      /* eslint-disable */
+      currentRequests -= 1;
+      if (currentRequests <= 0) {
+        currentRequests = 0;
+        // Indicator.close();
+      }
+    }
+  }
+}

src/api/types.util.ts

@@ -0,0 +1,29 @@
+// 参数类型设置
+type valueType = string | number | Object | boolean | Array<any>;
+type queryType = string | number | boolean;
+
+export interface IQueryType {
+  [props: string]: queryType;
+}
+export interface IOptionsType {
+  [props: string]: valueType;
+}
+
+export interface IRequestResult {
+  errcode: string | number;
+  errmsg: string | number;
+  details?: string;
+  [props: string]: any;
+}
+export interface IQueryResult {
+  errcode?: string | number;
+  errmsg?: string | number;
+  data: valueType;
+  total: number;
+}
+
+export interface IQueryParams {
+  skip?: number;
+  limit?: number;
+  [props: string]: any;
+}

src/components/windows/menusIndex.vue

@@ -35,7 +35,7 @@ import { Search } from '@element-plus/icons-vue'
 import { useRouter } from 'vue-router'
 const router = useRouter();
 
-const logoUrl = ref('/logo.png')
+const logoUrl = ref('logo.png')
 const activeIndex = ref('/')
 
 const value = ref('')

src/router/index.ts

@@ -2,7 +2,7 @@ import { createRouter, createWebHistory } from 'vue-router'
 import { winRouter } from './modules/winRouter'
 
 const router = createRouter({
-  history: createWebHistory(import.meta.env.BASE_URL),
+  history: createWebHistory(import.meta.env.VITE_BASE_URL),
   routes: [
     {
       path: '/',

src/router/modules/winRouter.ts

@@ -7,6 +7,14 @@ export const winRouter = [
       title: '集团介绍',
     },
   },
+  {
+    path: '/introduceDetail',
+    component: () => import('../../views/win/introduceDetail.vue'),
+    name: 'introduceDetail',
+    meta: {
+      title: '集团介绍',
+    },
+  },
   {
     path: '/newsIndex',
     component: () => import('../../views/win/newsIndex.vue'),

src/views/win/introduceDetail.vue

@@ -0,0 +1,81 @@
+<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">
+/* 菜单 */
+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 channel_id = computed(() => {
+  return get(route, 'query.channel_id')
+})
+const init = async () => {
+  const result = await common.channel(channel_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/introduceParts/briefIndex.vue

@@ -1,73 +1,87 @@
 <template>
-      <el-row class="main animate__animated animate__backInLeft">
-            <el-col :span="24" class="info">
-                  <el-col :span="24" class="title">长春水投集团简介</el-col>
-                  <el-col :span="24" class="info1">
-                        <p>长春水务投资发展集团有限公司成立于2021年11月8日，经市政府批准，由原长春水务集团改组组建，专业从事水务投资、建设、运营的大型国有独资企业。注册资本30.2亿元。
-                              办公地址：吉林省长春市南关区芳草街542号。主要负责主城区自来水生产和供应。</p>
-                        <p>集团总部设立11个管理部门，下设1个分公司，拥有3家全资子公司，分别为长春水务集团自来水有限公司、长春水务集团源水有限责任公司、长春市二次供水有限责任公司。
-                              集团经营范围：一般项目:以自有资金从事投资活动;自有资金投资的资产管理服务;企业总部管理;污水处理及其再生利用;市政设施管理。</p>
-                        <p>许可项目：自来水生产与供应;检验检测服务;建设工程施工。</p>
-                        <p>客户服务中心：主要负责用水咨询、客户投诉、供水报修等业务。</p>
-                        <p>地址：长春市南关区盛世大路814号。</p>
-                        <p>服务电话：89812345。</p>
-                  </el-col>
-                  <el-col :span="24" class="imgs">
-                        <el-image class="images" :src="brief5"></el-image>
-
-                  </el-col>
-            </el-col>
-      </el-row>
+  <el-row class="main animate__animated animate__backInLeft">
+    <el-col :span="24" class="info">
+      <el-col :span="24" class="title">{{ data.title }}</el-col>
+      <el-col :span="24" class="info1" v-html="data.txt"> </el-col>
+      <el-col :span="24" class="imgs">
+        <el-image class="images" :src="brief5"></el-image>
+      </el-col>
+    </el-col>
+  </el-row>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-const brief5 = ref('/brief7.png')
-
+import { ref, onMounted } from 'vue'
+import { jtjs } from '@/api/api'
+const brief5 = ref('brief7.png')
+const data = ref({
+  title: '长春水投集团简介',
+  txt: `<p>
+          长春水务投资发展集团有限公司成立于2021年11月8日，经市政府批准，由原长春水务集团改组组建，专业从事水务投资、建设、运营的大型国有独资企业。注册资本30.2亿元。
+          办公地址：吉林省长春市南关区芳草街542号。主要负责主城区自来水生产和供应。
+        </p>
+        <p>
+          集团总部设立11个管理部门，下设1个分公司，拥有3家全资子公司，分别为长春水务集团自来水有限公司、长春水务集团源水有限责任公司、长春市二次供水有限责任公司。
+          集团经营范围：一般项目:以自有资金从事投资活动;自有资金投资的资产管理服务;企业总部管理;污水处理及其再生利用;市政设施管理。
+        </p>
+        <p>许可项目：自来水生产与供应;检验检测服务;建设工程施工。</p>
+        <p>客户服务中心：主要负责用水咨询、客户投诉、供水报修等业务。</p>
+        <p>地址：长春市南关区盛世大路814号。</p>
+        <p>服务电话：89812345。</p>`,
+})
+onMounted(() => {
+  init()
+})
+const init = async () => {
+  const result = await jtjs.jtjs()
+  if (result.errcode == 0) {
+    if (result.data && Object.keys(result.data).length > 0) data.value = result.data
+  }
+}
 </script>
 <style scoped lang="scss">
 .main {
-      padding: 0 17%;
-      height: 60vh;
-      overflow: hidden;
+  padding: 0 17%;
+  height: 60vh;
+  overflow: hidden;
 
-      .info {
-            position: relative;
+  .info {
+    position: relative;
 
-            .title {
-                  color: rgb(25, 25, 26);
-                  font-family: '黑体';
-                  font-size: 32px;
-                  font-weight: 700;
-                  line-height: 46px;
-                  letter-spacing: 2px;
-                  text-align: center;
-                  margin: 0 0 30px 0;
-            }
+    .title {
+      color: rgb(25, 25, 26);
+      font-family: '黑体';
+      font-size: 32px;
+      font-weight: 700;
+      line-height: 46px;
+      letter-spacing: 2px;
+      text-align: center;
+      margin: 0 0 30px 0;
+    }
 
-            .info1 {
-                  color: rgb(25, 25, 26);
-                  font-family: '黑体';
-                  font-size: 16px;
-                  font-weight: 400;
-                  line-height: 32px;
-                  letter-spacing: 0px;
-                  text-align: center;
-                  position: absolute;
-                  z-index: 2;
-            }
+    .info1 {
+      color: rgb(25, 25, 26);
+      font-family: '黑体';
+      font-size: 16px;
+      font-weight: 400;
+      line-height: 32px;
+      letter-spacing: 0px;
+      text-align: center;
+      position: absolute;
+      z-index: 2;
+    }
 
-            .imgs {
-                  position: absolute;
-                  width: 100%;
-                  bottom: -1%;
-                  z-index: 1;
+    .imgs {
+      position: absolute;
+      width: 100%;
+      bottom: -1%;
+      z-index: 1;
 
-                  .images {
-                        width: 100%;
-                        height: 100%;
-                  }
-            }
+      .images {
+        width: 100%;
+        height: 100%;
       }
+    }
+  }
 }
 </style>

src/views/win/introduceParts/fengmaoIndex.vue

@@ -1,88 +1,94 @@
 <template>
-      <el-row class="main animate__animated animate__backInRight">
-            <el-col :span="24" class="top">
-                  <dividerIndex :info="{ title: '三产风貌', enTitle: 'style and features' }" />
-            </el-col>
-            <el-col :span="24" class="info">
-                  <el-col :span="6" class="list" v-for="item in list" :key="item.id">
-                        <el-col class="imgs">
-                              <el-image class="images" :src="item.url"></el-image>
-                        </el-col>
-                        <el-col :span="24" class="title">
-                              {{ item.title }}
-                        </el-col>
-                  </el-col>
-            </el-col>
-      </el-row>
+  <el-row class="main animate__animated animate__backInRight">
+    <el-col :span="24" class="top">
+      <dividerIndex :info="{ title: '三产风貌', enTitle: 'style and features' }" />
+    </el-col>
+    <el-col :span="24" class="info">
+      <el-col :span="6" class="list" v-for="item in list" @click="toOpen(item.path)">
+        <el-col class="imgs">
+          <el-image class="images" :src="item.url"></el-image>
+        </el-col>
+        <el-col :span="24" class="title">
+          {{ item.title }}
+        </el-col>
+      </el-col>
+    </el-col>
+  </el-row>
 </template>
 
 <script setup lang="ts">
 // 基础
-import { ref } from 'vue';
+import { ref } from 'vue'
 import dividerIndex from '../../../components/windows/dividerIndex.vue'
-
+// TODO: 修改跳转详情页地址
 const list = ref([
-      {
-            url: '/fengmao1.png',
-            title: '长春市给水工程公司'
-      },
-      {
-            url: '/fengmao2.png',
-            title: '长春自来水公司水表厂'
-      },
-      {
-            url: '/fengmao3.png',
-            title: '长春市鸿浩建筑安装工程有限公司'
-      },
-      {
-            url: '/fengmao4.png',
-            title: '长春市鸿源机电设备安装有限公司'
-      }
+  {
+    url: 'fengmao1.png',
+    title: '长春市给水工程公司',
+    path: '/introduceDetail?channel_id=182',
+  },
+  {
+    url: 'fengmao2.png',
+    title: '长春自来水公司水表厂',
+    path: '/introduceDetail?channel_id=183',
+  },
+  {
+    url: 'fengmao3.png',
+    title: '长春市鸿浩建筑安装工程有限公司',
+    path: '/introduceDetail?channel_id=184',
+  },
+  {
+    url: 'fengmao4.png',
+    title: '长春市鸿源机电设备安装有限公司',
+    path: '/introduceDetail?channel_id=185',
+  },
 ])
+const toOpen = (path: string) => {
+  window.open(path)
+}
 </script>
 <style scoped lang="scss">
 .main {
-      padding: 0 17%;
+  padding: 0 17%;
 
-      .top {
-            margin: 0 0 20px 0;
-      }
-
-      .info {
-            display: flex;
-            gap: 20px;
+  .top {
+    margin: 0 0 20px 0;
+  }
 
-            .list {
-                  max-width: 23.8%;
-                  border-radius: 5px;
-                  box-shadow: 0 0 5px #cccccc;
+  .info {
+    display: flex;
+    gap: 20px;
 
-                  .imgs {
-                        border-radius: 5px;
-                        height: 226px;
-                        overflow: hidden;
+    .list {
+      max-width: 23.8%;
+      border-radius: 5px;
+      box-shadow: 0 0 5px #cccccc;
 
-                        .images {
-                              width: 100%;
-                              height: 226px;
-                              overflow: hidden;
-                              border-radius: 5px;
-                        }
-                  }
+      .imgs {
+        border-radius: 5px;
+        height: 226px;
+        overflow: hidden;
 
-                  .title {
-                        padding: 16px 5px;
-                        text-align: center;
+        .images {
+          width: 100%;
+          height: 226px;
+          overflow: hidden;
+          border-radius: 5px;
+        }
+      }
 
-                        color: rgb(25, 25, 26);
-                        font-family: '黑体';
-                        font-size: 18px;
-                        font-weight: 500;
-                        line-height: 29px;
-                        letter-spacing: 0px;
+      .title {
+        padding: 16px 5px;
+        text-align: center;
 
-                  }
-            }
+        color: rgb(25, 25, 26);
+        font-family: '黑体';
+        font-size: 18px;
+        font-weight: 500;
+        line-height: 29px;
+        letter-spacing: 0px;
       }
+    }
+  }
 }
 </style>

src/views/win/introduceParts/settingIndex.vue

@@ -31,7 +31,7 @@
 </template>
 
 <script setup lang="ts">
-// 基础
+// 基础 这个还没法改呢,数据是在channel_txt里,拿不出来,只能直接写上
 import { ref } from 'vue';
 import dividerIndex from '../../../components/windows/dividerIndex.vue'
 

src/views/win/inwaterParts/honorIndex.vue

@@ -44,39 +44,39 @@ import { ref } from 'vue'
 import dividerIndex from '../../../components/windows/dividerIndex.vue'
 
 
-const left1 = ref('/inwater2.png')
-const right1 = ref('/inwater3.png')
+const left1 = ref('inwater2.png')
+const right1 = ref('inwater3.png')
 
 const list1 = ref([
       {
             title: '客服中心',
-            url: '/inwater6.png'
+            url: 'inwater6.png'
       },
       {
             title: '水务集团',
-            url: '/inwater7.png'
+            url: 'inwater7.png'
       },
       {
             title: '朝阳分公司',
-            url: '/inwater8.png'
+            url: 'inwater8.png'
       }
 ])
 const list2 = ref([
       {
             title: '信息中心',
-            url: '/inwater9.png'
+            url: 'inwater9.png'
       },
       {
             title: '党委工作部',
-            url: '/inwater10.png'
+            url: 'inwater10.png'
       },
       {
             title: '第一净水厂',
-            url: '/inwater11.png'
+            url: 'inwater11.png'
       },
       {
             title: '第二净水厂',
-            url: '/inwater12.png'
+            url: 'inwater12.png'
       }
 ])
 

src/views/win/messParts/commessIndex.vue

@@ -24,35 +24,35 @@ import dividerIndex from '../../../components/windows/dividerIndex.vue'
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const list = ref<any[]>([
   {
-    url: '/commess1.png',
+    url: 'commess1.png',
     title: '机构设置'
   },
   {
-    url: '/commess2.png',
+    url: 'commess2.png',
     title: '政策法规'
   },
   {
-    url: '/commess3.png',
+    url: 'commess3.png',
     title: '排水公司信息公开'
   },
   {
-    url: '/commess4.png',
+    url: 'commess4.png',
     title: '水厂环境信息公开'
   },
   {
-    url: '/commess5.png',
+    url: 'commess5.png',
     title: '行业自律'
   },
   {
-    url: '/commess6.png',
+    url: 'commess6.png',
     title: '长春水务集团2018年政府信息公开'
   },
   {
-    url: '/commess7.png',
+    url: 'commess7.png',
     title: '长春水务集团2019年工作'
   },
   {
-    url: '/commess8.png',
+    url: 'commess8.png',
     title: '智慧水务（互联网+供水服务）'
   }
 ])

src/views/win/messParts/serviceIndex.vue

@@ -24,43 +24,43 @@ import dividerIndex from '../../../components/windows/dividerIndex.vue'
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const list = ref<any[]>([
       {
-            url: '/mess1.png',
+            url: 'mess1.png',
             title: '用水发展'
       },
       {
-            url: '/mess2.png',
+            url: 'mess2.png',
             title: '服务信息'
       },
       {
-            url: '/mess3.png',
+            url: 'mess3.png',
             title: '服务项目'
       },
       {
-            url: '/mess4.png',
+            url: 'mess4.png',
             title: '服务收费'
       },
       {
-            url: '/mess5.png',
+            url: 'mess5.png',
             title: '服务监督'
       },
       {
-            url: '/mess6.png',
+            url: 'mess6.png',
             title: '应急服务预案'
       },
       {
-            url: '/mess7.png',
+            url: 'mess7.png',
             title: '决策信息公开'
       },
       {
-            url: '/mess8.png',
+            url: 'mess8.png',
             title: '重要政策落实情况'
       },
       {
-            url: '/mess9.png',
+            url: 'mess9.png',
             title: '企业生产经营情况'
       },
       {
-            url: '/mess10.png',
+            url: 'mess10.png',
             title: '企业与相对人的争议解决方式'
       }
 ])

src/views/win/newsParts/listIndex.vue

@@ -74,28 +74,28 @@ const list = ref<any[]>([
             title: '集团召开2021年度安全生产委员会第一次全体（扩大）视频会议',
             brief: '1月29日，集团召开2021年度安全生产委员会第一次全体（扩大）视频会议，会议由集团总经理王爽主持。会上，集团副总经理于懿通报了2020年度安全生产工作情况，安排部署下阶段重点工作。集团安保部副部长张凯传达国家、省、市...',
             date: '2024-12-24',
-            url: '/news2.png'
+            url: 'news2.png'
       },
       {
             id: '2',
             title: '集团召开2021年度安全生产委员会第一次全体（扩大）视频会议',
             brief: '1月29日，集团召开2021年度安全生产委员会第一次全体（扩大）视频会议，会议由集团总经理王爽主持。会上，集团副总经理于懿通报了2020年度安全生产工作情况，安排部署下阶段重点工作。集团安保部副部长张凯传达国家、省、市...',
             date: '2024-12-24',
-            url: '/news3.png'
+            url: 'news3.png'
       },
       {
             id: '3',
             title: '集团召开2021年度安全生产委员会第一次全体（扩大）视频会议',
             brief: '1月29日，集团召开2021年度安全生产委员会第一次全体（扩大）视频会议，会议由集团总经理王爽主持。会上，集团副总经理于懿通报了2020年度安全生产工作情况，安排部署下阶段重点工作。集团安保部副部长张凯传达国家、省、市...',
             date: '2024-12-24',
-            url: '/news4.png'
+            url: 'news4.png'
       },
       {
             id: '4',
             title: '集团召开2021年度安全生产委员会第一次全体（扩大）视频会议',
             brief: '1月29日，集团召开2021年度安全生产委员会第一次全体（扩大）视频会议，会议由集团总经理王爽主持。会上，集团副总经理于懿通报了2020年度安全生产工作情况，安排部署下阶段重点工作。集团安保部副部长张凯传达国家、省、市...',
             date: '2024-12-24',
-            url: '/news2.png'
+            url: 'news2.png'
       }
 ])
 const total = ref(40)

src/views/win/popularwillParts/respondIndex.vue

@@ -45,7 +45,7 @@ const list = ref([
             person: '作者',
             orgin: '本站编辑',
             showNum: '2',
-            url: '/poll1.png'
+            url: 'poll1.png'
       },
       {
             id: '1',
@@ -55,7 +55,7 @@ const list = ref([
             person: '作者',
             orgin: '本站编辑',
             showNum: '2',
-            url: '/poll1.png'
+            url: 'poll1.png'
 
       }
 ])

src/views/win/popularwillParts/suggestionIndex.vue

@@ -21,7 +21,7 @@ import { ref } from "vue";
 /* 分页 */
 import pagesIndex from '../../../components/windows/pagesIndex.vue'
 
-const noData = ref('/noData.png')
+const noData = ref('noData.png')
 
 /* 列表 */
 const list = ref([])

src/views/winParts/conductingBusiness.vue

@@ -1,97 +1,104 @@
 <template>
-      <el-row class="conductingBusiness animate__animated animate__backInRight">
-            <el-col :span="24" class="top">
-                  <dividerIndex :info="{ title: '营商环境', enTitle: 'GROUP INTRODUCTION' }" />
-            </el-col>
-            <el-col :span="24" class="bottom">
-                  <el-col :span="8" class="list" v-for="item in list" :key="item">
-                        <el-col :span="24" class="img">
-                              <el-image class="images" :src="item.url"></el-image>
-                        </el-col>
-                        <el-col :span="24" class="title">{{ item.title }}</el-col>
-                  </el-col>
-            </el-col>
-      </el-row>
+  <el-row class="conductingBusiness animate__animated animate__backInRight">
+    <el-col :span="24" class="top">
+      <dividerIndex :info="{ title: '营商环境', enTitle: 'GROUP INTRODUCTION' }" />
+    </el-col>
+    <el-col :span="24" class="bottom">
+      <el-col :span="8" class="list" v-for="item in list" :key="item" @click="toOpen(item.path)">
+        <el-col :span="24" class="img">
+          <el-image class="images" :src="item.url"></el-image>
+        </el-col>
+        <el-col :span="24" class="title">{{ item.title }}</el-col>
+      </el-col>
+    </el-col>
+  </el-row>
 </template>
 
 <script setup lang="ts">
 defineOptions({ name: 'conductingBusiness' })
 // 基础
-import { ref } from 'vue';
+import { ref } from 'vue'
 import dividerIndex from '../../components/windows/dividerIndex.vue'
 
 /* 列表 */
 const list = ref([
-      {
-            title: '服务信息',
-            url: '/conducting1.png'
-      },
-      {
-            title: '获得用水',
-            url: '/conducting2.png'
-      },
-      {
-            title: '新区营商环境',
-            url: '/conducting3.png'
-      },
-      {
-            title: '智慧水务',
-            url: '/conducting4.png'
-      },
-      {
-            title: '客户服务',
-            url: '/conducting5.png'
-      },
-      {
-            title: '用水常识',
-            url: '/conducting6.png'
-      }
+  {
+    title: '服务信息',
+    url: 'conducting1.png',
+    path:'/'
+  },
+  {
+    title: '获得用水',
+    url: 'conducting2.png',
+    path:'/'
+  },
+  {
+    title: '新区营商环境',
+    url: 'conducting3.png',
+    path:'/'
+  },
+  {
+    title: '智慧水务',
+    url: 'conducting4.png',
+    path:'/'
+  },
+  {
+    title: '客户服务',
+    url: 'conducting5.png',
+    path:'/'
+  },
+  {
+    title: '用水常识',
+    url: 'conducting6.png',
+    path:'/'
+  },
 ])
-
+/**打开对应的页面 */
+const toOpen = (path: string) => {
+  window.open(path)
+}
 </script>
 <style scoped lang="scss">
 .conductingBusiness {
-      .top {
-            margin: 0 0 20px 0;
-      }
+  .top {
+    margin: 0 0 20px 0;
+  }
 
-      .bottom {
-            display: flex;
-            flex-wrap: wrap;
-            align-items: center;
-            justify-content: space-around;
-            gap: 10px;
+  .bottom {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-around;
+    gap: 10px;
 
-            .list {
-                  position: relative;
-                  max-width: 32%;
-                  height: 250px;
-                  overflow: hidden;
-                  margin: 0 0 10px 0;
+    .list {
+      position: relative;
+      max-width: 32%;
+      height: 250px;
+      overflow: hidden;
+      margin: 0 0 10px 0;
 
-                  .img {
-
-                        .images {
-                              width: 100%;
-                              height: 250px;
-                              border-radius: 5px;
-                        }
-                  }
-
-                  .title {
-                        position: absolute;
-                        bottom: 30px;
-                        width: 100%;
-                        color: rgb(255, 255, 255);
-                        font-family: '黑体';
-                        font-size: 24px;
-                        font-weight: 500;
-                        line-height: 32px;
-                        letter-spacing: 2px;
-                        text-align: center;
-                  }
+      .img {
+        .images {
+          width: 100%;
+          height: 250px;
+          border-radius: 5px;
+        }
+      }
 
-            }
+      .title {
+        position: absolute;
+        bottom: 30px;
+        width: 100%;
+        color: rgb(255, 255, 255);
+        font-family: '黑体';
+        font-size: 24px;
+        font-weight: 500;
+        line-height: 32px;
+        letter-spacing: 2px;
+        text-align: center;
       }
+    }
+  }
 }
 </style>

src/views/winParts/introduceIndex.vue

@@ -1,165 +1,175 @@
 <template>
-      <el-row class="introduce  animate__animated animate__backInLeft">
-            <el-col :span="24" class="info">
-                  <el-col :span="12" class="left">
-                        <el-col :span="24" class="left1">
-                              <el-col :span="12" class="title">
-                                    <span>集团介绍</span>
-                                    <span></span>
-                              </el-col>
-                              <el-col :span="12" class="enTitle">
-                                    GROUP<br />INTRODUCTION
-                              </el-col>
-                        </el-col>
-                        <el-col :span="24" class="left2">
-                              <p>长春水务投资发展集团有限公司成立于2021年11月8日，经市政府批准，由原长春水务集团改组组建，专业从事水务投资、建设、运营的大型国有独资企业。注册资本30.2亿元。</p>
-                              <p>办公地址:吉林省长春市南关区芳草街542号。主要负责主城区自来水生产和供应。</p>
-                        </el-col>
-                        <el-col :span="24" class="left3">
-                              <el-image class="images" :src="rightIcon"></el-image>
-                        </el-col>
-                  </el-col>
-                  <el-col :span="12" class="right">
-                        <el-image class="images1" :src="images11"></el-image>
-                        <!-- <el-image class="images1" :src="images1"></el-image>
+  <el-row class="introduce animate__animated animate__backInLeft">
+    <el-col :span="24" class="info">
+      <el-col :span="12" class="left">
+        <el-col :span="24" class="left1">
+          <el-col :span="12" class="title">
+            <span>集团介绍</span>
+            <span></span>
+          </el-col>
+          <el-col :span="12" class="enTitle"> GROUP<br />INTRODUCTION </el-col>
+        </el-col>
+        <!-- TODO: 换成接口查询 -->
+        <el-col :span="24" class="left2" v-html="left2Data"> </el-col>
+        <el-col :span="24" class="left3">
+          <el-image class="images" :src="rightIcon" @click="toOpen()"></el-image>
+        </el-col>
+      </el-col>
+      <el-col :span="12" class="right">
+        <el-image class="images1" :src="images11"></el-image>
+        <!-- <el-image class="images1" :src="images1"></el-image>
                      <el-image class="images2" :src="images2"></el-image>
                         <el-image class="images3" :src="images3"></el-image> -->
-                  </el-col>
-            </el-col>
-      </el-row>
+      </el-col>
+    </el-col>
+  </el-row>
 </template>
 
 <script setup lang="ts">
+import { index } from '@/api/api'
+import { get } from 'lodash-es'
 defineOptions({ name: 'introduceIndex' })
 // 基础
-import { ref } from 'vue';
-
-const rightIcon = ref('/right.png')
-const images11 = ref('/brief22.png')
-// const images1 = ref('/brief2.png')
-// const images2 = ref('/brief3.png')
-// const images3 = ref('/brief4.png')
-
-
+import { ref, onMounted } from 'vue'
+const rightIcon = ref('right.png')
+const images11 = ref('brief22.png')
+// const images1 = ref('brief2.png')
+// const images2 = ref('brief3.png')
+// const images3 = ref('brief4.png')
+const left2Data = ref(`<p>
+            长春水务投资发展集团有限公司成立于2021年11月8日，经市政府批准，由原长春水务集团改组组建，专业从事水务投资、建设、运营的大型国有独资企业。注册资本30.2亿元。
+          </p>
+          <p>办公地址:吉林省长春市南关区芳草街542号。主要负责主城区自来水生产和供应。</p>`)
+onMounted(() => {
+  init()
+})
+const init = async () => {
+  const result = await index.jtjs()
+  if (result.errcode == 0) {
+    if (get(result, 'data')) left2Data.value = get(result, 'data')
+  }
+}
+const toOpen = () => {
+  window.open('/introduceIndex')
+}
 </script>
 <style scoped lang="scss">
 .introduce {
-      .info {
-            width: 100%;
-            height: 50vh;
-            overflow: hidden;
-            border-radius: 5px;
-            background-repeat: no-repeat;
-            background-size: 100% 100%;
-            display: flex;
-            background-image: linear-gradient(180.00deg, rgb(255, 255, 255), rgba(255, 255, 255, 0) 50%), linear-gradient(222.51deg, rgba(241, 246, 251, 0.65) 27.683%, rgba(235, 241, 247, 0.34) 81.546%), url('/brief1.png');
-            padding: 50px;
-
-            .left {
-                  padding: 0 30px 0 0;
-                  position: relative;
-
-                  .left1 {
-                        display: flex;
-                        align-items: center;
-                        justify-content: space-between;
-                        margin: 0 0 20px 0;
-
-                        .title {
-                              display: flex;
-                              flex-direction: column;
-
-                              span:first-child {
-                                    color: rgb(25, 25, 26);
-                                    font-family: '黑体';
-                                    font-size: 32px;
-                                    font-weight: 500;
-                                    line-height: 46px;
-                                    letter-spacing: 2px;
-                              }
-
-                              span:last-child {
-                                    display: inline-block;
-                                    width: 100px;
-                                    height: 2px;
-                                    background-color: rgb(21, 134, 255);
-                              }
-                        }
-
-                        .enTitle {
-                              background: linear-gradient(180.00deg, rgba(21, 134, 255, 0.8), rgba(21, 134, 255, 0));
-                              -webkit-background-clip:
-                                    text;
-                              -webkit-text-fill-color:
-                                    transparent;
-                              background-clip:
-                                    text;
-                              text-fill-color:
-                                    transparent;
-                              font-family: OPPO Sans;
-                              font-size: 24px;
-                              font-weight: 400;
-                              line-height: 32px;
-                              letter-spacing: 0px;
-                              text-align: right;
-                              text-transform: uppercase;
-                        }
-                  }
-
-                  .left2 {
-
-                        p {
-                              color: rgb(25, 25, 26);
-                              font-family: '黑体';
-                              font-size: 16px;
-                              font-weight: 400;
-                              line-height: 32px;
-                              letter-spacing: 0px;
-                              text-align: left;
-                        }
-                  }
-
-                  .left3 {
-
-
-                        .images {
-                              position: absolute;
-                              bottom: 30px;
-                              width: 40px;
-                              height: 40px;
-                        }
-                  }
-            }
-
-            .right {
-                  display: flex;
-                  justify-content: end;
-
-                  // .images1 {
-                  //       width: 300px;
-                  //       height: 100%;
-                  //       z-index: 3;
-                  // }
-
-                  // .images2 {
-                  //       width: 300px;
-                  //       height: 90%;
-                  //       position: absolute;
-                  //       left: 110px;
-                  //       top: 20px;
-                  //       z-index: 2;
+  .info {
+    width: 100%;
+    height: 50vh;
+    overflow: hidden;
+    border-radius: 5px;
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    display: flex;
+    background-image: linear-gradient(180deg, rgb(255, 255, 255), rgba(255, 255, 255, 0) 50%),
+      linear-gradient(
+        222.51deg,
+        rgba(241, 246, 251, 0.65) 27.683%,
+        rgba(235, 241, 247, 0.34) 81.546%
+      ),
+      url('/brief1.png');
+    padding: 50px;
+
+    .left {
+      padding: 0 30px 0 0;
+      position: relative;
+
+      .left1 {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin: 0 0 20px 0;
+
+        .title {
+          display: flex;
+          flex-direction: column;
+
+          span:first-child {
+            color: rgb(25, 25, 26);
+            font-family: '黑体';
+            font-size: 32px;
+            font-weight: 500;
+            line-height: 46px;
+            letter-spacing: 2px;
+          }
+
+          span:last-child {
+            display: inline-block;
+            width: 100px;
+            height: 2px;
+            background-color: rgb(21, 134, 255);
+          }
+        }
+
+        .enTitle {
+          background: linear-gradient(180deg, rgba(21, 134, 255, 0.8), rgba(21, 134, 255, 0));
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+          background-clip: text;
+          text-fill-color: transparent;
+          font-family: OPPO Sans;
+          font-size: 24px;
+          font-weight: 400;
+          line-height: 32px;
+          letter-spacing: 0px;
+          text-align: right;
+          text-transform: uppercase;
+        }
+      }
 
-                  // }
+      .left2 {
+        p {
+          color: rgb(25, 25, 26);
+          font-family: '黑体';
+          font-size: 16px;
+          font-weight: 400;
+          line-height: 32px;
+          letter-spacing: 0px;
+          text-align: left;
+        }
+      }
 
-                  // .images3 {
-                  //       width: 300px;
-                  //       height: 80%;
-                  //       position: absolute;
-                  //       left: 220px;
-                  //       top: 40px;
-                  //       z-index: 1;
-                  // }
-            }
+      .left3 {
+        .images {
+          position: absolute;
+          bottom: 30px;
+          width: 40px;
+          height: 40px;
+        }
       }
+    }
+
+    .right {
+      display: flex;
+      justify-content: end;
+
+      // .images1 {
+      //       width: 300px;
+      //       height: 100%;
+      //       z-index: 3;
+      // }
+
+      // .images2 {
+      //       width: 300px;
+      //       height: 90%;
+      //       position: absolute;
+      //       left: 110px;
+      //       top: 20px;
+      //       z-index: 2;
+
+      // }
+
+      // .images3 {
+      //       width: 300px;
+      //       height: 80%;
+      //       position: absolute;
+      //       left: 220px;
+      //       top: 40px;
+      //       z-index: 1;
+      // }
+    }
+  }
 }
 </style>

src/views/winParts/newsIndex.vue

@@ -1,212 +1,245 @@
 <template>
-      <el-row class="news animate__animated animate__backInLeft">
-            <el-col :span="24" class="top">
-                  <dividerIndex :info="{ title: '集团新闻', enTitle: 'GROUP NEWS' }" />
-            </el-col>
-            <el-col :span="24" class="bottom">
-                  <el-col :span="6" class="left">
-                        <el-image class="images" :src="leftUrl"></el-image>
-                  </el-col>
-                  <el-col :span="18" class="right">
-                        <el-tabs v-model="activeName" @tab-click="handleClick">
-                              <el-tab-pane label="党建天地" name="first">
-                                    <el-row class="info  animate__animated animate__backInLeft">
-                                          <el-col :span="24" class="list" v-for="item in list" :key="item">
-                                                <el-col :span="6" class="imgs">
-                                                      <el-image class="images" :src="item.url"></el-image>
-                                                </el-col>
-                                                <el-col :span="18" class="mess">
-                                                      <el-col :span="24" class="title textOver">{{ item.title
-                                                            }}</el-col>
-                                                      <el-col :span="24" class="brief">{{ item.brief }}</el-col>
-                                                      <el-col :span="24" class="date">{{ item.date }}</el-col>
-                                                </el-col>
-                                          </el-col>
-                                    </el-row>
-                              </el-tab-pane>
-                              <el-tab-pane label="政策法规" name="second">
-                                    <el-row class="info  animate__animated animate__backInRight">
-                                          <el-col :span="24" class="list" v-for="item in list" :key="item">
-                                                <el-col :span="6" class="imgs">
-                                                      <el-image class="images" :src="item.url"></el-image>
-                                                </el-col>
-                                                <el-col :span="18" class="mess">
-                                                      <el-col :span="24" class="title textOver">{{ item.title
-                                                            }}</el-col>
-                                                      <el-col :span="24" class="brief">{{ item.brief }}</el-col>
-                                                      <el-col :span="24" class="date">{{ item.date }}</el-col>
-                                                </el-col>
-                                          </el-col>
-                                    </el-row>
-                              </el-tab-pane>
-                              <el-tab-pane label="招标采购" name="third">
-                                    <el-row class="info   animate__animated animate__backInLeft">
-                                          <el-col :span="24" class="list" v-for="item in list" :key="item">
-                                                <el-col :span="6" class="imgs">
-                                                      <el-image class="images" :src="item.url"></el-image>
-                                                </el-col>
-                                                <el-col :span="18" class="mess">
-                                                      <el-col :span="24" class="title textOver">{{ item.title
-                                                            }}</el-col>
-                                                      <el-col :span="24" class="brief">{{ item.brief }}</el-col>
-                                                      <el-col :span="24" class="date">{{ item.date }}</el-col>
-                                                </el-col>
-                                          </el-col>
-                                    </el-row>
-                              </el-tab-pane>
-                              <el-tab-pane label="集团要闻" name="fourth">
-                                    <el-row class="info   animate__animated animate__backInRight">
-                                          <el-col :span="24" class="list" v-for="item in list" :key="item">
-                                                <el-col :span="6" class="imgs">
-                                                      <el-image class="images" :src="item.url"></el-image>
-                                                </el-col>
-                                                <el-col :span="18" class="mess">
-                                                      <el-col :span="24" class="title textOver">{{ item.title
-                                                            }}</el-col>
-                                                      <el-col :span="24" class="brief">{{ item.brief }}</el-col>
-                                                      <el-col :span="24" class="date">{{ item.date }}</el-col>
-                                                </el-col>
-                                          </el-col>
-                                    </el-row>
-                              </el-tab-pane>
-                        </el-tabs>
-                  </el-col>
-            </el-col>
-      </el-row>
+  <el-row class="news animate__animated animate__backInLeft">
+    <el-col :span="24" class="top">
+      <dividerIndex :info="{ title: '集团新闻', enTitle: 'GROUP NEWS' }" />
+    </el-col>
+    <el-col :span="24" class="bottom">
+      <el-col :span="6" class="left">
+        <el-image class="images" :src="leftUrl"></el-image>
+      </el-col>
+      <el-col :span="18" class="right">
+        <el-tabs v-model="activeName" @tab-click="handleClick">
+          <el-tab-pane label="党建天地" name="first">
+            <el-row class="info animate__animated animate__backInLeft">
+              <el-col :span="24" class="list" v-for="item in djtdList" :key="item">
+                <el-col :span="6" class="imgs">
+                  <el-image class="images" :src="getProp(item, 'url')"></el-image>
+                </el-col>
+                <el-col :span="18" class="mess">
+                  <!-- item.ext.title -->
+                  <el-col :span="24" class="title textOver">{{ getProp(item, 'title') }}</el-col>
+                  <!-- item.txt.txt -->
+                  <el-col :span="24" class="brief">{{ getProp(item, 'brief') }}</el-col>
+                  <!-- item.ext.release_date -->
+                  <el-col :span="24" class="date">{{ getProp(item, 'date') }}</el-col>
+                </el-col>
+              </el-col>
+            </el-row>
+          </el-tab-pane>
+          <el-tab-pane label="政策法规" name="second">
+            <el-row class="info animate__animated animate__backInRight">
+              <el-col :span="24" class="list" v-for="item in zcfgList" :key="item">
+                <el-col :span="6" class="imgs">
+                  <el-image class="images" :src="getProp(item, 'url')"></el-image>
+                </el-col>
+                <el-col :span="18" class="mess">
+                  <el-col :span="24" class="title textOver">{{ getProp(item, 'title') }}</el-col>
+                  <el-col :span="24" class="brief">{{ getProp(item, 'brief') }}</el-col>
+                  <el-col :span="24" class="date">{{ getProp(item, 'date') }}</el-col>
+                </el-col>
+              </el-col>
+            </el-row>
+          </el-tab-pane>
+          <el-tab-pane label="招标采购" name="third">
+            <el-row class="info animate__animated animate__backInLeft">
+              <el-col :span="24" class="list" v-for="item in zbcgList" :key="item">
+                <el-col :span="6" class="imgs">
+                  <el-image class="images" :src="getProp(item, 'url')"></el-image>
+                </el-col>
+                <el-col :span="18" class="mess">
+                  <el-col :span="24" class="title textOver">{{ getProp(item, 'title') }}</el-col>
+                  <el-col :span="24" class="brief">{{ getProp(item, 'brief') }}</el-col>
+                  <el-col :span="24" class="date">{{ getProp(item, 'date') }}</el-col>
+                </el-col>
+              </el-col>
+            </el-row>
+          </el-tab-pane>
+          <el-tab-pane label="集团要闻" name="fourth">
+            <el-row class="info animate__animated animate__backInRight">
+              <el-col :span="24" class="list" v-for="item in jtxwList" :key="item">
+                <el-col :span="6" class="imgs">
+                  <el-image class="images" :src="getProp(item, 'url')"></el-image>
+                </el-col>
+                <el-col :span="18" class="mess">
+                  <el-col :span="24" class="title textOver">{{ getProp(item, 'title') }}</el-col>
+                  <el-col :span="24" class="brief">{{ getProp(item, 'brief') }}</el-col>
+                  <el-col :span="24" class="date">{{ getProp(item, 'date') }}</el-col>
+                </el-col>
+              </el-col>
+            </el-row>
+          </el-tab-pane>
+        </el-tabs>
+      </el-col>
+    </el-col>
+  </el-row>
 </template>
 
 <script setup lang="ts">
 defineOptions({ name: 'newsIndex' })
 // 基础
-import { ref } from 'vue';
+import { ref, onMounted } from 'vue'
 import type { TabsPaneContext } from 'element-plus'
+import { index } from '@/api/api'
 
 import dividerIndex from '../../components/windows/dividerIndex.vue'
+import { cloneDeep, get } from 'lodash-es'
 
-const leftUrl = ref('/news1.png')
+const leftUrl = ref('news1.png')
 
 const activeName = ref('first')
 
 const list = ref([
-      {
-            title: '集团召开2021年度安全生产委员会第一次全体(扩大)视频会议集团召开2021年度安全生产委员会第一次全体(扩大)视频会议',
-            url: '/news2.png',
-            brief: '1月29日，集团召开2021年度安全生产委员会第一次全体(扩大)视频会议，会议由集团总经理王爽主持。会上，集团副总经理于懿通1月29日，集团召开2021年度安全生产委员会第一次全体(扩大)视频会议，会议由集团总经理王爽主持。会上，集团副总经理于懿通',
-            date: '2024-12-22'
-      },
-      {
-            title: '集团召开2021年度安全生产委员会第一次全体(扩大)视频会议',
-            url: '/news3.png',
-            brief: '1月29日，集团召开2021年度安全生产委员会第一次全体(扩大)视频会议，会议由集团总经理王爽主持。会上，集团副总经理于懿通1月29日，集团召开2021年度安全生产委员会第一次全体(扩大)视频会议，会议由集团总经理王爽主持。会上，集团副总经理于懿通',
-            date: '2024-12-22'
-      },
-      {
-            title: '集团召开2021年度安全生产委员会第一次全体(扩大)视频会议',
-            url: '/news4.png',
-            brief: '1月29日，集团召开2021年度安全生产委员会第一次全体(扩大)视频会议，会议由集团总经理王爽主持。会上，集团副总经理于懿通1月29日，集团召开2021年度安全生产委员会第一次全体(扩大)视频会议，会议由集团总经理王爽主持。会上，集团副总经理于懿通',
-            date: '2024-12-22'
-      }
+  {
+    title:
+      '集团召开2021年度安全生产委员会第一次全体(扩大)视频会议集团召开2021年度安全生产委员会第一次全体(扩大)视频会议',
+    url: 'news2.png',
+    brief:
+      '1月29日，集团召开2021年度安全生产委员会第一次全体(扩大)视频会议，会议由集团总经理王爽主持。会上，集团副总经理于懿通1月29日，集团召开2021年度安全生产委员会第一次全体(扩大)视频会议，会议由集团总经理王爽主持。会上，集团副总经理于懿通',
+    date: '2024-12-22',
+  },
+  {
+    title: '集团召开2021年度安全生产委员会第一次全体(扩大)视频会议',
+    url: 'news3.png',
+    brief:
+      '1月29日，集团召开2021年度安全生产委员会第一次全体(扩大)视频会议，会议由集团总经理王爽主持。会上，集团副总经理于懿通1月29日，集团召开2021年度安全生产委员会第一次全体(扩大)视频会议，会议由集团总经理王爽主持。会上，集团副总经理于懿通',
+    date: '2024-12-22',
+  },
+  {
+    title: '集团召开2021年度安全生产委员会第一次全体(扩大)视频会议',
+    url: 'news4.png',
+    brief:
+      '1月29日，集团召开2021年度安全生产委员会第一次全体(扩大)视频会议，会议由集团总经理王爽主持。会上，集团副总经理于懿通1月29日，集团召开2021年度安全生产委员会第一次全体(扩大)视频会议，会议由集团总经理王爽主持。会上，集团副总经理于懿通',
+    date: '2024-12-22',
+  },
 ])
+/**党建天地 */
+const djtdList: any = ref([])
+/**政策法规 */
+const zcfgList: any = ref([])
+/**招标采购 */
+const zbcgList: any = ref([])
+/**集团要闻 */
+const jtxwList: any = ref([])
 
 /* 选项卡切换，换数据 */
 const handleClick = (tab: TabsPaneContext, event: Event) => {
-      console.log(tab, event)
+  console.log(tab, event)
+}
+onMounted(() => {
+  djtdList.value = list.value
+  zcfgList.value = list.value
+  zbcgList.value = list.value
+  jtxwList.value = list.value
+  init()
+})
+const init = async () => {
+  const result = await index.jtxw()
+  if (result.errcode == 0) {
+    if (get(result, 'data')) {
+      const allList = get(result, 'data')
+      if (get(allList, 'djtd', []).length > 0) djtdList.value = get(allList, 'djtd', [])
+      if (get(allList, 'zcfg', []).length > 0) zcfgList.value = get(allList, 'zcfg', [])
+      if (get(allList, 'zbcg', []).length > 0) zbcgList.value = get(allList, 'zbcg', [])
+      if (get(allList, 'jtyw', []).length > 0) jtxwList.value = get(allList, 'jtyw', [])
+    }
+  }
+}
+const getProp = (item: object, path: string) => {
+  return get(item, path)
 }
-
 </script>
 <style scoped lang="scss">
 .news {
-      .top {
-            margin: 0 0 20px 0;
-      }
+  .top {
+    margin: 0 0 20px 0;
+  }
 
-      .bottom {
-            display: flex;
-            gap: 10px;
+  .bottom {
+    display: flex;
+    gap: 10px;
 
-            .left {
-                  height: 400px;
+    .left {
+      height: 400px;
 
-                  .images {
-                        width: 100%;
-                        height: 400px;
-                  }
+      .images {
+        width: 100%;
+        height: 400px;
+      }
+    }
+
+    .right {
+      max-width: 74%;
+      height: 400px;
+      overflow: hidden;
+      padding: 0 10px;
+      background-color: #ffffff;
+
+      .info {
+        .list {
+          display: flex;
+          margin: 0 0 10px 0;
+
+          .imgs {
+            .images {
+              width: 100%;
+              height: 106px;
+            }
+          }
+
+          .mess {
+            padding: 0 10px;
+            position: relative;
+
+            .title {
+              color: rgb(25, 25, 26);
+              font-family: '黑体';
+              font-size: 20px;
+              font-weight: 500;
+              line-height: 29px;
+              letter-spacing: 0px;
             }
 
-            .right {
-                  max-width: 74%;
-                  height: 400px;
-                  overflow: hidden;
-                  padding: 0 10px;
-                  background-color: #ffffff;
-
-                  .info {
-                        .list {
-                              display: flex;
-                              margin: 0 0 10px 0;
-
-                              .imgs {
-                                    .images {
-                                          width: 100%;
-                                          height: 106px;
-                                    }
-                              }
-
-                              .mess {
-                                    padding: 0 10px;
-                                    position: relative;
-
-                                    .title {
-                                          color: rgb(25, 25, 26);
-                                          font-family: '黑体';
-                                          font-size: 20px;
-                                          font-weight: 500;
-                                          line-height: 29px;
-                                          letter-spacing: 0px;
-                                    }
-
-                                    .brief {
-                                          color: rgb(102, 102, 102);
-                                          font-family: '黑体';
-                                          font-size: 20px;
-                                          font-weight: 400;
-                                          line-height: 29px;
-                                          letter-spacing: 0px;
-                                          overflow: hidden;
-                                          text-overflow: ellipsis;
-                                          -webkit-line-clamp: 2;
-                                          word-break: break-all;
-                                          display: -webkit-box;
-                                          -webkit-box-orient: vertical;
-
-                                    }
-
-                                    .date {
-                                          position: absolute;
-                                          bottom: 0;
-                                          color: rgb(153, 153, 153);
-                                          font-family: '黑体';
-                                          font-size: 16px;
-                                          font-weight: 500;
-                                          line-height: 23px;
-                                          letter-spacing: 0px;
-                                    }
-                              }
-                        }
-
-                        .list:last-child {
-                              margin: none;
-                        }
-                  }
+            .brief {
+              color: rgb(102, 102, 102);
+              font-family: '黑体';
+              font-size: 20px;
+              font-weight: 400;
+              line-height: 29px;
+              letter-spacing: 0px;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              -webkit-line-clamp: 2;
+              word-break: break-all;
+              display: -webkit-box;
+              -webkit-box-orient: vertical;
             }
+
+            .date {
+              position: absolute;
+              bottom: 0;
+              color: rgb(153, 153, 153);
+              font-family: '黑体';
+              font-size: 16px;
+              font-weight: 500;
+              line-height: 23px;
+              letter-spacing: 0px;
+            }
+          }
+        }
+
+        .list:last-child {
+          margin: none;
+        }
       }
+    }
+  }
 }
 
 ::v-deep(.el-tabs__nav-wrap:after) {
-      background-color: transparent;
+  background-color: transparent;
 }
 
 ::v-deep(.el-tabs__header) {
-      margin: 0 0 10px 0;
+  margin: 0 0 10px 0;
 }
 </style>

src/views/winParts/notesIndex.vue

@@ -1,198 +1,222 @@
 <template>
-      <el-row class="notes animate__animated animate__backInRight">
-            <el-col :span="24" class="info">
-                  <div :class="['list', item.id == active ? 'activeList' : '']" v-for="item in list" :key="item.title"
-                        @click="toChange(item)">
-                        <el-col :span="24" class="imgs">
-                              <el-image class="images" :src="item.url"></el-image>
-                        </el-col>
-                        <el-col class="mess">
-                              <el-col :span="24" class="title">
-                                    <span class="titles">{{ item.title }}</span>
-                                    <span class="borderBottom"></span>
-                              </el-col>
-                              <el-col :span="24" class="other" v-if="item.id == active">
-                                    <p>{{ item.brief1 }}</p>
-                                    <p>{{ item.brief2 }}</p>
-                                    <p>{{ item.brief3 }}</p>
-                              </el-col>
-                        </el-col>
-                  </div>
-            </el-col>
-      </el-row>
+  <el-row class="notes animate__animated animate__backInRight">
+    <el-col :span="24" class="info">
+      <div
+        :class="['list', item.id == active ? 'activeList' : '']"
+        v-for="item in list"
+        :key="item.title"
+        @click="toChange(item)"
+      >
+        <el-col :span="24" class="imgs">
+          <el-image class="images" :src="item.url"></el-image>
+        </el-col>
+        <el-col class="mess">
+          <el-col :span="24" class="title">
+            <span class="titles">{{ item.title }}</span>
+            <span class="borderBottom"></span>
+          </el-col>
+          <el-col :span="24" class="other" v-if="item.id == active">
+            <!-- <p>{{ item.brief1 }}</p>
+            <p>{{ item.brief2 }}</p>
+            <p>{{ item.brief3 }}</p> -->
+          </el-col>
+        </el-col>
+      </div>
+    </el-col>
+  </el-row>
 </template>
 
 <script setup lang="ts">
 defineOptions({ name: 'notesIndex' })
+import { ElMessageBox } from 'element-plus'
+import { get } from 'lodash-es'
 // 基础
-import { ref } from 'vue';
+import { ref } from 'vue'
 
 const active = ref('1')
 const list = ref([
-      {
-            id: '1',
-            title: '水务公告',
-            url: '/notes1.png',
-            brief1: '结果公式20240701',
-            brief2: '暖心供水服务，优化营商环境',
-            brief3: '长春水务集团自来水有限公司2022年--2023年末发行的新增地方政府专项债券资金收支情况表',
-      },
-      {
-            id: '2',
-            title: '水质报告',
-            url: '/notes2.png',
-            brief1: '2024年9月水质报告',
-            brief2: '2024年8月水质信息',
-            brief3: '长春水务集团2024年7月 管网末梢水水质检测数据',
-      },
-      {
-            id: '3',
-            title: '停水信息',
-            url: '/notes3.png',
-            brief1: '2024年11月10日 长春市高新区延时停水通知',
-            brief2: '2024年11月10日 长春市高新区延时停水通知',
-            brief3: '',
-      },
-      {
-            id: '4',
-            title: '管网压力',
-            url: '/notes4.png',
-            brief1: '公示压力数据（1001-1031）',
-            brief2: '公示压力数据（1001-1031）',
-            brief3: '长春市城市供水管网 压力数据监测表2024年8月',
-      },
-      {
-            id: '5',
-            title: '长水e办',
-            url: '/notes5.png',
-            brief1: '涉民入口',
-            brief2: '涉民入口',
-            brief3: '',
-      },
-      {
-            id: '6',
-            title: '网上缴费',
-            url: '/notes6.png',
-            brief1: '业务办理',
-            brief2: '网络缴费',
-            brief3: '操作步骤',
-      }
+  {
+    id: '1',
+    title: '水务公告',
+    url: 'notes1.png',
+    to: '/watersupplyIndex?tag=1',
+    // brief1: '结果公式20240701',
+    // brief2: '暖心供水服务，优化营商环境',
+    // brief3: '长春水务集团自来水有限公司2022年--2023年末发行的新增地方政府专项债券资金收支情况表',
+  },
+  {
+    id: '2',
+    title: '水质报告',
+    url: 'notes2.png',
+    to: '/watersupplyIndex?tag=2',
+    // brief1: '2024年9月水质报告',
+    // brief2: '2024年8月水质信息',
+    // brief3: '长春水务集团2024年7月 管网末梢水水质检测数据',
+  },
+  {
+    id: '3',
+    title: '停水信息',
+    url: 'notes3.png',
+    to: '/watersupplyIndex?tag=3',
+    // brief1: '2024年11月10日 长春市高新区延时停水通知',
+    // brief2: '2024年11月10日 长春市高新区延时停水通知',
+    // brief3: '',
+  },
+  {
+    id: '4',
+    title: '管网压力',
+    url: 'notes4.png',
+    to: '/watersupplyIndex?tag=4',
+    // brief1: '公示压力数据（1001-1031）',
+    // brief2: '公示压力数据（1001-1031）',
+    // brief3: '长春市城市供水管网 压力数据监测表2024年8月',
+  },
+  {
+    id: '5',
+    title: '长水e办',
+    url: 'notes5.png',
+    to: 'login',
+    // brief1: '涉民入口',
+    // brief2: '涉民入口',
+    // brief3: '',
+  },
+  {
+    id: '6',
+    title: '网上缴费',
+    url: 'notes6.png',
+    to: '/watersupplyIndex?tag=6',
+    // brief1: '业务办理',
+    // brief2: '网络缴费',
+    // brief3: '操作步骤',
+  },
 ])
 
 /* 切换 */
 const toChange = (event: { id: string }) => {
-      active.value = event?.id
+  active.value = event?.id
+  const item = list.value.find((f) => f.id == event.id)
+  if (item) {
+    const to = get(item, 'to')
+    if (to == 'login') {
+      // TODO:提示去登录
+      ElMessageBox.alert('请登录', '提示', {
+        confirmButtonText: '确定',
+        callback: () => {
+          // TODO:跳转
+        },
+      })
+    } else {
+      // 新开页面
+      window.open(to)
+    }
+  }
 }
 </script>
 <style scoped lang="scss">
 .notes {
-      .info {
-            display: flex;
-            gap: 10px;
-
-            .list {
-                  width: 15%;
-                  height: 260px;
-                  position: relative;
-
-                  .imgs {
-
-                        .images {
-                              width: 100%;
-                              height: 260px;
-                              border-radius: 10px;
-                        }
-                  }
-
-                  .mess {
-                        position: absolute;
-                        top: 0;
-                        width: 100%;
-                        height: 260px;
-                        border-radius: 10px;
-                        padding: 0 10px;
-
-                        background-color: #ffffff5f;
-
-                        .title {
-                              display: flex;
-                              flex-direction: column;
-                              padding: 20px 0 10px 0;
-
-                              .titles {
-                                    color: rgb(2, 68, 139);
-                                    font-family: '黑体';
-                                    font-size: 24px;
-                                    font-weight: 500;
-                                    line-height: 35px;
-                                    letter-spacing: 0px;
-                              }
-                        }
-
-                        .other {
-                              position: absolute;
-                              bottom: 30px;
-
-                              p {
-                                    color: #ffffff;
-                                    font-size: 12px;
-                                    margin: 0 0 10px 0;
-                              }
-                        }
-
-                  }
-
-            }
-
-            .activeList {
-                  width: 20%;
-                  animation: mymove 1s;
-                  animation-iteration-count: 1;
-
-                  .mess {
-                        background-color: #30A0FF9f;
-
-                        .title {
-
-                              .titles {
-                                    color: rgb(255, 255, 255);
-                                    font-family: '黑体';
-                                    font-size: 24px;
-                                    font-weight: 500;
-                                    line-height: 35px;
-                                    letter-spacing: 2px;
-                                    margin: 0 0 10px 0;
-                              }
-
-                              .borderBottom {
-                                    display: inline-block;
-                                    width: 60px;
-                                    border-bottom: 2px solid #ffffff;
-                              }
-                        }
-
-                        .other {
-                              p {
-                                    color: rgb(255, 255, 255);
-                                    font-family: '黑体';
-                                    font-size: 16px;
-                                    font-weight: 500;
-                                    line-height: 23px;
-                                    letter-spacing: 0px;
-                              }
-                        }
-                  }
-            }
+  .info {
+    display: flex;
+    gap: 10px;
+
+    .list {
+      width: 15%;
+      height: 260px;
+      position: relative;
+
+      .imgs {
+        .images {
+          width: 100%;
+          height: 260px;
+          border-radius: 10px;
+        }
+      }
+
+      .mess {
+        position: absolute;
+        top: 0;
+        width: 100%;
+        height: 260px;
+        border-radius: 10px;
+        padding: 0 10px;
+
+        background-color: #ffffff5f;
+
+        .title {
+          display: flex;
+          flex-direction: column;
+          padding: 20px 0 10px 0;
+
+          .titles {
+            color: rgb(2, 68, 139);
+            font-family: '黑体';
+            font-size: 24px;
+            font-weight: 500;
+            line-height: 35px;
+            letter-spacing: 0px;
+          }
+        }
+
+        .other {
+          position: absolute;
+          bottom: 30px;
+
+          p {
+            color: #ffffff;
+            font-size: 12px;
+            margin: 0 0 10px 0;
+          }
+        }
       }
+    }
+
+    .activeList {
+      width: 20%;
+      animation: mymove 1s;
+      animation-iteration-count: 1;
+
+      .mess {
+        background-color: #30a0ff9f;
+
+        .title {
+          .titles {
+            color: rgb(255, 255, 255);
+            font-family: '黑体';
+            font-size: 24px;
+            font-weight: 500;
+            line-height: 35px;
+            letter-spacing: 2px;
+            margin: 0 0 10px 0;
+          }
+
+          .borderBottom {
+            display: inline-block;
+            width: 60px;
+            border-bottom: 2px solid #ffffff;
+          }
+        }
+
+        .other {
+          p {
+            color: rgb(255, 255, 255);
+            font-family: '黑体';
+            font-size: 16px;
+            font-weight: 500;
+            line-height: 23px;
+            letter-spacing: 0px;
+          }
+        }
+      }
+    }
+  }
 }
 
 @keyframes mymove {
-      from {
-            width: 15%;
-      }
+  from {
+    width: 15%;
+  }
 
-      to {
-            width: 20%;
-      }
+  to {
+    width: 20%;
+  }
 }
 </style>

src/views/winParts/popularWill.vue

@@ -61,19 +61,19 @@ const list = ref([
             type: '1',
             title: '热点回应',
             brief: '供水服务政策法规是为了加强城市供水管理，发展城市供水事业，保障城市生活、生产和其他建设用水而制定的。它包括与制水、供水、排水有关的，由国家、省、地方及行业主管部门发布的法律、法规及政策。',
-            url: '/my1.png'
+            url: 'my1.png'
       },
       {
             type: '2',
             title: '服务咨询',
             brief: '自来水是最基本的民生资源，关系到千家万户，关系到城市发展。为什么停水?水质怎么保障?这些问题受到广泛的关注。那么在自来水的生产供应过程中，都有什么您十分关切的问题呢?水务集团在此进行回应。',
-            url: '/my2.png'
+            url: 'my2.png'
       },
       {
             type: '3',
             title: '满意度调查',
             brief: '水投集团满意度调查是为了了解客户对水投集团提供的服务的满意程度而进行的一项调查。通过该调查，我们希望收集客户对水投集团的服务质量、响应速度、沟通效果等方面的意见和反馈，以便进一步改进和优化我们的服务。',
-            url: '/my3.png'
+            url: 'my3.png'
       }
 ])
 </script>

vite.config.ts

@@ -2,6 +2,9 @@ import { fileURLToPath, URL } from 'node:url'
 
 import { defineConfig, loadEnv } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import AutoImport from 'unplugin-auto-import/vite'
+import Components from 'unplugin-vue-components/vite'
+import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
 
 // https://vite.dev/config/
 export default defineConfig(({ command, mode }) => {
@@ -14,12 +17,21 @@ export default defineConfig(({ command, mode }) => {
     // root:''
     // 基础
     // base:'',
+    base: `/${env.VITE_BASE_URL}`,
     // 模式 development,production
     // mode:'',
     // 定义全局常量
     // define:{},
     // 插件
-    plugins: [vue()],
+    plugins: [
+      vue(),
+      AutoImport({
+        resolvers: [ElementPlusResolver()],
+      }),
+      Components({
+        resolvers: [ElementPlusResolver()],
+      }),
+    ],
     // 普通静态资产，此目录中的文件在dev期间提供，并在build中复制到根目录，并且时钟按原样提供或复制，不进行转换  string,false
     // publicDir: false,
     //保存缓存文件，
@@ -37,14 +49,14 @@ export default defineConfig(({ command, mode }) => {
       // 在服务器启动时自动在浏览器中打开应用程序。当值为字符串时，它将用作 URL 的路径名。如果你想在你喜欢的特定浏览器中打开服务器
       // open:''
       // 服务器
-      // proxy: {
-      // ['/api']: {
-      // target: 'http',
-      // ws: false,
-      // changeOrigin: true,
-      // rewrite: (path) => path.replace(new RegExp(`^/api`), ''),
-      // },
-      // },
+      proxy: {
+        [env.VITE_REQUEST_BASE]: {
+          target: 'http://127.0.0.1:9000',
+          ws: false,
+          changeOrigin: true,
+          // rewrite: (path) => path.replace(new RegExp(`^/api`), ''),
+        },
+      },
       // 为开发服务器配置 CORS。默认情况下，此选项处于启用状态，并允许任何源。
       // cors:false,
       // 指定服务器响应标头
@@ -52,6 +64,7 @@ export default defineConfig(({ command, mode }) => {
     },
     /* 构建选项 */
     build: {
+      outDir: env.VITE_BASE_URL
       // 最终捆绑包的浏览器兼容性目标。默认值是 Vite 特殊值
       // target:'',
       // 预加载