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/main2-show.vue | 174 +++++++
src/components/layouts/tag-header.vue | 114 ++++
src/components/layouts/box5-article.vue | 223 +++++++++
src/components/layouts/boxRight.vue | 3
src/components/layouts/box2-class.vue | 105 ++++
src/components/layouts/main1-show.vue | 172 +++++++
src/components/layouts/box3-archive.vue | 160 ++++++
src/components/layouts/box1-info.vue | 61 ++
src/components/layouts/main.vue | 219 +-------
src/components/layouts/box6-articleList.vue | 27 +
src/config/router.config.js | 64 +
src/components/layouts/boxLeft.vue | 6
src/components/layouts/box4-minibox.vue | 79 +++
13 files changed, 1,198 insertions(+), 209 deletions(-)
diff --git a/src/components/layouts/box1-info.vue b/src/components/layouts/box1-info.vue
new file mode 100644
index 0000000..7be6382
--- /dev/null
+++ b/src/components/layouts/box1-info.vue
@@ -0,0 +1,61 @@
+<template>
+ <div class="blog-avatar">
+ <img :src="avatar">
+ <div class="blog-user-message">
+ <span>{{name}}</span>
+ <span>{{sentence}}</span>
+ <span>
+ <a-icon type="environment" />{{location}}
+ </span>
+ </div>
+ </div>
+
+</template>
+
+<script>
+ export default {
+ name: "box",
+ data() {
+ return {
+ avatar: "http://t.inleft.com/share/media_photo/xigong.png",
+ name: "inleft",
+ sentence: "十里寒塘路,烟花一半醒",
+ location: "广州"
+ }
+ }
+ }
+</script>
+
+</script>
+
+<style lang="less">
+
+ /*头像部分*/
+ .blog-avatar {
+ border-radius: 15px;
+ background-color: white;
+
+ img {
+ width: 60px;
+ height: auto;
+ border-radius: 50%;
+ display: block;
+ margin: 10px auto 10px;
+ padding-top: 10px;
+ }
+ }
+
+ /* 一言 */
+ .blog-user-message {
+ text-align: center;
+ font-size: 15px;
+ color: #555;
+ padding-top: 10px;
+ padding-bottom: 10px;
+
+ span {
+ display: block;
+ padding-bottom: 5px;
+ }
+ }
+</style>
diff --git a/src/components/layouts/box2-class.vue b/src/components/layouts/box2-class.vue
new file mode 100644
index 0000000..faab681
--- /dev/null
+++ b/src/components/layouts/box2-class.vue
@@ -0,0 +1,105 @@
+<template>
+ <div class="blog-container ">
+ <span class="blog-pigeonhole">分类</span>
+ <div class="blog-scroll ">
+ <div class="blog-log-list">
+ <div class="blog-log-item" v-for="item in list1">
+ <a href="#">
+ <span>{{item.name}}</span>
+ <span>{{item.count}}</span>
+ </a>
+ </div>
+ </div>
+ <div class="blog-log-list">
+ <div class="blog-log-item" v-for="item in list2">
+ <a href="#">
+ <span>{{item.name}}</span>
+ <span>{{item.count}}</span>
+ </a>
+ </div>
+ </div>
+ <div class="blog-log-list">
+ <div class="blog-log-item" v-for="item in list2">
+ <a href="#">
+ <span>{{item.name}}</span>
+ <span>{{item.count}}</span>
+ </a>
+ </div>
+ </div>
+ </div>
+ </div>
+
+</template>
+
+<script>
+ export default {
+ data() {
+ return {
+ list1: [{
+ name: "日志",
+ count: 10
+ }, {
+ name: "分类",
+ count: 12
+ }, {
+ name: "标签",
+ count: 14
+ }],
+ list2: [{
+ name: "Tag",
+ count: 133
+ }, {
+ name: "专题",
+ count: 10
+ }, {
+ name: "偏好",
+ count: 12
+ }, {
+ name: "星标",
+ count: 14
+ }]
+ }
+ }
+ }
+</script>
+
+</script>
+
+<style lang="less">
+ /*日志部分*/
+ .blog-log-list {
+ line-height: 1.6;
+ padding-left: 3%;
+ padding-right: 3%;
+
+ flex-wrap: wrap;
+ /*让弹性盒元素在必要的时候拆行：*/
+ display: -webkit-flex;
+ display: flex;
+ -webkit-justify-content: center;
+ justify-content: center;
+ }
+
+ .blog-log-item {
+ border-left: 2px solid rgba(222, 229, 231, .45);
+ width: 23%;
+ margin-bottom: 10px;
+
+ :first-child {
+ border-left: none;
+ }
+
+ a span:first-child {
+ color: #999;
+ }
+
+ a span:last-child {
+ font-weight: 600;
+ font-size: 15px;
+ }
+
+ span {
+ display: block;
+ }
+ }
+</style>
diff --git a/src/components/layouts/box3-archive.vue b/src/components/layouts/box3-archive.vue
new file mode 100644
index 0000000..bbf9fe5
--- /dev/null
+++ b/src/components/layouts/box3-archive.vue
@@ -0,0 +1,160 @@
+<template>
+ <div class="blog-container">
+ <span class="blog-pigeonhole">归档信息</span>
+ <div class="blog-scroll ">
+ <div class="">
+ <p class="blog-pigeonhole-p">2020</p>
+ <div class="blog-pigeonhole-list">
+
+ <div class="blog-pigeonhole-item" v-for="item in list2020">
+ <a href="#">
+ <span>{{item.month}}月</span>
+ <span>{{item.count}}篇</span>
+ </a>
+ </div>
+ </div>
+ </div>
+ <div>
+ <p class="blog-pigeonhole-p">2019</p>
+ <div class="blog-pigeonhole-list">
+
+ <div class="blog-pigeonhole-item" v-for="item in list2019">
+ <a href="#">
+ <span>{{item.month}}月</span>
+ <span>{{item.count}}篇</span>
+ </a>
+ </div>
+ </div>
+ </div>
+ <div>
+ <p class="blog-pigeonhole-p">2019</p>
+ <div class="blog-pigeonhole-list">
+
+ <div class="blog-pigeonhole-item" v-for="item in list2019">
+ <a href="#">
+ <span>{{item.month}}月</span>
+ <span>{{item.count}}篇</span>
+ </a>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+</template>
+
+<script>
+ export default {
+ data() {
+ return {
+ list2019: [{
+ month: "12",
+ count: 10
+ }, {
+ month: "10",
+ count: 11
+ }, {
+ month: "9",
+ count: 9
+ }],
+ list2020: [{
+ month: "12",
+ count: 8
+ }, {
+ month: "10",
+ count: 7
+ }, {
+ month: "9",
+ count: 6
+ }, {
+ month: "8",
+ count: 5
+ }, {
+ month: "7",
+ count: 4
+ }, {
+ month: "6",
+ count: 3
+ }, {
+ month: "5",
+ count: 2
+ }, {
+ month: "4",
+ count: 1
+ }]
+ }
+ }
+ }
+</script>
+
+</script>
+
+<style lang="less">
+ /*归档部分*/
+
+ .blog-pigeonhole {
+ font-size: 15px;
+ }
+
+ .blog-pigeonhole-p {
+ width: 20%;
+ text-align: center;
+ line-height: 20px;
+ border-radius: 6px 6px 6px 6px;
+ /*background-color: #edf0f3;*/
+ margin-left: 3%;
+ margin-bottom: 3%;
+ opacity: 0.7;
+ }
+
+ .blog-pigeonhole-list {
+ line-height: 1.6;
+ padding-left: 3%;
+ padding-right: 3%;
+ /*display: flex; !*弹性盒子*!*/
+ /*justify-content: flex-end; !*在弹性盒对象的 <div> 元素中的各项周围留有空白：*!*/
+
+ display: flex;
+ display: -webkit-flex;
+ -webkit-justify-content: flex-start;
+ justify-content: flex-start;
+
+ flex-wrap: wrap;
+ /*让弹性盒元素在必要的时候拆行：*/
+ align-content: flex-start;
+ -webkit-align-content: flex-start;
+
+ }
+
+ .blog-pigeonhole-item {
+ min-width: 22%;
+ margin-left: 1.5%;
+ margin-right: 1.5%;
+ margin-bottom: 5%;
+
+ a span:first-child {
+ height: 22px;
+ background-color: #edf0f3;
+ border-radius: 6px 6px 0 0;
+ opacity: .8;
+ color: #999aaa;
+ line-height: 22px;
+ margin-bottom: 1px;
+ text-align: center;
+ }
+
+ a span:last-child {
+ height: 22px;
+ background-color: #f6f8fa;
+ border-radius: 0 0 6px 6px;
+ color: #555666;
+ line-height: 20px;
+ font-weight: 600;
+ text-align: center;
+ }
+
+ span {
+ display: block;
+ }
+ }
+</style>
diff --git a/src/components/layouts/box4-minibox.vue b/src/components/layouts/box4-minibox.vue
new file mode 100644
index 0000000..628178e
--- /dev/null
+++ b/src/components/layouts/box4-minibox.vue
@@ -0,0 +1,79 @@
+<template>
+ <div class="blog-container ">
+ <div>
+ <span class="blog-right-side-portion-title " v-bind:class="{'title-remark':isShowRemark}" >{{title}}</span>
+ </div>
+ <div class="blog-scroll show-line ">
+ <div class="blog-right-side-meta " v-for="item in list">
+ <div>
+ <a href="#"> <span class="blog-display-hide-content">{{item.name}}</span></a>
+ </div>
+ </div>
+ </div>
+ </div>
+
+</template>
+
+<script>
+ export default {
+ props: {
+ title: "",
+ list: "",
+ isShowRemark:false
+ },
+ data() {
+ return {
+
+ }
+ }
+ }
+</script>
+
+</script>
+
+<style lang="less">
+ /*右边的部分*/
+
+ .blog-right-side-portion-title {
+ display: block;
+ font-size: 15px;
+ padding-bottom: 8px;
+
+ }
+
+ span.title-remark::after {
+ content: "(按字母索引)";
+ color: #999;
+ font-size: 10px;
+ }
+
+ .blog-right-side-meta span {
+ /*word-break: keep-all;*/
+ /*word-wrap: break-word;*/
+ color: #999;
+ font-size: 13px;
+ line-height: 17px;
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+
+ white-space: nowrap;
+ /* normal文本换行*/
+
+ word-break: keep-all;
+ // transition-property: background-color;
+ // transition-duration: .2s;
+ // transition-timing-function: ease-in-out;
+ // transition-delay: 0s;
+ }
+
+ div .blog-right-side-meta a span:hover {
+ background: #262a30;;
+ color: #fff;
+ white-space: normal;
+ word-break: break-word;
+ /*可以换行 white-space CSS 属性是用来设置如何处理元素中的空白。*/
+ height: 20%;
+ z-index: 600;
+ }
+</style>
diff --git a/src/components/layouts/box5-article.vue b/src/components/layouts/box5-article.vue
new file mode 100644
index 0000000..cc2365e
--- /dev/null
+++ b/src/components/layouts/box5-article.vue
@@ -0,0 +1,223 @@
+<template>
+ <div class="blog-article">
+ <!-- <div class="index-post-img">
+ <a href="#">
+ <div class="item-thumb lazy"
+ style="background-image: url(https://image.ishelo.com/usr/themes/handsome/assets/img/sj/5.jpg)">
+ </div>
+ </a>
+ </div> -->
+
+ <div class="article-meta">
+ <h2 class="article-title"><a href="#">陈奕迅-Body Song 歌词</a></h2>
+ <div class="article-split-line"></div>
+ <div class="article-summary blog-scroll">
+ <p>Baby Song - 陈奕迅 (Eason Chan)</p>
+ <p>词：岑宁儿</p>
+ <p>曲：岑宁儿</p>
+ <p>你的眼睛 像颗水晶通透</p>
+ <p>里面有一个无穷无尽的宇宙</p>
+ <p>小小的你 在你小小的梦里</p>
+ <p>把我所有大大的事情都吹进风里</p>
+ <p>我为我将对你撒的谎先跟你道歉</p>
+ <p>当你发现黑白不是那么的分明</p>
+ <p>世界不是那么的公平</p>
+ <p>别太失望 我讲的是个梦想</p>
+ <p>不用太听我们的话</p>
+ <p>不要让任何人告诉你</p>
+ <p>你该怎样对待世界</p>
+ <p>或它该怎对你</p>
+ <p>要跟现在一样随心</p>
+ <p>让你的眼睛和心依然纯净</p>
+ <p>可惜世界不及你好</p>
+ <p>原谅我们 我们都还在找</p>
+ <p>而时间它只负责流动</p>
+ <p>不负责 育你成长</p>
+ <p>不过你只需要倾听</p>
+ <p>倾听你的心</p>
+ <p>你的眼睛 像颗水晶通透</p>
+ <p>里面有一个无穷无尽的宇宙</p>
+ <p>小小的你 在你小小的梦里</p>
+ <p>把我所有大大的事情都吹进风里</p>
+ <p>都吹进风里</p>
+ <p>-</p>
+ </div>
+ <div class="article-split-line"></div>
+ <div class="article-message-info ">
+ <ul>
+ <li>
+ <a-icon type="read" />
+ <!-- <a-icon type="eye" /> -->
+ <span> 101</span>
+ </li>
+ <li>
+ <a-icon type="like" />
+ <span> 233</span>
+
+ </li>
+ <li>
+ <a-icon type="folder-open" />
+ <span> 歌词</span>
+ </li>
+ <li>
+ <a-icon type="clock-circle" />
+ <span> 2020-05-26 18:00:00</span>
+ </li>
+ </ul>
+ </div>
+ <div class="article-split-line"></div>
+ <div class="article-read-btn">
+ <router-link class="btn" to="/box1">阅读全文 »</router-link>
+ </div>
+ </div>
+
+ </div>
+
+</template>
+
+<script>
+ export default {
+ props: {
+ title: "",
+ list: ""
+ },
+ data() {
+ return {
+
+ }
+ }
+ }
+</script>
+
+</script>
+
+<style lang="less">
+ /*文章部分*/
+ .blog-article {
+ margin-top: 10px;
+ margin-bottom: 20px;
+ border-radius: 15px;
+ border: none;
+ /*box-shadow: 1px 1px 5px 5px rgba(17, 150, 196, 0.35);*/
+ }
+
+ .article-meta {
+ padding: 30px 30px 10px;
+ background-color: white;
+ border-radius: 15px;
+ }
+
+ .article-title {
+ color: #555;
+ font-size: 14px;
+ line-height: 14px;
+ padding-bottom: 15px;
+ margin-top: 0 !important;
+ display: block;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ text-align: center;
+ }
+
+ .article-split-line {
+ width: 100%;
+ height: 2px;
+ overflow: hidden;
+ font-size: 0;
+ margin-top: 8px;
+ margin-bottom: 8px;
+ border-color: rgba(237, 241, 242, .6);
+
+ border-bottom: 1px solid rgba(222, 229, 231, .45);
+ display: block
+ }
+
+ .article-message-info {
+ text-align: center;
+
+ li {
+ display: inline-block;
+ padding-right: 5px;
+ padding-left: 5px;
+
+ span {
+ padding-left: 0px;
+ }
+ }
+ }
+
+
+ .article-summary {
+ max-height: 200px;
+ overflow: hidden;
+
+ p {
+ line-height: 17px;
+ font-size: 10px;
+ }
+ }
+
+ .article-summary p {
+ text-align: center;
+ }
+
+ .article-read-btn {
+ text-align: center;
+ display: block;
+ }
+
+ .btn {
+ display: inline-block;
+ padding: 0 20px;
+ color: #555;
+ background: #fff;
+ border: 2px solid #555;
+ text-decoration: none;
+ border-radius: 2px;
+
+ line-height: 2;
+ font-size: 14px;
+ overflow-wrap: break-word;
+ word-wrap: break-word;
+ cursor: pointer;
+
+ transition-property: background-color;
+ transition-duration: .2s;
+ transition-timing-function: ease-in-out;
+ transition-delay: 0s;
+ }
+
+ .btn:hover {
+ background: #262a30;
+ color: #fff;
+ }
+
+ /*文章图片部分*/
+ .item-thumb {
+ min-height: 250px;
+ position: relative;
+ display: block;
+ background-position: 50% 50%;
+ background-size: cover;
+ border-radius: 15px;
+ }
+
+ .item-thumb {
+ cursor: pointer;
+ transition: all 0.6s;
+ }
+
+ .item-thumb:hover {
+ transform: scale(1.05);
+ }
+
+ .item-thumb-small {
+ cursor: pointer;
+ transition: all 0.6s;
+ }
+
+ .item-thumb-small:hover {
+ transform: scale(1.05);
+ }
+</style>
diff --git a/src/components/layouts/box6-articleList.vue b/src/components/layouts/box6-articleList.vue
new file mode 100644
index 0000000..1ca1a00
--- /dev/null
+++ b/src/components/layouts/box6-articleList.vue
@@ -0,0 +1,27 @@
+<template>
+ <div>
+ <box5></box5>
+ <box5></box5>
+ <a-pagination showQuickJumper :default-current="current" :defaultPageSize="pageSize" :total="total" />
+ </div>
+</template>
+
+<script>
+ import box5 from "./box5-article.vue"
+ export default {
+ components: {
+ box5
+ },
+ data() {
+ return {
+ total: 500,
+ pageSize: 20,
+ current: 4,
+ }
+ },
+
+ }
+</script>
+
+<style>
+</style>
diff --git a/src/components/layouts/boxLeft.vue b/src/components/layouts/boxLeft.vue
index e580da8..5308fc0 100644
--- a/src/components/layouts/boxLeft.vue
+++ b/src/components/layouts/boxLeft.vue
@@ -13,9 +13,9 @@
</template>
<script>
- import box1 from "./box1.vue"
- import box2 from "./box2.vue"
- import box3 from "./box3.vue"
+ import box1 from "./box1-info.vue"
+ import box2 from "./box2-class.vue"
+ import box3 from "./box3-archive.vue"
export default {
components: {
box1,
diff --git a/src/components/layouts/boxRight.vue b/src/components/layouts/boxRight.vue
index 1c03bcf..e8d9b9e 100644
--- a/src/components/layouts/boxRight.vue
+++ b/src/components/layouts/boxRight.vue
@@ -19,7 +19,7 @@
</template>
<script>
- import box4 from "./box4.vue"
+ import box4 from "./box4-minibox.vue"
export default {
components: {
box4,
@@ -56,6 +56,7 @@
},
vo3: {
title: "友情链接",
+ isShowRemark:true,
list: [{
name: "inleft.com",
}, {
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;
}
diff --git a/src/components/layouts/main1-show.vue b/src/components/layouts/main1-show.vue
new file mode 100644
index 0000000..788f72f
--- /dev/null
+++ b/src/components/layouts/main1-show.vue
@@ -0,0 +1,172 @@
+<template>
+ <div class="blog-main">
+ <a-row>
+ <a-col v-bind="colApiLeft">
+ <boxLeft></boxLeft>
+ </a-col>
+ <a-col v-bind="colApiMain ">
+ <router-view></router-view>
+ </a-col>
+ <a-col v-bind="colApiRight">
+ <boxRight></boxRight>
+ </a-col>
+ </a-row>
+ </div>
+</template>
+
+<script>
+ import boxLeft from "./boxLeft.vue"
+ import boxRight from "./boxRight.vue"
+ import box6 from "./box6-articleList.vue"
+ export default {
+ components: {
+ boxLeft,
+ boxRight,
+ box6
+ },
+
+ data() {
+ return {
+ 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">
+ .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;
+ box-shadow: 1px 1px 1px 2px #1196c459
+ }
+
+ .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;
+ }
+</style>
diff --git a/src/components/layouts/main2-show.vue b/src/components/layouts/main2-show.vue
new file mode 100644
index 0000000..14f1fda
--- /dev/null
+++ b/src/components/layouts/main2-show.vue
@@ -0,0 +1,174 @@
+<template>
+ <div class="blog-main">
+ <a-row>
+ <a-col v-bind="colApiLeft">
+ <boxLeft></boxLeft>
+ </a-col>
+ <a-col v-bind="colApiMain ">
+ <boxLeft></boxLeft>
+ </a-col>
+ <a-col v-bind="colApiRight">
+ <boxLeft></boxLeft>
+ </a-col>
+ </a-row>
+ </div>
+</template>
+
+<script>
+ import boxLeft from "./boxLeft.vue"
+ import boxRight from "./boxRight.vue"
+ import box6 from "./box6-articleList.vue"
+ export default {
+ components: {
+ boxLeft,
+ boxRight,
+ box6
+ },
+
+ data() {
+ return {
+ 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">
+ .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;
+ box-shadow: 1px 1px 1px 2px #1196c459
+ }
+
+ .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;
+ }
+</style>
diff --git a/src/components/layouts/tag-header.vue b/src/components/layouts/tag-header.vue
new file mode 100644
index 0000000..15ac349
--- /dev/null
+++ b/src/components/layouts/tag-header.vue
@@ -0,0 +1,114 @@
+<template>
+ <div>
+ <a-row type="flex" justify="start">
+ <a-col v-bind="showSmall">
+ <router-link class="btn" to="/main1">Home »</router-link>
+ </a-col>
+ <a-col v-bind="showSmall">
+ <router-link class="btn" to="/main1">Home2 »</router-link>
+ </a-col>
+ <a-col v-bind="showSmall">
+ <router-link class="btn" to="/main2">我的信息 »</router-link>
+ </a-col>
+ <a-col v-bind="showMain">
+ <a-auto-complete v-bind="search" @select="onSelect" @search="onSearch" @change="onChange">
+ <a-input>
+ <a-icon slot="suffix" type="search" class="certain-category-icon" />
+ </a-input>
+ </a-auto-complete>
+ </a-col>
+ <a-col v-bind="showMain">
+ <router-link class="btn" to="/main2">我的信息 »</router-link>
+ </a-col>
+ </a-row>
+ </div>
+
+</template>
+
+<script>
+ export default {
+
+ data() {
+ return {
+ search: {
+ placeholder: "全局搜索..",
+ allowClear: true,
+ // autoFocus: true,
+ backfill: true,
+ dataSource: [],
+ },
+ showSmall: {
+ xs: 6,
+ sm: 6,
+ md: 6,
+ lg: 6,
+ xl: 6,
+ xxl: 6,
+ },
+ showMain: {
+ xs: 0,
+ sm: 0,
+ md: 2,
+ lg: 2,
+ xl: 2,
+ xxl: 2,
+ }
+ }
+
+ },
+ watch: {
+ value(val) {
+ console.log('值:', val);
+ },
+ },
+ methods: {
+ onSearch(searchText) {
+ this.dataSource = !searchText ? [] : [searchText, searchText.repeat(2), searchText.repeat(3)];
+ console.log("补全..");
+ },
+ onSelect(value) {
+ console.log('回车', value);
+ },
+ onChange(value) {
+ console.log('修改', value);
+ },
+ keyListener(value) {
+ console.log('ref', this.$refs.mySearch);
+ console.log('键盘', value);
+ },
+ },
+ }
+</script>
+
+</script>
+
+<style lang="less">
+ /*头像部分*/
+ .blog-avatar {
+ border-radius: 15px;
+ background-color: white;
+
+ img {
+ width: 60px;
+ height: auto;
+ border-radius: 50%;
+ display: block;
+ margin: 10px auto 10px;
+ padding-top: 10px;
+ }
+ }
+
+ /* 一言 */
+ .blog-user-message {
+ text-align: center;
+ font-size: 15px;
+ color: #555;
+ padding-top: 10px;
+ padding-bottom: 10px;
+
+ span {
+ display: block;
+ padding-bottom: 5px;
+ }
+ }
+</style>
diff --git a/src/config/router.config.js b/src/config/router.config.js
index 47a5f1b..48f57b5 100644
--- a/src/config/router.config.js
+++ b/src/config/router.config.js
@@ -1,43 +1,61 @@
-import BasicLayout from '../layouts/BasicLayout.vue'
import main from '../components/layouts/main.vue'
+import main1 from '../components/layouts/main1-show.vue'
+import main2 from '../components/layouts/main2-show.vue'
+import box6 from '../components/layouts/box6-articleList.vue'
+import box1 from '../components/layouts/box1-info.vue'
+import box2 from '../components/layouts/box2-class.vue'
export const asyncRouterMap = [{
- path: '/',
- component: main,
- meta: {
- title: "在你左边,听风及雨"
- },
+ path: '*',
+ // redirect: '/404',
+ component: () => import( /* webpackChunkName: "fail" */ '@/views/exception/404'),
+ hidden: true
},
{
- path: '/home',
- name: 'BasicLayout.vue',
- component: BasicLayout,
- meta: {
- title: '在你左边,听风及雨'
- },
- children: [
+ path: '/',
+ component: main,
+ children: [{
+ path: '/',
+ component: main1,
+ children: [{
+ path: '/',
+ component: box6,
+ },
+ {
+ path: '/box1',
+ component: box1,
+ }
+ ]
+ },
+ {
+ path: '/main1',
+ component: main1,
+ children: [{
+ path: '/',
+ component: box6,
+ }]
+ },
+ {
+ path: '/main2',
+ component: main2,
+
+ },
]
},
- {
- path: '*',
- redirect: '/404',
- hidden: true
- }
+
+
]
+
/**
* 基础路由
* @type { *[] }
*/
-export const constantRouterMap = [
-
-
- {
+export const constantRouterMap = [{
path: '/404',
component: () => import( /* webpackChunkName: "fail" */ '@/views/exception/404')
}
]
-
--
Gitblit v1.9.1