UI/tutorials.html at main · 20161314/UI · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>助农宣传 - 电商教程</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            touch-action: manipulation;
            -webkit-tap-highlight-color: transparent;
            background-color: #f7f8fa;
            height: 100vh;
            display: flex;
            flex-direction: column;
        }
        .safe-area {
            padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
        }
        .nav-item.active {
            color: #07c160;
        }
        .nav-item.active i {
            color: #07c160;
        }
        .category-pill {
            transition: all 0.2s;
        }
        .category-pill.active {
            background-color: #10b981;
            color: white;
        }
        .tutorial-card {
            transition: all 0.2s;
        }
        .tutorial-card:active {
            transform: scale(0.98);
        }
    </style>
</head>
<body class="safe-area">
    <!-- 顶部导航 -->
    <div class="bg-white p-4 flex items-center justify-between">
        <h1 class="text-xl font-bold">电商教程</h1>
        <div class="flex space-x-3">
            <button class="text-gray-600"><i class="fas fa-search text-lg"></i></button>
            <button class="text-gray-600" data-link="community.html"><i class="fas fa-users text-lg"></i></button>
            <button class="text-gray-600" data-link="membership.html"><i class="fas fa-crown text-yellow-500 text-lg"></i></button>
        </div>
    </div>

    <!-- 分类导航 -->
    <div class="bg-white py-3 px-4 overflow-x-auto">
        <div class="flex space-x-2 whitespace-nowrap">
            <span class="category-pill active px-4 py-1.5 rounded-full text-sm font-medium">全部</span>
            <span class="category-pill px-4 py-1.5 rounded-full text-sm font-medium bg-gray-100 text-gray-700">新手入门</span>
            <span class="category-pill px-4 py-1.5 rounded-full text-sm font-medium bg-gray-100 text-gray-700">商品拍摄</span>
            <span class="category-pill px-4 py-1.5 rounded-full text-sm font-medium bg-gray-100 text-gray-700">文案撰写</span>
            <span class="category-pill px-4 py-1.5 rounded-full text-sm font-medium bg-gray-100 text-gray-700">引流技巧</span>
            <span class="category-pill px-4 py-1.5 rounded-full text-sm font-medium bg-gray-100 text-gray-700">客户维护</span>
        </div>
    </div>

    <!-- 内容区域 -->
    <div class="flex-1 overflow-y-auto">
        <!-- 推荐教程 -->
        <div class="px-4 py-4">
            <h2 class="font-bold text-lg mb-3">推荐教程</h2>
            <div class="bg-white rounded-xl overflow-hidden shadow-sm mb-4">
                <img src="https://images.unsplash.com/photo-1556155092-490a1ba16284?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2340&q=80" alt="教程封面" class="w-full h-40 object-cover">
                <div class="p-4">
                    <div class="flex items-center mb-2">
                        <span class="text-xs px-2 py-0.5 bg-green-100 text-green-800 rounded-full">新手入门</span>
                        <span class="text-xs text-gray-500 ml-2">10分钟</span>
                    </div>
                    <h3 class="font-bold mb-1">农产品电商起步完全指南</h3>
                    <p class="text-sm text-gray-600 mb-3">从零开始，手把手教你入驻各大电商平台，选品、定价、上架全流程解析。</p>
                    <div class="flex items-center justify-between">
                        <div class="flex items-center">
                            <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=100&q=80" alt="讲师头像" class="w-6 h-6 rounded-full object-cover">
                            <span class="text-xs text-gray-500 ml-2">李老师 · 电商顾问</span>
                        </div>
                        <button class="text-green-600 text-sm font-medium">
                            开始学习
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 教程列表 -->
        <div class="px-4 pb-4">
            <h2 class="font-bold text-lg mb-3">全部教程</h2>

            <!-- 教程项 -->
            <div class="tutorial-card bg-white rounded-xl p-4 mb-3 shadow-sm">
                <div class="flex">
                    <img src="https://images.unsplash.com/photo-1589254065909-b7086229d08c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80" alt="教程缩略图" class="w-20 h-20 rounded-lg object-cover">
                    <div class="ml-3 flex-1">
                        <div class="flex items-center mb-1">
                            <span class="text-xs px-2 py-0.5 bg-blue-100 text-blue-800 rounded-full">商品拍摄</span>
                        </div>
                        <h3 class="font-medium text-sm">农产品拍摄技巧：让你的产品更有吸引力</h3>
                        <p class="text-xs text-gray-500 mt-1">15分钟 · 5.2万次播放</p>
                        <div class="flex items-center justify-between mt-1">
                            <span class="text-xs text-gray-500">王老师 · 摄影师</span>
                            <button class="text-xs text-green-600 font-medium">查看</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="tutorial-card bg-white rounded-xl p-4 mb-3 shadow-sm">
                <div class="flex">
                    <img src="https://images.unsplash.com/photo-1591696205602-2f950c417cb9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80" alt="教程缩略图" class="w-20 h-20 rounded-lg object-cover">
                    <div class="ml-3 flex-1">
                        <div class="flex items-center mb-1">
                            <span class="text-xs px-2 py-0.5 bg-purple-100 text-purple-800 rounded-full">文案撰写</span>
                        </div>
                        <h3 class="font-medium text-sm">农产品文案创作技巧，让顾客爱上你的产品</h3>
                        <p class="text-xs text-gray-500 mt-1">12分钟 · 3.8万次播放</p>
                        <div class="flex items-center justify-between mt-1">
                            <span class="text-xs text-gray-500">张老师 · 文案策划</span>
                            <button class="text-xs text-green-600 font-medium">查看</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="tutorial-card bg-white rounded-xl p-4 mb-3 shadow-sm">
                <div class="flex">
                    <img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80" alt="教程缩略图" class="w-20 h-20 rounded-lg object-cover">
                    <div class="ml-3 flex-1">
                        <div class="flex items-center mb-1">
                            <span class="text-xs px-2 py-0.5 bg-yellow-100 text-yellow-800 rounded-full">引流技巧</span>
                        </div>
                        <h3 class="font-medium text-sm">如何利用小红书引流，打造爆款农产品</h3>
                        <p class="text-xs text-gray-500 mt-1">20分钟 · 8.1万次播放</p>
                        <div class="flex items-center justify-between mt-1">
                            <span class="text-xs text-gray-500">赵老师 · 运营专家</span>
                            <button class="text-xs text-green-600 font-medium">查看</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="tutorial-card bg-white rounded-xl p-4 mb-3 shadow-sm">
                <div class="flex">
                    <img src="https://images.unsplash.com/photo-1542744173-8e7e53415bb0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80" alt="教程缩略图" class="w-20 h-20 rounded-lg object-cover">
                    <div class="ml-3 flex-1">
                        <div class="flex items-center mb-1">
                            <span class="text-xs px-2 py-0.5 bg-red-100 text-red-800 rounded-full">客户维护</span>
                        </div>
                        <h3 class="font-medium text-sm">客户复购率提升秘诀，让顾客持续下单</h3>
                        <p class="text-xs text-gray-500 mt-1">18分钟 · 4.5万次播放</p>
                        <div class="flex items-center justify-between mt-1">
                            <span class="text-xs text-gray-500">刘老师 · 客户关系专家</span>
                            <button class="text-xs text-green-600 font-medium">查看</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="tutorial-card bg-white rounded-xl p-4 shadow-sm">
                <div class="flex">
                    <img src="https://images.unsplash.com/photo-1533750516457-a7f992034fec?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80" alt="教程缩略图" class="w-20 h-20 rounded-lg object-cover">
                    <div class="ml-3 flex-1">
                        <div class="flex items-center mb-1">
                            <span class="text-xs px-2 py-0.5 bg-green-100 text-green-800 rounded-full">新手入门</span>
                        </div>
                        <h3 class="font-medium text-sm">农产品包装与发货，提升用户体验</h3>
                        <p class="text-xs text-gray-500 mt-1">16分钟 · 3.2万次播放</p>
                        <div class="flex items-center justify-between mt-1">
                            <span class="text-xs text-gray-500">孙老师 · 物流专家</span>
                            <button class="text-xs text-green-600 font-medium">查看</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 底部导航栏 -->
    <div class="fixed bottom-0 left-0 right-0 bg-white py-2 px-5 border-t border-gray-100">
        <div class="flex justify-between">
            <div class="bottom-nav-item flex flex-col items-center" data-link="home.html">
                <i class="fas fa-home text-xl"></i>
                <span class="text-xs mt-1">首页</span>
            </div>
            <div class="bottom-nav-item flex flex-col items-center" data-link="upload.html">
                <i class="fas fa-plus-circle text-xl"></i>
                <span class="text-xs mt-1">创建</span>
            </div>
            <div class="bottom-nav-item flex flex-col items-center active" data-link="tutorials.html">
                <i class="fas fa-book text-xl"></i>
                <span class="text-xs mt-1">教程</span>
            </div>
            <div class="bottom-nav-item flex flex-col items-center" data-link="profile.html">
                <i class="fas fa-user text-xl"></i>
                <span class="text-xs mt-1">我的</span>
            </div>
        </div>
    </div>

    <script src="js/common.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 教程点击事件
            document.querySelectorAll('.tutorial-item').forEach(item => {
                item.addEventListener('click', function() {
                    const tutorialTitle = this.querySelector('h3').textContent;
                    showToast(`正在加载: ${tutorialTitle}`, 'loading');

                    // 模拟加载教程内容
                    setTimeout(() => {
                        // 这里可以实现跳转到具体教程内容页面
                        showToast(`教程《${tutorialTitle}》已加载`, 'success');
                    }, 1500);
                });
            });

            // 过滤分类点击事件
            document.querySelectorAll('.category-filter').forEach(filter => {
                filter.addEventListener('click', function() {
                    document.querySelectorAll('.category-filter').forEach(f => {
                        f.classList.remove('active');
                    });
                    this.classList.add('active');

                    const category = this.textContent.trim();
                    showToast(`已筛选: ${category}`, 'info');
                });
            });

            // 搜索框事件
            const searchInput = document.querySelector('.search-input');
            if (searchInput) {
                searchInput.addEventListener('keyup', function(e) {
                    if (e.key === 'Enter') {
                        const searchTerm = this.value.trim();
                        if (searchTerm) {
                            showToast(`正在搜索: ${searchTerm}`, 'info');
                        }
                    }
                });
            }

            // 收藏按钮点击事件
            document.querySelectorAll('.favorite-btn').forEach(btn => {
                btn.addEventListener('click', function(e) {
                    e.stopPropagation(); // 防止触发教程项目的点击事件

                    const isFavorite = this.classList.contains('text-yellow-500');
                    const tutorialTitle = this.closest('.tutorial-item').querySelector('h3').textContent;

                    if (isFavorite) {
                        // 取消收藏
                        this.classList.remove('text-yellow-500');
                        this.classList.add('text-gray-300');
                        showToast(`已取消收藏: ${tutorialTitle}`, 'info');
                    } else {
                        // 添加收藏
                        this.classList.remove('text-gray-300');
                        this.classList.add('text-yellow-500');
                        showToast(`已收藏: ${tutorialTitle}`, 'success');
                    }
                });
            });
        });
    </script>
</body>
</html>