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>

浙公网安备 33010602011771号