|
@@ -103,10 +103,6 @@
|
|
|
<div class="mb-join-left">
|
|
<div class="mb-join-left">
|
|
|
<h3>立即加入 安全之旅</h3>
|
|
<h3>立即加入 安全之旅</h3>
|
|
|
<div class="mb-join-subtitle">完成注册,即可免费体验 DDoS防护、CC防护、DNS解析等多款安全产品</div>
|
|
<div class="mb-join-subtitle">完成注册,即可免费体验 DDoS防护、CC防护、DNS解析等多款安全产品</div>
|
|
|
- <div class="mb-join-btn">
|
|
|
|
|
- <span>去完成注册</span>
|
|
|
|
|
- <Icon name="material-symbols:arrow-forward-rounded" />
|
|
|
|
|
- </div>
|
|
|
|
|
</div>
|
|
</div>
|
|
|
<img class="mb-join-img" src="~/assets/svg/home/aq.svg" alt="安全之旅" />
|
|
<img class="mb-join-img" src="~/assets/svg/home/aq.svg" alt="安全之旅" />
|
|
|
</div>
|
|
</div>
|
|
@@ -260,7 +256,7 @@ import StatsSection from '~/components/mobile/home/StatsSection.vue';
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
gap: 16px;
|
|
gap: 16px;
|
|
|
margin-top: 24px;
|
|
margin-top: 24px;
|
|
|
- padding-bottom: 60px;
|
|
|
|
|
|
|
+ padding-bottom: 48px;
|
|
|
width: 100%;
|
|
width: 100%;
|
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
|
|
|
|
|
@@ -337,58 +333,36 @@ import StatsSection from '~/components/mobile/home/StatsSection.vue';
|
|
|
|
|
|
|
|
.mb-join-container {
|
|
.mb-join-container {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
- flex-direction: column;
|
|
|
|
|
|
|
+ flex-direction: row;
|
|
|
|
|
+ justify-content: space-between;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
- width: 90%;
|
|
|
|
|
- margin-top: 60px;
|
|
|
|
|
- padding: 32px 20px;
|
|
|
|
|
- border-radius: 24px;
|
|
|
|
|
- background: linear-gradient(180deg, rgba(163, 157, 255, 0.1) 0%, rgba(125, 70, 255, 0.05) 100%);
|
|
|
|
|
- border: 1px solid rgba(163, 157, 255, 0.2);
|
|
|
|
|
- text-align: center;
|
|
|
|
|
|
|
+ width: calc(100% - 32px);
|
|
|
|
|
+ margin-top: 48px;
|
|
|
|
|
+ text-align: left;
|
|
|
|
|
+ gap: 20px;
|
|
|
|
|
|
|
|
.mb-join-left {
|
|
.mb-join-left {
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+
|
|
|
h3 {
|
|
h3 {
|
|
|
color: #FFF;
|
|
color: #FFF;
|
|
|
- font-size: 24px;
|
|
|
|
|
- font-weight: 500;
|
|
|
|
|
- line-height: 32px;
|
|
|
|
|
|
|
+ font-size: 16px;
|
|
|
|
|
+ font-weight: 400;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.mb-join-subtitle {
|
|
.mb-join-subtitle {
|
|
|
- margin-top: 16px;
|
|
|
|
|
- margin-bottom: 24px;
|
|
|
|
|
- color: #A39DFF;
|
|
|
|
|
- font-size: 14px;
|
|
|
|
|
|
|
+ margin-top: 12px;
|
|
|
|
|
+ margin-bottom: 20px;
|
|
|
|
|
+ color: rgba(255, 255, 255, 0.80);
|
|
|
|
|
+ font-size: 12px;
|
|
|
font-weight: 400;
|
|
font-weight: 400;
|
|
|
- line-height: 22px;
|
|
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
- .mb-join-btn {
|
|
|
|
|
- display: flex;
|
|
|
|
|
- width: 100%;
|
|
|
|
|
- max-width: 240px;
|
|
|
|
|
- height: 48px;
|
|
|
|
|
- margin: 0 auto;
|
|
|
|
|
- justify-content: center;
|
|
|
|
|
- align-items: center;
|
|
|
|
|
- gap: 8px;
|
|
|
|
|
- border-radius: 24px;
|
|
|
|
|
- background: linear-gradient(91deg, #A39DFF 1.24%, #7D46FF 122.93%);
|
|
|
|
|
- cursor: pointer;
|
|
|
|
|
-
|
|
|
|
|
- span {
|
|
|
|
|
- color: #FFF;
|
|
|
|
|
- font-size: 16px;
|
|
|
|
|
- font-weight: 500;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
.mb-join-img {
|
|
.mb-join-img {
|
|
|
- width: 80%;
|
|
|
|
|
- max-width: 240px;
|
|
|
|
|
- margin-top: 32px;
|
|
|
|
|
|
|
+ width: 130px;
|
|
|
|
|
+ height: auto;
|
|
|
|
|
+ margin-top: 0;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|