create.scss 10.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482
  1. .doc-container{
  2. width:100%;
  3. min-height:90vh;
  4. position:relative;
  5. .editor-top{
  6. display: flex;
  7. width:100%;
  8. height:60px;
  9. min-height: 60px;
  10. flex-direction: row;
  11. justify-content: space-between;
  12. align-items: center;
  13. position:fixed;
  14. top:0;
  15. z-index: 999;
  16. background: #fff;
  17. border-bottom:1px solid #ebebeb;
  18. .left{
  19. width:50%;
  20. height:100%;
  21. display: flex;
  22. flex-direction: row;
  23. justify-content: flex-start;
  24. align-items: center;
  25. font-size:14px;
  26. padding-left:10px;
  27. .doc{
  28. margin-right:20px;
  29. font-size:14px;
  30. >span{
  31. font-weight:800;
  32. }
  33. }
  34. .creator{
  35. font-size:14px;
  36. >span{
  37. font-weight:800;
  38. }
  39. }
  40. }
  41. .right{
  42. width:50%;
  43. display: flex;
  44. flex-direction: row;
  45. justify-content: flex-end;
  46. justify-items: center;
  47. padding-right: 10px;
  48. }
  49. }
  50. .editor-content{
  51. width:100%;
  52. min-height:80vh;
  53. margin-top:60px;
  54. border:1px solid #ebebeb;
  55. display: flex;
  56. justify-content: space-between;
  57. .left_scheme {
  58. width: 170px;
  59. border-right: 1px solid #e6e6e6;
  60. height: 93vh;
  61. .scheme-header {
  62. padding: 10px;
  63. border-bottom: 1px solid #e6e6e6;
  64. .title {
  65. font-size: 14px;
  66. font-weight: bold;
  67. margin-bottom: 10px;
  68. display: flex;
  69. justify-content: space-between;
  70. align-items: center;
  71. .count {
  72. color: #666;
  73. font-size: 12px;
  74. font-weight: normal;
  75. }
  76. }
  77. .search {
  78. margin-bottom: 10px;
  79. }
  80. .action-btns {
  81. display: flex;
  82. gap: 10px;
  83. margin-bottom: 10px;
  84. .el-button {
  85. flex: 1;
  86. }
  87. }
  88. .current-scheme {
  89. font-size: 13px;
  90. color: #666;
  91. margin-top: 5px;
  92. }
  93. }
  94. .scheme-content {
  95. padding: 10px;
  96. height: calc(100% - 180px);
  97. overflow-y: auto;
  98. .el-tree {
  99. background: transparent;
  100. }
  101. .custom-tree-node {
  102. display: flex;
  103. align-items: center;
  104. i {
  105. margin-right: 5px;
  106. font-size: 16px;
  107. color: #909399;
  108. }
  109. }
  110. }
  111. }
  112. .natural{
  113. width: 200px;
  114. border-right: 1px solid #e6e6e6;
  115. height: 93vh;
  116. background: #fff;
  117. .resource-header-title {
  118. display: flex;
  119. justify-content: space-between;
  120. align-items: center;
  121. padding: 10px 15px;
  122. border-bottom: 1px solid #e6e6e6;
  123. .title-left {
  124. display: flex;
  125. align-items: center;
  126. gap: 8px;
  127. font-size: 14px;
  128. .resource-count {
  129. color: #666;
  130. font-size: 12px;
  131. }
  132. }
  133. .el-icon-menu {
  134. color: #666;
  135. font-size: 18px;
  136. cursor: pointer;
  137. }
  138. }
  139. .resource-container {
  140. padding: 15px;
  141. .resource-header {
  142. margin-bottom: 15px;
  143. .el-input {
  144. margin-bottom: 10px;
  145. }
  146. .action-btns {
  147. display: flex;
  148. gap: 10px;
  149. .el-button {
  150. flex: 1;
  151. height: 32px;
  152. padding: 0;
  153. font-size: 12px;
  154. }
  155. }
  156. }
  157. .resource-status {
  158. display: flex;
  159. justify-content: space-between;
  160. align-items: center;
  161. margin: 10px 0;
  162. color: #666;
  163. font-size: 12px;
  164. }
  165. .resource-content {
  166. .el-collapse {
  167. border: none;
  168. .el-collapse-item {
  169. margin-bottom: 2px;
  170. &__header {
  171. background: #f7f7f7;
  172. height: 40px;
  173. line-height: 40px;
  174. padding: 0 15px;
  175. font-size: 13px;
  176. position: relative;
  177. .el-icon-arrow-up {
  178. position: absolute;
  179. right: 15px;
  180. transition: transform 0.3s;
  181. font-size: 12px;
  182. .el-collapse-item.is-active & {
  183. transform: rotate(180deg);
  184. }
  185. }
  186. }
  187. &__content {
  188. padding: 10px 0;
  189. }
  190. }
  191. }
  192. .resource-list {
  193. .resource-item {
  194. display: flex;
  195. justify-content: space-between;
  196. align-items: center;
  197. padding: 8px 15px;
  198. font-size: 12px;
  199. &:hover {
  200. background: #f5f7fa;
  201. }
  202. .el-checkbox {
  203. margin-right: 10px;
  204. }
  205. .el-icon-menu {
  206. color: #999;
  207. cursor: move;
  208. font-size: 14px;
  209. }
  210. }
  211. }
  212. }
  213. }
  214. }
  215. .neary-doc{
  216. position:fixed;
  217. left:0;
  218. width:205px;
  219. // min-height: 100%;
  220. height: 99vh;
  221. border:1px solid #ebebeb;
  222. padding:5px;
  223. border-radius: 10px;
  224. border-top-left-radius: 0;
  225. z-index:1000!important;
  226. background:#FFF;
  227. .left-content{
  228. padding:10px;
  229. height:80vh;
  230. overflow:hidden;
  231. overflow-y:auto;
  232. overflow-x: auto; /* Enable horizontal scrolling */
  233. .new-article{
  234. background:#FFF;
  235. margin-top:5px;
  236. .sub-title{
  237. height:30px;
  238. line-height: 30px;
  239. font-weight: bold;
  240. margin-top:10px;
  241. font-size:14px;
  242. border-bottom: 1px solid #e5e5e5;
  243. }
  244. .el-collapse{
  245. width:90%;
  246. margin:auto;
  247. .el-collapse-item {
  248. .el-collapse-item__header{
  249. height: 30px;
  250. }
  251. .el-collapse-item__content{
  252. padding-bottom: 5px;
  253. .sub-menus{
  254. margin-left:15px;
  255. font-size:12px;
  256. height:20px;
  257. line-height: 20px;
  258. /* cursor:move; */
  259. }
  260. }
  261. }
  262. }
  263. }
  264. }
  265. }
  266. .leftContent{
  267. margin-top: 110px;
  268. width:200px;
  269. }
  270. .editor-main{
  271. width:56%;
  272. overflow: hidden;
  273. /* overflow-y: auto; */
  274. position:relative;
  275. margin:0 auto;
  276. margin-right: 20px;
  277. .editor-tabs {
  278. height: 100%;
  279. .el-tabs {
  280. height: 100%;
  281. .el-tabs__content {
  282. height: calc(100% - 40px);
  283. .el-tab-pane {
  284. height: 100%;
  285. }
  286. }
  287. }
  288. }
  289. .catalog-content {
  290. padding: 20px;
  291. height: 100%;
  292. overflow-y: auto;
  293. .el-tree {
  294. .custom-tree-node {
  295. flex: 1;
  296. display: flex;
  297. align-items: center;
  298. justify-content: space-between;
  299. font-size: 14px;
  300. padding-right: 8px;
  301. }
  302. .expand-icon {
  303. color: #909399;
  304. }
  305. }
  306. }
  307. .template-content {
  308. height: 100%;
  309. display: flex;
  310. flex-direction: column;
  311. .menus-box{
  312. position: absolute;
  313. background: #FFF;
  314. z-index: 3;
  315. width: 100%;
  316. }
  317. .editor-box {
  318. margin-top:80px;
  319. flex: 1;
  320. // 原有的editor-box样式
  321. }
  322. }
  323. .editor{
  324. width: 100%;
  325. div{
  326. span{
  327. }
  328. }
  329. .template-textarea{
  330. .rich-editor{
  331. padding: 0 10px;
  332. }
  333. }
  334. }
  335. }
  336. .editor-option{
  337. width:255px;
  338. height: 100vh;
  339. position:fixed;
  340. top:61px;
  341. right:0;
  342. border:1px solid #f0f0f0;
  343. z-index: 1000 !important;
  344. background:#FFF;
  345. .editor-menu{
  346. writing-mode: vertical-rl;
  347. position: fixed;
  348. width:60px;
  349. right:254px;
  350. top:65px;
  351. font-size:12px;
  352. .item{
  353. background-color: #fff;
  354. border: 1px solid rgba(0,0,0,.1);
  355. /* -webkit-box-shadow: 0 2px 8px 0 rgba(0,0,0,.1);
  356. box-shadow: 0 2px 8px 0 rgba(0,0,0,.1); */
  357. border-radius: 2px;
  358. /* width: 94px; */
  359. letter-spacing: 3px;
  360. height: 75px;
  361. display: inline-block;
  362. text-align: center;
  363. line-height: 32px;
  364. margin-bottom: 12px;
  365. -webkit-transition: all .8s;
  366. transition: all .8s;
  367. cursor: pointer;
  368. .name{
  369. font-size:12px;
  370. }
  371. }
  372. .active-item{
  373. background-color: #155bd4;
  374. color: #fff;
  375. }
  376. }
  377. }
  378. }
  379. }
  380. /* .neary-doc {
  381. display: flex;
  382. }
  383. .left-content {
  384. flex: 1;
  385. }
  386. */
  387. .right-sidebarew{
  388. position: absolute;
  389. left: 203px;
  390. top: 10px;
  391. display: flex;
  392. writing-mode: vertical-rl;
  393. flex-direction: row;
  394. font-size: 12px;
  395. }
  396. .sidebar-item {
  397. background-color: #fff;
  398. border: 1px solid #ddd;
  399. padding: 10px;
  400. letter-spacing: 3px;
  401. margin-bottom: 10px;
  402. cursor: pointer;
  403. text-align: center;
  404. }
  405. .active-item{
  406. background-color: #155bd4;
  407. color: #fff;
  408. }
  409. /* ::v-deep .el-collapse {
  410. border: none;
  411. .el-collapse-item__header {
  412. background-color: #f5f7fa;
  413. padding: 0 15px;
  414. font-weight: bold;
  415. }
  416. .el-collapse-item__content {
  417. padding: 10px 15px;
  418. }
  419. } */
  420. ::v-deep .el-collapse-item__header {
  421. .el-collapse-item__arrow {
  422. display: none; // 隐藏默认箭头
  423. }
  424. }