blog/blog-facade.git

inleft

2022-01-17 019990450fa60b31f3a055a4e1f3fc7609843291

commit \| author \| age
ad2b70	1	<template>
41b36f	2	<div>
I	3	<div class="blog-drawer">
	4	<a-drawer placement="left" :closable="false" :visible="visible1" :getContainer="'body'"
aab811	5	:after-visible-change="afterVisibleChange" @close="onClose1" :zIndex="90" :width=270
41b36f	6	:bodyStyle="{padding:'0px'}" :wrapStyle="{padding:'0px',top:'60px'}">
ad2b70	7	<boxLeft></boxLeft>
41b36f	8	</a-drawer>
d629d9	9
41b36f	10	<a-drawer placement="right" :closable="false" :visible="visible2" :getContainer="'body'"
aab811	11	:after-visible-change="afterVisibleChange" @close="onClose2" :zIndex="90" :width=270
41b36f	12	:bodyStyle="{padding:'0px'}" :wrapStyle="{padding:'0px',top:'60px'}">
I	13	<boxRight></boxRight>
	14	</a-drawer>
	15	</div>
	16	<div class="blog-main">
	17
	18
	19	<a-row>
	20	<a-col v-bind="colApiLeft">
	21	<boxLeft></boxLeft>
	22	</a-col>
	23	<a-col v-bind="colApiMain ">
	24
	25	<a-button @click="showDrawer1">
	26	小抽屉1
	27	</a-button>
	28	<a-button @click="showDrawer2">
	29	小抽屉2
	30	</a-button>
019990	31	<router-view class="fade"></router-view>
41b36f	32	</a-col>
I	33
	34	<a-col v-bind="colApiRight" ref="myDrawer">
d629d9	35	<boxRight></boxRight>
41b36f	36	</a-col>
I	37	</a-row>
	38	</div>
	39
ad2b70	40	</div>
L	41	</template>
	42
	43	<script>
41b36f	44	import boxLeft from "../group/boxLeft.vue"
I	45	import boxRight from "../group/boxRight.vue"
	46	import articleList from "../group/articleList.vue"
aab811	47	import articleListScorll from "../group/articleListScorll.vue"
41b36f	48
ad2b70	49	export default {
41b36f	50
ad2b70	51	components: {
L	52	boxLeft,
	53	boxRight,
aab811	54	articleList,
I	55	articleListScorll,
	56
019990	57
ad2b70	58	},
d629d9	59	methods: {
019990	60
41b36f	61	afterVisibleChange(val) {},
d629d9	62	showDrawer1() {
L	63	this.visible1 = true;
	64	},
	65	showDrawer2() {
	66	this.visible2 = true;
	67	},
	68	onClose1() {
	69	this.visible1 = false;
	70	},
	71	onClose2() {
	72	this.visible2 = false;
	73	},
	74	},
ad2b70	75	data() {
L	76	return {
d629d9	77	visible1: false,
L	78	visible2: false,
ad2b70	79	colApiLeft: {
L	80	xs: 0,
	81	sm: 0,
41b36f	82	md: {
I	83	span: 8,
	84	},
	85	lg: {
	86	span: 7,
	87	offset: 1,
	88	},
	89	xl: {
	90	span: 5,
	91	offset: 2,
	92	},
	93	xxl: {
	94	span: 4,
	95	offset: 3,
	96	},
ad2b70	97	},
L	98	colApiRight: {
	99	xs: 0,
	100	sm: 0,
	101	md: 0,
	102	lg: 0,
41b36f	103	xl: {
I	104	span: 5,
	105	offset: 1,
	106	},
	107	xxl: {
	108	span: 4,
	109	offset: 1,
	110	},
ad2b70	111	},
L	112	colApiMain: {
	113	xs: 24,
41b36f	114	sm: {
I	115	span: 20,
	116	offset: 2,
	117	},
	118	md: {
	119	span: 14,
	120	offset: 1,
	121	},
	122	lg: {
	123	span: 13,
	124	offset: 2,
	125	},
	126	xl: {
	127	span: 9,
	128	offset: 1,
	129	},
	130	xxl: {
	131	span: 8,
	132	offset: 1,
	133	},
ad2b70	134	}
41b36f	135
ad2b70	136	}
L	137	}
	138	}
	139	</script>
	140
	141	<style lang="less">
56a4b8	142	.swichTag {
41b36f	143	min-height: 750px;
56a4b8	144	padding: 30px 30px 10px;
I	145	background-color: white;
	146	border-radius: 15px;
	147	}
aab811	148	.holdHeight{
I	149	min-height: 780px;
	150	}
d629d9	151
56a4b8	152	.article-detail {
I	153	max-height: 750px;
	154	overflow: overlay;
	155	}
d629d9	156
ad2b70	157	.blog-main {
41b36f	158	margin-top: 80px;
ad2b70	159	padding-left: 5%;
L	160	padding-right: 5%;
	161	}
	162
	163	/左右两边的盒子容器/
	164	.blog-cell {
	165	opacity: 0.8;
aab811	166	padding: 0px 14px 10px;
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
	200	/*---------------------
	201	\| 核心盒子构成start \|
	202	------- ---------------*/
	203	.blog-container {
	204	border-radius: 15px;
	205	background-color: white;
	206
	207	line-height: 1.4;
	208	white-space: nowrap;
	209	/规定段落中的文本不进行换行：/
	210	text-align: center;
	211	padding-top: 20px;
	212	padding-bottom: 20px;
	213	max-height: 300px;
	214	/margin-top: 10px;/
	215	/min-height: 200px;/
	216
	217	// overflow-x: hidden;
	218	// overflow-y: overlay;
	219	// display: block;
	220
	221	padding-top: 10px;
	222	padding-bottom: 20px;
	223	overflow: hidden;
d629d9	224	-webkit-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
L	225	box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
	226	// box-shadow: 1px 1px 1px 2px #00000059
ad2b70	227	}
L	228
	229	.show-line {
	230	border-top: 1px solid #999;
	231	}
	232
	233	.blog-scroll {
	234	padding-top: 10px;
	235	max-height: 200px;
	236
	237	overflow-x: hidden;
	238	overflow-y: overlay;
	239	}
	240
	241
	242	.blog-scroll:hover::-webkit-scrollbar {
	243	display: block;
	244	}
	245
	246	.blog-scroll:hover::-webkit-scrollbar {
	247	display: block;
	248	}
	249
	250	.blog-scroll::-webkit-scrollbar {
	251	width: 5px;
	252	display: none;
	253	}
	254
	255	.blog-scroll::-webkit-scrollbar-thumb {
	256	background-color: rgba(153, 154, 170, 0.3);
	257	border-radius: 2px;
	258	}
	259
	260	/margin滚动条上偏移/
	261	.blog-scroll::-webkit-scrollbar-track {
	262	margin-top: 5px;
	263	margin-bottom: 5px;
	264	}
	265	</style>