blog/blog-facade.git

lijh

2022-01-17 f5539f069b7e485ab160cdce668f232b19533a1c

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>
f5539f	15
L	16	<a-modal v-model="visible" title="日志添加" on-ok="handleOk" >
	17	<template slot="footer">
	18	<a-button key="back" @click="handleCancel">
	19	暂缓
	20	</a-button>
	21	<a-button key="submit" type="primary" :loading="loading" @click="handleOk">
	22	完事..
	23	</a-button>
	24	</template>
	25	<box10 ref="modal" ></box10>
	26	</a-modal>
	27
41b36f	28	</div>
I	29	<div class="blog-main">
	30	<a-row>
	31	<a-col v-bind="colApiLeft">
	32	<boxLeft></boxLeft>
	33	</a-col>
	34	<a-col v-bind="colApiMain ">
f5539f	35
41b36f	36	<a-button @click="showDrawer1">
I	37	小抽屉1
	38	</a-button>
	39	<a-button @click="showDrawer2">
	40	小抽屉2
	41	</a-button>
f5539f	42	<a-button @click="showModal">
L	43	日志
	44	<a-icon type="plus-circle" style="margin-left: 0px;"/>
	45	</a-button>
019990	46	<router-view class="fade"></router-view>
41b36f	47	</a-col>
f5539f	48
41b36f	49	<a-col v-bind="colApiRight" ref="myDrawer">
d629d9	50	<boxRight></boxRight>
41b36f	51	</a-col>
I	52	</a-row>
	53	</div>
	54
ad2b70	55	</div>
L	56	</template>
	57
	58	<script>
f5539f	59	import box10 from "../mini/box10-add.vue"
41b36f	60	import boxLeft from "../group/boxLeft.vue"
I	61	import boxRight from "../group/boxRight.vue"
	62	import articleList from "../group/articleList.vue"
aab811	63	import articleListScorll from "../group/articleListScorll.vue"
41b36f	64
ad2b70	65	export default {
41b36f	66
ad2b70	67	components: {
f5539f	68	box10,
ad2b70	69	boxLeft,
L	70	boxRight,
aab811	71	articleList,
I	72	articleListScorll,
f5539f	73
L	74
ad2b70	75	},
d629d9	76	methods: {
f5539f	77	showModal() {
L	78	this.visible = true;
	79	},
	80	handleOk(e) {
	81	console.log(this.$refs.modal.form);
	82
	83	this.loading = true;
	84	setTimeout(() => {
	85	this.visible = false;
	86	this.loading = false;
	87	}, 3000);
	88	},
	89	handleCancel(e) {
	90	this.visible = false;
	91	},
41b36f	92	afterVisibleChange(val) {},
d629d9	93	showDrawer1() {
L	94	this.visible1 = true;
	95	},
	96	showDrawer2() {
	97	this.visible2 = true;
	98	},
	99	onClose1() {
	100	this.visible1 = false;
	101	},
	102	onClose2() {
	103	this.visible2 = false;
	104	},
	105	},
ad2b70	106	data() {
L	107	return {
f5539f	108	loading: false,
L	109	visible: false,
d629d9	110	visible1: false,
L	111	visible2: false,
ad2b70	112	colApiLeft: {
L	113	xs: 0,
	114	sm: 0,
41b36f	115	md: {
I	116	span: 8,
	117	},
	118	lg: {
	119	span: 7,
	120	offset: 1,
	121	},
	122	xl: {
	123	span: 5,
	124	offset: 2,
	125	},
	126	xxl: {
	127	span: 4,
	128	offset: 3,
	129	},
ad2b70	130	},
L	131	colApiRight: {
	132	xs: 0,
	133	sm: 0,
	134	md: 0,
	135	lg: 0,
41b36f	136	xl: {
I	137	span: 5,
	138	offset: 1,
	139	},
	140	xxl: {
	141	span: 4,
	142	offset: 1,
	143	},
ad2b70	144	},
L	145	colApiMain: {
	146	xs: 24,
41b36f	147	sm: {
I	148	span: 20,
	149	offset: 2,
	150	},
	151	md: {
	152	span: 14,
	153	offset: 1,
	154	},
	155	lg: {
	156	span: 13,
	157	offset: 2,
	158	},
	159	xl: {
	160	span: 9,
	161	offset: 1,
	162	},
	163	xxl: {
	164	span: 8,
	165	offset: 1,
	166	},
ad2b70	167	}
41b36f	168
ad2b70	169	}
L	170	}
	171	}
	172	</script>
	173
	174	<style lang="less">
56a4b8	175	.swichTag {
41b36f	176	min-height: 750px;
56a4b8	177	padding: 30px 30px 10px;
I	178	background-color: white;
	179	border-radius: 15px;
	180	}
f5539f	181
L	182	.holdHeight {
aab811	183	min-height: 780px;
I	184	}
d629d9	185
56a4b8	186	.article-detail {
I	187	max-height: 750px;
	188	overflow: overlay;
	189	}
d629d9	190
ad2b70	191	.blog-main {
41b36f	192	margin-top: 80px;
ad2b70	193	padding-left: 5%;
L	194	padding-right: 5%;
	195	}
	196
	197	/左右两边的盒子容器/
	198	.blog-cell {
	199	opacity: 0.8;
aab811	200	padding: 0px 14px 10px;
ad2b70	201	}
L	202
	203	/左边部分/
	204	.blog-left-side {
	205	position: sticky;
	206	// top: 80px;
41b36f	207	// padding-left: 2%;
ad2b70	208	/padding-right: 2%;/
L	209	}
	210
	211	/中间部分/
	212	.blog-body {
	213	padding-top: 10px;
	214	/padding-left: 3%;/
	215	/padding-right: 3%;/
	216	}
	217
	218	/右边部分/
	219	.blog-right-side {
	220	position: sticky;
	221	top: -19%;
	222	padding-top: 10px;
	223	/padding-left: 2%;/
	224	/padding-right: 2%;/
	225	}
	226
	227	div .blog-right-side-meta div {
	228	padding-left: 6%;
	229	padding-right: 6%;
	230	margin-bottom: 3%;
	231	}
	232
	233
	234	/*---------------------
	235	\| 核心盒子构成start \|
	236	------- ---------------*/
	237	.blog-container {
	238	border-radius: 15px;
	239	background-color: white;
	240
	241	line-height: 1.4;
	242	white-space: nowrap;
	243	/规定段落中的文本不进行换行：/
	244	text-align: center;
	245	padding-top: 20px;
	246	padding-bottom: 20px;
	247	max-height: 300px;
	248	/margin-top: 10px;/
	249	/min-height: 200px;/
	250
	251	// overflow-x: hidden;
	252	// overflow-y: overlay;
	253	// display: block;
	254
	255	padding-top: 10px;
	256	padding-bottom: 20px;
	257	overflow: hidden;
d629d9	258	-webkit-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
L	259	box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
	260	// box-shadow: 1px 1px 1px 2px #00000059
ad2b70	261	}
L	262
	263	.show-line {
	264	border-top: 1px solid #999;
	265	}
	266
	267	.blog-scroll {
	268	padding-top: 10px;
	269	max-height: 200px;
	270
	271	overflow-x: hidden;
	272	overflow-y: overlay;
	273	}
	274
	275
	276	.blog-scroll:hover::-webkit-scrollbar {
	277	display: block;
	278	}
	279
	280	.blog-scroll:hover::-webkit-scrollbar {
	281	display: block;
	282	}
	283
	284	.blog-scroll::-webkit-scrollbar {
	285	width: 5px;
	286	display: none;
	287	}
	288
	289	.blog-scroll::-webkit-scrollbar-thumb {
	290	background-color: rgba(153, 154, 170, 0.3);
	291	border-radius: 2px;
	292	}
	293
	294	/margin滚动条上偏移/
	295	.blog-scroll::-webkit-scrollbar-track {
	296	margin-top: 5px;
	297	margin-bottom: 5px;
	298	}
	299	</style>