html_ppt/slide_09.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
<!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;
        }
        .left-column {
            width: 50%;
            padding-right: 40px;
        }
        .right-column {
            width: 50%;
            padding-left: 40px;
        }
        /* Add specific styles for this slide here */
        .key-tech-list {
            list-style: none;
            padding: 0;
            margin: 0;
            font-size: 1.5rem;
            line-height: 2;
        }
        .key-tech-item {
            color: #4A5568;
            position: relative;
            padding-left: 30px;
            margin-bottom: 15px;
        }
        .key-tech-item:before {
            content: '\2022'; /* Bullet point */
            color: #FF6B00;
            position: absolute;
            left: 0;
            font-size: 2rem;
            line-height: 1;
        }
        .image-placeholder {
            width: 100%;
            height: 350px;
            background-color: rgba(255, 107, 0, 0.1);
            border: 2px dashed #FF6B00;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            color: #FF6B00;
            border-radius: 12px;
        }
        .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-cogs text-2xl accent mr-4"></i>
                <h1 class="title text-4xl">核心技术 <span class="text-3xl text-gray-500">(5/5)</span> - CV + 区块链</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="left-column">
                 <svg width="100%" height="350" viewBox="0 0 600 350" xmlns="http://www.w3.org/2000/svg">
                    <!-- Background -->
                    <rect width="600" height="350" fill="#F5F5F5"/>

                    <!-- Item being scanned -->
                    <rect x="100" y="150" width="100" height="100" fill="#FFFFFF" stroke="#1A1A1A" stroke-width="2" rx="5" ry="5"/>
                    <text x="150" y="205" text-anchor="middle" fill="#1A1A1A" font-size="16" font-family="Open Sans, Noto Sans SC, sans-serif">货物</text>

                    <!-- Scanning line -->
                    <line x1="100" y1="180" x2="200" y2="180" stroke="#FF6B00" stroke-width="3" stroke-dasharray="5,5"/>

                    <!-- Arrow to Blockchain -->
                    <line x1="200" y1="200" x2="300" y2="200" stroke="#FF6B00" stroke-width="3" marker-end="url(#arrowhead)"/>

                    <!-- Blockchain Blocks (slightly adjusted positions) -->
                    <rect x="300" y="160" width="60" height="50" fill="#1A1A1A" rx="5" ry="5"/>
                    <rect x="380" y="185" width="60" height="50" fill="#1A1A1A" rx="5" ry="5"/>
                    <rect x="460" y="210" width="60" height="50" fill="#1A1A1A" rx="5" ry="5"/>

                    <!-- Connecting Lines -->
                    <line x1="360" y1="185" x2="380" y2="185" stroke="#FF6B00" stroke-width="3"/>
                    <line x1="440" y1="210" x2="460" y2="210" stroke="#FF6B00" stroke-width="3"/>

                    <!-- Arrowhead Marker -->
                    <defs>
                        <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="0" refY="3.5" orient="auto">
                            <polygon points="0 0, 10 3.5, 0 7" fill="#FF6B00" />
                        </marker>
                    </defs>

                    <!-- Annotation -->
                    <text x="300" y="30" font-family="Open Sans, Noto Sans SC, sans-serif" font-size="14" fill="#1A1A1A" text-anchor="middle">CV + 区块链</text>

                </svg>
            </div>
            <div class="right-column">
                <h2 class="text-2xl font-bold mb-4">CV + 区块链：</h2>
                <ul class="key-tech-list">
                    <li class="key-tech-item">融合机制：CV记录物流节点信息，上链确保可信</li>
                    <li class="key-tech-item">核心应用：高价值商品追踪溯源，供应链透明化管理</li>
                    <li class="key-tech-item">主要价值：增强数据真实性与可靠性，降低信任风险</li>
                </ul>
            </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">9 / 18</div>
        </div>
    </div>
    <script src="navigation.js"></script>
</body>
</html>