@charset "UTF-8";
#app header {
  font-family: "Microsoft YaHei", Helvetica, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", "Monaco", monospace, Tahoma, STXihei, "华文细黑", STHeiti, "Helvetica Neue", "Droid Sans", "wenquanyi micro hei", FreeSans, Arimo, Arial, SimSun, "宋体", Heiti, "黑体", sans-serif;
  position: relative;
  height: auto;
  max-height: 70vh; }
  #app header .article_bj {
    width: 100%;
    background-size: 100%;
    z-index: -1000; }
  #app header .title {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); }
    #app header .title h1 {
      font-size: 50px;
      font-weight: 800;
      text-align: center;
      margin-bottom: 10px;
      color: white; }
    #app header .title p {
      font-size: 30px;
      text-align: center;
      list-style: none;
      color: white; }
#app main {
  font-size: 20px;
  width: calc(100% - 240px);
  padding: 20px 120px;
  min-height: 600px;
  background-color: #f7f7f7;
  display: flex;
  justify-content: initial;
  position: relative; }
  #app main .article {
    width: calc(100% - 230px);
    position: relative;
    transition: all 0.3s; }
    #app main .article .article_title {
      display: flex;
      flex-direction: column;
      align-items: center;
      background-color: white; }
      #app main .article .article_title h2 {
        margin: 10px 0; }
        #app main .article .article_title h2 a i {
          color: black;
          margin-left: 20px; }
          #app main .article .article_title h2 a i:hover {
            color: #00c4ff; }
      #app main .article .article_title p {
        font-size: 17px;
        color: #333333; }
        #app main .article .article_title p span {
          margin-right: 10px; }
          #app main .article .article_title p span:last-child {
            margin-right: 0; }
      #app main .article .article_title > div {
        margin: 10px 0; }
        #app main .article .article_title > div i {
          font-size: 16px;
          margin-right: 5px;
          color: #ff9800; }
          #app main .article .article_title > div i:first-child {
            color: #333333; }
    #app main .article .article_content {
      margin-top: 1px;
      min-height: 200px;
      background-color: white;
      width: calc(100% - 40px); }
    #app main .article .comment_submit {
      margin-top: 20px;
      min-height: 200px;
      background-color: white;
      padding: 20px 20px 10px 20px; }
      #app main .article .comment_submit .title {
        padding-bottom: 10px;
        margin-bottom: 20px;
        border-bottom: 1px solid #f0eeee;
        color: #555555;
        position: relative; }
        #app main .article .comment_submit .title::after {
          display: block;
          content: '';
          width: 180px;
          height: 1px;
          background-color: #333333;
          position: absolute;
          bottom: 0;
          left: 0; }
      #app main .article .comment_submit .body {
        width: 100%;
        height: 150px;
        background-color: #f5f5f5;
        border-radius: 5px;
        position: relative;
        box-sizing: border-box; }
        #app main .article .comment_submit .body textarea {
          padding: 20px;
          width: calc(100% - 40px);
          height: calc(100% - 40px);
          background-color: transparent;
          border: none;
          resize: none;
          color: black;
          font-size: 0.8em; }
          #app main .article .comment_submit .body textarea:focus {
            border: none;
            outline: none;
            border: 1px solid black;
            border-radius: 5px; }
        #app main .article .comment_submit .body > button {
          width: 100px;
          height: 40px;
          border-radius: 10px;
          background-color: #ff9800;
          color: white;
          border: none;
          cursor: pointer;
          /*鼠标点击效果*/
          position: absolute;
          bottom: 10px;
          right: 10px; }
          #app main .article .comment_submit .body > button:hover {
            opacity: 0.6; }
      #app main .article .comment_submit .foot {
        font-size: 16px;
        color: #555555;
        margin-top: 10px; }
        #app main .article .comment_submit .foot p > span {
          color: #ff9800; }
    #app main .article .comment_list {
      margin-top: 20px; }
      #app main .article .comment_list ul {
        list-style: none; }
      #app main .article .comment_list > ul > li {
        margin-top: 20px;
        width: 100%;
        display: flex; }
        #app main .article .comment_list > ul > li > .left {
          width: 70px; }
          #app main .article .comment_list > ul > li > .left img {
            width: 50px;
            border-radius: 5px; }
            #app main .article .comment_list > ul > li > .left img:hover {
              transform: scale(1.1);
              transition: all 0.3s; }
        #app main .article .comment_list > ul > li > .right {
          width: calc(100% - 70px);
          background-color: white;
          border-radius: 5px;
          padding: 10px 20px;
          position: relative;
          box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1); }
          #app main .article .comment_list > ul > li > .right::after {
            display: block;
            content: '';
            position: absolute;
            left: -21px;
            top: 12px;
            width: 1px;
            height: 1px;
            border: 10px solid transparent;
            border-right-color: white; }
          #app main .article .comment_list > ul > li > .right .comment_content {
            margin: 5px 0;
            padding: 5px 10px 5px 0;
            font-size: 25px; }
            #app main .article .comment_list > ul > li > .right .comment_content img {
              margin-right: 5px;
              margin-top: 5px;
              height: 120px;
              border-radius: 5px;
              box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); }
          #app main .article .comment_list > ul > li > .right .comment_info {
            display: flex;
            justify-content: space-between;
            font-size: 14px; }
            #app main .article .comment_list > ul > li > .right .comment_info > div > span {
              cursor: pointer; }
              #app main .article .comment_list > ul > li > .right .comment_info > div > span:hover {
                color: #f0ad4e; }
          #app main .article .comment_list > ul > li > .right .delete {
            color: red;
            cursor: pointer;
            font-family: Xvyu; }
            #app main .article .comment_list > ul > li > .right .delete:hover {
              color: #00c4ff; }
          #app main .article .comment_list > ul > li > .right .sub_comment_list {
            margin-top: 10px; }
            #app main .article .comment_list > ul > li > .right .sub_comment_list > div {
              display: flex;
              margin-bottom: 10px; }
              #app main .article .comment_list > ul > li > .right .sub_comment_list > div .left {
                width: 50px; }
                #app main .article .comment_list > ul > li > .right .sub_comment_list > div .left img {
                  width: 40px;
                  border-radius: 5px; }
                  #app main .article .comment_list > ul > li > .right .sub_comment_list > div .left img:hover {
                    transform: scale(1.1);
                    transition: all 0.3s; }
              #app main .article .comment_list > ul > li > .right .sub_comment_list > div .right {
                width: calc(100% - 50px); }
                #app main .article .comment_list > ul > li > .right .sub_comment_list > div .right .sub_comment_content {
                  margin: 5px 0;
                  padding: 5px 0;
                  font-size: 25px; }
                #app main .article .comment_list > ul > li > .right .sub_comment_list > div .right > h4 > span {
                  color: #ff9800; }
                #app main .article .comment_list > ul > li > .right .sub_comment_list > div .right .sub_comment_info {
                  display: flex;
                  justify-content: space-between;
                  font-size: 14px; }
                  #app main .article .comment_list > ul > li > .right .sub_comment_list > div .right .sub_comment_info > div > span {
                    cursor: pointer; }
                    #app main .article .comment_list > ul > li > .right .sub_comment_list > div .right .sub_comment_info > div > span:hover {
                      color: #f0ad4e; }
            #app main .article .comment_list > ul > li > .right .sub_comment_list .son_comment_textarea {
              display: none;
              position: relative; }
              #app main .article .comment_list > ul > li > .right .sub_comment_list .son_comment_textarea > textarea {
                padding: 10px;
                resize: none;
                width: calc(100% - 20px);
                height: calc(70px - 20px);
                border: 1px solid #f0eeee;
                border-radius: 5px;
                background-color: #f5f5f5; }
                #app main .article .comment_list > ul > li > .right .sub_comment_list .son_comment_textarea > textarea:focus {
                  border: none;
                  outline: none;
                  border: 1px solid black;
                  border-radius: 5px; }
              #app main .article .comment_list > ul > li > .right .sub_comment_list .son_comment_textarea button {
                width: 70px;
                height: 25px;
                border-radius: 10px;
                background-color: #0059ff;
                color: white;
                border: none;
                cursor: pointer;
                /*鼠标点击效果*/
                position: absolute;
                bottom: 10px;
                right: 10px; }
                #app main .article .comment_list > ul > li > .right .sub_comment_list .son_comment_textarea button:hover {
                  opacity: 0.6; }
            #app main .article .comment_list > ul > li > .right .sub_comment_list .sub_comment_textarea {
              display: none;
              position: relative;
              margin-bottom: 10px;
              width: 100%; }
              #app main .article .comment_list > ul > li > .right .sub_comment_list .sub_comment_textarea > textarea {
                resize: none;
                width: calc(100% - 20px);
                padding: 10px;
                border: 1px solid #f0eeee;
                border-radius: 5px;
                background-color: #f5f5f5; }
                #app main .article .comment_list > ul > li > .right .sub_comment_list .sub_comment_textarea > textarea:focus {
                  border: none;
                  outline: none;
                  border: 1px solid black;
                  border-radius: 5px; }
              #app main .article .comment_list > ul > li > .right .sub_comment_list .sub_comment_textarea button {
                width: 100px;
                height: 40px;
                border-radius: 10px;
                background-color: #0059ff;
                color: white;
                border: none;
                cursor: pointer;
                /*鼠标点击效果*/
                position: absolute;
                bottom: 10px;
                right: 10px; }
                #app main .article .comment_list > ul > li > .right .sub_comment_list .sub_comment_textarea button:hover {
                  opacity: 0.6; }
  #app main .article_actions {
    position: fixed;
    bottom: 220px;
    left: 2%; }
    #app main .article_actions .item {
      cursor: pointer;
      position: relative;
      display: flex;
      height: 60px;
      width: 60px;
      border-radius: 50%;
      background-color: white;
      margin-bottom: 20px;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
      justify-content: center;
      align-items: center;
      flex-direction: column; }
      #app main .article_actions .item img {
        position: absolute;
        top: 7px;
        width: 30px; }
      #app main .article_actions .item span {
        position: absolute;
        bottom: 0; }
  #app main .slider_bar {
    position: absolute;
    right: 122px;
    width: 210px;
    transition: all 0.3s;
    border-radius: 5px;
    text-overflow: ellipsis; }
    #app main .slider_bar .title {
      font-size: 18px;
      font-weight: 600;
      padding: 10px;
      background-color: white;
      border-radius: 5px;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
      display: flex;
      justify-content: center;
      align-items: center; }
      #app main .slider_bar .title span {
        margin-right: 10px; }
    #app main .slider_bar .body {
      opacity: 0;
      visibility: hidden;
      background-color: white;
      transition: all 1s;
      font-size: 18px;
      padding: 10px 20px 20px 20px; }
      #app main .slider_bar .body p {
        width: 100%;
        transition: all 0.3s;
        cursor: pointer;
        height: 30px;
        line-height: 30px;
        white-space: nowrap;
        /* nowrap 禁止文字换行 initial 换行显示*/
        overflow: hidden;
        /*超出部分不显示*/
        text-overflow: ellipsis;
        /* 文本溢出时显示省略号 */
        border-radius: 5px;
        color: #333333; }
        #app main .slider_bar .body p:hover {
          background-color: rgba(0, 0, 0, 0.1); }
      #app main .slider_bar .body p[tagname="H2"] {
        padding-left: 10px; }
      #app main .slider_bar .body p[tagname="H3"] {
        padding-left: 15px; }
      #app main .slider_bar .body p[tagname="H4"] {
        padding-left: 20px; }
  #app main .slider_bar.show {
    width: 250px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); }
    #app main .slider_bar.show ~ .article {
      width: calc(100% - 270px); }
    #app main .slider_bar.show .title {
      box-shadow: none;
      border-radius: 5px 5px 0 0;
      border-bottom: 1px solid #f0eeee; }
    #app main .slider_bar.show .body {
      border-radius: 0 0 5px 5px;
      opacity: 1;
      visibility: visible;
      transition: all 0.3s; }
  #app main .slider_bar.fixed {
    border-radius: 0 0 0 5px;
    position: fixed;
    top: 80px;
    left: calc(100% - 332px); }
  #app main .slider_bar.fixed.show {
    left: calc(100% - 372px); }

.el-message-box {
  width: 340px; }
  .el-message-box .el-message-box__title {
    font-size: 30px; }
  .el-message-box .el-message-box__message {
    font-size: 20px; }
  .el-message-box .el-message-box__btns .el-button {
    font-size: 14px; }
  .el-message-box .el-message-box__btns button:last-child {
    background-color: #d9534f;
    border-color: #d9534f; }

#photo_actions {
  display: none; }

@media (max-width: 850px) {
  #app .nav {
    background: rgba(0, 0, 0, 0); }
  #app header .title h1 {
    font-size: 30px; }
  #app header .title p {
    font-size: 20px; } }

/*# sourceMappingURL=article.css.map */