@c1: #3b52f6;
.item-wrap(@num,@between,@mb) {
  display: flex;
  flex-wrap: wrap;
  .item {
    width: calc((100% - (@num - 1) * @between) / @num);
    margin-right: @between;
    margin-bottom: @mb;
    &:nth-of-type(@{num}n) {
      margin-right: 0;
    }
  }
}
.dot {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dots(@num) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: @num; //行数
  -webkit-box-orient: vertical;
}
.setBetween {
  display: flex;
  justify-content: space-between;
}
.setRowCenter {
  display: flex;
  align-items: center;
}
.setColumnCenter {
  display: flex;
  align-items: center;
}
.setCenter {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.ra {
  border-radius: 0.2rem;
  overflow: hidden;
}
.bs {
  box-shadow: 0 0 0.5rem #ebebeb;
}
.box-shadow {
  box-shadow: 0rem 0.3rem 0.5rem 0rem rgba(36, 65, 116, 0.1);
}
.tit-line(@fs,@pb,@mb,@width,@height,@color) {
  font-size: @fs;
  padding-bottom: @pb;
  margin-bottom: @mb;
  position: relative;
  &::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: @width;
    border-bottom: @height solid @color;
  }
}
.tit-line-center(@fs,@pb,@mb,@width,@height,@color) {
  font-size: @fs;
  padding-bottom: @pb;
  margin-bottom: @mb;
  position: relative;
  &::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: @width;
    border-bottom: @height solid @color;
    transform: translateX(-50%);
  }
}
.btn {
  padding: 0.3rem 1rem;
  background-color: @c1;
  color: #fff;
  border-radius: 2rem;
  font-size: 0.7rem;
  &.s1 {
    background-color: transparent;
    border: 1px solid @c1;
    color: @c1;
  }
}
.a-hover {
  &:hover {
    color: @c1;
  }
}

.sec-container {
  .setBetween;
  align-items: flex-start;

  .sec-left {
    flex: 1;
    & > div {
      padding: 1rem;
      box-shadow: 0 0 0.3rem #ebebeb;
      border-radius: 0.3rem;
    }
  }
  .sec-right {
    width: 17.5rem;
    margin-left: 1rem;
    & > aside {
      padding: 1rem;
      box-shadow: 0 0 0.3rem #ebebeb;
      border-radius: 0.3rem;
      margin-bottom: 1rem;
    }
    .side-search {
      .form {
        .setColumnCenter;
        border: 1px solid @c1;
        border-radius: 0.2rem;
        padding: 0 2%;
        i {
          margin-right: 0.2rem;
          font-size: 1rem;
          color: #999;
        }
        input {
          height: 2rem;
          flex: 1;
        }
      }
    }
    .side-blog {
      .keywords {
        display: flex;
        flex-wrap: wrap;
        padding-bottom: 0;
        a {
          white-space: nowrap;
          margin-right: 1rem;
          margin-bottom: 1rem;
          .a-hover;
        }
      }
      .list {
        .link {
          display: block;
          padding: 1rem 0;
          border-top: 1px solid #ebebeb;
          & > div {
            .setColumnCenter;
            justify-content: space-between;
            margin-bottom: 0.5rem;
            h6 {
              .dot;
              width: 80%;
              font-size: 0.8rem;
            }
            span {
              color: #999;
              font-size: 0.7rem;
            }
          }
          p {
            font-size: 0.7rem;
            line-height: 1.8;
            color: #666;
          }
          &:hover {
            h6 {
              color: @c1;
            }
          }
        }
      }
    }
  }
}
.blog {
  .main-1 {
    .newest-nav {
      display: flex;
      border-bottom: 1px solid #ebebeb;
      a {
        position: relative;
        margin-right: 2rem;
        &::after {
          content: "";
          position: absolute;
          bottom: -1rem;
          left: 0;
          width: 100%;
          border-bottom: 2px solid transparent;
        }
        &.active,
        &:hover {
          &::after {
            border-color: @c1;
          }
        }
      }
    }
    .newest {
      margin-bottom: 1rem;
    }
    .sec-left {
      .link {
        display: block;
        padding: 1rem 0;
        border-bottom: 1px solid #ebebeb;
        &:last-of-type {
          border-bottom: none;
        }
        &:hover {
          h6 {
            color: @c1;
          }
        }
        h6 {
          font-size: 1rem;
          .setColumnCenter;
          em {
            display: inline-block;
            padding: 0.4rem;
            background-color: @c1;
            color: #fff;
            font-size: 0.7rem;
            font-weight: normal;
            margin-right: 0.3rem;
            text-transform: uppercase;
          }
        }
        p {
          line-height: 1.8;
          margin: 0.5rem 0;
          .dots(2);
        }
        .field {
          .setColumnCenter;

          span {
            &,
            * {
              font-size: 0.7rem;
              color: #999;
            }
            &:nth-of-type(2) {
              margin-left: auto;
            }
            &:nth-of-type(3) {
              margin-left: 2rem;
            }
            .icon {
              font-size: 0.9rem;
              margin-right: 0.2rem;
            }
            &:hover {
              &,
              * {
                color: @c1;
              }
            }
          }
        }
      }
    }
  }
}
.blog-details {
  .main-1 {
    .sec-left {
      .article {
        margin-bottom: 1rem;
        .article-tit {
          margin-bottom: 1rem;
          h1 {
            font-size: 1.4rem;
            margin-bottom: 1rem;
          }
          .field {
            .setColumnCenter;
            span {
              margin-right: .5rem;
              cursor: pointer;
              &,
              * {
                font-size: 0.7rem;
                color: #999;
              }
              .icon {
                font-size: 0.9rem;
                margin-right: 0.2rem;
              }
              &:hover {
                &,
                * {
                  color: @c1;
                }
              }
            }

          }
        }
        .article-info {
          padding: 1rem 0;
          border-top: 1px solid #ebebeb;
          * {
            line-height: 1.8;
          }
        }
      }
      .comment {
        .form {
          textarea {
            width: 100%;
            height: 5rem;
            resize: none;
            border: 1px solid #ebebeb;
            padding: 0.5rem;
            outline: none;
          }
          .code-img {
            display: flex;
            margin-top: 1rem;
            input {
              border: 1px solid #ebebeb;
              height: 2.5rem;
              padding: 0.5rem;
              box-sizing: border-box;
              margin-right: 2rem;
            }
            img {
              width: 6rem;
              height: 2.5rem;
            }
          }
          input[type="submit"] {
            display: block;
            padding: 0.3rem 1rem;
            border-radius: 2rem;
            font-size: 0.7rem;
            color: #fff;
            background-color: @c1;
            margin: 1rem auto 0;
            cursor: pointer;
          }
        }
        .comment-list {
          background-color: transparent;
          margin-top: 1rem;
          padding: 0;
          padding-top: 1rem;
          border-top: 1px solid #ebebeb;
          & > h5 {
            font-size: 1.2rem;
            font-weight: 500;
            margin-bottom: 1rem;
          }
          .item {
            background-color: #fff;
            display: flex;
            padding: 1rem 0;
            border-bottom: 1px solid #ebebeb;
            &:last-of-type {
              border-bottom: none;
            }
          }
          .i {
            width: 4rem;
            height: 4rem;
            border-radius: 50%;
            margin-right: 0.5rem;
            background-color: #ccc;
            overflow: hidden;
            flex-shrink: 0;
            margin-right: 1rem;
            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }
          h6 {
            font-size: 1rem;
            font-weight: 500;
          }
          .des {
            line-height: 1.8;
            padding: 0.5rem 0;
            &,
            * {
              font-size: 0.7rem;
              color: #666;
            }
          }
          .time {
            display: flex;
            align-items: center;
            span {
              &,
              * {
                color: #999;
                font-size: 0.7rem;
              }
            }
            span:nth-of-type(2) {
              margin-left: auto;
              margin-right: 1rem;
            }
          }
        }
      }
    }
    .share {
      display: flex;
      align-items: center;
      margin-left: auto;
      margin-right: 0;
      span {
        margin-right: 0.5rem;
        .iconf{
          color: #999;
        }
      }

    }
  }
}
@media screen and (max-width:1024px){
  .social-share .social-share-icon{
    width: 1.5rem !important;
    height: 1.5rem !important;
    font-size: .9rem !important;
    line-height: 1.5rem !important;
  }
}
@media screen and (max-width: 768px) {
  .blog{
    .main-1{
      .sec-left{
        .link{
          h6{
            font-size: .9rem;
          }
          p{
            margin: 0;
          }
        }
      }
    }
  }
  .sec-container {
    flex-direction: column;
    .sec-left,
    .sec-right {
      width: 100%;
      flex: none;
      margin-left: 0;
    }
    .sec-right {
      & > aside {
        margin-top: 1rem;
      }
    }
  }
  .blog-details {
    .main-1 {
      .sec-left {
        .article {
          .article-tit {
            .field {
              flex-wrap: wrap;
              .share {
                width: 100%;
                margin-top: 1rem;
              }
            }
          }
        }
      }
    }
  }
  .social-share .social-share-icon {
    font-size: 13px !important;
    width: 26px !important;
    height: 26px !important;
    line-height: 26px !important;
  }
}