使用 Element UI 构建科技感十足的实验仪器设备管理系统首页

很高，可以使用 Element UI 库和 Vue.js 框架来实现一个现代化的实验仪器设备管理系统首页。

以下是一个简单的示例代码，用于展示如何使用 Element UI 构建一个科技感十足的首页：

<template>
  <div class="dashboard">
    <!-- 顶部导航栏 -->
    <el-header class="header">
      <img class="logo" src="./assets/logo.png" alt="Logo">
      <el-menu class="menu" mode="horizontal" default-active="1">
        <el-menu-item index="1">首页</el-menu-item>
        <el-menu-item index="2">设备管理</el-menu-item>
        <el-menu-item index="3">实验记录</el-menu-item>
        <el-menu-item index="4">用户管理</el-menu-item>
      </el-menu>
      <el-dropdown class="user-menu" trigger="click">
        <span class="el-dropdown-link">
          <img class="avatar" src="./assets/avatar.png" alt="Avatar">
          {{ currentUser.name }}
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>个人信息</el-dropdown-item>
          <el-dropdown-item>退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-header>
    <!-- 内容区域 -->
    <el-main class="main">
      <div class="grid">
        <div class="card">
          <div class="card-header">
            <span class="title">待处理任务</span>
            <el-button size="mini" type="primary">查看全部</el-button>
          </div>
          <div class="card-content">
            <ul class="task-list">
              <li class="task-item">
                <span class="name">实验设备维修</span>
                <span class="time">2小时前</span>
              </li>
              <li class="task-item">
                <span class="name">实验数据分析</span>
                <span class="time">1天前</span>
              </li>
              <li class="task-item">
                <span class="name">设备订购审核</span>
                <span class="time">3天前</span>
              </li>
            </ul>
          </div>
        </div>
        <div class="card">
          <div class="card-header">
            <span class="title">实验设备统计</span>
            <el-button size="mini" type="primary">查看全部</el-button>
          </div>
          <div class="card-content">
            <div class="chart-container">
              <el-chart :options="deviceChartOptions"></el-chart>
            </div>
          </div>
        </div>
        <div class="card">
          <div class="card-header">
            <span class="title">最近实验记录</span>
            <el-button size="mini" type="primary">查看全部</el-button>
          </div>
          <div class="card-content">
            <ul class="record-list">
              <li class="record-item">
                <span class="name">实验名称</span>
                <span class="time">2021-01-01</span>
              </li>
              <li class="record-item">
                <span class="name">实验名称</span>
                <span class="time">2021-01-02</span>
              </li>
              <li class="record-item">
                <span class="name">实验名称</span>
                <span class="time">2021-01-03</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </el-main>
    <!-- 底部信息 -->
    <el-footer class="footer">
      © 2021 实验室管理系统
    </el-footer>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import { ElHeader, ElMenu, ElMenuItem, ElDropdown, ElDropdownItem, ElDropdownMenu, ElMain, ElButton, ElFooter, ElChart } from 'element-plus';

export default {
  components: {
    ElHeader,
    ElMenu,
    ElMenuItem,
    ElDropdown,
    ElDropdownItem,
    ElDropdownMenu,
    ElMain,
    ElButton,
    ElFooter,
    ElChart,
  },
  computed: {
    ...mapState(['currentUser']),
    deviceChartOptions() {
      return {
        title: {
          text: '实验设备统计',
        },
        tooltip: {},
        xAxis: {
          data: ['设备1', '设备2', '设备3', '设备4', '设备5', '设备6'],
        },
        yAxis: {},
        series: [{
          name: '数量',
          type: 'bar',
          data: [10, 20, 30, 40, 50, 60],
        }],
      };
    },
  },
};
</script>

<style scoped>
.dashboard {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
}

.logo {
  height: 40px;
}

.menu {
  border: none;
}

.user-menu {
  margin-left: auto;
}

.avatar {
  height: 20px;
  margin-right: 5px;
}

.main {
  flex-grow: 1;
  padding: 20px;
  background-color: #f4f4f4;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
}

.card {
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  border-bottom: 1px solid #eee;
}

.title {
  font-size: 16px;
  font-weight: bold;
}

.card-content {
  padding: 20px;
}

.task-list,
.record-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.task-item,
.record-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #eee;
}

.name {
  font-size: 14px;
}

.time {
  font-size: 12px;
  color: #999;
}

.chart-container {
  height: 300px;
}

.footer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  background-color: #f4f4f4;
}
</style>

该示例实现了以下功能：

• 顶部导航栏包括 Logo、菜单和用户信息；
• 内容区域使用网格布局展示待处理任务、实验设备统计和最近实验记录三个卡片；
• 卡片包括标题、查看全部按钮和内容区域；
• 待处理任务卡片使用无序列表展示任务名称和时间；
• 实验设备统计卡片使用折线图展示设备数量；
• 最近实验记录卡片使用无序列表展示实验名称和时间；
• 底部信息包括版权信息。

以上只是一个简单的示例，实际开发中还需要根据具体需求进行调整和优化。总体来说，Element UI 提供了丰富的组件和样式，可以帮助开发者快速构建出现代化的科技感页面。