首页

package.json

@@ -13,6 +13,7 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
+    "@element-plus/icons-vue": "^2.3.1",
     "animate.css": "^4.1.1",
     "axios": "^1.7.9",
     "dayjs": "^1.11.13",

pnpm-lock.yaml

@@ -5,6 +5,9 @@ settings:
   excludeLinksFromLockfile: false
 
 dependencies:
+  '@element-plus/icons-vue':
+    specifier: ^2.3.1
+    version: 2.3.1(vue@3.5.13)
   animate.css:
     specifier: ^4.1.1
     version: 4.1.1

src/App.vue

@@ -1,26 +1,24 @@
+<template>
+  <RouterView />
+</template>
 <script setup lang="ts">
-import { onMounted, computed } from 'vue'
-onMounted(() => {
-  console.log(window.outerWidth);
 
-  // const userAgent = navigator.userAgent;
-  // console.log(userAgent);
-  // let deviceType = 'unknown';
-  // if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent)) {
-  //   deviceType = 'mobile';
-  // } else {
-  //   deviceType = 'desktop';
-  // }
-  // console.log('当前设备类型：', deviceType);
-})
-const width = computed(() => {
-  return window.outerWidth
-});
 </script>
 
-<template>
-  {{ width }}
-  <RouterView />
-</template>
+<style lang="scss">
+.w_1200 {
+  max-width: 1200px !important;
+  margin: 0 auto;
+}
+
+p {
+  margin: 0;
+  padding: 0;
+}
 
-<style scoped></style>
+.textOver {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>

src/components/windows/dividerIndex.vue

@@ -0,0 +1,64 @@
+<template>
+      <el-col :span="24" class="divider">
+            <div class="heng">
+                  <span></span>
+            </div>
+            <div class="info">
+                  <p class="title">{{ info.title }}</p>
+                  <p class="enTitle">{{ info.enTitle }}</p>
+            </div>
+            <div class="heng">
+                  <span></span>
+            </div>
+      </el-col>
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'dividerIndex' })
+
+const info = defineModel('info', {
+      type: Object,
+      default: () => ({ title: '', enTitle: '' })
+})
+
+</script>
+<style scoped lang="scss">
+.divider {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+
+      .heng {
+            width: 43%;
+
+            span {
+                  display: inline-block;
+                  width: 100%;
+                  height: 2px;
+                  background-color: #006CC8;
+            }
+      }
+
+      .info {
+            flex-grow: 1;
+            margin: 0 10px;
+
+            p {
+                  white-space: nowrap;
+            }
+
+            .title {
+                  font-size: 20px;
+                  font-weight: bold;
+            }
+
+            .enTitle {
+                  color: #496C8A;
+                  font-weight: bold;
+            }
+      }
+
+
+}
+</style>

src/components/windows/footIndex.vue

@@ -0,0 +1,74 @@
+<template>
+      <el-row class="foot  animate__animated animate__backInRight">
+            <el-col :span="24" class="footInfo">
+                  <el-col :span="24" class="phoneEmail">
+                        <el-col :span="12" class="left">
+                              联系我们
+                        </el-col>
+                        <el-col :span="12" class="right">
+                              <span>热线电话:89812345</span>
+                              <span>电子邮箱:changchunwater@163.com</span>
+                        </el-col>
+                  </el-col>
+                  <el-col :span="24" class="other">
+                        <el-col :span="24" class="otherInfo">
+                              Copyright @ 2000-2024 all rights reserved by changchun Water[Group] co.,Ltd.
+                        </el-col>
+                        <el-col :span="24" class="otherInfo">
+                              <el-link type="text" :underline="false"
+                                    href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">
+                                    吉ICP备07001103号-1
+                              </el-link>
+                        </el-col>
+                  </el-col>
+            </el-col>
+      </el-row>
+</template>
+
+<script setup lang="ts">
+
+</script>
+<style scoped lang="scss">
+.foot {
+      height: 30vh;
+      background-image: url('/src/assets/fendoubg1.png');
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+
+      .footInfo {
+            padding: 0 20%;
+
+            .phoneEmail {
+                  display: flex;
+                  border-bottom: 1px solid #f1f1f1;
+
+                  padding: 20px 0;
+                  margin: 0 0 20px 0;
+                  font-size: 16px;
+
+                  .right {
+                        text-align: right;
+
+                        span {
+                              display: inline-block;
+                              margin: 0 10px;
+                        }
+                  }
+            }
+
+            .other {
+                  text-align: center;
+
+                  .otherInfo {
+                        font-size: 16px;
+                        margin: 0 0 10px 0;
+
+                        .el-link {
+                              font-size: 16px;
+                              color: #000000;
+                        }
+                  }
+            }
+      }
+}
+</style>

src/components/windows/menusIndex.vue

@@ -0,0 +1,98 @@
+<template>
+      <el-row class="menus">
+            <el-col :span="20" class="left">
+                  <el-col :span="6" class="imgs">
+                        <el-image class="images" :src="logoUrl"></el-image>
+                  </el-col>
+                  <el-col :span="18" class="menusInfo">
+                        <el-menu :router="true" :default-active="activeIndex" mode="horizontal"
+                              background-color="transparent" text-color="#4E5051" active-text-color="#000000">
+                              <el-menu-item index="/">首页</el-menu-item>
+                              <el-menu-item index="/introduceIndex">集团介绍</el-menu-item>
+                              <el-menu-item index="/newsIndex">集团新闻</el-menu-item>
+                              <el-menu-item index="/messIndex">信息公开</el-menu-item>
+                              <el-menu-item index="/popularwillIndex">民意征集</el-menu-item>
+                              <el-menu-item index="/watersupplyIndex">供水信息</el-menu-item>
+                              <el-menu-item index="/inwaterIndex">走进水务</el-menu-item>
+                        </el-menu>
+                  </el-col>
+            </el-col>
+            <el-col :span="4" class="right">
+                  <el-input v-model="value" placeholder="请输入查询内容">
+                        <template #append>
+                              <el-button :icon="Search" />
+                        </template>
+                  </el-input>
+            </el-col>
+      </el-row>
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'menusIndex' })
+// 基础
+import { ref, watch } from 'vue';
+import { Search } from '@element-plus/icons-vue'
+import { useRouter } from 'vue-router'
+const router = useRouter();
+
+const logoUrl = ref('/logo.png')
+const activeIndex = ref('/')
+
+const value = ref('')
+
+/* 监听 */
+watch(
+      () => router.currentRoute.value,
+      (to) => {
+            activeIndex.value = to.path
+      }, { deep: true, immediate: true }
+);
+
+</script>
+<style scoped lang="scss">
+.menus {
+      padding: 0 10%;
+
+      .left {
+            display: flex;
+            align-items: center;
+
+            .imgs {
+                  height: 60px;
+
+                  .images {
+                        width: 100%;
+                        height: 60px;
+                  }
+            }
+
+            .menusInfo {
+                  padding: 0 0 0 100px;
+            }
+      }
+
+      .right {
+            display: flex;
+            align-items: center;
+      }
+}
+
+.el-menu--horizontal.el-menu {
+      border-bottom: none;
+}
+
+.el-menu--horizontal>.el-menu-item.is-active {
+      border-bottom: 2px solid #1586FF;
+}
+
+.el-menu-item:hover {
+      background-color: transparent !important;
+      color: #000000 !important;
+      border-bottom: 2px solid #1586FF;
+}
+
+.el-menu--horizontal>.el-menu-item {
+      font-weight: bold;
+      width: 100px
+}
+</style>

src/main.ts

@@ -11,6 +11,8 @@ import './assets/main.css'
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'
+
 import 'animate.css'
 
 const app = createApp(App)
@@ -21,3 +23,6 @@ app.use(router)
 
 app.use(ElementPlus)
 app.mount('#app')
+for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+  app.component(key, component)
+}

src/router/index.ts

@@ -1,4 +1,5 @@
 import { createRouter, createWebHistory } from 'vue-router'
+import { winRouter } from './modules/winRouter'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -9,6 +10,7 @@ const router = createRouter({
       meta: { title: '系统首页' },
       component: () => import('../views/honmeIndex.vue'),
     },
+    ...winRouter,
   ],
 })
 

src/router/modules/winRouter.ts

@@ -0,0 +1,50 @@
+export const winRouter = [
+  {
+    path: '/introduceIndex',
+    component: () => import('../../views/win/introduceIndex.vue'),
+    name: 'introduceIndex',
+    meta: {
+      title: '集团介绍',
+    },
+  },
+  {
+    path: '/newsIndex',
+    component: () => import('../../views/win/newsIndex.vue'),
+    name: 'newsIndex',
+    meta: {
+      title: '集团新闻',
+    },
+  },
+  {
+    path: '/messIndex',
+    component: () => import('../../views/win/messIndex.vue'),
+    name: 'messIndex',
+    meta: {
+      title: '信息公开',
+    },
+  },
+  {
+    path: '/popularwillIndex',
+    component: () => import('../../views/win/popularwillIndex.vue'),
+    name: 'popularwillIndex',
+    meta: {
+      title: '民意征集',
+    },
+  },
+  {
+    path: '/watersupplyIndex',
+    component: () => import('../../views/win/watersupplyIndex.vue'),
+    name: 'watersupplyIndex',
+    meta: {
+      title: '供水信息',
+    },
+  },
+  {
+    path: '/inwaterIndex',
+    component: () => import('../../views/win/inwaterIndex.vue'),
+    name: 'inwaterIndex',
+    meta: {
+      title: '走进水务',
+    },
+  },
+]

src/stores/counter.ts

@@ -1,12 +1,16 @@
-import { ref, computed } from 'vue'
+import { ref } from 'vue'
 import { defineStore } from 'pinia'
 
-export const useCounterStore = defineStore('counter', () => {
-  const count = ref(0)
-  const doubleCount = computed(() => count.value * 2)
-  function increment() {
-    count.value++
+/* 
+  设备类型
+  0:pc端
+  1:手机端
+ */
+export const useDeviceTypeStore = defineStore('device', () => {
+  const deviceType = ref('0')
+  const width = window.outerWidth
+  if (width <= 650) {
+    deviceType.value = '1'
   }
-
-  return { count, doubleCount, increment }
+  return { deviceType }
 })

src/views/honmeIndex.vue

@@ -1,42 +1,19 @@
 <template>
-  <div id="honmeIndex">
-    <el-row>
-      <el-col :span="24" class="main animate__animated animate__backInRight" v-loading="loading">
-        <el-col :span="24" class="one">
-          系统首页
-        </el-col>
-      </el-col>
-    </el-row>
-  </div>
+  <windows-index v-if="deviceType == '0'" />
+  <mobile-index v-else-if="deviceType == '1'" />
 </template>
 
 <script setup lang="ts">
-defineOptions({ name: 'honmeIndex' })
-// 基础
-import type { Ref } from 'vue';
-// reactive,
-import { onMounted, ref } from 'vue';
-// 接口
-//import { TestStore } from '@common/src/stores/test';
-//import type { IQueryResult } from '@/util/types.util';
-//const testAxios = TestStore();
-// 加载中
-const loading: Ref<boolean> = ref(false);
-// 分页数据
-//  const skip = 0;
-//  const limit = 10
+import { onMounted } from 'vue'
+import { useDeviceTypeStore } from '../stores/counter'
+import windowsIndex from "./windowsIndex.vue";
+import mobileIndex from "./mobileIndex.vue";
 
-
-// 请求
-onMounted(async () => {
-  loading.value = true;
-  //  await search({ skip, limit });
-  loading.value = false;
-});
-//const search = async (e: { skip: number; limit: number }) => {
-//  const info = { skip: e.skip, limit: e.limit, ...searchInfo.value  };
-//  const res: IQueryResult = await testAxios.query(info);
-//  console.log(res);
-//};
+/* 设备类型 */
+const deviceType = useDeviceTypeStore().deviceType
+/* 初始化 */
+onMounted(() => {
+  console.log('初始化');
+})
 </script>
 <style scoped lang="scss"></style>

src/views/mobileIndex.vue

@@ -0,0 +1,8 @@
+<template>
+      <el-row>手机端</el-row>
+</template>
+
+<script setup lang="ts">
+
+</script>
+<style scoped lang="scss"></style>

src/views/win/introduceIndex.vue

@@ -0,0 +1,18 @@
+<template>
+      <el-row class="introduceIndex animate__animated animate__backInRight">
+            <el-col :span="24" class="menusInfo">
+                  <menusIndex />
+            </el-col>
+            <el-col :span="24" class="info">
+                  走进水务
+            </el-col>
+      </el-row>
+
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'introduceIndex' })
+/* 菜单 */
+import menusIndex from '../../components/windows/menusIndex.vue'
+</script>
+<style scoped lang="scss"></style>

src/views/win/inwaterIndex.vue

@@ -0,0 +1,18 @@
+<template>
+      <el-row class="inwaterIndex animate__animated animate__backInRight">
+            <el-col :span="24" class="menusInfo">
+                  <menusIndex />
+            </el-col>
+            <el-col :span="24" class="info">
+                  集团介绍
+            </el-col>
+      </el-row>
+
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'inwaterIndex' })
+/* 菜单 */
+import menusIndex from '../../components/windows/menusIndex.vue'
+</script>
+<style scoped lang="scss"></style>

src/views/win/messIndex.vue

@@ -0,0 +1,18 @@
+<template>
+      <el-row class="messIndex animate__animated animate__backInRight">
+            <el-col :span="24" class="menusInfo">
+                  <menusIndex />
+            </el-col>
+            <el-col :span="24" class="info">
+                  信息公开
+            </el-col>
+      </el-row>
+
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'messIndex' })
+/* 菜单 */
+import menusIndex from '../../components/windows/menusIndex.vue'
+</script>
+<style scoped lang="scss"></style>

src/views/win/newsIndex.vue

@@ -0,0 +1,18 @@
+<template>
+      <el-row class="news animate__animated animate__backInRight">
+            <el-col :span="24" class="menusInfo">
+                  <menusIndex />
+            </el-col>
+            <el-col :span="24" class="info">
+                  集团新闻
+            </el-col>
+      </el-row>
+
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'newsIndex' })
+/* 菜单 */
+import menusIndex from '../../components/windows/menusIndex.vue'
+</script>
+<style scoped lang="scss"></style>

src/views/win/popularwillIndex.vue

@@ -0,0 +1,18 @@
+<template>
+      <el-row class="popularwillIndex animate__animated animate__backInRight">
+            <el-col :span="24" class="menusInfo">
+                  <menusIndex />
+            </el-col>
+            <el-col :span="24" class="info">
+                  民意征集
+            </el-col>
+      </el-row>
+
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'popularwillIndex' })
+/* 菜单 */
+import menusIndex from '../../components/windows/menusIndex.vue'
+</script>
+<style scoped lang="scss"></style>

src/views/win/watersupplyIndex.vue

@@ -0,0 +1,18 @@
+<template>
+      <el-row class="watersupplyIndex animate__animated animate__backInRight">
+            <el-col :span="24" class="menusInfo">
+                  <menusIndex />
+            </el-col>
+            <el-col :span="24" class="info">
+                  供水信息
+            </el-col>
+      </el-row>
+
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'watersupplyIndex' })
+/* 菜单 */
+import menusIndex from '../../components/windows/menusIndex.vue'
+</script>
+<style scoped lang="scss"></style>

src/views/winParts/conductingBusiness.vue

@@ -0,0 +1,90 @@
+<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>
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'conductingBusiness' })
+// 基础
+import { ref } from 'vue';
+import dividerIndex from '../../components/windows/dividerIndex.vue'
+
+/* 列表 */
+const list = ref([
+      {
+            title: '服务信息',
+            url: '/src/assets/fendoubg1.png'
+      },
+      {
+            title: '获得用水',
+            url: '/src/assets/fendoubg1.png'
+      },
+      {
+            title: '新区营商环境',
+            url: '/src/assets/fendoubg1.png'
+      },
+      {
+            title: '智慧水务',
+            url: '/src/assets/fendoubg1.png'
+      },
+      {
+            title: '客户服务',
+            url: '/src/assets/fendoubg1.png'
+      },
+      {
+            title: '用水常识',
+            url: '/src/assets/fendoubg1.png'
+      }
+])
+
+</script>
+<style scoped lang="scss">
+.conductingBusiness {
+      .top {
+            margin: 0 0 20px 0;
+      }
+
+      .bottom {
+            display: flex;
+            flex-wrap: wrap;
+            align-items: center;
+            justify-content: space-around;
+            gap: 10px;
+
+            .list {
+                  position: relative;
+                  max-width: 32%;
+
+                  .img {
+
+                        .images {
+                              width: 100%;
+                              height: 180px;
+                              border-radius: 5px;
+                        }
+                  }
+
+                  .title {
+                        position: absolute;
+                        bottom: 15px;
+                        width: 100%;
+                        text-align: center;
+                        color: #ffffff;
+                        font-size: 16px;
+                  }
+
+            }
+      }
+}
+</style>

src/views/winParts/introduceIndex.vue

@@ -0,0 +1,119 @@
+<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="images" :src="rightUrl"></el-image>
+                  </el-col>
+            </el-col>
+      </el-row>
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'introduceIndex' })
+// 基础
+import { ref } from 'vue';
+
+const rightUrl = ref('/src/assets/fendoubg1.png')
+const rightIcon = ref('/right.png')
+
+</script>
+<style scoped lang="scss">
+.introduce {
+      .info {
+            width: 100%;
+            height: 40vh;
+            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;
+
+            .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 {
+                                    font-size: 25px;
+                                    font-family: '楷体';
+                                    font-weight: bold;
+                                    margin: 0 0 5px 0;
+                              }
+
+                              span:last-child {
+                                    display: inline-block;
+                                    width: 80px;
+                                    height: 2px;
+                                    background-color: #1586FF;
+                              }
+                        }
+
+                        .enTitle {
+                              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;
+                        }
+                  }
+
+                  .left2 {
+
+                        p {
+                              color: #ffffff;
+                        }
+                  }
+
+                  .left3 {
+
+
+                        .images {
+                              position: absolute;
+                              bottom: 0;
+                              width: 40px;
+                              height: 40px;
+                        }
+                  }
+            }
+
+            .right {
+                  .images {
+                        width: 100%;
+                        height: 100%;
+                        border: 1px solid #f1f1f1;
+                  }
+            }
+      }
+}
+</style>

src/views/winParts/newsIndex.vue

@@ -0,0 +1,208 @@
+<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="8" class="left">
+                        <el-image class="images" :src="leftUrl"></el-image>
+                  </el-col>
+                  <el-col :span="16" 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-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="8" 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="8" 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="8" 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>
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'newsIndex' })
+// 基础
+import { ref } from 'vue';
+import type { TabsPaneContext } from 'element-plus'
+
+import dividerIndex from '../../components/windows/dividerIndex.vue'
+
+const leftUrl = ref('/src/assets/fendoubg1.png')
+
+const activeName = ref('first')
+
+const list = ref([
+      {
+            title: '集团召开2021年度安全生产委员会第一次全体(扩大)视频会议集团召开2021年度安全生产委员会第一次全体(扩大)视频会议',
+            url: '/src/assets/fendoubg1.png',
+            brief: '1月29日，集团召开2021年度安全生产委员会第一次全体(扩大)视频会议，会议由集团总经理王爽主持。会上，集团副总经理于懿通1月29日，集团召开2021年度安全生产委员会第一次全体(扩大)视频会议，会议由集团总经理王爽主持。会上，集团副总经理于懿通',
+            date: '2024-12-22'
+      },
+      {
+            title: '集团召开2021年度安全生产委员会第一次全体(扩大)视频会议',
+            url: '/src/assets/fendoubg1.png',
+            brief: '1月29日，集团召开2021年度安全生产委员会第一次全体(扩大)视频会议，会议由集团总经理王爽主持。会上，集团副总经理于懿通1月29日，集团召开2021年度安全生产委员会第一次全体(扩大)视频会议，会议由集团总经理王爽主持。会上，集团副总经理于懿通',
+            date: '2024-12-22'
+      },
+      {
+            title: '集团召开2021年度安全生产委员会第一次全体(扩大)视频会议',
+            url: '/src/assets/fendoubg1.png',
+            brief: '1月29日，集团召开2021年度安全生产委员会第一次全体(扩大)视频会议，会议由集团总经理王爽主持。会上，集团副总经理于懿通1月29日，集团召开2021年度安全生产委员会第一次全体(扩大)视频会议，会议由集团总经理王爽主持。会上，集团副总经理于懿通',
+            date: '2024-12-22'
+      }
+])
+
+/* 选项卡切换，换数据 */
+const handleClick = (tab: TabsPaneContext, event: Event) => {
+      console.log(tab, event)
+}
+
+</script>
+<style scoped lang="scss">
+.news {
+      .top {
+            margin: 0 0 20px 0;
+      }
+
+      .bottom {
+            display: flex;
+            gap: 10px;
+
+            .left {
+                  height: 400px;
+
+                  .images {
+                        width: 100%;
+                        height: 400px;
+                  }
+            }
+
+            .right {
+                  max-width: 65.3%;
+                  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 {
+                                    max-width: 67%;
+                                    padding: 0 10px;
+                                    position: relative;
+
+                                    .title {
+                                          font-size: 18px;
+                                          font-family: '楷体';
+                                          font-weight: 600;
+                                          margin: 0 0 5px 0;
+                                          color: #333333;
+                                    }
+
+                                    .brief {
+                                          font-size: 16px;
+                                          font-family: '楷体';
+                                          color: #666666;
+                                          font-weight: 600;
+                                          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;
+                                          font-size: 14px;
+                                          font-family: '楷体';
+                                          font-weight: 600;
+                                          color: #999999;
+                                    }
+                              }
+                        }
+
+                        .list:last-child {
+                              margin: none;
+                        }
+                  }
+            }
+      }
+}
+
+::v-deep(.el-tabs__nav-wrap:after) {
+      background-color: transparent;
+}
+
+::v-deep(.el-tabs__header) {
+      margin: 0 0 10px 0;
+}
+</style>

src/views/winParts/notesIndex.vue

@@ -0,0 +1,186 @@
+<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"
+                        @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 { ref } from 'vue';
+
+const active = ref('1')
+const list = ref([
+      {
+            id: '1',
+            title: '水务公告',
+            url: '/src/assets/fendoubg1.png',
+            brief1: '结果公式20240701',
+            brief2: '暖心供水服务，优化营商环境',
+            brief3: '长春水务集团自来水有限公司2022年--2023年末发行的新增地方政府专项债券资金收支情况表',
+      },
+      {
+            id: '2',
+            title: '水质报告',
+            url: '/src/assets/fendoubg1.png',
+            brief1: '结果公式20240701',
+            brief2: '暖心供水服务，优化营商环境',
+            brief3: '长春水务集团自来水有限公司2022年--2023年末发行的新增地方政府专项债券资金收支情况表',
+      },
+      {
+            id: '3',
+            title: '停水信息',
+            url: '/src/assets/fendoubg1.png',
+            brief1: '结果公式20240701',
+            brief2: '暖心供水服务，优化营商环境',
+            brief3: '长春水务集团自来水有限公司2022年--2023年末发行的新增地方政府专项债券资金收支情况表',
+      },
+      {
+            id: '4',
+            title: '管网压力',
+            url: '/src/assets/fendoubg1.png',
+            brief1: '结果公式20240701',
+            brief2: '暖心供水服务，优化营商环境',
+            brief3: '长春水务集团自来水有限公司2022年--2023年末发行的新增地方政府专项债券资金收支情况表',
+      },
+      {
+            id: '5',
+            title: '长水e办',
+            url: '/src/assets/fendoubg1.png',
+            brief1: '结果公式20240701',
+            brief2: '暖心供水服务，优化营商环境',
+            brief3: '长春水务集团自来水有限公司2022年--2023年末发行的新增地方政府专项债券资金收支情况表',
+      },
+      {
+            id: '6',
+            title: '网上缴费',
+            url: '/src/assets/fendoubg1.png',
+            brief1: '结果公式20240701',
+            brief2: '暖心供水服务，优化营商环境',
+            brief3: '长春水务集团自来水有限公司2022年--2023年末发行的新增地方政府专项债券资金收支情况表',
+      }
+])
+
+/* 切换 */
+const toChange = (event: object) => {
+      active.value = event['id']
+}
+</script>
+<style scoped lang="scss">
+.notes {
+      .info {
+            display: flex;
+            gap: 10px;
+
+            .list {
+                  width: 15%;
+                  height: 220px;
+                  position: relative;
+
+                  .imgs {
+
+                        .images {
+                              width: 100%;
+                              height: 220px;
+                              border-radius: 5px;
+                        }
+                  }
+
+                  .mess {
+                        position: absolute;
+                        top: 0;
+                        width: 100%;
+                        height: 220px;
+                        border-radius: 5px;
+                        padding: 0 10px;
+
+                        background-color: #ffffff5f;
+
+                        .title {
+                              display: flex;
+                              flex-direction: column;
+                              padding: 20px 0 10px 0;
+
+                              .titles {
+                                    color: #02448B;
+                                    font-size: 18px;
+                                    font-family: '楷体';
+                                    font-weight: bolder;
+                              }
+                        }
+
+                        .other {
+                              position: absolute;
+                              bottom: 10px;
+
+                              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: #ffffff;
+                                    margin: 0 0 5px 0;
+                              }
+
+                              .borderBottom {
+                                    display: inline-block;
+                                    width: 40px;
+                                    border-bottom: 2px solid #ffffff;
+                              }
+                        }
+
+                        .other {
+                              p {
+                                    color: #ffffff;
+                              }
+                        }
+                  }
+            }
+      }
+}
+
+@keyframes mymove {
+      from {
+            width: 15%;
+      }
+
+      to {
+            width: 20%;
+      }
+}
+</style>

src/views/winParts/popularWill.vue

@@ -0,0 +1,141 @@
+<template>
+      <el-row class="popularWill">
+            <el-col :span="24" class="top">
+                  <dividerIndex :info="{ title: '民意征集', enTitle: 'PUBLIC OPINION COLLECTION' }" />
+            </el-col>
+            <el-col :span="24" class="bottom">
+                  <el-col :span="8" class="list animate__animated animate__backInLeft" v-for="item in list" :key="item">
+                        <template v-if="item.type == '1'">
+                              <el-col :span="24" class="img">
+                                    <el-image class="images" :src="item.url"></el-image>
+                              </el-col>
+                              <el-col :span="24" class="info">
+                                    <el-col :span="24" class="title">
+                                          {{ item.title }}
+                                    </el-col>
+                                    <el-col :span="24" class="brief">
+                                          {{ item.brief }}
+                                    </el-col>
+                              </el-col>
+                        </template>
+                        <template v-else-if="item.type == '2'">
+                              <el-col :span="24" class="info">
+                                    <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="24" class="img img2">
+                                    <el-image class="images" :src="item.url"></el-image>
+                              </el-col>
+                        </template>
+                        <template v-else-if="item.type == '3'">
+                              <el-col :span="24" class="img">
+                                    <el-image class="images" :src="item.url"></el-image>
+                              </el-col>
+                              <el-col :span="24" class="info">
+                                    <el-col :span="24" class="title">
+                                          {{ item.title }}
+                                    </el-col>
+                                    <el-col :span="24" class="brief">
+                                          {{ item.brief }}
+                                    </el-col>
+                              </el-col>
+                        </template>
+                  </el-col>
+            </el-col>
+      </el-row>
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'popularWill' })
+
+// 基础
+import { ref } from 'vue';
+import dividerIndex from '../../components/windows/dividerIndex.vue'
+/* 列表 */
+const list = ref([
+      {
+            type: '1',
+            title: '热点回应',
+            brief: '供水服务政策法规是为了加强城市供水管理，发展城市供水事业，保障城市生活、生产和其他建设用水而制定的。它包括与制水、供水、排水有关的，由国家、省、地方及行业主管部门发布的法律、法规及政策。',
+            url: '/src/assets/fendoubg1.png'
+      },
+      {
+            type: '2',
+            title: '服务咨询',
+            brief: '自来水是最基本的民生资源，关系到千家万户，关系到城市发展。为什么停水?水质怎么保障?这些问题受到广泛的关注。那么在自来水的生产供应过程中，都有什么您十分关切的问题呢?水务集团在此进行回应。',
+            url: '/src/assets/fendoubg1.png'
+      },
+      {
+            type: '3',
+            title: '满意度调查',
+            brief: '水投集团满意度调查是为了了解客户对水投集团提供的服务的满意程度而进行的一项调查。通过该调查，我们希望收集客户对水投集团的服务质量、响应速度、沟通效果等方面的意见和反馈，以便进一步改进和优化我们的服务。',
+            url: '/src/assets/fendoubg1.png'
+      }
+])
+</script>
+<style scoped lang="scss">
+.popularWill {
+      .top {
+            text-align: center;
+            margin: 0 0 20px 0;
+      }
+
+      .bottom {
+            display: flex;
+            flex-wrap: wrap;
+            align-items: center;
+            justify-content: space-around;
+            gap: 10px;
+
+
+            .list {
+                  max-width: 32%;
+                  border-radius: 5px;
+                  box-shadow: 0 0 4px #cccccc;
+                  background-color: #ffffff;
+
+                  .img {
+
+                        .images {
+                              width: 100%;
+                              height: 180px;
+                              border-radius: 5px;
+                        }
+                  }
+
+                  .img2 {
+                        position: relative;
+                        top: 5px;
+                  }
+
+
+                  .info {
+                        padding: 10px;
+
+                        .title {
+                              font-size: 16px;
+                              font-family: '楷体';
+                              font-weight: 600;
+                              margin: 0 0 5px 0;
+                        }
+
+                        .brief {
+                              padding: 0 0 10px 0;
+                              font-size: 14px;
+                              color: #6a6a6a;
+                              overflow: hidden;
+                              text-overflow: ellipsis;
+                              -webkit-line-clamp: 5;
+                              word-break: break-all;
+                              display: -webkit-box;
+                              -webkit-box-orient: vertical;
+                        }
+                  }
+            }
+      }
+}
+</style>

src/views/winParts/topIndex.vue

@@ -0,0 +1,37 @@
+<template>
+      <el-row class="topIndex">
+            <el-col :span="24" class="info animate__animated animate__zoomIn">
+                  <el-col :span="24" class="title">
+                        长春水投
+                  </el-col>
+                  <el-col :span="24" class="enTitle">
+                        CHANGCHUN WATER GROUP
+                  </el-col>
+            </el-col>
+      </el-row>
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'topIndex' })
+
+</script>
+<style scoped lang="scss">
+.topIndex {
+      margin: 5% 0 5% 0;
+
+      .info {
+            .title {
+                  font-size: 35px;
+                  font-family: monospace;
+                  font-weight: bolder;
+            }
+
+            .enTitle {
+                  font-size: 22px;
+                  font-family: monospace;
+                  font-weight: bold;
+
+            }
+      }
+}
+</style>

src/views/windowsIndex.vue

@@ -0,0 +1,92 @@
+<template>
+      <el-row class="main">
+            <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">
+                              <topIndex />
+                        </el-col>
+                        <el-col :span="24" class="zero">
+                              <introduceIndex />
+                        </el-col>
+                        <el-col :span="24" class="zero">
+                              <notes-index />
+                        </el-col>
+                        <el-col :span="24" class="zero">
+                              <news-index />
+                        </el-col>
+                        <el-col :span="24" class="zero">
+                              <conducting-business />
+                        </el-col>
+                        <el-col :span="24" class="zero">
+                              <popular-will />
+                        </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: 'windowsIndex' })
+
+/* 菜单 */
+import menusIndex from '../components/windows/menusIndex.vue'
+/* 头部信息 */
+import topIndex from './winParts/topIndex.vue'
+/* 集团介绍 */
+import introduceIndex from './winParts/introduceIndex.vue'
+/* 水务公告 */
+import notesIndex from './winParts/notesIndex.vue'
+/* 集团新闻 */
+import newsIndex from './winParts/newsIndex.vue'
+/* 营商环境 */
+import conductingBusiness from './winParts/conductingBusiness.vue'
+/* 民意调查 */
+import popularWill from './winParts/popularWill.vue'
+/* 底部信息 */
+import footIndex from '../components/windows/footIndex.vue'
+</script>
+<style scoped lang="scss">
+.main {
+      position: relative;
+
+      .bigImage {
+            height: 30em;
+            overflow: hidden;
+            background-image: url('../assets/fendoubg1.png');
+            background-repeat: no-repeat;
+            background-size: 100% 100%;
+      }
+
+      .info {
+            position: absolute;
+            top: 0;
+            width: 100%;
+            height: 100vh;
+            overflow: hidden;
+
+            .menus {
+                  height: 80px;
+                  overflow: hidden;
+            }
+
+            .bottom {
+                  height: calc(100vh - 80px);
+                  overflow-y: auto;
+
+                  .zero {
+                        margin: 0 0 20px 0;
+                        padding: 0 22%;
+                  }
+
+            }
+      }
+
+}
+</style>