实验仪器设备管理系统 - 高效便捷的实验室管理工具 - 常规

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>实验仪器设备管理系统 - 高效便捷的实验室管理工具</title>
    <link rel='stylesheet' href='https://unpkg.com/element-plus/lib/theme-chalk/index.css'>
    <style>
        .header {
            background-color: #304156;
            color: #fff;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
        }
        .header h1 {
            font-weight: bold;
            font-size: 28px;
            margin: 0;
        }
        .header a {
            color: #fff;
            font-size: 16px;
        }
        .content {
            display: flex;
            justify-content: space-around;
            align-items: center;
            margin-top: 30px;
        }
        .card {
            width: 300px;
            height: 200px;
            border-radius: 10px;
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background-color: #fff;
            transition: all 0.3s ease-in-out;
            cursor: pointer;
        }
        .card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 20px rgba(0, 0, 0, 0.2);
        }
        .card i {
            font-size: 48px;
            margin-bottom: 10px;
        }
        .card p {
            font-size: 20px;
            margin: 0;
        }
    </style>
</head>
<body>
    <div class='header'>
        <h1>实验仪器设备管理系统</h1>
        <a href='#'>退出登录</a>
    </div>
    <div class='content'>
        <div class='card'>
            <i class='el-icon-s-tools'></i>
            <p>设备管理</p>
        </div>
        <div class='card'>
            <i class='el-icon-s-data'></i>
            <p>数据管理</p>
        </div>
        <div class='card'>
            <i class='el-icon-s-operation'></i>
            <p>操作记录</p>
        </div>
    </div>
    <script src='https://unpkg.com/vue@next'></script>
    <script src='https://unpkg.com/element-plus/lib/index.full.js'></script>
</body>
</html>