Skip to content

Commit

Permalink
feat:demo&&footer静态页面
Browse files Browse the repository at this point in the history
  • Loading branch information
zhangmengjiao committed Sep 2, 2024
1 parent 4dc5cef commit 1523344
Show file tree
Hide file tree
Showing 6 changed files with 536 additions and 51 deletions.
2 changes: 1 addition & 1 deletion assets/scss/_case-studies.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ h2 {
}

body footer {
background-color: #585858 !important;
background-color: #F4F4F6 !important;
}

.section1 {
Expand Down
5 changes: 5 additions & 0 deletions content/en/overview/demo/_index.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
title: "Demo"
layout: "shortcodes/blocks/demo"
---
{{< blocks/demo-en >}}
5 changes: 5 additions & 0 deletions content/zh-cn/overview/demo/_index.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
title: "Demo"
layout: "shortcodes/blocks/demo"
---
{{< blocks/demo-zh >}}
148 changes: 98 additions & 50 deletions layouts/partials/footer.html
View file
Original file line number Diff line number Diff line change
@@ -1,60 +1,108 @@
{{ $links := .Site.Params.links }}
<footer class="bg-dark py-5 row d-print-none footer-margin-0">
<div class="container-fluid mx-sm-5">
<div class="row">
<div class="col-6 col-sm-4 text-xs-center order-sm-2">
{{ with $links }}
{{ with index . "user"}}
{{ template "footer-links-block" . }}
{{ end }}
{{ end }}
</div>
<div class="col-6 col-sm-4 text-right text-xs-center order-sm-3">
{{ with $links }}
{{ with index . "developer"}}
{{ template "footer-links-block" . }}
{{ end }}
{{ end }}
<footer>

<div class="footer-container">
<div class="footer-container-left">
<div style="font-size: 28px;line-height: 36px;color: #2E3038;margin-bottom: 16px;">关注我们</div>
<div style="font-size: 16px;line-height: 24px;color: #A3A6B3;margin-bottom: 96px">
请通过以下任一或多个渠道关注社区动态，与社区开发者保持密切沟通。
</div>
<div class="col-12 col-sm-4 text-center py-2 order-sm-2">
{{ with .Site.Params.copyright }}<small class="text-white">&copy; {{ now.Year}} {{ .}} {{ T "footer_all_rights_reserved" }}</small>{{ end }}
{{ with .Site.Params.privacy_policy }}<small class="ml-1"><a href="{{ . }}" target="_blank">{{ T "footer_privacy_policy" }}</a></small>{{ end }}
{{ if not .Site.Params.ui.footer_about_disable }}
{{ with .Site.GetPage "about" }}<p class="mt-2"><a href="{{ .RelPermalink }}">{{ .Title }}</a></p>{{ end }}
{{ end }}
<div>
<button class="contact-btn">微信</button>
<button class="contact-btn">钉钉</button>
<button class="contact-btn">GITHUB</button>
</div>
</div>
<div class="footer-container-right">
<ul>
<li>文档</li>
<li><a href="/zh-cn/overview/home/">概览</a></li>
<li>快速开始</li>
<li>开发者指南</li>
</ul>
<ul>
<li>资源</li>
<li>社区</li>
</ul>
</div>
</div>
</footer>

<div class="row pt-2 pb-2 footer-margin-0">
<div class="container-fluid mx-sm-5">
<div class="text-center" id="my-footer">
<img alt="apache_logo" src="/imgs/apache_logo.png"/>
<ul>
<li><a href="https://www.apache.org">Foundation</a></li>
<li><a href="https://www.apache.org/licenses/">License</a></li>
<li><a href="https://dubbo.apache.org/en/overview/notices/">Security</a></li>
<li><a href="https://www.apache.org/events/current-event">Events</a></li>
<li><a href="https://www.apache.org/foundation/sponsorship.html">Sponsorship</a></li>
<li><a href="https://privacy.apache.org/policies/privacy-policy-public.html">Privacy</a></li>
<li><a href="https://www.apache.org/foundation/thanks.html">Thanks</a></li>
</ul>
<div style="width:85.125rem;height:0px;border: 1px solid #DDDEE4;margin-bottom: 32px;"></div>
<div class="footer-registration">
© 2024 The Apache Software Foundation. Apache Dubbo, Dubbo, Apache, the Apache feather logo, and the Apache Dubbo
project logo are either registered trademarks or trademarks of The Apache Software Foundation in the United States
and other countries. 保留所有权利
</div>
</div>
</div>
</footer>



<style>
footer {
display: flex;
align-items: center;
flex-direction: column;
}

.footer-container {
background-color: #EBECEF;
width: 85.125rem;
height: 289px;
border-radius: 16px;
padding-left: 40px;
padding-top: 36px;
padding-bottom: 36px;
display: flex;
margin-bottom: 40px;
}

.footer-container-left {
width: 672px;
}

.contact-btn {
width: 100px;
height: 40px;
border-radius: 24px;
background: #F4F4F6;
font-size: 12px;
font-weight: 500;
line-height: 16px;
color: #818598;
border: none;
margin-right: 22px;
}

.footer-container-right {
display: flex;
margin-left: 154px;
}

{{ define "footer-links-block" }}
<ul class="list-inline mb-0">
{{ range . }}
<li class="list-inline-item mx-2 h3" data-toggle="tooltip" data-placement="top" title="{{ .name }}" aria-label="{{ .name }}">
<a class="text-white" target="_blank" rel="noopener noreferrer" href="{{ .url }}">
<i class="{{ .icon }}"></i>
</a>
</li>
{{ end }}
</ul>
{{ end }}
.footer-container-right>ul {
list-style-type: none;
margin-right: 100px;
}

.footer-container-right ul li {
font-size: 14px;
font-weight: normal;
line-height: 20px;
color: #2E3038;
margin-bottom: 16px;
}

.footer-container-right ul li:first-child {
color: #A3A6B3;
font-size: 12px;
line-height: 16px;
margin-bottom: 49px;
}

.footer-registration {
width: 920px;
font-size: 14px;
line-height: 24px;
text-align: center;
color: #A3A6B3;
margin-bottom: 32px;
}
</style>
212 changes: 212 additions & 0 deletions layouts/shortcodes/blocks/demo-en.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,212 @@
<section class="overview-demo-section">
<div class="container-demo">
<div class="container-demo-title">
<div class="demo-title-mall">DEMO</div>
<div class="demo-des-mall">We provide a fully functional e-commerce mall system developed using Dubbo. The mall system consists of 11 microservice applications. The underlying layer uses triple rpc protocol for communication. Users can access the mall through the frontend web service for browsing, shopping cart, ordering, etc.</div>
</div>
</div>
<div class="demo-container-middle">
<div class="demo-subject">
<div class="demo-subject-left">
<div class="demo-subject-left-title">You can also register your personal information here and contact the community engineer, and we will send you the complete sample source code by email :</div>
<div class="mb-4">
<label for="demoCompany" class="form-label">Company Name</label>
<input type="company" class="form-control" id="demoCompany" placeholder="Alibaba" autocomplete="off" >
</div>
<div class="mb-4">
<label for="demoName" class="form-label">First Name</label>
<input type="name" class="form-control" id="demoName" placeholder="John.doe" autocomplete="off">
</div>
<div class="mb-4">
<label for="demoEmail" class="form-label">Email</label>
<input type="email" class="form-control" id="demoEmail" placeholder="john.doe@alibaba.com" autocomplete="off">
</div>
<div class="mb-4">
<label for="demoPosition" class="form-label">Job Title</label>
<input type="position" class="form-control" id="demoPosition" placeholder="软件工程师" autocomplete="off">
</div>
<div class="mb-4">
<label for="demoSize" class="form-label">Company Size</label>
<div class="demoSize-radio">
<input type="radio" class="btn-check" name="options-outlined" id="demoSize1" autocomplete="off" checked>
<label class="demoSize-radio-btn" for="demoSize1">1-100</label>

<input type="radio" class="btn-check" name="options-outlined" id="demoSize2" autocomplete="off">
<label class="demoSize-radio-btn" for="demoSize2">101-2k</label>

<input type="radio" class="btn-check" name="options-outlined" id="demoSize3" autocomplete="off">
<label class="demoSize-radio-btn" for="demoSize3">2k+</label>

</div>
</div>
<button class="demo-form-submit-btn">Submit</button>
</div>
<div class="demo-subject-right">
<div class="demo-subject-right-des">You can visit xxx.com to experience the online mall we have deployed. If you want to know the source code and implementation details, you can jump to github to view the source code. We provide source code implementation in Java and Go.</div>
<div class="demo-subject-right-img"></div>
</div>
</div>
</div>

<div class="demo-footer"></div>
</section>
<style>
.overview-demo-section {
padding: 0px;
margin-top: 64px;
background-color: #F4F4F6;
}

.container-demo {
width: 100%;
height: 300px;
background-image: url('https://img.alicdn.com/imgextra/i4/O1CN0142n9L01PpfYFAXEM8_!!6000000001890-0-tps-2880-600.jpg');
background-size: cover;
display: flex;
justify-content: center;
}

.container-demo-title {
display: flex;
flex-direction: column;
width: 100%;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;

@media only screen and (min-width: 768px) {
width: 100%;
padding-top: 68px;
padding-bottom: 100px;
}

@media only screen and (min-width: 1100px) {
width: 1016px;
}
}

.demo-title-mall {
font-size: 56px;
font-weight: bold;
line-height: 56px;
letter-spacing: -0.01em;
color: #121316;
margin-bottom: 28px;
}

.demo-des-mall {
font-size: 16px;
font-weight: normal;
line-height: 24px;
}

.demo-container-middle {
width: 100%;
display: flex;
justify-content: center;
}

.demo-subject {
width: 100%;
margin-top: 122px;
margin-bottom: 141px;
display: flex;
justify-content: center;

@media only screen and (min-width: 768px) {
width: 100%;
}

@media only screen and (min-width: 1100px) {
width: 1016px;
}

}

.demo-subject-left,
.demo-subject-right {
width: 500px;
height: 714px;
background-color: #FFFFFF;
border-radius: 32px;
padding: 24px;
}

.demo-subject-left {
margin-right: 16px;
}

.demo-subject-left>*>label {
font-size: 14px;
line-height: 16px;
margin-bottom: 12px;
color: #2E3038;
}

.demo-subject-left>*>input {
width: 452px;
height: 48px;
border-radius: 24px;
background-color: #F4F4F6;
border: none;
padding-left: 30px;
}

.demo-subject-left-title,
.demo-subject-right-des {
font-size: 16px;
font-weight: normal;
line-height: 24px;
letter-spacing: 0em;
margin-bottom: 30px;
}

.demoSize-radio>input {
display: none;
}

.demoSize-radio-btn {
width: 140px;
height: 48px;
border-radius: 24px;
color: #A3A6B3;
font-size: 16px;
padding: 10px 44px;
background-color: #F4F4F6;
cursor: pointer;
}

.demoSize-radio-btn:nth-child(2),
.demoSize-radio-btn:nth-child(4) {
margin-right: 10px;
}

/* 当radio被选中时，背景色变为黑色 */
.btn-check:checked+.demoSize-radio-btn {
background-color: black;
}

/* 选中时字体颜色变为白色 */
.btn-check:checked+.demoSize-radio-btn {
color: #F4F4F6;
}

.demo-form-submit-btn {
width: 452px;
height: 48px;
border-radius: 24px;
background: #724DE9;
border: none;
color: #F4F4F6;
font-size: 14px;
}

.demo-subject-right-img {
width: 402px;
height: 557px;
margin-left: 26px;
background-image: url('https://img.alicdn.com/imgextra/i1/O1CN01MjbeAM1DdVeB0Uymn_!!6000000000239-2-tps-886-1207.png');
background-size: cover;
border: 2px dashed #D8D8D8;
}
</style>
Loading

0 comments on commit 1523344

Please sign in to comment.