快应用图文信息流列表组件

以你之姓@ 2023-07-16 03:36 17阅读 0赞

<template>
      <div class="msgList-wrap">
        <div if="{ {type==1}}" class="msgList-content">
          <div class="left-content">
            <text class="title">{ { title}}</text>
            <div class="bottom">
              <div class="bottom-left">
                <text class="tips">{ { tips}}</text>
                <text class="auxiliary-text-one">{ { auxiliaryoneText}}</text>
              </div>
              <text class="bottom-right">{ { auxiliarytwoText}}</text>
            </div>
          </div>
          <div class="right-content">
            <img src="{ {img}}" alt="">
          </div>
        </div>
        <div if="{ {type==2}}" class="msgList-contenttwo">
          <text class="title">{ { title}}</text>
          <img class="image" src="{ {img}}" alt="">
          <div class="bottom">
            <div class="bottom-left">
              <text class="tips">{ { tips}}</text>
              <text class="auxiliary-text-one">{ { auxiliaryoneText}}</text>
            </div>
            <text class="bottom-right">{ { auxiliarytwoText}}</text>
          </div>
        </div>
        <div if="{ {type==3}}" class="msgList-contenttwo">
          <text class="title">{ { title}}</text>
          <div class="img-wrap">
            <img class="image" src="{ {img}}" alt="">
            <img class="image" src="{ {img}}" alt="">
            <img class="image" src="{ {img}}" alt="">
          </div>
          <div class="bottom">
            <div class="bottom-left">
              <text class="tips">{ { tips}}</text>
              <text class="auxiliary-text-one">{ { auxiliaryoneText}}</text>
            </div>
            <text class="bottom-right">{ { auxiliarytwoText}}</text>
          </div>
        </div>
        <div if="{ {type==4}}" class="msgList-contenttwo">
          <text class="title">{ { title}}</text>
          <div class="bottom">
            <div class="bottom-left">
              <text class="tips">{ { tips}}</text>
              <text class="auxiliary-text-one">{ { auxiliaryoneText}}</text>
            </div>
            <text class="bottom-right">{ { auxiliarytwoText}}</text>
          </div>
        </div>
      </div>
    </template>
    <script>
    export default { 
      props: { 
        type: {  type: Number, default: 1 },
        title: {  type: String, default: '' },
        tips: {  type: String, default: '' },
        auxiliaryoneText: {  type: String, default: '' },
        auxiliarytwoText: {  type: String, default: '' },
        img: {  type: String, default: '' },
      },
      onReady() { 
      },
    }
    </script>
    <style lang="less">
    .msgList-wrap { 
      width: 100%;
      flex-direction: row;
      .msgList-content { 
        border: 1px solid #000000;
        padding: 24px;
        width: 100%;
        display: flex;
        .left-content { 
          flex-direction: column;
          flex: 1;
          margin-right: 18px;
          .title { 
            line-height: 78px;
            height: 78px;
            lines: 2;
            text-overflow: ellipsis;
            font-size: 32px;
          }
          .bottom { 
            width: 100%;
            margin-top: 36px;
            display: flex;
            font-size: 24px;
            .bottom-left { 
              flex: 6;
              .tips { 
                margin-top: 2px;
                font-size: 22px;
                border: 1px solid #000000;
                opacity: 0.3;
                color: #000;
                border-radius: 6px;
                margin-right: 18px;
                margin-left: 2px;
              }
            }
            .bottom-right { 
              width: 190px;
              lines: 1;
              text-overflow: ellipsis;
              text-align: right;
            }
          }
        }
        .right-content { 
          image { 
            width: 222px;
            height: 158px;
            border-radius: 12px;
          }
        }
      }
      .msgList-contenttwo { 
        border: 1px solid #000000;
        padding: 24px;
        width: 100%;
        display: flex;
        flex-direction: column;
        .title { 
          lines: 2;
          text-overflow: ellipsis;
          font-size: 32px;
          margin-bottom: 18px;
        }
        .bottom { 
          width: 100%;
          margin-top: 36px;
          display: flex;
          font-size: 24px;
          .bottom-left { 
            flex: 6;
            .tips { 
              padding: 0px 2px;
              margin-top: 2px;
              font-size: 22px;
              border: 1px solid #000000;
              opacity: 0.3;
              color: #000;
              border-radius: 6px;
              margin-right: 18px;
              margin-left: 2px;
            }
          }
          .bottom-right { 
            width: 190px;
            lines: 1;
            text-overflow: ellipsis;
            text-align: right;
          }
        }
        .image { 
          width: 702px;
          height: 395px;
          border-radius: 12px;
        }
        .img-wrap { 
          display: flex;
          justify-content: space-between;
          .image { 
            /* flex: 1; */
            flex-direction: row;
            width: 222px;
            height: 158px;
            border-radius: 12px;
          }
        }
      }
    }
    </style>