Skip to content

Commit 3783cca

Browse files
author
zhaojingjing
committed
feat(all): add banner swiper
1 parent 619cc02 commit 3783cca

File tree

6 files changed

+112
-43
lines changed

6 files changed

+112
-43
lines changed

‎docs/.vuepress/enhanceApp.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,15 @@ import VueSelect from "vue-select";
33
import "vue-select/src/scss/vue-select.scss";
44
import Pagination from "vue-pagination-2";
55
import VTooltip from "v-tooltip";
6+
import VueAwesomeSwiper from 'vue-awesome-swiper'
7+
import 'swiper/css/swiper.css'
68

79
export default ({ Vue, options, router, siteData }) => {
810
Vue.use(VueNotification);
911
Vue.use(VTooltip);
1012
Vue.component("v-select", VueSelect);
1113
Vue.component("v-pagination", Pagination);
14+
Vue.use(VueAwesomeSwiper)
1215
Vue.extend({
1316
mixins: [
1417
{

‎docs/.vuepress/theme/components/Home/BannerCard.vue

Lines changed: 68 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,77 @@
11
<template>
2-
<div class="docs-banner">
3-
<div class="docs-banner-card">
4-
<h1>{{ title }}</h1>
5-
<p>{{ text }}</p>
6-
<authing-button class="button" @click="check">
7-
{{ btnText }}
8-
</authing-button>
9-
</div>
10-
<img
11-
class="docs-banner-img"
12-
:src="require(`@theme/assets/images/banner-img.svg`)"
13-
alt=""
14-
/>
15-
</div>
2+
<swiper ref="mySwiper" :options="swiperOptions" :pagination="{ clickable: true }">
3+
<swiper-slide v-for="(item, index) in banners" :key="index" class="docs-banner" :style="{backgroundImage: `url(${item.background})`}">
4+
<div class="docs-banner-card">
5+
<h1>{{ item.title }}</h1>
6+
<p>{{ item.text }}</p>
7+
<authing-button class="button" @click="check(item)">
8+
{{ item.btnText }}
9+
</authing-button>
10+
</div>
11+
<img
12+
class="docs-banner-img"
13+
:src="item.icon"
14+
alt=""
15+
/>
16+
</swiper-slide>
17+
<div class="swiper-pagination banner-swiper-pagination" slot="pagination"></div>
18+
</swiper>
1619
</template>
1720
<script>
1821
import AuthingButton from "@theme/components/AuthingButton/index.vue";
22+
import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
1923
export default {
2024
props: {
21-
title: {
22-
type: String,
23-
default: "",
24-
},
25-
text: {
26-
type: String,
27-
default: "",
28-
},
29-
url: {
30-
type: String,
31-
default: "",
32-
},
33-
btnText: {
34-
type: String,
35-
default: "",
36-
},
25+
banners: {
26+
type: Array,
27+
default: []
28+
}
3729
},
3830
components: {
3931
AuthingButton,
32+
Swiper,
33+
SwiperSlide
4034
},
41-
methods: {
42-
check() {
43-
window.location.href = this.url;
35+
directives: {
36+
swiper: directive
37+
},
38+
data() {
39+
return {
40+
swiperOptions: {
41+
loop: true,
42+
autoplay: true,
43+
speed: 600,
44+
// delay: 6000,
45+
pagination: {
46+
el: '.swiper-pagination',
47+
clickable: true,
48+
},
49+
}
50+
}
51+
},
52+
computed: {
53+
swiper() {
54+
return this.$refs.mySwiper.$swiper;
4455
},
4556
},
57+
methods: {
58+
check(item) {
59+
if (item.open) {
60+
window.open(item.url);
61+
} else {
62+
window.location.href = item.url;
63+
}
64+
}
65+
},
4666
};
4767
</script>
48-
<style lang="scss" scoped>
68+
<style lang="scss">
4969
$color: #215ae5;
5070
.docs-banner {
5171
background-color: $color;
5272
border-radius: 4px;
5373
color: #ffffff;
5474
display: flex;
55-
background-image: url(../../assets/images/banner-bg.png);
5675
background-repeat: no-repeat;
5776
background-size: auto 100%;
5877
&-card {
@@ -64,6 +83,7 @@ $color: #215ae5;
6483
margin: 0;
6584
line-height: 22px;
6685
font-size: 14px;
86+
min-height: 44px;
6787
}
6888
.button {
6989
margin-top: 24px;
@@ -78,6 +98,19 @@ $color: #215ae5;
7898
}
7999
}
80100
101+
.banner-swiper-pagination {
102+
span {
103+
width: 6px;
104+
height: 6px;
105+
background-color: #ffffff;
106+
opacity: 1;
107+
}
108+
.swiper-pagination-bullet-active {
109+
width: 20px;
110+
border-radius: 7px;
111+
}
112+
}
113+
81114
@media (max-width: 1000px) {
82115
.docs-banner-card {
83116
padding-left: 20px;

‎docs/.vuepress/theme/components/Home/index.vue

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,7 @@
1616
>
1717
<template v-if="data.banner">
1818
<banner-card
19-
:title="data.banner.title"
20-
:text="data.banner.text"
21-
:url="data.banner.url"
22-
:btnText="data.banner.btnText"
19+
:banners="data.banner"
2320
/>
2421
</template>
2522
<h1 class="home-title">

‎docs/README.md

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,19 @@ searchPlaceholder: 请输入关键词搜索产品文档
77
hotSearchText: 热门搜索
88
exploreUse: 探索使用 {{$localeConfig.brandName}}
99
banner:
10-
title: Authing API/SDK V3 正式上线！
11-
text: Authing API/SDK V3 上新，提供 HTTP API、以及 10 余种不同语言和框架的 SDK，5 分钟即可灵活构建安全、稳定的认证流程！
12-
url: https://docs.authing.cn/v3
13-
btnText: 查看文档
10+
- title: Authing API/SDK V3 正式上线！
11+
text: Authing API/SDK V3 上新，提供 HTTP API、以及 10 余种不同语言和框架的 SDK，5 分钟即可灵活构建安全、稳定的认证流程！
12+
url: https://docs.authing.cn/v3
13+
btnText: 查看文档
14+
icon: https://files.authing.co/authing-docs-v2/images/common/banner-icon.svg
15+
background: https://files.authing.co/authing-docs-v2/images/common/banner-bg.png
16+
- title: Authing API Explorer 正式上线！
17+
text: Authing API Explorer 全新上线，为开发者提供在线调试中心，高效满足开发者的 API 调试、API 学习等相关需求。
18+
url: https://api-explorer.authing.cn
19+
btnText: 前往查看
20+
icon: https://files.authing.co/authing-docs-v2/images/common/banner-icon-2.svg
21+
background: https://files.authing.co/authing-docs-v2/images/common/banner-bg-2.png
22+
open: true
1423
hotSearch:
1524
- text: 如何对用户进行认证
1625
link: /guides/authentication/

‎package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,9 @@
2727
"dayjs": "^1.10.4",
2828
"markdown-it-include": "^2.0.0",
2929
"node-sass": "npm:dart-sass@^1.25.0",
30+
"swiper": "5",
3031
"v-tooltip": "^2.1.3",
32+
"vue-awesome-swiper": "4",
3133
"vue-notification": "^1.3.20",
3234
"vue-pagination-2": "^3.0.8",
3335
"vue-select": "^3.11.2",

‎yarn.lock

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3342,6 +3342,13 @@ dom-walk@^0.1.0:
33423342
resolved "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.2.tgz"
33433343
integrity sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w==
33443344

3345+
dom7@^2.1.5:
3346+
version "2.1.5"
3347+
resolved "https://registry.npmmirror.com/dom7/-/dom7-2.1.5.tgz#a79411017800b31d8400070cdaebbfc92c1f6377"
3348+
integrity sha512-xnhwVgyOh3eD++/XGtH+5qBwYTgCm0aW91GFgPJ3XG+jlsRLyJivnbP0QmUBFhI+Oaz9FV0s7cxgXHezwOEBYA==
3349+
dependencies:
3350+
ssr-window "^2.0.0"
3351+
33453352
domain-browser@^1.1.1:
33463353
version "1.2.0"
33473354
resolved "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz"
@@ -7641,6 +7648,11 @@ sshpk@^1.7.0:
76417648
safer-buffer "^2.0.2"
76427649
tweetnacl "~0.14.0"
76437650

7651+
ssr-window@^2.0.0:
7652+
version "2.0.0"
7653+
resolved "https://registry.npmmirror.com/ssr-window/-/ssr-window-2.0.0.tgz#98c301aef99523317f8d69618f0010791096efc4"
7654+
integrity sha512-NXzN+/HPObKAx191H3zKlYomE5WrVIkoCB5IaSdvKokxTpjBdWfr0RaP+1Z5KOfDT0ZVz+2tdtiBkhsEQ9p+0A==
7655+
76447656
ssri@^6.0.1:
76457657
version "6.0.2"
76467658
resolved "https://registry.npmjs.org/ssri/-/ssri-6.0.2.tgz"
@@ -7888,6 +7900,14 @@ svgo@^1.0.0:
78887900
unquote "~1.1.1"
78897901
util.promisify "~1.0.0"
78907902

7903+
swiper@5:
7904+
version "5.4.5"
7905+
resolved "https://registry.npmmirror.com/swiper/-/swiper-5.4.5.tgz#a350f654bf68426dbb651793824925512d223c0f"
7906+
integrity sha512-7QjA0XpdOmiMoClfaZ2lYN6ICHcMm72LXiY+NF4fQLFidigameaofvpjEEiTQuw3xm5eksG5hzkaRsjQX57vtA==
7907+
dependencies:
7908+
dom7 "^2.1.5"
7909+
ssr-window "^2.0.0"
7910+
78917911
tapable@^1.0.0, tapable@^1.1.3:
78927912
version "1.1.3"
78937913
resolved "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz"
@@ -8380,6 +8400,11 @@ vm-browserify@^1.0.1:
83808400
resolved "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz"
83818401
integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==
83828402

8403+
vue-awesome-swiper@4:
8404+
version "4.1.1"
8405+
resolved "https://registry.npmmirror.com/vue-awesome-swiper/-/vue-awesome-swiper-4.1.1.tgz#8f7ab221ad003021d756b86aa618f429924900fe"
8406+
integrity sha512-50um10t6N+lJaORkpwSi1wWuMmBI1sgFc9Znsi5oUykw2cO5DzLaBHcO2JNX21R+Ue4TGoIJDhhxjBHtkFrTEQ==
8407+
83838408
vue-hot-reload-api@^2.3.0:
83848409
version "2.3.4"
83858410
resolved "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz"

0 commit comments

Comments
 (0)