UI/index.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
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
<!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">
    <link rel="stylesheet" href="css/animations.css">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            background-color: #f8f9fa;
            color: #333;
            max-width: 100%;
            overflow-x: hidden;
        }
        .card {
            transition: all 0.3s ease;
            cursor: pointer;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        }
        .card:hover {
            transform: translateY(-6px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }
        .card-header {
            height: 180px;
            background-size: cover;
            background-position: center;
            display: flex;
            align-items: flex-end;
            position: relative;
        }
        .card-header::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
        }
        .card-content {
            position: relative;
            z-index: 1;
            width: 100%;
            padding: 15px;
            color: white;
        }
        .card-tag {
            display: inline-block;
            padding: 4px 8px;
            background-color: rgba(7, 193, 96, 0.8);
            color: white;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 500;
            margin-bottom: 8px;
        }
        .floating-btn {
            width: 60px;
            height: 60px;
            border-radius: 30px;
            background: linear-gradient(135deg, #07c160 0%, #0d9b77 100%);
            position: fixed;
            right: 20px;
            bottom: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            box-shadow: 0 5px 20px rgba(7, 193, 96, 0.3);
            transition: all 0.3s ease;
        }
        .floating-btn:hover {
            transform: scale(1.1);
        }
        .modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        .modal.show {
            display: flex;
            opacity: 1;
        }
        .modal-content {
            background-color: white;
            width: 80%;
            max-width: 400px;
            border-radius: 20px;
            padding: 30px;
            transform: scale(0.9);
            transition: transform 0.3s ease;
        }
        .modal.show .modal-content {
            transform: scale(1);
        }
        .btn-feature {
            width: 100%;
            padding: 15px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            background-color: #f8f9fa;
            margin-bottom: 15px;
            transition: all 0.3s ease;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
        }
        .btn-feature:hover {
            background-color: #f0fdf4;
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(7, 193, 96, 0.1);
        }
        .feature-icon {
            width: 50px;
            height: 50px;
            border-radius: 25px;
            background-color: rgba(7, 193, 96, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #07c160;
            font-size: 24px;
            margin-right: 15px;
        }
    </style>
</head>
<body>
    <!-- 页面标题 -->
    <header class="py-6 px-5 text-center">
        <h1 class="text-2xl font-bold text-gray-800 slide-down">
            <i class="fas fa-leaf text-green-500 mr-2"></i>
            助农宣传
        </h1>
        <p class="text-sm text-gray-500 mt-1 slide-up">智能生成精美宣传内容，助力农产品销售</p>
    </header>

    <!-- 主要内容 -->
    <div class="container mx-auto px-4 pb-24">
        <!-- 界面预览卡片 -->
        <div class="grid grid-cols-2 gap-4 mb-8">
            <!-- 首页卡片 -->
            <div class="card stagger-item" onclick="window.location.href='home.html'">
                <div class="card-header" style="background-image: url('https://images.unsplash.com/photo-1542838132-92c53300491e?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80')">
                    <div class="card-content">
                        <span class="card-tag">首页</span>
                        <h3 class="font-medium text-white">特色功能入口</h3>
                    </div>
                </div>
            </div>

            <!-- 上传卡片 -->
            <div class="card stagger-item" onclick="window.location.href='upload.html'">
                <div class="card-header" style="background-image: url('https://images.unsplash.com/photo-1579447167432-ba8b796e727d?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80')">
                    <div class="card-content">
                        <span class="card-tag">上传</span>
                        <h3 class="font-medium text-white">照片上传</h3>
                    </div>
                </div>
            </div>

            <!-- 预览卡片 -->
            <div class="card stagger-item" onclick="window.location.href='preview.html'">
                <div class="card-header" style="background-image: url('https://images.unsplash.com/photo-1611095971113-9f7e83e92e14?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80')">
                    <div class="card-content">
                        <span class="card-tag">预览</span>
                        <h3 class="font-medium text-white">内容预览</h3>
                    </div>
                </div>
            </div>

            <!-- 发布卡片 -->
            <div class="card stagger-item" onclick="window.location.href='publish.html'">
                <div class="card-header" style="background-image: url('https://images.unsplash.com/photo-1559136555-9303baea8ebd?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80')">
                    <div class="card-content">
                        <span class="card-tag">发布</span>
                        <h3 class="font-medium text-white">平台选择</h3>
                    </div>
                </div>
            </div>

            <!-- 教程卡片 -->
            <div class="card stagger-item" onclick="window.location.href='tutorials.html'">
                <div class="card-header" style="background-image: url('https://images.unsplash.com/photo-1532619675605-1ede6c2ed2b0?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80')">
                    <div class="card-content">
                        <span class="card-tag">教程</span>
                        <h3 class="font-medium text-white">电商指南</h3>
                    </div>
                </div>
            </div>

            <!-- 个人中心卡片 -->
            <div class="card stagger-item" onclick="window.location.href='profile.html'">
                <div class="card-header" style="background-image: url('https://images.unsplash.com/photo-1608453162650-08e27f013e04?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80')">
                    <div class="card-content">
                        <span class="card-tag">我的</span>
                        <h3 class="font-medium text-white">个人中心</h3>
                    </div>
                </div>
            </div>

            <!-- 数据分析卡片 -->
            <div class="card stagger-item" onclick="window.location.href='analytics.html'">
                <div class="card-header" style="background-image: url('https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80')">
                    <div class="card-content">
                        <span class="card-tag">统计</span>
                        <h3 class="font-medium text-white">数据分析</h3>
                    </div>
                </div>
            </div>

            <!-- 营销日历卡片 -->
            <div class="card stagger-item" onclick="window.location.href='marketing_calendar.html'">
                <div class="card-header" style="background-image: url('https://images.unsplash.com/photo-1506784983877-45594efa4cbe?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80')">
                    <div class="card-content">
                        <span class="card-tag">日历</span>
                        <h3 class="font-medium text-white">营销日历</h3>
                    </div>
                </div>
            </div>

            <!-- 钱包卡片 -->
            <div class="card stagger-item" onclick="window.location.href='wallet.html'">
                <div class="card-header" style="background-image: url('https://images.unsplash.com/photo-1580048915913-4f8f5cb481c4?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80')">
                    <div class="card-content">
                        <span class="card-tag">钱包</span>
                        <h3 class="font-medium text-white">收入管理</h3>
                    </div>
                </div>
            </div>

            <!-- 商品表单卡片 -->
            <div class="card stagger-item" onclick="window.location.href='product_form.html'">
                <div class="card-header" style="background-image: url('https://images.unsplash.com/photo-1542372147193-a7aca54189cd?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80')">
                    <div class="card-content">
                        <span class="card-tag">商品</span>
                        <h3 class="font-medium text-white">商品管理</h3>
                    </div>
                </div>
            </div>

            <!-- 搜索卡片 -->
            <div class="card stagger-item" onclick="window.location.href='search.html'">
                <div class="card-header" style="background-image: url('https://images.unsplash.com/photo-1507925921958-8a62f3d1a50d?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80')">
                    <div class="card-content">
                        <span class="card-tag">搜索</span>
                        <h3 class="font-medium text-white">内容搜索</h3>
                    </div>
                </div>
            </div>

            <!-- 通知卡片 -->
            <div class="card stagger-item" onclick="window.location.href='notifications.html'">
                <div class="card-header" style="background-image: url('https://images.unsplash.com/photo-1555421689-491a97ff2040?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80')">
                    <div class="card-content">
                        <span class="card-tag">通知</span>
                        <h3 class="font-medium text-white">消息中心</h3>
                    </div>
                </div>
            </div>

            <!-- 会员卡片 -->
            <div class="card stagger-item" onclick="window.location.href='membership.html'">
                <div class="card-header" style="background-image: url('https://images.unsplash.com/photo-1619230506840-6eb132afef68?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80')">
                    <div class="card-content">
                        <span class="card-tag">会员</span>
                        <h3 class="font-medium text-white">会员特权</h3>
                    </div>
                </div>
            </div>

            <!-- 社区卡片 -->
            <div class="card stagger-item" onclick="window.location.href='community.html'">
                <div class="card-header" style="background-image: url('https://images.unsplash.com/photo-1543269865-cbf427effbad?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80')">
                    <div class="card-content">
                        <span class="card-tag">社区</span>
                        <h3 class="font-medium text-white">农友社区</h3>
                    </div>
                </div>
            </div>

            <!-- 商品详情卡片 -->
            <div class="card stagger-item" onclick="window.location.href='product_detail.html'">
                <div class="card-header" style="background-image: url('https://images.unsplash.com/photo-1457694716743-eb419114c894?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80')">
                    <div class="card-content">
                        <span class="card-tag">详情</span>
                        <h3 class="font-medium text-white">商品详情</h3>
                    </div>
                </div>
            </div>
        </div>

        <!-- 特色功能简介 -->
        <div class="text-center mb-6 slide-up">
            <h2 class="text-xl font-semibold text-gray-800">应用特色</h2>
            <p class="text-sm text-gray-500 mt-1">智能科技助力农产品营销</p>
        </div>

        <div class="grid grid-cols-1 gap-4 mb-8">
            <div class="bg-white p-4 rounded-2xl shadow-sm stagger-item">
                <div class="flex items-center">
                    <div class="w-12 h-12 bg-green-50 rounded-full flex items-center justify-center text-green-500 mr-4">
                        <i class="fas fa-magic text-xl"></i>
                    </div>
                    <div>
                        <h3 class="font-medium">AI智能生成</h3>
                        <p class="text-sm text-gray-500 mt-1">一键生成专业宣传文案和图文排版</p>
                    </div>
                </div>
            </div>

            <div class="bg-white p-4 rounded-2xl shadow-sm stagger-item">
                <div class="flex items-center">
                    <div class="w-12 h-12 bg-green-50 rounded-full flex items-center justify-center text-green-500 mr-4">
                        <i class="fas fa-share-alt text-xl"></i>
                    </div>
                    <div>
                        <h3 class="font-medium">多平台发布</h3>
                        <p class="text-sm text-gray-500 mt-1">支持小红书、微信、抖音等多平台一键发布</p>
                    </div>
                </div>
            </div>

            <div class="bg-white p-4 rounded-2xl shadow-sm stagger-item">
                <div class="flex items-center">
                    <div class="w-12 h-12 bg-green-50 rounded-full flex items-center justify-center text-green-500 mr-4">
                        <i class="fas fa-chart-line text-xl"></i>
                    </div>
                    <div>
                        <h3 class="font-medium">数据分析</h3>
                        <p class="text-sm text-gray-500 mt-1">实时跟踪内容表现，提供优化建议</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 快速操作按钮 -->
        <div class="floating-btn pulse" id="floatingBtn">
            <i class="fas fa-plus text-2xl"></i>
        </div>
    </div>

    <!-- 操作选择弹窗 -->
    <div class="modal" id="actionModal">
        <div class="modal-content">
            <h3 class="text-xl font-bold mb-4 text-center">快速操作</h3>

            <a href="upload.html" class="btn-feature">
                <div class="feature-icon">
                    <i class="fas fa-camera"></i>
                </div>
                <div>
                    <h4 class="font-medium">创建宣传图文</h4>
                    <p class="text-xs text-gray-500 mt-1">上传照片，智能生成宣传素材</p>
                </div>
            </a>

            <a href="analytics.html" class="btn-feature">
                <div class="feature-icon">
                    <i class="fas fa-chart-pie"></i>
                </div>
                <div>
                    <h4 class="font-medium">效果分析</h4>
                    <p class="text-xs text-gray-500 mt-1">查看宣传内容表现数据</p>
                </div>
            </a>

            <a href="tutorials.html" class="btn-feature">
                <div class="feature-icon">
                    <i class="fas fa-book-open"></i>
                </div>
                <div>
                    <h4 class="font-medium">教程中心</h4>
                    <p class="text-xs text-gray-500 mt-1">获取电商运营技巧</p>
                </div>
            </a>

            <button class="w-full bg-gray-100 py-3 rounded-lg mt-3 text-gray-700" id="closeModalBtn">
                取消
            </button>
        </div>
    </div>

    <script src="js/common.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 浮动按钮点击事件
            const floatingBtn = document.getElementById('floatingBtn');
            const actionModal = document.getElementById('actionModal');
            const closeModalBtn = document.getElementById('closeModalBtn');

            floatingBtn.addEventListener('click', function() {
                actionModal.classList.add('show');
            });

            closeModalBtn.addEventListener('click', function() {
                actionModal.classList.remove('show');
            });

            // 点击模态框外部关闭
            actionModal.addEventListener('click', function(e) {
                if (e.target === actionModal) {
                    actionModal.classList.remove('show');
                }
            });

            // 气泡背景效果
            createBubbleEffect();
        });
    </script>
</body>
</html>