blog/blog-facade.git

inleft

2022-01-19 b4f6a53cc4815471c6b936cd462bb4500883a2f6

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