@media screen and (min-width:@mobile-device){
    .main {
      padding:@padding-general;
        .el-card {
          border: @border-line solid @textColor;
          background-color: @bgColor;
          color: @textColor;
        }
        .view-content {
          .flex(column,flex-start,flex-start);
          margin-top: @margin-general;
          transition: all 0.6s ease;
          .article {
            display: flex;
            width: 100%;
            transition: all 0.6s ease;
            background-color: @bgColor;
            border-radius: @border-radius;
            .box-card {
              width: 100%;
              transition: all 0.6s ease;
              .card-header {
                .flexbox(row,space-between);
                .more{
                  width: 8rem;
                  cursor: pointer;
                  img{
                    width: 100%;
                    height: auto;
                  }
                }
                .few{
                  .font-normal();
                  font-size: @big-text;
                }
              }
            }
          }
          .rightbox {
            display: flex;
            flex-direction: column;
            li{
              margin: 0.5rem 0;
            }
          }
        }
      }
}

@media screen and (min-width:@smallpc-device){
    .main {
      .ghost{
        display: none;
      }
        .view-content {
          .article {
            height: 100%;
          }
        }
      }
}

@media screen and (min-width:@normal-device)  {
    .main {
      padding: 0;
        .view-content {
          flex-direction: row;
          .article {
            width: 100%;
            transition: all 0.6s ease;
            flex:1;
            :deep(.el-card){
              height: 100%;
              display: flex;
              flex-direction: column;
              .el-card__body{
                display: flex;
                height: 100%;
                flex-direction: column;
                justify-content: space-around;
              }
            }
            .box-card {
              flex: 1;
            }
          }
          .rightbox {
            width: 25%;
            li{
              margin: @margin-general 0;
              margin-left: @margin-general;
              &:first-child{
                margin-top: 0;
              }
            }
          }
        }
      }
}