blog/blog-facade.git

inleft

2022-03-04 ec6f207325f1996d71fb4e0c6acada906ec026bd

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