blog/blog-facade.git

inleft

2022-08-12 0dd41bd8cee430d3a948b89c664cb511c400993c

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