快应用商城类列表组件

<template>
  <div class="shopList-wrap {{(type==3 || type==4 || type == 5) && 'list-nonepadding'}}">
    <div if="{{type==1}}" class="shopList-content">
      <div class="content" for="item in shopList">
        <image class="img" src="{{item.img}}"></image>
        <text class="title">{{item.title}}</text>
      </div>
    </div>
    <div if="{{type==2}}" class="shopList-content">
      <div class="content" for="item in shopList">
        <image class="img2" src="{{item.img}}"></image>
        <text class="title2">{{item.title}}</text>
        <div><text class="tips">{{item.tips[0]}}</text></div>
        <div class="bottom">
          <text class="auxiliary-text">{{item.auxiliarytextOne}}}</text>
          <text class="auxiliary-text text-right">{{item.auxiliarytextTwo}}</text>
        </div>
      </div>
    </div>
    <div if="{{type==3}}" class="shopList-content">
      <div class="content-two" for="item in shopList">
        <image class="img3" src="{{item.img}}"></image>
        <div class="right-wrap">
          <text class="title">{{item.title}}</text>
          <div><text for="m in item.tips" class="tips">{{m}}</text></div>
          <div class="bottom">
            <text class="auxiliary-text">{{item.auxiliarytextOne}}</text>
            <text class="auxiliary-text text-right">{{item.auxiliarytextTwo}}</text>
          </div>
        </div>
      </div>
    </div>
    <div if="{{type==4}}" class="shopList-content">
      <div class="content-three" for="item in shopList">
        <div class="contentthree-top">
          <div class="content-left">
            <text class="title">{{item.title}}</text>
            <div><text for="m in item.tips" class="tips">{{m}}</text></div>
          </div>
          <div class="content-right">
            <text style="background-color:{{item.btn.bgColor}};color:{{item.btn.textColor}}" class="btn">{{item.btn.btnText}}</text>
          </div>
        </div>
        <div class="contentthree-bottom">
          <image class="img" src="{{item.img}}"></image>
          <div class="list-contentwrap">
            <div class="list-content-c" for="n in item.list">
              <span class="point"></span><text class="list-content">{{n.title}}</text>
            </div>
          </div>
        </div>
      </div>
    </div>
    <list scrollpage="true" if="{{type==5}}" class=" shopList-content-scroll">
      <list-item class="content-scroll" for="item in shopList">
        <image class="img" src="{{item.img}}"></image>
        <text class="title">{{item.title}}</text>
      </list-item>
    </list>
  </div>
</template>
<script>
export default {
  props: {
    type: { type: Number, default: 1 },
    shopList: { type: Array, default: [] }
  },
  onReady() {
  },
}
</script>
<style lang="less">
.shopList-wrap {
   100%;
  padding: 24px;
  .shopList-content {
     100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    white-space: wrap;
    .content {
      border-radius: 12px;
      margin-bottom: 18px;
      flex-direction: column;
      /* border: 1px solid #000000; */
       342px;
      .img {
         342px;
        height: 164px;
      }
      .img2 {
         342px;
        height: 342px;
      }
      .title {
        font-size: 22px;
        lines: 1;
        text-overflow: ellipsis;
        margin: 18px 24px;
      }
      .title2 {
        font-size: 32px;
        lines: 2;
        text-overflow: ellipsis;
        margin: 18px 24px;
      }
      .tips {
        margin-bottom: 18px;
        margin-left: 24px;
        font-size: 22px;
        border: 1px solid #000000;
        border-radius: 6px;
        opacity: 0.3;
      }
      .bottom {
        opacity: 0.3;
        margin: 0 24px 24px 24px;
        display: flex;
        justify-content: space-between;
        .auxiliary-text {
          font-size: 24px;
          flex: 1;
        }
        .text-right {
          text-align: right;
        }
      }
    }
    .content-two {
       100%;
      display: flex;
      /* border: 1px solid #000000; */
      border-bottom: 1px solid #cccccc;
      padding: 24px;
      .img3 {
         222px;
        height: 222px;
      }
      .right-wrap {
        margin-left: 18px;
        flex: 1;
        flex-direction: column;
        /* border: 1px solid #000000; */
        .title {
          font-size: 32px;
          lines: 2;
          text-overflow: ellipsis;
          margin: 18px 24px 18px 0;
          color: #000;
          opacity: 0.8;
          margin-bottom: 50px;
        }
        .tips {
          margin-bottom: 18px;
          margin-right: 24px;
          font-size: 22px;
          border: 1px solid #000000;
          border-radius: 6px;
          opacity: 0.3;
        }
        .bottom {
          opacity: 0.3;
          /* margin: 0 24px 24px 0; */
          display: flex;
          justify-content: space-between;
          .auxiliary-text {
            font-size: 24px;
            flex: 1;
          }
          .text-right {
            text-align: right;
          }
        }
      }
    }
    .content-three {
      flex-direction: column;
       100%;
      display: flex;
      border-bottom: 1px solid #cccccc;
      padding: 24px;
      .contentthree-top {
        display: flex;
        .content-left {
          flex: 7;
          flex-direction: column;
          .title {
            font-size: 32px;
            color: #000;
            opacity: 0.8;
            lines: 2;
            text-overflow: ellipsis;
            margin-bottom: 18px;
          }
          .tips {
            margin-right: 18px;
            margin-bottom: 24px;
            font-size: 22px;
            border: 1px solid #000000;
            border-radius: 6px;
            opacity: 0.3;
          }
        }
        .content-right {
          margin-left: 48px;
           170px;
          .btn {
            text-align: center;
             170px;
            height: 58px;
            border-radius: 12px;
            font-size: 28px;
          }
        }
      }
      .contentthree-bottom {
        display: flex;
        .img {
           288px;
          height: 181px;
          border-radius: 12px;
        }
        .list-contentwrap {
          margin-left: 24px;
          flex: 1;
          flex-direction: column;
          .list-content {
            opacity: 0.5;
            margin-top: 20px;
            lines: 1;
            text-overflow: ellipsis;
            margin-left: 18px;
          }
          .point {
            position: relative;
            top: 30px;
             10px;
            height: 10px;
            border-radius: 50%;
            background-color: #cccccc;
          }
        }
      }
    }
  }
  .shopList-content-scroll {
     100%;
    height: 248px;
    border: 1px solid #000000;
    padding: 0 0 24px 24px;
    flex-direction: row;
    .content-scroll {
      border: 1px solid #000000;
      margin-right: 18px;
      border-radius: 12px;
      flex-direction: column;
       272px;
      .img {
         272px;
        height: 164px;
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
      }
      .title {
        font-size: 22px;
        lines: 1;
        text-overflow: ellipsis;
        margin: 18px 24px;
      }
    }
  }
}
.list-nonepadding {
  padding: 0px;
}
</style>
;