1.20随笔
今天写了个资源网站，用于记录我在学习过程中所用到的资源。
部分代码如下：
<!-- 主内容区域 -->
<main class="main-content">
<!-- 欢迎区域 -->
<section class="welcome-section">
<div class="welcome-card">
<div class="welcome-header">
<span class="welcome-icon">🎉</span>
<h2 class="welcome-title">欢迎回来！</h2>
</div>
<p class="welcome-subtitle">一站式资源管理平台，轻松管理您的所有资源</p>
<div class="welcome-actions">
<button class="primary-btn">上传新资源</button>
<button class="secondary-btn">管理资源</button>
</div>
</div>
<div class="stats-card">
<div class="stats-header">
<h3 class="stats-title">资源统计</h3>
</div>
<div class="stats-content">
<div class="stat-item">
<div class="stat-number">128</div>
<div class="stat-label">总资源数</div>
</div>
<div class="stat-item">
<div class="stat-number">36</div>
<div class="stat-label">数据资源</div>
</div>
<div class="stat-item">
<div class="stat-number">42</div>
<div class="stat-label">书籍资源</div>
</div>
<div class="stat-item">
<div class="stat-number">50</div>
<div class="stat-label">数据包</div>
</div>
</div>
</div>
</section>
<!-- 功能区域 -->
<section class="features-section">
<div class="feature-buttons">
<button class="feature-btn">🏷️ 资源标签</button>
<button class="feature-btn">💬 资源评论</button>
<button class="feature-btn">📄 资源文档</button>
</div>
</section>
<!-- 资源列表区域 -->
<section class="resources-section">
<div class="section-header">
<h3 class="section-title">我的资源</h3>
<a href="#" class="view-more">查看更多 >></a>
</div>
<div class="resources-grid" id="resourcesGrid">
<!-- 资源卡片将通过JavaScript动态生成 -->
</div>
</section>
</main>
<!-- 资源详情模态框 -->
<div class="modal-overlay" id="resourceModal" style="display: none;">
<div class="modal-content">
<!-- 模态框头部 -->
<div class="modal-header">
<button class="modal-close" id="closeModal">×</button>
</div>
<!-- 资源基本信息 -->
<div class="resource-detail-header">
<div class="resource-detail-image">
<img src="" alt="资源图片" id="detailImage" class="detail-img">
</div>
<div class="resource-detail-info">
<h1 class="detail-title" id="detailTitle">资源名称</h1>
<div class="detail-meta">
<div class="detail-ratings">
<span class="rating-stars">★★★★★</span>
<span class="rating-score">5.0</span>
</div>
<div class="detail-tags">
<span class="tag" id="detailType"></span>
</div>
</div>
<div class="detail-stats">
<span class="stat-item">
<span class="stat-icon">👁️</span>
<span id="detailViews">0</span>
</span>
<span class="stat-item">
<span class="stat-icon">❤️</span>
<span id="detailLikes">0</span>
</span>
<span class="stat-item">
<span class="stat-icon">📥</span>
<span id="detailDownloads">0</span>
</span>
</div>
<div class="detail-actions">
<button class="action-btn primary" id="downloadBtn">下载</button>
<button class="action-btn">收藏</button>
<button class="action-btn">分享</button>
<button class="action-btn">评价</button>
</div>
<div class="detail-author">
<span class="author-avatar">👤</span>
<span class="author-name">管理员</span>
<span class="author-date" id="detailDate"></span>
</div>
</div>
</div>
<!-- 标签页导航 -->
<div class="tab-nav">
<button class="tab-btn active" data-tab="info">资源信息</button>
<button class="tab-btn" data-tab="links">资源链接</button>
<button class="tab-btn" data-tab="discussion">讨论区</button>
<button class="tab-btn" data-tab="reviews">资源评价</button>
</div>
<!-- 标签页内容 -->
<div class="tab-content">
<!-- 资源信息 -->
<div class="tab-panel active" id="tab-info">
<div class="info-section">
<h3>资源介绍</h3>
<div class="resource-description" id="detailDescription"></div>
</div>
<div class="info-section">
<h3>资源参数</h3>
<div class="resource-params">
<div class="param-item">
<span class="param-label">资源类型：</span>
<span class="param-value" id="detailParamType"></span>
</div>
<div class="param-item">
<span class="param-label">创建时间：</span>
<span class="param-value" id="detailParamDate"></span>
</div>
<div class="param-item">
<span class="param-label">资源状态：</span>
<span class="param-value" id="detailParamStatus"></span>
</div>
</div>
</div>
<!-- 图片介绍 -->
<div class="info-section">
<h3>图片介绍</h3>
<div class="resource-images">
<img src="" alt="资源图片" id="detailMainImage" class="main-preview-img">
</div>
</div>
</div>
<!-- 资源链接 -->
<div class="tab-panel" id="tab-links">
<div class="links-section">
<h3>下载链接</h3>
<div class="download-links">
<div class="link-item">
<span class="link-type">本地下载：</span>
<a href="#" class="link-url">点击下载</a>
</div>
</div>
</div>
</div>
<!-- 讨论区 -->
<div class="tab-panel" id="tab-discussion">
<div class="discussion-section">
<h3>讨论区</h3>
<div class="discussion-placeholder">
<p>暂无讨论内容</p>
</div>
</div>
</div>
<!-- 资源评价 -->
<div class="tab-panel" id="tab-reviews">
<div class="reviews-section">
<h3>资源评价</h3>
<div class="reviews-placeholder">
<p>暂无评价内容</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
浙公网安备 33010602011771号