Commit e73a0d60 authored by liujiangnan's avatar liujiangnan

feat

parent 9d944887
/* 主容器样式 */
.ai-video-editor {
margin: 0 auto;
padding: 30px;
font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
min-height: 100vh;
}
/* 上传区域样式 */
.upload-section {
margin-bottom: 30px;
text-align: center;
padding: 40px 20px;
border: 3px dashed #d9d9d9;
border-radius: 12px;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.upload-section::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(64, 158, 255, 0.1), transparent);
transition: left 0.5s ease;
}
.upload-section:hover {
border-color: #409eff;
transform: translateY(-2px);
box-shadow: 0 8px 30px rgba(64, 158, 255, 0.15);
}
.upload-section:hover::before {
left: 100%;
}
/* 上传进度条样式 */
.upload-progress {
margin-top: 20px;
padding: 20px;
background: linear-gradient(135deg, #f8f9fa 0%, #e3f2fd 100%);
border-radius: 10px;
border: 1px solid #e4e7ed;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.progress-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
font-size: 14px;
color: #606266;
}
.progress-info span:first-child {
font-weight: 500;
}
.progress-info span:last-child {
color: #409eff;
font-weight: 600;
}
/* 视频播放区域样式 */
.video-section {
text-align: center;
margin-bottom: 30px;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
border-radius: 16px;
padding: 30px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.8);
}
.video-section video {
width: 100%;
max-width: 900px;
height: auto;
border-radius: 12px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
cursor: pointer;
transition: all 0.3s ease;
}
.video-section video:hover {
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
transform: scale(1.02);
}
.time-display {
margin-top: 15px;
text-align: center;
font-size: 16px;
color: #409eff;
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
padding: 12px 20px;
border-radius: 8px;
font-weight: 500;
box-shadow: 0 2px 8px rgba(64, 158, 255, 0.1);
border: 1px solid rgba(64, 158, 255, 0.2);
}
#timeline {
width: 100%;
height: 40px;
background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
border-radius: 6px;
border: 1px solid #e4e7ed;
padding: 5px 0;
}
/* 按钮样式美化 */
.el-button {
border-radius: 8px !important;
font-weight: 500 !important;
transition: all 0.3s ease !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}
.el-button:hover {
transform: translateY(-1px) !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}
.el-button--primary {
background: linear-gradient(135deg, #409eff 0%, #1890ff 100%) !important;
border: none !important;
}
.el-button--success {
background: linear-gradient(135deg, #67c23a 0%, #52c41a 100%) !important;
border: none !important;
}
.el-button--warning {
background: linear-gradient(135deg, #e6a23c 0%, #faad14 100%) !important;
border: none !important;
}
.el-button--danger {
background: linear-gradient(135deg, #f56c6c 0%, #ff4d4f 100%) !important;
border: none !important;
}
/* 选择器样式美化 */
.el-select {
border-radius: 8px !important;
}
.edit-data{
padding: 10px;
.el-select .el-input__inner {
border-radius: 8px !important;
border: 1px solid #d9d9d9 !important;
transition: all 0.3s ease !important;
}
.el-select .el-input__inner:focus {
border-color: #409eff !important;
box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2) !important;
}
/* 进度条样式美化 */
.el-progress {
border-radius: 8px !important;
}
.el-progress-bar__outer {
border-radius: 8px !important;
background-color: #f0f0f0 !important;
}
.el-progress-bar__inner {
border-radius: 8px !important;
background: linear-gradient(90deg, #409eff 0%, #67c23a 100%) !important;
}
/* 响应式设计 */
@media (max-width: 768px) {
.ai-video-editor {
padding: 15px;
}
.upload-section {
padding: 30px 15px;
}
.video-section {
padding: 20px;
}
.waveform-section {
padding: 20px;
}
.waveform-controls {
padding: 15px;
gap: 10px;
}
.markers-list {
grid-template-columns: 1fr;
}
}
/* 页面加载动画 */
.ai-video-editor {
animation: fadeInUp 0.8s ease-out;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* 卡片悬停效果 */
.upload-section,
.video-section,
.waveform-section {
transition: all 0.3s ease;
}
.upload-section:hover,
.video-section:hover,
.waveform-section:hover {
transform: translateY(-2px);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}
/* 遮罩层 */
.overlay-mask,
.marker-info-item .overlay-mask,
div[class*="marker-info"] .overlay-mask {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
background-color: rgba(255, 255, 255, 0.3) !important;
display: none !important;
z-index: 100 !important;
border-radius: 6px !important;
pointer-events: auto !important;
width: 100% !important;
height: 100% !important;
}
\ No newline at end of file
<!DOCTYPE html>
<html lang="en">
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>h5-template-generator</title>
<link href="./index.css" rel="stylesheet" >
<script type="text/javascript" src="//teach.cdn.ireadabc.com/h5template/h5-static-lib/js/jquery-1.12.3.min.js"></script>
<title>AI 视频编辑器</title>
<link rel="stylesheet" href="./index.css">
<script type="text/javascript" src="//teach.cdn.ireadabc.com/h5template/h5-static-lib/js/air.js"></script>
<script type="text/javascript" src="//teach.cdn.ireadabc.com/h5template/h5-static-lib/js/vue.min.js"></script>
<!-- 引入样式 -->
<link href="//teach.cdn.ireadabc.com/h5template/h5-static-lib/js/element-ui/theme-chalk/index.css" rel="stylesheet">
<!-- 引入组件库 -->
<script src="//teach.cdn.ireadabc.com/h5template/h5-static-lib/js/element-ui/index.js"></script>
<script type="text/javascript" src="//teach.cdn.ireadabc.com/h5template/h5-static-lib/js/jquery-1.12.3.min.js"></script>
<script type="text/javascript" src="../lib/js/crypto-js.min.js"></script>
<script type="text/javascript" src="../lib/js/aliyun-oss-sdk-6.18.1.min.js"></script>
<!-- 使用 module 模式引入依赖 -->
<script type="module" src="./index.js"></script>
</head>
<body>
<div class="edit-data">
<!-- 简单的例子,一个输入框+一个按钮,保存输入框的信息 -->
test: <input type="text" name="test" />
<input id="save" type="button" value="保存" >
<div id="app">
<div class="ai-video-editor"
:element-loading-text="loadingText"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(255, 255, 255, 0.5)"
@click="onContainerClick">
<!-- 视频上传区域 -->
<div class="upload-section">
<el-upload
ref="upload"
:action="uploadUrl"
:data="uploadData"
:before-upload="beforeUpload"
:on-error="onUploadError"
:show-file-list="false"
accept="video/*"
v-if="!videoUrl">
<el-button type="primary" icon="el-icon-upload">上传视频</el-button>
</el-upload>
<el-button v-if="videoUrl" type="warning" icon="el-icon-refresh" @click="confirmReupload">重新上传</el-button>
<!-- 上传进度条 -->
<div v-if="uploading" class="upload-progress">
<div class="progress-info">
<span>正在上传视频...</span>
<span>{{ uploadProgress }}%</span>
</div>
<el-progress
:percentage="uploadProgress"
:stroke-width="8"
:show-text="false"
status="success">
</el-progress>
</div>
</div>
<!-- 视频播放区域 -->
<div class="video-section" v-if="videoUrl">
<video
ref="videoPlayer"
:src="videoUrl"
style="width: 100%; max-width: 800px; height: auto;">
</video>
<!-- 当前播放时间显示 -->
<div class="time-display">
<span>当前播放时间: {{ currentTime }}</span>
</div>
</div>
</div>
</div>
</body>
<script src="./index.js"></script>
</html>
\ No newline at end of file
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
{
"videoUrl": "https://staging-teach.cdn.ireadabc.com/bcb8b751b98371ea71956a1d1a447956.mp4",
"markers": [
{
"id": 1756951682854,
"time": 4.639372,
"text": "标记点 1",
"stem": "",
"description": "",
"title": "",
"questionType": "",
"options": null,
"matchingGroups": null,
"splitScreen": "one",
"gameData": {
"id": 1783460,
"cover": "http://staging-teach.cdn.ireadabc.com/89d6c301-94e2-4145-a795-7bc9ab409799.png",
"name": null,
"template_name": "shoot_bubble",
"last_version": 12,
"play_url": "play/index.html",
"form_url": "form/index.html?type=form",
"config": {
"countdown": null,
"correctJumpTo": null,
"wrongJumpTo": null,
"isRegionMarker": false
}
}
}
],
"playbackRate": 1,
"isOpenCamera": true
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment