• vue+css3下拉列表展开


    <template>
      <div>
        <h2 class="record-title">中奖记录</h2>
        <div>
          <div v-for="(item, index) in arr" :key="index" class="record-item">
            <div class="record-item-field">
              <div :class="{'active': item.isDrop}" class="record-content">
                <div class="record-time">
                  <div class="record-time-item">2019-08-15</div>
                  <div class="record-time-item">20:35:26</div>
                </div>
                <div class="record-prize">
                  <div class="record-prize-item">一等奖</div>
                  <div class="record-prize-item">新秀丽行李箱新秀丽行李</div>
                </div>
                <button type="button" @click="obtain(item, index)" class="record-button">
                  {{ item.canDrop ? '领取说明' : '马上领取' }}
                  <i v-if="item.canDrop" :class="{'active':item.isDrop}" class="triangle"></i>
                </button>
              </div>
            </div>
            <div ref="recordRemark" class="record-item-remark">
              <p ref="recordRemarkChild">{{ item.content }}</p>
            </div>
          </div>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      name: 'RecordList',
      data() {
        return {
          isDrop: false,
          arr: [{
            isDrop: false,
            time: 0,
            content: '奖品已发放到您的人保会员账',
            canDrop: false
          }, {
            isDrop: false,
            time: 1,
            content: '奖品已发放到您的人保会员账号,请到【广东人保财险】微信公众号-我的人保-个人中信-卡券/我的卡券中查收使用。',
            canDrop: true
          }, {
            isDrop: false,
            time: 2,
            content: '奖品已发放到您的人保会员账',
            canDrop: true
          }]
        }
      },
      methods: {
        obtain(item, index) {
          if(item.canDrop) {
            item.isDrop = !item.isDrop
            let childHeight = this.$refs.recordRemarkChild[index].offsetHeight
            let height = item.isDrop ? childHeight : 0
            this.$refs.recordRemark[index].style.height = height + 'px'
          }
        }
      }
    }
    </script>
    
    <style lang="scss" scoped>
      .record-title {
        height: px2rem(88px);
        border-bottom: 1px solid #e4e4e4;
        @include font-dpr(32px);
        color: #333;
        font-weight: 600;
        text-align: center;
        @include lh-dpr(88px);
      }
      .record-item-field {
        padding-left: px2rem(24px);
        .record-content {
          height: px2rem(140px);
          padding-left: px2rem(6px);
          padding-right: px2rem(30px);
          border-bottom: 1px solid #e4e4e4;
          display: flex;
          align-items: center;
          justify-content: space-between;
          &.active {
            border-bottom-color: transparent;
          }
        }
      }
      .record-time {
         px2rem(204px);
        &-item {
          color: #aaa;
          font-weight: 600;
          @include font-dpr(22px);
          @include lh-dpr(22px);
          &:first-child {
            margin-bottom: px2rem(20px);
          }
        }
      }
      .record-prize-item {
         px2rem(326px);
        padding-right: px2rem(6px);
        color: #333;
        font-weight: 600;
        @include font-dpr(28px);
        @include lh-dpr(28px);
        @extend %ellipsis;
        &:first-child {
          margin-bottom: px2rem(20px);
        }
      }
      .record-button {
        padding: px2rem(8px) 0;
         px2rem(160px);
        background: #E90832;
        border-radius: 25px;
        border: none;
        color: #fff;
        white-space: nowrap;
        @include font-dpr(24px);
        display: flex;
        align-items: center;
        justify-content: center;
        .triangle {
          margin-left: px2rem(4px);
          @include triangle($direction:top, $size:4px, $borderColor:#fff);
          transform: rotate(180deg);
          transition: transform .3s;
          &.active {
            transform: rotate(0);
          }
        }
      }
      .record-item-remark {
        height: 0;
        overflow: hidden;
        transition: height .35s;
        background: #FFF4F4;
        p {
          padding: px2rem(33px) px2rem(30px);
          color: #666;
          @include font-dpr(26px);
          @include lh-dpr(37px);
        }
      }
    </style>
  • 相关阅读:
    [Drupal] .htaccess issue
    [Drupal] 404 page didn't render other blocks.
    [Drupal] How to add the catcha to the webform
    [Javascript] Javascript如何定义函数参数的默认值
    [MySQL] #1153 Got a packet bigger than 'max_allowed_packet' bytes
    [Drupal] How to change the content from English to language Language neutral
    [Javascript] How to enlarge and small the font
    [Drupal] My method of using ajax in Drupal
    [Drupal] Submit and redirect back to the modify page
    [Drupal] Creating Checkboxes, Radio Buttons, or Select Lists
  • 原文地址:https://www.cnblogs.com/uno1990/p/12054088.html
Copyright © 2020-2023  润新知