门户网站的基本渲染

src/components/Pagination/index.vue

@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <el-pagination
+      background
+      layout="prev, pager, next,jumper"
+      :total="1000"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page.sync="currentPage"
+    >
+    </el-pagination>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {};
+  },
+  methods:{
+     handleSizeChange(val) {
+        console.log(`每页 ${val} 条`);
+      },
+      handleCurrentChange(val) {
+        console.log(`当前页: ${val}`);
+      }
+  }
+};
+</script>
+ 
+<style lang = "scss" scoped>
+</style>

src/layout/components/Footer/index.vue

@@ -2,15 +2,16 @@
   <div class="footer">
     <div class="container">
       <ul>
-        <span> 联系电话：</span> <span>********</span> 
-        <span> 传真：</span><span>****</span>
-        <span> 邮箱:</span><span>****@163.com</span>
+        <span> 地址 :</span> <span>马边彝族自治县民建镇东光大道435号</span> 
+        
+      </ul>
+      <ul>
+        <span> 电话：</span><span>4521369</span>
+        <span> 版权所有：</span> <span>马边彝族自治县自来水有限责任公司</span>
       </ul>
-
       <ul>
-        <span> 地址：</span>  <span>四川省成都市青羊区159号3栋501</span>
-        <span> 版权所有：</span> <span>成都同飞科技责任有限公司</span>
-        <span> 技术支持：</span> <span>成都同飞科技责任有限公司</span>
+        <span>蜀ICP备19016077号-1 </span>                
+        <span>  技术支持：</span> <span>成都同飞科技责任有限公司</span>
       </ul>
     </div>
   </div>

src/router/router.config.js

@@ -66,16 +66,35 @@ export const sysMenu = [
                 type: 'sys',
                 component: Layout,
                 //alwaysShow: true,
-                label: '组织结构',
-                meta: { title: '组织结构', icon: "iconfont iconkaoheguanli" },
+                label: '结构简介',
+                meta: { title: '结构简介', icon: "iconfont iconkaoheguanli" },
                 children: [{
                         path: 'organization',
                         name: 'organization',
                         type: 'sys',
                         component: () =>
                             import ('@/views/currentSystem/companyProfile/organization'),
-                        label: '组织结构',
-                        meta: { title: '组织结构' }
+                        label: '结构简介',
+                        meta: { title: '结构简介' }
+                    }
+                ]
+            },
+            {
+                path: '',
+                pathId: 'leaderProfile',
+                type: 'sys',
+                component: Layout,
+                //alwaysShow: true,
+                label: '领导简介',
+                meta: { title: '领导简介', icon: "iconfont iconkaoheguanli" },
+                children: [{
+                        path: 'leaderProfile',
+                        name: 'leaderProfile',
+                        type: 'sys',
+                        component: () =>
+                            import ('@/views/currentSystem/companyProfile/leaderProfile'),
+                        label: '领导简介',
+                        meta: { title: '领导简介' }
                     }
                 ]
             },
@@ -127,6 +146,74 @@ export const sysMenu = [
         ]
         
     },
+    {
+        menuId: 'InfoDisclosure',
+        menuName: '信息公开',
+        children:[
+            {
+                path: '',
+                pathId: 'InfoDisclosure',
+                type: 'sys',
+                component: Layout,
+                // alwaysShow: true,
+                label: '办事公开',
+                meta: { title: '办事公开', icon: "iconfont iconkaohezonglan" },
+                children: [{
+                    path: 'InfoDisclosure',
+                    name: 'InfoDisclosure',
+                    type: 'sys',
+                    component: () =>
+                        import ('@/views/currentSystem/InfoDisclosure/openWork.vue'),
+                    label: '办事公开',
+                    meta: { title: '办事公开' }
+                }]
+            },
+            {
+                path: '',
+                pathId: 'announcement',
+                type: 'sys',
+                component: Layout,
+                // alwaysShow: true,
+                label: '停水公告',
+                meta: { title: '停水公告', icon: "iconfont iconkaohezonglan" },
+                children: [{
+                    path: 'announcement',
+                    name: 'announcement',
+                    type: 'sys',
+                    component: () =>
+                        import ('@/views/currentSystem/InfoDisclosure/announcement.vue'),
+                    label: '停水公告',
+                    meta: { title: '停水公告' }
+                }]
+            },
+        ]
+        
+    },
+    {
+        menuId: 'hotline',
+        menuName: '联系我们',
+        children:[
+            {
+                path: '',
+                pathId: 'hotline',
+                type: 'sys',
+                component: Layout,
+                // alwaysShow: true,
+                label: '联系我们',
+                meta: { title: '联系我们', icon: "iconfont iconkaohezonglan" },
+                children: [{
+                    path: 'hotline',
+                    name: 'hotline',
+                    type: 'sys',
+                    component: () =>
+                        import ('@/views/currentSystem/hotline/hotline'),
+                    label: '联系我们',
+                    meta: { title: '联系我们' }
+                }]
+            },
+        ]
+        
+    },
 ]
 
 // 公司概述

src/styles/base.scss

@@ -13,6 +13,8 @@ body {
             }
         }
     }
+    left: 0;
+    margin: 0;
 }
 
 // label {

src/views/currentSystem/InfoDisclosure/announcement.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="t-container">
+    <!-- 停水公告 -->
+    <div class="content">
+      停水公告
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+    };
+  },
+  methods: {
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.t-container {
+  width: 100%;
+  position: absolute;
+  top: 43px;
+  bottom: 0;
+}
+</style>

src/views/currentSystem/InfoDisclosure/openWork.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="t-container">
+    <!-- 办事公开 -->
+    <div class="content">
+        <ul>
+            <li>
+                <div class="l">20220308服务公告</div>
+                <div class="r">2022.03.08</div>
+            </li>
+            <li>
+                <div class="l">20220308服务公告</div>
+                <div class="r">2022.03.08</div>
+            </li>
+            <li>
+                <div class="l">20220308服务公告</div>
+                <div class="r">2022.03.08</div>
+            </li>
+            <li>
+                <div class="l">20220308服务公告</div>
+                <div class="r">2022.03.08</div>
+            </li>
+        </ul>
+        <Pagination />
+    </div>
+  </div>
+</template>
+
+<script>
+import Pagination from '@/components/Pagination/index.vue'
+export default {
+    components:{
+        Pagination
+    },
+  data() {
+    return {
+    };
+  },
+  methods: {
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.t-container {
+  width: 100%;
+  position: absolute;
+  top: 43px;
+  bottom: 0;
+}
+ul{
+    li{
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        font-size: 28px;
+        position: relative;
+        margin: 20px 0 20px 10px;
+        .l::before{
+            content: '';
+            position: absolute;
+            left: -8px;
+            top: 12px;
+            width: 6px;
+            height: 6px;
+            background: #000;
+            border-radius: 50%;
+        }
+    }
+}
+</style>

src/views/currentSystem/companyDynamics/companyDynamics.vue

@@ -1,19 +1,53 @@
 <template>
   <div class="t-container">
-    
-    <!-- <Breadcrumb /> -->
+    <ul>
+      <li>
+        <img src="./images/u15.svg" alt="" />
+        <div class="content">
+          <h3>自来水公司送服务 进社区 “水叮咚”贴心解答居民用水疑问</h3>
+          <p>
+            对于老年人来说，面对面沟通、手把手指导是最高效的，在供水工作者的讲解下，我从购水到用水的疑问都得到了解答。”
+          </p>
+          <p>2022-03-08</p>
+        </div>
+        <a href="#">阅读更多></a>
+      </li>
+      <li>
+        <img src="./images/u15.svg" alt="" />
+        <div class="content">
+          <h3>自来水公司送服务 进社区 “水叮咚”贴心解答居民用水疑问</h3>
+          <p>
+            对于老年人来说，面对面沟通、手把手指导是最高效的，在供水工作者的讲解下，我从购水到用水的疑问都得到了解答。”
+          </p>
+          <p>2022-03-08</p>
+        </div>
+        <a href="#">阅读更多></a>
+      </li>
+    </ul>
+    <Pagination />
   </div>
 </template>
 
 <script>
-import Breadcrumb from '@/components/Breadcrumb/index.vue'
+import Pagination from '@/components/Pagination/index.vue'
 export default {
-    components:{
-        Breadcrumb
-    },
+  components:{
+    Pagination
+  },
+  components: {},
   data() {
-    return {};
+    return {
+      currentPage: 5,
+    };
   },
+  methods:{
+     handleSizeChange(val) {
+        console.log(`每页 ${val} 条`);
+      },
+      handleCurrentChange(val) {
+        console.log(`当前页: ${val}`);
+      }
+  }
 };
 </script>
  
@@ -24,4 +58,19 @@ export default {
   top: 43px;
   bottom: 0;
 }
+li {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 20px 0;
+}
+.content {
+  width: 60%;
+  margin: 0 20px;
+}
+h3,
+a {
+  color: rgb(82, 168, 247);
+}
 </style>

src/views/currentSystem/companyDynamics/images/u15.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="272px" height="170px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -156 -636 )">
+    <path d="M 156 636  L 428 636  L 428 806  L 156 806  L 156 636  " fill-rule="nonzero" fill="#cccccc" stroke="none" />
+    <path d="M 168 648  L 416 648  L 416 794  L 168 794  L 168 648  " fill-rule="nonzero" fill="#ffffff" stroke="none" />
+    <path d="M 310.19 687  C 303.05 687  297.44 681.39  297.44 674.25  C 297.44 667.11  303.05 661.5  310.19 661.5  C 317.33 661.5  322.94 667.11  322.94 674.25  C 322.94 681.39  317.33 687  310.19 687  " fill-rule="nonzero" fill="#cccccc" stroke="none" />
+    <path d="M 173 790  L 173 714.65  L 232.75 680.4  L 316.4 738.625  L 364.20000000000005 700.95  L 412 738.625  L 412 790  L 173 790  " fill-rule="nonzero" fill="#169bd5" stroke="none" />
+  </g>
+</svg>

src/views/currentSystem/companyProfile/companyProfile.vue

@@ -1,13 +1,14 @@
 <template>
   <div class="t-container">
     <!-- 公司简介 -->
-    公司简介
+    <h2>公司简介</h2>
+    <div class="content">
+      马边彝族自来水公司是......
+    </div>
   </div>
 </template>
 
 <script>
-import { getUserList } from '@/api/base';
-import { excelUpload, excelDownload } from '@/api/common';
 export default {
   data() {
     return {

src/views/currentSystem/companyProfile/leaderProfile.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="t-container">
+    <!-- 领导简介 -->
+    领导简介
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+.t-container {
+  width: 100%;
+  position: absolute;
+  top: 43px;
+  bottom: 0;
+}
+</style>

src/views/currentSystem/dashboard/index.vue

@@ -1,36 +1,130 @@
 <template>
   <div class="app-container">
     <!-- 首页 -->
-    <div class="dashboard-text">这个是首页</div>
+    <div class="block">
+      <el-carousel trigger="click" autoplay :interval="3000" :arrow='never'>
+        <el-carousel-item v-for="item in urlList" :key="item.id">
+          <img :src="item.bannerUrl" alt="" width="100%" />
+        </el-carousel-item>
+      </el-carousel>
+    </div>
+
+    <div class="announce">
+      <div class="announceL">
+        <div class="box">
+
+        </div>
+      </div>
+      <div class="announceR">
+        <el-tabs v-model="activeName" @tab-click="handleClick" stretch>
+          <el-tab-pane label="服务网点" name="first" :style="{fontSize:'25px'}">
+            <p><span class="iconfont iconwushuichulichang2"> </span> 马边彝族自治县民建镇东光大道435号</p>
+            <p><span class="iconfont iconcbjhgl1"> </span> 周一至周六8:30—17:00（法定节假日除外）</p>
+            <p> 028-2565458</p>
+          </el-tab-pane>
+          <el-tab-pane label="停水通知" name="second"><p>停水通知</p></el-tab-pane>
+        </el-tabs>
+      </div>
+    </div>
+    <div class="outLink">
+      https://www.h2o-china.com
+    </div>
+    <div class="outWork">
+      <div class="outWorkL">
+        <h3>--------- 信息公开 ---------</h3>
+      </div>
+      <div class="outWorkR"></div>
+    </div>
+    <!-- 回到顶部 -->
+    <!-- <el-backtop target=".page-component__scroll .el-scrollbar__wrap" :bottom="100">
+    <div
+      :style="{
+        height: '100%',
+        width: '100%',
+        backgroundColor: '#f2f5f6',
+        boxShadow: '0 0 6px rgba(0,0,0, .12)',
+        textAlign: 'center',
+        lineHeight: '40px',
+        color: '#1989fa',
+      }"
+    >
+      UP
+    </div>
+  </el-backtop> -->
   </div>
+
+
+  
 </template>
 
 <script>
-import { client } from '@/utils/index'
+import { client } from "@/utils/index";
 
 export default {
-  name: 'Dashboard',
+  name: "Dashboard",
   components: {},
   data() {
     return {
-    }
+      urlList: [
+        { bannerUrl: require("./images/u6.jpg"), id: 1 },
+        { bannerUrl: require("./images/u6.jpg"), id: 1 },
+        { bannerUrl: require("./images/u6.jpg"), id: 1 },
+      ],
+      activeName: 'first'
+    };
   },
   computed: {
     dialogWidthHeight() {
-      return [client().width * 0.8 + 'px', client().height * 0.79 + 'px']
-    }
-  },
-  mounted() {
+      return [client().width * 0.8 + "px", client().height * 0.79 + "px"];
+    },
   },
+  mounted() {},
   methods: {
-
-  }
-}
+    handleClick(tab, event) {
+        console.log(tab, event);
+      }
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-.app-container{
+.app-container {
   width: 100%;
   background-size: 100% 100%;
+  padding: 0;
+}
+.announce{
+  display: flex;
+  justify-content: space-between;
+  // align-items: center;
+  margin-top: 40px;
+  padding: 0 30px;
+}
+.announceL{
+  flex: 1;
+  height: 400px;
+  border: 1px solid #000;
+}
+.announceR{
+  width: 60%;
+  font-size: 28px;
+  margin-left: 30px;
+}
+/deep/.el-tabs__item{
+  font-size: 28px;
+}
+.outLink{
+  font-size: 26px;
+  height: 127px;
+  line-height: 127px;
+  text-align: center;
+  margin: 20px 30px;
+}
+p{
+  margin-top: 20px;
+}
+span{
+  color: #333;
+  font-size: 26px;
 }
 </style>

src/views/currentSystem/hotline/hotline.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="t-container">
+    <!-- 联系我们 -->
+    <div class="content">
+      <p>马边彝族自治县自来水有限公司</p>
+      <p>地址：马边彝族自治县民建镇东光大道435号</p>
+      <p>邮编：614600</p>
+      <p>电话：0833-4521369</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dic: null,
+      equipList: [], //设备列表
+    };
+  },
+  created() {
+    console.log('创建列表');
+  },
+  methods: {
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.t-container {
+  width: 100%;
+  position: absolute;
+  top: 43px;
+  bottom: 0;
+}
+.content{
+    width: 60%;
+    text-align: center;
+    font-size: 26px;
+}
+
+</style>