完全动态初版

src/api/index.js

@@ -71,4 +71,11 @@ export function message(params) {
         method: 'post',
         data: params
     })
+}
+//工程详情
+export function projectdetail(params){
+    return request({
+        url:'/engineering/details',
+        params
+    })
 }

src/router/index.js

@@ -7,6 +7,7 @@ import project  from '@/views/project.vue'
 import recruit from '@/views/recruit.vue'
 import contactus from '@/views/contactus.vue'
 import detail from '@/views/detail.vue'
+import projectdetail from '@/views/projectdetail.vue'
 Vue.use(VueRouter)
 
 const routes = [
@@ -39,6 +40,10 @@ const routes = [
   {
     path:'/detail',
     component:detail
+  },
+  {
+    path:'/projectdetail',
+    component:projectdetail
   }
 ]
 

src/views/project.vue

@@ -24,7 +24,7 @@
     <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.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>
+    <p>{{item.name}}</p><p class="project-font" @click="changeto(item.id)" style="cursor: pointer;" >MORE...</p>
     </div>
     </div>
     <!-- <div style="width: 32%;border-radius: 15px 15px 0 0;background-color: rgb(245,245,245);margin-bottom: 2%;">
@@ -123,7 +123,11 @@ export default{
          })
     },
     methods:{
-      
+      changeto(id){
+        this.$router.push({
+             path:'/projectdetail?id='+id
+    })
+      },
         handleCurrentChange(val){
           console.log(val)
            this.params.page = val-1

src/views/projectdetail.vue

@@ -0,0 +1,207 @@
+<template>
+    <div>
+        <div class="page_ban">
+            <div class="img compbg"></div>
+            <div class="content">
+                <div class="page_nav">
+                    <div class="name">
+                        <a style="padding: 0;" href="">新闻资讯</a> <a href="javascript:;">企业新闻</a>
+                    </div>
+                    <div class="list" style="bottom:-15px">
+                        <el-tabs v-model="activeName" >
+                            <el-tab-pane label="新闻详情" name="first"></el-tab-pane>
+                                                 
+                        </el-tabs>
+
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="Wrapper news_d">
+        <div class="content" style="text-align: center;">
+            <div class="name">{{ name }}</div>
+            <div class="top-box">   <div class="date">{{time}}</div> </div>
+            <div class="divider"></div>
+            <div v-html="content"></div>
+           </div>
+             
+               
+                <div class="con">
+              
+                </div>
+            </div>
+        </div>
+
+</template>
+<script>
+import { projectdetail } from '@/api';
+export default{
+    data(){
+        return{
+            name:'',
+            content:'',
+            time:''
+        }
+    },
+    methods:{
+
+    },
+    mounted(){
+       projectdetail(this.$route.query).then((res)=>{
+                this.content=res.data.particulars
+                this.name=res.data.name
+                this.time=res.data.completeTime
+        })
+    },
+}
+</script>
+<style scoped>
+ .divider {
+    width: 100%;
+    height: 3px;
+    background-color: #0059a7;
+    position: static;
+    margin-bottom: 28px;
+}
+.name {
+    font-size: 30px;
+    color: #0007a9;
+    color: rgba(0, 7, 169, .8);
+    line-height: 36px;
+}
+.news_d {
+    padding: 60px 0 90px;
+    overflow: hidden;
+}
+.Wrapper {
+    position: relative;
+    background-color: #fff;
+    z-index: 100;
+}
+.news_d .name {
+    font-size: 30px;
+    color: #0007a9;
+    color: rgba(0, 7, 169, .8);
+    line-height: 36px;
+}
+
+::v-deep .el-tabs__item {
+
+color: rgba(255, 255, 255, 0.8);
+border: none;
+}
+
+::v-deep .el-tabs__nav-wrap::after {
+background-color: transparent;
+}
+.news_d .con p {
+    font-size: 14.5px;
+    color: #8e8e95;
+    line-height: 26px;
+    margin-bottom: 26px;
+    text-align: justify;
+}
+
+
+.compbg {
+    background-image: url('../assets/images/banner.png');
+}
+
+.page_ban {
+    height: 404px;
+    position: relative;
+    text-align: center;
+    z-index: 101;
+}
+
+.page_ban .img {
+    width: 100%;
+    height: 100%;
+
+    background-size: cover;
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: -1;
+}
+.top-box{
+    margin: 16px 0 30px;
+}
+.date{
+  
+    font-size: 26px;
+    color: #dfd4c3;
+    line-height: 1;
+  
+    bottom: 20px;
+    padding: 0 30px;
+    width: 100%;
+}
+.page_ban .content {
+    position: relative;
+    height: 100%;
+}
+.content {
+    width: 80%;
+    margin: 0 auto;
+}
+
+.page_nav {
+    width: 100%;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+}
+div,
+li {
+    box-sizing: border-box;
+}
+
+.page_nav .name {
+    float: left;
+}
+
+.page_nav .list {
+    position: relative;
+    float: right;
+    margin-right: -35px;
+}
+
+.page_nav a {
+    float: left;
+    line-height: 76px;
+    position: relative;
+    font-size: 14.5px;
+
+    color: white;
+    font-weight: bold;
+    text-decoration: none;
+}
+
+.page_nav .name a {
+    padding-left: 30px;
+    /* background: url() no-repeat left 30px; */
+}
+
+.page_nav .list {
+    position: relative;
+    float: right;
+    margin-right: -35px;
+}
+
+.page_nav .list a {
+    color: #e7dfd2;
+    color: rgba(231, 223, 210, .7);
+    margin-right: 35px;
+}
+
+.page_nav a {
+    float: left;
+    line-height: 76px;
+    position: relative;
+    font-size: 14.5px;
+
+    color: rgba(255, 255, 255, 0.8);
+    font-weight: bold;
+}
+</style>