ceramic/src/components/FastFindProducts.vue

<template>
  <div style="min-width: 1300px">
    <div style=" border-top: 1px solid #e9e9e9;border-bottom: 1px solid #e9e9e9;">
      <el-row class="fastFind">
        <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-row>
    </div>
    <div style="border-bottom: 1px solid #e9e9e9;">
      <div class="classify" v-if="findIndex===0">
        <a v-for="(childrenItem,childrenIndex) in findList" :key="childrenIndex" @click.stop="handleChangeMenu(childrenItem)">
          {{ childrenItem.name }}
        </a>
      </div>
      <div class="classify" v-else>
        <a v-for="(childrenItem,childrenIndex) in findList" :key="childrenIndex" @click.stop="handleChangeMenu(childrenItem)">
          {{ childrenItem.title }}
        </a>
      </div>
    </div>
  </div>
</template>

<script>
import {getPublicData} from "@/api";

export default {
  name: "FastFindProducts",
  data() {
    return {
      moduleList: [
        {
          href: "/products_center",
          src: require("@/assets/index/module2-1.png"),
          name: "分类"
        },
        {
          href: "/products_center",
          src: require("@/assets/index/module2-2.png"),
          name: "空间"
        },
        {
          href: "/products_center",
          src: require("@/assets/index/module2-3.png"),
          name: "风格"
        }
      ],
      findList: [],
      findIndex:0
    };
  },
  mounted() {
    let find0 = document.getElementById("find_0");
    find0.classList.add("current");
    this.getPublicData()
  },
  methods: {
    //获取第一个数据
    getPublicData(){
      getPublicData().then(res => {
        this.findList = res.data.goodscategory_list;
      });
    },
    changeFinds(moduleIndex) {
      this.findIndex=moduleIndex
      let find0 = document.getElementById("find_0");
      find0.classList.remove("current");
      if (moduleIndex === 0) {
        this.getPublicData()
      } else if (moduleIndex === 1) {
        getPublicData().then(res => {
          this.findList = res.data.space_list;
        });
      } else if (moduleIndex === 2) {
        getPublicData().then(res => {
          this.findList = res.data.style_list;
        });
      }
    },
    handleChangeMenu(childrenItem) {
      this.$router.push({
        path: "/products_center",    //跳转的路由
        query: {    //跳转路由的参数
          menu: childrenItem.id,
          menuTitle:childrenItem.title//前面的type是参数的名称
        }
      });
    }
  }
};
</script>

<style scoped lang="scss">
* {
  font: 14px / 1.8 微软正黑体, "Microsoft JhengHei", "Microsoft Yahei", 微软雅黑, "Hiragino Sans GB", 冬青黑体, Arial, Helvetica, SimHei, 黑体, STXihei, 华文细黑, sans-serif;
}

@media screen and (max-width: 1660px) {
  .fastFind {
    width: 1230px !important;
  }
  .classify {
    width: 1230px !important;
  }
}

@media screen and (max-width: 1480px) {
  .fastFind {
    width: 1100px !important;
  }
  .classify {
    width: 1100px !important;
  }

}

.current {
  background: #eeeeee;
}

.fastFind {
  width: 1360px;
  margin: 0 auto;
  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:hover {
        background: #eeeeee;
      }

      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 {
  width: 1360px;
  margin: 0 auto;
  padding: 15px 0;

    > a {
      font-size: 16px;
      color: #333;
      margin-right: 25px;
    }

    > a:hover {
      text-decoration: underline;
    }
}
</style>