签入版本
This commit is contained in:
@@ -0,0 +1,735 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<!-- 引入头部 -->
|
||||
<header th:replace="~{./public/header :: header}"></header>
|
||||
|
||||
<style>
|
||||
.ew-banner {
|
||||
max-width: 100vw;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
color: #333;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ew-banner:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ew-banner p {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.ew-banner img.shape {
|
||||
-webkit-animation-duration: 5s;
|
||||
animation-duration: 5s;
|
||||
}
|
||||
|
||||
.ew-banner img {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
img.shape-main {
|
||||
width: 90% !important;
|
||||
max-width: 370px !important;
|
||||
right: 15px !important;
|
||||
top: 30px !important;
|
||||
}
|
||||
|
||||
.ew-banner > .layui-container {
|
||||
padding-top: 320px;
|
||||
padding-bottom: 20px !important;
|
||||
padding-right: 20px !important;
|
||||
}
|
||||
|
||||
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" 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>
|
||||
<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}"
|
||||
style="position: absolute;right: 560px;top: 60px;"/>
|
||||
<img class="shape layui-anim-rotate layui-anim-loop" th:src="@{/static/assets/images/shape3.png}"
|
||||
style="position: absolute;right: 10px;top: 30px;"/>
|
||||
<img class="shape shape4 layui-anim-rotate layui-anim-loop" th:src="@{/static/assets/images/shape4.png}"
|
||||
style="position: absolute;left: -60px;bottom: 100px;"/>
|
||||
<img class="shape layui-anim-rotate layui-anim-loop" th:src="@{/static/assets/images/shape5.png}"
|
||||
style="position: absolute;left: -120px;top: 100px;"/>
|
||||
<img 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="tencent://message/?Menu=yes&uin=575073565" class="layui-btn layui-btn-radius layui-btn-lg" target="_blank">立即咨询</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>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- 引入脚部 -->
|
||||
<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>
|
||||
Reference in New Issue
Block a user