差工程详情

src/api/index.js

@@ -1,13 +1,9 @@
 import request from '@/request'
 //获取工程项目内容 注意分类待修改
-export function getproject(){
+export function getproject(params){
     return request({
         url:'engineering/list',
-        params:{
+        params
-            type:'房屋建筑',
-            page:'0',
-            size:'6'
-        }
     })
 }
 //获取新闻内容
@@ -54,3 +50,25 @@ export function swiperimg(){
         url:'fengmian/list'
     })
 } 
+//新闻详情
+export function newsdetail(params){
+    return request({
+        url:'article/articleDetails',
+        params
+    })
+} 
+//官网公司荣誉展示
+export function honorList(params) {
+    return request({
+        url: '/honor/list',
+        params
+    })
+}
+//留言
+export function message(params) {
+    return request({
+        url: '/messageBoard/create',
+        method: 'post',
+        data: params
+    })
+}

src/assets/global.css

@@ -1,4 +1,4 @@
-body,html{
+*{
     margin: 0;
     padding: 0;
 }

src/views/HomeView.vue

@@ -38,7 +38,7 @@
 
           </div>
           <div class="content-right">
-            <div class="index-top">
+            <div class="index-top" @click="changeto(newsitem.id) " style="cursor: pointer;" >
               <h3 style="    font-size: 24px;
     color: #3c3c48;
     color: rgba(60, 60, 72, .8);
@@ -60,7 +60,7 @@
             
            
             </div>
-            <div   @click="changeto" style="cursor: pointer;">
+            <div   @click="changeto(false)" style="cursor: pointer;">
               
 						<div class="dot_box" style="    font-size: 0;
             margin-top: 20px;
@@ -101,15 +101,16 @@
       <div class="index_3">
         <div style="position: relative;height: 100%;width: 80%;margin: 0 auto;">
           <div class="tiltle">
-            <h3>飞阳建设工程业务领域<br>
+              <!-- 飞阳建设工程业务领域<br>
               建筑产业<br>
-              现代化发展趋势
+              现代化发展趋势 -->
+            <h3 class="init" v-html="bgtextitem.content">
+            
+             
             </h3>
-            <p>飞阳包含房屋建筑市政公路、工业建筑，金属门窗、”钢结构广等业务领域
+            <div class="init2" v-html="bgtextitem.contents">
-            </p>
+           
-            <p>
+          </div>
-              致力于数据化、智能化创新发展，积极探索建筑产业现代化发展趋势
-            </p>
           </div>
           <div class="list" style="position: absolute;
     left: 0;
@@ -118,14 +119,12 @@
     z-index: 2;">
             <div class="swiper2" style="max-width: 80vw;overflow: hidden;height: 100%;">
               <div class="swiper-wrapper swiper9">
-                <div class="swiper-slide"><img src="@/assets/images/index3_1.png" style=" border-radius: 10px;width: 100%;"></div>
+               
-                <div class="swiper-slide"><img src="@/assets/images/index3_2.png" style=" border-radius: 10px;width: 100%;"></div>
+                <div class="swiper-slide" style="height: 100%;"  v-for="item in smallPicturearr" :key="item.id"><img :src="item.picture" style=" border-radius: 10px;width: 396px;height:263px;"></div>
-                <div class="swiper-slide"><img src="@/assets/images/index3_3.png" style=" border-radius: 10px;width: 100%;"></div>
+                
-                <div class="swiper-slide"><img src="@/assets/images/index3_2.png" style=" border-radius: 10px;width: 100%;"></div>
-                <div class="swiper-slide"><img src="@/assets/images/index3_3.png" style=" border-radius: 10px;width: 100%;"></div>
 
               </div>
-              <div class="swiper-pagination1" style="text-align: center;"></div>
+              <div class="swiper-pagination2" style="text-align: center;"></div>
 
             </div>
             <!-- <div><img src=""></div>
@@ -150,7 +149,7 @@
 
               <!-- <h3></h3> -->
               <h5 style="line-height: 20px;">荣获行业诸多奖项<br>
-                拥有一支高素质的专业管理团队<span style="color:RGB(48, 113, 183);float: right;font-weight: bold;">MORE...</span>
+                拥有一支高素质的专业管理团队<span style="color:RGB(48, 113, 183);float: right;font-weight: bold;cursor: pointer;" @click="switchto">MORE...</span>
               </h5>
               <!-- <h5></h5> -->
             </div>
@@ -184,18 +183,21 @@
 
 import Swiper from 'swiper'
 import 'swiper/css/swiper.min.css'
-import { achievementPic, hyDtai,swiperimg,getnews } from '@/api'
+import { achievementPic, hyDtai,swiperimg,getnews,backgroundText,smallPicture } from '@/api'
 export default {
   data() {
     return {
         hydata:{src:''},
         imgarr:[],
         achievementarr:[],
-        newsitem:{}
+        newsitem:{},
+        bgtextitem:{},
+        smallPicturearr:[]
     }
 
   },
   mounted() {
+  
     //大图轮播图
     swiperimg().then((res)=>{
      this.imgarr=res.data
@@ -225,6 +227,20 @@ export default {
     hyDtai().then((res)=>{
    this.hydata.src=res.data[0].picture
    this.hydata.content=res.data[0].content
+    })
+          //背景图文轮播图
+  smallPicture().then((res)=>{
+     this.smallPicturearr=res.data
+     this.$nextTick(()=>{
+     new Swiper('.swiper2', {
+      slidesPerView: 3,
+      slidesPerGroup: 1,
+      spaceBetween: 20,
+      pagination: {
+        el: '.swiper-pagination2'
+      }
+    })
+  })
     })
     //荣誉展示
     achievementPic().then((res)=>{
@@ -239,12 +255,17 @@ export default {
       }
     })
       })
-    
     })
     //新闻展示
     getnews({'page':0}).then((res)=>{
      this.newsitem=res.data.content[1]
     })
+    //图文展示
+    backgroundText().then((res)=>{
+        this.bgtextitem=res.data[0]
+   
+    })
+  
     // 创建交叉观察器实例
     // this.observer = new IntersectionObserver(entries => {
     //   entries.forEach(entry => {
@@ -266,23 +287,27 @@ export default {
 
     // 初始化Swiper
    
-
-    new Swiper('.swiper2', {
-      slidesPerView: 3,
-      slidesPerGroup: 1,
-      spaceBetween: 20,
-      pagination: {
-        el: '.swiper-pagination1'
-      }
-    })
-   
   },
   methods:{
-    changeto(){
+    switchto(){
+      this.$router.push({
+      path:'/aboutus'
+    })
+  },
+    changeto(id){
+      if(id){
+       
+        this.$router.push({
+      path:'/detail?id='+id
+     })
+      }else{
+        console.log(id)
         this.$router.push({
       path:'/news'
      })
       }
+    
+    }
   },
   beforeDestroy() {
     // 在组件销毁之前停止观察器
@@ -450,7 +475,7 @@ padding-bottom: 24px;
   padding-top: 140px;
   width: 100%;
   height: 604px;
-  background: url(../assets/images/index3.png) no-repeat center;
+  background: url(http://1.94.20.201/fyapi/images/86e81da7-b406-45ad-a8b6-94be672da4a2.png) no-repeat center;
   background-attachment: fixed;
   background-size: cover;
 }
@@ -459,6 +484,7 @@ padding-bottom: 24px;
   font-size: 48px;
   color: RGB(48, 113, 183);
   line-height: 60px;
+  margin-top:48px;
   margin-bottom: 14px;
   font-weight: lighter;
 }
@@ -491,4 +517,13 @@ padding-bottom: 24px;
     color: RGB(48, 113, 183);
     display: inline-block;
 }
+.init p{
+  margin: 0 !important;
+}
+ .init2{
+  font-size: 16px;
+    line-height: 24px;
+    color: rgba(255, 255, 255, .5);
+    font-weight: bold;
+}
 </style>

src/views/aboutus.vue

@@ -70,7 +70,7 @@
                 <div style="color:rgba(60,115,164);font-size:40px">广纳贤才形成一支高素质的专业管理团队
                 </div>
                 <div style="height: 40px;"></div>
-                <div style="color: rgba(0,0,0,.6);line-height: 18px;">
+                <div style="color: rgba(0,0,0,.6);line-height: 18px;" class="init">
                     <p>拥有职工3000余人,其中高级职称工程技术人员35人、国家一级注册建造师42人。</p>
                     <p>主编或参编了“福建省建筑工程常见质量问题控制规程”、“抗浮 锚杆ODEX施工工法”等十余项省级标准规范;
                     </p>
@@ -90,8 +90,8 @@
                 <div style="color:rgba(60,115,164);font-size:40px">致力于数据化、智能化创新发展
                 </div>
                 <div style="height: 40px;"></div>
-                <div style="color: rgba(0,0,0,.6);line-height: 18px;">
+                <div style="color: rgba(0,0,0,.6);line-height: 18px;" class="init">
-                    <p>为腰应时代变革，公司致力于数据化、智能化创新发展，
+                    <p>为邀应时代变革，公司致力于数据化、智能化创新发展，
                     </p>
                     <p>积极探索建筑产业现代化发展趋势。
 
@@ -153,19 +153,19 @@
                 <div class="ul_box" style="padding: 50px 0px;">
 
                     <ul class="my_timeline" ref="mytimeline" style=" display: flex;width: 80%;padding: 0;margin: auto;">
-                        <div class="my_timeline_prev" @click="moveLeft">
+                        <div class="my_timeline_prev" @click="moveLeft()">
                             <i style="color: skyblue;" class="el-icon-arrow-left"></i>
                         </div>
                         <li class="my_timeline_item" v-for="(item, index) in timeLineList" :key="index">
                             <!--圈圈节点-->
-                            <div class="my_timeline_node" @click="changeActive(index)"
+                            <div class="my_timeline_node" @click="changeActive(index,item)"
                                 :class="{ active: index == timeIndex }"> {{ item.timestamp }}</div>
                             <!--线-->
 
                             <!--标注-->
 
                         </li>
-                        <div class="my_timeline_next" @click="moveRight">
+                        <div class="my_timeline_next" @click="moveRight()">
 
                             <i style="color: skyblue;" class="el-icon-arrow-right"></i>
 
@@ -176,25 +176,27 @@
             <div style="width: 80%;margin: auto;flex-wrap: wrap;justify-content: space-between; display: grid;
   grid-template-columns: repeat(auto-fill, minmax(31.33%, 1fr));
   grid-column-gap: 2%;">
-                <div style="width:   auto;margin-bottom: 20px;border-radius: 10px;">
+                <div style="width:   auto;margin-bottom: 20px;border-radius: 10px;" v-for="item in honorList" :key="item.id">
                     <div style="padding: 10% 0;background-color: rgb(240,246,250);    border-radius: 14px 14px 0 0;">
-                        <img src="@/assets/images/rongyu/1.png"
+                        <!-- <img src="@/assets/images/rongyu/1.png"
-                            style="height: 100%;object-fit: contain;margin: auto;display: block;">
+                            style="height: 100%;object-fit: contain;margin: auto;display: block;"> -->
-
+     <img :src="item.picture"
+                            style="width:100%;height: 345px; margin: auto;display: block;scale: 0.8;">
 
                     </div>
                     <div
-                        style="background-color: rgb(248,248,248);padding-left: 5%;padding-right: 5%;    border-radius: 0 0 14px 14px ;height: 180px;">
+                        style="background-color: rgb(248,248,248);padding-left: 5%;padding-right: 5%;    border-radius: 0 0 14px 14px ;height: 100px;overflow: hidden;">
-                        <h3 style="padding: 10px 0 0 0 ;color:rgb(108,108,118);margin: 0;">2019.01</h3>
+                        <h3 style="padding: 10px 0 0 0 ;color:rgb(108,108,118);margin: 0;">{{ item.annual }}</h3>
                         <p style="color:rgb(155,155,155)">
-                            J2016P01地块建设工程(1-14号楼及联合地下
+                            <!-- J2016P01地块建设工程(1-14号楼及联合地下
                             室主体),荣膺2018年度市级建筑施工安全生
-                            产标准化优良项目。
+                            产标准化优良项目。 -->
+                            {{ item.name }}
                         </p>
 
                     </div>
                 </div>
-                <div style="width:   auto;margin-bottom: 20px;border-radius: 10px;">
+                <!-- <div style="width:   auto;margin-bottom: 20px;border-radius: 10px;">
                     <div style="padding: 10% 0;background-color: rgb(240,246,250);    border-radius: 14px 14px 0 0;">
                         <img src="@/assets/images/rongyu/2.png"
                             style="height: 100%;object-fit: contain;margin: auto;display: block;">
@@ -263,7 +265,7 @@
                         </p>
 
                     </div>
-                </div>
+                </div> -->
 
             </div>
         </div>
@@ -331,6 +333,7 @@
 </template>
 <script>
 import { honor } from '@/api';
+import { honorList } from '@/api';
 export default {
     data() {
         return {
@@ -340,7 +343,7 @@ export default {
                 "timestamp": "2024年",
                 "color": "#999",
                 "fontsize": 18,
-                "year": "2019",
+                "year": "2024",
                 "bgcolor": "#e4e7ed",
     
             }, {
@@ -348,6 +351,8 @@ export default {
                 "color": "#999",
                 "fontsize": 18,
                 "size": "28",
+                "year": "2023",
+
                 "bgcolor": "#e4e7ed",
           
             }, {
@@ -355,6 +360,8 @@ export default {
                 "color": "#999",
                 "fontsize": 18,
                 "size": "28",
+                "year": "2022",
+
                 "bgcolor": "#e4e7ed",
             
             }, {
@@ -362,13 +369,15 @@ export default {
                 "color": "#999",
                 "fontsize": 18,
                 "size": "28",
+                "year": "2021",
+
                 "year": "2016",
        
             }, {
                 "timestamp": "2020年",
                 "color": "#999",
                 "fontsize": 18,
-                "year": "2015",
+                "year": "2020",
                 "size": "28",
          
             }, {
@@ -376,6 +385,8 @@ export default {
                 "color": "#999",
                 "fontsize": 18,
                 "size": "28",
+                "year": "2019",
+
                 "bgcolor": "#e4e7ed",
         
             }, {
@@ -383,6 +394,8 @@ export default {
                 "color": "#999",
                 "fontsize": 18,
                 "size": "28",
+                "year": "2018",
+
                 "bgcolor": "#e4e7ed",
               
             }, {
@@ -392,22 +405,34 @@ export default {
                 "size": "28",
                 "bgcolor": "#e4e7ed",
                 "icon": "el-iconprev",
-                "year": "2012",
+                "year": "2017",
                 "info": "chengli"
-            }]
+            }],
+            honorList:[]
         }
     },
     mounted(){
         // honor({'year':'2019'}).then((res)=>{
         //   console.log(res)
         // })
+        this.getHonner('2018')
     },
     methods: {
+
+       async getHonner(year){
+        console.log(year)
+      
+        const {data:res} = await honorList({'year':year});
+          console.log(res)
+          this.honorList = res
+        },
         handleClick(tab, event) {
             console.log(tab.index);
         },
-        changeActive(index) {
+        changeActive(index,item) {
             this.timeIndex = index;
+            console.log(item)
+           this.getHonner(item.year)
         },
         moveLeft() {
      
@@ -421,6 +446,9 @@ export default {
             else {
                 this.timeIndex = this.timeIndex - 1
                 console.log(this.timeIndex)
+                const year = this.timeLineList[this.timeIndex].year
+                console.log(year)
+                this.getHonner(year)
             }
 
         },
@@ -433,6 +461,9 @@ export default {
                 return
             } else {
                 this.timeIndex = this.timeIndex + 1
+                const year = this.timeLineList[this.timeIndex].year
+                console.log(year)
+                this.getHonner(year)
             }
         }
     }
@@ -753,7 +784,10 @@ li {
     margin-left: -22px; */
     flex: 0.5
 }
+.init p{
+    margin:16px 0
 
+}
 .ul_box {
     width: 100%;
 

src/views/contactus.vue

@@ -62,24 +62,45 @@
     <p style="padding: 25px 0;border-bottom: 1px solid rgba(0,0,0,.2);">若您有合作意向，请您为我们留言或使用上面方式联系我们，我们将尽快给你回复，并为您提供最真诚的服务，谢谢。
 </p>
 <div style="height: 30px;"></div>
-<div style="display: flex;justify-content: space-between;">
+
+<el-form style="display: flex;justify-content: space-between;" :model="params" :rules="rules" ref="ruleForm">
     <div style="width: 45%;">
-    <el-input style="margin-bottom: 20px;" v-model="input1" placeholder="联系人"></el-input>
+        <el-form-item  prop="name">
-    <el-input style="margin-bottom: 20px;" v-model="input2" placeholder="电话"></el-input>
+    <el-input style="margin-bottom: 20px;" v-model="params.name" placeholder="联系人"></el-input>
-    <el-input v-model="input3" placeholder="邮箱"></el-input>
+
+        </el-form-item>
+  <el-form-item  prop="phone">
+     <el-input style="margin-bottom: 20px;" v-model="params.phone" placeholder="电话"></el-input>
+  </el-form-item>
+   
+    
+ <el-form-item  prop="email">
+
+    <el-input style="margin-bottom: 20px;" v-model="params.email" placeholder="邮箱"></el-input>
+
+ </el-form-item>
+
+    
+ 
+
 </div>
 <div style="width: 50%;height: 100%;">
+     <el-form-item  prop="content">
+
     <el-input
     style="height: 100%;"
   type="textarea"
-  :autosize="{ minRows: 7, maxRows: 22}"
+  :autosize="{ minRows: 9, maxRows: 22}"
   placeholder="留言内容"
-  v-model="textarea2">
+  v-model="params.content">
 </el-input>
+
+ </el-form-item>
+
 <div style="height: 10px;"></div>
-<div style="display: flex;justify-content: end;"><el-button type="primary">发送留言</el-button></div>
+<div style="display: flex;justify-content: end;"><el-button type="primary" @click="send('ruleForm')">发送留言</el-button></div>
-</div>
 </div>
+</el-form>
     </div>
 </div>
         </div>
@@ -88,6 +109,87 @@
 
 </template>
 <script>
+import {message} from '@/api/index'
+// import { Message } from 'element-ui';
+
+  export default{
+    data(){
+        return{
+            params:{
+       name:'',
+        phone:'',
+        email:'',
+        content:''
+            },
+            rules: {
+        name: [
+          { required: true, message: '联系人不能为空' },
+          { pattern: /^[\u4e00-\u9fa5a-zA-Z0-9]{2,20}$/, message: '联系人格式不正确' }
+        ],
+        phone: [
+          { required: true, message: '电话不能为空' },
+          { pattern: /^1\d{10}$/, message: '电话格式不正确' }
+        ],
+        email: [
+          { required: true, message: '邮箱不能为空' },
+          { pattern: /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/, message: '邮箱格式不正确' }
+        ],
+        content: [
+          { required: true, message: '留言内容不能为空' }
+        ]
+      }
+ 
+        }
+      
+    },
+    methods:{
+        send(params){
+        console.log(params)
+        this.$refs[params].validate(async (valid) => {
+          if (valid) {
+         const {data:res} =  await message(this.params);
+         console.log(res)
+      if(res.code == 200) {
+        // alert('成功')
+            // this.$message.success('发送留言成功！')
+            this.$notify({
+          title: '提示',
+          message: '发送留言成功！',
+        //   duration: 0,
+             offset: 100,
+             type: 'success'
+        });
+   
+          }else {
+          this.$notify({
+          title: '提示',
+          message: '发送留言失败！',
+        //   duration: 0,
+             offset: 100,
+             type: 'error'
+        });
+    
+
+          }
+          } else {
+            console.log('error submit!!');
+            return false;
+          }
+        });
+        //   const {data:res} = await message(this.params);
+        //   console.log(res)
+    
+        //   if(res.code == 200) {
+        //     this.$message.success('发送留言成功！')
+   
+        //   }else {
+        //     this.$message.error('发送留言失败！')
+    
+
+        //   }
+       }
+    }
+  }
 </script>
 <style scoped>
 .content{

src/views/detail.vue

@@ -19,10 +19,10 @@
         </div>
         <div class="Wrapper news_d">
         <div class="content" style="text-align: center;">
-            <div class="name">动态标题</div>
+            <div class="name">{{ name }}</div>
-            <div class="top-box">   <div class="date">动态创建时间2024.2.3</div> </div>
+            <div class="top-box">   <div class="date">{{time}}</div> </div>
             <div class="divider"></div>
-            <div>后台数据内容</div>
+            <div v-html="content"></div>
            </div>
              
                
@@ -34,6 +34,26 @@
 
 </template>
 <script>
+import { newsdetail } from '@/api';
+export default{
+    data(){
+        return{
+            name:'',
+            content:'',
+            time:''
+        }
+    },
+    methods:{
+
+    },
+    mounted(){
+        newsdetail(this.$route.query).then((res)=>{
+                this.content=res.data.content
+                this.name=res.data.name
+                this.time=res.data.releaseTime
+        })
+    },
+}
 </script>
 <style scoped>
  .divider {

src/views/news.vue

@@ -8,12 +8,9 @@
                         <a style="padding: 0;" href="">新闻资讯</a> <a href="javascript:;">企业新闻</a>
                     </div>
                     <div class="list" style="bottom:-15px">
-                        <el-tabs v-model="activeName" @tab-click="handleClick">
+                        <el-tabs v-model="activeName" >
                             <el-tab-pane label="企业新闻" name="first"></el-tab-pane>
-                   
-                           
                         </el-tabs>
-
                     </div>
                 </div>
             </div>
@@ -21,16 +18,19 @@
         <div style="height: 80px;"></div>
         <div style="width: 80%;margin: auto;">
             <el-row style="display: flex;flex-wrap: wrap;">
-  <el-col :span="8" v-for="item in newslist" :key="item.id" class="colitem">
+                
-    <el-card :body-style="{ padding: '0px' }">
+  <el-col   :span="8" v-for="item in newshow" :key="item.id" class="colitem" style="cursor: pointer;"  >
+    <div @click="changeto(item.id)">
+    <el-card :body-style="{ padding: '0px' }"  >
       <div class="card_img1 mark" :style="{ 'background-image': 'url(' + item.pic + ')' }"  >
-        <div class="date">2020.12.31</div>
+        <div class="date">{{item.releaseTime}}</div>
       </div>
       <div>
-        <div class="news_li_con"><div class="title">飞阳建设南江滨东大道获得福州</div> <div class="introduction" v-html="item.content"></div>  <div class="more">more...</div> </div>
+        <div class="news_li_con"><div class="title">{{item.name}}</div> <div class="introduction" >{{ item.source }}</div>  <div class="more">more...</div> </div>
        
       </div>
     </el-card>
+</div>
   </el-col>
   <!-- <el-col :span="8" >
     <el-card :body-style="{ padding: '0px' }">
@@ -59,18 +59,17 @@
   </el-col> -->
 </el-row>
         </div>
-        <div style="height: 70px;"></div>
+       
         <div style="width: 80%;margin: auto;">
-        <div v-for="item in newslist" class="newsitem" style="overflow: hidden; padding: 30px 0 24px;position: relative;">
+        <div v-for="item in rest" class="newsitem" style="overflow: hidden; padding: 30px 0 24px;position: relative;cursor: pointer;" @click="changeto(item.id)">
-            <div class="date1" style="width: 12%;">2019.07.10</div>
+            <div class="date1" style="width: 12%;">{{item.releaseTime}}</div>
             <div class="" style="  float: left;
-    width: 88%;"> <div class="title1">增强服务意识构建共享平台-飞阳厦门分公司机场大道工程举办搅拌桩智能化工艺观摩会
+    width: 88%;"> <div class="title1">{{item.name}}
-</div> <div class="introduction1">厦门市政建设开发有限公司(厦门翔安机场大道工程业主), 为更好地向集团旗下所属企业共享市政软基处理施工的先进工艺。特邀我司于2019年6月22日在厦门翔安机
+</div> <div class="introduction1">{{item.source}}
-场大道工程项目施工现场，举办水泥搅拌桩标准化施工专项观摩会供其属下企业共同学习水泥搅拌桩智能化施工的先进施工工艺，为加快厦门市市政建设工程做出贡献
 </div></div>
         </div>
         <div style="height: 40px;"></div>
-        <div class="page_more wow fadeInUp animated" data-wow-delay=".2s" id="More" style="visibility: visible; animation-delay: 0.2s; animation-name: fadeInUp;">
+        <div class="page_more wow fadeInUp animated" data-wow-delay=".2s" id="More" style="visibility: visible; animation-delay: 0.2s; animation-name: fadeInUp;" @click="addnews">
                     <em>更多新闻</em>
                 </div>
                 <div style="height: 60px;"></div>
@@ -84,21 +83,39 @@ export default{
     data(){
         return{
             activeName:'first',
+            newshow:[],
+            rest:[],
             newslist:[],
-
+            page:0
         }
     },
     mounted(){
        getnews({'page':0}).then((res)=>{
            this.newslist=res.data.content
+           this.newshow=this.newslist.slice(0,3)
        })
     },
     methods:{
         handleClick(){
 
+        },
+        addnews(){
+            this.page=this.page+1
+            getnews({'page':this.page}).then((res)=>{
+                //    console.log(res)
+                for(let i=0;i<res.data.content.length;i++){
+                    this.rest.push(res.data.content[i])
                 }
+                   
+            })
+        },
+        changeto(id){
+            this.$router.push({
+             path:'/detail?id='+id
+    })
     }
 }
+}
 </script>
 <style scoped>
 .compbg {

src/views/project.vue

@@ -13,16 +13,16 @@
         </div>
         <div style="margin: 13px 0px;text-align: center;" >
     <el-radio-group v-model="radio3" style="margin: auto;" >
-      <el-radio-button class="myself" style="border-radius: 26px;margin-right:18px" label="1" border>房屋建筑</el-radio-button>
+      <el-radio-button class="myself" style="border-radius: 26px;margin-right:18px" label="1" border @click.native="handleClick('房屋建筑')">房屋建筑</el-radio-button>
-      <el-radio-button style="border-radius: 26px;margin-right:18px" label="2" border >市政公路</el-radio-button>
+      <el-radio-button style="border-radius: 26px;margin-right:18px" label="2" border  @click.native="handleClick('市政公路')">市政公路</el-radio-button>
-      <el-radio-button style="border-radius: 26px;margin-right:18px" label="3" border >工业建筑</el-radio-button>
+      <el-radio-button style="border-radius: 26px;margin-right:18px" label="3" border  @click.native="handleClick('工业建筑')">工业建筑</el-radio-button>
-      <el-radio-button style="border-radius: 26px;margin-right:18px" label="4" border >金属门窗</el-radio-button>
+      <el-radio-button style="border-radius: 26px;margin-right:18px" label="4" border  @click.native="handleClick('金属门窗')">金属门窗</el-radio-button>
-      <el-radio-button style="border-radius: 26px;margin-right:18px" label="5" border >钢结构厂</el-radio-button>
+      <el-radio-button style="border-radius: 26px;margin-right:18px" label="5" border  @click.native="handleClick('钢结构厂')">钢结构厂</el-radio-button>
     </el-radio-group>
   </div>
   <div class="content2" style="width: 80%;margin: auto;display: flex;justify-content: space-between;flex-wrap: wrap;">
     <div v-for="item in  PrijectList" style="width: 32%;border-radius: 15px 15px 0 0 ;background-color: rgb(245,245,245);margin-bottom: 2%;">
-     <img :src="item.url" style="width: 100%;border-radius: 15px 15px 0 0 ;">
+     <img :src="item.picture" style="width: 100%;border-radius: 15px 15px 0 0 ;">
      <div style="padding: 2px 20px;display:flex ;justify-content: space-between;">
     <p>{{item.name}}</p><p class="project-font" >MORE...</p>
     </div>
@@ -89,7 +89,10 @@
   layout="prev, pager, next"
   prev-text="上一页"
   next-text="下一页"
-  :total="50">
+   current-page.sync="0"
+   @current-change="handleCurrentChange"
+   :page-size="6"
+  :total="total">
 
 </el-pagination>
     </div>
@@ -102,16 +105,44 @@ export default{
         return{
             activeName:'first',
             radio3:'1',
-            PrijectList:[]
+            PrijectList:[],
+            total:40,
+              params: {
+            type: '房屋建筑',
+            page: '0',
+            size: '6'
+           },
+      
         }
     },
     mounted(){
-         getproject().then((res)=>{
+         getproject(this.params).then((res)=>{
             this.PrijectList=res.data.content
+            this.total = res.data.totalElements
+          
          })
     },
     methods:{
-        handleClick(){
+      
+        handleCurrentChange(val){
+          console.log(val)
+           this.params.page = val-1
+        //    alert(this.params.page)
+          getproject(this.params).then((res)=>{
+            this.PrijectList=res.data.content
+            this.total = res.data.totalElements
+          
+         })
+        },
+        handleClick(type){
+            // console.log(type)
+            this.params.type = type
+            this.params.page =0
+             getproject(this.params).then((res)=>{
+            this.PrijectList=res.data.content
+            this.total = res.data.totalElements
+          
+         })
             
         }
     }