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