blog/blog-facade.git

lijh

2022-01-18 15bd39c66eb9c1942b72fb373fbe16865f715f04

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