ceramic/src/components/FastFindProducts.vue

<template>
  <div>
    <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",
  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">
.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;
    }
  }

  .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;
  border-bottom: 1px solid #e9e9e9;

  #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>