Files
djangoadmin-web/xiaomayi-modules/xiaomayi-web/src/main/resources/templates/index3.html
T
2026-10-18 21:07:51 +08:00

881 lines
39 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!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);">&#xe601;</i></button>
<!-- <button class="layui-btn xm-hero-btn" nav-scroll="pricing">查看价格 <i class="layui-icon" style="transform: rotate(-90deg);">&#xe601;</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">&emsp;&emsp;基于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">&emsp;&emsp;基于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">&emsp;&emsp;基于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>