手写选项卡

效果如下

 

 

 

 

html

    <!-- 产品列表 -->

      <div class="product_main">

        <div class="product_tabs">

          <div class="product_tabs_div" v-for="(item, index) in productList" :key="item.name" @click="fn(index)" :class="{ bg: index == active }">

            <img :src="imgPath + item.image" alt="" />

            <span class="span1">|</span><span class="span2">{{ item.name }}</span>

          </div>

        </div>

        <div v-show="item1 == active">

          <div class="product_lista">

            <div class="product_list_alla" v-for="item in product_list" :key="item.title">

              <img :src="imgPath + item.image" alt="" />

              <div class="product_list_za">

                <p>{{ item.title }}</p>

                <p>{{ item.type }}</p>

                <p>{{ item.texto }}</p>

                <p>{{ item.textw }}</p>

              </div>

            </div>

          </div>

        </div>

        <div v-show="item2 == active">

          <p>待开发</p>

        </div>

      </div>

 

js  

data(){

return{

  item1: 0,

      item2: 1,

      active: 0,

      productList: [

        {

          image: "images/product/icon1.png",

          name: "干燥",

        },

        {

          image: "images/product/icon2.png",

          name: "输送",

        },

        {

          image: "images/product/icon3.png",

          name: "模温",

        },

        {

          image: "images/product/icon4.png",

          name: "粉碎",

        },

        {

          image: "images/product/icon5.png",

          name: "配合",

        },

        {

          image: "images/product/icon6.png",

          name: "储料",

        },

        {

          image: "images/product/icon7.png",

          name: "系统方案",

        },

        {

          image: "images/product/icon8.png",

          name: "Solution方案",

        },

        {

          image: "images/product/icon9.png",

          name: "数字化转型",

        },

      ],

      product_list: [

        {

          title: "智能化除湿干燥机",

          type: "MJ5-i",

          texto: "智能化自动控制",

          textw: "干燥最大节能75%",

          image: "images/product/product1.jpg",

        },

        {

          title: "输送一体式除湿干燥机",

          type: "MJ3",

          texto: "蜂巢转子除湿干燥",

          textw: "-40°露点",

          image: "images/product/product2.jpg",

        },

        {

          title: "低速型粉碎机",

          type: "SMGL3",

          texto: "多功能低速型粉碎机",

          textw: "0.4kW~1.5kW",

          image: "images/product/product3.jpg",

        },

        {

          title: "质量式配合装置",

          type: "JCGB",

          texto: "追求超高性价比",

          textw: "机上型4点计量",

          image: "images/product/product4.jpg",

        },

        {

          title: "自动加料机",

          type: "JL4",

          texto: "吸引式",

          textw: "1-6方向输送",

          image: "images/product/product5.jpg",

        },

        {

          title: "模具温度控制机",

          type: "MC5-HH",

          texto: "水式高温型",

          textw: "~160℃ ~180℃",

          image: "images/product/product6.jpg",

        },

        {

          title: "空冷密闭式水系统",

          type: "ecobrid",

          texto: "环保节能型",

          textw: "全球销售10,000套以上!",

          image: "images/product/product7.jpg",

        },

        {

          title: "注塑成型智能数据",

          type: "管理平台",

          texto: "工作站模式数据管理",

          textw: "大数据全厂整合",

          image: "images/product/product8.jpg",

        },

        {

          title: "注塑型智能数据",

          type: "管理平台",

          texto: "工作站模式数据管理",

          textw: "大数据全厂整合",

          image: "images/product/product9.jpg",

        },

        {

          title: "",

          type: "",

          texto: "",

          textw: "",

          image: "",

        },

      ],

css

 

 

.product_lista {

  width: 100%;

  display: flex;

  flex-wrap: wrap;

  justify-content: space-around;

  position: relative;

  margin-top: 50px;

}

.product_list_alla {

  width: 49%;

  display: flex;

  flex-wrap: wrap;

  justify-content: flex-end;

  align-items: center;

  margin-top: 10px;

}

.product_list_alla img {

  width: 100%;

}

.product_list_za {

  position: absolute;

  text-align: left;

  padding-right: 60px;

  margin-top: -50px;

}

.product_list_za p:nth-child(1) {

  color: #3abde6;

  font-size: 25px;

  font-weight: 900;

}

.product_list_za p:nth-child(2) {

  color: #3abde6;

  font-size: 25px;

  font-weight: 900;

}

.product_list_za p:nth-child(3) {

  font-size: 18px;

  font-weight: 700;

  margin-top: 60px;

  color: rgb(89, 89, 89);

}

.product_list_za p:nth-child(4) {

  font-size: 18px;

  font-weight: 700;

  color: rgb(89, 89, 89);

}