881 lines
39 KiB
HTML
881 lines
39 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<!-- 引入头部 -->
|
||
<head th:replace="~{./public/header :: header}"></head>
|
||
|
||
<style>
|
||
.ew-banner {
|
||
max-width: 100vw;
|
||
overflow: hidden;
|
||
background: #fff;
|
||
color: #333;
|
||
position: relative;
|
||
margin-top: 15px;
|
||
}
|
||
|
||
.ew-banner:before {
|
||
display: none;
|
||
}
|
||
|
||
.ew-banner img.shape {
|
||
-webkit-animation-duration: 5s;
|
||
animation-duration: 5s;
|
||
}
|
||
|
||
.ew-banner img {
|
||
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) {
|
||
.xm-hero {
|
||
flex-direction: column;
|
||
padding: 50px 0 60px;
|
||
min-height: auto;
|
||
align-items: flex-start;
|
||
}
|
||
.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;
|
||
top: 7px !important;
|
||
}
|
||
}
|
||
|
||
/* ========== 全部产品板块 ========== */
|
||
.xm-product-section {
|
||
padding-bottom: 60px;
|
||
}
|
||
.xm-product-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||
gap: 28px;
|
||
}
|
||
.xm-product-card {
|
||
background: #ffffff;
|
||
border-radius: 16px;
|
||
box-shadow: 0 4px 20px rgba(0, 20, 50, 0.05);
|
||
transition: all 0.3s ease;
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
border: 1px solid #f0f3fa;
|
||
position: relative;
|
||
}
|
||
.xm-product-card:hover {
|
||
transform: translateY(-6px);
|
||
box-shadow: 0 16px 32px rgba(0, 20, 50, 0.10);
|
||
border-color: #d9e2f0;
|
||
}
|
||
/* 右上角标签 */
|
||
.xm-card-badge {
|
||
position: absolute;
|
||
top: 14px;
|
||
right: 14px;
|
||
z-index: 5;
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
padding: 3px 14px;
|
||
border-radius: 40px;
|
||
letter-spacing: 0.5px;
|
||
color: #fff;
|
||
backdrop-filter: blur(2px);
|
||
border: 1px solid rgba(255,255,255,0.3);
|
||
text-transform: uppercase;
|
||
line-height: 1.6;
|
||
}
|
||
.xm-badge-hot { background: #ff6b4a; box-shadow: 0 3px 10px rgba(255,107,74,0.3); }
|
||
.xm-badge-new { background: #2a7de1; box-shadow: 0 3px 10px rgba(42,125,225,0.3); }
|
||
.xm-badge-flagship { background: #9b6bff; box-shadow: 0 3px 10px rgba(155,107,255,0.3); }
|
||
.xm-badge-recommend { background: #00b894; box-shadow: 0 3px 10px rgba(0,184,148,0.3); }
|
||
.xm-badge-vip { background: #f9a825; box-shadow: 0 3px 10px rgba(249,168,37,0.3); }
|
||
/* 卡片封面 */
|
||
.xm-card-image {
|
||
background: linear-gradient(145deg, #f0f5ff, #e6edf9);
|
||
padding: 24px 20px 14px;
|
||
text-align: center;
|
||
min-height: 140px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
border-bottom: 1px solid #ecf1f9;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.xm-card-image .xm-cover-img {
|
||
width: 100%;
|
||
height: 100%;
|
||
background-repeat: no-repeat;
|
||
background-position: center;
|
||
background-size: cover;
|
||
position: absolute;
|
||
top: 0; left: 0;
|
||
transition: transform 0.4s ease;
|
||
}
|
||
.xm-product-card:hover .xm-cover-img {
|
||
transform: scale(1.08);
|
||
}
|
||
.xm-card-image .xm-platform-icon {
|
||
font-size: 36px;
|
||
color: #1f3a6b;
|
||
opacity: 0.6;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
.xm-card-image .xm-product-type {
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
color: #1f3a6b;
|
||
background: rgba(255,255,255,0.8);
|
||
display: inline-block;
|
||
padding: 3px 16px;
|
||
border-radius: 40px;
|
||
backdrop-filter: blur(4px);
|
||
margin-top: 8px;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
/* 卡片内容 */
|
||
.xm-card-body {
|
||
padding: 18px 20px 16px;
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.xm-card-body .xm-product-title {
|
||
font-size: 17px;
|
||
font-weight: 600;
|
||
color: #0b1a33;
|
||
margin-bottom: 6px;
|
||
line-height: 1.3;
|
||
}
|
||
.xm-card-body .xm-product-sub {
|
||
font-size: 13px;
|
||
color: #65748c;
|
||
margin-bottom: 10px;
|
||
line-height: 1.5;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
flex-wrap: wrap;
|
||
}
|
||
.xm-card-body .xm-product-desc {
|
||
font-size: 13px;
|
||
color: #4a5a72;
|
||
line-height: 1.65;
|
||
margin-bottom: 14px;
|
||
flex: 1;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
}
|
||
/* 卡片底部 */
|
||
.xm-card-footer {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
border-top: 1px solid #eef2f8;
|
||
padding-top: 14px;
|
||
margin-top: 4px;
|
||
flex-wrap: wrap;
|
||
gap: 10px;
|
||
}
|
||
.xm-price {
|
||
font-size: 20px;
|
||
font-weight: 700;
|
||
color: #0b1a33;
|
||
}
|
||
.xm-price small {
|
||
font-size: 13px;
|
||
font-weight: 400;
|
||
color: #8b9ab5;
|
||
margin-left: 2px;
|
||
}
|
||
.xm-btn-group {
|
||
display: flex;
|
||
gap: 8px;
|
||
}
|
||
.xm-btn {
|
||
border: none;
|
||
background: transparent;
|
||
padding: 6px 14px;
|
||
border-radius: 40px;
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
text-decoration: none;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 5px;
|
||
}
|
||
.xm-btn-primary {
|
||
background: #1f3a6b;
|
||
color: #fff;
|
||
box-shadow: 0 3px 10px rgba(31,58,107,0.15);
|
||
}
|
||
.xm-btn-primary:hover {
|
||
background: #16305a;
|
||
box-shadow: 0 5px 14px rgba(31,58,107,0.25);
|
||
}
|
||
.xm-btn-outline {
|
||
background: transparent;
|
||
color: #1f3a6b;
|
||
border: 1px solid #d0dbea;
|
||
}
|
||
.xm-btn-outline:hover {
|
||
background: #f0f5ff;
|
||
border-color: #b0c4e0;
|
||
}
|
||
/* 响应式 */
|
||
@media (max-width: 768px) {
|
||
.xm-product-grid {
|
||
grid-template-columns: 1fr;
|
||
gap: 20px;
|
||
}
|
||
.xm-card-badge {
|
||
font-size: 10px;
|
||
padding: 2px 10px;
|
||
top: 10px;
|
||
right: 10px;
|
||
}
|
||
}
|
||
@media (max-width: 480px) {
|
||
.xm-card-footer {
|
||
flex-direction: column;
|
||
align-items: stretch;
|
||
}
|
||
.xm-btn-group {
|
||
justify-content: flex-end;
|
||
}
|
||
}
|
||
|
||
.layer-get-code > .lay-code-group > button {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
height: 46px;
|
||
width: 120px;
|
||
border: 1px solid rgba(111, 121, 122, 0.3);
|
||
box-sizing: border-box;
|
||
cursor: pointer;
|
||
}
|
||
</style>
|
||
|
||
<body>
|
||
<!-- header -->
|
||
<div th:replace="~{./public/common_header::common_header}"></div>
|
||
|
||
<!-- banner -->
|
||
<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 alt="DjangoAdmin 企业级中台解决方案" class="shape-main" th:src="@{/static/assets/images/b1.png}" />
|
||
</div>
|
||
<img alt="" aria-hidden="true" class="shape layui-anim-rotate layui-anim-loop" th:src="@{/static/assets/images/shape1.png}"
|
||
style="position: absolute;right: -120px;top: 260px;"/>
|
||
<img alt="" aria-hidden="true" class="shape layui-anim-rotate layui-anim-loop" th:src="@{/static/assets/images/shape2.png}"
|
||
style="position: absolute;right: 560px;top: 60px;"/>
|
||
<img alt="" aria-hidden="true" class="shape layui-anim-rotate layui-anim-loop" th:src="@{/static/assets/images/shape3.png}"
|
||
style="position: absolute;right: 10px;top: 30px;"/>
|
||
<img alt="" aria-hidden="true" class="shape shape4 layui-anim-rotate layui-anim-loop" th:src="@{/static/assets/images/shape4.png}"
|
||
style="position: absolute;left: -60px;bottom: 100px;"/>
|
||
<img alt="" aria-hidden="true" class="shape layui-anim-rotate layui-anim-loop" th:src="@{/static/assets/images/shape5.png}"
|
||
style="position: absolute;left: -120px;top: 100px;"/>
|
||
<img alt="" aria-hidden="true" class="shape shape6 layui-anim-rotate layui-anim-loop" th:src="@{/static/assets/images/shape6.png}"
|
||
style="position: absolute;left: 300px;top: 400px;"/>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- feature -->
|
||
<div class="section" style="padding-bottom: 15px;margin-top: 15px;">
|
||
<div class="section-title">
|
||
<h2>产品优势</h2>
|
||
<p>竭诚为用户提供全方位的解决方案</p>
|
||
</div>
|
||
<div class="layui-container">
|
||
<div class="layui-row">
|
||
<div class="layui-col-md4 layui-col-sm6">
|
||
<div class="feature">
|
||
<i class="layui-icon layui-icon-fonts-code"></i>
|
||
<h3>源码可控</h3>
|
||
<p>源码注释详细,便于阅读与二开</p>
|
||
<p>代码无后门,安全可信赖</p>
|
||
<p>提供标准化API接口,易于扩展</p>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-md4 layui-col-sm6">
|
||
<div class="feature">
|
||
<i class="layui-icon layui-icon-app"></i>
|
||
<h3>功能完善</h3>
|
||
<p>集成用户、权限、日志等20+基础模块</p>
|
||
<p>内置RBAC权限,精细化按钮级控制</p>
|
||
<p>配备代码生成器,一键生成CRUD模块</p>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-md4 layui-col-sm6">
|
||
<div class="feature">
|
||
<i class="layui-icon layui-icon-cellphone"></i>
|
||
<h3>多端适配</h3>
|
||
<p>响应式布局,自动适配不同屏幕尺寸</p>
|
||
<p>覆盖手机、平板、桌面电脑全终端</p>
|
||
<p>兼容Chrome、Firefox、Edge等浏览器</p>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-md4 layui-col-sm6">
|
||
<div class="feature">
|
||
<i class="layui-icon layui-icon-praise"></i>
|
||
<h3>上手容易</h3>
|
||
<p>完善的开发文档,快速完成部署</p>
|
||
<p>开箱即用,敏捷开发,降低编码成本</p>
|
||
<p>授权用户享1V1专属技术支持服务</p>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-md4 layui-col-sm6">
|
||
<div class="feature">
|
||
<i class="layui-icon layui-icon-rmb"></i>
|
||
<h3>灵活授权</h3>
|
||
<p>一年授权 / 永久授权可选,按需购买</p>
|
||
<p>授权期间版本持续免费升级</p>
|
||
<p>较同类产品节省70%+成本,性价比高</p>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-md4 layui-col-sm6">
|
||
<div class="feature">
|
||
<i class="layui-icon layui-icon-auz"></i>
|
||
<h3>售后保障</h3>
|
||
<p>5×8小时在线服务,问题及时响应</p>
|
||
<p>基于前沿技术栈,持续迭代升级</p>
|
||
<p>支持ElementPlus、AntDesign</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- pricing -->
|
||
<div class="section" nav-id="pricing">
|
||
<div class="section-title">
|
||
<h2>产品价格</h2>
|
||
<p>选择需要授权的产品</p>
|
||
</div>
|
||
<div class="layui-container" style="padding-bottom: 45px;">
|
||
<div class="layui-row layui-col-space30">
|
||
<div class="layui-row layui-col-space30">
|
||
<div th:each="item,itemStat:${productList}" th:if="${item['id'] != 1}" class="layui-col-sm4">
|
||
<div class="pricing">
|
||
<div class="price-title" th:text="${item['productTitle']}"></div>
|
||
<div class="price"><span class="small">¥</span>[[${item['discountPrice']}]]</div>
|
||
<div th:if="${item['id']==2}" class="desc">组件丰富,生态成熟稳定</div>
|
||
<div th:if="${item['id']==3}" class="desc">设计优雅,企业级首选</div>
|
||
<div th:if="${item['id']==4}" class="desc">轻量高效,更现代化</div>
|
||
<ul th:if="${item['id']==2}" class="price-content">
|
||
<li class="active">基于Vue3、TypeScript、Vite构建</li>
|
||
<li class="active">集成ElementPlus,组件全面覆盖</li>
|
||
<li class="active">源码注释详细,便于二次扩展</li>
|
||
<li>响应式布局,自适应全屏幕尺寸</li>
|
||
<li>可灵活配置颜色,自由切换主题</li>
|
||
<li>版本持续更新,集大众之所需</li>
|
||
<li>完善的开发文档,助你快速掌握</li>
|
||
<li>提供授权本地部署专属服务,随时提问</li>
|
||
</ul>
|
||
<ul th:if="${item['id']==3}" class="price-content">
|
||
<li class="active">基于Vue3、TypeScript、Vite构建</li>
|
||
<li class="active">集成AntDesign,专业级组件库</li>
|
||
<li class="active">源码注释详细,便于二次扩展</li>
|
||
<li>响应式布局,自适应全屏幕尺寸</li>
|
||
<li>可灵活配置颜色,自由切换主题</li>
|
||
<li>版本持续更新,集大众之所需</li>
|
||
<li>完善的开发文档,助你快速掌握</li>
|
||
<li>提供授权本地部署专属服务,随时提问</li>
|
||
</ul>
|
||
<ul th:if="${item['id']==4}" class="price-content">
|
||
<li class="active">基于Vue3、TypeScript、Vite构建</li>
|
||
<li class="active">集成NaiveUI,时尚现代设计</li>
|
||
<li class="active">源码注释详细,便于二次扩展</li>
|
||
<li>响应式布局,自适应全屏幕尺寸</li>
|
||
<li>可灵活配置颜色,自由切换主题</li>
|
||
<li>版本持续更新,集大众之所需</li>
|
||
<li>完善的开发文档,助你快速掌握</li>
|
||
<li>提供授权本地部署专属服务,随时提问</li>
|
||
</ul>
|
||
<div class="price-btn">
|
||
<a th:href="'/goods/detail/'+${item['id']}" class="layui-btn layui-btn-radius layui-btn-lg">选择此版本</a>
|
||
<a href="javascript:;" class="layui-btn layui-btn-radius layui-btn-lg" onclick="openConsultLayer()">立即咨询</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<blockquote class="layui-elem-quote layui-text" style="margin-top: 35px;">
|
||
付费授权是为了产品更好的发展,提供更好的服务和技术支持,禁止恶意分享产品源代码、二次转售等任何形式的泄露行为,<a href="/copyright">查看版权声明</a>。
|
||
</blockquote>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- guide -->
|
||
<div class="section" nav-id="guide">
|
||
<div class="section-title">
|
||
<h2>选择指南</h2>
|
||
<p>Product Selection Guide</p>
|
||
</div>
|
||
<div class="layui-container" style="padding-bottom: 85px;">
|
||
<div class="layui-row layui-col-space30">
|
||
<div th:each="item,itemStat:${productList}" th:if="${item['id'] != 1}" class="layui-col-md4">
|
||
<div class="guide">
|
||
<i th:if="${item['id']==2}" class="layui-icon layui-icon-template-1"></i>
|
||
<i th:if="${item['id']==3}" class="layui-icon layui-icon-component"></i>
|
||
<i th:if="${item['id']==4}" class="layui-icon layui-icon-diamond"></i>
|
||
<h3 th:text="${item['productTitle']}"></h3>
|
||
<p th:if="${item['id']==2}" class="text-left">  基于Vue3、TypeScript、Vite构建,UI组件库采用ElementPlus的企业级中台解决方案。后端采用Python语言,提供Django、Flask、FastAPI、Tornado四种框架版本可选,既支持传统同步服务,也可满足高性能异步及高并发场景需求。数据层支持MySQL、PostgreSQL、SqlServer、Oracle、Sqlite等多种数据库,并提供ORM统一接口,便于后续数据库迁移与扩展。采用前后端分离架构,后端提供标准化API接口,前端通过Axios完成数据请求与渲染,实现业务逻辑与用户界面完全解耦。内置RBAC权限管理体系,权限粒度精细化到按钮与方法层级,支持动态菜单配置与权限拦截,适配各类复杂企业权限场景。配备代码生成器引擎,支持自定义模板配置,可根据规范数据表结构一键生成模型、视图、控制器及前端页面的完整CRUD功能模块,极大提升开发效率。多端适配覆盖手机、平板、PC,栅格化布局配合深色与浅色主题自由切换机制,确保不同终端下的良好操作体验。提供完善的开发文档、源码注释及授权专属技术支持服务,为项目选型与落地提供全流程保障。</p>
|
||
<p th:if="${item['id']==3}" class="text-left">  基于Vue3、TypeScript、Vite构建,UI组件库采用AntDesign的企业级中台解决方案。后端采用Python语言,提供Django、Flask、FastAPI、Tornado四种框架版本可选,既支持传统同步服务,也可满足高性能异步及高并发场景需求。数据层支持MySQL、PostgreSQL、SqlServer、Oracle、Sqlite等多种数据库,并提供ORM统一接口,便于后续数据库迁移与扩展。采用前后端分离架构,后端提供标准化API接口,前端通过Axios完成数据请求与渲染,实现业务逻辑与用户界面完全解耦。内置RBAC权限管理体系,权限粒度精细化到按钮与方法层级,支持动态菜单配置与权限拦截,适配各类复杂企业权限场景。配备代码生成器引擎,支持自定义模板配置,可根据规范数据表结构一键生成模型、视图、控制器及前端页面的完整CRUD功能模块,极大提升开发效率。多端适配覆盖手机、平板、PC,栅格化布局配合深色与浅色主题自由切换机制,确保不同终端下的良好操作体验。提供完善的开发文档、源码注释及授权专属技术支持服务,为项目选型与落地提供全流程保障。</p>
|
||
<p th:if="${item['id']==4}" class="text-left">  基于Vue3、TypeScript、Vite构建,UI组件库采用NaiveUI的企业级中台解决方案。后端采用Python语言,提供Django、Flask、FastAPI、Tornado四种框架版本可选,既支持传统同步服务,也可满足高性能异步及高并发场景需求。数据层支持MySQL、PostgreSQL、SqlServer、Oracle、Sqlite等多种数据库,并提供ORM统一接口,便于后续数据库迁移与扩展。采用前后端分离架构,后端提供标准化API接口,前端通过Axios完成数据请求与渲染,实现业务逻辑与用户界面完全解耦。内置RBAC权限管理体系,权限粒度精细化到按钮与方法层级,支持动态菜单配置与权限拦截,适配各类复杂企业权限场景。配备代码生成器引擎,支持自定义模板配置,可根据规范数据表结构一键生成模型、视图、控制器及前端页面的完整CRUD功能模块,极大提升开发效率。多端适配覆盖手机、平板、PC,栅格化布局配合深色与浅色主题自由切换机制,确保不同终端下的良好操作体验。提供完善的开发文档、源码注释及授权专属技术支持服务,为项目选型与落地提供全流程保障。</p>
|
||
<a th:href="'/goods/detail/'+${item['id']}" class="layui-btn layui-btn-radius layui-btn-lg" target="_blank">产品详情</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- product -->
|
||
<div class="section xm-product-section" nav-id="product">
|
||
<div class="section-title">
|
||
<h2>全部产品</h2>
|
||
<p>All Our Products</p>
|
||
</div>
|
||
<div class="layui-container">
|
||
<div class="xm-product-grid">
|
||
<div th:each="item,itemStat:${productSkuList}" class="xm-product-card">
|
||
<!-- 右上角标签 -->
|
||
<span class="xm-card-badge xm-badge-hot" th:if="${#strings.contains(item['productTag'],'热门')}"><i class="layui-icon layui-icon-fire"></i> 热门</span>
|
||
<span class="xm-card-badge xm-badge-new" th:if="${#strings.contains(item['productTag'],'新品')}"><i class="layui-icon layui-icon-star"></i> 新品</span>
|
||
<span class="xm-card-badge xm-badge-flagship" th:if="${#strings.contains(item['productTag'],'旗舰')}"><i class="layui-icon layui-icon-diamond"></i> 旗舰</span>
|
||
<span class="xm-card-badge xm-badge-recommend" th:if="${#strings.contains(item['productTag'],'推荐')}"><i class="layui-icon layui-icon-praise"></i> 推荐</span>
|
||
<span class="xm-card-badge xm-badge-vip" th:if="${#strings.contains(item['productTag'],'经典')}"><i class="layui-icon layui-icon-auz"></i> 经典</span>
|
||
<!-- 封面区域 -->
|
||
<div class="xm-card-image">
|
||
<div class="xm-cover-img" th:style="'background-image: url('+${item['skuCover']}+')'"></div>
|
||
<div class="xm-platform-icon"><i class="layui-icon layui-icon-code-circle"></i></div>
|
||
<span class="xm-product-type" th:text="${item['skuAttribute']}"></span>
|
||
</div>
|
||
<!-- 内容区域 -->
|
||
<div class="xm-card-body">
|
||
<div class="xm-product-title" th:text="${item['productTitle']}"></div>
|
||
<div class="xm-product-sub">
|
||
<i class="layui-icon layui-icon-tag"></i>
|
||
<span th:text="${item['productTag']}"></span>
|
||
</div>
|
||
<div class="xm-product-desc" th:text="${item['productDesc']}"></div>
|
||
<div class="xm-card-footer">
|
||
<span class="xm-price">¥[[${item['discountPrice']}]]</span>
|
||
<div class="xm-btn-group">
|
||
<a th:href="${item['fileUrl']}" class="xm-btn xm-btn-outline" target="_blank"><i class="layui-icon layui-icon-play"></i> 演示</a>
|
||
<a th:href="'/goods/detail/'+${item['productId']}" class="xm-btn xm-btn-primary"><i class="layui-icon layui-icon-about"></i> 详情</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- faq -->
|
||
<div class="section" nav-id="faq">
|
||
<div class="section-title">
|
||
<h2>常见问题</h2>
|
||
<p>Frequently Asked Questions</p>
|
||
</div>
|
||
<div class="layui-container" style="padding-bottom: 60px;">
|
||
<div class="layui-row layui-col-space30 faq-row">
|
||
<div class="layui-col-md6 layui-col-sm12">
|
||
<div class="faq-item">
|
||
<h3>DjangoAdmin 是什么?</h3>
|
||
<p>DjangoAdmin 是小蚂蚁云研发团队打造的企业级后台管理系统与敏捷开发框架,前后端分离、开箱即用,帮助企业和开发者快速构建中大型后台应用。官方网站:www.djangoadmin.cn。</p>
|
||
<h3>支持哪些技术栈?</h3>
|
||
<p>后端基于 Python 生态,提供 Django、Flask、FastAPI、Tornado 四种框架版本;前端集成 Layui、ElementPlus、AntDesign、NaiveUI 等主流 UI 组件库,提供多版本可按需选择。</p>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-md6 layui-col-sm12">
|
||
<div class="faq-item">
|
||
<h3>源码从哪里获取?</h3>
|
||
<p>项目托管于 Gitee 与 GitHub 官方仓库(gitee.com/djangoadmin、github.com/djangoadmin),点击官网页脚仓库图标即可进入查看源码与更新动态。</p>
|
||
<h3>如何获取技术支持?</h3>
|
||
<p>可通过官网页脚的官方 QQ 客服、微信客服或邮箱 djangoadmin@126.com 联系我们,工作日提供一对一技术咨询。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script type="application/ld+json">
|
||
{
|
||
"@context": "https://schema.org",
|
||
"@type": "FAQPage",
|
||
"mainEntity": [
|
||
{
|
||
"@type": "Question",
|
||
"name": "DjangoAdmin 是什么?",
|
||
"acceptedAnswer": {
|
||
"@type": "Answer",
|
||
"text": "DjangoAdmin 是小蚂蚁云研发团队打造的企业级后台管理系统与敏捷开发框架,前后端分离、开箱即用,帮助企业和开发者快速构建中大型后台应用。官方网站:www.djangoadmin.cn。"
|
||
}
|
||
},
|
||
{
|
||
"@type": "Question",
|
||
"name": "DjangoAdmin 支持哪些技术栈?",
|
||
"acceptedAnswer": {
|
||
"@type": "Answer",
|
||
"text": "后端基于 Python 生态,提供 Django、Flask、FastAPI、Tornado 四种框架版本;前端集成 Layui、ElementPlus、AntDesign、NaiveUI 等主流 UI 组件库,提供多版本可按需选择。"
|
||
}
|
||
},
|
||
{
|
||
"@type": "Question",
|
||
"name": "DjangoAdmin 源码从哪里获取?",
|
||
"acceptedAnswer": {
|
||
"@type": "Answer",
|
||
"text": "项目托管于 Gitee 与 GitHub 官方仓库:gitee.com/djangoadmin 和 github.com/djangoadmin,官网页脚提供直达入口。"
|
||
}
|
||
},
|
||
{
|
||
"@type": "Question",
|
||
"name": "如何获取 DjangoAdmin 技术支持?",
|
||
"acceptedAnswer": {
|
||
"@type": "Answer",
|
||
"text": "可通过官网 www.djangoadmin.cn 页脚的官方 QQ 客服、微信客服或邮箱 djangoadmin@126.com 联系,工作日提供一对一技术咨询。"
|
||
}
|
||
}
|
||
]
|
||
}
|
||
</script>
|
||
|
||
<!-- contact -->
|
||
<div class="section">
|
||
<div class="section-title">
|
||
<h2>留言反馈</h2>
|
||
<p>Contact With Me</p>
|
||
</div>
|
||
<div class="layui-container">
|
||
<form class="layui-form contact" id="contactForm">
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label layui-input-lg">联系人</label>
|
||
<div class="layui-input-block">
|
||
<input name="contactName" class="layui-input layui-input-lg" placeholder="输入您的真实姓名" maxlength="30"
|
||
lay-verType="tips" lay-verify="required" required/>
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label layui-input-lg">联系电话</label>
|
||
<div class="layui-input-block">
|
||
<input name="contactPhone" class="layui-input layui-input-lg" placeholder="输入您的联系电话"
|
||
maxlength="30" lay-verType="tips" lay-verify="required" required/>
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label layui-input-lg">联系邮箱</label>
|
||
<div class="layui-input-block">
|
||
<input name="contactEmail" class="layui-input layui-input-lg" placeholder="输入您的联系邮箱"
|
||
maxlength="50" lay-verType="tips" lay-verify="required" required/>
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label layui-input-lg">联系QQ</label>
|
||
<div class="layui-input-block">
|
||
<input name="contactQq" class="layui-input layui-input-lg" placeholder="输入您的联系QQ号码"
|
||
maxlength="30" lay-verType="tips" lay-verify="required" required/>
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label layui-input-lg">反馈内容</label>
|
||
<div class="layui-input-block">
|
||
<textarea name="content" class="layui-textarea layui-input-lg" placeholder="写下对我们的意见或者建议"
|
||
maxlength="600" lay-verType="tips" lay-verify="required" required></textarea>
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<div class="layui-input-block">
|
||
<button class="layui-btn layui-btn-radius layui-btn-lg" lay-filter="submitMessage" lay-submit>
|
||
提交您的反馈
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 输入图形验证码弹窗 -->
|
||
<script type="text/html" id="layerGetCode">
|
||
<div class="layer-get-code">
|
||
<p>验证码将发送到您的邮箱,请注意查收:</p>
|
||
<div class="lay-code-group" style="padding-right:0px !important;">
|
||
<input class="layui-input" name="email" type="text" placeholder="请输入绑定邮箱"
|
||
lay-verType="tips" lay-verify="required|email" readonly maxlength="30" required/>
|
||
</div>
|
||
<div class="lay-code-group">
|
||
<input class="layui-input" name="captcha" type="text" placeholder="请输入验证码"
|
||
autocomplete="off" lay-verType="tips" lay-verify="required" maxlength="6" required/>
|
||
<button type="button" class="layui-btn layui-btn-code">获取验证码</button>
|
||
</div>
|
||
<div>
|
||
<button class="layui-btn layui-btn-fluid">确定</button>
|
||
</div>
|
||
</div>
|
||
</script>
|
||
|
||
<!-- 引入咨询弹窗 -->
|
||
<div th:replace="~{./public/consult :: consult}"></div>
|
||
<!-- 引入脚部 -->
|
||
<footer th:replace="~{./public/footer :: footer}"></footer>
|
||
<script>
|
||
layui.use(['layer', 'form'], function () {
|
||
var $ = layui.jquery;
|
||
var layer = layui.layer;
|
||
var form = layui.form;
|
||
|
||
// 表单提交事件
|
||
form.on('submit(submitMessage)', function (data) {
|
||
var layIndex = layer.open({
|
||
type: 1,
|
||
title: false,
|
||
shade: .1,
|
||
skin: 'layui-layer-admin',
|
||
content: $('#layerGetCode').html(),
|
||
success: function () {
|
||
|
||
// 手机号
|
||
var $contactEmail = $('input[name="contactEmail"]');
|
||
var contactEmail = $contactEmail.val();
|
||
|
||
var $inputEmail = $('input[name="email"]');
|
||
$inputEmail.val(contactEmail);
|
||
|
||
// 发送验证码
|
||
$('.layer-get-code .layui-btn-code').click(function () {
|
||
// 邮箱
|
||
var email = $inputEmail.val();
|
||
var emailReg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
|
||
if (!emailReg.test(email)) {
|
||
layer.tips('邮箱格式不正确', $inputEmail, {tips: [1, '#ff4c4c']});
|
||
return;
|
||
}
|
||
|
||
// 当前按钮对象
|
||
var $btn = $(this);
|
||
|
||
// 计时器
|
||
startTimer($btn);
|
||
|
||
// 发送验证码请求
|
||
var loadIndex = layer.msg('邮箱发送中...', {icon: 16, shade: 0.01, time: false});
|
||
$.ajax({
|
||
type: "POST",
|
||
url: '/sendEmail',
|
||
data: JSON.stringify({email: email, type: 5}),
|
||
contentType: "application/json",
|
||
dataType: "json",
|
||
beforeSend: function () {
|
||
// TODO...
|
||
},
|
||
success: function (res) {
|
||
layer.close(loadIndex);
|
||
if (res.code == 0) {
|
||
layer.msg(res.msg, {icon: 1});
|
||
startTimer($btn);
|
||
} else {
|
||
layer.msg(res.msg, {icon: 2, anim: 6});
|
||
}
|
||
},
|
||
error: function () {
|
||
layer.msg("AJAX请求异常");
|
||
}
|
||
});
|
||
return false;
|
||
});
|
||
|
||
// 确定按钮事件
|
||
$('.layer-get-code .layui-btn-fluid').click(function () {
|
||
// 短信验证码
|
||
var $inputCaptcha = $('input[name="captcha"]');
|
||
var captcha = $inputCaptcha.val();
|
||
if (!captcha) {
|
||
layer.tips('请输入验证码', $inputCaptcha, {tips: [1, '#ff4c4c']});
|
||
return;
|
||
}
|
||
data.field.captcha = captcha;
|
||
var loadIndex = layer.msg('留言提交中...', {icon: 16, shade: 0.01, time: false});
|
||
|
||
$.ajax({
|
||
type: "POST",
|
||
url: '/feedback',
|
||
data: JSON.stringify(data.field),
|
||
contentType: "application/json",
|
||
dataType: "json",
|
||
beforeSend: function () {
|
||
// TODO...
|
||
},
|
||
success: function (res) {
|
||
layer.close(loadIndex);
|
||
if (res.code == 0) {
|
||
// 关闭弹出层
|
||
layer.close(layIndex);
|
||
layer.msg(res.msg, {
|
||
icon: 1,
|
||
time: 1500
|
||
});
|
||
// 重置表单
|
||
setTimeout(function () {
|
||
$("#contactForm")[0].reset();
|
||
}, 1000);
|
||
} else {
|
||
layer.msg(res.msg, {icon: 2, anim: 6});
|
||
// 重置表单
|
||
setTimeout(function () {
|
||
location.href = "/login";
|
||
}, 2000);
|
||
}
|
||
},
|
||
error: function () {
|
||
layer.msg("AJAX请求异常");
|
||
}
|
||
});
|
||
return false;
|
||
});
|
||
return false;
|
||
}
|
||
})
|
||
return false;
|
||
});
|
||
|
||
// 按钮开始倒计时
|
||
function startTimer($btn, second) {
|
||
second || (second = 60);
|
||
$btn.attr('org-text', $btn.text());
|
||
$btn.text(second + 's');
|
||
$btn.attr('disabled', 'disabled');
|
||
$btn.addClass('layui-disabled');
|
||
var timer = setInterval(function () {
|
||
second--;
|
||
if (second <= 0) {
|
||
clearInterval(timer);
|
||
$btn.text($btn.attr('org-text'));
|
||
$btn.removeAttr('disabled');
|
||
$btn.removeClass('layui-disabled');
|
||
} else {
|
||
$btn.text(second + 's');
|
||
}
|
||
}, 1000);
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |