proginn-frontend/assets/css/user/collectArticle.scss

.article-right ,.article-right >img {
  width: 154px;
  height:114px;
}

.video-move{
  position: absolute;
  top:5px;
  right:5px;
  padding:5px 10px;
  border-radius:5px;
  color:white;
  border:1px solid rgba(200,200,200,0.8);
  background-color: rgba(255,104,75,0.9);
}
.cell{
   position:relative;
 }
.move{
  font-size:0.2rem;
  color:rgba(255,104,75,1);
  line-height:0.24rem;
  position:absolute;
  top:0.16rem;
  right:0px
}
.source.no-img{
  width:70%
}
.article{
  position: relative;
}
.collect {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 297px;
  overflow: hidden;
  margin-bottom: 10px;
  color: white;
  margin-top: 40px;
}

.collect-title {
  height: 75px;
  font-size: 42px;
  font-weight: 600;
  line-height: 75px;
  text-align: center;
}

.collect-des {
  font-size: 17px;
  line-height: 24px;
  text-align: center;
  width: 80%;
}

.content-box {
  background-color: white;
}

.el-pagination {
  margin: 40px 0;
  text-align: center;
  padding-bottom: 20px;
}

.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 0;
}

.heji-box {
  padding: 30px 0;
  border-bottom: 1px solid rgb(230, 230, 230);
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.1);
}

.heji-other {
  font-size: 12px;
  font-weight: 500;
  color: rgba(102, 102, 102, 1);
  line-height: 17px;
}

.heji-logo {
  width: 24px;
  height: 24px;
  border-radius: 12px;
  margin-right: 7px;
}

.heji-username {
  font-size: 12px;
  font-weight: 500;
  color: rgba(34, 34, 34, 1);
  line-height: 17px;
}

.heji-left > img {
  width: 154px;
  height: 114px;
  object-fit: cover;
  margin-right: 10px;
}

.heji-right {
  padding: 5px 0;
  width: 537px;
}

.heji-height {
  color: rgba(17, 17, 17, 1);
  line-height: 25px;
  font-size: 18px;
}

.heji-con {
  font-size: 13px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(153, 153, 153, 1);
  line-height: 18px;
  margin-bottom: 20px;
  margin-top: 10px;
}

.header-nickname {

  position: relative;
}

.tag {
  width: 59px;
  position: absolute;
  right: -66px;
  top: 0px;
  height: 21px;
  background: rgba(255, 181, 60, 1);
  border-radius: 2px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 1);
  line-height: 21px;
  text-align: center;
}

hr {
  margin-bottom: 20px;
  height: 1px;
  border: 0;
  background-color: rgb(230, 230, 230);
}

.m-c-block {
  width: 245px;
  line-height: 60px;
  margin: 0 auto;
}

.btn-add {
  width: 700px;
  height: 50px;
  background: rgba(48, 142, 255, 0.1);
  border-radius: 4px;
  margin-top: 20px;
  text-align: center;
  line-height: 50px;
  color: rgba(48, 142, 255, 1);
  margin: 0 auto;
  cursor: pointer;
}

.article-list {
  width: 700px;
  margin: 0 auto;
}

.article {
  padding: 30px 20px;
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgb(230, 230, 230)
}

.article-left {
  width: 523px;
}

.article-title {
  font-size: 18px;
  color: rgba(17, 17, 17, 1);
}

.article-desc {
  margin-top: 6px;
  margin-bottom: 18px;
  font-size: 13px;
  color: rgba(153, 153, 153, 1);
  line-height: 18px;
}

.article-right {
  width: 154px;
}

.article .icon {
  width: 16px;
}

.live-source {
  margin-right: 10px;
}

.live-source > img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin-right: 4px;
}

.live-time {
  padding: 0 10px;
  border-left: 1px solid rgb(218, 218, 218);
}

.live-people {
  padding: 0 10px;
}

.live > i {
  position: absolute;
  right: 20px;
  top: 20px;
  color: gray;
}

.community-u {
  min-width: 0;
  min-height: 0;
  max-width: 1000px;
}

.background {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 450px;
  z-index: -1;
  background: url(~@/assets/quan/img/2.png)  no-repeat;
  background-size: cover;
}

//后续Less
.community-u {
  .company-info {
    height: 51px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    padding: 0 13px;
    margin: 0 auto;
    margin-top: 100px;
    width: 342px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    &:hover {
      background: rgba(0, 0, 0, 0.2);
      cursor: pointer;
    }

    .left {
      display: flex;
      align-items: center;
      img {
        width: 30px;
        height: 30px;
        border-radius: 50%;
      }
      .company-name {
        height: 17px;
        font-size: 12px;
        font-weight: 600;
        line-height: 17px;
        margin-left: 8px;
        margin-right: 3px;
      }
      .icon-rz {
        height: 17px;
        line-height: 18px;
        font-size: 9px;
        background-color: rgb(47, 142, 255);
        padding: 0 5px;
      }
    }

    .collect-qu {
      width: 191px;
      height: 44px;
      border-radius: 3px;
      margin: 0 auto;
      margin-top: 40px;
      border: 1px solid rgba(255, 255, 255, 1);
      line-height: 44px;
      text-align: center;
      &:hover {
        font-weight: 600;
      }
    }
  }
  .content-box {

    .topSelectArea {
      width: 1000px;
      height: 60px;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 0px 0px 0px rgba(243, 243, 243, 1);
      display: flex;
      justify-content: center;
      align-items: center;
      .cell {
        height: 60px;
        font-size: 16px;
        line-height: 60px;
        font-weight: 400;
        color: rgba(34, 34, 34, 1);
        position: relative;
        cursor: pointer;
        &:nth-child(n+2) {
          margin-left: 122px;
        }
        &.ok {
          color: rgba(34, 34, 34, 1);
          font-weight: 600;
          &:after {
            position: absolute;
            content: "";
            bottom: 0;
            left: calc(50% - 20px);
            width: 40px;
            height: 3px;
            background: rgba(48, 142, 255, 1);
            border-radius: 2px;
          }
        }
      }
    }

    .listArea {
      margin: 20px auto;
      width: 700px;
      border-radius: 4px;

      .article-list, .videoList {
        margin-top: 10px;
      }
      .videoList {
        display: flex;
        flex-wrap: wrap;
        .cell {
          width: 344px;
          height: 325px;
          border-radius: 4px;
          overflow: hidden;
          box-shadow: 0px 3px 12px 0px rgba(8, 27, 50, 0.05);
          border: 1px solid rgba(0, 0, 0, 0.03);
          margin-top: 10px;
          cursor: pointer;

          &:nth-child(2n) {
            margin-left: 12px;
          }

          .videoImg {
            width: 344px;
            height: 194px;
            position: relative;
            .img {
              width: 100%;
              height: 100%;
              object-fit: cover;
              border: 0;
              vertical-align: middle;
            }
            .play {
              position: absolute;
              width: 46px;
              height: 46px;
              left: 50%;
              top: 50%;
              transform: translate(-50%, -50%);
            }
            .time {
              position: absolute;
              bottom: 10px;
              right: 10px;
              width: 54px;
              height: 22px;
              background: rgba(0, 0, 0, 0.3);
              border-radius: 10px;
              border: 1px solid rgba(255, 255, 255, 0.08);
              text-align: center;
              font-size: 12px;
              font-weight: 500;
              color: rgba(255, 255, 255, 1);
              line-height: 22.01px;
            }
          }
          .videoDetail {
            width: 344px;
            height: 131px;
            background: rgba(255, 255, 255, 1);
            padding: 0 10px;
            box-sizing: border-box;
            .companyInfo {
              width: 100%;
              height: 44px;
              display: flex;
              align-items: center;
              .img {
                width: 26px;
                height: 26px;
                border-radius: 50%;
              }
              .name {
                margin-left: 5px;
                height: 18px;
                font-size: 13px;
                font-weight: 500;
                color: rgba(34, 34, 34, 1);
                line-height: 18px;
              }
            }
            .videoTitle {
              height: 36px;
              font-size: 14px;
              font-weight: 400;
              color: rgba(51, 51, 51, 1);
              line-height: 18px;
              display: -webkit-box;
              overflow: hidden;
              text-overflow: ellipsis;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
            }
            .videoInfo {
              margin-top: 13px;
              width: 100%;
              display: flex;
              .playNum, .likeNum {
                position: relative;
                padding-left: 20px;
                height: 17px;
                font-size: 12px;
                font-weight: 500;
                color: rgba(153, 153, 153, 1);
                line-height: 17px;
                &:after {
                  content: "";
                  position: absolute;
                  left: 0;
                  top: 0;
                  width: 16px;
                  height: 16px;
                  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFwAAABcCAYAAADj79JYAAAHyElEQVR4Xu2da2gcVRTH/9FWP6zxlVhjfeBztSj4fiCS+MSiqKApSiQk0ECL/RgSA4VCoBZioPnQD1v1S21oidZQtKgNtEarrZotPiM1ptGiaTZpJM2mq026TVb+05m42czuzuPO3JndOXDJspm5597f3L1z77nnnlsC78kSAJeo6VIATKUAlgK4QP3Lz5Skms6of08BmFRTHADTWS9VscQDhTkPwDIAywFcDeBKAPxOhMwBGANwHMAIgBMA+J00kQWcegk4DOAGAGzVbghb+x8AflMfQMoNpek63AZ+EYDbAdwMIOR2ZTP0/QPgKIBfACTcKotbwNkn3wXgFoHdhShG7GIGAfyg9vmi8tXNx2ngFwO4H8BNjtZCXOZDAKIApsRluTAnp4CfD+BOAHcD4Gc/ySyA7wH8CICfhYoTwK8B8AgAtm4/C1v5VwCGRVZCJHAO5R4CcIfIAnogr34A34gaTooCzonJkwCu8AAgJ4owDmAfAE6sbIkI4NcBeFydBdoqjMdv5mz2MwB/2imnXeCcuFQBsJuPnTq4eS8nSl+oEydLeu2A4ijkQUta/X/Tt+ooxnRNrAJ/QJ3ImFZYQDdwotRntj5WgBdzy87ka7qlmwXOPvtRs0+1wK//3EyfbgY4RyNPF9EL0mg74Yu0x+joxShwjrNfKoKhn1HImddxyNhtZJxuBDhnkC8U8KTGKuTM+zg5+jDfjNQI8IcLcLouCnJmPjQDHMqVeT7gNEQ941TpCjTfT3IZvHIBp1l1VQFY/dx+rrQy7spm2s0F/F4ATIGYJ3AYwHd6t2UDTls2W7ffFg/Mo3HmDi5csJUvWjnKBvwJHy2LOYPMfq5crtufmY0ecC74vmxfX5ADgPcyF6b1gNPcemuASwiBAdWcO59ZJnD6jbziQVcGIbWXkAldMLrS/V4ygdO+TWugdCkrK1ty8uTJs3NzUj3TRHDg6j+tioqkA+fnGtkeUS0tLbc1NjauKi8vX55MJs9Eo9FDDQ0Ne44cOfKviNpLyIMeXjsBKG516cDpSPmshALNq1yzZs31kUjk9ZKSkgXOnNPT04nOzs4P1q5d+7VPW/zHqkPpAuCPqa5o0pgPDAy8Fg6Hs3Zpw8PDR5uamnZ0dXXRE9ZPQle63vQWzhZV76IXqy6sqampN0pLS8tzkUylUrMHDhzYX1NTs2dkZIRmUT8IvXa30ZKodSkVAJ6XXfJEIvFmKBTiPCCvJBKJiUgk8n5zczPd0vwgHwEY1YB7wm5iBrhGeGho6Od169Z19fT0/O1x6op9RQP+HICrZBfYCnCWeXZ2Nrl3795Pa2treziUlF2PLPpjAPYQOHcfsP8Wtc3Dcn2tAtcUTk5OjrW3t+/ctGnTr5YL4dyNnFBsI/Aydb3SOVUGc7YLXFPT398fXb169a6+vj5uqvKSdBP4jaojpvSCiQLOiiSTydPd3d0f1dfX987MzLi+lycLzH0Efg+A+6TTpsHBxCjFaHnHx8f/2rBhw46tW7dyM5VsOUzg9HzlJifp4gRwtVKpaDT6ZV1d3W7JJoKjBE4XCO6NlC4OAlfqNj09faqzs7NboolgjMCrAVwunbZDXYpevSSaCCY0CyHt4NLF6RaeXkGO3dva2t5ev379Ty5WPEHgdQAudFFpVlVuAtdGMuFwuOXYsWPTLtV/hsAbvDDpYYXdBk6d7e3tkebmZvp6uyGK8aqogW/evPmtxsZGXR8SB56AArxouxT24ytWrGgaHBw87QBcvSyVLoXLakX30kylUnMdHR3vuNi6lV6zKIeF8Xh8vLW1dVtHRwejSbgpyrCwaCY+XMg9ePBgb3V19e7R0VEZq0XKxKcYpvaQ2KrTf0HK1L6gjVceaNXpwBXjVUGaZ1lLj7TqdOCKebbgFiA81qrTgSsLEAWzxObRVq0Bn19i4xe+XkRWayR7BJJveDm/iMwLPfHitGpL8WBfrQd/gZuE7xyBfNKq08EvcATyhKubmRYej8dPtLa2vithtpiv69D7/yJXN14k3ZkzkUi0hUIhxprNJV7vq/XKvsiZkxdJd1eOxWItFRUVDI2qKz5r1el10HVXlu6Qv3379sra2tpXdWj7sVVr1cjqkM8LpG856e3tfbGqquopzSl/YmJiZOPGjTt80lfr/TKzbjnhxZ7YVFVZWXnZypUrr43FYoktW7b8buUt5ZF78m6qYjmDbYPinlbebYNUFWyMFQfc0MZYqgu2ftuHbnjrN1UFwQ3sATcd3IDqPGFfsVdvaXebDt/BkgYBaqw9L8sBaqguCMFkHrrlEEyaqiDImHHotoOMUVUQRs8YcGFh9KguCBSZG7rQQJGaqiAUqj50R0KhaqqCYL+LoTsW7FdTFYSz/h+64+GsNVVBwPZzJ1u5ErA9aOnnQirRzm1assUtNJpRcOiGUVLqdXaBM5vgWBkT0EUA18bpwcFJBsCLAq7NSIOjwfJAFwlcUxUcfpcDuhPAqY6mXR5YyuS3CM1cPOCQj8kXxzumP9/gANOM1u5UC8/8UQVH9AocFhp4N89fEhxCbYaWwGv5ywqOWRcI1ExWXOBYpjqT8iEwWI6oCHP0fBpTz7A/DuBEvnN2zBTcyrVu9eFmysY9R+zzmei6zMQFkKXqSVn8y0RJqokLAPzME10n1cSIbkyeimP4H8m+ulU4X92fAAAAAElFTkSuQmCC") no-repeat;
                  background-size: cover;
                }
              }
              .likeNum {
                margin-left: 20px;
                &:after {
                  width: 16px;
                  height: 16px;
                  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAECUlEQVRYR8WXXWgjVRTHz5lJhm6baBIXNA+KD6KIiNAuouAXWEFQfFor4uKu1p07mana2ljqB+z4IFuwIVvSTOaOX7iuX13Bx12EPuiD7IuCuOqD+IEuW12NhQ2m287HkRuSkqZJGjYJvU9D7pk5v3vO/5x7grDLC3fZP3QFQERoGMYDvu/fTkQJRDwny/JJy7L+6PRgXQFomjZDRHc3OPtPUZR0Lpc71wnEZQMwxu4EgJcBgADgNCL+TkSPAEASAL7inB/tK0AqldKCIHgIAL7gnM8LZ6qqDiPiawDgDQ8PjzHG3J0gLjsCmqa9QkR3ENFHjuN8KByl0+mhUqn0sXgOh8PPLS4u/to3AFVVjyDiPkT8wLbtilOxGGOfAMCgLMszlmX92DcAxthbAHC1JElWoVA4JRwtLS3Jy8vLnwFUqusFzvlPfQHQdf0G3/ezjaHWdf0a3/ffFL8rivJELpe72HMAXdcjnucdRcTriehbx3FerTnRNO1hImKIeMG27fGdnIv9piI0TXOw8eVisZjY2Ni4GQAOAEACAC5Fo1Fjfn7+grA1TVNZWVkRUblOVEY4HK4IU6xIJLI2Nze32gxoC8DExMQ+13WfB4BYO3oiuhgOhzP5fP6bml1dWbZ69bwsy8cahbkJINoqY+wEIl7R6gtEVETEr+Px+InGE6mqehAR9+8Avi5Jkmnb9tma3SbA5ORkbG1t7X2xEQqFjriu+08lR4iPA8BdRLTsOM6xdg5E6srlstxoUy6X97qumwIAkcKfOeeT2wBmZ2fjq6urx8WGLMuHLcv6Uzyrqmog4oMAcIpzbnUirGY29ZWTTCYfNU3z0hYR1gMMDAw8s7Cw8FcvAQzDuMXzvDkiCkZGRvbX2vRmCuoBotHoeE3dvYoAY0yIexQRz9q2/VLbFCDiuG3blfLqBYCqqlci4rviigCANzjnX7YFUBTl6Vwu93evAHRdf8z3/QOiikZHR8fHxsb8tgCRSOSpTCZTqYJuI1C9H94RzUuSpOOFQuFkvUibaiAUCh3K5/PFXgAYhnGP53kvAoCrKMqhxvuh7wCaps0T0U0A8DnnPNdYok0BBgcHD2az2X+7jYBhGDd6npepNrRnbdv+rSOAeDz+ZK3VdqMBxlgaAO4FgO8452J+3LaaRqAXAIZhXOV53tuisUqS9HqhUDjTFmBqampPuVxeqhqJLhhUQxcjoj1E9KnjOO9VS+r+DlpyBACiAHA+mUymTNOsfK9lCsSGpmnTRHRfE7vNWV/TNIuIru0AAIhofWhoaCabzf7Syn7LPFD9p3NbEARi4KisIAg2EonE9zVNTE9P7y2VSrdKkrTTRL0ei8V+aDWIbGtEnZyoHzY7naIfPrd8c9cB/geeCAo/+yEosAAAAABJRU5ErkJggg==") no-repeat;
                  background-size: cover;
                }
              }
              .timeUpdate {
                margin-left: 18px;
                height: 17px;
                font-size: 12px;
                font-weight: 400;
                color: rgba(218, 218, 218, 1);
                line-height: 17px;
                padding-left: 10px;
                border-left: 1px solid #d3d3d3;
              }
            }
          }
        }
      }
    }
  }
}

@import "../scssCommon";
.mobileCollect {
  max-width: 100vw;
  width: 100vw;

  .background {
    display: none;
  }

  .main {
    padding: 0;
    margin: 0;
  }

  .collect {
    background-color: rgb(50, 141, 255);
    margin-top: 0;
    width: 100%;
    height: auto;
  }

  .heji-title {
    text-align: left;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .heji-con {
    text-align: left;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .heji-left {
    width: 29%;
  }

  .heji-left > img {
    width: 100%;
    height: auto;
    border-radius: 1%;
  }

  .heji-right {
    width: 64%;
  }

  .article-left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .source {
    justify-content: space-between;
    margin-top: 0.16rem;
  }

  .live-source > img {
    width: 0.36rem;
    height: 0.36rem;
  }

  .live-time {
    border: 0;
    padding: 0;

  }

  .live-people {
    padding: 0
  }

  .article-desc {
    display: none;
  }

  .article-title {
    font-size: 0.3rem;
    line-height: 0.42rem;
  }

  .article-right {
    width: 29%;
  }

  .article-left {
    width: 69%;
    margin-right: 2%;
  }

  .article-list {
    width: 100%;
  }

  .article {
    padding: 0.38rem 0 0.4rem 0;
  }

  .btn-add {
    color: rgba(48, 142, 255, 1);
    width: 100%;
    height: 0.8rem;
    line-height: 0.8rem;
    background: rgba(48, 142, 255, 0.1);
    border-radius: 0.08rem;
    margin: 0 auto;
  }

  .panel {
    width: 100%;
  }

  .collect-title {
    margin-top: 0.8rem;
  }

  hr.gray-153 {
    display: none;
  }

  .source {
    font-size: 0.22rem;
  }

  .collect {
    margin-bottom: 0;
  }
  &.community-u {
    margin: 0;
    .collect {
      width: 100vw;
      height: pxtovw(200);

      .collect-title {
        width: pxtovw(300);
        height: pxtovw(36);
        font-size: pxtovw(25);
        font-weight: 600;
        color: rgba(255, 255, 255, 1);
        line-height: pxtovw(36);
        overflow: hidden;
        text-overflow: ellipsis;
        margin-top: pxtovw(40);
      }
      .collect-des {
        width: pxtovw(300);
        height: pxtovw(32);
        font-size:pxtovw(12);
        font-weight:400;
        color:rgba(255,255,255,1);
        line-height:pxtovw(16);
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }
    }

    .company-info {
      height: pxtovw(41);
      background: rgba(0, 0, 0, 0.15);
      border-radius: 4px;
      padding: 0 pxtovw(10);
      margin: pxtovw(13) auto 0 auto;
      width: pxtovw(237);
      display: flex;
      justify-content: space-between;
      align-items: center;

      &:hover {
        background: rgba(0, 0, 0, 0.2);
        cursor: pointer;
      }

      .left {
        display: flex;
        align-items: center;
        img {
          width: pxtovw(24);
          height: pxtovw(24);
          border-radius: 50%;
        }
        .company-name {
          height: pxtovw(17);
          font-size: pxtovw(12);
          font-weight: 600;
          line-height: pxtovw(17);
          margin-left: pxtovw(8);
          margin-right: pxtovw(3);
        }
        .icon-rz {
          height: pxtovw(17);
          line-height: pxtovw(18);
          font-size: pxtovw(9);
          background-color: rgb(47, 142, 255);
          padding: 0 pxtovw(5);
        }
      }

      .collect-qu {
        width: 191px;
        height: 44px;
        border-radius: 3px;
        margin: 0 auto;
        margin-top: 40px;
        border: 1px solid rgba(255, 255, 255, 1);
        line-height: 44px;
        text-align: center;
        &:hover {
          font-weight: 600;
        }
      }
    }
    .content-box {
      padding: 0;
      .topSelectArea {
        width: 100vw;
        height: pxtovw(45);
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 0px 0px 0px rgba(243, 243, 243, 1);
        display: flex;
        justify-content: center;
        align-items: center;
        .cell {
          height: auto;
          font-size: pxtovw(15);
          line-height: pxtovw(45);
          font-weight: 400;
          color: rgba(34, 34, 34, 1);
          position: relative;
          &:nth-child(n+2) {
            margin-left: pxtovw(84);
          }
          &.ok {
            color: rgba(34, 34, 34, 1);
            font-weight: 600;
            &:after {
              position: absolute;
              content: "";
              bottom: 0;
              left: calc(50%);
              transform: translateX(-50%);
              width: pxtovw(15);
              height: pxtovw(3);
              background: rgba(48, 142, 255, 1);
              border-radius: pxtovw(2);
            }
          }
        }
      }

      .listArea {
        margin: pxtovw(10) auto 0 auto;
        width: pxtovw(355);

        .article-list, .videoList {
          margin-top: pxtovw(10);
        }
        .videoList {
          display: flex;
          flex-wrap: wrap;
          margin-top: 0;
          padding-bottom: pxtovw(20);

          .cell {
            width: pxtovw(355);
            height: auto;
            border-radius: pxtovw(4);
            overflow: hidden;
            box-shadow: 0px 3px 12px 0px rgba(8, 27, 50, 0.05);
            border: 1px solid rgba(0, 0, 0, 0.03);
            margin: pxtovw(10) 0 0 0;

            .videoImg {
              width: pxtovw(355);
              height: pxtovw(194);
              position: relative;
              .img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                border: 0;
                vertical-align: middle;
              }
              .play {
                position: absolute;
                width: pxtovw(46);
                height: pxtovw(46);
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
              }
              .time {
                position: absolute;
                bottom: pxtovw(10);
                right: pxtovw(10);
                width: pxtovw(54);
                height: pxtovw(22);
                background: rgba(0, 0, 0, 0.3);
                border-radius: pxtovw(10);
                border: 1px solid rgba(255, 255, 255, 0.08);
                text-align: center;
                font-size: pxtovw(12);
                font-weight: 500;
                color: rgba(255, 255, 255, 1);
                line-height: pxtovw(22.01);
              }
            }
            .videoDetail {
              width: 100%;
              height: auto;
              background: rgba(255, 255, 255, 1);
              padding: pxtovw(10);
              box-sizing: border-box;
              .videoTitle {
                height: auto;
                font-size: pxtovw(15);
                font-weight: 400;
                color: rgba(51, 51, 51, 1);
                line-height: pxtovw(21);
                display: -webkit-box;
                // overflow: hidden;
                // text-overflow: ellipsis;
                // -webkit-box-orient: vertical;
                // -webkit-line-clamp: 2;
              }

              .videoBottom {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;

                .companyInfo {
                  width: 100%;
                  height: pxtovw(44);
                  display: flex;
                  align-items: center;
                  .img {
                    width: pxtovw(22);
                    height: pxtovw(22);
                    border-radius: 50%;
                  }
                  .name {
                    margin-left: pxtovw(4);
                    height: pxtovw(17);
                    font-size: pxtovw(12);
                    font-weight: 500;
                    color: rgba(34, 34, 34, 1);
                    line-height: pxtovw(17);
                  }
                }
                .videoInfo {
                  width: 100%;
                  display: flex;
                  justify-content: flex-end;
                  .playNum, .likeNum {
                    position: relative;
                    padding-left: pxtovw(20);
                    height: pxtovw(17);
                    font-size: pxtovw(13);
                    font-weight: 500;
                    color: rgba(153, 153, 153, 1);
                    line-height: pxtovw(17);
                    &:after {
                      content: "";
                      position: absolute;
                      left: 0;
                      top: 0;
                      width: pxtovw(16);
                      height: pxtovw(16);
                      background: url("data:image/png;base64,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") no-repeat;
                      background-size: cover;
                    }
                  }
                  .likeNum {
                    margin-left: pxtovw(12);
                    &:after {
                      width: pxtovw(16);
                      height: pxtovw(16);
                      background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAECUlEQVRYR8WXXWgjVRTHz5lJhm6baBIXNA+KD6KIiNAuouAXWEFQfFor4uKu1p07mana2ljqB+z4IFuwIVvSTOaOX7iuX13Bx12EPuiD7IuCuOqD+IEuW12NhQ2m287HkRuSkqZJGjYJvU9D7pk5v3vO/5x7grDLC3fZP3QFQERoGMYDvu/fTkQJRDwny/JJy7L+6PRgXQFomjZDRHc3OPtPUZR0Lpc71wnEZQMwxu4EgJcBgADgNCL+TkSPAEASAL7inB/tK0AqldKCIHgIAL7gnM8LZ6qqDiPiawDgDQ8PjzHG3J0gLjsCmqa9QkR3ENFHjuN8KByl0+mhUqn0sXgOh8PPLS4u/to3AFVVjyDiPkT8wLbtilOxGGOfAMCgLMszlmX92DcAxthbAHC1JElWoVA4JRwtLS3Jy8vLnwFUqusFzvlPfQHQdf0G3/ezjaHWdf0a3/ffFL8rivJELpe72HMAXdcjnucdRcTriehbx3FerTnRNO1hImKIeMG27fGdnIv9piI0TXOw8eVisZjY2Ni4GQAOAEACAC5Fo1Fjfn7+grA1TVNZWVkRUblOVEY4HK4IU6xIJLI2Nze32gxoC8DExMQ+13WfB4BYO3oiuhgOhzP5fP6bml1dWbZ69bwsy8cahbkJINoqY+wEIl7R6gtEVETEr+Px+InGE6mqehAR9+8Avi5Jkmnb9tma3SbA5ORkbG1t7X2xEQqFjriu+08lR4iPA8BdRLTsOM6xdg5E6srlstxoUy6X97qumwIAkcKfOeeT2wBmZ2fjq6urx8WGLMuHLcv6Uzyrqmog4oMAcIpzbnUirGY29ZWTTCYfNU3z0hYR1gMMDAw8s7Cw8FcvAQzDuMXzvDkiCkZGRvbX2vRmCuoBotHoeE3dvYoAY0yIexQRz9q2/VLbFCDiuG3blfLqBYCqqlci4rviigCANzjnX7YFUBTl6Vwu93evAHRdf8z3/QOiikZHR8fHxsb8tgCRSOSpTCZTqYJuI1C9H94RzUuSpOOFQuFkvUibaiAUCh3K5/PFXgAYhnGP53kvAoCrKMqhxvuh7wCaps0T0U0A8DnnPNdYok0BBgcHD2az2X+7jYBhGDd6npepNrRnbdv+rSOAeDz+ZK3VdqMBxlgaAO4FgO8452J+3LaaRqAXAIZhXOV53tuisUqS9HqhUDjTFmBqampPuVxeqhqJLhhUQxcjoj1E9KnjOO9VS+r+DlpyBACiAHA+mUymTNOsfK9lCsSGpmnTRHRfE7vNWV/TNIuIru0AAIhofWhoaCabzf7Syn7LPFD9p3NbEARi4KisIAg2EonE9zVNTE9P7y2VSrdKkrTTRL0ei8V+aDWIbGtEnZyoHzY7naIfPrd8c9cB/geeCAo/+yEosAAAAABJRU5ErkJggg==") no-repeat;
                      background-size: cover;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}