layouts/shortcodes/blocks/demo-zh.html (213 lines of code) (raw):
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>商城 Demo</title>
<style>
.overview-demo-section {
padding: 0px;
margin-top: 64px;
background-color: #F4F4F6;
}
.container-demo {
width: 100%;
height: 240px;
background-image: url('https://img.alicdn.com/imgextra/i4/O1CN0142n9L01PpfYFAXEM8_!!6000000001890-0-tps-2880-600.jpg');
background-size: cover;
display: flex;
justify-content: center;
padding: 24px;
@media only screen and (min-width: 768px) {
padding: 0px;
height: 300px;
}
}
.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: 36px;
font-weight: bold;
line-height: 56px;
letter-spacing: -0.01em;
color: #121316;
margin-bottom: 28px;
@media only screen and (min-width: 768px) {
font-size: 56px;
}
}
.demo-des-mall {
font-size: 14px;
font-weight: normal;
line-height: 24px;
@media only screen and (min-width: 768px) {
font-size: 16px;
}
}
.demo-container-middle {
width: 100%;
padding: 24px;
display: flex;
justify-content: center;
@media only screen and (min-width: 768px) {
padding: 0px;
}
}
.demo-subject {
width: 100%;
margin-top: 20px;
margin-bottom: 20px;
display: inline-block;
@media only screen and (min-width: 768px) {
width: 100%;
display: flex;
justify-content: center;
margin-top: 122px;
margin-bottom: 141px;
}
@media only screen and (min-width: 1100px) {
width: 1016px;
}
}
.demo-subject-left,
.demo-subject-right {
width: 100%;
background-color: #FFFFFF;
border-radius: 32px;
padding: 24px;
@media only screen and (min-width: 768px) {
width: 500px;
}
}
.demo-subject-left {
margin-bottom: 16px;
height: 714px;
@media only screen and (min-width: 768px) {
margin-right: 16px;
margin-bottom: 0px;
}
}
.demo-subject-right {
height: 600px;
@media only screen and (min-width: 768px) {
height: 714px;
}
}
.demo-subject-left>*>label {
font-size: 14px;
line-height: 16px;
margin-bottom: 12px;
color: #2E3038;
}
.demo-subject-left>*>input {
width: 100%;
height: 48px;
border-radius: 24px;
background-color: #F4F4F6;
border: none;
padding-left: 30px;
@media only screen and (min-width: 768px) {
width: 452px;
}
}
.demo-subject-left-title,
.demo-subject-right-des {
font-size: 16px;
font-weight: normal;
line-height: 24px;
letter-spacing: 0em;
margin-bottom: 20px;
}
.demo-subject-right-des>a {
color: #724DE9;
}
.demoSize-radio>input {
display: none;
}
.demoSize-radio-btn {
width: 95px;
height: 48px;
border-radius: 24px;
color: #A3A6B3;
font-size: 16px;
padding: 10px 22px;
background-color: #F4F4F6;
cursor: pointer;
@media only screen and (min-width: 768px) {
width: 140px;
padding: 10px 44px;
}
}
.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: 100%;
height: 48px;
border-radius: 24px;
background: #724DE9;
border: none;
color: #F4F4F6;
font-size: 14px;
@media only screen and (min-width: 768px) {
width: 452px;
}
}
.demo-subject-right-img {
width: 100%;
height: 432px;
margin-left: 0px;
background-image: url('https://img.alicdn.com/imgextra/i1/O1CN01MjbeAM1DdVeB0Uymn_!!6000000000239-2-tps-886-1207.png');
background-size: cover;
border: 2px dashed #D8D8D8;
@media only screen and (min-width: 768px) {
width: 402px;
margin-left: 26px;
background-size: cover;
height: 557px;
}
}
</style>
</head>
<body>
<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">我们提供了一套功能完备的使用 Dubbo 开发的电子商城系统，商城系统由 11 个微服务应用组成，底层使用 triple rpc 协议通信，用户可通过 frontend web 服务访问商城进行浏览、购物车、下单等体验。</div>
</div>
</div>
<div class="demo-container-middle">
<div class="demo-subject">
<div class="demo-subject-right">
<div class="demo-subject-right-des">您可以访问 <a href="https://demo.dubbo.apache.org/">demo.dubbo.apache.org</a> 在线体验我们已经部署好的商城，如您想了解源码与实现细节可以跳转 github 查看源码，我们提供了 <a href="https://github.com/apache/dubbo-samples/tree/master/online_bontique_demo">Java</a> 和 <a href="https://github.com/apache/dubbo-go-samples/tree/main/online_boutique_demo">Go</a> 两种语言的源码实现。</div>
<div class="demo-subject-right-img"></div>
</div>
</div>
</div>
</section>
</body>
</html>