inleft
2022-02-27 b1336e3f7fbc43854b6e891578a1d7673ea8e6dd
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>