优化升级
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html lang="zh-CN">
|
||||
<!-- 引入头部 -->
|
||||
<header th:replace="~{./public/header :: header}"></header>
|
||||
|
||||
@@ -10,16 +10,13 @@
|
||||
background: #fff;
|
||||
color: #333;
|
||||
position: relative;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.ew-banner:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ew-banner p {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.ew-banner img.shape {
|
||||
-webkit-animation-duration: 5s;
|
||||
animation-duration: 5s;
|
||||
@@ -29,38 +26,116 @@
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* ========== Hero 布局 ========== */
|
||||
.xm-hero {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 460px;
|
||||
padding: 80px 0 100px;
|
||||
}
|
||||
.xm-hero-text {
|
||||
flex: 1;
|
||||
z-index: 2;
|
||||
max-width: 600px;
|
||||
text-align: left;
|
||||
}
|
||||
.xm-hero-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
background: #165DFF;
|
||||
color: #fff;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
padding: 5px 18px;
|
||||
border-radius: 20px;
|
||||
margin-bottom: 24px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.xm-hero-badge .layui-icon {
|
||||
font-size: 14px;
|
||||
}
|
||||
.xm-hero-title {
|
||||
font-size: 42px;
|
||||
font-weight: 700;
|
||||
color: #0b1a33;
|
||||
line-height: 1.3;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.xm-hero-desc {
|
||||
font-size: 16px;
|
||||
color: #5a6a85;
|
||||
line-height: 1.8;
|
||||
margin-bottom: 36px;
|
||||
}
|
||||
.xm-hero-actions {
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
align-items: center;
|
||||
}
|
||||
.xm-hero-btn {
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
padding: 0 28px;
|
||||
font-size: 15px;
|
||||
border-radius: 6px;
|
||||
background-color: #165DFF !important;
|
||||
border: none;
|
||||
}
|
||||
.xm-hero-visual {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
z-index: 1;
|
||||
}
|
||||
.xm-hero-visual .shape-main {
|
||||
width: 520px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
img.shape-main {
|
||||
width: 90% !important;
|
||||
max-width: 370px !important;
|
||||
right: 15px !important;
|
||||
top: 30px !important;
|
||||
.xm-hero {
|
||||
flex-direction: column;
|
||||
padding: 50px 0 60px;
|
||||
min-height: auto;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.ew-banner > .layui-container {
|
||||
padding-top: 320px;
|
||||
padding-bottom: 20px !important;
|
||||
padding-right: 20px !important;
|
||||
.xm-hero-text {
|
||||
max-width: 100%;
|
||||
}
|
||||
.xm-hero-title {
|
||||
font-size: 26px;
|
||||
}
|
||||
.xm-hero-title br {
|
||||
display: none;
|
||||
}
|
||||
.xm-hero-desc {
|
||||
font-size: 14px;
|
||||
}
|
||||
.xm-hero-desc br {
|
||||
display: none;
|
||||
}
|
||||
.xm-hero-visual {
|
||||
margin-top: 30px;
|
||||
}
|
||||
.xm-hero-visual .shape-main {
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
img.shape6 {
|
||||
top: 510px !important;
|
||||
}
|
||||
|
||||
img.shape4 {
|
||||
left: 5px !important;
|
||||
bottom: 300px !important;
|
||||
}
|
||||
|
||||
.layui-logo > img {
|
||||
top: 12px !important;
|
||||
}
|
||||
|
||||
.ew-footer .img-group {
|
||||
padding-left: 100px !important;
|
||||
height: 103px !important;
|
||||
}
|
||||
|
||||
.ew-footer .img-group > img {
|
||||
width: 90px !important;
|
||||
height: 90px !important;
|
||||
@@ -295,19 +370,20 @@
|
||||
<div th:replace="~{./public/common_header::common_header}"></div>
|
||||
|
||||
<!-- banner -->
|
||||
<div class="ew-banner" style="margin-top: 15px;">
|
||||
<div class="layui-container" style="text-align: left;padding-bottom: 80px;padding-left: 30px;">
|
||||
<h1 style="margin-top: 25px;">小蚂蚁云企业级中台解决方案</h1>
|
||||
<p style="margin-bottom: 10px;">基于 Python 语言的企业级Web应用敏捷开发框架。</p>
|
||||
<p>为企业、政府及开发者提供从架构到部署的应用平台解决方案；</p>
|
||||
<div class="ew-banner-btngroup" style="margin-top: 40px;">
|
||||
<button class="layui-btn" nav-scroll="pricing">获取授权<i class="layui-icon" style="transform: rotate(-90deg);"></i>
|
||||
</button>
|
||||
<a href="/doc/" class="layui-btn" target="_blank" style="display: none;">更新日志<i
|
||||
class="layui-icon"></i></a>
|
||||
<div class="ew-banner">
|
||||
<div class="layui-container xm-hero">
|
||||
<div class="xm-hero-text">
|
||||
<div class="xm-hero-badge"><i class="layui-icon layui-icon-diamond"></i> 企业级中台解决方案</div>
|
||||
<h1 class="xm-hero-title">构建高安全、高效率、<br>易扩展的数据中台基座</h1>
|
||||
<p class="xm-hero-desc">基于 Python 生态与 Vue3 技术栈，集成精细化权限管控、高效代码生成、全端自适应等企业级能力，<br>赋能企业数字化转型，加速业务价值交付。</p>
|
||||
<div class="xm-hero-actions">
|
||||
<button class="layui-btn xm-hero-btn" nav-scroll="pricing">获取授权 <i class="layui-icon" style="transform: rotate(-90deg);"></i></button>
|
||||
<!-- <button class="layui-btn xm-hero-btn" nav-scroll="pricing">查看价格 <i class="layui-icon" style="transform: rotate(-90deg);"></i></button>-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="xm-hero-visual">
|
||||
<img class="shape-main" th:src="@{/static/assets/images/b1.png}" />
|
||||
</div>
|
||||
<img class="shape-main" th:src="@{/static/assets/images/b1.png}"
|
||||
style="width: 520px;position: absolute;top:5px;right: -60px;"/>
|
||||
<img class="shape layui-anim-rotate layui-anim-loop" th:src="@{/static/assets/images/shape1.png}"
|
||||
style="position: absolute;right: -120px;top: 260px;"/>
|
||||
<img class="shape layui-anim-rotate layui-anim-loop" th:src="@{/static/assets/images/shape2.png}"
|
||||
|
||||
Reference in New Issue
Block a user