xsl
9a00ac3907
功能 1、是前端能从后端拉起一组图片，分类为“男”，“女”。 这个图片是保存到oss文件系统的，后端需要提供图片的url。 2、前端可以选择一个图片，手动端可以拍摄图片或者选择图片。 3、前端发起更换发型的请求，把选择的图片和对应要更换的发型ID发给后端。 4、前端收到后端更换发型的请求后处理图片返回给前端。 5、后端实际处理更换发型请求的时候会调用另外一个远程的http接口来实现。 先帮我把项目结构，产品文档，系统框架等做出来。
109 lines
4.2 KiB
HTML
109 lines
4.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>发型更换</title>
|
|
<link rel="stylesheet" href="css/style.css">
|
|
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<!-- 导航栏 -->
|
|
<header class="navbar">
|
|
<h1>发型更换</h1>
|
|
<button id="backBtn" class="back-btn" style="display: none;">返回</button>
|
|
</header>
|
|
|
|
<!-- 主内容区 -->
|
|
<main class="main-content">
|
|
<!-- 首页 -->
|
|
<section id="homePage" class="page active">
|
|
<!-- 图片上传区 -->
|
|
<div class="upload-area">
|
|
<div id="imagePreview" class="image-preview">
|
|
<div class="upload-placeholder">
|
|
<div class="upload-icon">📷</div>
|
|
<p>点击上传图片或拍摄照片</p>
|
|
<input type="file" id="imageUpload" accept="image/*" capture="camera">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 发型分类入口 -->
|
|
<div class="category-section">
|
|
<h2>选择发型分类</h2>
|
|
<div class="category-buttons">
|
|
<button id="maleBtn" class="category-btn">
|
|
<span class="gender-icon">👨</span>
|
|
<span>男士发型</span>
|
|
</button>
|
|
<button id="femaleBtn" class="category-btn">
|
|
<span class="gender-icon">👩</span>
|
|
<span>女士发型</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 发型选择页 -->
|
|
<section id="hairstylePage" class="page">
|
|
<!-- 分类导航 -->
|
|
<div class="category-nav">
|
|
<button id="navMaleBtn" class="nav-category-btn active">男士</button>
|
|
<button id="navFemaleBtn" class="nav-category-btn">女士</button>
|
|
</div>
|
|
|
|
<!-- 发型列表 -->
|
|
<div class="hairstyle-list">
|
|
<h2>选择发型</h2>
|
|
<div id="hairstyleGrid" class="hairstyle-grid">
|
|
<!-- 发型项将通过JavaScript动态添加 -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 确认按钮 -->
|
|
<div class="confirm-section">
|
|
<button id="confirmBtn" class="confirm-btn" disabled>确认选择</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 结果预览页 -->
|
|
<section id="resultPage" class="page">
|
|
<!-- 效果展示 -->
|
|
<div class="result-section">
|
|
<h2>发型更换效果</h2>
|
|
<div id="resultPreview" class="result-preview">
|
|
<!-- 结果图片将通过JavaScript动态添加 -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 操作按钮 -->
|
|
<div class="action-buttons">
|
|
<button id="reselectHairstyleBtn" class="action-btn">
|
|
<span class="action-icon">✂️</span>
|
|
<span>重新选择发型</span>
|
|
</button>
|
|
<button id="reuploadImageBtn" class="action-btn">
|
|
<span class="action-icon">📷</span>
|
|
<span>重新上传照片</span>
|
|
</button>
|
|
<button id="saveResultBtn" class="action-btn">
|
|
<span class="action-icon">💾</span>
|
|
<span>保存结果</span>
|
|
</button>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<!-- 加载指示器 -->
|
|
<div id="loading" class="loading" style="display: none;">
|
|
<div class="loading-spinner"></div>
|
|
<p>处理中...</p>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="js/api.js"></script>
|
|
<script src="js/main.js"></script>
|
|
</body>
|
|
</html> |