电商焦点图切换

红太狼 2022-12-20 08:56 156阅读 0赞

如图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyMTgyOTg5_size_16_color_FFFFFF_t_70][]

<template>
      <div class="details-box">
        
        <div class="details-box-top">
          <div class="details-box-top-left">
            <div class="big-img">
              <img :src="product.smallIMG[0]" ref="myIMG"/>
            </div>
            <div class="small-img">
              
              
              
              <div class="img-box">
                <ul>
                  <li v-for="(item,index) in product.smallIMG" :key="index" @click="checkSmallImg(item)">
                    <img :src="item"/>
                  </li>
                </ul>
              </div>
              
              
              
            </div>
          </div>
          <div class="details-box-top-right">
            <p>{
       {product.name}}</p>
    
            <div class="btn">
              <a :href="product.src" target="_blank">快速购买</a>
            </div>
          </div>
          <div class="clearfix"></div>
          <div class="line">
            <h4>产品描述</h4>
          </div>
        </div>
        
        <div class="details-box-main">
          <img :src="product.detailsIMG[0]"/>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      name: "Details",
      data() {
        return {
          product:{
            name:'5斤苦荞面条荞麦面低脂挂面无糖精饱腹主食黑苦荞麦杂粮乔麦面条111115斤苦荞面条荞麦面低脂挂面无糖精饱腹主食黑苦荞麦杂粮乔麦面条5斤苦荞面条荞麦面低脂挂面无糖精饱腹主食黑苦荞麦杂粮乔麦面条',
            src:'https://www.taobao.com/',
            smallIMG: [
              require('../../assets/images/smallimg1.jpg'),
              require('../../assets/images/smallimg2.jpg'),
              require('../../assets/images/smallimg3.jpg'),
              require('../../assets/images/smallimg4.jpg'),
              require('../../assets/images/smallimg5.jpg'),
            ],
            detailsIMG: [
              require('../../assets/images/xqy1.png'),
              require('../../assets/images/lunbotu2.jpg'),
              require('../../assets/images/lunbotu3.jpg'),
            ],
          }
        }
      },
      methods: {
        checkSmallImg(item) {
          // console.log('选择了这个图：'+item)
          // console.log('选择了这个图this.$refs.myIMG：'+this.$refs.myIMG)
          // console.log(this.$refs.myIMG.src)
          this.$refs.myIMG.src = item
        }
      }
    }
    </script>
    
    <style lang="scss" scoped>
    .clearfix {
      clear: both;
    }
    
    .details-box {
      width: 1200px;
      margin: 100px auto;
    
      .details-box-top {
        .details-box-top-left {
          width: 40%;
          float: left;
    
          .big-img {
            img {
              display: inline-block;
              width: 480px;
              height: 480px;
            }
          }
    
          .small-img {
            margin-top: 10px;
            height: 100px;
            width: 100%;
            overflow: hidden;
            cursor: pointer;
    
            .arrow-left {
              //width: 28px;
              width: 6%;
              height: 100px;
              float: left;
              background-color: #515050;
              text-align: center;
              display: table;
    
              .iconfont {
                color: white;
                font-size: 28px;
                display: table-cell;
                vertical-align: middle;
              }
            }
    
            .img-box {
              margin: 0 6%;
              display: inline-block;
              width: 90%;
              height: 80px;
              background-color: white;
    
              ul {
                li {
                  float: left;
                  margin: 0 3px;
                  width: 80px;
                  height: 80px;
                  background-color: lightseagreen;
    
                  img {
                    width: 80px;
                    height: 80px;
                  }
                }
              }
            }
    
            .arrow-right {
              float: right;
              //width: 28px;
              width: 6%;
              height: 100px;
              background-color: #515050;
              text-align: center;
              display: table;
    
              .iconfont {
                color: white;
                font-size: 28px;
                display: table-cell;
                vertical-align: middle;
              }
            }
          }
        }
    
        .details-box-top-right {
          width: 58%;
          float: right;
          padding-left: 2%;
    
          p {
            text-align: justify;
          }
          .btn{
            width: 100px;
            margin-top: 100px;
            margin-left: 100px;
            background-color: #ff0036;
            border: 1px solid #ff0036;
            color: #fff;
            padding: 10px;
              text-align: center;
            a{
              margin: 0 auto;
            }
          }
        }
    
        .line {
          margin: 50px 0;
          width: 100%;
          height: 40px;
          background-color: rgba(130, 130, 130, 1);
    
          h4 {
            color: white;
            text-align: center;
            line-height: 40px;
          }
        }
      }
    
      .details-box-main {
        width: 1200px;
    
        img {
          width: 100%;
        }
      }
    }
    </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyMTgyOTg5_size_16_color_FFFFFF_t_70]: /images/20221120/a01e4b30a6514a09a36cba3be13d2955.png