You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@linkis.apache.org by pe...@apache.org on 2021/10/28 12:07:55 UTC
[incubator-linkis-website] 26/50: ADD: 增加博客列表页
This is an automated email from the ASF dual-hosted git repository.
peacewong pushed a commit to branch asf-staging
in repository https://gitbox.apache.org/repos/asf/incubator-linkis-website.git
commit e911adb6f0b982049bfd9acfe4284e28d3975a1a
Author: lucaszhu <lu...@webank.com>
AuthorDate: Wed Oct 13 16:40:23 2021 +0800
ADD: 增加博客列表页
---
src/pages/{blog.vue => blog/event.vue} | 28 -------------------
src/pages/blog/index.vue | 38 ++++++++++++++++++++++++++
src/pages/home.vue | 24 ----------------
src/router.js | 7 ++++-
src/style/base.less | 50 +++++++++++++++++++++++++++++++++-
5 files changed, 93 insertions(+), 54 deletions(-)
diff --git a/src/pages/blog.vue b/src/pages/blog/event.vue
similarity index 71%
rename from src/pages/blog.vue
rename to src/pages/blog/event.vue
index f8e3934..6de9d72 100644
--- a/src/pages/blog.vue
+++ b/src/pages/blog/event.vue
@@ -14,34 +14,6 @@
</div>
</div>
</template>
-<style lang="less" scoped>
- .blog-ctn {
- padding-top: 60px;
- padding-bottom: 80px;
-
- .blog-title {
- font-size: 24px;
- }
-
- .blog-info{
- display: flex;
- padding: 20px 0;
- font-size: 16px;
- color: rgba(15,18,34,0.45);
- &.seperator{
- .info-item{
- border-right: 1px solid rgba(15,18,34,0.45);
- &:last-child{
- border-right: 0;
- }
- }
- }
- .info-item{
- padding: 0 20px 0 28px;
- }
- }
- }
-</style>
<script setup>
const docs = [{
title: '部署文档',
diff --git a/src/pages/blog/index.vue b/src/pages/blog/index.vue
new file mode 100644
index 0000000..072887c
--- /dev/null
+++ b/src/pages/blog/index.vue
@@ -0,0 +1,38 @@
+<template>
+ <div class="ctn-block reading-area blog-ctn">
+ <main class="main-content">
+ <ul class="blog-list">
+ <li class="blog-item">
+ <h1 class="blog-title">Born at China’s WeBank, now incubating in the ASF - Introducing Apache Linkis</h1>
+ <div class="blog-info">
+ <span class="info-item">enjoyyin</span>
+ <span class="info-item sperator">|</span>
+ <span class="info-item">2021-9-2</span>
+ </div>
+ <p class="blog-preview">Guangsheng Chen, the founder of Apache EventMesh, has been buzzing since the project was welcomed into the Apache Software Foundation (ASF)’s incubator in February 2021. There’s a growing community supporting work on the open source software — used to decouple the application</p>
+ <div class="blog-info seperator"><span class="info-item">5 min read</span><span class="info-item">tag</span></div>
+ <router-link to="/blog/event" class="corner-botton blue">Read More</router-link>
+ </li>
+ </ul>
+ </main>
+ </div>
+</template>
+<style lang="less" scoped>
+ .blog-ctn {
+ .blog-item{
+ position: relative;
+ padding: 30px;
+ margin-bottom: 20px;
+ background: rgba(15,18,34,0.03);
+ border-radius: 8px;
+ .blog-preview{
+ text-align: justify;
+ }
+ .corner-botton{
+ position: absolute;
+ right: 30px;
+ bottom: 30px;
+ }
+ }
+ }
+</style>
\ No newline at end of file
diff --git a/src/pages/home.vue b/src/pages/home.vue
index 88bb72b..bc76c61 100644
--- a/src/pages/home.vue
+++ b/src/pages/home.vue
@@ -284,30 +284,6 @@
&.center{
justify-content: center;
}
- .corner-botton{
- margin-right: 22px;
- padding: 0 40px;
- height: 46px;
- line-height: 46px;
- border-radius: 25px;
- &:last-child{
- margin-right: 0;
- }
- &.black{
- color: #fff;
- background: @enhance-color;
- border: 1px solid @enhance-color;
- }
- &.white{
- color: @enhance-color;
- background: #fff;
- border: 1px solid @enhance-color;
- }
- &.blue{
- color: #1A529C;
- border: 1px solid #1A529C;
- }
- }
}
}
</style>
diff --git a/src/router.js b/src/router.js
index b6d97a0..a803698 100644
--- a/src/router.js
+++ b/src/router.js
@@ -74,7 +74,12 @@ const routes = [{
{
path: '/blog',
name: 'blog',
- component: () => import( /* webpackChunkName: "group-blog" */ './pages/blog.vue')
+ component: () => import( /* webpackChunkName: "group-blog" */ './pages/blog/index.vue')
+ },
+ {
+ path: '/blog/event',
+ name: 'blogEvent',
+ component: () => import( /* webpackChunkName: "group-blog" */ './pages/blog/event.vue')
},
{
path: '/team',
diff --git a/src/style/base.less b/src/style/base.less
index 2a815af..1db54d5 100644
--- a/src/style/base.less
+++ b/src/style/base.less
@@ -76,4 +76,52 @@ a:visited {
}
}
}
-}
\ No newline at end of file
+}
+
+.blog-ctn {
+ padding-top: 60px;
+ padding-bottom: 80px;
+
+ .blog-title {
+ font-size: 24px;
+ }
+
+ .blog-info{
+ display: flex;
+ align-items: center;
+ padding: 20px 0;
+ font-size: 16px;
+ color: rgba(15,18,34,0.45);
+ .info-item{
+ padding: 0 10px 0 28px;
+ &.sperator{
+ padding: 0 10px;
+ }
+ }
+ }
+}
+
+.corner-botton{
+ margin-right: 22px;
+ padding: 0 40px;
+ height: 46px;
+ line-height: 46px;
+ border-radius: 25px;
+ &:last-child{
+ margin-right: 0;
+ }
+ &.black{
+ color: #fff;
+ background: @enhance-color;
+ border: 1px solid @enhance-color;
+ }
+ &.white{
+ color: @enhance-color;
+ background: #fff;
+ border: 1px solid @enhance-color;
+ }
+ &.blue{
+ color: #1A529C;
+ border: 1px solid #1A529C;
+ }
+}
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@linkis.apache.org
For additional commands, e-mail: commits-help@linkis.apache.org