Merge pull request '邓洁 : 快速查找区和产品分类区样式初步完成' (#4) from dj into master

Reviewed-on: #4

src/components/Carousel.vue

@@ -2,7 +2,7 @@
   <el-row>
     <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
       <div class="slideshow">
-        <el-carousel trigger="click" height="745px">
+        <el-carousel trigger="click" height="36.2vw">
           <el-carousel-item v-for="(item,index) in bannerDate" :key="index">
             <div>
               <img :src="item.imgurl" alt="">

src/components/FastFindProducts.vue

@@ -1,41 +1,291 @@
 <template>
   <div>
-    <el-row type="flex" style="height: 122px">
-      <el-col :span="4">
-      </el-col>
-      <el-col :span="16">
-        <div class="fast_left">
-          <p>
-            快速查找产品
-          </p>
-          <p>
-            可以快速地找到合适你的产品
-          </p>
-        </div>
-      </el-col>
-    </el-row>
+    <div class="fastFind">
+      <el-row type="flex">
+        <el-col :span="4">
+        </el-col>
+        <el-col :span="16">
+          <div class="fast_left">
+            <p>
+              快速查找产品
+            </p>
+            <p>
+              可以快速地找到合适你的产品
+            </p>
+          </div>
+          <div class="fast_right">
+            <ul>
+              <li v-for="(moduleItem,moduleIndex) in moduleList" :key="moduleIndex" :id="'find_'+moduleIndex"
+                  @mouseenter="changeFinds(moduleIndex)">
+                <a :href="moduleItem.href">
+                <span>
+                  <img :src="moduleItem.src" alt=""/>
+                </span>
+                  <span>{{ moduleItem.name }}</span>
+                </a>
+              </li>
+            </ul>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+    <div class="classify">
+      <el-row type="flex">
+        <el-col :span="4">
+        </el-col>
+        <el-col :span="16">
+          <div :id="'bok_'+findIndex" v-for="(findItem,findIndex) in findList" :key="findIndex">
+            <ul>
+              <li v-for="(childrenItem,childrenIndex) in findItem.children" :key="childrenIndex">
+                <a :href="childrenItem.href" class="">
+                  {{ childrenItem.title }}
+                </a>
+              </li>
+            </ul>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
-  name: "FastFindProducts"
+  name: "FastFindProducts",
+  data() {
+    return {
+      moduleList: [
+        {
+          href: '',
+          src: 'http://www.yipengtaoci.com/images/module2-1.png',
+          name: '分类'
+        },
+        {
+          href: '',
+          src: 'http://www.yipengtaoci.com/images/module2-2.png',
+          name: '空间'
+        },
+        {
+          href: '',
+          src: 'http://www.yipengtaoci.com/images/module2-3.png',
+          name: '风格'
+        },
+      ],
+      findList: [
+        {
+          children: [
+            {
+              href: '',
+              title: '瓷抛大理石'
+            },
+            {
+              href: '',
+              title: '通体大理石'
+            }, {
+              href: '',
+              title: '中板通体大理石'
+            }, {
+              href: '',
+              title: '大板通体大理石'
+            }, {
+              href: '',
+              title: '银河系大板'
+            }, {
+              href: '',
+              title: '仿古砖600x600'
+            }, {
+              href: '',
+              title: '金刚大理石'
+            }, {
+              href: '',
+              title: '岩板'
+            }, {
+              href: '',
+              title: '微水泥'
+            }
+          ]
+        },
+        {
+          children: [
+            {
+              href: '',
+              title: '客厅瓷砖'
+            },
+            {
+              href: '',
+              title: '厨房瓷砖'
+            }, {
+              href: '',
+              title: '卫浴瓷砖'
+            }, {
+              href: '',
+              title: '书房瓷砖'
+            }, {
+              href: '',
+              title: '卧室瓷砖'
+            }, {
+              href: '',
+              title: '餐厅瓷砖'
+            }, {
+              href: '',
+              title: '走廊瓷砖'
+            }, {
+              href: '',
+              title: '大厅瓷砖'
+            }
+          ]
+        },
+        {
+          children: [
+            {
+              href: '',
+              title: '简约风格'
+            },
+            {
+              href: '',
+              title: '新中式风格'
+            }, {
+              href: '',
+              title: '欧式风格'
+            }, {
+              href: '',
+              title: '古典风格'
+            }, {
+              href: '',
+              title: '田园风格'
+            }, {
+              href: '',
+              title: '工业风格'
+            }
+          ]
+        },
+      ]
+    }
+  },
+  methods: {
+    changeFinds(moduleIndex) {
+      let find0 = document.getElementById('find_0')
+      let find1 = document.getElementById('find_1')
+      let find2 = document.getElementById('find_2')
+      let bok0 = document.getElementById('bok_0')
+      let bok1 = document.getElementById('bok_1')
+      let bok2 = document.getElementById('bok_2')
+      if (moduleIndex === 0) {
+        find0.classList.add('current')
+        find1.classList.remove('current')
+        find2.classList.remove('current')
+        bok0.style.display = 'block'
+        bok1.style.display = 'none'
+        bok2.style.display = 'none'
+      } else if (moduleIndex === 1) {
+        find0.classList.remove('current')
+        find1.classList.add('current')
+        find2.classList.remove('current')
+        find1.addClass = 'current'
+        bok0.style.display = 'none'
+        bok1.style.display = 'block'
+        bok2.style.display = 'none'
+      } else if (moduleIndex === 2) {
+        find0.classList.remove('current')
+        find1.classList.remove('current')
+        find2.classList.add('current')
+        find2.addClass = 'current'
+        bok0.style.display = 'none'
+        bok1.style.display = 'none'
+        bok2.style.display = 'block'
+      }
+    }
+  }
 }
 </script>
 
 <style scoped lang="scss">
-.fast_left{
-  margin-top: 24px;
-  float: left;
-  p:first-child{
-    color: #333;
-    font-size: 24px;
-    line-height: 43px;
+.current {
+  background: #eeeeee;
+}
+
+.fastFind {
+  border-top: 1px solid #e9e9e9;
+  border-bottom: 1px solid #e9e9e9;
+  background-color: #ffffff;
+
+  .fast_left {
+    margin-top: 24px;
+    float: left;
+
+    p:first-child {
+      color: #333;
+      font-size: 24px;
+      line-height: 43px;
+    }
+
+    p:last-child {
+      color: #666;
+      font-size: 14px;
+      line-height: 25px;
+    }
   }
-  p:last-child{
-    color: #666;
-    font-size: 14px;
-    line-height: 25px;
+
+  .fast_right {
+    float: right;
+
+    ul {
+      li {
+        display: inline;
+        width: 120px;
+        float: left;
+        margin: 0 0 0 -1px;
+        border-left: 1px solid #e9e9e9;
+        border-right: 1px solid #e9e9e9;
+        text-align: center;
+
+        > a {
+          display: inline-block;
+          width: 100%;
+          height: 82px;
+          float: left;
+          padding: 20px 0;
+
+          span {
+            width: 100%;
+            float: left;
+            margin: 2px 0;
+            font-size: 16px;
+            text-align: center;
+            color: #333;
+          }
+        }
+      }
+    }
+  }
+}
+
+.classify {
+  padding: 15px 0;
+  height: 30px;
+  line-height: 30px;
+
+  #bok_1 {
+    display: none;
+  }
+
+  #bok_2 {
+    display: none;
+  }
+
+  ul {
+    li {
+      display: inline;
+
+      > a {
+        font-size: 16px;
+        color: #333;
+        margin-right: 25px;
+      }
+      > a:hover {
+        text-decoration: underline;
+      }
+    }
   }
 }
 </style>

src/components/ProductsClassify.vue

@@ -0,0 +1,159 @@
+<template>
+  <div class="grid">
+    <el-row type="flex">
+      <el-col :span="4">
+      </el-col>
+      <el-col :span="16">
+        <el-col :span="8">
+          <div class="grid_left">
+            <a href="">
+            <span class="pic">
+              <img src="http://www.yipengtaoci.com/images/ibg0.jpg" alt=""/>
+            </span>
+              <span class="info">产品分类</span>
+              <span>了解更多</span>
+            </a>
+          </div>
+        </el-col>
+        <el-col :span="16">
+          <div class="grid_right">
+            <ul>
+              <li v-for="(picItem,picIndex) in pics" :key="picIndex" :class="'pic_'+picIndex">
+                <a :href="picItem.href">
+                <span >
+                  <img :src="picItem.src" alt=""/>
+                </span>
+                  <span class="info">{{picItem.name}}</span>
+                </a>
+              </li>
+            </ul>
+          </div>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProductsClassify",
+  data(){
+    return{
+      pics:[
+        {
+          href:'',
+          src:'http://www.yipengtaoci.com/upfiles/images/20200717/15949961573658658.png',
+          name:'瓷抛大理石'
+        },
+        {
+          href:'',
+          src:'http://www.yipengtaoci.com/upfiles/images/20200717/15949961872720151.jpg',
+          name:'通体大理石'
+        },
+        {
+          href:'',
+          src:'http://www.yipengtaoci.com/upfiles/images/20200717/15949962397730467.jpg',
+          name:'中板通体大理石'
+        },
+        {
+          href:'',
+          src:'http://www.yipengtaoci.com/upfiles/images/20200717/15949963006120695.jpg',
+          name:'大板通体大理石'
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.grid {
+  padding: 50px 0 60px 0;
+  background-color: #f9f9f9;
+
+  .grid_left:hover {
+    filter: brightness(85%);
+    opacity: 1;
+  }
+
+  //.grid_left:hover span:nth-child(2) {
+  //  //background-color: red;
+  //}
+  .grid_left {
+    position: relative;
+    display: inline-block;
+    transition: all 0.6s;
+
+    a {
+      .pic {
+        img {
+          width: 440px;
+          z-index: 9;
+        }
+      }
+
+
+
+      span:last-child {
+        color: #fff;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 160px;
+        height: 36px;
+        line-height: 36px;
+        margin: 20px 0 0 -80px;
+        font-size: 16px;
+        letter-spacing: 2px;
+        text-align: center;
+        background-color: #de832f;
+        border-radius: 100px 100px 100px 100px;
+        z-index: 999;
+      }
+    }
+  }
+  .info{
+    color: #fff;
+    position: absolute;
+    top: 42%;
+    left: 0;
+    width: 100%;
+    font-size: 34px;
+    font-weight: bold;
+    letter-spacing: 2px;
+    text-align: center;
+    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
+    z-index: 999;
+  }
+
+  .grid_right{
+    //float: right;
+    ul{
+      display: flex;
+      flex-wrap: wrap;
+      li{
+        margin-top: -5px;
+        padding: 5px;
+        span:first-child{
+
+          width: 100%;
+          filter: alpha(opacity=94);
+          -moz-opacity: 0.94;
+          opacity: 0.94;
+          transition: all 0.6s;
+
+        }
+        a{
+          position: relative;
+          display: inline-block;
+          img{
+            width: 440px;
+            height: 296px;
+            overflow: hidden;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/index/index.vue

@@ -1,17 +1,19 @@
 <template>
   <div>
-    <Carousel/>
-    <FastFindProducts/>
+        <Carousel/>
+        <FastFindProducts/>
+        <ProductsClassify/>
   </div>
 </template>
 
 <script>
 import Carousel from "@/components/Carousel";
 import FastFindProducts from "@/components/FastFindProducts";
+import ProductsClassify from "@/components/ProductsClassify";
 
 export default {
   name: "index",
-  components: {FastFindProducts, Carousel}
+  components: {ProductsClassify, FastFindProducts, Carousel}
 }
 </script>