Skip to content

Commit

Permalink
feat(help): add mqtt ebook download link
Browse files Browse the repository at this point in the history
  • Loading branch information
ysfscream authored and Red-Asuka committed May 31, 2023
1 parent 802ea60 commit 3adde01
Show file tree
Hide file tree
Showing 2 changed files with 54 additions and 2 deletions.
28 changes: 27 additions & 1 deletion src/views/help/index.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,24 @@
<template>
<div class="help-view rightbar">
<h1 class="titlebar">{{ $t('help.helpMQTT') }}</h1>
<div class="help-view-header">
<h1 class="titlebar">{{ $t('help.helpMQTT') }}</h1>
<el-tooltip
v-if="getterLang === 'zh'"
placement="bottom"
:effect="theme !== 'light' ? 'light' : 'dark'"
content="2023 MQTT 协议入门教程"
>
<a
target="_blank"
rel="noopener noreferrer"
class="ebook-link"
href="https://www.emqx.com/zh/resources/beginners-guide-to-the-mqtt-protocol?utm_source=mqttx&utm_medium=referral&utm_campaign=mqttx-to-mqtt-ebook-zh"
>
下载 MQTT 电子书
<span>→</span>
</a>
</el-tooltip>
</div>
<section class="help-top">
<div v-for="item in helpTop" :key="item.icon" class="card" @click="goToLink(item.link)">
<img :src="require(`@/assets/images/help/${item.icon}.png`)" :alt="item.icon" width="24" height="24" />
Expand Down Expand Up @@ -246,6 +264,14 @@ export default class Help extends Vue {
> section:not(:last-child) {
margin-bottom: 64px;
}
.help-view-header {
display: flex;
justify-content: space-between;
align-items: center;
.ebook-link {
display: block;
}
}
.help-top {
display: grid;
grid-template-columns: repeat(3, 1fr);
Expand Down
28 changes: 27 additions & 1 deletion web/src/views/help/index.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,24 @@
<template>
<div class="help-view rightbar">
<h1 class="titlebar">{{ $t('help.helpMQTT') }}</h1>
<div class="help-view-header">
<h1 class="titlebar">{{ $t('help.helpMQTT') }}</h1>
<el-tooltip
v-if="getterLang === 'zh'"
placement="bottom"
:effect="theme !== 'light' ? 'light' : 'dark'"
content="2023 MQTT 协议入门教程"
>
<a
target="_blank"
rel="noopener noreferrer"
class="ebook-link"
href="https://www.emqx.com/zh/resources/beginners-guide-to-the-mqtt-protocol?utm_source=mqttx&utm_medium=referral&utm_campaign=mqttx-to-mqtt-ebook-zh"
>
下载 MQTT 电子书
<span>→</span>
</a>
</el-tooltip>
</div>
<section class="help-top">
<div v-for="item in helpTop" :key="item.icon" class="card" @click="goToLink(item.link)">
<img :src="require(`@/assets/images/help/${item.icon}.png`)" :alt="item.icon" width="24" height="24" />
Expand Down Expand Up @@ -246,6 +264,14 @@ export default class Help extends Vue {
> section:not(:last-child) {
margin-bottom: 64px;
}
.help-view-header {
display: flex;
justify-content: space-between;
align-items: center;
.ebook-link {
display: block;
}
}
.help-top {
display: grid;
grid-template-columns: repeat(3, 1fr);
Expand Down

0 comments on commit 3adde01

Please sign in to comment.