blog/blog-facade.git

inleft

2022-08-11 859ec7a60a9a1f30c898dbf1ae05c50dccfc40e5

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