首页，集团介绍，集团新闻，信息公开，供水信息

src/components/windows/dividerIndex.vue

@@ -36,7 +36,7 @@ const info = defineModel('info', {
                   display: inline-block;
                   width: 100%;
                   height: 2px;
-                  background-color: #006CC8;
+                  background-color: rgb(0, 108, 200);
             }
       }
 
@@ -49,13 +49,22 @@ const info = defineModel('info', {
             }
 
             .title {
-                  font-size: 20px;
-                  font-weight: bold;
+                  color: rgb(25, 25, 26);
+                  font-family: '黑体';
+                  font-size: 32px;
+                  font-weight: 500;
+                  line-height: 46px;
+                  letter-spacing: 2px;
             }
 
             .enTitle {
-                  color: #496C8A;
-                  font-weight: bold;
+                  color: rgb(73, 108, 138);
+                  font-family: 'OPPO Sans';
+                  font-size: 20px;
+                  font-weight: 400;
+                  line-height: 26px;
+                  letter-spacing: 2px;
+                  text-transform: uppercase;
             }
       }
 

src/components/windows/footIndex.vue

@@ -6,7 +6,13 @@
                               联系我们
                         </el-col>
                         <el-col :span="12" class="right">
+                              <el-icon>
+                                    <PhoneFilled color="#1C88FE" />
+                              </el-icon>
                               <span>热线电话:89812345</span>
+                              <el-icon>
+                                    <Message color="#1C88FE" />
+                              </el-icon>
                               <span>电子邮箱:changchunwater@163.com</span>
                         </el-col>
                   </el-col>
@@ -30,28 +36,53 @@
 </script>
 <style scoped lang="scss">
 .foot {
-      height: 30vh;
-      background-image: url('/src/assets/fendoubg1.png');
-      background-repeat: no-repeat;
-      background-size: 100% 100%;
+      height: 300px;
+      // background-image: url('/src/assets/fendoubg1.png');
+      // background-repeat: no-repeat;
+      // background-size: 100% 100%;
+
+      background: rgb(233, 242, 250);
 
       .footInfo {
-            padding: 0 20%;
+            padding: 0 14%;
 
             .phoneEmail {
                   display: flex;
-                  border-bottom: 1px solid #f1f1f1;
+                  border-bottom: 1px solid rgb(28, 136, 254);
 
-                  padding: 20px 0;
+                  padding: 46px 0;
                   margin: 0 0 20px 0;
-                  font-size: 16px;
+
+                  .left {
+                        color: rgb(25, 25, 26);
+                        font-family: '黑体';
+                        font-size: 32px;
+                        font-weight: 500;
+                        line-height: 46px;
+                        letter-spacing: 0px;
+                        text-align: left;
+
+                  }
 
                   .right {
                         text-align: right;
+                        display: flex;
+                        align-items: center;
+
+                        .images {
+                              width: 10px;
+                              height: 10px;
+                        }
 
                         span {
                               display: inline-block;
                               margin: 0 10px;
+                              color: rgb(25, 25, 26);
+                              font-family: '黑体';
+                              font-size: 24px;
+                              font-weight: 500;
+                              line-height: 35px;
+                              letter-spacing: 0px;
                         }
                   }
             }
@@ -60,12 +91,23 @@
                   text-align: center;
 
                   .otherInfo {
-                        font-size: 16px;
+
                         margin: 0 0 10px 0;
 
+                        color: rgb(25, 25, 26);
+                        font-family: '黑体';
+                        font-size: 24px;
+                        font-weight: 400;
+                        line-height: 35px;
+                        letter-spacing: 0px;
+
                         .el-link {
-                              font-size: 16px;
-                              color: #000000;
+                              color: rgb(25, 25, 26);
+                              font-family: '黑体';
+                              font-size: 24px;
+                              font-weight: 500;
+                              line-height: 35px;
+                              letter-spacing: 0px;
                         }
                   }
             }

src/components/windows/menusIndex.vue

@@ -58,16 +58,16 @@ watch(
             align-items: center;
 
             .imgs {
-                  height: 60px;
+                  height: 46px;
 
                   .images {
-                        width: 100%;
-                        height: 60px;
+                        width: 203px;
+                        height: 46px;
                   }
             }
 
             .menusInfo {
-                  padding: 0 0 0 100px;
+                  height: 46px;
             }
       }
 
@@ -77,6 +77,10 @@ watch(
       }
 }
 
+.el-menu--horizontal {
+      height: 46px;
+}
+
 .el-menu--horizontal.el-menu {
       border-bottom: none;
 }

src/components/windows/pagesIndex.vue

@@ -0,0 +1,37 @@
+<template>
+      <el-row class="pages">
+            <el-pagination background layout="prev, pager, next" :total="total" :page-size="limit" @change="toChange" />
+      </el-row>
+</template>
+
+<script setup lang="ts">
+
+import { defineEmits } from 'vue'
+
+const total = defineModel('total', {
+      type: Number,
+      default: 0
+})
+
+const limit = defineModel('limit', {
+      type: Number,
+      default: 10
+})
+
+
+const emit = defineEmits(['search'])
+
+
+/* 点击 */
+const toChange = (currentPage: number) => {
+      emit('search', { skip: (currentPage - 1) * limit.value })
+}
+
+</script>
+<style scoped lang="scss">
+.pages {
+      display: flex;
+      justify-content: center;
+      margin: 30px 0 0 0;
+}
+</style>

src/components/windows/topIndex.vue

@@ -0,0 +1,50 @@
+<template>
+      <el-row class="topMain  animate__animated animate__zoomIn">
+            <el-col :span="24" class="info">
+                  <el-col :span="24" class="title">
+                        {{ info.title }}
+                  </el-col>
+                  <el-col :span="24" class="enTitle">
+                        {{ info.enTitle }}
+                  </el-col>
+            </el-col>
+      </el-row>
+</template>
+
+<script setup lang="ts">
+
+const info = defineModel('info', {
+      type: Object,
+      default: () => ({ title: '', enTitle: '' })
+})
+</script>
+
+<style scoped lang="scss">
+.topMain {
+      height: calc(480px - 66px);
+      overflow: hidden;
+      padding: 10% 0;
+
+      .info {
+
+            .title {
+                  color: rgb(25, 25, 26);
+                  font-family: '宋体';
+                  font-size: 64px;
+                  font-weight: 700;
+                  line-height: 92px;
+                  letter-spacing: 8px;
+            }
+
+            .enTitle {
+                  color: rgb(25, 25, 26);
+                  font-family: '宋体';
+                  font-size: 36px;
+                  font-weight: 900;
+                  line-height: 52px;
+                  letter-spacing: 0px;
+                  text-transform: uppercase;
+            }
+      }
+}
+</style>

src/views/win/introduceIndex.vue

@@ -1,10 +1,30 @@
 <template>
-      <el-row class="introduceIndex animate__animated animate__backInRight">
-            <el-col :span="24" class="menusInfo">
-                  <menusIndex />
-            </el-col>
+      <el-row class="introduce animate__animated animate__backInRight">
+            <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: 'INTRODUCTION' }" />
+                        </el-col>
+                        <el-col :span="24" class="zero">
+                              <brief-index />
+                        </el-col>
+                        <el-col :span="24" class="zero">
+                              <setting-index />
+                        </el-col>
+                        <el-col :span="24" class="zero">
+                              <combrief-index />
+                        </el-col>
+                        <el-col :span="24" class="zero">
+                              <fengmao-index />
+                        </el-col>
+                        <el-col :span="24" class="foot">
+                              <foot-index />
+                        </el-col>
+                  </el-col>
             </el-col>
       </el-row>
 
@@ -14,5 +34,63 @@
 defineOptions({ name: 'introduceIndex' })
 /* 菜单 */
 import menusIndex from '../../components/windows/menusIndex.vue'
+
+/* 顶部信息 */
+import topIndex from '../../components/windows/topIndex.vue'
+
+/* 介绍 */
+import briefIndex from './introduceParts/briefIndex.vue'
+/* 设置 */
+import settingIndex from './introduceParts/settingIndex.vue'
+/* 公司介绍 */
+import combriefIndex from './introduceParts/combriefIndex.vue'
+/* 三产 */
+import fengmaoIndex from './introduceParts/fengmaoIndex.vue'
+
+/* 底部信息 */
+import footIndex from '../../components/windows/footIndex.vue'
 </script>
-<style scoped lang="scss"></style>
+<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 - 66px);
+                  overflow-y: auto;
+                  margin: 0 auto;
+
+
+                  .zero {
+                        margin: 0 0 40px 0;
+
+                  }
+
+                  .top {
+                        padding: 0 17%;
+                  }
+
+            }
+      }
+
+}
+</style>

src/views/win/introduceIndex1.vue

@@ -0,0 +1,83 @@
+<template>
+      <el-row class="introduce animate__animated animate__backInRight">
+            <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: 'INTRODUCTION' }" />
+                        </el-col>
+                        <el-col :span="24" class="zero">
+                              <company-index />
+                        </el-col>
+                        <el-col :span="24" class="foot">
+                              <foot-index />
+                        </el-col>
+                  </el-col>
+            </el-col>
+      </el-row>
+
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'introduceIndex' })
+/* 菜单 */
+import menusIndex from '../../components/windows/menusIndex.vue'
+
+/* 顶部信息 */
+import topIndex from '../../components/windows/topIndex.vue'
+
+
+/* 顶部信息 */
+import companyIndex from './introduceParts/companyIndex.vue'
+
+
+/* 底部信息 */
+import footIndex from '../../components/windows/footIndex.vue'
+</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 - 66px);
+                  overflow-y: auto;
+                  margin: 0 auto;
+
+
+                  .zero {
+                        margin: 0 0 40px 0;
+
+                  }
+
+                  .top {
+                        padding: 0 17%;
+                  }
+
+            }
+      }
+
+}
+</style>

src/views/win/introduceParts/briefIndex.vue

@@ -0,0 +1,73 @@
+<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>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+const brief5 = ref('/brief5.png')
+
+</script>
+<style scoped lang="scss">
+.main {
+      padding: 0 17%;
+      height: 55vh;
+      overflow: hidden;
+
+      .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;
+            }
+
+            .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;
+
+                  .images {
+                        width: 100%;
+                        height: 100%;
+                  }
+            }
+      }
+}
+</style>

src/views/win/introduceParts/fengmaoIndex.vue

@@ -0,0 +1,88 @@
+<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>
+</template>
+
+<script setup lang="ts">
+// 基础
+import { ref } from 'vue';
+import dividerIndex from '../../../components/windows/dividerIndex.vue'
+
+const list = ref([
+      {
+            url: '/fengmao1.png',
+            title: '长春市给水工程公司'
+      },
+      {
+            url: '/fengmao2.png',
+            title: '长春自来水公司水表厂'
+      },
+      {
+            url: '/fengmao3.png',
+            title: '长春市鸿浩建筑安装工程有限公司'
+      },
+      {
+            url: '/fengmao4.png',
+            title: '长春市鸿源机电设备安装有限公司'
+      }
+])
+</script>
+<style scoped lang="scss">
+.main {
+      padding: 0 17%;
+
+      .top {
+            margin: 0 0 20px 0;
+      }
+
+      .info {
+            display: flex;
+            gap: 20px;
+
+            .list {
+                  max-width: 23.8%;
+                  border-radius: 5px;
+                  box-shadow: 0 0 5px #cccccc;
+
+                  .imgs {
+                        border-radius: 5px;
+                        height: 226px;
+                        overflow: hidden;
+
+                        .images {
+                              width: 100%;
+                              height: 226px;
+                              overflow: hidden;
+                              border-radius: 5px;
+                        }
+                  }
+
+                  .title {
+                        padding: 22px 10px;
+                        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

@@ -0,0 +1,150 @@
+<template>
+      <el-row class="main animate__animated animate__backInRight">
+            <el-col :span="24" class="top">
+                  <dividerIndex :info="{ title: '机构设置', enTitle: 'Organization' }" />
+            </el-col>
+            <el-col :span="24" class="info">
+                  <el-col :span="12" class="left">
+                        <el-col :span="24" class="list" v-for="(item, index) in list" :key="index">
+                              <el-col :span="24" class="title">
+                                    <span class="dian"></span>
+                                    {{ item.title }}
+                              </el-col>
+                              <el-col :span="24" class="brief">
+                                    {{ item.brief }}
+                              </el-col>
+                        </el-col>
+                  </el-col>
+                  <el-col :span="12" class="left right">
+                        <el-col :span="24" class="list" v-for="(item, index) in list1" :key="index">
+                              <el-col :span="24" class="title">
+                                    <span class="dian"></span>
+                                    {{ item.title }}
+                              </el-col>
+                              <el-col :span="24" class="brief">
+                                    {{ item.brief }}
+                              </el-col>
+                        </el-col>
+                  </el-col>
+            </el-col>
+      </el-row>
+</template>
+
+<script setup lang="ts">
+// 基础
+import { ref } from 'vue';
+import dividerIndex from '../../../components/windows/dividerIndex.vue'
+
+const list = ref([
+      {
+            title: '党委工作部',
+            brief: '党委工作部负责集团党建管理、干部管理及人才管理、宣传管理、企业文化建设、群团管理等工作。'
+      },
+      {
+            title: '工会办公室',
+            brief: '工会办公室负责维护员工合法利益、工会活动、文体活动、劳动争议调整、经费管理等工作。'
+      },
+      {
+            title: '综合办公室',
+            brief: '综合办公室负责行政管理、后勤管理、董事会办公室事务、总经理办公室事务等工作。'
+      },
+      {
+            title: '战略发展部',
+            brief: '战略发展部负责集团行业政策研究、战略管理、经营管理、机构管理与组织管理、股权管理、制度流程。'
+      },
+      {
+            title: '投资管理部',
+            brief: '投资管理部负责集团的重点项目的统筹工作，包括项目进度管理、融资对接、项目数据资料管理工作；资产管理、投融资管理。'
+      }
+])
+const list1 = ref([
+      {
+            title: '财务管理部',
+            brief: '财务管理部负责集团预算管理、会计核算、资金管理、成本管理、税务管理、财务分析等工作。'
+      },
+      {
+            title: '人力资源部',
+            brief: '人力资源部负责集团人力资源规划、招聘与配置、培训管理、绩效管理、薪酬管理、基础人事管理等工作。'
+      },
+      {
+            title: '审计法务部',
+            brief: '审计法务部负责集团审计管理、合规管理、法务管理、风险控制、法制宣传等工作。'
+      },
+      {
+            title: '纪检监察部',
+            brief: '纪检监察部负责集团党风廉政建设、纪律检查、效能监察等工作。'
+      },
+      {
+            title: '安全管理部',
+            brief: '安全管理部负责集团安全管理、环境管理、职业健康、武装管理等工作。'
+      },
+      {
+            title: '招标采购部',
+            brief: '供应商管理、采购名录管理、采购平台管理、集中采购招标等工作。'
+      }
+])
+</script>
+<style scoped lang="scss">
+.main {
+      padding: 0 17%;
+
+      .top {
+            margin: 0 0 40px 0;
+      }
+
+      .info {
+            display: flex;
+
+            .left {
+                  padding: 0 10px;
+
+                  .list {
+                        margin: 0 0 20px 0;
+
+                        .title {
+                              display: flex;
+                              align-items: center;
+                              color: rgb(25, 25, 26);
+                              font-family: '黑体';
+                              font-size: 20px;
+                              font-weight: 500;
+                              line-height: 29px;
+                              letter-spacing: 0px;
+                              margin: 0 0 8px 0;
+
+                              .dian {
+                                    display: inline-block;
+                                    width: 8px;
+                                    height: 8px;
+                                    text-align: center;
+                                    line-height: 4px;
+                                    border-radius: 90%;
+                                    background: rgb(28, 136, 254);
+                                    margin: 0 10px 0 0;
+
+                              }
+                        }
+
+
+                        .brief {
+                              color: rgb(102, 102, 102);
+                              font-family: '黑体';
+                              font-size: 18px;
+                              font-weight: 400;
+                              line-height: 32px;
+                              letter-spacing: 0px;
+                              padding: 0 0 0 18px;
+                        }
+                  }
+
+
+            }
+
+            .right {
+                  .list {
+                        margin: 0 0 10px 0;
+                  }
+            }
+      }
+}
+</style>

src/views/win/inwaterIndex.vue

@@ -1,18 +1,87 @@
 <template>
-      <el-row class="inwaterIndex animate__animated animate__backInRight">
-            <el-col :span="24" class="menusInfo">
-                  <menusIndex />
-            </el-col>
+      <el-row class="inwater animate__animated animate__backInRight">
+            <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">
-defineOptions({ name: 'inwaterIndex' })
+defineOptions({ name: 'introduceIndex' })
 /* 菜单 */
 import menusIndex from '../../components/windows/menusIndex.vue'
+
+/* 顶部信息 */
+import topIndex from '../../components/windows/topIndex.vue'
+
+/* 荣誉 */
+import honorIndex from './inwaterParts/honorIndex.vue'
+/* 地址 */
+import addressIndex from './inwaterParts/addressIndex.vue'
+
+
+/* 底部信息 */
+import footIndex from '../../components/windows/footIndex.vue'
 </script>
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.inwater {
+      position: relative;
+
+      .bigImage {
+            height: 480px;
+            overflow: hidden;
+            background-image: url('/mess0.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/inwaterParts/addressIndex.vue

@@ -0,0 +1,30 @@
+<template>
+      <el-row class="main animate__animated animate__backInRight">
+            <el-col :span="24" class="info">
+                  <el-col :span="24" class="top">
+                        <dividerIndex :info="{ title: '联系我们', enTitle: 'Contact Us' }" />
+                  </el-col>
+                  <el-col :span="24" class="infoList">
+                        1
+                  </el-col>
+            </el-col>
+      </el-row>
+</template>
+
+<script setup lang="ts">
+// 基础
+import { ref } from 'vue'
+import dividerIndex from '../../../components/windows/dividerIndex.vue'
+
+</script>
+<style scoped lang="scss">
+.main {
+      padding: 0 17%;
+
+      .top {
+            margin: 40px 0;
+      }
+
+
+}
+</style>

src/views/win/inwaterParts/honorIndex.vue

@@ -0,0 +1,30 @@
+<template>
+      <el-row class="main animate__animated animate__backInRight">
+            <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">
+                        1
+                  </el-col>
+            </el-col>
+      </el-row>
+</template>
+
+<script setup lang="ts">
+// 基础
+import { ref } from 'vue'
+import dividerIndex from '../../../components/windows/dividerIndex.vue'
+
+</script>
+<style scoped lang="scss">
+.main {
+      padding: 0 17%;
+
+      .top {
+            margin: 40px 0;
+      }
+
+
+}
+</style>

src/views/win/messIndex.vue

@@ -1,18 +1,87 @@
 <template>
-      <el-row class="messIndex animate__animated animate__backInRight">
-            <el-col :span="24" class="menusInfo">
-                  <menusIndex />
-            </el-col>
+      <el-row class="mess animate__animated animate__backInRight">
+            <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: 'Information Disclosure' }" />
+                        </el-col>
+                        <el-col :span="24" class="zero">
+                              <service-index />
+                        </el-col>
+                        <el-col :span="24" class="zero">
+                              <commess-index />
+                        </el-col>
+                        <el-col :span="24" class="foot">
+                              <foot-index />
+                        </el-col>
+                  </el-col>
             </el-col>
       </el-row>
 
 </template>
 
 <script setup lang="ts">
-defineOptions({ name: 'messIndex' })
+defineOptions({ name: 'introduceIndex' })
 /* 菜单 */
 import menusIndex from '../../components/windows/menusIndex.vue'
+
+/* 顶部信息 */
+import topIndex from '../../components/windows/topIndex.vue'
+
+/* 企业信息 */
+import commessIndex from './messParts/commessIndex.vue'
+/* 企业服务 */
+import serviceIndex from './messParts/serviceIndex.vue'
+
+
+/* 底部信息 */
+import footIndex from '../../components/windows/footIndex.vue'
 </script>
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.mess {
+      position: relative;
+
+      .bigImage {
+            height: 480px;
+            overflow: hidden;
+            background-image: url('/mess0.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

@@ -0,0 +1,100 @@
+<template>
+  <el-row class="main animate__animated animate__backInRight">
+    <el-col :span="24" class="info">
+      <el-col :span="24" class="top">
+        <dividerIndex :info="{ title: '企业信息', enTitle: 'Information' }" />
+      </el-col>
+      <el-col :span="24" class="infoList">
+        <el-col :span="6" class="list" v-for="(item, index) in list" :key="index">
+          <el-col :span="24" 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-col>
+  </el-row>
+</template>
+
+<script setup lang="ts">
+// 基础
+import { ref } from 'vue'
+import dividerIndex from '../../../components/windows/dividerIndex.vue'
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const list = ref<any[]>([
+  {
+    url: '/com1.png',
+    title: '机构设置'
+  },
+  {
+    url: '/com2.png',
+    title: '政策法规'
+  },
+  {
+    url: '/com3.png',
+    title: '排水公司信息公开'
+  },
+  {
+    url: '/com4.png',
+    title: '水厂环境信息公开'
+  },
+  {
+    url: '/com5.png',
+    title: '行业自律'
+  },
+  {
+    url: '/com6.png',
+    title: '长春水务集团2018年政府信息公开'
+  },
+  {
+    url: '/com7.png',
+    title: '长春水务集团2019年工作'
+  },
+  {
+    url: '/com8.png',
+    title: '智慧水务（互联网+供水服务）'
+  }
+])
+</script>
+<style scoped lang="scss">
+.main {
+  padding: 0 17%;
+
+  .top {
+    margin: 40px 0;
+  }
+
+  .infoList {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 27px;
+
+    .list {
+      max-width: 23.3%;
+      border-radius: 5px;
+      box-shadow: 0 0 5px #cccccc;
+
+      .imgs {
+        border-radius: 5px;
+
+        .images {
+          border-radius: 5px;
+
+        }
+      }
+
+      .title {
+        padding: 18px 0;
+        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/messParts/serviceIndex.vue

@@ -0,0 +1,108 @@
+<template>
+      <el-row class="main animate__animated animate__backInRight">
+            <el-col :span="24" class="info">
+                  <el-col :span="24" class="top">
+                        <dividerIndex :info="{ title: '企业服务', enTitle: 'Enterprise Services' }" />
+                  </el-col>
+                  <el-col :span="24" class="infoList">
+                        <el-col :span="6" class="list" v-for="(item, index) in list" :key="index">
+                              <el-col :span="24" 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-col>
+      </el-row>
+</template>
+
+<script setup lang="ts">
+// 基础
+import { ref } from 'vue'
+import dividerIndex from '../../../components/windows/dividerIndex.vue'
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const list = ref<any[]>([
+      {
+            url: '/mess1.png',
+            title: '用水发展'
+      },
+      {
+            url: '/mess2.png',
+            title: '服务信息'
+      },
+      {
+            url: '/mess3.png',
+            title: '服务项目'
+      },
+      {
+            url: '/mess4.png',
+            title: '服务收费'
+      },
+      {
+            url: '/mess5.png',
+            title: '服务监督'
+      },
+      {
+            url: '/mess6.png',
+            title: '应急服务预案'
+      },
+      {
+            url: '/mess7.png',
+            title: '决策信息公开'
+      },
+      {
+            url: '/mess8.png',
+            title: '重要政策落实情况'
+      },
+      {
+            url: '/mess9.png',
+            title: '企业生产经营情况'
+      },
+      {
+            url: '/mess10.png',
+            title: '企业与相对人的争议解决方式'
+      }
+])
+</script>
+<style scoped lang="scss">
+.main {
+      padding: 0 17%;
+
+      .top {
+            margin: 40px 0;
+      }
+
+      .infoList {
+            display: flex;
+            flex-wrap: wrap;
+
+            .list {
+                  max-width: 18.6%;
+                  margin: 0 20px 60px 0;
+
+                  .imgs {
+                        margin: 0 0 10px 0;
+
+                        .images {
+                              width: 100%;
+                        }
+                  }
+
+                  .title {
+                        color: rgb(25, 25, 26);
+                        font-family: '黑体';
+                        font-size: 24px;
+                        font-weight: 500;
+                        line-height: 35px;
+                        letter-spacing: 0px;
+                        text-align: center;
+                  }
+            }
+
+            .list:nth-child(5n) {
+                  margin: 0 0 60px 0;
+            }
+      }
+}
+</style>

src/views/win/newsIndex.vue

@@ -1,18 +1,83 @@
 <template>
       <el-row class="news animate__animated animate__backInRight">
-            <el-col :span="24" class="menusInfo">
-                  <menusIndex />
-            </el-col>
+            <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: 'news' }" />
+                        </el-col>
+                        <el-col :span="24" class="zero">
+                              <list-index />
+                        </el-col>
+                        <el-col :span="24" class="foot">
+                              <foot-index />
+                        </el-col>
+                  </el-col>
             </el-col>
       </el-row>
 
 </template>
 
 <script setup lang="ts">
-defineOptions({ name: 'newsIndex' })
+defineOptions({ name: 'introduceIndex' })
 /* 菜单 */
 import menusIndex from '../../components/windows/menusIndex.vue'
+
+/* 顶部信息 */
+import topIndex from '../../components/windows/topIndex.vue'
+
+/* 新闻 */
+import listIndex from './newsParts/listIndex.vue'
+
+
+
+/* 底部信息 */
+import footIndex from '../../components/windows/footIndex.vue'
 </script>
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.news {
+      position: relative;
+
+      .bigImage {
+            height: 480px;
+            overflow: hidden;
+            background-image: url('/news5.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/newsParts/listIndex.vue

@@ -0,0 +1,227 @@
+<template>
+      <el-row class="main animate__animated animate__backInLeft">
+            <el-col :span="24" class="info">
+                  <el-col :span="24" class="tabs">
+                        <el-col :span="6" :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">
+                        <el-col :span="24" class="list" v-for="(item, index) in list" :key="index">
+                              <el-col :span="3" class="date">
+                                    <el-col :span="24" class="dateInfo">
+                                          <el-col :span="24" class="days">
+                                                {{ dayjs(item.date).format('DD-MM') }}
+                                          </el-col>
+                                          <el-col :span="24" class="years">
+                                                --{{ dayjs(item.date).format('YYYY') }}--
+                                          </el-col>
+                                    </el-col>
+                              </el-col>
+                              <el-col :span="14" class="mess">
+                                    <el-col :span="24" class="title">
+                                          {{ item.title }}
+                                    </el-col>
+                                    <el-col :span="24" class="brief">
+                                          {{ item.brief }}
+                                    </el-col>
+                              </el-col>
+                              <el-col :span="6" class="imgs">
+                                    <el-image class="images" :src="item.url"></el-image>
+                              </el-col>
+                        </el-col>
+                  </el-col>
+                  <el-col :span="24" class="pages">
+                        <pages-index :total="total" @search="toSearch" />
+                  </el-col>
+            </el-col>
+      </el-row>
+</template>
+
+<script setup lang="ts">
+
+import { ref, onMounted } from 'vue'
+import dayjs from 'dayjs'
+
+/* 分页 */
+import pagesIndex from '../../../components/windows/pagesIndex.vue'
+
+const tabList = ref([
+      {
+            id: '1',
+            title: '党建天地'
+      },
+      {
+            id: '2',
+            title: '政策法规'
+      },
+      {
+            id: '3',
+            title: '招标采购'
+      },
+      {
+            id: '4',
+            title: '集团要闻'
+      }
+])
+const tabActive = ref('1')
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const list = ref<any[]>([
+      {
+            id: '1',
+            title: '集团召开2021年度安全生产委员会第一次全体（扩大）视频会议',
+            brief: '1月29日，集团召开2021年度安全生产委员会第一次全体（扩大）视频会议，会议由集团总经理王爽主持。会上，集团副总经理于懿通报了2020年度安全生产工作情况，安排部署下阶段重点工作。集团安保部副部长张凯传达国家、省、市...',
+            date: '2024-12-24',
+            url: '/news2.png'
+      },
+      {
+            id: '2',
+            title: '集团召开2021年度安全生产委员会第一次全体（扩大）视频会议',
+            brief: '1月29日，集团召开2021年度安全生产委员会第一次全体（扩大）视频会议，会议由集团总经理王爽主持。会上，集团副总经理于懿通报了2020年度安全生产工作情况，安排部署下阶段重点工作。集团安保部副部长张凯传达国家、省、市...',
+            date: '2024-12-24',
+            url: '/news3.png'
+      },
+      {
+            id: '3',
+            title: '集团召开2021年度安全生产委员会第一次全体（扩大）视频会议',
+            brief: '1月29日，集团召开2021年度安全生产委员会第一次全体（扩大）视频会议，会议由集团总经理王爽主持。会上，集团副总经理于懿通报了2020年度安全生产工作情况，安排部署下阶段重点工作。集团安保部副部长张凯传达国家、省、市...',
+            date: '2024-12-24',
+            url: '/news4.png'
+      },
+      {
+            id: '4',
+            title: '集团召开2021年度安全生产委员会第一次全体（扩大）视频会议',
+            brief: '1月29日，集团召开2021年度安全生产委员会第一次全体（扩大）视频会议，会议由集团总经理王爽主持。会上，集团副总经理于懿通报了2020年度安全生产工作情况，安排部署下阶段重点工作。集团安保部副部长张凯传达国家、省、市...',
+            date: '2024-12-24',
+            url: '/news2.png'
+      }
+])
+const total = ref(40)
+
+
+/* 选择 */
+const tabChange = (event: { id: string }) => {
+      tabActive.value = event.id
+}
+
+/* 查询 */
+const toSearch = async ({ skip = 0, limit = 10, ...info } = {}) => {
+      console.log(skip, limit);
+      console.log(info);
+}
+/* 初始化 */
+onMounted(() => {
+      toSearch()
+})
+</script>
+<style scoped lang="scss">
+.main {
+      padding: 0 17%;
+
+      .info {
+            .tabs {
+                  display: flex;
+                  padding: 0 30%;
+                  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);
+                        margin: 0 0 30px 0;
+                        padding: 0 0 30px 0;
+
+                        .date {
+                              display: flex;
+                              align-items: center;
+                              justify-content: center;
+                              text-align: center;
+
+                              .days {
+                                    color: rgb(28, 136, 254);
+                                    font-family: '钉钉进步体';
+                                    font-size: 36px;
+                                    font-weight: 400;
+                                    line-height: 40px;
+                                    letter-spacing: 0px;
+                              }
+
+                              .years {
+                                    color: rgb(28, 136, 254);
+                                    font-family: '钉钉进步体';
+                                    font-size: 20px;
+                                    font-weight: 400;
+                                    line-height: 40px;
+                                    letter-spacing: 0px;
+                              }
+                        }
+
+                        .mess {
+                              padding: 0 10px 0 0;
+
+                              .title {
+                                    color: rgb(25, 25, 26);
+                                    font-family: '黑体';
+                                    font-size: 24px;
+                                    font-weight: 500;
+                                    line-height: 35px;
+                                    letter-spacing: 0px;
+                                    margin: 0 0 30px 0;
+                              }
+
+                              .brief {
+                                    color: rgb(102, 102, 102);
+                                    font-family: '黑体';
+                                    font-size: 18px;
+                                    font-weight: 400;
+                                    line-height: 32px;
+                                    letter-spacing: 0px;
+
+                                    overflow: hidden;
+                                    text-overflow: ellipsis;
+                                    -webkit-line-clamp: 3;
+                                    word-break: break-all;
+                                    display: -webkit-box;
+                                    -webkit-box-orient: vertical;
+
+                              }
+                        }
+
+                        .imgs {
+                              .images {}
+                        }
+                  }
+
+                  .list:last-child {
+                        border-bottom: none;
+                  }
+            }
+      }
+}
+</style>

src/views/win/watersupplyIndex.vue

@@ -1,10 +1,21 @@
 <template>
-      <el-row class="watersupplyIndex animate__animated animate__backInRight">
-            <el-col :span="24" class="menusInfo">
-                  <menusIndex />
-            </el-col>
+      <el-row class="watersupply animate__animated animate__backInRight">
+            <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 supply information' }" />
+                        </el-col>
+                        <el-col :span="24" class="zero">
+                              <list-index />
+                        </el-col>
+                        <el-col :span="24" class="foot">
+                              <foot-index />
+                        </el-col>
+                  </el-col>
             </el-col>
       </el-row>
 
@@ -14,5 +25,59 @@
 defineOptions({ name: 'watersupplyIndex' })
 /* 菜单 */
 import menusIndex from '../../components/windows/menusIndex.vue'
+
+/* 顶部信息 */
+import topIndex from '../../components/windows/topIndex.vue'
+
+/* 新闻 */
+import listIndex from './watersupplyParts/listIndex.vue'
+
+
+
+/* 底部信息 */
+import footIndex from '../../components/windows/footIndex.vue'
 </script>
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.watersupply {
+      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/watersupplyParts/listIndex.vue

@@ -0,0 +1,182 @@
+<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">
+                        <el-col :span="24" class="list" v-for="(item, index) in list" :key="index">
+                              <el-col :span="20" class="title textOver">
+                                    {{ item.title }}
+                              </el-col>
+                              <el-col :span="4" class="date">
+                                    {{ item.date }}
+                              </el-col>
+                        </el-col>
+                  </el-col>
+                  <el-col :span="24" class="pages">
+                        <pages-index :total="total" @search="toSearch" />
+                  </el-col>
+            </el-col>
+      </el-row>
+</template>
+
+<script setup lang="ts">
+
+import { ref, onMounted } from 'vue'
+import dayjs from 'dayjs'
+
+/* 分页 */
+import pagesIndex from '../../../components/windows/pagesIndex.vue'
+
+const tabList = ref([
+      {
+            id: '1',
+            title: '水务情况'
+      },
+      {
+            id: '2',
+            title: '水质报告'
+      },
+      {
+            id: '3',
+            title: '停水信息'
+      },
+      {
+            id: '4',
+            title: '管网压力'
+      },
+      {
+            id: '5',
+            title: '长水e办'
+      },
+      {
+            id: '6',
+            title: '网上缴费'
+      },
+      {
+            id: '7',
+            title: '网上办事大厅'
+      },
+      {
+            id: '8',
+            title: '采购价格信息公布'
+      }
+])
+const tabActive = ref('1')
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const list = ref<any[]>([
+      {
+            id: '1',
+            title: '集团召开2021年度安全生产委员会第一次全体（扩大）视频会议',
+            date: '2024-12-24',
+      },
+      {
+            id: '2',
+            title: '集团召开2021年度安全生产委员会第一次全体（扩大）视频会议',
+            date: '2024-12-24',
+      },
+      {
+            id: '3',
+            title: '集团召开2021年度安全生产委员会第一次全体（扩大）视频会议',
+            date: '2024-12-24',
+      },
+      {
+            id: '4',
+            title: '集团召开2021年度安全生产委员会第一次全体（扩大）视频会议',
+            date: '2024-12-24',
+      }
+])
+const total = ref(40)
+
+
+/* 选择 */
+const tabChange = (event: { id: string }) => {
+      tabActive.value = event.id
+}
+
+/* 查询 */
+const toSearch = async ({ skip = 0, limit = 10, ...info } = {}) => {
+      console.log(skip, limit);
+      console.log(info);
+}
+/* 初始化 */
+onMounted(() => {
+      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/winParts/conductingBusiness.vue

@@ -70,18 +70,22 @@ const list = ref([
 
                         .images {
                               width: 100%;
-                              height: 180px;
+                              height: 250px;
                               border-radius: 5px;
                         }
                   }
 
                   .title {
                         position: absolute;
-                        bottom: 15px;
+                        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;
-                        color: #ffffff;
-                        font-size: 16px;
                   }
 
             }

src/views/winParts/introduceIndex.vue

@@ -20,7 +20,9 @@
                         </el-col>
                   </el-col>
                   <el-col :span="12" class="right">
-                        <el-image class="images" :src="rightUrl"></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>
@@ -31,22 +33,26 @@ defineOptions({ name: 'introduceIndex' })
 // 基础
 import { ref } from 'vue';
 
-const rightUrl = ref('/src/assets/fendoubg1.png')
+
 const rightIcon = ref('/right.png')
+const images1 = ref('/brief2.png')
+const images2 = ref('/brief3.png')
+const images3 = ref('/brief4.png')
+
 
 </script>
 <style scoped lang="scss">
 .introduce {
       .info {
             width: 100%;
-            height: 40vh;
+            height: 50vh;
             overflow: hidden;
             border-radius: 5px;
-            padding: 50px 50px;
-            background-image: url('/src/assets/fendoubg1.png');
             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;
@@ -63,35 +69,52 @@ const rightIcon = ref('/right.png')
                               flex-direction: column;
 
                               span:first-child {
-                                    font-size: 25px;
-                                    font-family: '楷体';
-                                    font-weight: bold;
-                                    margin: 0 0 5px 0;
+                                    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: 80px;
+                                    width: 100px;
                                     height: 2px;
-                                    background-color: #1586FF;
+                                    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;
-                              font-size: 18px;
-                              font-weight: bold;
-                              background-image: linear-gradient(to bottom, #1586ff, #ffffff);
-                              -webkit-background-clip: text;
-                              background-clip: text;
-                              -webkit-text-fill-color: transparent;
+                              text-transform: uppercase;
                         }
                   }
 
                   .left2 {
 
                         p {
-                              color: #ffffff;
+                              color: rgb(25, 25, 26);
+                              font-family: '黑体';
+                              font-size: 16px;
+                              font-weight: 400;
+                              line-height: 32px;
+                              letter-spacing: 0px;
+                              text-align: left;
                         }
                   }
 
@@ -100,7 +123,7 @@ const rightIcon = ref('/right.png')
 
                         .images {
                               position: absolute;
-                              bottom: 0;
+                              bottom: 30px;
                               width: 40px;
                               height: 40px;
                         }
@@ -108,10 +131,32 @@ const rightIcon = ref('/right.png')
             }
 
             .right {
-                  .images {
-                        width: 100%;
+                  display: flex;
+                  position: relative;
+
+                  .images1 {
+                        width: 300px;
                         height: 100%;
-                        border: 1px solid #f1f1f1;
+                        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;
                   }
             }
       }

src/views/winParts/newsIndex.vue

@@ -4,15 +4,15 @@
                   <dividerIndex :info="{ title: '集团新闻', enTitle: 'GROUP NEWS' }" />
             </el-col>
             <el-col :span="24" class="bottom">
-                  <el-col :span="8" class="left">
+                  <el-col :span="6" class="left">
                         <el-image class="images" :src="leftUrl"></el-image>
                   </el-col>
-                  <el-col :span="16" class="right">
+                  <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="8" class="imgs">
+                                                <el-col :span="6" class="imgs">
                                                       <el-image class="images" :src="item.url"></el-image>
                                                 </el-col>
                                                 <el-col :span="18" class="mess">
@@ -27,7 +27,7 @@
                               <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="8" class="imgs">
+                                                <el-col :span="6" class="imgs">
                                                       <el-image class="images" :src="item.url"></el-image>
                                                 </el-col>
                                                 <el-col :span="18" class="mess">
@@ -42,7 +42,7 @@
                               <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="8" class="imgs">
+                                                <el-col :span="6" class="imgs">
                                                       <el-image class="images" :src="item.url"></el-image>
                                                 </el-col>
                                                 <el-col :span="18" class="mess">
@@ -57,7 +57,7 @@
                               <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="8" class="imgs">
+                                                <el-col :span="6" class="imgs">
                                                       <el-image class="images" :src="item.url"></el-image>
                                                 </el-col>
                                                 <el-col :span="18" class="mess">
@@ -83,26 +83,26 @@ import type { TabsPaneContext } from 'element-plus'
 
 import dividerIndex from '../../components/windows/dividerIndex.vue'
 
-const leftUrl = ref('/src/assets/fendoubg1.png')
+const leftUrl = ref('/news1.png')
 
 const activeName = ref('first')
 
 const list = ref([
       {
             title: '集团召开2021年度安全生产委员会第一次全体(扩大)视频会议集团召开2021年度安全生产委员会第一次全体(扩大)视频会议',
-            url: '/src/assets/fendoubg1.png',
+            url: '/news2.png',
             brief: '1月29日，集团召开2021年度安全生产委员会第一次全体(扩大)视频会议，会议由集团总经理王爽主持。会上，集团副总经理于懿通1月29日，集团召开2021年度安全生产委员会第一次全体(扩大)视频会议，会议由集团总经理王爽主持。会上，集团副总经理于懿通',
             date: '2024-12-22'
       },
       {
             title: '集团召开2021年度安全生产委员会第一次全体(扩大)视频会议',
-            url: '/src/assets/fendoubg1.png',
+            url: '/news3.png',
             brief: '1月29日，集团召开2021年度安全生产委员会第一次全体(扩大)视频会议，会议由集团总经理王爽主持。会上，集团副总经理于懿通1月29日，集团召开2021年度安全生产委员会第一次全体(扩大)视频会议，会议由集团总经理王爽主持。会上，集团副总经理于懿通',
             date: '2024-12-22'
       },
       {
             title: '集团召开2021年度安全生产委员会第一次全体(扩大)视频会议',
-            url: '/src/assets/fendoubg1.png',
+            url: '/news4.png',
             brief: '1月29日，集团召开2021年度安全生产委员会第一次全体(扩大)视频会议，会议由集团总经理王爽主持。会上，集团副总经理于懿通1月29日，集团召开2021年度安全生产委员会第一次全体(扩大)视频会议，会议由集团总经理王爽主持。会上，集团副总经理于懿通',
             date: '2024-12-22'
       }
@@ -134,7 +134,7 @@ const handleClick = (tab: TabsPaneContext, event: Event) => {
             }
 
             .right {
-                  max-width: 65.3%;
+                  max-width: 74%;
                   height: 400px;
                   overflow: hidden;
                   padding: 0 10px;
@@ -153,23 +153,25 @@ const handleClick = (tab: TabsPaneContext, event: Event) => {
                               }
 
                               .mess {
-                                    max-width: 67%;
                                     padding: 0 10px;
                                     position: relative;
 
                                     .title {
-                                          font-size: 18px;
-                                          font-family: '楷体';
-                                          font-weight: 600;
-                                          margin: 0 0 5px 0;
-                                          color: #333333;
+                                          color: rgb(25, 25, 26);
+                                          font-family: '黑体';
+                                          font-size: 20px;
+                                          font-weight: 500;
+                                          line-height: 29px;
+                                          letter-spacing: 0px;
                                     }
 
                                     .brief {
-                                          font-size: 16px;
-                                          font-family: '楷体';
-                                          color: #666666;
-                                          font-weight: 600;
+                                          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;
@@ -182,10 +184,12 @@ const handleClick = (tab: TabsPaneContext, event: Event) => {
                                     .date {
                                           position: absolute;
                                           bottom: 0;
-                                          font-size: 14px;
-                                          font-family: '楷体';
-                                          font-weight: 600;
-                                          color: #999999;
+                                          color: rgb(153, 153, 153);
+                                          font-family: '黑体';
+                                          font-size: 16px;
+                                          font-weight: 500;
+                                          line-height: 23px;
+                                          letter-spacing: 0px;
                                     }
                               }
                         }

src/views/winParts/notesIndex.vue

@@ -92,14 +92,14 @@ const toChange = (event: { id: string }) => {
 
             .list {
                   width: 15%;
-                  height: 220px;
+                  height: 260px;
                   position: relative;
 
                   .imgs {
 
                         .images {
                               width: 100%;
-                              height: 220px;
+                              height: 260px;
                               border-radius: 5px;
                         }
                   }
@@ -108,7 +108,7 @@ const toChange = (event: { id: string }) => {
                         position: absolute;
                         top: 0;
                         width: 100%;
-                        height: 220px;
+                        height: 260px;
                         border-radius: 5px;
                         padding: 0 10px;
 
@@ -120,16 +120,18 @@ const toChange = (event: { id: string }) => {
                               padding: 20px 0 10px 0;
 
                               .titles {
-                                    color: #02448B;
-                                    font-size: 18px;
-                                    font-family: '楷体';
-                                    font-weight: bolder;
+                                    color: rgb(2, 68, 139);
+                                    font-family: '黑体';
+                                    font-size: 24px;
+                                    font-weight: 500;
+                                    line-height: 35px;
+                                    letter-spacing: 0px;
                               }
                         }
 
                         .other {
                               position: absolute;
-                              bottom: 10px;
+                              bottom: 30px;
 
                               p {
                                     color: #ffffff;
@@ -153,20 +155,30 @@ const toChange = (event: { id: string }) => {
                         .title {
 
                               .titles {
-                                    color: #ffffff;
-                                    margin: 0 0 5px 0;
+                                    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: 40px;
+                                    width: 60px;
                                     border-bottom: 2px solid #ffffff;
                               }
                         }
 
                         .other {
                               p {
-                                    color: #ffffff;
+                                    color: rgb(255, 255, 255);
+                                    font-family: '黑体';
+                                    font-size: 16px;
+                                    font-weight: 500;
+                                    line-height: 23px;
+                                    letter-spacing: 0px;
                               }
                         }
                   }

src/views/winParts/popularWill.vue

@@ -61,19 +61,19 @@ const list = ref([
             type: '1',
             title: '热点回应',
             brief: '供水服务政策法规是为了加强城市供水管理，发展城市供水事业，保障城市生活、生产和其他建设用水而制定的。它包括与制水、供水、排水有关的，由国家、省、地方及行业主管部门发布的法律、法规及政策。',
-            url: '/src/assets/fendoubg1.png'
+            url: '/my1.png'
       },
       {
             type: '2',
             title: '服务咨询',
             brief: '自来水是最基本的民生资源，关系到千家万户，关系到城市发展。为什么停水?水质怎么保障?这些问题受到广泛的关注。那么在自来水的生产供应过程中，都有什么您十分关切的问题呢?水务集团在此进行回应。',
-            url: '/src/assets/fendoubg1.png'
+            url: '/my2.png'
       },
       {
             type: '3',
             title: '满意度调查',
             brief: '水投集团满意度调查是为了了解客户对水投集团提供的服务的满意程度而进行的一项调查。通过该调查，我们希望收集客户对水投集团的服务质量、响应速度、沟通效果等方面的意见和反馈，以便进一步改进和优化我们的服务。',
-            url: '/src/assets/fendoubg1.png'
+            url: '/my3.png'
       }
 ])
 </script>
@@ -102,7 +102,7 @@ const list = ref([
 
                         .images {
                               width: 100%;
-                              height: 180px;
+                              height: 270px;
                               border-radius: 5px;
                         }
                   }
@@ -117,16 +117,23 @@ const list = ref([
                         padding: 10px;
 
                         .title {
-                              font-size: 16px;
-                              font-family: '楷体';
-                              font-weight: 600;
-                              margin: 0 0 5px 0;
+                              color: rgb(25, 25, 26);
+                              font-family: '黑体';
+                              font-size: 24px;
+                              font-weight: 500;
+                              line-height: 32px;
+                              letter-spacing: 2px;
+                              margin: 0 0 16px 0;
                         }
 
                         .brief {
-                              padding: 0 0 10px 0;
-                              font-size: 14px;
-                              color: #6a6a6a;
+                              color: rgb(102, 102, 102);
+                              font-family: '黑体';
+                              font-size: 18px;
+                              font-weight: 400;
+                              line-height: 30px;
+                              letter-spacing: 0px;
+
                               overflow: hidden;
                               text-overflow: ellipsis;
                               -webkit-line-clamp: 5;

src/views/winParts/topIndex.vue

@@ -1,11 +1,16 @@
 <template>
       <el-row class="topIndex">
             <el-col :span="24" class="info animate__animated animate__zoomIn">
-                  <el-col :span="24" class="title">
-                        长春水投
+                  <el-col :span="12" class="left">
+                        <el-col :span="24" class="title">
+                              长春水投
+                        </el-col>
+                        <el-col :span="24" class="enTitle">
+                              CHANGCHUN WATER GROUP
+                        </el-col>
                   </el-col>
-                  <el-col :span="24" class="enTitle">
-                        CHANGCHUN WATER GROUP
+                  <el-col :span="12" class="right">
+                        <span>二维码</span>
                   </el-col>
             </el-col>
       </el-row>
@@ -20,17 +25,44 @@ defineOptions({ name: 'topIndex' })
       margin: 5% 0 5% 0;
 
       .info {
-            .title {
-                  font-size: 35px;
-                  font-family: monospace;
-                  font-weight: bolder;
+            display: flex;
+
+            .left {
+                  padding: 1% 20px;
+
+                  .title {
+                        color: rgb(25, 25, 26);
+                        font-family: '宋体';
+                        font-size: 70px;
+                        font-weight: 700;
+                        line-height: 101px;
+                        letter-spacing: 8px;
+                  }
+
+                  .enTitle {
+                        color: rgb(25, 25, 26);
+                        font-family: '宋体';
+                        font-size: 36px;
+                        font-weight: 900;
+                        line-height: 52px;
+                        letter-spacing: 0px;
+                        text-align: left;
+                        text-transform: uppercase;
+
+                  }
             }
 
-            .enTitle {
-                  font-size: 22px;
-                  font-family: monospace;
-                  font-weight: bold;
+            .right {
+                  text-align: right;
 
+                  span {
+                        display: inline-block;
+                        width: 200px;
+                        height: 200px;
+                        line-height: 200px;
+                        text-align: center;
+                        background-color: #ffffff;
+                  }
             }
       }
 }

src/views/windowsIndex.vue

@@ -72,17 +72,19 @@ import footIndex from '../components/windows/footIndex.vue'
             overflow: hidden;
 
             .menus {
-                  height: 80px;
+                  height: 66px;
                   overflow: hidden;
             }
 
             .bottom {
-                  height: calc(100vh - 80px);
+                  height: calc(100vh - 66px);
                   overflow-y: auto;
+                  margin: 0 auto;
+
 
                   .zero {
-                        margin: 0 0 20px 0;
-                        padding: 0 22%;
+                        margin: 0 0 40px 0;
+                        padding: 0 17%;
                   }
 
             }