| commit | author | age | ||
| ad2b70 | 1 | <template> |
| 41b36f | 2 | <div> |
| I | 3 | <div class="blog-drawer"> |
| 4 | <a-drawer placement="left" :closable="false" :visible="visible1" :getContainer="'body'" | |
| 5 | :after-visible-change="afterVisibleChange" @close="onClose1" :zIndex="10" :width=270 | |
| 6 | :bodyStyle="{padding:'0px'}" :wrapStyle="{padding:'0px',top:'60px'}"> | |
| ad2b70 | 7 | <boxLeft></boxLeft> |
| 41b36f | 8 | </a-drawer> |
| d629d9 | 9 | |
| 41b36f | 10 | <a-drawer placement="right" :closable="false" :visible="visible2" :getContainer="'body'" |
| I | 11 | :after-visible-change="afterVisibleChange" @close="onClose2" :zIndex="10" :width=270 |
| 12 | :bodyStyle="{padding:'0px'}" :wrapStyle="{padding:'0px',top:'60px'}"> | |
| 13 | <boxRight></boxRight> | |
| 14 | </a-drawer> | |
| 15 | </div> | |
| 16 | <div class="blog-main"> | |
| 17 | ||
| 18 | ||
| 19 | <a-row> | |
| 20 | <a-col v-bind="colApiLeft"> | |
| 21 | <boxLeft></boxLeft> | |
| 22 | </a-col> | |
| 23 | <a-col v-bind="colApiMain "> | |
| 24 | ||
| 25 | <a-button @click="showDrawer1"> | |
| 26 | 小抽屉1 | |
| 27 | </a-button> | |
| 28 | <a-button @click="showDrawer2"> | |
| 29 | 小抽屉2 | |
| 30 | </a-button> | |
| 31 | <router-view></router-view> | |
| 32 | </a-col> | |
| 33 | ||
| 34 | <a-col v-bind="colApiRight" ref="myDrawer"> | |
| d629d9 | 35 | <boxRight></boxRight> |
| 41b36f | 36 | </a-col> |
| I | 37 | </a-row> |
| 38 | </div> | |
| 39 | ||
| ad2b70 | 40 | </div> |
| L | 41 | </template> |
| 42 | ||
| 43 | <script> | |
| 41b36f | 44 | import boxLeft from "../group/boxLeft.vue" |
| I | 45 | import boxRight from "../group/boxRight.vue" |
| 46 | import articleList from "../group/articleList.vue" | |
| 47 | ||
| ad2b70 | 48 | export default { |
| 41b36f | 49 | |
| ad2b70 | 50 | components: { |
| L | 51 | boxLeft, |
| 52 | boxRight, | |
| 41b36f | 53 | articleList |
| ad2b70 | 54 | }, |
| d629d9 | 55 | methods: { |
| 41b36f | 56 | afterVisibleChange(val) {}, |
| d629d9 | 57 | showDrawer1() { |
| L | 58 | this.visible1 = true; |
| 59 | }, | |
| 60 | showDrawer2() { | |
| 61 | this.visible2 = true; | |
| 62 | }, | |
| 63 | onClose1() { | |
| 64 | this.visible1 = false; | |
| 65 | }, | |
| 66 | onClose2() { | |
| 67 | this.visible2 = false; | |
| 68 | }, | |
| 69 | }, | |
| ad2b70 | 70 | data() { |
| L | 71 | return { |
| d629d9 | 72 | visible1: false, |
| L | 73 | visible2: false, |
| ad2b70 | 74 | colApiLeft: { |
| L | 75 | xs: 0, |
| 76 | sm: 0, | |
| 41b36f | 77 | md: { |
| I | 78 | span: 8, |
| 79 | }, | |
| 80 | lg: { | |
| 81 | span: 7, | |
| 82 | offset: 1, | |
| 83 | }, | |
| 84 | xl: { | |
| 85 | span: 5, | |
| 86 | offset: 2, | |
| 87 | }, | |
| 88 | xxl: { | |
| 89 | span: 4, | |
| 90 | offset: 3, | |
| 91 | }, | |
| ad2b70 | 92 | }, |
| L | 93 | colApiRight: { |
| 94 | xs: 0, | |
| 95 | sm: 0, | |
| 96 | md: 0, | |
| 97 | lg: 0, | |
| 41b36f | 98 | xl: { |
| I | 99 | span: 5, |
| 100 | offset: 1, | |
| 101 | }, | |
| 102 | xxl: { | |
| 103 | span: 4, | |
| 104 | offset: 1, | |
| 105 | }, | |
| ad2b70 | 106 | }, |
| L | 107 | colApiMain: { |
| 108 | xs: 24, | |
| 41b36f | 109 | sm: { |
| I | 110 | span: 20, |
| 111 | offset: 2, | |
| 112 | }, | |
| 113 | md: { | |
| 114 | span: 14, | |
| 115 | offset: 1, | |
| 116 | }, | |
| 117 | lg: { | |
| 118 | span: 13, | |
| 119 | offset: 2, | |
| 120 | }, | |
| 121 | xl: { | |
| 122 | span: 9, | |
| 123 | offset: 1, | |
| 124 | }, | |
| 125 | xxl: { | |
| 126 | span: 8, | |
| 127 | offset: 1, | |
| 128 | }, | |
| ad2b70 | 129 | } |
| 41b36f | 130 | |
| ad2b70 | 131 | } |
| L | 132 | } |
| 133 | } | |
| 134 | </script> | |
| 135 | ||
| 136 | <style lang="less"> | |
| 56a4b8 | 137 | .swichTag { |
| 41b36f | 138 | min-height: 750px; |
| 56a4b8 | 139 | padding: 30px 30px 10px; |
| I | 140 | background-color: white; |
| 141 | border-radius: 15px; | |
| 142 | } | |
| d629d9 | 143 | |
| 56a4b8 | 144 | .article-detail { |
| I | 145 | max-height: 750px; |
| 146 | overflow: overlay; | |
| 147 | } | |
| d629d9 | 148 | |
| ad2b70 | 149 | .blog-main { |
| 41b36f | 150 | margin-top: 80px; |
| ad2b70 | 151 | padding-left: 5%; |
| L | 152 | padding-right: 5%; |
| 153 | } | |
| 154 | ||
| 155 | /*左右两边的盒子容器*/ | |
| 156 | .blog-cell { | |
| 157 | opacity: 0.8; | |
| 158 | padding: 0px 25px 10px; | |
| 159 | } | |
| 160 | ||
| 161 | /*左边部分*/ | |
| 162 | .blog-left-side { | |
| 163 | position: sticky; | |
| 164 | // top: 80px; | |
| 41b36f | 165 | // padding-left: 2%; |
| ad2b70 | 166 | /*padding-right: 2%;*/ |
| L | 167 | } |
| 168 | ||
| 169 | /*中间部分*/ | |
| 170 | .blog-body { | |
| 171 | padding-top: 10px; | |
| 172 | /*padding-left: 3%;*/ | |
| 173 | /*padding-right: 3%;*/ | |
| 174 | } | |
| 175 | ||
| 176 | /*右边部分*/ | |
| 177 | .blog-right-side { | |
| 178 | position: sticky; | |
| 179 | top: -19%; | |
| 180 | padding-top: 10px; | |
| 181 | /*padding-left: 2%;*/ | |
| 182 | /*padding-right: 2%;*/ | |
| 183 | } | |
| 184 | ||
| 185 | div .blog-right-side-meta div { | |
| 186 | padding-left: 6%; | |
| 187 | padding-right: 6%; | |
| 188 | margin-bottom: 3%; | |
| 189 | } | |
| 190 | ||
| 191 | ||
| 192 | /*--------------------- | |
| 193 | | 核心盒子构成start | | |
| 194 | ------- ---------------*/ | |
| 195 | .blog-container { | |
| 196 | border-radius: 15px; | |
| 197 | background-color: white; | |
| 198 | ||
| 199 | line-height: 1.4; | |
| 200 | white-space: nowrap; | |
| 201 | /*规定段落中的文本不进行换行：*/ | |
| 202 | text-align: center; | |
| 203 | padding-top: 20px; | |
| 204 | padding-bottom: 20px; | |
| 205 | max-height: 300px; | |
| 206 | /*margin-top: 10px;*/ | |
| 207 | /*min-height: 200px;*/ | |
| 208 | ||
| 209 | // overflow-x: hidden; | |
| 210 | // overflow-y: overlay; | |
| 211 | // display: block; | |
| 212 | ||
| 213 | padding-top: 10px; | |
| 214 | padding-bottom: 20px; | |
| 215 | overflow: hidden; | |
| d629d9 | 216 | -webkit-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19); |
| L | 217 | box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19); |
| 218 | // box-shadow: 1px 1px 1px 2px #00000059 | |
| ad2b70 | 219 | } |
| L | 220 | |
| 221 | .show-line { | |
| 222 | border-top: 1px solid #999; | |
| 223 | } | |
| 224 | ||
| 225 | .blog-scroll { | |
| 226 | padding-top: 10px; | |
| 227 | max-height: 200px; | |
| 228 | ||
| 229 | overflow-x: hidden; | |
| 230 | overflow-y: overlay; | |
| 231 | } | |
| 232 | ||
| 233 | ||
| 234 | .blog-scroll:hover::-webkit-scrollbar { | |
| 235 | display: block; | |
| 236 | } | |
| 237 | ||
| 238 | .blog-scroll:hover::-webkit-scrollbar { | |
| 239 | display: block; | |
| 240 | } | |
| 241 | ||
| 242 | .blog-scroll::-webkit-scrollbar { | |
| 243 | width: 5px; | |
| 244 | display: none; | |
| 245 | } | |
| 246 | ||
| 247 | .blog-scroll::-webkit-scrollbar-thumb { | |
| 248 | background-color: rgba(153, 154, 170, 0.3); | |
| 249 | border-radius: 2px; | |
| 250 | } | |
| 251 | ||
| 252 | /*margin滚动条上偏移*/ | |
| 253 | .blog-scroll::-webkit-scrollbar-track { | |
| 254 | margin-top: 5px; | |
| 255 | margin-bottom: 5px; | |
| 256 | } | |
| 257 | </style> | |
