电商焦点图（只是样式。还没加js）

不念不忘少年蓝@ 2022-12-20 03:14 101阅读 0赞

设计了一种效果。结果又被推翻了。代码保存一份：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyMTgyOTg5_size_16_color_FFFFFF_t_70][]

<template>
      <div class="details-box">
        <h1>详情页</h1>
        
        <div class="details-box-top">
          <div class="details-box-top-left">
            <div class="big-img">
              <img :src="carouselIMG[0]"/>
            </div>
            <div class="small-img">
              <div class="arrow-left">
                <i class="iconfont"></i>
              </div>
              <div class="img-box">
                <ul>
                  <li v-for="(item,index) in smallIMG" :key="index">
                    <img :src="item"/>
                  </li>
                </ul>
              </div>
              <div class="arrow-right">
                <i class="iconfont"></i>
              </div>
            </div>
          </div>
          <div class="details-box-top-right">
            <p>5斤苦荞面条荞麦面低脂挂面无糖精饱腹主食黑苦荞麦杂粮乔麦面条111115斤苦荞面条荞麦面低脂挂面无糖精饱腹主食黑苦荞麦杂粮乔麦面条5斤苦荞面条荞麦面低脂挂面无糖精饱腹主食黑苦荞麦杂粮乔麦面条</p>
            <a href="www.taobao.com">快速购买</a>
          </div>
          <div class="clearfix"></div>
          <div class="line">
            <h4>产品描述</h4>
          </div>
        </div>
        
        <div class="details-box-main">
          <img :src="detailsIMG[0]" width="1200px"/>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      name: "Details",
      data() {
        return {
          carouselIMG: [
            require('../../assets/images/qmm1.jpg'),
            require('../../assets/images/lunbotu2.jpg'),
            require('../../assets/images/lunbotu3.jpg'),
          ],
          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'),
          ],
        }
      },
    }
    </script>
    
    <style lang="scss" scoped>
    .clearfix {
      clear: both;
    }
    
    .details-box {
      width: 1200px;
      margin: 70px auto;
    
      .details-box-top {
        .details-box-top-left {
          width: 40%;
          float: left;
    
          .big-img {
            img {
              display: inline-block;
            }
          }
    
          .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-top: 20px;
              display: inline-block;
              width: 88%;
              height: 100px;
              background-color: lightcoral;
    
              ul {
                li {
                  float: left;
                  margin: 0 2px;
                  width: 100px;
                  height: 100px;
                  background-color: lightseagreen;
                }
              }
            }
    
            .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: 60%;
          float: right;
    
          p {
            margin-left: 20px;
            text-align: justify;
          }
    
          a {
            position: relative;
            display: block;
            margin-left: 20px;
            //padding-left: 5px;
            text-align: center;
            width: 138px;
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            color: #ec6ca5;
            border: 1px solid #dddddd;
            border-radius: 80px;
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
          }
        }
    
        .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 {
    
      }
    }
    </style>

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