blog/blog-facade.git

inleft

2022-08-11 af029bdfb645bd2b75fbab687c1a5f45b428d801

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