blog/blog-facade.git

inleft

2022-01-18 1ad93b699ff890327de9a65f26611e9415140600

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