/*公共样式*/
.write.wrapper {
  display: flex;
}

.wirte-widget-title {
  position: relative;
  padding-left: 1.2em;
  font-size: 15px;
  margin-bottom: 10px;
}

.wirte-widget-title::after {
  content: "";
  width: 3px;
  height: 15px;
  background: #315dcf;
  position: absolute;
  left: 0;
  border-radius: 5px;
  transform: rotate(15deg);
}

.wirte-widget-title::before {
  content: "";
  width: 3px;
  height: 12px;
  background: #2196f3;
  position: absolute;
  left: 7px;
  top: 2px;
  border-radius: 5px;
  transform: rotate(15deg);
}

/* .wirte-widget-title {
  position: relative;
  padding-left: 1.5em;
  font-size: 15px;
  margin-bottom: 10px;
}

.wirte-widget-title::after {
  content: "\eea2";
  width: 3px;
  height: 15px;
  color: #5cb85b;
  position: absolute;
  left: 10px;
  top: 3px;
  font-family: "remixicon";
  font-style: normal;
  transform: rotateY(180deg);
  -webkit-font-smoothing: antialiased;
}

.wirte-widget-title::before {
  content: "\eea2";
  color: #60e464;
  position: absolute;
  left: 7px;
  top: 0px;
  font-size: 17px;
  font-family: "remixicon";
  font-style: normal;
  -webkit-font-smoothing: antialiased;
} */

.wirte-widget-state * {
  margin-bottom: 10px;
  font-size: 0.5em;
  color: #959595;
}

/*普通文章发布页开始*/
.write-page-right {
  max-width: 300px;
  min-width: 300px;
  width: 100%;
  position: relative;
  margin-left: 24px;
}

.write.wrapper.post-write>form {
  display: flex;
  flex-wrap: wrap;
}

.write-page-center>.write-content>div {
  background-color: white;
  padding: 1rem 1rem;
  margin-bottom: 1rem;
  border-radius: var(--radius);
}

.write-page-center {
  width: calc(var(--wrapper-width) - 548px);
}

.write-page-right>div {
  padding: 10px;
  background-color: white;
  border-radius: var(--radius);
  height: fit-content;
  margin-bottom: 20px;
}

.wirte-editor.publish-draft-button,
.wirte-editor.editor-change-button {
  display: flex;
  flex-direction: column;
}

.wirte-editor.publish-draft-button span,
.wirte-editor.editor-change-button span {
  font-size: 12px;
  padding: 5px 15px;
  border-radius: calc(var(--radius) / 2);
  display: flex;
  align-items: center;
}

.wirte-editor.publish-draft-button .button-box,
.wirte-editor.editor-change-button .button-box {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
}

.wirte-editor.editor-change-button span:nth-child(1) {
  background-color: var(--pink-300);
  color: white;
  margin-right: 10px;
}

.wirte-editor.editor-change-button span:nth-child(2) {
  background-color: var(--pink-300);
  color: white;
  margin-left: 10px;
}

.wirte-editor.editor-change-button span.active {
  background-color: var(--theme-color);
}

.wirte-editor.editor-change-button span:hover {
  background-color: var(--theme-color);
  transition: background-color 0.3s ease, color 0.3s ease;
}

.wirte-editor.publish-draft-button span:nth-child(1) {
  background: linear-gradient(135deg, #60e464 10%, #5cb85b 100%);
  color: white;
  margin-right: 10px;
}

.wirte-editor.publish-draft-button span:nth-child(2) {
  background: #315dcf;
  color: white;
  margin-left: 10px;
}

.wirte-editor.editor-change-button i,
.wirte-editor.publish-draft-button i {
  font-size: 16px;
  margin-right: 5px;
  color: white;
}

.write-content-wrapper.guide-wrapper {
  margin-bottom: 10px;
  font-size: 14px;
}

.intro-textarea-box textarea {
  width: 100%;
  max-width: calc(100% - 10px);
  resize: none;
  max-height: 400px;
  border: solid 1px #268df7;
  border-radius: var(--radius);
  padding: 5px;
  font-size: 12px;
  outline: none;
}

.intro-textarea-box input:focus {
  border-color: #315dcf;
  border-radius: var(--radius);
  resize: none;
}

.write-title-box input {
  width: 100%;
  resize: none;
  border: solid 1px #268df7;
  border-radius: var(--radius);
  padding: 15px;
  padding-left: 10px;
  font-size: 15px;
  outline: none;
  height: 30px;
}

.write-picture-input label {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border-color: rgba(0, 0, 0, 0.3);
  background: rgba(0, 0, 0, 0.05);
  border-radius: var(--radius);
  border: 3px dashed rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.write-picture-input input {
  display: none;
}

.write-thumbnail-box label input {
  display: none;
}

.write-thumbnail-box label {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background-color: rgba(0, 0, 0, 0.03);
  border: 2px dashed rgba(50, 50, 50, 0.06);
  border-radius: 3px;
}

.write-thumbnail-box label span {
  background-color: rgba(136, 136, 136, 0.1);
  border-radius: 100%;
  min-width: 1.8em;
  min-height: 1.8em;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2em;
  margin: 10px;
}

.write-thumbnail-box label span i {
  color: #888;
}

.pay-module-box>div:not(:last-child, .wirte-widget-state) {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  margin-bottom: 10px;
}

.price-set-box>div {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
  border-bottom: solid 1px #f0f0f0;
  transition: all 1s;
}

.price-set-box>div:hover {
  border-bottom: solid 1px #2196f3;
  transition: all 1s;
}

.price-set-box .price-text {
  font-size: 14px;
  color: #959595;
}

.price-set-box .price-text i {
  font-size: 18px;
  color: #959595;
  margin-right: 5px;
}

.pay-module-box .set-title {
  font-size: 14px;
  color: #959595;
}

.price-set-box>div:not(:nth-child(1)) {
  margin-top: 10px;
}

.price-set-box label input {
  resize: none;
  text-align: right;
  border-radius: var(--radius);
  max-width: 80px;
}

.pay-set-choose .pay-choose-button .select-this {
  padding: 5px 10px;
  background: rgba(56, 88, 246, var(--opacity, 0.1));
  color: #315dcf;
  font-size: 12px;
  margin: -2px;
}

.pay-set-choose .pay-choose-button span:not(.select-this) {
  padding: 5px 10px;
  background: #f0f0f0;
  color: #969696;
  font-size: 12px;
  margin: -2px;
}

.user-choose-set input {
  resize: none;
  border: solid 1px #268df7;
  border-radius: var(--radius);
  padding: 4px;
  padding-left: 5px;
  font-size: 12px;
  outline: none;
  max-width: 90px;
}

.wirte-tag-module {
  margin-bottom: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
}

.wirte-tag-module .wirte-tag-box {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  margin-right: 5px;
  margin-top: 5px;
  border: solid 1px #268df7;
  border-radius: var(--radius);
  padding: 3px;
}

.wirte-tag-module .wirte-tag-box input {
  width: 5ch;
  /* 初始宽度为 10 个字符 */
  font-size: 12px;
}

.chooses-set-box select {
  border-radius: 3px;
  color: #959595;
  border: solid 1px #268df7;
  outline: none;
  resize: none;
}

.chooses-set-box select option:last-child {
  margin-bottom: 5px;
}

.wirte-tag-choose .add-tag-button {
  position: absolute;
  right: 5px;
  bottom: 1px;
  font-size: 25px;
  z-index: 10;
}

.wirte-tag-choose .add-tag-button i {
  color: #4caf50;
}

.wirte-tag-choose {
  position: relative;
}

.wirte-tag-box .delete-tag-button {
  padding: 2px;
  background: #f44336;
  border-radius: 3px;
  font-size: 12px;
}

.wirte-tag-box .delete-tag-button i {
  color: white;
}

.write-picture-show-box {
  display: flex;
}

.write-picture-show-box .write-img-flex {
  position: relative;
  flex: 0 0 5rem;
  display: flex;
}

.write-picture-show-box .write-img-flex img {
  width: 5rem;
  height: 5rem;
  border-radius: var(--radius);
}

.write-content-flex.describe-text.controls-button {
  padding-left: 1rem;
  flex-grow: 1;
}

.controls-button .describe-text textarea {
  width: 100%;
  resize: none;
  max-width: calc(100% - 15px);
  border: solid 1px #268df7;
  border-radius: var(--radius);
  padding: 5px;
  font-size: 12px;
  outline: none;
}

.describe-text .describe-text {
  margin-bottom: 5px;
}

.controls-button .controls-button {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.controls-button .controls-button span {
  font-size: 25px;
}

.add-buton.up-button.down-button span i {
  color: #d5cfcfd1;
  transition: all 1s;
}

.add-buton.up-button.down-button span i:hover {
  color: #4caf50;
  transition: all 1s;
}

.controls-button .controls-button>span i {
  padding: 5px;
  background: #f44336;
  border-radius: 3px;
  color: white;
  font-size: 14px;
}



.download-set-module .add-file-button {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 12px;
  margin-bottom: 10px;
}

.download-set-module .add-file-button span i {
  color: white;
}

.download-set-module .add-file-button span {
  cursor: pointer;
  padding: 3px 6px;
  border-radius: var(--radius);
  background: #4caf50;
  color: white;
}

.download-set-module .file-flex-box {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
  padding: 5px;
  border-radius: var(--radius);
  background: #f0f0f0;
  font-size: 14px;
}

.download-set-module .file-flex-box a {
  color: #969696;
  transition: all 1s;
}

.download-set-module .file-flex-box a:hover {
  color: #315dcf;
  transition: all 1s;
}

.download-set-module .file-flex-box i {
  padding: 4px;
  background: #f44336;
  border-radius: 3px;
  font-size: 12px;
  color: white;
}

.download-box-flex {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pop-box-flex {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  backdrop-filter: saturate(97%) blur(41px);
  background-color: rgb(0 0 0 / 0.5);
}

.download-edit-content {
  min-width: 400px;
  width: 100%;
  max-width: 600px;
  margin: 0px 15px;
  position: relative;
  padding: 10px;
  background-color: white;
  border-radius: var(--radius);
}

.download-wrapper .download-edit-content .close-button {
  position: absolute;
  top: 5px;
  right: 5px;
  font-size: 20px;
}

.download-edit-content .download-head-box i {
  margin-right: 5px;
  padding: 5px;
  border-radius: var(--radius);
  background: #4caf50;
  color: white;
}

.download-edit-content>div {
  margin-top: 10px;
}

.download-edit-content .download-set-module {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.download-edit-content .download-set-module input {
  max-width: 130px;
  border: solid 1px #268df7;
  font-size: 12px;
  padding: 5px;
  border-radius: var(--radius);
}

.download-edit-content .download-all-set {
  border-color: rgba(0, 0, 0, 0.3);
  position: relative;
  border-radius: var(--radius);
  border: 3px dashed rgba(0, 0, 0, 0.1);
  padding: 5px;
}

.download-edit-content .download-all-set>span {
  position: absolute;
  right: 10px;
  top: 2px;
  font-size: 14px;
}

.download-all-set .download-thumbnail-box {
  max-width: 70px;
  max-height: 70px;
  height: 100vh;
}

.download-all-set .download-thumbnail-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
}

.download-all-set .field-set-button {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  padding-bottom: 5px;
}

.download-all-set .field-set-button span {
  margin: 0px 5px;
  padding: 3px 5px;
  font-size: 13px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
}

.download-all-set .field-set-button span i {
  color: white;
  margin-right: 3px;
  font-size: 16px;
}

.download-all-set .field-set-button span:first-child {
  background: #4caf50;
  color: white;
}

.download-all-set .field-set-button span:last-child {
  background: #f44336;
  color: white;
}

.download-all-set .download-infor-button {
  display: flex;
  justify-content: space-between;
}

.download-all-set .download-infor-show {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.download-all-set .infor-name-cloud {
  padding-left: 5px;
  /* max-width: 50px; */
  overflow: hidden;
  max-height: 70px;
}

.download-all-set .infor-name-cloud p:first-child {
  font-size: 20px;
  color: #959595;
}

.download-all-set .infor-name-cloud p:last-child {
  color: #959595;
  margin-top: 5px;
}

.download-set-content .download-all-module {
  display: flex;
  margin-top: 15px;
  flex-direction: column;
}

.download-all-module .download-set {
  margin-top: 5px;
}

.download-set.picture-module {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.download-set.picture-module>span {
  position: absolute;
  top: 0px;
  right: 0px;
  background: #4caf50;
  color: white;
  font-size: 12px;
  padding: 3px 5px;
  border-radius: 3px;
}

.download-set.picture-module>span i {
  color: white;
  font-size: 14px;
  margin-right: 3px;
}

.picture-module .picture-infor-set {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 5px;
}

.picture-module .picture-infor-set .button-span-set>span i {
  color: white;
  font-size: 14px;
  margin-right: 3px;
}

.picture-module .picture-infor-set .button-span-set>span:first-child {
  background: #4caf50;
}

.picture-module .picture-infor-set .button-span-set>span:last-child {
  background: #f44336;
}

.picture-module .picture-infor-set .button-span-set>span {
  color: white;
  font-size: 12px;
  padding: 3px 5px;
  border-radius: 3px;
}

.add-dele-button.picture-link-set {
  margin-left: 10px;
  width: 100%;
}

.picture-module .show-picture-set {
  max-width: 70px;
  max-height: 70px;
}

.picture-module .picture-input-set {
  margin-top: 10px;
}

.picture-module .picture-input-set input {
  padding: 3px;
  padding-left: 5px;
  border: solid 1px #268df7;
  width: 100%;
  font-size: 14px;
  border-radius: var(--radius);
}

.download-set .download-set-explain {
  font-size: 12px;
  color: #7b747482;
  max-height: 32px;
  overflow: hidden;
  margin-top: 5px;
}

.cloud-picture .cloud-infor-set {
  max-height: 70px;
  margin-top: 5px;
  display: flex;
  gap: 10px;
}

.cloud-picture .cloud-infor-set img {
  max-width: 70px;
  max-height: 70px;

  object-fit: cover;
  border-radius: var(--radius);
  height: 100vh;
}

.cloud-infor-set .select-this img {
  border: solid 2px #268df7;
}

.cloud-infor-set .cloud-choose {
  position: relative;
}

.cloud-infor-set .cloud-choose:not(.select-this)::after {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  width: 70px;
  height: 70px;
  background-color: #00000045;
  border-radius: var(--radius);
}

.cloud-infor-set .cloud-choose.select-this i {
  position: absolute;
  bottom: -8px;
  right: -5px;
  font-size: 20px;
  color: #268df7;
}

.links-module .links-input-set {
  margin-top: 5px;
}

.links-module .links-input-set input {
  padding: 3px;
  padding-left: 5px;
  border: solid 1px #268df7;
  width: 100%;
  font-size: 14px;
  border-radius: var(--radius);
}

.infor-module>.other-set {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 5px;
}

.file-infor-set>.file-infor-set {
  width: calc(50% - 10px);
  display: flex;
  flex-direction: column;

  border-radius: var(--radius);
}

.file-infor-set>.file-infor-set>.all-infor-set-flex {
  background: #f0f0f0;
  position: relative;
  padding: 10px;
}

.infor-module>.remark-text>.remark-infor-set-flex p,
.infor-module>.stats-textarea>.stats-infor-set-flex p,
.file-infor-set>.file-infor-set .all-infor-set-flex p {
  color: #969696;
  font-size: 12px;
}

.infor-module>.remark-text>.remark-infor-set-flex div,
.infor-module>.stats-textarea>.stats-infor-set-flex div,
.file-infor-set>.file-infor-set .all-infor-set-flex div {
  color: #969696;
  font-size: 14px;
  margin-top: 5px;
}

.infor-module>.remark-text>.remark-infor-set-flex div>textarea,
.infor-module>.stats-textarea>.stats-infor-set-flex div>textarea,
.file-infor-set>.file-infor-set .all-infor-set-flex div>input {
  border: none;
  outline: none;
  background: #f0f0f0;
  font-size: 14px;
  width: 100%;
  resize: none;
}

.infor-module>.remark-text>.remark-infor-set-flex,
.infor-module>.stats-textarea>.stats-infor-set-flex {
  background: #f0f0f0;
  position: relative;
  padding: 10px;
  margin-top: 5px;
}

.file-infor-set.cloud-choose i {
  position: absolute;
  top: 8px;
  right: 5px;
  font-size: 18px;
}

.download-set.set-button {
  display: flex;
  justify-content: flex-end;
}

.download-all-set .set-button span {
  margin: 0px 5px;
  padding: 3px 5px;
  font-size: 13px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
}

.download-all-set .set-button span:first-child {
  background: #f44336;
  color: white;
}

.download-all-set .set-button span:last-child {
  background: #4caf50;
  color: white;
}

.download-all-set .set-button span i {
  color: white;
  margin-right: 3px;
  font-size: 16px;
}

.source-set-module .wirte-source-box {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  margin-bottom: 10px;
}

.source-set-module .wirte-source-box .set-title {
  font-size: 14px;
  color: #959595;
}

.source-set-module .wirte-source-text-box {
  display: flex;
  align-items: center;
  margin-top: 5px;
}

.source-set-module .wirte-source-text-box .source-set-input-box {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  margin-right: 5px;
  margin-top: 5px;
  border: solid 1px #268df7;
  border-radius: var(--radius);
  padding: 3px;
  width: 100%;
}

.source-set-module .source-set-input-box input {
  font-size: 12px;
  margin-left: 5px;
  display: block;
  width: 100%;
}

.source-set-module .source-set-input-box:first-child {
  width: 40%;
}

.source-set-module .source-set-input-box:last-child {
  width: 100%;
}

.write-category-box .wirte-cat-box {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 14px;
}

.write-category-box .wirte-cat-box div>span {
  padding: 1px 6px;
  background: rgba(56, 88, 246, var(--opacity, 0.1));
  color: #315dcf;
  border-radius: 3px;
}

.write-category-box .add-cat-button {
  display: flex;
  font-size: 13px;
  justify-content: flex-end;
}

.write-category-box .add-cat-button span {
  padding: 3px 6px;
  border-radius: var(--radius);
  background: #4caf50;
  color: white;
}

.write-category-box .add-cat-button span i {
  color: white;
}

.wirte-cat-box .delete-cat-button i {
  padding: 4px;
  background: #f44336;
  border-radius: 3px;
  font-size: 12px;
  color: white;
}

/*普通文章发布页结束*/

/** 弹窗遮罩层 */
/* 遮罩层透明度 */
.mask-enter-active,
.mask-leave-active {
  transition: opacity .25s ease;
}

.mask-enter-from,
.mask-leave-to {
  opacity: 0;
}


/* 弹窗本体缩放 + 透明度 */
.popup-enter-active,
.popup-leave-active {
  transition: all .2s ease;
}

.popup-enter-from,
.popup-leave-to {
  opacity: 0;
  transform: scale(0.9);
}