tailwind+vue在线视频或音频srt字幕时间线可视化编辑器代码-html代码-BFW代码库

tailwind+vue在线视频或音频srt字幕时间线可视化编辑器代码

代码语言：html

所属分类：其他

代码描述：tailwind+vue在线视频或音频srt字幕时间线可视化编辑器代码

代码标签： tailwind vue 在线视频音频 srt 字幕可视化时间线编辑器代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>专业时间轴字幕编辑器</title>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwindcss.3.4.16.js"></script>
    <!-- Vue 3 -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue.global.3.5.18.js"></script>
    <!-- Phosphor Icons (图标库) -->
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/phosphor-icons@1.4.2.css">
  
    <style>
        /* 基础样式微调 */
        body { background-color: #0f172a; color: #e2e8f0; user-select: none; }
        ::-webkit-scrollbar { width: 8px; height: 8px; }
        ::-webkit-scrollbar-track { background: #1e293b; }
        ::-webkit-scrollbar-thumb { background: #475569; border-radius: 4px; }
        
        /* 字幕块样式 */
        .sub-block {
            cursor: grab;
            transition: background-color 0.1s;
        }
        .sub-block:active { cursor: grabbing; }
        .sub-block.selected { border: 2px solid #3b82f6; z-index: 10; }
        
        /* 拖拽手柄区域 */
        .resize-handle {
            position: absolute;
            top: 0; bottom: 0;
            width: 8px;
            cursor: col-resize;
            z-index: 20;
        }
        .resize-handle:hover { background-color: rgba(255,255,255,0.3); }
        .handle-l { left: 0; }
        .handle-r { right: 0; }

        /* 视频预览文字样式 */
        .preview-text {
            text-shadow: 
                -1px -1px 0 #000,  
                1px -1px 0 #000,
                -1px 1px 0 #000,
                1px 1px 0 #000,
                0px 2px 4px rgba(0,0,0,0.8);
        }
        
        /* 时间刻度 */
        .ruler-tick {
            position: absolute;
            bottom: 0;
            border-left: 1px solid #475569;
            height: 10px;
            font-size: 10px;
            color: #94a3b8;
            padding-left: 2px;
        }
        .ruler-tick.major { height: 18px; border-left-color: #94a3b8; }
    </style>
</head>
<body class="h-screen flex flex-col overflow-hidden font-sans">

<div id="app" class="flex flex-col h-full" @mouseup="stopDrag" @mousemove="onDrag">

    <!-- 1. 顶部工具栏 -->
    <header class="h-14 bg-slate-800 border-b border-slate-700 flex items-center px-4 justify-between shrink-0 z-30">
        <div class="flex items-center gap-2 text-blue-400">
            <i class="ph-fill ph-film-strip te.........完整代码请登录后点击上方下载按钮下载查看