From ad2b70777b866a9f4848a89fd0e343f991f8a604 Mon Sep 17 00:00:00 2001
From: lijh <lijh>
Date: Thu, 13 Jan 2022 18:40:57 +0800
Subject: [PATCH] 路由跳转添加
---
src/components/layouts/main.vue | 219 +++++++++---------------------------------------------
1 files changed, 37 insertions(+), 182 deletions(-)
diff --git a/src/components/layouts/main.vue b/src/components/layouts/main.vue
index f7961b1..79520f9 100644
--- a/src/components/layouts/main.vue
+++ b/src/components/layouts/main.vue
@@ -1,96 +1,63 @@
<template>
<div id="components-layout-basic">
<a-layout>
- <a-layout-header>Header</a-layout-header>
+ <a-layout-header>
+ <tag-Header></tag-Header>
+ </a-layout-header>
<a-layout>
- <div class="blog-main">
- <a-row>
- <a-col v-bind="colApiLeft">
- <boxLeft></boxLeft>
- </a-col>
- <a-col v-bind="colApiMain ">
- <box5></box5>
- <box5></box5>
- <a-pagination v-model="current" :total="50" show-less-items />
- </a-col>
- <a-col v-bind="colApiRight">
- <boxRight></boxRight>
- </a-col>
- </a-row>
- </div>
- <!-- <a-layout-sider v-bind="sliderApi">Sider</a-layout-sider>
- <a-layout-content>Content</a-layout-content>
- <a-layout-sider v-bind="sliderApi">Sider</a-layout-sider> -->
+ <router-view class="fade"></router-view>
</a-layout>
- <a-layout-footer>Footer</a-layout-footer>
+ <a-layout-footer>
+ <div>
+ <p>备案号:
+ <a href="http://www.miitbeian.gov.cn/" target="_blank">粤ICP备19000592号-1</a>
+ </p>
+ </div>
+ </a-layout-footer>
</a-layout>
</div>
</template>
<script>
- import boxLeft from "./boxLeft.vue"
- import boxRight from "./boxRight.vue"
- import box5 from "./box5.vue"
+ import tagHeader from "./tag-header.vue"
export default {
components: {
- boxLeft,
- boxRight,
- box5
+ tagHeader
},
-
data() {
return {
- current: 2,
- sliderApi: {
- collapsible: true, //是否可收起
- collapsedWidth: 0 //收缩宽度，设置为 0 会出现特殊 trigger
- },
- colApiLeft: {
- xs: 0,
- sm: 0,
- md: 0,
- lg: 8,
- xl: 8,
- xxl: 6,
- },
- colApiRight: {
- xs: 0,
- sm: 0,
- md: 0,
- lg: 0,
- xl: 0,
- xxl: 4,
- },
- colApiMain: {
- xs: 24,
- sm: 24,
- md: 24,
- lg: 14,
- xl: 14,
- xxl: 14,
- }
}
}
+
}
</script>
<style lang="less">
#components-layout-basic {
- text-align: center;
- height: 100%;
width: 100%;
margin: 0;
padding: 0;
- .ant-layout-header,
- .ant-layout-footer {
- background: #7dbcea;
- color: #fff;
+ .ant-layout {}
+
+ .ant-layout-header {
+ background-color: #001529;
}
.ant-layout-footer {
- line-height: 1.5;
+ background-color: #edf1f299;
+ padding: 0px;
+
+ p {
+ margin: auto;
+ color: #757575;
+ }
+
+ a {
+ opacity: 0.8;
+ color: #757575;
+ }
}
.ant-layout-sider {
@@ -104,14 +71,7 @@
height: 100%;
}
- // >.ant-layout {
- // width: 100%;
- // min-height: 100%;
- // }
- // >.ant-layout:last-child {
- // margin: 0;
- // }
}
@@ -134,7 +94,13 @@
p {
font-size: 17px;
letter-spacing: 0.8px;
- line-height: 30px;
+ line-height: 22px;
+ }
+
+ .fade {
+ -webkit-animation-name: "fade";
+ -webkit-animation-duration: 2s;
+ -webkit-animation-iteration-count: 1;
}
.fadeInLeft {
@@ -147,117 +113,6 @@
-webkit-animation-name: "fadeInRight";
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
- }
-
- .blog-main {
- padding-left: 5%;
- padding-right: 5%;
- }
-
-
-
- /*左右两边的盒子容器*/
- .blog-cell {
- opacity: 0.8;
- padding: 0px 25px 10px;
- }
-
- /*左边部分*/
- .blog-left-side {
- position: sticky;
- // top: 80px;
- padding-left: 2%;
- /*padding-right: 2%;*/
- z-index: 100;
- }
-
- /*中间部分*/
- .blog-body {
- padding-top: 10px;
- /*padding-left: 3%;*/
- /*padding-right: 3%;*/
- }
-
- /*右边部分*/
- .blog-right-side {
- position: sticky;
- top: -19%;
- padding-top: 10px;
- /*padding-left: 2%;*/
- /*padding-right: 2%;*/
- z-index: 100;
- }
-
- div .blog-right-side-meta div {
- padding-left: 6%;
- padding-right: 6%;
- margin-bottom: 3%;
- }
-
-
- /*---------------------
- | 核心盒子构成start |
- ------- ---------------*/
- .blog-container {
- border-radius: 15px;
- background-color: white;
-
- line-height: 1.4;
- white-space: nowrap;
- /*规定段落中的文本不进行换行：*/
- text-align: center;
- padding-top: 20px;
- padding-bottom: 20px;
- max-height: 300px;
- /*margin-top: 10px;*/
- /*min-height: 200px;*/
-
- // overflow-x: hidden;
- // overflow-y: overlay;
- // display: block;
-
- padding-top: 10px;
- padding-bottom: 20px;
- overflow: hidden;
-
-
- }
-
- .show-line {
- border-top: 1px solid #999;
- }
-
- .blog-scroll {
- padding-top: 10px;
- max-height: 200px;
-
- overflow-x: hidden;
- overflow-y: overlay;
- }
-
-
- .blog-scroll:hover::-webkit-scrollbar {
- display: block;
- }
-
- .blog-scroll:hover::-webkit-scrollbar {
- display: block;
- }
-
- .blog-scroll::-webkit-scrollbar {
- width: 5px;
- display: none;
- }
-
- .blog-scroll::-webkit-scrollbar-thumb {
- background-color: rgba(153, 154, 170, 0.3);
- border-radius: 2px;
- }
-
- /*margin滚动条上偏移*/
- .blog-scroll::-webkit-scrollbar-track {
- margin-top: 5px;
- margin-bottom: 5px;
}
--
Gitblit v1.9.1