快应用商城类列表组件

绝地灬酷狼 2023-07-16 03:36 11阅读 0赞

<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 { 
      width: 100%;
      padding: 24px;
      .shopList-content { 
        width: 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; */
          width: 342px;
          .img { 
            width: 342px;
            height: 164px;
          }
          .img2 { 
            width: 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 { 
          width: 100%;
          display: flex;
          /* border: 1px solid #000000; */
          border-bottom: 1px solid #cccccc;
          padding: 24px;
          .img3 { 
            width: 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;
          width: 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;
              width: 170px;
              .btn { 
                text-align: center;
                width: 170px;
                height: 58px;
                border-radius: 12px;
                font-size: 28px;
              }
            }
          }
          .contentthree-bottom { 
            display: flex;
            .img { 
              width: 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;
                width: 10px;
                height: 10px;
                border-radius: 50%;
                background-color: #cccccc;
              }
            }
          }
        }
      }
      .shopList-content-scroll { 
        width: 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;
          width: 272px;
          .img { 
            width: 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>
    ;