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