diff --git a/app/routes/contract-template.detail.$id.tsx b/app/routes/contract-template.detail.$id.tsx index fdd8b88..c175500 100644 --- a/app/routes/contract-template.detail.$id.tsx +++ b/app/routes/contract-template.detail.$id.tsx @@ -3,6 +3,9 @@ import { useLoaderData, useNavigate } from '@remix-run/react'; import { useState } from 'react'; import styles from '~/styles/pages/contract-template.css?url'; +// 导入FilePreview组件 +import { FilePreview } from '~/components/reviews'; + export const links = () => [ { rel: 'stylesheet', href: styles } ]; @@ -154,6 +157,29 @@ export default function ContractTemplateDetail() { return stars; }; + // 创建文件内容对象用于FilePreview组件 + const fileContent = { + title: template.title, + contractNumber: template.templateCode, + // 设置PDF路径，FilePreview会自动拼接基础URL + path: 'contract-template/买卖合同/买卖合同范本.pdf', + parties: { + partyA: { + name: '', + address: '', + representative: '', + phone: '' + }, + partyB: { + name: '', + address: '', + representative: '', + phone: '' + } + }, + sections: [] + }; + return (
{/* 返回按钮 */} @@ -291,8 +317,16 @@ export default function ContractTemplateDetail() { {/* 合同预览 */}

合同预览

-
- 
{template.preview}
+
+ {/* 为FilePreview创建样式隔离容器 */} +
+ +
diff --git a/app/styles/pages/contract-template.css b/app/styles/pages/contract-template.css index aec02fc..2ddd8c6 100644 --- a/app/styles/pages/contract-template.css +++ b/app/styles/pages/contract-template.css @@ -644,4 +644,62 @@ padding: 8px 16px; font-size: 12px; } +} + +/* FilePreview 样式隔离容器 */ +.file-preview-container { + /* 重置所有可能继承的样式 */ + all: initial; + + /* 恢复必要的基础样式 */ + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + font-size: 14px; + line-height: 1.5; + color: #333; + background-color: #fff; + + /* 确保布局正常 */ + display: block; + width: 100%; + min-height: 600px; + position: relative; + overflow: hidden; +} + +/* 确保FilePreview内部的所有元素都能正常显示 */ +.file-preview-container * { + box-sizing: border-box; +} + +/* 重置可能影响FilePreview的全局样式 */ +.file-preview-container .file-preview { + font-size: inherit; + line-height: inherit; + color: inherit; +} + +/* 确保FilePreview的header样式不被影响 */ +.file-preview-container .file-preview-header { + font-size: 14px !important; + line-height: 1.5 !important; + max-width: none !important; + text-overflow: initial !important; +} + +/* 确保按钮样式正常 */ +.file-preview-container .ant-btn { + font-size: 12px !important; + line-height: 1.4 !important; +} + +/* 确保输入框样式正常 */ +.file-preview-container .ant-input { + font-size: 12px !important; + line-height: 1.4 !important; +} + +/* 确保PDF内容区域样式正常 */ +.file-preview-container .file-preview-content { + font-size: inherit; + line-height: inherit; } \ No newline at end of file diff --git a/html/合同模板页面-多个页面.html b/html/合同模板页面-多个页面.html new file mode 100644 index 0000000..357f504 --- /dev/null +++ b/html/合同模板页面-多个页面.html @@ -0,0 +1,1627 @@ + + + + + + 中国烟草合同模板库 - AI智能搜索系统 + + + + + + +
+
+
+
+
+
+ +
+
+
+ +
+
+
+ 智能搜索 +
+
+ 模板分类 +
+
+ 收藏模板 +
+
+ 使用历史 +
+
+ 上传模板 +
+
+ 系统设置 +
+
+
+ +
+
+
+ 首页 + 智能搜索 +
+
+ 欢迎，张经理 + +
+
+ +
+
+

AI智能合同模板搜索

+

输入合同名称、用途或关键内容，快速找到最适合的模板

+ +
+
+ +
+
+ + 支持自然语言描述，AI将为您匹配最相关的模板 +
+ +
+
+
+
+ +
+
+
+ +
+
销售合同
+
128个模板
+
+
+
+ +
+
采购合同
+
96个模板
+
+
+
+ +
+
物流运输
+
64个模板
+
+
+
+ +
+
人事劳务
+
52个模板
+
+
+
+ +
+
租赁合同
+
38个模板
+
+
+
+ +
+
保密协议
+
24个模板
+
+
+
+
+
+
+ + +
+
+
+
+
+
+ +
+
+
+ +
+
+
+ 智能搜索 +
+
+ 模板分类 +
+
+ 收藏模板 +
+
+ 使用历史 +
+
+ 上传模板 +
+
+ 系统设置 +
+
+
+ +
+
+
+ 首页 + 搜索结果 +
+
+
+ + +
+ 欢迎，张经理 + +
+
+ +
+ +
+
+ +
+
+ + 搜索用时 0.3秒 +
+ +
+
+
+ +
+
+ 为您找到 24 个相关模板 +
+
+ +
+
+ +
+
全部 (24)
+
销售合同 (18)
+
采购合同 (4)
+
服务合同 (2)
+
+ +
+
+
+
销售合同
+
+ + 4.8 +
+
+

烟草产品销售合同标准模板

+

适用于烟草产品销售业务，包含完整的违约责任条款、付款方式、交付条件等核心要素，符合行业规范要求。

+
+ 更新时间：2023-10-25 + 使用次数：1,248 +
+
+ + + +
+
+ +
+
+
销售合同
+
+ + 4.6 +
+
+

零售商销售协议模板

+

专为零售商设计的销售协议，详细规定了违约责任、退换货政策、结算方式等条款。

+
+ 更新时间：2023-10-20 + 使用次数：856 +
+
+ + + +
+
+ +
+
+
采购合同
+
+ + 4.7 +
+
+

设备采购合同（含违约条款）

+

设备采购专用合同模板，包含详细的违约责任条款、质量保证、验收标准等内容。

+
+ 更新时间：2023-10-18 + 使用次数：642 +
+
+ + + +
+
+ +
+
+
销售合同
+
+ + 4.5 +
+
+

批发销售合同模板

+

适用于大宗批发业务的销售合同，强化了违约责任条款和风险控制措施。

+
+ 更新时间：2023-10-15 + 使用次数：534 +
+
+ + + +
+
+ +
+
+
服务合同
+
+ + 4.4 +
+
+

技术服务合同（标准版）

+

技术服务类合同模板，包含服务标准、违约责任、知识产权保护等关键条款。

+
+ 更新时间：2023-10-12 + 使用次数：423 +
+
+ + + +
+
+ +
+
+
销售合同
+
+ + 4.3 +
+
+

区域代理销售合同

+

区域代理商专用销售合同，明确代理权限、销售目标、违约责任等核心条款。

+
+ 更新时间：2023-10-10 + 使用次数：312 +
+
+ + + +
+
+
+ + +
+
+
+
+ + +
+
+
+
+
+
+ +
+
+
+ +
+
+
+ 智能搜索 +
+
+ 模板分类 +
+
+ 收藏模板 +
+
+ 使用历史 +
+
+ 上传模板 +
+
+ 系统设置 +
+
+
+ +
+
+
+ 首页 + 模板分类 + 销售合同 +
+
+
+ + +
+ 欢迎，张经理 + +
+
+ +
+
+
+

销售合同模板

+
+ 共 128 个模板 +
+
+
+ +
+
+ +
+
全部 (128)
+
标准版 (86)
+
简化版 (24)
+
专业版 (18)
+
+ +
+
+
+
标准版
+
+ + 4.9 +
+
+

烟草产品销售合同（2023版）

+

最新版本的烟草产品销售合同模板，包含完整的法律条款、风险控制措施和行业标准要求。

+
+ 更新时间：2023-10-25 + 使用次数：2,156 +
+
+ + + +
+
+ +
+
+
标准版
+
+ + 4.8 +
+
+

零售商销售协议模板

+

专为零售商设计的销售协议，涵盖商品配送、结算方式、退换货政策等关键条款。

+
+ 更新时间：2023-10-20 + 使用次数：1,834 +
+
+ + + +
+
+ +
+
+
专业版
+
+ + 4.7 +
+
+

大客户销售合同模板

+

适用于大客户的专业销售合同，包含定制化条款、特殊优惠政策和长期合作框架。

+
+ 更新时间：2023-10-18 + 使用次数：1,245 +
+
+ + + +
+
+ +
+
+
简化版
+
+ + 4.6 +
+
+

小额销售合同（简化版）

+

适用于小额交易的简化版销售合同，条款精简但保证法律效力。

+
+ 更新时间：2023-10-15 + 使用次数：956 +
+
+ + + +
+
+ +
+
+
标准版
+
+ + 4.5 +
+
+

区域代理销售合同

+

区域代理商专用销售合同，明确代理权限、销售目标和考核标准。

+
+ 更新时间：2023-10-12 + 使用次数：743 +
+
+ + + +
+
+ +
+
+
标准版
+
+ + 4.4 +
+
+

批发销售合同模板

+

适用于大宗批发业务的销售合同，包含数量折扣、物流配送等专业条款。

+
+ 更新时间：2023-10-10 + 使用次数：612 +
+
+ + + +
+
+
+ + +
+
+
+
+ + +
+
+
+
+
+
+ +
+
+
+ +
+
+
+ 智能搜索 +
+
+ 模板分类 +
+
+ 收藏模板 +
+
+ 使用历史 +
+
+ 上传模板 +
+
+ 系统设置 +
+
+
+ +
+
+
+ 首页 + 模板分类 + 销售合同 + 烟草产品销售合同 +
+
+ + 欢迎，张经理 + +
+
+ +
+
+
+
+
销售合同 · 标准版
+
+
+ + + + + + 4.9 (156评价) +
+
+
+ +

烟草产品销售合同（2023版）

+ +
+
+ 模板编号： + XS-2023-001 +
+
+ 更新时间： + 2023年10月25日 +
+
+ 使用次数： + 2,156次 +
+
+ 文件大小： + 245KB +
+
+ 适用范围： + 烟草产品销售 +
+
+ 法律依据： + 《合同法》《烟草专卖法》 +
+
+ +
+ + + + +
+
+ +
+
+

模板简介

+

+ 本模板是专为烟草行业设计的标准销售合同，严格遵循《烟草专卖法》等相关法律法规， + 涵盖了烟草产品销售过程中的各个关键环节。模板包含完整的合同条款结构， + 包括合同主体、标的物、价格条款、交付方式、付款条件、违约责任、争议解决等核心内容。 + 适用于各类烟草产品的销售业务，能够有效保护交易双方的合法权益。 +

+
+ +
+

主要特点

+
+
+
+ + 法律合规 +
+

严格遵循烟草行业法律法规，确保合同条款合法有效

+
+
+
+ + 条款完整 +
+

涵盖销售全流程，条款结构完整，逻辑清晰

+
+
+
+ + 易于定制 +
+

模板化设计，可根据具体业务需求灵活调整

+
+
+
+ + 行业标准 +
+

符合烟草行业标准，被广泛使用和认可

+
+
+
+ +
+

合同条款结构

+
+
+
1
+
+
合同主体
+
甲乙双方基本信息、资质证明
+
+
+
+
2
+
+
标的物条款
+
产品名称、规格、数量、质量标准
+
+
+
+
3
+
+
价格与付款
+
价格条款、付款方式、结算周期
+
+
+
+
4
+
+
交付与验收
+
交付时间、地点、方式、验收标准
+
+
+
+
5
+
+
违约责任
+
违约情形、责任承担、损失赔偿
+
+
+
+
6
+
+
争议解决
+
争议处理方式、管辖法院
+
+
+
+
+ +
+

合同预览

+
+
+

烟草产品销售合同

+

合同编号：_______________

+
+ +
+

甲方（销售方）：_________________________

+

地址：_____________________________________

+

法定代表人：_______________ 联系电话：_______________

+

烟草专卖许可证号：_________________________

+
+ +
+

乙方（采购方）：_________________________

+

地址：_____________________________________

+

法定代表人：_______________ 联系电话：_______________

+

烟草专卖零售许可证号：_____________________

+
+ +
+

根据《中华人民共和国合同法》、《中华人民共和国烟草专卖法》等相关法律法规， + 甲乙双方在平等、自愿、公平、诚信的基础上，就烟草产品销售事宜达成如下协议：

+
+ +
+

第一条 标的物

+

1.1 产品名称：_________________________

+

1.2 产品规格：_________________________

+

1.3 产品数量：_________________________

+

1.4 产品单价：_________________________

+

1.5 合同总金额：_______________________

+
+ +
+ ... 更多条款内容请下载完整模板查看 ... +
+
+
+ +
+

用户评价

+
+
+
+
+
李
+ 李经理 +
+ + + + + +
+
+ 2023-10-20 +
+

模板非常专业，条款完整，符合行业规范。我们公司一直在使用这个模板，效果很好。

+
+ +
+
+
+
王
+ 王总 +
+ + + + + +
+
+ 2023-10-18 +
+

模板结构清晰，易于理解和使用。特别是违约责任条款写得很详细，对我们很有帮助。

+
+ +
+
+
+
张
+ 张主任 +
+ + + + + +
+
+ 2023-10-15 +
+

非常实用的模板，法律条款严谨，符合最新的法规要求。推荐给同行使用。

+
+
+
+
+
+
+
+
+
+ + + + \ No newline at end of file