blog/blog-facade.git

inleft

2022-01-23 6d105720dba848e7413fe6709f68d85f0a264fbf

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