xiu'gaixiugai

src/main.js

@@ -17,7 +17,8 @@ import 'element-plus/dist/index.css'
 
 
 const app = createApp(App)
-const baseUrl = 'https://admin.liandaojq.com/prod-api'
+// const baseUrl = 'https://admin.liandaojq.com/prod-api'
+const baseUrl = 'http://192.168.3.114:80/dev-api'
 axios.defaults.baseURL = baseUrl
 
 app.config.globalProperties.$http=axios

src/router/index.js

@@ -65,6 +65,16 @@ const routes = [
           title: '人才招聘',
           keepAlive: true
         }
+      },
+      // 文章
+      {
+        path: 'article',
+        name: 'article',
+        component: () => import( '@/views/pages/article.vue'),
+        meta: {
+          title: '内容',
+          keepAlive: true
+        }
       }
     ]
   },

src/views/index.vue

@@ -15,10 +15,20 @@
             </div>
         </div>
         <div class="main-img">
-            <img src="@/assets/images/组 10.png" alt="">
+            <el-carousel height="8.5625rem">
+                <el-carousel-item v-for="item in imgList" :key="item">
+                    <img :src="$baseUrl+item.path" alt="">
+                </el-carousel-item>
+            </el-carousel>
         </div>
     </div>
-    <router-view/>
+    <!-- <router-view/> -->
+    <router-view v-slot="{ Component,route }">
+        <keep-alive>
+          <component :is="Component" v-if="route.meta.keepAlive==true"  :key="route.path" />
+        </keep-alive>
+        <component :is="Component" v-if="route.meta.keepAlive==false"  :key="route.path" />
+    </router-view>
     <bottom></bottom>
   </div>
 </template>
@@ -32,6 +42,7 @@ export default {
     },
     data(){
         return{
+            imgList:[],
             menuList:[
                 {
                     name: '主页',
@@ -91,10 +102,17 @@ export default {
         if(this.$route.path=='/'){
             this.$router.push('/home')
         }
+        this.getImgs()
         
     },
     
     methods:{
+        getImgs(){
+            this.$http.get(`zy/website/resources/selectByCategory?category=轮播图`).then(res=>{
+                this.imgList = res.data.data
+                console.log(this.imgList)
+            })
+        },
         jumpTo(i){
             this.activeIndex = i
             this.$router.push({path: this.menuList[i].url})

src/views/pages/article.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="container">
+    <div class="title">{{article.tittle}}</div>
+    <div class="time">发布时间 ： {{article.submitTime}}</div>
+    <div class="ql-editor content" v-html="article.content"></div>
+    <div class="back" @click="$router.go(-1)">
+      <img src="../../assets/images/back.png" alt="">
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Top',
+  props: {
+  },
+  data(){
+    return {
+      article:{},
+      
+    }
+  },
+  created(){
+    let id = this.$route.query.id
+    this.$http.get(`/zy/website/article/detail?id=${id}`).then(res=>{
+      this.article = res.data.data
+      this.article.content = this.article.content.replace(/<img/g,'<img style="width:13rem; height: auto;"')
+    })
+  },
+  methods:{
+  }
+}
+</script>
+<style scoped lang="scss">
+.content{
+  padding: .5rem 3.25rem;
+  font-size: .25rem;
+  color: #505050;
+  line-height: .6rem;
+  min-height: 800px;
+  img{
+    width: 100%;
+    height: auto;
+  }
+  
+}
+  .title{
+    font-size: .4rem;
+    font-weight: bold;
+    color: #333333;
+    text-align: center;
+    margin: .6rem 0 .375rem 0;
+  }
+  .time{
+    font-size: .225rem;
+    color: #666;
+    text-align: center;
+  }
+  .back{
+    position: fixed;
+    bottom: 3.75rem;
+    right: 1.25rem;
+    img{
+      width: 1.25rem;
+      height: auto;
+    }
+  }
+</style>

src/views/pages/home.vue

@@ -11,22 +11,22 @@
             </div>
             <div class="content">
                 <div class="left">
-                    <img src="@/assets/images/15探海神龟.jpg" alt="">
+                    <img :src="$baseUrl + introduce.img" alt="">
                 </div>
                 <div class="right">
                     <div class="indroduce">
-                        江苏中业消防技术服务有限公司位于江苏省连云港市，注册资本1000万元，具备消防设施工程专业承包贰级、建筑装修装饰工程专业承包贰级、施工劳务不分等级资质，同时具备建筑消防设施检测、维保、评估资质。是一家集设计咨询、消防技术咨询、消防工程技术服务、消防施工、火灾隐患排查整治指导及消防设施维护保养、检测、安全评估为一体的综合性消防技术服务机构，一直致力于消防领域的科学研究与社会消防技术服务，实现品牌创造与效益双赢。
+                        {{introduce.excerpt}}
                     </div>
                     <div class="menu">
-                        <div class="item">
+                        <div class="item" @click="jumpTo('/introduce',1)">
                             <img src="@/assets/images/企业介绍(1).png" alt="">
                             <span>公司介绍</span>
                         </div>
-                        <div class="item">
+                        <div class="item" @click="jumpTo('/introduce',2)">
                             <img src="@/assets/images/组织架构管理.png" alt="">
                             <span>组织机构</span>
                         </div>
-                        <div class="item">
+                        <div class="item" @click="jumpTo('/introduce',3)">
                             <img src="@/assets/images/资质.png" alt="">
                             <span>资质证书</span>
                         </div>
@@ -66,15 +66,17 @@
                 </div>
                 <div class="list">
                     <div class="left">
-                        <div class="item" v-for="i in 5">
-                            <span class="title">中业消防获“第一批成都工业精品”认定</span>
-                            <span class="time">2019-2-13</span>
+                        <div class="item" v-for="(item,i) in information" @click="jumpToArticle(item.id)">
+                            <span class="title" v-if="item.tittle.length<=34">{{item.tittle}}</span>
+                            <span class="title" v-else>{{item.tittle.slice(0,34)}}...</span>
+                            <span class="time">{{item.submitTime}}</span>
                         </div>
                     </div>
                     <div class="right">
-                        <div class="item" v-for="i in 2">
-                            <img src="@/assets/images/15探海神龟.jpg" alt="">
-                            <div class="title">中业消防获“第一批成都工业精品”认定</div>
+                        <div class="item" v-for="(item,i) in information.slice(0,2)" @click="jumpToArticle(item.id)">
+                            <img :src="$baseUrl+item.img" alt="">
+                            <div class="title" v-if="item.tittle.length>20">{{item.tittle.slice(0,20)}}...</div>
+                            <div class="title" v-else>{{item.tittle}}</div>
                         </div>
                     </div>
                 </div>
@@ -91,23 +93,61 @@
       },
       data(){
           return{
+            introduce:{},
             activeIndexInfo: 0,
+            news:[],
+            dynamic:[],
+            statute:[],
+            information:[],
             informationMenu:[
                 {name:'公司新闻'},
                 {name:'行业动态'},
-                {name:'消防规范'}
-            ]
+                {name:'法规标准'}
+            ],
+            queryParams:{
+                pageNum: 1,
+                pageSize: 5
+            },
               
           }
       },
       created(){
-          
+          this.getIntroduce()
       },
-      
       methods:{
+        jumpTo(path,name){
+            this.$router.push({path: path,query:{name: name}})
+        },
+        jumpToArticle(id){
+            this.$router.push({path:'/article',query:{id: id}})
+        },
         selectTab(i){
-              this.activeIndexInfo = i
-          }
+            this.activeIndexInfo = i
+            if(i==0){
+                this.information = this.news
+            }
+            if(i==1){
+                this.information = this.dynamic
+            }
+            if(i==2){
+                this.information = this.statute
+            }
+        },
+        getIntroduce(){
+            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=${this.queryParams.pageNum}&pageSize=${this.queryParams.pageSize}`).then(res=>{
+                this.news = res.data.rows
+                this.information = this.news
+            })
+            this.$http.get(`zy/website/article/page?type=行业动态&pageNum=${this.queryParams.pageNum}&pageSize=${this.queryParams.pageSize}`).then(res=>{
+                this.dynamic = res.data.rows
+            })
+            this.$http.get(`zy/website/article/page?type=法规标准&pageNum=${this.queryParams.pageNum}&pageSize=${this.queryParams.pageSize}`).then(res=>{
+                this.statute = res.data.rows
+            })
+        }
       }
   }
   </script>
@@ -179,6 +219,7 @@
                             display: flex;
                             justify-content: center;
                             align-items: center;
+                            cursor: pointer;
                             img{
                                 width: auto;
                                 height: .25rem;
@@ -269,6 +310,10 @@
                         font-size: .2rem;
                         color: #282828;
                         border-bottom: .0125rem solid #DADADA;
+                        cursor: pointer;
+                        &:hover{
+                            color: #189eef;
+                        }
                         &:last-child{
                             border: none;
                         }
@@ -286,6 +331,11 @@
                         height: 3.2875rem;
                         margin-left: .4rem;
                         position: relative;
+                        &:hover{
+                            .title{
+                                color: #189eef;
+                            }
+                        }
                         img{
                             width: 100%;
                             height: 100%;
@@ -299,6 +349,8 @@
                             color: #FFFFFF;
                             line-height: .475rem;
                             bottom: 0;
+                            padding-left: .125rem;
+                            text-align: left;
                         }
                     }
                 }

src/views/pages/honor.vue

@@ -1,9 +1,9 @@
 <template>
     <div class="page">
         <div class="list">
-            <div class="item" v-for="i in 5">
-                <img src="@/assets/images/15探海神龟.jpg" alt="">
-                <div class="title">安全生产许可证</div>
+            <div class="item" v-for="(item,i) in certificate">
+                <img :src="$baseUrl+item.img" alt="">
+                <div class="title">{{item.tittle}}</div>
             </div>
         </div>
     </div>
@@ -16,14 +16,19 @@
       },
       data(){
           return{
-              
+            certificate:[]
           }
       },
       created(){
-          
+        this.getData()
       },
       
       methods:{
+        getData(){
+            this.$http.get(`zy/website/article/page?type=资质证书`).then(res=>{
+                this.certificate = res.data.rows
+            })
+        },
          
       }
   }
@@ -45,7 +50,7 @@
                 margin-bottom: .375rem;
                 img{
                     width: auto;
-                    height: 4rem;
+                    height: 3.75rem;
                 }
                 .title{
                     margin-top: .125rem;

src/views/pages/information.vue

@@ -3,30 +3,39 @@
         <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
             <el-tab-pane label="公司新闻" name="1">
                 <div class="item-1">
-                   <div class="item" v-for="i in 9">
-                    <img src="@/assets/images/15探海神龟.jpg" alt="">
+                   <div class="item" v-for="(item,i) in news" @click="jumpToArticle(item.id)">
+                    <img :src="$baseUrl+item.img" alt="">
                     <div class="info">
-                        <div class="title">新闻名称新闻标题长长的标题</div>
-                        <div class="time">2019-3-1</div>
+                        <div class="title" v-if="item.tittle.length>18">{{item.tittle.slice(0,18)}}...</div>
+                         <div class="title" v-else>{{item.tittle}}.</div>
+                        <div class="time">{{item.submitTime}}</div>
                     </div>
                    </div>
                 </div>
             </el-tab-pane>
             <el-tab-pane label="行业动态" name="2">
-                <!-- <div class="item-2">
-                    <img src="@/assets/images/组 21 拷贝.png" alt="">
-                </div> -->
-            </el-tab-pane>
-            <el-tab-pane label="消防规范" name="3">
-                <!-- <div class="item-3">
-                    <div class="item" v-for="i in 5">
-                        <img src="@/assets/images/15探海神龟.jpg" alt="">
-                        <div class="info">
-                            <div class="title"></div>
-                            <div class="time"></div>
-                        </div>
+                <div class="item-1">
+                    <div class="item" v-for="(item,i) in dynamic" @click="jumpToArticle(item.id)">
+                     <img :src="$baseUrl+item.img" alt="">
+                     <div class="info">
+                        <div class="title" v-if="item.tittle.length>18">{{item.tittle.slice(0,18)}}...</div>
+                        <div class="title" v-else>{{item.tittle}}.</div>
+                         <div class="time">{{item.submitTime}}</div>
+                     </div>
                     </div>
-                </div> -->
+                 </div>
+            </el-tab-pane>
+            <el-tab-pane label="法规标准" name="3">
+                <div class="item-1">
+                    <div class="item" v-for="(item,i) in statute" @click="jumpToArticle(item.id)">
+                     <img :src="$baseUrl+item.img" alt="">
+                     <div class="info">
+                         <div class="title" v-if="item.tittle.length>18">{{item.tittle.slice(0,18)}}...</div>
+                         <div class="title" v-else>{{item.tittle}}.</div>
+                         <div class="time">{{item.submitTime}}</div>
+                     </div>
+                    </div>
+                 </div>
             </el-tab-pane>
         </el-tabs>
        
@@ -41,15 +50,35 @@
       },
       data(){
           return{
-            activeName: '1'
-              
+            activeName: '1',
+            news:[],
+            dynamic:[],
+            statute:[],
           }
       },
       created(){
+        this.getData()
+          
+        localStorage.getItem('activeName')
     
       },
       
       methods:{
+        jumpToArticle(id){
+            localStorage.setItem('activeName',this.activeName)
+            this.$router.push({path:'/article',query:{id: id}})
+        },
+        getData(){
+            this.$http.get(`zy/website/article/page?type=公司新闻`).then(res=>{
+                this.news = res.data.rows
+            })
+            this.$http.get(`zy/website/article/page?type=行业动态`).then(res=>{
+                this.dynamic = res.data.rows
+            })
+            this.$http.get(`zy/website/article/page?type=法规标准`).then(res=>{
+                this.statute = res.data.rows
+            })
+        },
         handleClick(tabsPaneContext,e){
             console.log(tabsPaneContext)
             console.log(e)
@@ -59,10 +88,19 @@
   }
   </script>
   <style lang="scss" scoped>
+    ::v-deep .el-tabs{
+        --el-tabs-header-height: 1.1rem
+    }
+    ::v-deep .el-tabs__header{
+        margin-bottom: 0;
+    }
     ::v-deep .el-tabs__nav-scroll{
         display: flex;
         justify-content: center;
     }
+    ::v-deep .el-tabs__item{
+        font-size: .25rem;
+    }
     ::v-deep .el-tabs__item:hover{
         color: #1D2088;
     }
@@ -70,6 +108,7 @@
         color: #1D2088;
     }
     ::v-deep .el-tabs__active-bar{
+        width: 1rem!important;
         background-color: #1D2088;
     }
     .page{
@@ -77,7 +116,7 @@
         .item-1{
             display: flex;
             flex-wrap: wrap;
-            padding: 1rem 2.25rem;
+            padding: 1rem 2rem;
             .item{
                 width: 4.875rem;
                 padding: 0 .125rem;
@@ -96,8 +135,13 @@
                     padding-left: .125rem;
                     .title{
                         width: 100%;
+                        font-size: .225rem;
+                        line-height: .4rem;
                         background-color: #fff;
-                }
+                    }
+                    .time{
+                        font-size: .2rem;
+                    }
 
                 }
                 

src/views/pages/introduce.vue

@@ -3,29 +3,45 @@
         <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
             <el-tab-pane label="公司介绍" name="1">
                 <div class="item-1">
-                    <h3>江苏中业消防技术服务有限公司公司简介</h3>
-                    <p>
-                        江苏中业消防技术服务有限公司位于江苏省连云港市，注册资本1000万元，具备消防设施工程专业承包贰级、建筑装修装饰工程专业承包贰级、施工劳务不分等级资质，同时具备建筑消防设施检测、维保、评估资质。是一家集设计咨询、消防技术咨询、消防工程技术服务、消防施工、火灾隐患排查整治指导及消防设施维护保养、检测、安全评估为一体的综合性消防技术服务机构，一直致力于消防领域的科学研究与社会消防技术服务，实现品牌创造与效益双赢。
-                    </p>
-                    <p>
-                        公司技术力量雄厚
-                    </p>
+                    <div class="title">{{introduce.tittle}}</div>
+                    <div class="ql-editor content" v-html="introduce.content" ref="content"></div>
                 </div>
             </el-tab-pane>
             <el-tab-pane label="组织机构" name="2">
                 <div class="item-2">
-                    <img src="@/assets/images/组 21 拷贝.png" alt="">
+                    <img :src="$baseUrl+structure.img" alt="">
                 </div>
             </el-tab-pane>
             <el-tab-pane label="资质证书" name="3">
                 <div class="item-3">
-                    <div class="item" v-for="i in 5">
-                        <img src="@/assets/images/15探海神龟.jpg" alt="">
-                        <div class="title">安全生产许可证</div>
+                    <div class="item" v-for="(item,i) in certificate">
+                        <img :src="$baseUrl+item.img" alt="">
+                        <div class="title">{{item.tittle}}</div>
                     </div>
                 </div>
             </el-tab-pane>
             <el-tab-pane label="联系我们" name="4">
+                <div class="item-4">
+                    <div class="lianxi">
+                        <div class="phone">
+                            <span class="icon">
+                                <img src="@/assets/images/电话.png" alt="">
+                            </span>
+                            <span class="value">电话：0518-90876754</span>
+                        </div>
+                        <div class="address">
+                            <span class="icon">
+                                <img src="@/assets/images/地址.png" alt="">
+                            </span>
+                            <span class="value">地址：连云港海宁中路西大街</span>
+                        </div>
+                    </div>
+                    <div class="content">
+                        <div class="left">
+                            
+                        </div>
+                    </div>
+                </div>
 
             </el-tab-pane>
         </el-tabs>
@@ -41,15 +57,37 @@
       },
       data(){
           return{
+            introduce:{},
+            structure:{},
+            certificate:[],
             activeName: '1'
               
           }
       },
       created(){
         
+        if(this.$route.query&&this.$route.query.name){
+            this.activeName = this.$route.query.name
+        }
+        this.getData()
+      },
+      activated(){
+        if(this.$route.query&&this.$route.query.name){
+            this.activeName = this.$route.query.name
+        }
       },
-      
       methods:{
+        getData(){
+            this.$http.get(`zy/website/article/page?type=公司介绍`).then(res=>{
+                this.introduce = res.data.rows[0]
+            })
+            this.$http.get(`zy/website/article/page?type=组织机构`).then(res=>{
+                this.structure = res.data.rows[0]
+            })
+            this.$http.get(`zy/website/article/page?type=资质证书`).then(res=>{
+                this.certificate = res.data.rows
+            })
+        },
         handleClick(tabsPaneContext,e){
             console.log(tabsPaneContext)
             console.log(e)
@@ -59,10 +97,19 @@
   }
   </script>
   <style lang="scss" scoped>
+    ::v-deep .el-tabs{
+        --el-tabs-header-height: 1.1rem
+    }
+    ::v-deep .el-tabs__header{
+        margin-bottom: 0;
+    }
     ::v-deep .el-tabs__nav-scroll{
         display: flex;
         justify-content: center;
     }
+    ::v-deep .el-tabs__item{
+        font-size: .25rem;
+    }
     ::v-deep .el-tabs__item:hover{
         color: #1D2088;
     }
@@ -70,6 +117,7 @@
         color: #1D2088;
     }
     ::v-deep .el-tabs__active-bar{
+        width: 1rem!important;
         background-color: #1D2088;
     }
     .page{
@@ -84,6 +132,16 @@
             line-height: .6rem;
             font-family: Source Han Sans CN;
             padding: 1rem 2.375rem;
+            .title{
+                font-size: .35rem;
+                font-weight: bold;
+                text-align: center;
+            }
+            .content{
+                margin-top: .25rem;
+                font-size: .275rem;
+                line-height: .6rem;
+            }
 
         }
         .item-2{
@@ -109,8 +167,9 @@
                 align-items: center;
                 margin-bottom: .375rem;
                 img{
-                    width: 90%;
-                    height: 100%;
+                    /* width: 90%; */
+                    width: auto;
+                    height: 3.75rem;
                 }
                 .title{
                     margin-top: .125rem;
@@ -119,6 +178,47 @@
                 }
             }
         }
+        .item-4{
+            .lianxi{
+                width: 100%;
+                height: 2.5rem;
+                background-color: #ccc;
+                display: flex;
+                align-items: center;
+                padding-left: 1.625rem;
+                .phone,.address{
+                    display: flex;
+                    margin-left: .75rem;
+                }
+                .icon{
+                    display: inline-block;
+                    width: .575rem;
+                    height: .575rem;
+                    background: #A11715;
+                    border-radius: .05rem;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    img{
+                        width: .375rem;
+                        height: .375rem;
+                    }
+                }
+                .value{
+                    display: inline-block;
+                    width: 4.875rem;
+                    height: .575rem;
+                    background: #A11715;
+                    border-radius: .05rem;
+                    margin-left: .0375rem;
+                    line-height: .575rem;
+                    color: #fff;
+                    padding-left: .375rem;
+                }
+               
+
+            }
+        }
     }
   </style>