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