blog/blog-facade.git

lijh

2022-01-19 06ee76d0a83854ad7a044689627e0f00a66e5ce5

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">
06ee76	20	<a-button key="reset" @click="reset" type="danger">
b4f6a5	21	擦掉重来
I	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>
019990	54	<router-view class="fade"></router-view>
41b36f	55	</a-col>
f5539f	56
41b36f	57	<a-col v-bind="colApiRight" ref="myDrawer">
d629d9	58	<boxRight></boxRight>
41b36f	59	</a-col>
I	60	</a-row>
	61	</div>
	62
ad2b70	63	</div>
L	64	</template>
	65
	66	<script>
b4f6a5	67	import tempFriendBox from "../group/tempFriendBox.vue"
f5539f	68	import box10 from "../mini/box10-add.vue"
41b36f	69	import boxLeft from "../group/boxLeft.vue"
I	70	import boxRight from "../group/boxRight.vue"
aab811	71	import articleListScorll from "../group/articleListScorll.vue"
41b36f	72
ad2b70	73	export default {
41b36f	74
ad2b70	75	components: {
b4f6a5	76	tempFriendBox,
f5539f	77	box10,
ad2b70	78	boxLeft,
L	79	boxRight,
aab811	80	articleListScorll,
ad2b70	81	},
d629d9	82	methods: {
1ad93b	83	getCalendarContainer(trigger) {
I	84	return this.$refs.myModal;
	85	},
f5539f	86	showModal() {
L	87	this.visible = true;
	88	},
	89	handleOk(e) {
1ad93b	90	console.log(this.$refs.modalBox.form);
06ee76	91	var res = this.$refs.modalBox.$refs.myForm.validate(valid => {
1ad93b	92	if (valid) {
I	93	this.$message.info("校验通过")
	94	} else {
	95	this.$message.info("校验失败")
	96	return false;
	97	}
	98	});
06ee76	99
L	100
	101	if (!res) return;
1ad93b	102
I	103	this.$message.info("提交表单")
	104
f5539f	105	this.loading = true;
L	106	setTimeout(() => {
	107	this.visible = false;
	108	this.loading = false;
	109	}, 3000);
	110	},
b4f6a5	111	reset(e) {
06ee76	112	var res = this.$refs.modalBox.$refs.myForm.resetFields()
b4f6a5	113	},
f5539f	114	handleCancel(e) {
L	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
06ee76	259	@card-box-shadow: 8px 8px 18px rgba(0, 0, 0, 0.1), -8px -8px 18px rgba(255, 255, 255, 1);
L	260
ad2b70	261	/*---------------------
L	262	\| 核心盒子构成start \|
	263	------- ---------------*/
	264	.blog-container {
	265	border-radius: 15px;
06ee76	266	// background-color: #f5f8fa;
ad2b70	267	background-color: white;
L	268
	269	line-height: 1.4;
	270	white-space: nowrap;
	271	/规定段落中的文本不进行换行：/
	272	text-align: center;
	273	padding-top: 20px;
	274	padding-bottom: 20px;
	275	max-height: 300px;
	276	/margin-top: 10px;/
	277	/min-height: 200px;/
	278
	279	// overflow-x: hidden;
	280	// overflow-y: overlay;
	281	// display: block;
	282
	283	padding-top: 10px;
	284	padding-bottom: 20px;
	285	overflow: hidden;
06ee76	286	// box-shadow: 1px 1px 1px 2px #00000059;
L	287
	288	// -webkit-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
	289	// box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
	290
	291	box-shadow: @card-box-shadow;
	292	-webkit-box-shadow: @card-box-shadow;
	293	transition: all .4s;
	294	-webkit-transition: all .6s;
	295	-moz-transition: all .6s;
	296	-o-transition: all .6s;
	297	-ms-transition: all .6s;
	298	}
	299
	300	//div本体阴影
	301	.blog-container:hover {
	302	transition: all .25s;
	303	-webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 rgba(255, 255, 255, 0.8), inset 9px 9px 15px rgba(0, 0, 0, 0.1), inset -9px -9px 15px rgba(255, 255, 255, 1);
	304	box-shadow: 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 rgba(255, 255, 255, 0.8), inset 9px 9px 15px rgba(0, 0, 0, 0.1), inset -9px -9px 15px rgba(255, 255, 255, 1);
ad2b70	305	}
L	306
	307	.show-line {
	308	border-top: 1px solid #999;
	309	}
	310
	311	.blog-scroll {
	312	padding-top: 10px;
	313	max-height: 200px;
	314
	315	overflow-x: hidden;
	316	overflow-y: overlay;
	317	}
	318
	319
	320	.blog-scroll:hover::-webkit-scrollbar {
	321	display: block;
	322	}
	323
	324	.blog-scroll:hover::-webkit-scrollbar {
	325	display: block;
	326	}
	327
	328	.blog-scroll::-webkit-scrollbar {
	329	width: 5px;
	330	display: none;
	331	}
	332
	333	.blog-scroll::-webkit-scrollbar-thumb {
	334	background-color: rgba(153, 154, 170, 0.3);
	335	border-radius: 2px;
	336	}
	337
	338	/margin滚动条上偏移/
	339	.blog-scroll::-webkit-scrollbar-track {
	340	margin-top: 5px;
	341	margin-bottom: 5px;
	342	}
	343	</style>