邓洁 : 接口初步对接完成

src/components/NewsCenter.vue

@@ -79,7 +79,7 @@ export default {
     getArticleList({
       classid: 6,
       page: 1,
-      limit: 10
+      limit: 3
     }).then(res => {
       this.itemList = res.data.list;
     });

src/components/PicturesBox.vue

@@ -5,32 +5,32 @@
       <el-col :xs="22" :sm="20" :md="20" :lg="20" :xl="16">
         <ul>
           <li v-for="(item,index) in imageList"
-              :key="index" @click="type!==22?handleClickNews(item):''">
+              :key="index" @click="handleClickNews(item)">
             <div class="item">
-              <a>
+              <div v-if="type===33">
-                <div v-if="type===33">
+                  <span class="pic">
-                <span class="pic">
+                    <img :src="item.image" alt="">
-                  <img :src="item.image" alt="">
+                  </span>
-                </span>
+                <span class="inf">{{ item.name }}</span>
-                  <span class="inf">{{ item.name }}</span>
+                <span class="size">{{ item.goods_category.name }}</span>
-                  <span class="size">{{ item.goods_category.name }}</span>
+              </div>
+              <!-- 新闻-->
+              <div v-if="type===11">
+                <div class="pic">
+                  <img :src="item.image" alt=""/>
                 </div>
-                <!-- 新闻-->
+                <span class="inf">{{ item.title }}</span>
-                <div v-if="type===11">
+                <span class="info">{{ item.create_time }}</span>
+              </div>
+              <!--形象展示放大  -->
+              <div v-if="type===22">
+                <div class="bigImg">
                   <el-image
                     :src="item.image">
                   </el-image>
-                  <span class="inf">{{ item.title }}</span>
-                  <span class="info">{{ item.create_time }}</span>
                 </div>
-                <!--形象展示放大  -->
+                <div class="big_info">{{ item.title }}</div>
-                <div v-if="type===22" class="bigImg">
+              </div>
-                  <el-image
-                    :src="item.image">
-                  </el-image>
-                  <span class="inf" style="text-align: center">{{ item.title }}</span>
-                </div>
-              </a>
             </div>
           </li>
         </ul>
@@ -69,6 +69,8 @@ export default {
         });
       } else if (this.type == 11) {
         this.$emit("getNewsIdClick", item.id);
+      } else if (this.type == 22) {
+        console.log("图片放大");
       }
     }
   }
@@ -116,6 +118,17 @@ export default {
   }
 }
 
+.big_info {
+  display: block;
+  font-size: 16px;
+  overflow: hidden;
+  white-space: nowrap;
+  -o-text-overflow: ellipsis;
+  text-overflow: ellipsis;
+  text-align: center;
+  padding: 0 8px;
+}
+
 .image_list {
   width: 100%;
   padding: 20px 0;
@@ -127,57 +140,63 @@ export default {
     li {
       width: 25%;
 
+      .item:hover {
+        .pic {
+          img {
+            transform: scale(1.2);
+            opacity: 0.8;
+            background-color: #000000;
+          }
+        }
+      }
+
       .item {
         padding: 15px;
         overflow: hidden;
+        transition: all 0.4s;
 
-        a {
+        .pic {
-          .pic {
+          display: inline-block;
-            display: inline-block;
+          border: 1px solid #e9e9e9;
-            border: 1px solid #e9e9e9;
+          background-color: #000;
-            background-color: #000;
+          overflow: hidden;
-            overflow: hidden;
+          transition: all 0.4s;
 
-            img {
+          img {
-              width: 100%;
+            width: 100%;
-              display: block;
+            height: 270px;
-              transition: all 0.4s;
-            }
-          }
-
-          .info {
-            text-align: left;
             display: block;
-            font-size: 12px;
+            transition: all 0.4s;
-            overflow: hidden;
+            object-fit: cover;
-            white-space: nowrap;
-            -o-text-overflow: ellipsis;
-            text-overflow: ellipsis;
-            color: #666;
-          }
-
-          span.inf {
-            display: block;
-            font-size: 16px;
-            overflow: hidden;
-            white-space: nowrap;
-            -o-text-overflow: ellipsis;
-            text-overflow: ellipsis;
-            text-align: left;
-          }
-
-          span.size {
-            color: #666;
-            display: block;
-            font-size: 12px;
-            float: left;
           }
         }
 
-        a:hover .pic img {
+        .info {
-          transform: scale(1.2);
+          text-align: left;
-          opacity: 0.8;
+          display: block;
-          background-color: #000000;
+          font-size: 12px;
+          overflow: hidden;
+          white-space: nowrap;
+          -o-text-overflow: ellipsis;
+          text-overflow: ellipsis;
+          color: #666;
+        }
+
+        span.inf {
+          display: block;
+          font-size: 16px;
+          overflow: hidden;
+          white-space: nowrap;
+          -o-text-overflow: ellipsis;
+          text-overflow: ellipsis;
+          text-align: left;
+        }
+
+        span.size {
+          color: #666;
+          display: block;
+          font-size: 12px;
+          float: left;
         }
       }
     }

src/components/ProjectCase.vue

@@ -14,17 +14,17 @@
         <el-col :xs="1" :sm="1" :md="1" :lg="3" :xl="4"></el-col>
         <el-col :xs="22" :sm="22" :md="22" :lg="18" :xl="16">
           <el-row type="flex">
-            <el-col class="case_example" :span="6" v-for="item in projectList" :key="item.src">
+            <el-col class="case_example" :span="6" v-for="(item,index) in projectList" :key="index">
               <ul>
                 <li>
                   <div class="pics">
                     <el-image
                       class="img"
-                      :src="item.src"
+                      :src="item.image"
                       :preview-src-list="item.bigSrc">
                     </el-image>
                   </div>
-                  <div class="case_info">{{ item.projectName }}</div>
+                  <div class="case_info">{{ item.title }}</div>
                 </li>
               </ul>
             </el-col>
@@ -36,49 +36,23 @@
 </template>
 
 <script>
+import {getArticleList} from "@/api";
+
 export default {
   name: "Projects",
   data() {
     return {
-      projectList: [
+      projectList: []
-        {
-          src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446837055605711sss.jpg',
-          bigSrc:['http://www.yipengtaoci.com/upfiles/images/20181213/15446837055605711.jpg'],
-          projectName: '大学城新校区教学楼'
-        },
-        {
-          src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836948260969sss.jpg',
-          bigSrc:['http://www.yipengtaoci.com/upfiles/images/20181213/15446836948260969.jpg'],
-          projectName: '嘉兴中山名都'
-        },
-        {
-          src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836838788313sss.jpg',
-          bigSrc:['http://www.yipengtaoci.com/upfiles/images/20181213/15446836838788313.jpg'],
-          projectName: '蒲田公安局'
-        }, {
-          src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836721610532sss.jpg',
-          bigSrc:['http://www.yipengtaoci.com/upfiles/images/20181213/15446836721610532.jpg'],
-          projectName: '财政局大厦'
-        }
-        , {
-          src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836584897916sss.jpg',
-          bigSrc:['http://www.yipengtaoci.com/upfiles/images/20181213/15446836584897916.jpg'],
-          projectName: '西安市雅盛大厦'
-        }, {
-          src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836464189848sss.jpg',
-          bigSrc:['http://www.yipengtaoci.com/upfiles/images/20181213/15446836464189848.jpg'],
-          projectName: '武汉市金晖大厦'
-        }, {
-          src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836342981901sss.jpg',
-          bigSrc:['http://www.yipengtaoci.com/upfiles/images/20181213/15446836342981901.jpg'],
-          projectName: '杭州市风情小区'
-        }, {
-          src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836233995939sss.jpg',
-          bigSrc:['http://www.yipengtaoci.com/upfiles/images/20181213/15446836233995939.jpg'],
-          projectName: '金湖花园'
-        },
-      ]
     }
+  },
+  created() {
+    getArticleList({
+      classid: 8,
+      page: 1,
+      limit: 8
+    }).then(res => {
+      this.projectList = res.data.list;
+    });
   }
 }
 </script>

src/views/footer/index.vue

@@ -10,9 +10,9 @@
       <div class="up_middle">
         <ul>
           <li v-for="(footerItem,footerIndex) in footerList" :key="footerIndex">
-            <a>{{ footerItem.title }}</a>
+            <a :href="footerItem.href">{{ footerItem.title }}</a>
             <div class="item" v-for="(footerItems,footerItemsIndex) in footerItem.items" :key="footerItemsIndex">
-              <a>{{ footerItems.title }}</a>
+              <a :href="footerItems.href">{{ footerItems.title }}</a>
             </div>
           </li>
         </ul>
@@ -48,13 +48,16 @@ export default {
       corporate_add: "",
       footerList: [
         {
+          href:'/about_us',
           title: "关于我们",
           items: []
         },
         {
+          href:'/news',
           title: "新闻资讯",
           items: [
             {
+              href:'/news',
               title: "公司新闻"
             },
             {
@@ -66,9 +69,11 @@ export default {
           ]
         },
         {
+          href:'/image_display',
           title: "形象展示",
           items: [
             {
+              href:'/image_display',
               title: "资质荣誉"
             },
             {
@@ -77,10 +82,12 @@ export default {
           ]
         },
         {
+          href: "/attract_and_join",
           title: "招商加盟",
           items: []
         },
         {
+          href: "/contact_us",
           title: "联系我们",
           items: []
         }
@@ -178,6 +185,7 @@ export default {
             font-size: 13px;
 
             > a {
+              color: #aaa;
               line-height: 24px;
             }
 

src/views/imageDisplay/index.vue

@@ -48,6 +48,7 @@ export default {
         page: this.page,
         limit: this.limit
       }).then(res => {
+        console.log('',res);
         this.imageAndWord = res.data.list;
         if(res.data.list.length==0){
           this.showNull=true

src/views/productsCenter/detail.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="min-width: 1300px">
     <!-- 产品标签栏-->
     <ProductsTabsItem :title="9" />
     <div class="img_text_bgc">
@@ -36,8 +36,8 @@
                   </span>
               </div>
               <div>
-                <el-button size="small" @click="prevProduct">上一款产品</el-button>
+                <el-button size="small" @click="prevProduct(detailList.id)">上一款产品</el-button>
-                <el-button size="small" @click="nextProduct">下一款产品</el-button>
+                <el-button size="small" @click="nextProduct(detailList.id)">下一款产品</el-button>
               </div>
             </div>
           </div>
@@ -66,7 +66,7 @@
 
 <script>
 import ProductsTabsItem from "@/components/ProductsTabsItem";
-import { getGoodsInfo} from "@/api";
+import {getGoodsInfo, getGoodsList} from "@/api";
 
 export default {
   name: "detail",
@@ -78,36 +78,63 @@ export default {
       detailList:[],
       imgList: [],
       classifyName:'',
-      goodsList:[]
+      goodsList:[],
+      allGoodList:[]
     }
   },
   mounted() {
-    getGoodsInfo(this.$route.query.classid).then(res => {
+    this.getGoodsInfo(this.$route.query.classid)
-      this.goodsList=res.data.goods_lists
+    this.getGoodsList()
-      if(res.data.goods_lists.length==0){
-        this.showNull=true
-      }
-      this.detailList = res.data.info
-      this.classifyName = res.data.info.goods_category.name
-      this.imgList = res.data.img_list
-      this.mainSrc=this.imgList[0].ori_image
-    });
   },
   methods: {
+    //获取产品列表
+    getGoodsList(){
+      getGoodsList({
+        classid:1,
+        page:1,
+        limit:50,
+      }).then(res => {
+        this.allGoodList=res.data.list
+      });
+    },
+    //获取产品详情
+    getGoodsInfo(classid){
+      getGoodsInfo(classid).then(res => {
+        if(res.data.goods_lists){
+          this.goodsList=res.data.goods_lists
+        }
+        if(res.data.goods_lists.length==0){
+          this.showNull=true
+        }
+        if(res.data.info){
+          this.detailList = res.data.info
+          this.classifyName = res.data.info.goods_category.name
+        }
+        if(res.data.img_list){
+          this.imgList = res.data.img_list
+          if(this.imgList[0]){
+            this.mainSrc=this.imgList[0].ori_image
+          }
+        }
+      });
+    },
     //上一款产品
-    prevProduct(){
+    prevProduct(id){
-      // for (let i = 0; i < this.goodsList.length; i++) {
+      const middleId=id-1
-      //   console.log(this.goodsList[i].id);
+      for (let i = 0; i < this.allGoodList.length; i++) {
-      //   this.detailList=this.goodsList[0]
+        if(this.allGoodList[i].id===middleId){
-      //   this.classifyName = this.goodsList[0].goods_category.name
+          this.getGoodsInfo(middleId)
-      //   this.imgList = res.data.img_list
+        }
-      //   this.mainSrc=this.imgList[0].ori_image
+      }
-      // }
-      // // console.log(this.detailList.id);
     },
     //下一款产品
-    nextProduct(){
+    nextProduct(id){
-
+      const middleId=id+1
+      for (let i = 0; i < this.allGoodList.length; i++) {
+        if(this.allGoodList[i].id===middleId){
+          this.getGoodsInfo(middleId)
+        }
+      }
     },
     //点击小图切换主览图
     changeMainImg(index) {