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