邓洁 : 产品展示区, 工程案例区及部分关于我们样式初步完成

src/components/AboutUs.vue

@@ -0,0 +1,224 @@
+<template>
+  <div class="aboutUs">
+    <el-row type="flex">
+      <el-col :span="4">
+      </el-col>
+      <el-col :span="16">
+        <div class="about_title">
+          <h2>关于我们</h2>
+          <h3>—— ABOUT US ——</h3>
+        </div>
+        <div class="about_text">
+          {{ aboutContent }}
+        </div>
+        <el-row :gutter="20" style="padding: 0 4% ">
+          <el-col :span="6" v-for="(numItem,numIndex) in numList" :key="numIndex" class="num_title">
+            <p>
+              <b>{{ numItem.num }}</b>
+              <span>{{ numItem.units }}</span>
+            </p>
+            <p>{{ numItem.title }}</p>
+          </el-col>
+        </el-row>
+        <el-row :gutter="10" style="padding: 0 5% ">
+          <el-col :span="8" v-for="(imgTextItem,imgTextIndex) in imgTextList" :key="imgTextIndex">
+            <div class="imgAndText">
+              <a :href="imgTextItem.href">
+                <span class="pic">
+                  <img :src="imgTextItem.src" alt=""/>
+                </span>
+                <div class="img_box">
+                  <div class="img_innerBox">
+                    <div class="about_en">
+                      <span>{{ imgTextItem.boldText }}</span>
+                      <span>{{ imgTextItem.enText }}</span>
+                    </div>
+                    <span class="line"></span>
+                    <span class="about_cn">{{ imgTextItem.cnTitle }}</span>
+                  </div>
+                </div>
+              </a>
+            </div>
+          </el-col>
+        </el-row>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "AboutUs",
+  data() {
+    return {
+      aboutContent: '广东祥睿陶瓷有限公司，于2011年在中国佛山成立，在成立之初，产品精准定位于大理石品类，为设计师打造简奢风格提供瓷砖材料素材。专注于产品的研发，从整体空间应用方向进行单品的开发研究，获得国内外众多设计师的青睐与认可，海外亦有部分专卖店展示。',
+      numList: [
+        {
+          num: '2000',
+          units: '亩',
+          title: '拥有近两千亩的三大基地'
+        },
+        {
+          num: '7000',
+          units: '多人',
+          title: '员工人数超过7000人'
+        },
+        {
+          num: '4',
+          units: '大种类',
+          title: '4大种类，数百款产品'
+        },
+        {
+          num: '60',
+          units: '多个',
+          title: '产品远销多个国家'
+        }
+      ],
+      imgTextList: [
+        {
+          href: '',
+          src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446921627711241s.jpg',
+          boldText: 'Brand',
+          enText: 'culture',
+          cnTitle: '品牌文化'
+        }, {
+          href: '',
+          src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446922829529890s.jpg',
+          boldText: 'Enterprise',
+          enText: 'viewpoint',
+          cnTitle: '企业观点'
+        }, {
+          href: '',
+          src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446925925108442s.jpg',
+          boldText: 'corporate',
+          enText: 'culture',
+          cnTitle: '企业文化'
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.aboutUs {
+  margin-bottom: 50px;
+
+  .about_title {
+    display: inline;
+    width: 100%;
+    float: left;
+    margin: 0 0 20px 0;
+    text-align: center;
+
+    h2 {
+      color: #000;
+      line-height: 40px;
+      font-size: 30px;
+      font-weight: bold;
+      text-align: center;
+    }
+
+    h3 {
+      color: #9b9b9b;
+      font-size: 16px;
+      text-align: center;
+      font-weight: 500;
+      line-height: 28.8px;
+    }
+  }
+
+  .about_text {
+    color: #666;
+    width: 80%;
+    float: left;
+    padding: 0 10% 50px;
+    font-size: 15px;
+    text-align: center;
+    line-height: 28.8px;
+  }
+
+  b {
+    color: #444;
+    line-height: 46px;
+    margin: 0 4px 0 0;
+    font-size: 40px;
+    font-family: arial;
+    font-weight: normal;
+  }
+
+  .num_title {
+    font-size: 14px;
+    color: #666666;
+    border-right: 1px solid #e5e5e5;
+    text-align: center;
+
+    p:last-child {
+      line-height: 25.2px;
+    }
+  }
+
+  .imgAndText {
+    display: block;
+    margin: 0 15px;
+    padding: 12px;
+    border: 1px solid #e9e9e9;
+    background-color: #201f25;
+
+    > a {
+      position: relative;
+      display: inline-block;
+      width: 100%;
+
+      .pic {
+        display: inline-block;
+        width: 100%;
+        overflow: hidden;
+
+        img {
+          width: 100%;
+          transition: all 0.6s;
+        }
+      }
+
+      .img_box {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        background-color: rgba(32, 31, 37, 0.5);
+        .img_innerBox {
+          width: 100%;
+          display: inline-block;
+          padding: 20px 30px;
+          .about_en{
+            color: #e0c9aa;
+            font-size: 22px;
+            float: left;
+            text-transform: uppercase;
+            font-family: arial;
+            span:first-child{
+              font-weight: bold;
+              margin-right: 10px;
+            }
+          }
+          .line{
+            clear: both;
+            width: 50px;
+            height: 1px;
+            float: left;
+            margin: 3px 0;
+            background-color: #e2c9ab;
+          }
+          .about_cn{
+            color: #e0c9aa;
+            clear: both;
+            float: left;
+            font-size: 18px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/components/Carousel.vue

@@ -21,12 +21,12 @@ export default {
     return {
       bannerDate: [
         {
-          imgurl: require('@/assets/banner/banner1.jpg')
+          imgurl: 'http://www.yipengtaoci.com/upfiles/images/20201228/16091375066005613.jpg'
         }, {
-          imgurl: require('@/assets/banner/banner2.jpg')
+          imgurl: 'http://www.yipengtaoci.com/upfiles/images/20181215/15448444195967573.jpg'
         },
         {
-          imgurl: require('@/assets/banner/banner3.jpg')
+          imgurl: 'http://www.yipengtaoci.com/upfiles/images/20181215/15448438651669858.jpg'
         }
       ]
     }

src/components/FastFindProducts.vue

@@ -264,6 +264,7 @@ export default {
   padding: 15px 0;
   height: 30px;
   line-height: 30px;
+  border-bottom: 1px solid #e9e9e9;
 
   #bok_1 {
     display: none;

src/components/ProductsClassify.vue

@@ -20,10 +20,10 @@
             <ul>
               <li v-for="(picItem,picIndex) in pics" :key="picIndex" :class="'pic_'+picIndex">
                 <a :href="picItem.href">
-                <span >
+                <span>
                   <img :src="picItem.src" alt=""/>
                 </span>
-                  <span class="info">{{picItem.name}}</span>
+                  <span class="info">{{ picItem.name }}</span>
                 </a>
               </li>
             </ul>
@@ -37,28 +37,28 @@
 <script>
 export default {
   name: "ProductsClassify",
-  data(){
+  data() {
-    return{
+    return {
-      pics:[
+      pics: [
         {
-          href:'',
+          href: '',
-          src:'http://www.yipengtaoci.com/upfiles/images/20200717/15949961573658658.png',
+          src: 'http://www.yipengtaoci.com/upfiles/images/20200717/15949961573658658.png',
-          name:'瓷抛大理石'
+          name: '瓷抛大理石'
         },
         {
-          href:'',
+          href: '',
-          src:'http://www.yipengtaoci.com/upfiles/images/20200717/15949961872720151.jpg',
+          src: 'http://www.yipengtaoci.com/upfiles/images/20200717/15949961872720151.jpg',
-          name:'通体大理石'
+          name: '通体大理石'
         },
         {
-          href:'',
+          href: '',
-          src:'http://www.yipengtaoci.com/upfiles/images/20200717/15949962397730467.jpg',
+          src: 'http://www.yipengtaoci.com/upfiles/images/20200717/15949962397730467.jpg',
-          name:'中板通体大理石'
+          name: '中板通体大理石'
         },
         {
-          href:'',
+          href: '',
-          src:'http://www.yipengtaoci.com/upfiles/images/20200717/15949963006120695.jpg',
+          src: 'http://www.yipengtaoci.com/upfiles/images/20200717/15949963006120695.jpg',
-          name:'大板通体大理石'
+          name: '大板通体大理石'
         }
       ]
     }
@@ -83,17 +83,16 @@ export default {
     position: relative;
     display: inline-block;
     transition: all 0.6s;
-
     a {
       .pic {
         img {
           width: 440px;
-          z-index: 9;
+          //z-index: 9;
+
         }
       }
 
 
-
       span:last-child {
         color: #fff;
         position: absolute;
@@ -108,11 +107,12 @@ export default {
         text-align: center;
         background-color: #de832f;
         border-radius: 100px 100px 100px 100px;
-        z-index: 999;
+        //z-index: 999;
       }
     }
   }
-  .info{
+
+  .info {
     color: #fff;
     position: absolute;
     top: 42%;
@@ -126,30 +126,41 @@ export default {
     z-index: 999;
   }
 
-  .grid_right{
+  .grid_right {
-    //float: right;
+    float: right;
-    ul{
+
+    ul {
       display: flex;
       flex-wrap: wrap;
-      li{
+
+      li {
         margin-top: -5px;
         padding: 5px;
-        span:first-child{
 
+        span:first-child {
           width: 100%;
           filter: alpha(opacity=94);
           -moz-opacity: 0.94;
           opacity: 0.94;
           transition: all 0.6s;
-
         }
-        a{
+
+        a {
+          height: 296px;
           position: relative;
           display: inline-block;
-          img{
+          background-color: #066090;
+          overflow: hidden;
+
+          img {
             width: 440px;
             height: 296px;
             overflow: hidden;
+            transition: all 0.6s;
+          }
+          img:hover{
+            filter: brightness(85%);
+            opacity: 1;
           }
         }
       }

src/components/ProductsShow.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class="product_show">
+    <el-row type="flex">
+      <el-col :span="4">
+      </el-col>
+      <el-col :span="16">
+        <div class="show_title">
+          <h2>产品展示</h2>
+          <h3>—— PRODUCTS ——</h3>
+          <a href="">查看所有</a>
+        </div>
+      </el-col>
+    </el-row>
+    <el-row type="flex">
+      <el-col :span="4">
+      </el-col>
+      <el-col :span="16" class="tagRow">
+        <div>
+          <el-tag
+            v-for="item in tagItems"
+            :key="item.title"
+            effect="plain">
+            <a :href="item.href">{{ item.title }}</a>
+          </el-tag>
+        </div>
+      </el-col>
+    </el-row>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProductsShow",
+  data(){
+    return{
+      tagItems:[
+        {
+          href: '',
+          title: '瓷抛大理石'
+        },
+        {
+          href: '',
+          title: '通体大理石'
+        }, {
+          href: '',
+          title: '中板通体大理石'
+        }, {
+          href: '',
+          title: '大板通体大理石'
+        }, {
+          href: '',
+          title: '银河系大板'
+        }, {
+          href: '',
+          title: '仿古砖600x600'
+        }, {
+          href: '',
+          title: '金刚大理石'
+        }, {
+          href: '',
+          title: '岩板'
+        }, {
+          href: '',
+          title: '微水泥'
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.el-tag:hover{
+  background-color: #333;
+  a{
+    color: #fff;
+  }
+}
+.el-tag:first-child{
+  background-color: #333;
+  a{
+    color: #fff;
+  }
+}
+.el-tag {
+  border: none;
+  margin-right: 10px;
+  padding: 0 12px;
+  font-size: 15px;
+  height: 37px;
+  line-height: 37px;
+  a{
+    color: #333;
+  }
+}
+.product_show {
+  padding: 60px 0 60px 0;
+  border-top: 1px solid #e9e9e9;
+  background-color: #f1f1f1;
+
+  .show_title {
+    display: inline;
+    width: 100%;
+    float: left;
+    margin: 0 0 20px 0;
+    text-align: center;
+
+    h2 {
+      color: #000;
+      line-height: 40px;
+      font-size: 30px;
+      font-weight: bold;
+      text-align: center;
+    }
+
+    h3 {
+      color: #9b9b9b;
+      font-size: 16px;
+      text-align: center;
+      font-weight: 500;
+      line-height: 28.8px;
+    }
+
+    a {
+      color: #333;
+      font-size: 14px;
+    }
+    a:hover {
+      text-decoration: underline;
+    }
+  }
+  .tagRow{
+    text-align: center;
+  }
+}
+</style>

src/components/ProjectCase.vue

@@ -0,0 +1,169 @@
+<template>
+  <div class="projectCase">
+    <div class="case_bg">
+      <el-row>
+        <div class="cases_title">
+          <h2>工程案例</h2>
+          <h3>—— Engineering Case ——</h3>
+          <div class="case_more">
+            <a href="">查看所有</a>
+          </div>
+        </div>
+      </el-row>
+      <div class="case_example">
+        <ul>
+          <li v-for="item in projectList" :key="item.src" @click="handleOpenImage">
+            <div class="pics">
+              <img :src="item.src" alt=""/>
+            </div>
+            <div class="case_info">{{ item.projectName }}</div>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Projects",
+  data() {
+    return {
+      projectList: [
+        {
+          src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446837055605711sss.jpg',
+          projectName: '大学城新校区教学楼'
+        },
+        {
+          src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836948260969sss.jpg',
+          projectName: '嘉兴中山名都'
+        },
+        {
+          src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836838788313sss.jpg',
+          projectName: '蒲田公安局'
+        }, {
+          src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836721610532sss.jpg',
+          projectName: '财政局大厦'
+        }, {
+          src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836584897916sss.jpg',
+          projectName: '西安市雅盛大厦'
+        }, {
+          src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836464189848sss.jpg',
+          projectName: '武汉市金晖大厦'
+        }, {
+          src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836342981901sss.jpg',
+          projectName: '杭州市风情小区'
+        }, {
+          src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836233995939sss.jpg',
+          projectName: '金湖花园'
+        },
+
+      ]
+    }
+  },
+  methods:{
+    handleOpenImage(){
+
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.projectCase {
+  height: 970px;
+  .case_bg {
+    margin: 0 60px;
+    background: #ffffff url('http://www.yipengtaoci.com/images/cbg0.jpg') no-repeat center 0;
+    background-size: cover;
+    height: 540px;
+
+    .cases_title {
+      position: relative;
+      display: block;
+      width: 100%;
+      float: left;
+      padding: 100px 0 80px;
+      text-align: center;
+
+      h2 {
+        color: #fff;
+        line-height: 40px;
+        font-size: 30px;
+        font-weight: bold;
+        text-align: center;
+      }
+
+      h3 {
+        color: #9b9b9b;
+        font-size: 16px;
+        text-align: center;
+        height: 28.8px;
+        line-height: 28.8px;
+      }
+
+      .case_more {
+        margin: 20px 0 0;
+        text-align: center;
+
+        a {
+          color: #e2c8ab;
+          display: inline-block;
+          width: 150px;
+          height: 40px;
+          line-height: 40px;
+          background-color: #201e25;
+          font-size: 14px;
+        }
+      }
+    }
+
+    .case_example {
+      width: 1360px;
+      margin: 0 auto;
+      background-color: #fff;
+      padding: 20px 10px;
+
+      ul {
+        li:last-child {
+          margin-right: 0;
+        }
+
+        li:nth-child(4) {
+          margin-right: 0;
+        }
+
+        li {
+          display: inline-block;
+          margin-right: 17px;
+
+          .pics {
+            overflow: hidden;
+            margin: 0 0 5px 0;
+            img {
+              height: 245px;
+              object-fit: cover;
+              transition: all 0.6s;
+              cursor: pointer;
+            }
+            img:hover {
+              transform: scale(1.2);
+            }
+          }
+          .case_info {
+            width: 100%;
+            float: left;
+            font-size: 16px;
+            text-align: center;
+            line-height: 28.8px;
+            margin: 0 0 5px 0;
+            cursor: pointer;
+          }
+
+        }
+      }
+    }
+  }
+
+}
+</style>

src/views/footer/index.vue

@@ -7,7 +7,7 @@
         <div class="up_left">
           <el-image
             style="margin-bottom: 15px"
-            :src="require('@/assets/footer/elogo.png')"></el-image>
+            src="http://www.yipengtaoci.com/images/elogo.png"></el-image>
           <div>
             广东祥睿陶瓷有限公司
           </div>
@@ -25,7 +25,7 @@
         <div class="up_right">
           <el-image
             style="width: 100px; height: 100px"
-            :src="require('@/assets/footer/qr.jpg')"></el-image>
+            src="http://www.yipengtaoci.com/upfiles/images/20200706/15940289752944272.jpg"></el-image>
         </div>
       </el-col>
     </el-row>

src/views/header/index.vue

@@ -19,7 +19,7 @@
         <div class="down_left">
           <a href="/">
             <el-image
-              :src="require('@/assets/header/logo.png')"></el-image>
+              src="http://www.yipengtaoci.com/images/logo.png"></el-image>
           </a>
         </div>
         <div class="down_right">

src/views/index/index.vue

@@ -1,8 +1,11 @@
 <template>
   <div>
-        <Carousel/>
+    <Carousel/>
-        <FastFindProducts/>
+    <FastFindProducts/>
-        <ProductsClassify/>
+    <ProductsClassify/>
+    <ProductsShow/>
+    <ProjectCase/>
+    <AboutUs/>
   </div>
 </template>
 
@@ -10,10 +13,13 @@
 import Carousel from "@/components/Carousel";
 import FastFindProducts from "@/components/FastFindProducts";
 import ProductsClassify from "@/components/ProductsClassify";
+import ProductsShow from "@/components/ProductsShow";
+import ProjectCase from "@/components/ProjectCase";
+import AboutUs from "@/components/AboutUs";
 
 export default {
   name: "index",
-  components: {ProductsClassify, FastFindProducts, Carousel}
+  components: {AboutUs, ProjectCase, ProductsShow, ProductsClassify, FastFindProducts, Carousel}
 }
 </script>