5月28日

完成课堂测试

前端

<!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 rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        :root {
            --primary-color: #2c3e50;
            --secondary-color: #3498db;
            --light-bg: #f8f9fa;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: '微软雅黑', Arial, sans-serif;
        }

        /* 导航栏 */
        .navbar {
            background: var(--primary-color);
            padding: 1rem 5%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 1000;
        }

        .logo {
            color: white;
            font-size: 1.5rem;
            font-weight: bold;
        }

        .nav-links {
            display: flex;
            gap: 2rem;
        }

        .nav-links a {
            color: white;
            text-decoration: none;
            transition: color 0.3s;
        }

        .nav-links a:hover {
            color: var(--secondary-color);
        }

        /* 首页大图 */
        .hero {
            height: 80vh;
            background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)),
                        url('https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80');
            background-size: cover;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: white;
            margin-top: 60px;
        }

        .hero-content h1 {
            font-size: 3.5rem;
            margin-bottom: 1rem;
        }

        .cta-button {
            background: linear-gradient(45deg, var(--secondary-color), #2980b9);
            color: white;
            padding: 1rem 2rem;
            border-radius: 5px;
            text-decoration: none;
            display: inline-block;
            margin-top: 2rem;
            transition: transform 0.3s;
        }

        .cta-button:hover {
            transform: translateY(-3px);
        }

        /* 功能区块 */
        .features {
            padding: 4rem 5%;
            background: var(--light-bg);
        }

        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            margin-top: 2rem;
        }

        .feature-card {
            background: white;
            padding: 2rem;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            text-align: center;
        }

        .feature-icon {
            font-size: 2.5rem;
            color: var(--secondary-color);
            margin-bottom: 1rem;
        }

        /* 页脚 */
        footer {
            background: var(--primary-color);
            color: white;
            padding: 3rem 5%;
            margin-top: 4rem;
        }

        .footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2rem;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .nav-links {
                display: none;
            }

            .hero-content h1 {
                font-size: 2.5rem;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="logo">
            <i class="fas fa-industry"></i> 智造云
        </div>
        <div class="nav-links">
            <a href="index.html">首页</a>
            <a href="products.html">产品方案</a>
            <a href="solutions.html">行业解决方案</a>
            <a href="contact.html">联系我们</a>
            <a href="login.html" class="cta-button">系统登录</a>
        </div>
    </nav>

    <!-- 首页大图 -->
    <section class="hero">
        <div class="hero-content">
            <h1>智能制造管理云平台</h1>
            <p>助力企业实现数字化生产全流程管理</p>
            <a href="demo.html" class="cta-button">立即体验演示版</a>
        </div>
    </section>

    <!-- 核心功能 -->
    <section class="features">
        <h2 style="text-align: center; margin-bottom: 2rem;">系统核心功能</h2>
        <div class="features-grid">
            <div class="feature-card">
                <i class="fas fa-chart-line feature-icon"></i>
                <h3>智能排产</h3>
                <p>基于AI算法的动态生产计划排程</p>
                <a href="planning.html" class="cta-button">了解更多</a>
            </div>
            <div class="feature-card">
                <i class="fas fa-boxes feature-icon"></i>
                <h3>物料追溯</h3>
                <p>全流程物料追踪与质量回溯</p>
                <a href="material.html" class="cta-button">了解更多</a>
            </div>
            <div class="feature-card">
                <i class="fas fa-robot feature-icon"></i>
                <h3>设备联网</h3>
                <p>工业物联网设备实时监控</p>
                <a href="iot.html" class="cta-button">了解更多</a>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer>
        <div class="footer-content">
            <div>
                <h4>关于我们</h4>
                <p>致力于智能制造解决方案的科技创新企业</p>
            </div>
            <div>
                <h4>联系我们</h4>
                <p>电话: 400-800-1234</p>
                <p>邮箱: info@smartmfg.com</p>
            </div>
            <div>
                <h4>关注我们</h4>
                <p>
                    <a href="#"><i class="fab fa-weixin"></i></a>
                    <a href="#"><i class="fab fa-linkedin"></i></a>
                </p>
            </div>
        </div>
    </footer>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <style>
        .contact-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 3rem;
            padding: 4rem 5%;
        }

        .contact-form input,
        .contact-form textarea {
            width: 100%;
            padding: 0.8rem;
            margin-bottom: 1rem;
            border: 1px solid #ddd;
        }

        #map {
            height: 400px;
            background: #eee;
            border-radius: 10px;
        }
    </style>
</head>
<body>
    <nav class="navbar">
        <!-- 导航栏同首页 -->
    </nav>

    <div class="contact-container">
        <div>
            <h2>联系我们</h2>
            <div class="contact-info">
                <p><i class="fas fa-map-marker-alt"></i> 上海市浦东新区张江高科技园区</p>
                <p><i class="fas fa-phone"></i> 400-800-1234</p>
                <p><i class="fas fa-envelope"></i> contact@smartmfg.com</p>
            </div>
            <div id="map"><!-- 地图API嵌入 --></div>
        </div>

        <form class="contact-form">
            <input type="text" placeholder="姓名" required>
            <input type="email" placeholder="邮箱" required>
            <input type="tel" placeholder="联系电话">
            <textarea rows="5" placeholder="留言内容"></textarea>
            <button type="submit" class="cta-button">发送消息</button>
        </form>
    </div>

    <footer>
        <!-- 页脚同首页 -->
    </footer>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>系统登录 - 智造云</title>
    <style>
        body {
            font-family: "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
            background: #f5f5f5;
        }
        .login-container {
            width: 100%;
            max-width: 400px;
            margin: 100px auto;
            padding: 30px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 0 20px rgba(0,0,0,0.1);
        }
        h2 {
            color: #333;
            text-align: center;
            margin-bottom: 30px;
        }
        .form-group {
            margin-bottom: 20px;
        }
        .form-group label {
            display: block;
            margin-bottom: 8px;
            color: #555;
        }
        .form-group input {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 16px;
        }
        .login-btn {
            width: 100%;
            padding: 12px;
            background: #3498db;
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="login-container">
        <h2>系统登录</h2>
        <form>
            <div class="form-group">
                <label for="username">用户名</label>
                <input type="text" id="username" placeholder="请输入用户名">
            </div>
            <div class="form-group">
                <label for="password">密码</label>
                <input type="password" id="password" placeholder="请输入密码">
            </div>
            <button type="submit" class="login-btn">登 录</button>
        </form>
    </div>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!-- 共用样式同首页 -->
    <style>
        /* 新增产品页特定样式 */
        .product-hero {
            background: linear-gradient(rgba(44,62,80,0.9), rgba(44,62,80,0.9)),
                        url('https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80');
            padding: 6rem 5% 3rem;
            color: white;
        }

        .module-card {
            background: white;
            border-radius: 10px;
            padding: 2rem;
            margin: 2rem 0;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
    </style>
</head>
<body>
    <nav class="navbar">
        <!-- 导航栏同首页 -->
    </nav>

    <section class="product-hero">
        <h1>智能制造全流程解决方案</h1>
        <p>覆盖从订单到交付的全生命周期管理</p>
    </section>

    <div class="container" style="padding: 4rem 5%">
        <div class="module-card">
            <div class="flex-row">
                <i class="fas fa-shopping-cart fa-3x" style="color: #3498db; margin-right: 2rem"></i>
                <div>
                    <h2>智能销售管理</h2>
                    <ul>
                        <li>多维度订单评审流程</li>
                        <li>实时交期预测引擎</li>
                        <li>客户信用智能管控</li>
                    </ul>
                    <a href="sales-module.html" class="cta-button">查看详情</a>
                </div>
            </div>
        </div>

        <!-- 其他模块卡片类似结构 -->
    </div>

    <footer>
        <!-- 页脚同首页 -->
    </footer>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <style>
        .industry-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            padding: 4rem 5%;
        }

        .industry-card {
            position: relative;
            border-radius: 10px;
            overflow: hidden;
        }

        .industry-card img {
            width: 100%;
            height: 250px;
            object-fit: cover;
        }

        .industry-info {
            position: absolute;
            bottom: 0;
            background: rgba(44,62,80,0.8);
            color: white;
            padding: 1rem;
            width: 100%;
        }
    </style>
</head>
<body>
    <nav class="navbar">
        <!-- 导航栏同首页 -->
    </nav>

    <section class="hero" style="background-image: url('industry-bg.jpg')">
        <div class="hero-content">
            <h1>行业定制化解决方案</h1>
        </div>
    </section>

    <div class="industry-grid">
        <div class="industry-card">
            <img src="electronics.jpg" alt="电子制造">
            <div class="industry-info">
                <h3>电子制造行业</h3>
                <p>支持高精度物料追溯与快速换线管理</p>
            </div>
        </div>

        <!-- 其他行业卡片 -->
    </div>

    <footer>
        <!-- 页脚同首页 -->
    </footer>
</body>
</html>

 

posted @ 2025-05-29 08:00  KuanDong24  阅读(29)  评论(0)    收藏  举报