12.6日报

今天完成软件构造实验以及软件企业文化的论文，以下为实验内容，

Flash动画的编写：

<template>
  <div>
    <!-- 顶部导航栏 -->
    <div
        style="height: 60px; background-color: #fff; display: flex; align-items: center; border-bottom: 1px solid #ddd">
      <div style="flex: 1">
        <div style="padding-left: 20px; display: flex; align-items: center">
          <!-- 网站logo -->
          <img src="@/assets/imgs/img.png" alt="" style="width: 40px">
          <!-- 网站标题 -->
          <div style="font-weight: bold; font-size: 24px; margin-left: 5px">Flash动画播放</div>
        </div>
      </div>
    </div>

    <!-- 主内容区域 -->
    <div style="display: flex">
      <!-- 侧边导航栏 -->
      <div style="width: 180px; border-right: 1px solid #ddd; min-height: calc(100vh - 60px); padding: 10px">
        <el-menu
            router
            style="border: none; background-color: #f0f0f0"
            :default-active="$route.path"
            :default-openeds="['/home', '1']"
        >

          <!-- 系统首页菜单项 -->
          <el-menu-item index="/home">
            <el-icon><HomeFilled style="width: 24px; height: 24px"/></el-icon>
            <span>系统首页</span>
          </el-menu-item>

          <!-- 样例动画菜单 -->
          <el-sub-menu index="1">
            <template #title>
              <el-icon><Share style="width: 24px; height: 24px"/></el-icon>
              <span>样例动画</span>
            </template>
            <!-- 样例动画菜单项 -->
            <el-menu-item index="/flash1">
              <el-icon><Platform style="width: 24px; height: 24px"/></el-icon>
              <span>公园</span>
            </el-menu-item>
            <!-- 样例动画二菜单项 -->
            <el-menu-item index="/flash2">
              <el-icon><Platform style="width: 24px; height: 24px"/></el-icon>
              <span>桥</span>
            </el-menu-item>
            <!-- 样例动画三菜单项 -->
            <el-menu-item index="/flash3">
              <el-icon><Platform style="width: 24px; height: 24px"/></el-icon>
              <span>黄昏</span>
            </el-menu-item>
          </el-sub-menu>

          <!-- 自制动画菜单 -->
          <el-sub-menu index="2">
            <template #title>
              <el-icon><Share style="width: 24px; height: 24px"/></el-icon>
              <span>自制动画</span>
            </template>
            <!-- 自制动画一菜单项 -->
            <el-menu-item index="/sample1">
              <el-icon><Platform style="width: 24px; height: 24px"/></el-icon>
              <span>钢琴</span>
            </el-menu-item>
            <!-- 自制动画二菜单项 -->
            <el-menu-item index="/sample2">
              <el-icon><Platform style="width: 24px; height: 24px"/></el-icon>
              <span>女孩</span>
            </el-menu-item>
            <!-- 自制动画三菜单项 -->
            <el-menu-item index="/sample3">
              <el-icon><Platform style="width: 24px; height: 24px"/></el-icon>
              <span>乡村</span>
            </el-menu-item>
          </el-sub-menu>
        </el-menu>
      </div>

      <!-- 路由视图区域 -->
      <div style="flex: 1; width: 0; background-color: #f8f8ff; padding: 10px">
        <router-view/>
      </div>
    </div>
  </div>
</template>

<script setup>
import {useRoute} from 'vue-router'
import {HomeFilled, Share, Avatar, Platform} from '@element-plus/icons-vue'

const $route = useRoute()
</script>

<style scoped>
.el-menu {
  background-color: #f0f0f0;
}

.el-menu-item {
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: background-color 0.3s, color 0.3s;
}

.el-menu-item.is-active {
  background-color: #cfe8d7 !important;
}

.el-menu-item:hover {
  color: #16a085;
}
</style>