html_ppt/slide_17.html at main · Haaaiawd/html_ppt · 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
<!DOCTYPE html>
<html lang="zh">
<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://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700&family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="navigation.css">
    <style>
        body, html {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        .slide {
            width: 100vw;
            height: 100vh;
            background-color: #F5F5F5;
            position: relative;
            overflow: hidden;
            font-family: 'Open Sans', 'Noto Sans SC', sans-serif;
            display: flex;
            flex-direction: column;
        }
        .title {
            font-family: 'Montserrat', 'Noto Sans SC', sans-serif;
            font-weight: 700;
            color: #1A1A1A;
        }
        .accent {
            color: #FF6B00;
        }
        .background-pattern {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            opacity: 0.07;
            background-image: radial-gradient(circle, #FF6B00 1px, transparent 1px);
            background-size: 30px 30px;
        }
        .header {
            padding: 40px 80px 20px 80px;
        }
        .content {
            flex: 1;
            padding: 0 80px;
            display: flex;
            align-items: center;
            justify-content: center; /* Center content horizontally */
        }
        /* Remove left/right column styles for this slide */
        .case-study-content {
            font-size: 1.5rem;
            line-height: 1.6;
            color: #4A5568;
            max-width: 900px; /* Limit width for better readability */
            width: 100%; /* Ensure it takes full width up to max-width */
        }
        /* Remove image placeholder styles as it's not needed */
        .footer {
            padding: 20px 80px 40px 80px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
    </style>
</head>
<body>
    <div class="slide">
        <!-- Background pattern -->
        <div class="background-pattern"></div>

        <!-- Header -->
        <div class="header">
            <div class="flex items-center">
                <i class="fas fa-lightbulb text-2xl accent mr-4"></i>
<h1 class="title text-4xl">结论与思考 <span class="text-3xl text-gray-500">(1/2)</span> - 总结与展望</h1>
            </div>
            <div class="h-1 w-32 bg-gradient-to-r from-transparent via-orange-500 to-transparent mt-2"></div>
        </div>

        <!-- Main content -->
        <div class="content">
            <div class="flex w-full h-full items-start gap-12">
                <!-- Text Content Column -->
                <div class="w-1/2">
                    <div class="case-study-content">
                        <h2 class="text-2xl font-bold mb-4">总结与展望</h2>
                        <p class="mb-4">计算机视觉作为一项关键技术，在推动智慧仓储发展中展现出巨大潜力。它通过赋能自动化、智能化操作，显著提升了仓储效率、准确性和安全性。</p>
                        <ul class="list-disc list-inside mb-4">
                            <li>自动化识别与分拣</li>
                            <li>精准库存管理与盘点</li>
                            <li>实时监控与安全保障</li>
                            <li>协同机器人与自动化设备</li>
                            <li>数据驱动的决策优化</li>
                        </ul>
                        <p>尽管面临数据、环境和系统集成等挑战，但随着技术的不断进步和应用场景的拓展，计算机视觉在智慧仓储领域的未来充满希望。持续的技术创新和跨领域合作将是克服挑战、实现更高级智能化的关键。</p>
                    </div>
                </div>
                <!-- Visual Element Placeholder Column -->
                <div class="w-1/2 flex items-center justify-center bg-gray-200 rounded-lg p-8">
                    <svg viewBox="0 0 500 400" xmlns="http://www.w3.org/2000/svg">
                        <style>
                            .label-text { font-family: 'Open Sans', 'Noto Sans SC', sans-serif; font-size: 11px; fill: #1A1A1A; text-anchor: middle; }
                            .future-text { font-family: 'Montserrat', 'Noto Sans SC', sans-serif; font-size: 16px; fill: #FF6B00; text-anchor: middle; font-weight: bold;}
                        </style>
                        <defs>
                            <linearGradient id="futurePathGradient" x1="0%" y1="100%" x2="0%" y2="0%">
                                <stop offset="0%" stop-color="#FF6B00" stop-opacity="0.2"/>
                                <stop offset="100%" stop-color="#FF6B00" stop-opacity="1"/>
                            </linearGradient>
                            <filter id="glow">
                                <feGaussianBlur stdDeviation="2.5" result="coloredBlur"/>
                                <feMerge>
                                    <feMergeNode in="coloredBlur"/>
                                    <feMergeNode in="SourceGraphic"/>
                                </feMerge>
                            </filter>
                        </defs>

                        <!-- Summary Node (Central) -->
                        <g transform="translate(250, 250)">
                            <circle cx="0" cy="0" r="45" fill="#1A1A1A"/>
                            <path d="M-20-10 L0-25 L20-10 M-15 0 L0-15 L15 0 M-20 10 L0-5 L20 10" fill="none" stroke="#FF6B00" stroke-width="2"/>
                            <text y="5" fill="#F5F5F5" font-size="14" text-anchor="middle" dominant-baseline="middle">总结</text>
                        </g>

                        <!-- Technology Aspect (Left) -->
                        <g transform="translate(100, 150)">
                            <circle cx="0" cy="0" r="30" fill="#4A5568"/>
                            <path d="M0-12 L5-2 L0 8 L-5-2 Z M0-8 a 8 8 0 0 1 0 16 a 8 8 0 0 1 0-16" fill="#1A1A1A" stroke="#F5F5F5" stroke-width="1"/>
                            <circle cx="0" cy="0" r="3" fill="#F5F5F5"/>
                            <text y="45" class="label-text">技术</text>
                        </g>
                        <path d="M130 150 Q 190 200 220 230" stroke="#4A5568" stroke-width="2" fill="none" stroke-dasharray="5,3"/>

                        <!-- Application Aspect (Center-Bottom) -->
                        <g transform="translate(250, 350)">
                            <rect x="-25" y="-15" width="50" height="30" rx="5" fill="#4A5568"/>
                            <rect x="-15" y="-5" width="10" height="10" fill="#FF6B00"/> <rect x="5" y="-5" width="10" height="10" fill="#FF6B00"/>
                            <text y="35" class="label-text">应用</text>
                        </g>
                        <path d="M250 320 Q 250 290 250 280" stroke="#4A5568" stroke-width="2" fill="none" stroke-dasharray="5,3"/>

                        <!-- Challenges Aspect (Right) -->
                        <g transform="translate(400, 150)">
                            <path d="M-20-15 L0 5 L20-15 L10 5 L-10 5 Z" fill="#4A5568"/>
                             <path d="M-15-5 Q-5 0 0 5 Q5 0 15-5" fill="none" stroke="#FF6B00" stroke-width="2" stroke-linecap="round"/>
                            <text y="45" class="label-text">挑战</text>
                        </g>
                        <path d="M370 150 Q 310 200 280 230" stroke="#4A5568" stroke-width="2" fill="none" stroke-dasharray="5,3"/>

                        <!-- Future Outlook Path -->
                        <path d="M250 200 Q250 150 250 50" stroke="url(#futurePathGradient)" stroke-width="15" fill="none" stroke-linecap="round"/>
                        <circle cx="250" cy="40" r="20" fill="#FF6B00" style="filter:url(#glow)"/>
                        <path d="M245 45 l5-10 l5 10 M250 35 V25" stroke="#FFF" stroke-width="2" stroke-linecap="round"/>
                        <text x="250" y="-5" class="future-text">未来展望</text>

                    </svg>
                </div>
            </div>
        </div>

        <!-- Footer with page number -->
        <div class="footer">
            <div class="flex items-center">
                <div class="w-6 h-6 rounded-full bg-gray-300 flex items-center justify-center mr-2">
                    <i class="fas fa-microchip text-xs text-gray-600"></i>
                </div>
                <span class="text-sm text-gray-500">视觉融合新力量</span>
            </div>
<div class="footer-placeholder text-sm text-gray-500">17 / 18</div>
        </div>
    </div>
<script src="navigation.js"></script>
</body>
</html>