inleft
2022-02-23 81c155e7e00b83f06e6486a8d904428a44b8b275
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">
83fb37 165     @font-face {
I 166         font-family: 'HYTangMeiRen';
167         // font-display: swap;
168         src: url("https://unpkg.zhimg.com/fontawepro@latest/fonts/hytmr55.woff") format("truetype");
169     }
170
6bcd13 171     span,
I 172     p,
173     a,
174     body,
175     h1,
176     h2,
177     h3,
178     h4,
179     h5,
180     h6,
181     code {
83fb37 182         font-family: HYTangMeiRen !important;
I 183     }
184
56a4b8 185     .swichTag {
41b36f 186         min-height: 750px;
56a4b8 187         padding: 30px 30px 10px;
I 188         border-radius: 15px;
f9c38e 189         box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
I 190         padding: 20px 30px 0px;
56a4b8 191     }
f5539f 192
L 193     .holdHeight {
aab811 194         min-height: 780px;
I 195     }
d629d9 196
L 197
ad2b70 198     .blog-main {
41b36f 199         margin-top: 80px;
ad2b70 200         padding-left: 5%;
L 201         padding-right: 5%;
202     }
203
204     /*左右两边的盒子容器*/
205     .blog-cell {
206         opacity: 0.8;
aab811 207         padding: 0px 14px 10px;
63f511 208         -moz-user-select: none;
I 209         -webkit-user-select: none;
210         -ms-user-select: none;
211         -khtml-user-select: none;
212         user-select: none;
ad2b70 213     }
L 214
215     /*左边部分*/
216     .blog-left-side {
217         position: sticky;
218         // top: 80px;
41b36f 219         // padding-left: 2%;
ad2b70 220         /*padding-right: 2%;*/
L 221     }
222
223     /*中间部分*/
224     .blog-body {
225         padding-top: 10px;
226         /*padding-left: 3%;*/
227         /*padding-right: 3%;*/
228     }
229
230     /*右边部分*/
231     .blog-right-side {
232         position: sticky;
233         top: -19%;
234         padding-top: 10px;
235         /*padding-left: 2%;*/
236         /*padding-right: 2%;*/
237     }
238
239     div .blog-right-side-meta div {
240         padding-left: 6%;
241         padding-right: 6%;
242         margin-bottom: 3%;
243     }
244
245
06ee76 246     @card-box-shadow: 8px 8px 18px rgba(0, 0, 0, 0.1), -8px -8px 18px rgba(255, 255, 255, 1);
L 247
ad2b70 248     /*---------------------
L 249         |   核心盒子构成start   |
250         ------- ---------------*/
251     .blog-container {
252         border-radius: 15px;
06ee76 253         // background-color: #f5f8fa;
ad2b70 254         background-color: white;
L 255
256         line-height: 1.4;
257         white-space: nowrap;
258         /*规定段落中的文本不进行换行:*/
259         text-align: center;
260         padding-top: 20px;
261         padding-bottom: 20px;
83fb37 262         // max-height: 300px;
ad2b70 263         /*margin-top: 10px;*/
L 264         /*min-height: 200px;*/
265
266         // overflow-x: hidden;
267         // overflow-y: overlay;
268         // display: block;
269
270         padding-top: 10px;
271         padding-bottom: 20px;
83fb37 272         // overflow: hidden;
06ee76 273         // box-shadow: 1px 1px 1px 2px #00000059;
b505f3 274
06ee76 275         // -webkit-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
L 276         // box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
277
278         box-shadow: @card-box-shadow;
279         -webkit-box-shadow: @card-box-shadow;
280         transition: all .4s;
281         -webkit-transition: all .6s;
282         -moz-transition: all .6s;
283         -o-transition: all .6s;
284         -ms-transition: all .6s;
83fb37 285         transition: height 2s;
I 286
06ee76 287     }
L 288
289     //div本体阴影
290     .blog-container:hover {
291         transition: all .25s;
292         -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);
293         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 294     }
L 295
296     .show-line {
297         border-top: 1px solid #999;
298     }
299
300     .blog-scroll {
301         padding-top: 10px;
302         overflow-x: hidden;
83fb37 303         overflow-y: hidden;
I 304
305         transition: height 1s;
306
ad2b70 307     }
L 308
309
310     .blog-scroll:hover::-webkit-scrollbar {
311         display: block;
312     }
313
314     .blog-scroll:hover::-webkit-scrollbar {
315         display: block;
316     }
317
318     .blog-scroll::-webkit-scrollbar {
319         width: 5px;
320         display: none;
321     }
322
323     .blog-scroll::-webkit-scrollbar-thumb {
324         background-color: rgba(153, 154, 170, 0.3);
325         border-radius: 2px;
326     }
327
328     /*margin滚动条上偏移*/
329     .blog-scroll::-webkit-scrollbar-track {
330         margin-top: 5px;
331         margin-bottom: 5px;
332     }
333 </style>