@import (once) "../../../../assets/lib/px2rem/index.less";
@import (once) "../../../../assets/lib/util/index.less";
html {
  .hidden-scrollbar();
  body {
    display: flex;
    justify-content: center;
    background-color: #f3f3f3;
    min-height: 100vh;
    font-size: .px2rem(16) [ @result];

    #app {
      flex: 1;
      max-width: 750px;
      box-shadow: 36px 0 36px -36px rgba(0, 0, 0, 0.2),
        -36px 0 36px -36px rgba(0, 0, 0, 0.2);
      background: #ffffff;

      .van-pull-refresh {
        min-height: 100vh;

        .van-pull-refresh__track {
          min-height: 100vh;

          .van-list {
            display: flex;
            flex-direction: column;
            --itemPaddingGap: .px2rem(8) [ @result];

            .item {
              width: 100%;
              display: flex;
              padding: var(--itemPaddingGap);
              cursor: pointer;

              &.region {
                position: relative;
                padding-top: .px2rem(48) [ @result];
              }

              h3 {
                position: absolute;
                top: .px2rem(16) [ @result];
                left: .px2rem(8) [ @result];
                font-weight: bold;
                font-size: .px2rem(18) [ @result];
                color: #333333;
                text-align: left;
                font-style: normal;
                text-transform: none;
              }

              .cover {
                padding-right: var(--itemPaddingGap);

                img {
                  width: .px2rem(169) [ @result];
                  height: .px2rem(95) [ @result];
                }
              }

              .item-content {
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                h6 {
                  font-weight: 400;
                  font-size: .px2rem(16) [ @result];
                  color: #000000;
                  line-height: .px2rem(22) [ @result];
                  text-align: justify;
                  font-style: normal;
                  text-transform: none;
                  .text-overflow(3, .px2rem(22) [ @result]);
                }

                .item-content-msg {
                  height: .px2rem(22) [ @result];
                  display: flex;
                  align-items: flex-end;

                  i {
                    flex: 1;
                    font-weight: 400;
                    font-size: .px2rem(13) [ @result];
                    color: #a40909;
                    line-height: .px2rem(22) [ @result];
                    text-align: left;
                    font-style: normal;
                    text-transform: none;
                  }

                  span {
                    font-weight: 400;
                    font-size: .px2rem(13) [ @result];
                    color: #000000;
                    line-height: .px2rem(22) [ @result];
                    text-align: left;
                    font-style: normal;
                    text-transform: none;
                    margin-left: .px2rem(27) [ @result];
                  }

                  & > img {
                    width: .px2rem(12) [ @result];
                    height: .px2rem(9) [ @result];
                    margin: 0 .px2rem(24) [ @result] .px2rem(7) [ @result] 0;
                  }

                  u {
                    font-weight: 400;
                    font-size: .px2rem(13) [ @result];
                    color: #6b6b6b;
                    line-height: .px2rem(22) [ @result];
                    text-align: left;
                    font-style: normal;
                    text-transform: none;
                    text-decoration: none;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}