1

wanshenmean

2026-03-16 689dd676fc0efb31236d989334122590b7198d61

 Code/WCS/WIDESEAWCS_S7Simulator/WIDESEAWCS_S7Simulator.Web/src/App.vue

@@ -1,52 +1,78 @@
<template>
  <div id="app">
    <nav class="navbar navbar-expand-sm navbar-dark bg-primary shadow-sm mb-4">
      <div class="container-fluid">
        <router-link class="navbar-brand" to="/">
          <i class="bi bi-cpu-fill me-2"></i>S7 PLC Simulator
  <el-container class="app-container">
    <el-header class="app-header">
      <div class="header-content">
        <router-link to="/" class="logo">
          <el-icon :size="24"><Cpu /></el-icon>
          <span>S7 PLC Simulator</span>
        </router-link>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="navbar-collapse collapse">
          <ul class="navbar-nav flex-grow-1">
            <li class="nav-item">
              <router-link class="nav-link" to="/">
                <i class="bi bi-house-door me-1"></i>实例列表
              </router-link>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    </el-header>

    <div class="container-fluid px-4">
    <el-main class="app-main">
      <router-view />
    </div>
    </el-main>

    <footer class="border-top py-3 mt-4 bg-light">
      <div class="container-fluid text-center text-muted">
        <small>&copy; 2026 - S7 PLC Simulator Management UI</small>
      </div>
    </footer>
  </div>
    <el-footer class="app-footer">
      <span>&copy; 2026 - S7 PLC Simulator Management UI</span>
    </el-footer>
  </el-container>
</template>

<script setup lang="ts">
import { Cpu } from '@element-plus/icons-vue'
</script>

<style>
#app {
<style scoped>
.app-container {
  min-height: 100vh;
}

.app-header {
  background: #409eff;
  color: white;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.container-fluid {
.header-content {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  color: white;
  text-decoration: none;
  font-size: 18px;
  font-weight: 500;
}

.logo:hover {
  color: white;
}

.app-main {
  flex: 1;
  padding: 20px;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
}

.navbar-nav .nav-link.router-link-active {
.app-footer {
  text-align: center;
  color: #909399;
  border-top: 1px solid #dcdfe6;
  padding: 20px;
}

a.router-link-active {
  font-weight: bold;
}
</style>