blog/blog-facade.git

inleft

2022-08-04 00e46dcc41d259b33e6c6c9771b7e2fe2ab95401

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