blog/blog-facade.git

inleft

2022-02-23 81c155e7e00b83f06e6486a8d904428a44b8b275

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