| commit | author | age | ||
| fa1bd9 | 1 | <template> |
| I | 2 | <div class="blog-main"> |
| 3 | <div class="edit-main"> | |
| 4 | <div class="edit-info"> | |
| 5 | <div class="edit-info-head"> | |
| 6 | 头 | |
| 7 | </div> | |
| 8 | <div class="edit-info-body"> | |
| 9 | 信息 | |
| 10 | </div> | |
| 11 | </div> | |
| 12 | <div class="edit-write"> | |
| 13 | <div class="edit-write-input">输入区</div> | |
| 14 | <div class="edit-write-preview">对比区</div> | |
| 15 | </div> | |
| 16 | </div> | |
| 17 | </div> | |
| 18 | </template> | |
| 19 | ||
| 20 | <script> | |
| 21 | </script> | |
| 22 | ||
| 23 | <style lang="less"> | |
| 24 | .edit-main { | |
| 25 | min-height: 860px; | |
| 26 | width: 100%; | |
| 27 | display: grid; | |
| 28 | grid-template-columns: repeat(11, 1fr); | |
| 29 | } | |
| 30 | ||
| 31 | .edit-info { | |
| 32 | grid-column-start: 1; | |
| 33 | grid-column-end: 4; | |
| 34 | display: flex; | |
| 35 | flex-direction: column; | |
| 36 | } | |
| 37 | ||
| 38 | .edit-info-head, | |
| 39 | .edit-info-body { | |
| 40 | width: 100%; | |
| 41 | } | |
| 42 | ||
| 43 | .edit-info-head { | |
| 44 | height: 200px; | |
| 45 | background-color: #aa55ff; | |
| 46 | } | |
| 47 | ||
| 48 | .edit-info-body { | |
| 49 | background-color: #aa007f; | |
| 50 | height: 100%; | |
| 51 | } | |
| 52 | ||
| 53 | .edit-write { | |
| 54 | grid-column-start: 4; | |
| 55 | grid-column-end: 12; | |
| 56 | background-color: #ffaaff; | |
| 57 | display: flex; | |
| 58 | } | |
| 59 | ||
| 60 | .edit-write-input { | |
| 61 | width: 100%; | |
| 62 | background-color: #aa557f; | |
| 63 | } | |
| 64 | ||
| 65 | .edit-write-preview { | |
| 66 | width: 100%; | |
| 67 | background-color: #55007f; | |
| 68 | } | |
| 69 | </style> | |
