From 2862ef4f1b005e9048de9851eada43cabe61be41 Mon Sep 17 00:00:00 2001
From: wangting <2940883238@qq.com>
Date: Fri, 31 May 2024 17:46:20 +0800
Subject: [PATCH] xiugai

---
 src/components/bottom.vue       |   2 +-
 src/router/index.js             |   4 +-
 src/views/index.vue             |   2 +-
 src/views/pages/cases.vue       |   9 +-
 src/views/pages/home.vue        |  13 ++-
 src/views/pages/honor.vue       | 136 +++++++++++++++-------
 src/views/pages/information.vue | 193 ++++++++++++++++++--------------
 src/views/pages/introduce.vue   |  57 ++++++++--
 8 files changed, 277 insertions(+), 139 deletions(-)

diff --git a/src/components/bottom.vue b/src/components/bottom.vue
index afe1ad0..8ddadac 100644
--- a/src/components/bottom.vue
+++ b/src/components/bottom.vue
@@ -2,7 +2,7 @@
     <div class="page">
         <p>版权所有： 江苏中业消防技术服务有限公司</p>
         <p>地址：连云港市海州区海连东路42号（杰瑞科技创意产业园A1房屋的西三层） </p>
-        <p>电话：18912177843 邮箱：69421099@163.com 网址：www.jszyxiaofang.com</p>
+        <p>电话：18936679119  邮箱：350862995@qq.com  网址：www.jszyxiaofang.com</p>
         <p> 苏ICP备2024099083号-1</p>
         
     </div>
diff --git a/src/router/index.js b/src/router/index.js
index c4ed3d7..403bfe8 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -94,5 +94,7 @@ const router = createRouter({
   history: createWebHistory(process.env.BASE_URL),
   routes
 })
-
+router.afterEach((to,from,next) => {
+  window.scrollTo(0,0);
+})
 export default router
diff --git a/src/views/index.vue b/src/views/index.vue
index 05dcd9e..aefb06e 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -171,7 +171,7 @@ export default {
                         display: inline-block;
                         font-size: .225rem;
                         width: 2.5rem;
-                        color: #189eef;
+                        color: #1D2088;
                         margin-left: .375rem;
                         cursor: pointer;
                     }
diff --git a/src/views/pages/cases.vue b/src/views/pages/cases.vue
index 4e449de..cc8da1b 100644
--- a/src/views/pages/cases.vue
+++ b/src/views/pages/cases.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="page">
         <div class="list">
-            <div class="item"  v-for="(item,i) in cases">
+            <div class="item"  v-for="(item,i) in cases" @click="jumpToArticle(item.id)">
                 <img :src="$baseUrl+item.img" alt="">
                 <div class="title">{{item.tittle}}</div>
             </div>
@@ -39,7 +39,7 @@
       
       methods:{
         getData(){
-            this.$http.get(`zy/website/article/page?type=工程案例&pageNum=${this.queryParams.pageNum}&pageSize=${this.queryParams.pageSize}`).then(res=>{
+            this.$http.get(`zy/website/article/page?type=工程案例&pageNum=${this.queryParams.pageNum}&pageSize=${this.queryParams.pageSize}&isAsc=asc&orderByColumn=submit_time`).then(res=>{
                 this.cases = res.data.rows
                 this.total = res.data.total
             })
@@ -100,6 +100,11 @@
                 position: relative;
                 height: 3.75rem;
                 cursor: pointer;
+                &:hover{
+                    .title{
+                        color: #189eef;
+                    }
+                }
                
                 img{
                     width: 90%;
diff --git a/src/views/pages/home.vue b/src/views/pages/home.vue
index edb9125..eb0614a 100644
--- a/src/views/pages/home.vue
+++ b/src/views/pages/home.vue
@@ -44,7 +44,7 @@
                 </div>
             </div>
             <div class="list">
-                <div class="item" v-for="(item,i) in cases">
+                <div class="item" v-for="(item,i) in cases" @click="jumpToArticle(item.id)">
                     <img :src="$baseUrl+item.img" alt="">
                     <div class="title">{{item.tittle}}</div>
                 </div>
@@ -70,8 +70,8 @@
                 <div class="list">
                     <div class="left">
                         <div class="item" v-for="(item,i) in information" @click="jumpToArticle(item.id)">
-                            <span class="title" v-if="item.tittle.length<=35">（测试）{{item.tittle}}</span>
-                            <span class="title" v-else>（测试）{{item.tittle.slice(0,35)}}...</span>
+                            <span class="title" v-if="item.tittle.length<=35">{{item.tittle}}</span>
+                            <span class="title" v-else>{{item.tittle.slice(0,35)}}...</span>
                             <span class="time">{{item.submitTime}}</span>
                         </div>
                     </div>
@@ -141,7 +141,7 @@
             this.$http.get(`zy/website/article/page?type=公司介绍`).then(res=>{
                 this.introduce = res.data.rows[0]
             })
-            this.$http.get(`zy/website/article/page?type=工程案例&pageNum=1&pageSize=8`).then(res=>{
+            this.$http.get(`zy/website/article/page?type=工程案例&pageNum=1&pageSize=8&isAsc=asc&orderByColumn=submit_time`).then(res=>{
                 this.cases = res.data.rows
             })
             this.$http.get(`zy/website/article/page?type=公司新闻&pageNum=${this.queryParams.pageNum}&pageSize=${this.queryParams.pageSize}`).then(res=>{
@@ -260,6 +260,11 @@
                     margin-bottom: .55rem;
                     position: relative;
                     cursor: pointer;
+                    &:hover{
+                        .title{
+                            color: #189eef;
+                        }
+                    }
                     img{
                         width: 100%;
                         height: 100%;
diff --git a/src/views/pages/honor.vue b/src/views/pages/honor.vue
index 1271593..56fac8d 100644
--- a/src/views/pages/honor.vue
+++ b/src/views/pages/honor.vue
@@ -1,34 +1,22 @@
 <template>
     <div class="page">
-        <!-- <div class="list">
-            <div class="item" v-for="(item,i) in certificate" @click="showImg(item)">
-                <img :id="item.id" :src="getUrl(item.id,$baseUrl+item.img)">
-                <div class="title">{{item.tittle}}</div>
-            </div>
+        <div class="left">
+            <div class="nav-title">资质证书</div>
+            <div :class="{'item': true, active: activeIndex == i}" v-for="(item,i) in certificate" @click="showImg(i)">{{item.tittle}}</div>
         </div>
-        <div class="preview" v-if="bigImgShow">
-            <img id="bigImg" :src="bigImg" alt="">
-            <el-icon class="icon" :size="48" color="#fff" @click="bigImgShow=false">
-                <CircleClose />
-            </el-icon>
-        </div> -->
-        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" tab-position="left" >
-            <el-tab-pane :label="item.tittle" :name="i" v-for="(item,i) in certificate">
-                <div class="item">
-                    <div class="title">{{item.tittle}}</div>
-                    <el-watermark
-                        class="watermark"
-                        content="中业消防"
-                        :font="font"
-                        :z-index="1"
-                        >
-                        <div class="demo">
-                            <img :id="item.id" :src="getUrl(item.id,$baseUrl+item.img)">
-                        </div>
-                        </el-watermark>
+        <div class="right">
+            <div class="title">{{currentImg.tittle}}</div>
+            <el-watermark
+                class="watermark"
+                content="中业消防"
+                :font="font"
+                :z-index="1"
+                >
+                <div class="demo">
+                    <img :id="currentImg.id" :src="getUrl(currentImg.id,$baseUrl+currentImg.img)" style="margin: 0 auto; width: calc(100vw - 8.5rem)">
                 </div>
-            </el-tab-pane>
-        </el-tabs>
+            </el-watermark>
+        </div>
     </div>
   </template>
   
@@ -42,6 +30,7 @@
       data(){
           return{
             activeName:0,
+            activeIndex:0,
             certificate:[],
             bigImgShow: false,
             bigImg:'',
@@ -49,6 +38,7 @@
                 fontSize: 26,
                 color: 'rgba(0, 0, 0, 0.15)',
             },
+            currentImg:{}
           }
       },
       created(){
@@ -59,16 +49,13 @@
         getData(){
             this.$http.get(`zy/website/article/page?type=资质证书`).then(res=>{
                 this.certificate = res.data.rows
+                this.currentImg = this.certificate[0]
             })
         },
-        showImg(item){
-            this.bigImgShow = true
-            this.$nextTick(()=>{
-                const element = document.getElementById('bigImg');
-                this.hidePic(element,this.$baseUrl+item.img)
-
-
-            })
+        showImg(i){
+            this.currentImg = this.certificate[i]
+            this.activeIndex = i
+           
         },
         // 防止盗图
         getUrl(id,url){
@@ -124,10 +111,83 @@
     ::v-deep .el-tabs__active-bar{
         background-color: #1D2088;
     }
+    ::v-deep .watermark{
+        .demo{
+            img{
+                margin: o auto;
+            }
+        }
+    }
     .page{
-        padding: 1rem 1rem;
-       
+        display: flex;
+        justify-content: stretch;
+        padding: 0 2rem;
+        background-color: #f5f5f5;
+        height: auto;
+        .left{
+            width: 3.75rem;
+            background-color: #e7e7e7;
+            height: 12rem;
             .item{
+                height: 1rem;
+                border-bottom: 1px dashed #b6b4b4;
+                line-height: 1rem;
+                padding-left: .6rem;
+                padding-right: .375rem;
+                white-space: nowrap; 
+                overflow: hidden;
+                text-overflow: ellipsis;
+                position: relative;
+                font-size: .32rem;
+                cursor: pointer;
+                &::before{
+                    position: absolute;
+                    content: '';
+                    width: .075rem;
+                    height: .075rem;
+                    border-radius: 50%;
+                    background-color: #a8a6a6;
+                    left: .375rem;
+                    top: .4625rem;
+                }
+                &:hover{
+                    color: #171A89;
+                }
+            }
+            .active{
+                color: #171A89;
+            }
+            .nav-title{
+                height: 1.4rem;
+                line-height: 1.4rem;
+                font-size: .45rem;
+                background-color: RGBA(100, 134, 207, .7);
+                color: #fff;
+                padding-left: .6rem;
+                font-weight: bold;
+               
+            }
+
+        }
+        .right{
+            background-color: #fff;
+            width: calc(100vw - 7.75rem);
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            padding-bottom: 2rem;
+            .title{
+                font-size: .5rem;
+                text-align: center;
+                color: #333333;
+                font-weight: bold;
+                margin: .5rem 0 .375rem 0;
+            }
+            
+        }
+       
+            /* .item{
                 img{
                     width: calc(100vw - 8rem);
                     height: auto;
@@ -140,7 +200,7 @@
                     font-weight: bold;
                     margin-bottom: .375rem;
                 }
-            }
+            } */
         .preview{
             position: fixed;
             z-index: 999;
diff --git a/src/views/pages/information.vue b/src/views/pages/information.vue
index c931416..501029c 100644
--- a/src/views/pages/information.vue
+++ b/src/views/pages/information.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="page">
-        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" tab-position="left" >
+        <!-- <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" tab-position="left" >
             <el-tab-pane label="公司新闻" name="1">
                 <div class="item-1">
                    <div class="item" v-for="(item,i) in news" @click="jumpToArticle(item.id)">
@@ -30,17 +30,28 @@
                     </div>
                  </div>
             </el-tab-pane>
-        </el-tabs>
-        <div class="page-toggle" v-if="show">
-            <el-pagination
-              background
-              @current-change="handleCurrentChange"
-              :page-size="queryParams.pageSize"
-              layout="prev, pager, next"
-              :total="total">
-            </el-pagination>
+        </el-tabs> -->
+        
+          <div class="left">
+            <div class="nav-title">资讯中心</div>
+            <div :class="{'item': true, active: activeName == i}" v-for="(item,i) in menu" @click="handleClick(i)">{{item.name}}</div>
+        </div>
+        <div class="right">
+            <div class="item" v-for="(item,i) in dataList" @click="jumpToArticle(item.id)">
+                <div class="title" v-if="item.tittle.length>38">{{item.tittle.slice(0,38)}}...</div>
+                <div class="title" v-else>{{item.tittle}}.</div>
+                <div class="time">{{item.submitTime}}</div>
+            </div>
+            <div class="page-toggle" v-if="show">
+                <el-pagination
+                background
+                @current-change="handleCurrentChange"
+                :page-size="queryParams.pageSize"
+                layout="prev, pager, next"
+                :total="total">
+                </el-pagination>
           </div>
-       
+        </div>
     </div>    
           
   </template>
@@ -53,10 +64,16 @@
       data(){
           return{
             show: true,
-            activeName: '1',
+            activeName: 0,
+            dataList:[],
             news:[],
             dynamic:[],
             statute:[],
+            menu: [
+                {name: '公司新闻'},
+                {name: '行业动态'},
+                {name: '法规标准'},
+            ],
             total: 0,
             queryParams:{
                 pageNum: 1,
@@ -69,33 +86,36 @@
       },
       
       methods:{
+        showData(i){
+            
+        },
         jumpToArticle(id){
             this.$router.push({path:'/article',query:{id: id}})
         },
         getData(){
-            if(this.activeName==1){
+            if(this.activeName==0){
                 this.$http.get(`zy/website/article/page?type=公司新闻&pageNum=${this.queryParams.pageNum}&pageSize=${this.queryParams.pageSize}`).then(res=>{
-                    this.news = res.data.rows
+                    this.dataList = res.data.rows
+                    this.total = res.data.total
+                })
+            }
+            if(this.activeName==1){
+                this.$http.get(`zy/website/article/page?type=行业动态&pageNum=${this.queryParams.pageNum}&pageSize=${this.queryParams.pageSize}`).then(res=>{
+                    this.dataList = res.data.rows
                     this.total = res.data.total
                 })
             }
             if(this.activeName==2){
-                this.$http.get(`zy/website/article/page?type=行业动态&pageNum=${this.queryParams.pageNum}&pageSize=${this.queryParams.pageSize}`).then(res=>{
-                    this.dynamic = res.data.rows
-                    this.total = res.data.total
-                })
-            }
-            if(this.activeName==3){
                 this.$http.get(`zy/website/article/page?type=法规标准&pageNum=${this.queryParams.pageNum}&pageSize=${this.queryParams.pageSize}`).then(res=>{
-                    this.statute = res.data.rows
+                    this.dataList = res.data.rows
                     this.total = res.data.total
                 })
             }
             
         },
-        handleClick(tabsPaneContext,e){
+        handleClick(i){
             this.show = false
-            this.activeName = tabsPaneContext.props.name
+            this.activeName = i
             this.queryParams.pageNum = 1
             this.getData()
             this.$nextTick(()=>{
@@ -134,10 +154,10 @@
         background-color: #1D2088;
     }
     .page-toggle{
-        width: calc(100vw - 6.7rem);
+        width: calc(100vw - 8.6rem);
         display: flex;
         justify-content: right;
-        margin-top: .5rem;
+        margin-top: .7rem;
         ::v-deep{
         .el-pagination{
             li,button{
@@ -161,83 +181,88 @@
         }
     }
     .page{
-        min-height: 10.75rem;
-        padding: 1rem 3rem;
-        background-color: #f8f7f7;
-        .item-1{
-            padding: .125rem .5rem;
+        display: flex;
+        justify-content: stretch;
+        padding: 0 2rem;
+        background-color: #f5f5f5;
+        height: auto;
+        .left{
+            width: 3.75rem;
+            background-color: #e7e7e7;
+            height: 12rem;
             .item{
-                width: 100%;
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-                border-bottom: 1px solid #ccc;
+                height: 1rem;
+                border-bottom: 1px dashed #b6b4b4;
+                line-height: 1rem;
+                padding-left: .6rem;
+                padding-right: .375rem;
+                white-space: nowrap; 
+                overflow: hidden;
+                text-overflow: ellipsis;
                 position: relative;
-                &:last-child{
-                    border-bottom: none;
-                }
-                .title{
-                    font-size: .25rem;
-                    line-height: .8rem;
-                    margin-left: .375rem;
-                }
-                .time{
-                    font-size: .23rem;
-                }
+                font-size: .32rem;
+                cursor: pointer;
                 &::before{
                     position: absolute;
                     content: '';
-                    width: .125rem;
-                    height: .125rem;
+                    width: .075rem;
+                    height: .075rem;
                     border-radius: 50%;
-                    background-color: #e93535;
-                    left: .0625rem;
+                    background-color: #a8a6a6;
+                    left: .375rem;
+                    top: .4625rem;
                 }
-
-                
+                &:hover{
+                    color: #171A89;
+                }
+            }
+            .active{
+                color: #171A89;
+            }
+            .nav-title{
+                height: 1.4rem;
+                line-height: 1.4rem;
+                font-size: .45rem;
+                background-color: RGBA(100, 134, 207, .7);
+                color: #fff;
+                padding-left: .6rem;
+                font-weight: bold;
+               
             }
 
         }
-        .item-2{
-            margin-top: 1rem;
-           display: flex;
-           justify-content: center;
-            img{
-                width: 13.7125rem;
-                height: auto;
-            }
-        }
-        .item-3{
-            display: flex;
-            flex-wrap: wrap;
-            padding: 1rem 2.475rem;
+        .right{
             background-color: #fff;
-            /* justify-content: space-between; */
+            width: calc(100vw - 7.75rem);
+            padding-bottom: 2rem;
+            padding-top: .37rem;
+            margin-left: .4rem;
             .item{
-                width: 33.3%;
                 display: flex;
-                flex-direction: column;
-                justify-content: center;
-                align-items: center;
-                margin-bottom: .375rem;
-                img{
-                    width: 90%;
-                    height: 100%;
-                }
-                .info{
-                    margin-top: .125rem;
-
+                justify-content: space-between;
+                line-height: 1rem;
+                border-bottom: 1px solid #ccc;
+                cursor: pointer;
+                &:hover{
                     .title{
-                        font-size: .25rem;
-                        color: #333333;
-                    }
-                    .time{
-                        font-size: 14px;
-                        color: #666666;
+                        color: #189eef;
                     }
                 }
+                .title{
+                    font-size: .3rem;
+                    color: #333333;
+                    padding-left: .375rem;
+                }
+                .time{
+                    font-size: .25rem;
+                    color: #666666;
+                    margin-right: .5rem;
+                }
             }
+            
+            
         }
+        
     }
   </style>
   
\ No newline at end of file
diff --git a/src/views/pages/introduce.vue b/src/views/pages/introduce.vue
index 1a48880..e3eae95 100644
--- a/src/views/pages/introduce.vue
+++ b/src/views/pages/introduce.vue
@@ -13,11 +13,21 @@
                 </div>
             </el-tab-pane>
             <el-tab-pane label="资质证书" name="3">
-                <div class="item-3">
-                    <div class="item" v-for="(item,i) in certificate">
-                        <img :src="$baseUrl+item.img" alt="">
-                        <div class="title">{{item.tittle}}</div>
-                    </div>
+                <div class="area" style="padding: 0 2.475rem;background-color: #f1f1f1;">
+                    <el-watermark
+                        class="watermark"
+                        content="中业消防"
+                        :font="font"
+                        :gap="[50,50]"
+                        :z-index="1"
+                        >
+                        <div class="item-3">
+                            <div class="item" v-for="(item,i) in certificate">
+                                <img :id="item.id" :src="getUrl(item.id,$baseUrl+item.img)" alt="">
+                                <div class="title">{{item.tittle}}</div>
+                            </div>
+                        </div>
+                    </el-watermark>
                 </div>
             </el-tab-pane>
             <el-tab-pane label="联系我们" name="4">
@@ -27,7 +37,7 @@
                             <span class="icon">
                                 <img src="@/assets/images/电话.png" alt="">
                             </span>
-                            <span class="value">电话：18912177843</span>
+                            <span class="value">电话：18936679119</span>
                         </div>
                         <div class="address">
                             <span class="icon">
@@ -69,6 +79,10 @@
       data(){
           return{
             introduce:{},
+            font: {
+                fontSize: 16,
+                color: 'rgba(0, 0, 0, 0.15)',
+            },
             structure:{},
             certificate:[],
             activeName: '1',
@@ -103,7 +117,34 @@
         handleClick(tabsPaneContext,e){
             console.log(tabsPaneContext)
             console.log(e)
-        }
+        },
+        // 防止盗图
+        getUrl(id,url){
+            this.$nextTick(()=>{
+                const eleAppend = document.getElementById(id);
+                this.hidePic(eleAppend,url)
+            })
+
+        },
+        hidePic(element,url){
+            window.URL = window.URL || window.webkitURL
+            console.log(element)
+            if(typeof history.pushState === 'function'){
+                var xhr = new XMLHttpRequest()
+                xhr.open('get', url, true)
+                xhr.responseType = 'blob'
+                xhr.onload = function () {
+                    if (this.status === 200) {
+                        var blob = this.response
+                        element.onload = function (e) {
+                            window.URL.revokeObjectURL(element.src)
+                        }
+                        element.src = window.URL.createObjectURL(blob)
+                    }
+                }
+                xhr.send()
+            }
+        },
          
       }
   }
@@ -168,7 +209,7 @@
         .item-3{
             display: flex;
             flex-wrap: wrap;
-            padding: 1rem 2.475rem;
+            padding: 1rem 0;
             background-color: #fff;
             /* justify-content: space-between; */
             .item{