liuhairui
/
mes-ai-server-api


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>作品明细 - 我的作品</title>
    <style>
        /* 主容器 - 左右布局 */
        .user-diagrams-container {
            display: flex;
            min-height: calc(100vh - 120px); /* 减去导航栏和页脚高度 */
        }

        /* 左侧菜单样式 */
        .sidebar {
            width: 200px;
            background-color: #fff;
            border-right: 1px solid #e8e8e8;
            flex-shrink: 0;
        }

        .menu {
            padding: 20px 0;
        }

        .menu-item {
            list-style: none;
        }

        .menu-item a {
            display: block;
            padding: 15px 20px;
            text-decoration: none;
            color: #000000;
            font-size: 16px;
            transition: all 0.3s ease;
        }

        .menu-item.active a {
            background-color: #f0f7ff;
            color: #1890ff;
            font-weight: 500;
        }

        .menu-item:hover a {
            background-color: #f5f5f5;
            color: #1890ff;
        }

        /* 右侧内容区域样式 */
        .diagrams-content {
            flex: 1;
            background-color: #fff;
            padding: 20px;
        }

        /* 内容区域 */
        .detail-content {
            min-height: 500px;
            border: 1px solid #e8e8e8;
            border-radius: 4px;
            padding: 20px;
            display: flex;
            gap: 20px;
        }

        /* 左侧媒体展示区域 */
        .media-section {
            flex: 1;
            border: 1px solid #e8e8e8;
            border-radius: 8px;
            overflow: hidden;
            background-color: #fafafa;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .media-section img {
            max-width: 100%;
            max-height: 500px;
            object-fit: contain;
            border-radius: 4px;
        }

        .media-section video {
            max-width: 100%;
            max-height: 500px;
            border-radius: 4px;
        }

        /* 右侧信息区域 */
        .info-section {
            width: 400px;
            border: 1px solid #e8e8e8;
            border-radius: 8px;
            padding: 20px;
            background-color: #fafafa;
        }

        .info-title {
            font-size: 20px;
            font-weight: 500;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #e8e8e8;
        }

        .info-item {
            margin-bottom: 15px;
            display: flex;
            align-items: center;
        }

        .info-label {
            display: inline-block;
            width: 80px;
            font-weight: 500;
            color: #333;
            margin-right: 10px;
        }

        .info-value {
            display: inline-block;
            color: #666;
            line-height: 1.5;
            flex: 1;
        }

        /* 审核状态标识样式 - 与主页保持一致 */
        .examine-status {
            padding: 4px 12px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 500;
            color: #fff;
            display: inline-block;
        }

        .examine-status.passed {
            background-color: #52c41a;
        }

        .examine-status.failed {
            background-color: #ff4d4f;
        }

        .examine-status.pending {
            background-color: #faad14;
        }

        .chinese-description {
            white-space: pre-wrap;
            background-color: #fff;
            border: 1px solid #e8e8e8;
            border-radius: 4px;
            padding: 15px;
            min-height: 260px;
            margin-top: 5px;
        }

        /* 返回按钮 */
        .back-btn {
            display: inline-block;
            margin-bottom: 20px;
            padding: 8px 16px;
            background-color: #1890ff;
            color: #fff;
            border-radius: 4px;
            text-decoration: none;
            transition: all 0.3s ease;
        }

        .back-btn:hover {
            background-color: #40a9ff;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .user-diagrams-container {
                flex-direction: column;
            }

            .sidebar {
                width: 100%;
                border-right: none;
                border-bottom: 1px solid #e8e8e8;
            }

            .menu {
                padding: 0;
            }

            .menu-item {
                display: inline-block;
            }

            .menu-item a {
                padding: 12px 15px;
            }

            .detail-content {
                flex-direction: column;
            }

            .info-section {
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="user-diagrams-container">
        <!-- 左侧菜单 -->
        <div class="sidebar">
            <ul class="menu">
                <li class="menu-item">
                    <a href="{:url('user/diagrams')}">我的作品</a>
                </li>
                <li class="menu-item">
                    <a href="{:url('user/recycle')}">收回站</a>
                </li>
            </ul>
        </div>

        <!-- 右侧内容区域 -->
        <div class="diagrams-content">
            <!-- 返回按钮 -->
            <a href="javascript:history.back()" class="back-btn">返回</a>

            <!-- 内容区域 -->
            <div class="detail-content">
                <!-- 左侧媒体展示区域 -->
                <div class="media-section">
                    {if condition="$product.type eq '文生图'"}
                        <img src="{$product.template_image_url}" alt="{$product.template_name}">
                    {elseif condition="$product.type eq '文生视频'"}
                        <video src="{$product.template_image_url}" controls></video>
                    {/if}
                </div>

                <!-- 右侧信息区域 -->
                <div class="info-section">
                    <div class="info-title">模版信息</div>
                    <div class="info-item">
                        <span class="info-label">用户</span>
                        <span class="info-value">{$user_info.nickname}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">模版名称</span>
                        <span class="info-value">{$product.template_name}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">创建时间</span>
                        <span class="info-value">{$product.create_time}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">审核状态</span>
                        <span class="info-value">
                            <span class="examine-status {if condition="$product.toexamine eq '审核通过'"}passed{elseif condition="$product.toexamine eq '未通过'"}failed{else}pending{/if}">
                                {$product.toexamine}
                            </span>
                        </span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">提示词</span>
                        <div class="info-value">
                            <div class="chinese-description">{$product.chinese_description}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>