blog/blog-facade.git

inleft

2022-02-28 9c695b19fc896c497c20bda6089f824c1705836c

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