layouts/shortcodes/blocks/demo-en.html (213 lines of code) (raw):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Store 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: 760px;
}
}
.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">Store DEMO</div>
<div class="demo-des-mall">We provide a fully functional e-commerce system developed using Dubbo. The e-commerce system consists of 11 microservice applications, communicating via the triple RPC protocol. Users can access the store through the frontend web service to browse, use the shopping cart, and place orders.</div>
</div>
</div>
<div class="demo-container-middle">
<div class="demo-subject">
<div class="demo-subject-right">
<div class="demo-subject-right-des">You can visit <a href="https://demo.dubbo.apache.org/">demo.dubbo.apache.org</a> to experience the store we've deployed online. If you'd like to learn more about the source code and implementation details, you can visit GitHub to view the source code. We provide implementations in both <a href="https://github.com/apache/dubbo-samples/tree/master/online_bontique_demo">Java</a> and <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>