| commit | author | age | ||
| ad2b70 | 1 | <template> |
| 41b36f | 2 | <div> |
| b505f3 | 3 | <MyModal ref="myModal"></MyModal> |
| I | 4 | |
| 41b36f | 5 | <div class="blog-drawer"> |
| I | 6 | <a-drawer placement="left" :closable="false" :visible="visible1" :getContainer="'body'" |
| f9c38e | 7 | :after-visible-change="afterVisibleChange" @close="onClose1" :zIndex="90" :width=300 |
| b505f3 | 8 | :bodyStyle="{padding:'0px'}" |
| I | 9 | :wrapStyle="{padding:'0px',top:'60px !important','height':'calc(100% - 60px) !important'}"> |
| ad2b70 | 10 | <boxLeft></boxLeft> |
| 41b36f | 11 | <boxRight></boxRight> |
| I | 12 | </a-drawer> |
| 13 | </div> | |
| b505f3 | 14 | |
| 41b36f | 15 | <div class="blog-main"> |
| b505f3 | 16 | |
| 41b36f | 17 | <a-row> |
| 6bcd13 | 18 | <keep-alive> |
| I | 19 | <a-col v-bind="colApiLeft"> |
| 20 | <boxLeft></boxLeft> | |
| 21 | <boxRight></boxRight> | |
| 22 | </a-col> | |
| 23 | </keep-alive> | |
| f5539f | 24 | |
| b505f3 | 25 | <a-col v-bind="colApiMain "> |
| I | 26 | <a-col v-bind="colMini" :style="{'position':'absolute','right':'30px'}"> |
| 27 | <a-affix :offset-top="550"> | |
| 28 | <a-button @click="showDrawer1"> | |
| 7b98c8 | 29 | more |
| b505f3 | 30 | </a-button> |
| I | 31 | </a-affix> |
| 32 | </a-col> | |
| 6bcd13 | 33 | <keep-alive> |
| I | 34 | <router-view class="fade"></router-view> |
| 35 | </keep-alive> | |
| 41b36f | 36 | </a-col> |
| f5539f | 37 | |
| 41b36f | 38 | <a-col v-bind="colApiRight" ref="myDrawer"> |
| b505f3 | 39 | <!-- <boxRight></boxRight> --> |
| f9c38e | 40 | <tool @showModal="showModal" @showDrawer1="showDrawer1" @showScreen="showScreen"></tool> |
| 41b36f | 41 | </a-col> |
| I | 42 | </a-row> |
| 43 | </div> | |
| 44 | ||
| ad2b70 | 45 | </div> |
| L | 46 | </template> |
| 47 | ||
| 48 | <script> | |
| 41b36f | 49 | import boxLeft from "../group/boxLeft.vue" |
| I | 50 | import boxRight from "../group/boxRight.vue" |
| aab811 | 51 | import articleListScorll from "../group/articleListScorll.vue" |
| b505f3 | 52 | import tool from "../group/tool.vue" |
| I | 53 | import MyModal from "../group/MyModal.vue" |
| 41b36f | 54 | |
| ad2b70 | 55 | export default { |
| 41b36f | 56 | |
| ad2b70 | 57 | components: { |
| L | 58 | boxLeft, |
| 59 | boxRight, | |
| aab811 | 60 | articleListScorll, |
| b505f3 | 61 | tool, |
| I | 62 | MyModal, |
| ad2b70 | 63 | }, |
| d629d9 | 64 | methods: { |
| f9c38e | 65 | showScreen() { |
| I | 66 | if (this.screen) { |
| 67 | //缩小 | |
| 68 | this.colApiLeft.xxl.span = 0; | |
| 69 | this.colApiLeft.xxl.offset = 0; | |
| 70 | ||
| 71 | this.colApiMain.xxl.span = 17; | |
| 72 | this.colApiMain.xxl.offset = 4; | |
| 73 | } else { | |
| 74 | //放大 | |
| 75 | this.colApiLeft.xxl.span = 4; | |
| 76 | this.colApiLeft.xxl.offset = 3; | |
| 77 | ||
| 78 | this.colApiMain.xxl.span = 11; | |
| 79 | this.colApiMain.xxl.offset = 2; | |
| 80 | } | |
| 81 | this.screen = !this.screen; | |
| 82 | ||
| 83 | }, | |
| f5539f | 84 | showModal() { |
| b505f3 | 85 | this.$refs.myModal.showModal(); |
| f5539f | 86 | }, |
| 41b36f | 87 | afterVisibleChange(val) {}, |
| d629d9 | 88 | showDrawer1() { |
| L | 89 | this.visible1 = true; |
| 90 | }, | |
| 91 | onClose1() { | |
| 92 | this.visible1 = false; | |
| 93 | }, | |
| b505f3 | 94 | |
| d629d9 | 95 | }, |
| ad2b70 | 96 | data() { |
| L | 97 | return { |
| f9c38e | 98 | screen: true, |
| d629d9 | 99 | visible1: false, |
| L | 100 | visible2: false, |
| b505f3 | 101 | colMini: { |
| I | 102 | xs: 1, |
| 103 | sm: 1, | |
| 104 | md: 1, | |
| 105 | lg: 0, | |
| 106 | xl: 0, | |
| 107 | xxl: 0 | |
| 108 | }, | |
| ad2b70 | 109 | colApiLeft: { |
| L | 110 | xs: 0, |
| 111 | sm: 0, | |
| 41b36f | 112 | md: { |
| I | 113 | span: 8, |
| 114 | }, | |
| 115 | lg: { | |
| 116 | span: 7, | |
| 117 | offset: 1, | |
| 118 | }, | |
| 119 | xl: { | |
| 120 | span: 5, | |
| 121 | offset: 2, | |
| 122 | }, | |
| 123 | xxl: { | |
| 124 | span: 4, | |
| 125 | offset: 3, | |
| 126 | }, | |
| ad2b70 | 127 | }, |
| L | 128 | colApiRight: { |
| 129 | xs: 0, | |
| 130 | sm: 0, | |
| 131 | md: 0, | |
| b505f3 | 132 | lg: 1, |
| I | 133 | xl: 1, |
| 134 | xxl: 1, | |
| ad2b70 | 135 | }, |
| L | 136 | colApiMain: { |
| 137 | xs: 24, | |
| 41b36f | 138 | sm: { |
| I | 139 | span: 20, |
| 140 | offset: 2, | |
| 141 | }, | |
| 142 | md: { | |
| b505f3 | 143 | span: 15, |
| 41b36f | 144 | offset: 1, |
| I | 145 | }, |
| 146 | lg: { | |
| 147 | span: 13, | |
| 148 | offset: 2, | |
| 149 | }, | |
| 150 | xl: { | |
| b505f3 | 151 | span: 13, |
| I | 152 | offset: 2, |
| 41b36f | 153 | }, |
| I | 154 | xxl: { |
| b505f3 | 155 | span: 11, |
| I | 156 | offset: 2, |
| 41b36f | 157 | }, |
| ad2b70 | 158 | } |
| L | 159 | } |
| 160 | } | |
| 161 | } | |
| 162 | </script> | |
| 163 | ||
| 164 | <style lang="less"> | |
| b1336e | 165 | |
| I | 166 | |
| 83fb37 | 167 | @font-face { |
| I | 168 | font-family: 'HYTangMeiRen'; |
| 169 | // font-display: swap; | |
| 170 | src: url("https://unpkg.zhimg.com/fontawepro@latest/fonts/hytmr55.woff") format("truetype"); | |
| 171 | } | |
| 172 | ||
| 6bcd13 | 173 | span, |
| I | 174 | p, |
| 175 | a, | |
| 176 | body, | |
| 177 | h1, | |
| 178 | h2, | |
| 179 | h3, | |
| 180 | h4, | |
| 181 | h5, | |
| 182 | h6, | |
| 183 | code { | |
| 83fb37 | 184 | font-family: HYTangMeiRen !important; |
| I | 185 | } |
| 186 | ||
| 56a4b8 | 187 | .swichTag { |
| 41b36f | 188 | min-height: 750px; |
| 56a4b8 | 189 | padding: 30px 30px 10px; |
| I | 190 | border-radius: 15px; |
| f9c38e | 191 | box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19); |
| I | 192 | padding: 20px 30px 0px; |
| 56a4b8 | 193 | } |
| f5539f | 194 | |
| L | 195 | .holdHeight { |
| aab811 | 196 | min-height: 780px; |
| I | 197 | } |
| d629d9 | 198 | |
| L | 199 | |
| ad2b70 | 200 | .blog-main { |
| 41b36f | 201 | margin-top: 80px; |
| 2f9d3c | 202 | padding-left: 3%; |
| I | 203 | padding-right: 3%; |
| ad2b70 | 204 | } |
| L | 205 | |
| 206 | /*左右两边的盒子容器*/ | |
| 207 | .blog-cell { | |
| 208 | opacity: 0.8; | |
| aab811 | 209 | padding: 0px 14px 10px; |
| 63f511 | 210 | -moz-user-select: none; |
| I | 211 | -webkit-user-select: none; |
| 212 | -ms-user-select: none; | |
| 213 | -khtml-user-select: none; | |
| 214 | user-select: none; | |
| ad2b70 | 215 | } |
| L | 216 | |
| 217 | /*左边部分*/ | |
| 218 | .blog-left-side { | |
| 219 | position: sticky; | |
| 220 | // top: 80px; | |
| 41b36f | 221 | // padding-left: 2%; |
| ad2b70 | 222 | /*padding-right: 2%;*/ |
| L | 223 | } |
| 224 | ||
| 225 | /*中间部分*/ | |
| 226 | .blog-body { | |
| 227 | padding-top: 10px; | |
| 228 | /*padding-left: 3%;*/ | |
| 229 | /*padding-right: 3%;*/ | |
| 230 | } | |
| 231 | ||
| 232 | /*右边部分*/ | |
| 233 | .blog-right-side { | |
| 234 | position: sticky; | |
| 235 | top: -19%; | |
| 236 | padding-top: 10px; | |
| 237 | /*padding-left: 2%;*/ | |
| 238 | /*padding-right: 2%;*/ | |
| 239 | } | |
| 240 | ||
| 241 | div .blog-right-side-meta div { | |
| 242 | padding-left: 6%; | |
| 243 | padding-right: 6%; | |
| 244 | margin-bottom: 3%; | |
| 245 | } | |
| 246 | ||
| 247 | ||
| 06ee76 | 248 | @card-box-shadow: 8px 8px 18px rgba(0, 0, 0, 0.1), -8px -8px 18px rgba(255, 255, 255, 1); |
| L | 249 | |
| ad2b70 | 250 | /*--------------------- |
| L | 251 | | 核心盒子构成start | |
| 252 | ------- ---------------*/ | |
| 253 | .blog-container { | |
| 254 | border-radius: 15px; | |
| 06ee76 | 255 | // background-color: #f5f8fa; |
| ad2b70 | 256 | background-color: white; |
| L | 257 | |
| 258 | line-height: 1.4; | |
| 259 | white-space: nowrap; | |
| 260 | /*规定段落中的文本不进行换行：*/ | |
| 261 | text-align: center; | |
| 262 | padding-top: 20px; | |
| 263 | padding-bottom: 20px; | |
| 83fb37 | 264 | // max-height: 300px; |
| ad2b70 | 265 | /*margin-top: 10px;*/ |
| L | 266 | /*min-height: 200px;*/ |
| 267 | ||
| 268 | // overflow-x: hidden; | |
| 269 | // overflow-y: overlay; | |
| 270 | // display: block; | |
| 271 | ||
| 272 | padding-top: 10px; | |
| 273 | padding-bottom: 20px; | |
| 83fb37 | 274 | // overflow: hidden; |
| 06ee76 | 275 | // box-shadow: 1px 1px 1px 2px #00000059; |
| b505f3 | 276 | |
| 06ee76 | 277 | // -webkit-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19); |
| L | 278 | // box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19); |
| 279 | ||
| 280 | box-shadow: @card-box-shadow; | |
| 281 | -webkit-box-shadow: @card-box-shadow; | |
| 282 | transition: all .4s; | |
| 283 | -webkit-transition: all .6s; | |
| 284 | -moz-transition: all .6s; | |
| 285 | -o-transition: all .6s; | |
| 286 | -ms-transition: all .6s; | |
| 83fb37 | 287 | transition: height 2s; |
| I | 288 | |
| 06ee76 | 289 | } |
| L | 290 | |
| 291 | //div本体阴影 | |
| 292 | .blog-container:hover { | |
| 293 | transition: all .25s; | |
| 294 | -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 rgba(255, 255, 255, 0.8), inset 9px 9px 15px rgba(0, 0, 0, 0.1), inset -9px -9px 15px rgba(255, 255, 255, 1); | |
| 295 | box-shadow: 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 rgba(255, 255, 255, 0.8), inset 9px 9px 15px rgba(0, 0, 0, 0.1), inset -9px -9px 15px rgba(255, 255, 255, 1); | |
| ad2b70 | 296 | } |
| L | 297 | |
| 298 | .show-line { | |
| 299 | border-top: 1px solid #999; | |
| 300 | } | |
| 301 | ||
| 302 | .blog-scroll { | |
| 303 | padding-top: 10px; | |
| 304 | overflow-x: hidden; | |
| 83fb37 | 305 | overflow-y: hidden; |
| I | 306 | |
| 307 | transition: height 1s; | |
| 308 | ||
| ad2b70 | 309 | } |
| L | 310 | |
| 311 | ||
| 312 | .blog-scroll:hover::-webkit-scrollbar { | |
| 313 | display: block; | |
| 314 | } | |
| 315 | ||
| 316 | .blog-scroll:hover::-webkit-scrollbar { | |
| 317 | display: block; | |
| 318 | } | |
| 319 | ||
| 320 | .blog-scroll::-webkit-scrollbar { | |
| 321 | width: 5px; | |
| 322 | display: none; | |
| 323 | } | |
| 324 | ||
| 325 | .blog-scroll::-webkit-scrollbar-thumb { | |
| 326 | background-color: rgba(153, 154, 170, 0.3); | |
| 327 | border-radius: 2px; | |
| 328 | } | |
| 329 | ||
| 330 | /*margin滚动条上偏移*/ | |
| 331 | .blog-scroll::-webkit-scrollbar-track { | |
| 332 | margin-top: 5px; | |
| 333 | margin-bottom: 5px; | |
| 334 | } | |
| 335 | </style> | |
