1627 lines
74 KiB
HTML
1627 lines
74 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>中国烟草合同模板库 - AI智能搜索系统</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
|
|
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--primary-color: #00684a;
|
|
--primary-hover: #005a40;
|
|
--primary-light: rgba(0, 104, 74, 0.1);
|
|
--success-color: #52c41a;
|
|
--warning-color: #faad14;
|
|
--error-color: #ff4d4f;
|
|
--text-color: rgba(0, 0, 0, 0.85);
|
|
--text-secondary: rgba(0, 0, 0, 0.45);
|
|
--border-color: #f0f0f0;
|
|
--bg-gray: #f5f5f5;
|
|
--gradient-bg: linear-gradient(135deg, #f8fffe 0%, #f0f9ff 100%);
|
|
}
|
|
|
|
body {
|
|
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
|
line-height: 1.5;
|
|
color: var(--text-color);
|
|
background: var(--gradient-bg);
|
|
margin: 0;
|
|
padding: 20px;
|
|
}
|
|
|
|
.page-container {
|
|
width: 1440px;
|
|
height: 900px;
|
|
border: 1px solid #666;
|
|
border-radius: 8px;
|
|
background: white;
|
|
margin: 20px;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
overflow: hidden;
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
|
position: relative;
|
|
}
|
|
|
|
.window-controls {
|
|
position: absolute;
|
|
top: 12px;
|
|
right: 16px;
|
|
display: flex;
|
|
gap: 8px;
|
|
z-index: 100;
|
|
}
|
|
|
|
.window-control {
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.control-close { background: #ff5f57; }
|
|
.control-minimize { background: #ffbd2e; }
|
|
.control-maximize { background: #28ca42; }
|
|
|
|
.layout-container {
|
|
display: flex;
|
|
height: 100%;
|
|
}
|
|
|
|
.sidebar {
|
|
width: 220px;
|
|
background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
|
|
border-right: 1px solid var(--border-color);
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.sidebar-header {
|
|
padding: 20px 16px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.logo {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
.logo i {
|
|
font-size: 24px;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.sidebar-menu {
|
|
flex: 1;
|
|
padding: 16px 0;
|
|
}
|
|
|
|
.menu-item {
|
|
margin: 0 12px 4px;
|
|
}
|
|
|
|
.menu-item a {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 12px 16px;
|
|
border-radius: 8px;
|
|
color: var(--text-color);
|
|
text-decoration: none;
|
|
font-size: 14px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.menu-item:hover a,
|
|
.menu-item.active a {
|
|
background: var(--primary-light);
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
.menu-item i {
|
|
margin-right: 12px;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.main-content {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: var(--gradient-bg);
|
|
}
|
|
|
|
.top-nav {
|
|
height: 60px;
|
|
background: white;
|
|
border-bottom: 1px solid var(--border-color);
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 24px;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.breadcrumb {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.breadcrumb-item {
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.breadcrumb-item:last-child {
|
|
color: var(--text-color);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.breadcrumb-item:not(:last-child)::after {
|
|
content: '/';
|
|
margin: 0 8px;
|
|
color: #d9d9d9;
|
|
}
|
|
|
|
.content-area {
|
|
flex: 1;
|
|
padding: 24px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.search-hero {
|
|
text-align: center;
|
|
padding: 60px 0;
|
|
background: linear-gradient(135deg, rgba(0, 104, 74, 0.05) 0%, rgba(0, 104, 74, 0.02) 100%);
|
|
border-radius: 16px;
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.search-title {
|
|
font-size: 32px;
|
|
font-weight: 600;
|
|
color: var(--text-color);
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.search-subtitle {
|
|
font-size: 16px;
|
|
color: var(--text-secondary);
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.search-container {
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
position: relative;
|
|
}
|
|
|
|
.search-box {
|
|
background: white;
|
|
border: 2px solid #e5e7eb;
|
|
border-radius: 12px;
|
|
padding: 16px 20px;
|
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.search-box:focus-within {
|
|
border-color: var(--primary-color);
|
|
box-shadow: 0 4px 20px rgba(0, 104, 74, 0.15);
|
|
}
|
|
|
|
.search-textarea {
|
|
width: 100%;
|
|
min-height: 80px;
|
|
border: none;
|
|
outline: none;
|
|
resize: vertical;
|
|
font-size: 16px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.search-actions {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-top: 12px;
|
|
padding-top: 12px;
|
|
border-top: 1px solid #f0f0f0;
|
|
}
|
|
|
|
.search-tips {
|
|
font-size: 12px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.search-btn {
|
|
background: var(--primary-color);
|
|
color: white;
|
|
border: none;
|
|
border-radius: 8px;
|
|
padding: 10px 24px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.search-btn:hover {
|
|
background: var(--primary-hover);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.quick-categories {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 16px;
|
|
margin-top: 40px;
|
|
}
|
|
|
|
.category-card {
|
|
background: white;
|
|
border-radius: 12px;
|
|
padding: 20px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
.category-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
|
|
border-color: var(--primary-color);
|
|
}
|
|
|
|
.category-icon {
|
|
width: 48px;
|
|
height: 48px;
|
|
background: var(--primary-light);
|
|
border-radius: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0 auto 12px;
|
|
color: var(--primary-color);
|
|
font-size: 24px;
|
|
}
|
|
|
|
.category-title {
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.category-count {
|
|
font-size: 12px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.result-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.result-info {
|
|
font-size: 14px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.result-count {
|
|
color: var(--primary-color);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.filter-tabs {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.filter-tab {
|
|
padding: 8px 16px;
|
|
border-radius: 20px;
|
|
border: 1px solid #e5e7eb;
|
|
background: white;
|
|
color: var(--text-color);
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.filter-tab.active,
|
|
.filter-tab:hover {
|
|
background: var(--primary-color);
|
|
color: white;
|
|
border-color: var(--primary-color);
|
|
}
|
|
|
|
.template-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
|
gap: 20px;
|
|
}
|
|
|
|
.template-card {
|
|
background: white;
|
|
border-radius: 12px;
|
|
padding: 20px;
|
|
border: 1px solid var(--border-color);
|
|
transition: all 0.3s ease;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.template-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
|
|
border-color: var(--primary-color);
|
|
}
|
|
|
|
.template-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.template-type {
|
|
background: var(--primary-light);
|
|
color: var(--primary-color);
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.template-title {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
margin-bottom: 8px;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.template-desc {
|
|
font-size: 14px;
|
|
color: var(--text-secondary);
|
|
line-height: 1.5;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.template-meta {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: 12px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.template-actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
.action-btn {
|
|
padding: 6px 12px;
|
|
border-radius: 6px;
|
|
border: 1px solid #e5e7eb;
|
|
background: white;
|
|
color: var(--text-color);
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.action-btn:hover {
|
|
border-color: var(--primary-color);
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
.action-btn.primary {
|
|
background: var(--primary-color);
|
|
color: white;
|
|
border-color: var(--primary-color);
|
|
}
|
|
|
|
.action-btn.primary:hover {
|
|
background: var(--primary-hover);
|
|
}
|
|
|
|
.template-detail {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.detail-header {
|
|
background: white;
|
|
border-radius: 12px;
|
|
padding: 32px;
|
|
margin-bottom: 24px;
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
.detail-title {
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.detail-meta {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 16px;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.meta-item {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.meta-label {
|
|
color: var(--text-secondary);
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.detail-actions {
|
|
display: flex;
|
|
gap: 12px;
|
|
}
|
|
|
|
.detail-btn {
|
|
padding: 12px 24px;
|
|
border-radius: 8px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.detail-btn.primary {
|
|
background: var(--primary-color);
|
|
color: white;
|
|
border: none;
|
|
}
|
|
|
|
.detail-btn.secondary {
|
|
background: white;
|
|
color: var(--text-color);
|
|
border: 1px solid #e5e7eb;
|
|
}
|
|
|
|
.detail-content {
|
|
background: white;
|
|
border-radius: 12px;
|
|
padding: 32px;
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
.content-section {
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
margin-bottom: 16px;
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.content-preview {
|
|
background: #f8f9fa;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
font-family: 'Courier New', monospace;
|
|
font-size: 14px;
|
|
line-height: 1.6;
|
|
border-left: 4px solid var(--primary-color);
|
|
}
|
|
|
|
.pagination {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: 32px;
|
|
gap: 8px;
|
|
}
|
|
|
|
.page-btn {
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 6px;
|
|
border: 1px solid #e5e7eb;
|
|
background: white;
|
|
color: var(--text-color);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.page-btn:hover,
|
|
.page-btn.active {
|
|
background: var(--primary-color);
|
|
color: white;
|
|
border-color: var(--primary-color);
|
|
}
|
|
|
|
.list-view .template-card {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 16px 20px;
|
|
}
|
|
|
|
.list-view .template-header {
|
|
flex: 1;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.list-view .template-desc {
|
|
margin-bottom: 0;
|
|
margin-left: 16px;
|
|
flex: 2;
|
|
}
|
|
|
|
.view-toggle {
|
|
display: flex;
|
|
gap: 4px;
|
|
background: white;
|
|
border-radius: 6px;
|
|
padding: 4px;
|
|
border: 1px solid #e5e7eb;
|
|
}
|
|
|
|
.view-btn {
|
|
padding: 6px 12px;
|
|
border-radius: 4px;
|
|
border: none;
|
|
background: transparent;
|
|
color: var(--text-secondary);
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.view-btn.active {
|
|
background: var(--primary-color);
|
|
color: white;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- 搜索页面 -->
|
|
<div class="page-container">
|
|
<div class="window-controls">
|
|
<div class="window-control control-close"></div>
|
|
<div class="window-control control-minimize"></div>
|
|
<div class="window-control control-maximize"></div>
|
|
</div>
|
|
|
|
<div class="layout-container">
|
|
<div class="sidebar">
|
|
<div class="sidebar-header">
|
|
<div class="logo">
|
|
<i class="ri-file-search-line"></i>
|
|
<span>合同模板库</span>
|
|
</div>
|
|
</div>
|
|
<div class="sidebar-menu">
|
|
<div class="menu-item active">
|
|
<a href="#"><i class="ri-search-line"></i>智能搜索</a>
|
|
</div>
|
|
<div class="menu-item">
|
|
<a href="#"><i class="ri-folder-line"></i>模板分类</a>
|
|
</div>
|
|
<div class="menu-item">
|
|
<a href="#"><i class="ri-star-line"></i>收藏模板</a>
|
|
</div>
|
|
<div class="menu-item">
|
|
<a href="#"><i class="ri-history-line"></i>使用历史</a>
|
|
</div>
|
|
<div class="menu-item">
|
|
<a href="#"><i class="ri-upload-cloud-line"></i>上传模板</a>
|
|
</div>
|
|
<div class="menu-item">
|
|
<a href="#"><i class="ri-settings-3-line"></i>系统设置</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="main-content">
|
|
<div class="top-nav">
|
|
<div class="breadcrumb">
|
|
<span class="breadcrumb-item">首页</span>
|
|
<span class="breadcrumb-item">智能搜索</span>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<span class="text-sm text-gray-500">欢迎，张经理</span>
|
|
<i class="ri-user-line text-gray-400"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content-area">
|
|
<div class="search-hero">
|
|
<h1 class="search-title">AI智能合同模板搜索</h1>
|
|
<p class="search-subtitle">输入合同名称、用途或关键内容，快速找到最适合的模板</p>
|
|
|
|
<div class="search-container">
|
|
<div class="search-box">
|
|
<textarea
|
|
class="search-textarea"
|
|
placeholder="例如：销售合同、设备采购协议、包含违约责任条款的合同..."
|
|
></textarea>
|
|
<div class="search-actions">
|
|
<div class="search-tips">
|
|
<i class="ri-lightbulb-line mr-1"></i>
|
|
支持自然语言描述，AI将为您匹配最相关的模板
|
|
</div>
|
|
<button class="search-btn">
|
|
<i class="ri-search-line"></i>
|
|
智能搜索
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="quick-categories">
|
|
<div class="category-card">
|
|
<div class="category-icon">
|
|
<i class="ri-handshake-line"></i>
|
|
</div>
|
|
<div class="category-title">销售合同</div>
|
|
<div class="category-count">128个模板</div>
|
|
</div>
|
|
<div class="category-card">
|
|
<div class="category-icon">
|
|
<i class="ri-shopping-cart-line"></i>
|
|
</div>
|
|
<div class="category-title">采购合同</div>
|
|
<div class="category-count">96个模板</div>
|
|
</div>
|
|
<div class="category-card">
|
|
<div class="category-icon">
|
|
<i class="ri-truck-line"></i>
|
|
</div>
|
|
<div class="category-title">物流运输</div>
|
|
<div class="category-count">64个模板</div>
|
|
</div>
|
|
<div class="category-card">
|
|
<div class="category-icon">
|
|
<i class="ri-user-settings-line"></i>
|
|
</div>
|
|
<div class="category-title">人事劳务</div>
|
|
<div class="category-count">52个模板</div>
|
|
</div>
|
|
<div class="category-card">
|
|
<div class="category-icon">
|
|
<i class="ri-building-line"></i>
|
|
</div>
|
|
<div class="category-title">租赁合同</div>
|
|
<div class="category-count">38个模板</div>
|
|
</div>
|
|
<div class="category-card">
|
|
<div class="category-icon">
|
|
<i class="ri-shield-check-line"></i>
|
|
</div>
|
|
<div class="category-title">保密协议</div>
|
|
<div class="category-count">24个模板</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 搜索结果页面 -->
|
|
<div class="page-container">
|
|
<div class="window-controls">
|
|
<div class="window-control control-close"></div>
|
|
<div class="window-control control-minimize"></div>
|
|
<div class="window-control control-maximize"></div>
|
|
</div>
|
|
|
|
<div class="layout-container">
|
|
<div class="sidebar">
|
|
<div class="sidebar-header">
|
|
<div class="logo">
|
|
<i class="ri-file-search-line"></i>
|
|
<span>合同模板库</span>
|
|
</div>
|
|
</div>
|
|
<div class="sidebar-menu">
|
|
<div class="menu-item active">
|
|
<a href="#"><i class="ri-search-line"></i>智能搜索</a>
|
|
</div>
|
|
<div class="menu-item">
|
|
<a href="#"><i class="ri-folder-line"></i>模板分类</a>
|
|
</div>
|
|
<div class="menu-item">
|
|
<a href="#"><i class="ri-star-line"></i>收藏模板</a>
|
|
</div>
|
|
<div class="menu-item">
|
|
<a href="#"><i class="ri-history-line"></i>使用历史</a>
|
|
</div>
|
|
<div class="menu-item">
|
|
<a href="#"><i class="ri-upload-cloud-line"></i>上传模板</a>
|
|
</div>
|
|
<div class="menu-item">
|
|
<a href="#"><i class="ri-settings-3-line"></i>系统设置</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="main-content">
|
|
<div class="top-nav">
|
|
<div class="breadcrumb">
|
|
<span class="breadcrumb-item">首页</span>
|
|
<span class="breadcrumb-item">搜索结果</span>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<div class="view-toggle">
|
|
<button class="view-btn active"><i class="ri-grid-line"></i></button>
|
|
<button class="view-btn"><i class="ri-list-check"></i></button>
|
|
</div>
|
|
<span class="text-sm text-gray-500">欢迎，张经理</span>
|
|
<i class="ri-user-line text-gray-400"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content-area">
|
|
<!-- 搜索框 -->
|
|
<div class="search-container mb-6">
|
|
<div class="search-box">
|
|
<textarea
|
|
class="search-textarea"
|
|
style="min-height: 60px;"
|
|
>销售合同 包含违约责任条款</textarea>
|
|
<div class="search-actions">
|
|
<div class="search-tips">
|
|
<i class="ri-time-line mr-1"></i>
|
|
搜索用时 0.3秒
|
|
</div>
|
|
<button class="search-btn">
|
|
<i class="ri-search-line"></i>
|
|
重新搜索
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="result-header">
|
|
<div class="result-info">
|
|
为您找到 <span class="result-count">24</span> 个相关模板
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<select class="px-3 py-2 border border-gray-200 rounded-lg text-sm">
|
|
<option>相关度排序</option>
|
|
<option>最新更新</option>
|
|
<option>使用频率</option>
|
|
<option>评分最高</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="filter-tabs">
|
|
<div class="filter-tab active">全部 (24)</div>
|
|
<div class="filter-tab">销售合同 (18)</div>
|
|
<div class="filter-tab">采购合同 (4)</div>
|
|
<div class="filter-tab">服务合同 (2)</div>
|
|
</div>
|
|
|
|
<div class="template-grid">
|
|
<div class="template-card">
|
|
<div class="template-header">
|
|
<div class="template-type">销售合同</div>
|
|
<div class="flex items-center gap-1 text-yellow-500">
|
|
<i class="ri-star-fill text-xs"></i>
|
|
<span class="text-xs">4.8</span>
|
|
</div>
|
|
</div>
|
|
<h3 class="template-title">烟草产品销售合同标准模板</h3>
|
|
<p class="template-desc">适用于烟草产品销售业务，包含完整的违约责任条款、付款方式、交付条件等核心要素，符合行业规范要求。</p>
|
|
<div class="template-meta">
|
|
<span>更新时间：2023-10-25</span>
|
|
<span>使用次数：1,248</span>
|
|
</div>
|
|
<div class="template-actions mt-3">
|
|
<button class="action-btn primary">立即使用</button>
|
|
<button class="action-btn">预览</button>
|
|
<button class="action-btn"><i class="ri-star-line"></i></button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="template-card">
|
|
<div class="template-header">
|
|
<div class="template-type">销售合同</div>
|
|
<div class="flex items-center gap-1 text-yellow-500">
|
|
<i class="ri-star-fill text-xs"></i>
|
|
<span class="text-xs">4.6</span>
|
|
</div>
|
|
</div>
|
|
<h3 class="template-title">零售商销售协议模板</h3>
|
|
<p class="template-desc">专为零售商设计的销售协议，详细规定了违约责任、退换货政策、结算方式等条款。</p>
|
|
<div class="template-meta">
|
|
<span>更新时间：2023-10-20</span>
|
|
<span>使用次数：856</span>
|
|
</div>
|
|
<div class="template-actions mt-3">
|
|
<button class="action-btn primary">立即使用</button>
|
|
<button class="action-btn">预览</button>
|
|
<button class="action-btn"><i class="ri-star-line"></i></button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="template-card">
|
|
<div class="template-header">
|
|
<div class="template-type">采购合同</div>
|
|
<div class="flex items-center gap-1 text-yellow-500">
|
|
<i class="ri-star-fill text-xs"></i>
|
|
<span class="text-xs">4.7</span>
|
|
</div>
|
|
</div>
|
|
<h3 class="template-title">设备采购合同（含违约条款）</h3>
|
|
<p class="template-desc">设备采购专用合同模板，包含详细的违约责任条款、质量保证、验收标准等内容。</p>
|
|
<div class="template-meta">
|
|
<span>更新时间：2023-10-18</span>
|
|
<span>使用次数：642</span>
|
|
</div>
|
|
<div class="template-actions mt-3">
|
|
<button class="action-btn primary">立即使用</button>
|
|
<button class="action-btn">预览</button>
|
|
<button class="action-btn"><i class="ri-star-line"></i></button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="template-card">
|
|
<div class="template-header">
|
|
<div class="template-type">销售合同</div>
|
|
<div class="flex items-center gap-1 text-yellow-500">
|
|
<i class="ri-star-fill text-xs"></i>
|
|
<span class="text-xs">4.5</span>
|
|
</div>
|
|
</div>
|
|
<h3 class="template-title">批发销售合同模板</h3>
|
|
<p class="template-desc">适用于大宗批发业务的销售合同，强化了违约责任条款和风险控制措施。</p>
|
|
<div class="template-meta">
|
|
<span>更新时间：2023-10-15</span>
|
|
<span>使用次数：534</span>
|
|
</div>
|
|
<div class="template-actions mt-3">
|
|
<button class="action-btn primary">立即使用</button>
|
|
<button class="action-btn">预览</button>
|
|
<button class="action-btn"><i class="ri-star-line"></i></button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="template-card">
|
|
<div class="template-header">
|
|
<div class="template-type">服务合同</div>
|
|
<div class="flex items-center gap-1 text-yellow-500">
|
|
<i class="ri-star-fill text-xs"></i>
|
|
<span class="text-xs">4.4</span>
|
|
</div>
|
|
</div>
|
|
<h3 class="template-title">技术服务合同（标准版）</h3>
|
|
<p class="template-desc">技术服务类合同模板，包含服务标准、违约责任、知识产权保护等关键条款。</p>
|
|
<div class="template-meta">
|
|
<span>更新时间：2023-10-12</span>
|
|
<span>使用次数：423</span>
|
|
</div>
|
|
<div class="template-actions mt-3">
|
|
<button class="action-btn primary">立即使用</button>
|
|
<button class="action-btn">预览</button>
|
|
<button class="action-btn"><i class="ri-star-line"></i></button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="template-card">
|
|
<div class="template-header">
|
|
<div class="template-type">销售合同</div>
|
|
<div class="flex items-center gap-1 text-yellow-500">
|
|
<i class="ri-star-fill text-xs"></i>
|
|
<span class="text-xs">4.3</span>
|
|
</div>
|
|
</div>
|
|
<h3 class="template-title">区域代理销售合同</h3>
|
|
<p class="template-desc">区域代理商专用销售合同，明确代理权限、销售目标、违约责任等核心条款。</p>
|
|
<div class="template-meta">
|
|
<span>更新时间：2023-10-10</span>
|
|
<span>使用次数：312</span>
|
|
</div>
|
|
<div class="template-actions mt-3">
|
|
<button class="action-btn primary">立即使用</button>
|
|
<button class="action-btn">预览</button>
|
|
<button class="action-btn"><i class="ri-star-line"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pagination">
|
|
<button class="page-btn"><i class="ri-arrow-left-s-line"></i></button>
|
|
<button class="page-btn active">1</button>
|
|
<button class="page-btn">2</button>
|
|
<button class="page-btn">3</button>
|
|
<button class="page-btn">4</button>
|
|
<button class="page-btn"><i class="ri-arrow-right-s-line"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 模板列表页面 -->
|
|
<div class="page-container">
|
|
<div class="window-controls">
|
|
<div class="window-control control-close"></div>
|
|
<div class="window-control control-minimize"></div>
|
|
<div class="window-control control-maximize"></div>
|
|
</div>
|
|
|
|
<div class="layout-container">
|
|
<div class="sidebar">
|
|
<div class="sidebar-header">
|
|
<div class="logo">
|
|
<i class="ri-file-search-line"></i>
|
|
<span>合同模板库</span>
|
|
</div>
|
|
</div>
|
|
<div class="sidebar-menu">
|
|
<div class="menu-item">
|
|
<a href="#"><i class="ri-search-line"></i>智能搜索</a>
|
|
</div>
|
|
<div class="menu-item active">
|
|
<a href="#"><i class="ri-folder-line"></i>模板分类</a>
|
|
</div>
|
|
<div class="menu-item">
|
|
<a href="#"><i class="ri-star-line"></i>收藏模板</a>
|
|
</div>
|
|
<div class="menu-item">
|
|
<a href="#"><i class="ri-history-line"></i>使用历史</a>
|
|
</div>
|
|
<div class="menu-item">
|
|
<a href="#"><i class="ri-upload-cloud-line"></i>上传模板</a>
|
|
</div>
|
|
<div class="menu-item">
|
|
<a href="#"><i class="ri-settings-3-line"></i>系统设置</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="main-content">
|
|
<div class="top-nav">
|
|
<div class="breadcrumb">
|
|
<span class="breadcrumb-item">首页</span>
|
|
<span class="breadcrumb-item">模板分类</span>
|
|
<span class="breadcrumb-item">销售合同</span>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<div class="view-toggle">
|
|
<button class="view-btn active"><i class="ri-grid-line"></i></button>
|
|
<button class="view-btn"><i class="ri-list-check"></i></button>
|
|
</div>
|
|
<span class="text-sm text-gray-500">欢迎，张经理</span>
|
|
<i class="ri-user-line text-gray-400"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content-area">
|
|
<div class="result-header">
|
|
<div>
|
|
<h2 class="text-2xl font-semibold mb-2">销售合同模板</h2>
|
|
<div class="result-info">
|
|
共 <span class="result-count">128</span> 个模板
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<select class="px-3 py-2 border border-gray-200 rounded-lg text-sm">
|
|
<option>最新更新</option>
|
|
<option>使用频率</option>
|
|
<option>评分最高</option>
|
|
<option>名称排序</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="filter-tabs">
|
|
<div class="filter-tab active">全部 (128)</div>
|
|
<div class="filter-tab">标准版 (86)</div>
|
|
<div class="filter-tab">简化版 (24)</div>
|
|
<div class="filter-tab">专业版 (18)</div>
|
|
</div>
|
|
|
|
<div class="template-grid">
|
|
<div class="template-card">
|
|
<div class="template-header">
|
|
<div class="template-type">标准版</div>
|
|
<div class="flex items-center gap-1 text-yellow-500">
|
|
<i class="ri-star-fill text-xs"></i>
|
|
<span class="text-xs">4.9</span>
|
|
</div>
|
|
</div>
|
|
<h3 class="template-title">烟草产品销售合同（2023版）</h3>
|
|
<p class="template-desc">最新版本的烟草产品销售合同模板，包含完整的法律条款、风险控制措施和行业标准要求。</p>
|
|
<div class="template-meta">
|
|
<span>更新时间：2023-10-25</span>
|
|
<span>使用次数：2,156</span>
|
|
</div>
|
|
<div class="template-actions mt-3">
|
|
<button class="action-btn primary">立即使用</button>
|
|
<button class="action-btn">预览</button>
|
|
<button class="action-btn"><i class="ri-star-fill text-yellow-500"></i></button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="template-card">
|
|
<div class="template-header">
|
|
<div class="template-type">标准版</div>
|
|
<div class="flex items-center gap-1 text-yellow-500">
|
|
<i class="ri-star-fill text-xs"></i>
|
|
<span class="text-xs">4.8</span>
|
|
</div>
|
|
</div>
|
|
<h3 class="template-title">零售商销售协议模板</h3>
|
|
<p class="template-desc">专为零售商设计的销售协议，涵盖商品配送、结算方式、退换货政策等关键条款。</p>
|
|
<div class="template-meta">
|
|
<span>更新时间：2023-10-20</span>
|
|
<span>使用次数：1,834</span>
|
|
</div>
|
|
<div class="template-actions mt-3">
|
|
<button class="action-btn primary">立即使用</button>
|
|
<button class="action-btn">预览</button>
|
|
<button class="action-btn"><i class="ri-star-line"></i></button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="template-card">
|
|
<div class="template-header">
|
|
<div class="template-type">专业版</div>
|
|
<div class="flex items-center gap-1 text-yellow-500">
|
|
<i class="ri-star-fill text-xs"></i>
|
|
<span class="text-xs">4.7</span>
|
|
</div>
|
|
</div>
|
|
<h3 class="template-title">大客户销售合同模板</h3>
|
|
<p class="template-desc">适用于大客户的专业销售合同，包含定制化条款、特殊优惠政策和长期合作框架。</p>
|
|
<div class="template-meta">
|
|
<span>更新时间：2023-10-18</span>
|
|
<span>使用次数：1,245</span>
|
|
</div>
|
|
<div class="template-actions mt-3">
|
|
<button class="action-btn primary">立即使用</button>
|
|
<button class="action-btn">预览</button>
|
|
<button class="action-btn"><i class="ri-star-line"></i></button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="template-card">
|
|
<div class="template-header">
|
|
<div class="template-type">简化版</div>
|
|
<div class="flex items-center gap-1 text-yellow-500">
|
|
<i class="ri-star-fill text-xs"></i>
|
|
<span class="text-xs">4.6</span>
|
|
</div>
|
|
</div>
|
|
<h3 class="template-title">小额销售合同（简化版）</h3>
|
|
<p class="template-desc">适用于小额交易的简化版销售合同，条款精简但保证法律效力。</p>
|
|
<div class="template-meta">
|
|
<span>更新时间：2023-10-15</span>
|
|
<span>使用次数：956</span>
|
|
</div>
|
|
<div class="template-actions mt-3">
|
|
<button class="action-btn primary">立即使用</button>
|
|
<button class="action-btn">预览</button>
|
|
<button class="action-btn"><i class="ri-star-line"></i></button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="template-card">
|
|
<div class="template-header">
|
|
<div class="template-type">标准版</div>
|
|
<div class="flex items-center gap-1 text-yellow-500">
|
|
<i class="ri-star-fill text-xs"></i>
|
|
<span class="text-xs">4.5</span>
|
|
</div>
|
|
</div>
|
|
<h3 class="template-title">区域代理销售合同</h3>
|
|
<p class="template-desc">区域代理商专用销售合同，明确代理权限、销售目标和考核标准。</p>
|
|
<div class="template-meta">
|
|
<span>更新时间：2023-10-12</span>
|
|
<span>使用次数：743</span>
|
|
</div>
|
|
<div class="template-actions mt-3">
|
|
<button class="action-btn primary">立即使用</button>
|
|
<button class="action-btn">预览</button>
|
|
<button class="action-btn"><i class="ri-star-line"></i></button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="template-card">
|
|
<div class="template-header">
|
|
<div class="template-type">标准版</div>
|
|
<div class="flex items-center gap-1 text-yellow-500">
|
|
<i class="ri-star-fill text-xs"></i>
|
|
<span class="text-xs">4.4</span>
|
|
</div>
|
|
</div>
|
|
<h3 class="template-title">批发销售合同模板</h3>
|
|
<p class="template-desc">适用于大宗批发业务的销售合同，包含数量折扣、物流配送等专业条款。</p>
|
|
<div class="template-meta">
|
|
<span>更新时间：2023-10-10</span>
|
|
<span>使用次数：612</span>
|
|
</div>
|
|
<div class="template-actions mt-3">
|
|
<button class="action-btn primary">立即使用</button>
|
|
<button class="action-btn">预览</button>
|
|
<button class="action-btn"><i class="ri-star-line"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pagination">
|
|
<button class="page-btn"><i class="ri-arrow-left-s-line"></i></button>
|
|
<button class="page-btn active">1</button>
|
|
<button class="page-btn">2</button>
|
|
<button class="page-btn">3</button>
|
|
<button class="page-btn">4</button>
|
|
<button class="page-btn">5</button>
|
|
<button class="page-btn">6</button>
|
|
<button class="page-btn"><i class="ri-arrow-right-s-line"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 模板详情页面 -->
|
|
<div class="page-container">
|
|
<div class="window-controls">
|
|
<div class="window-control control-close"></div>
|
|
<div class="window-control control-minimize"></div>
|
|
<div class="window-control control-maximize"></div>
|
|
</div>
|
|
|
|
<div class="layout-container">
|
|
<div class="sidebar">
|
|
<div class="sidebar-header">
|
|
<div class="logo">
|
|
<i class="ri-file-search-line"></i>
|
|
<span>合同模板库</span>
|
|
</div>
|
|
</div>
|
|
<div class="sidebar-menu">
|
|
<div class="menu-item">
|
|
<a href="#"><i class="ri-search-line"></i>智能搜索</a>
|
|
</div>
|
|
<div class="menu-item active">
|
|
<a href="#"><i class="ri-folder-line"></i>模板分类</a>
|
|
</div>
|
|
<div class="menu-item">
|
|
<a href="#"><i class="ri-star-line"></i>收藏模板</a>
|
|
</div>
|
|
<div class="menu-item">
|
|
<a href="#"><i class="ri-history-line"></i>使用历史</a>
|
|
</div>
|
|
<div class="menu-item">
|
|
<a href="#"><i class="ri-upload-cloud-line"></i>上传模板</a>
|
|
</div>
|
|
<div class="menu-item">
|
|
<a href="#"><i class="ri-settings-3-line"></i>系统设置</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="main-content">
|
|
<div class="top-nav">
|
|
<div class="breadcrumb">
|
|
<span class="breadcrumb-item">首页</span>
|
|
<span class="breadcrumb-item">模板分类</span>
|
|
<span class="breadcrumb-item">销售合同</span>
|
|
<span class="breadcrumb-item">烟草产品销售合同</span>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<button class="px-3 py-1 text-sm border border-gray-200 rounded-lg hover:border-primary-color">
|
|
<i class="ri-arrow-left-line mr-1"></i>返回列表
|
|
</button>
|
|
<span class="text-sm text-gray-500">欢迎，张经理</span>
|
|
<i class="ri-user-line text-gray-400"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content-area">
|
|
<div class="template-detail">
|
|
<div class="detail-header">
|
|
<div class="flex justify-between items-start mb-4">
|
|
<div class="template-type">销售合同 · 标准版</div>
|
|
<div class="flex items-center gap-2">
|
|
<div class="flex items-center gap-1 text-yellow-500">
|
|
<i class="ri-star-fill"></i>
|
|
<i class="ri-star-fill"></i>
|
|
<i class="ri-star-fill"></i>
|
|
<i class="ri-star-fill"></i>
|
|
<i class="ri-star-fill"></i>
|
|
<span class="text-sm ml-1">4.9 (156评价)</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h1 class="detail-title">烟草产品销售合同（2023版）</h1>
|
|
|
|
<div class="detail-meta">
|
|
<div class="meta-item">
|
|
<span class="meta-label">模板编号：</span>
|
|
<span>XS-2023-001</span>
|
|
</div>
|
|
<div class="meta-item">
|
|
<span class="meta-label">更新时间：</span>
|
|
<span>2023年10月25日</span>
|
|
</div>
|
|
<div class="meta-item">
|
|
<span class="meta-label">使用次数：</span>
|
|
<span>2,156次</span>
|
|
</div>
|
|
<div class="meta-item">
|
|
<span class="meta-label">文件大小：</span>
|
|
<span>245KB</span>
|
|
</div>
|
|
<div class="meta-item">
|
|
<span class="meta-label">适用范围：</span>
|
|
<span>烟草产品销售</span>
|
|
</div>
|
|
<div class="meta-item">
|
|
<span class="meta-label">法律依据：</span>
|
|
<span>《合同法》《烟草专卖法》</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="detail-actions">
|
|
<button class="detail-btn primary">
|
|
<i class="ri-download-line"></i>
|
|
立即下载使用
|
|
</button>
|
|
<button class="detail-btn secondary">
|
|
<i class="ri-eye-line"></i>
|
|
在线预览
|
|
</button>
|
|
<button class="detail-btn secondary">
|
|
<i class="ri-star-line"></i>
|
|
收藏模板
|
|
</button>
|
|
<button class="detail-btn secondary">
|
|
<i class="ri-share-line"></i>
|
|
分享
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="detail-content">
|
|
<div class="content-section">
|
|
<h3 class="section-title">模板简介</h3>
|
|
<p class="text-gray-600 leading-relaxed">
|
|
本模板是专为烟草行业设计的标准销售合同，严格遵循《烟草专卖法》等相关法律法规，
|
|
涵盖了烟草产品销售过程中的各个关键环节。模板包含完整的合同条款结构，
|
|
包括合同主体、标的物、价格条款、交付方式、付款条件、违约责任、争议解决等核心内容。
|
|
适用于各类烟草产品的销售业务，能够有效保护交易双方的合法权益。
|
|
</p>
|
|
</div>
|
|
|
|
<div class="content-section">
|
|
<h3 class="section-title">主要特点</h3>
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div class="bg-green-50 p-4 rounded-lg border border-green-200">
|
|
<div class="flex items-center mb-2">
|
|
<i class="ri-shield-check-line text-green-600 mr-2"></i>
|
|
<span class="font-medium">法律合规</span>
|
|
</div>
|
|
<p class="text-sm text-gray-600">严格遵循烟草行业法律法规，确保合同条款合法有效</p>
|
|
</div>
|
|
<div class="bg-blue-50 p-4 rounded-lg border border-blue-200">
|
|
<div class="flex items-center mb-2">
|
|
<i class="ri-settings-3-line text-blue-600 mr-2"></i>
|
|
<span class="font-medium">条款完整</span>
|
|
</div>
|
|
<p class="text-sm text-gray-600">涵盖销售全流程，条款结构完整，逻辑清晰</p>
|
|
</div>
|
|
<div class="bg-purple-50 p-4 rounded-lg border border-purple-200">
|
|
<div class="flex items-center mb-2">
|
|
<i class="ri-edit-line text-purple-600 mr-2"></i>
|
|
<span class="font-medium">易于定制</span>
|
|
</div>
|
|
<p class="text-sm text-gray-600">模板化设计，可根据具体业务需求灵活调整</p>
|
|
</div>
|
|
<div class="bg-orange-50 p-4 rounded-lg border border-orange-200">
|
|
<div class="flex items-center mb-2">
|
|
<i class="ri-award-line text-orange-600 mr-2"></i>
|
|
<span class="font-medium">行业标准</span>
|
|
</div>
|
|
<p class="text-sm text-gray-600">符合烟草行业标准，被广泛使用和认可</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content-section">
|
|
<h3 class="section-title">合同条款结构</h3>
|
|
<div class="space-y-3">
|
|
<div class="flex items-center p-3 bg-gray-50 rounded-lg">
|
|
<div class="w-8 h-8 bg-primary-color text-white rounded-full flex items-center justify-center text-sm font-medium mr-3">1</div>
|
|
<div>
|
|
<div class="font-medium">合同主体</div>
|
|
<div class="text-sm text-gray-600">甲乙双方基本信息、资质证明</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center p-3 bg-gray-50 rounded-lg">
|
|
<div class="w-8 h-8 bg-primary-color text-white rounded-full flex items-center justify-center text-sm font-medium mr-3">2</div>
|
|
<div>
|
|
<div class="font-medium">标的物条款</div>
|
|
<div class="text-sm text-gray-600">产品名称、规格、数量、质量标准</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center p-3 bg-gray-50 rounded-lg">
|
|
<div class="w-8 h-8 bg-primary-color text-white rounded-full flex items-center justify-center text-sm font-medium mr-3">3</div>
|
|
<div>
|
|
<div class="font-medium">价格与付款</div>
|
|
<div class="text-sm text-gray-600">价格条款、付款方式、结算周期</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center p-3 bg-gray-50 rounded-lg">
|
|
<div class="w-8 h-8 bg-primary-color text-white rounded-full flex items-center justify-center text-sm font-medium mr-3">4</div>
|
|
<div>
|
|
<div class="font-medium">交付与验收</div>
|
|
<div class="text-sm text-gray-600">交付时间、地点、方式、验收标准</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center p-3 bg-gray-50 rounded-lg">
|
|
<div class="w-8 h-8 bg-primary-color text-white rounded-full flex items-center justify-center text-sm font-medium mr-3">5</div>
|
|
<div>
|
|
<div class="font-medium">违约责任</div>
|
|
<div class="text-sm text-gray-600">违约情形、责任承担、损失赔偿</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center p-3 bg-gray-50 rounded-lg">
|
|
<div class="w-8 h-8 bg-primary-color text-white rounded-full flex items-center justify-center text-sm font-medium mr-3">6</div>
|
|
<div>
|
|
<div class="font-medium">争议解决</div>
|
|
<div class="text-sm text-gray-600">争议处理方式、管辖法院</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content-section">
|
|
<h3 class="section-title">合同预览</h3>
|
|
<div class="content-preview">
|
|
<div class="text-center mb-4">
|
|
<h4 class="text-lg font-bold">烟草产品销售合同</h4>
|
|
<p class="text-sm text-gray-600 mt-1">合同编号：_______________</p>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<p><strong>甲方（销售方）：</strong>_________________________</p>
|
|
<p><strong>地址：</strong>_____________________________________</p>
|
|
<p><strong>法定代表人：</strong>_______________ <strong>联系电话：</strong>_______________</p>
|
|
<p><strong>烟草专卖许可证号：</strong>_________________________</p>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<p><strong>乙方（采购方）：</strong>_________________________</p>
|
|
<p><strong>地址：</strong>_____________________________________</p>
|
|
<p><strong>法定代表人：</strong>_______________ <strong>联系电话：</strong>_______________</p>
|
|
<p><strong>烟草专卖零售许可证号：</strong>_____________________</p>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<p>根据《中华人民共和国合同法》、《中华人民共和国烟草专卖法》等相关法律法规，
|
|
甲乙双方在平等、自愿、公平、诚信的基础上，就烟草产品销售事宜达成如下协议：</p>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<p><strong>第一条 标的物</strong></p>
|
|
<p>1.1 产品名称：_________________________</p>
|
|
<p>1.2 产品规格：_________________________</p>
|
|
<p>1.3 产品数量：_________________________</p>
|
|
<p>1.4 产品单价：_________________________</p>
|
|
<p>1.5 合同总金额：_______________________</p>
|
|
</div>
|
|
|
|
<div class="text-center text-gray-500 text-sm">
|
|
... 更多条款内容请下载完整模板查看 ...
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content-section">
|
|
<h3 class="section-title">用户评价</h3>
|
|
<div class="space-y-4">
|
|
<div class="border border-gray-200 rounded-lg p-4">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-8 h-8 bg-blue-500 text-white rounded-full flex items-center justify-center text-sm font-medium">李</div>
|
|
<span class="font-medium">李经理</span>
|
|
<div class="flex items-center gap-1 text-yellow-500">
|
|
<i class="ri-star-fill text-xs"></i>
|
|
<i class="ri-star-fill text-xs"></i>
|
|
<i class="ri-star-fill text-xs"></i>
|
|
<i class="ri-star-fill text-xs"></i>
|
|
<i class="ri-star-fill text-xs"></i>
|
|
</div>
|
|
</div>
|
|
<span class="text-sm text-gray-500">2023-10-20</span>
|
|
</div>
|
|
<p class="text-gray-600">模板非常专业，条款完整，符合行业规范。我们公司一直在使用这个模板，效果很好。</p>
|
|
</div>
|
|
|
|
<div class="border border-gray-200 rounded-lg p-4">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-8 h-8 bg-green-500 text-white rounded-full flex items-center justify-center text-sm font-medium">王</div>
|
|
<span class="font-medium">王总</span>
|
|
<div class="flex items-center gap-1 text-yellow-500">
|
|
<i class="ri-star-fill text-xs"></i>
|
|
<i class="ri-star-fill text-xs"></i>
|
|
<i class="ri-star-fill text-xs"></i>
|
|
<i class="ri-star-fill text-xs"></i>
|
|
<i class="ri-star-line text-xs"></i>
|
|
</div>
|
|
</div>
|
|
<span class="text-sm text-gray-500">2023-10-18</span>
|
|
</div>
|
|
<p class="text-gray-600">模板结构清晰，易于理解和使用。特别是违约责任条款写得很详细，对我们很有帮助。</p>
|
|
</div>
|
|
|
|
<div class="border border-gray-200 rounded-lg p-4">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-8 h-8 bg-purple-500 text-white rounded-full flex items-center justify-center text-sm font-medium">张</div>
|
|
<span class="font-medium">张主任</span>
|
|
<div class="flex items-center gap-1 text-yellow-500">
|
|
<i class="ri-star-fill text-xs"></i>
|
|
<i class="ri-star-fill text-xs"></i>
|
|
<i class="ri-star-fill text-xs"></i>
|
|
<i class="ri-star-fill text-xs"></i>
|
|
<i class="ri-star-fill text-xs"></i>
|
|
</div>
|
|
</div>
|
|
<span class="text-sm text-gray-500">2023-10-15</span>
|
|
</div>
|
|
<p class="text-gray-600">非常实用的模板，法律条款严谨，符合最新的法规要求。推荐给同行使用。</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// 搜索功能
|
|
const searchButtons = document.querySelectorAll('.search-btn');
|
|
searchButtons.forEach(btn => {
|
|
btn.addEventListener('click', function() {
|
|
const textarea = this.closest('.search-box').querySelector('.search-textarea');
|
|
const query = textarea.value.trim();
|
|
if (query) {
|
|
console.log('搜索查询:', query);
|
|
// 这里可以添加实际的搜索逻辑
|
|
}
|
|
});
|
|
});
|
|
|
|
// 分类卡片点击
|
|
const categoryCards = document.querySelectorAll('.category-card');
|
|
categoryCards.forEach(card => {
|
|
card.addEventListener('click', function() {
|
|
const title = this.querySelector('.category-title').textContent;
|
|
console.log('选择分类:', title);
|
|
});
|
|
});
|
|
|
|
// 模板卡片操作
|
|
const templateCards = document.querySelectorAll('.template-card');
|
|
templateCards.forEach(card => {
|
|
card.addEventListener('click', function(e) {
|
|
if (!e.target.closest('button')) {
|
|
const title = this.querySelector('.template-title').textContent;
|
|
console.log('查看模板详情:', title);
|
|
}
|
|
});
|
|
});
|
|
|
|
// 按钮点击事件
|
|
const actionButtons = document.querySelectorAll('.action-btn, .detail-btn');
|
|
actionButtons.forEach(btn => {
|
|
btn.addEventListener('click', function(e) {
|
|
e.stopPropagation();
|
|
const action = this.textContent.trim();
|
|
console.log('执行操作:', action);
|
|
});
|
|
});
|
|
|
|
// 筛选标签
|
|
const filterTabs = document.querySelectorAll('.filter-tab');
|
|
filterTabs.forEach(tab => {
|
|
tab.addEventListener('click', function() {
|
|
filterTabs.forEach(t => t.classList.remove('active'));
|
|
this.classList.add('active');
|
|
console.log('筛选:', this.textContent);
|
|
});
|
|
});
|
|
|
|
// 视图切换
|
|
const viewButtons = document.querySelectorAll('.view-btn');
|
|
viewButtons.forEach(btn => {
|
|
btn.addEventListener('click', function() {
|
|
viewButtons.forEach(b => b.classList.remove('active'));
|
|
this.classList.add('active');
|
|
|
|
const isListView = this.querySelector('.ri-list-check');
|
|
const grid = document.querySelector('.template-grid');
|
|
if (grid) {
|
|
if (isListView) {
|
|
grid.classList.add('list-view');
|
|
grid.style.display = 'block';
|
|
} else {
|
|
grid.classList.remove('list-view');
|
|
grid.style.display = 'grid';
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
// 分页
|
|
const pageButtons = document.querySelectorAll('.page-btn');
|
|
pageButtons.forEach(btn => {
|
|
btn.addEventListener('click', function() {
|
|
if (!this.querySelector('i')) {
|
|
pageButtons.forEach(b => b.classList.remove('active'));
|
|
this.classList.add('active');
|
|
}
|
|
});
|
|
});
|
|
|
|
// 收藏功能
|
|
const starButtons = document.querySelectorAll('.action-btn i.ri-star-line, .action-btn i.ri-star-fill');
|
|
starButtons.forEach(star => {
|
|
star.closest('button').addEventListener('click', function(e) {
|
|
e.stopPropagation();
|
|
const icon = this.querySelector('i');
|
|
if (icon.classList.contains('ri-star-line')) {
|
|
icon.classList.remove('ri-star-line');
|
|
icon.classList.add('ri-star-fill');
|
|
icon.style.color = '#faad14';
|
|
} else {
|
|
icon.classList.remove('ri-star-fill');
|
|
icon.classList.add('ri-star-line');
|
|
icon.style.color = '';
|
|
}
|
|
});
|
|
});
|
|
|
|
// 搜索框自动调整高度
|
|
const textareas = document.querySelectorAll('.search-textarea');
|
|
textareas.forEach(textarea => {
|
|
textarea.addEventListener('input', function() {
|
|
this.style.height = 'auto';
|
|
this.style.height = Math.max(80, this.scrollHeight) + 'px';
|
|
});
|
|
});
|
|
|
|
// 模拟加载动画
|
|
setTimeout(() => {
|
|
document.body.style.opacity = '1';
|
|
}, 100);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |