山东大学软件学院创新项目实训开发日志——收尾篇

2024-06-19 19:44

本文主要是介绍山东大学软件学院创新项目实训开发日志——收尾篇,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

山东大学软件学院创新项目实训开发日志——收尾篇

项目名称:ModuFusion Visionary:实现跨模态文本与视觉的相关推荐

-------项目目标:

  • 本项目旨在开发一款跨模态交互式应用,用户可以上传图片或视频,并使用文本、点、框等提示,精确分割出图片或视频中指定的物体,或者无提示地分割出所有物体。
  • 基于分割出的物体,用户可以选择生成感兴趣的其他图片或视频。
  • 内置推荐算法可以自动根据分割结果,推荐与之相关的信息。
收尾工作完成:项目主页开发
1. 视频轮播组件的实现

项目主页的顶部,计划实现一个视频轮播组件,要求视频自动播放、循环播放且不显示播放控件。为此,我使用了 el-carousel 组件,并对视频标签进行了配置:

<el-carousel indicator-position="outside" height="600px"><el-carousel-item v-for="video in videoSources" :key="video"><video :src="video" autoplay muted loop class="carousel-video"></video></el-carousel-item>
</el-carousel>

通过设置 autoplaymutedloop 属性,实现了视频的自动播放和循环播放,同时隐藏了播放控件,提升了用户体验。
在这里插入图片描述

2. 图像展示与悬浮效果

在顶部视频轮播图之下,计划实现图像展示功能,图像在悬浮时放大,并显示覆盖文字。以下是部分代码展示:

<div class="image-container" v-for="src in imageSources1" :key="src" @click="handleImageClick"><img :src="src" :alt="'Image ' + src" class="row-image"><div class="image-overlay"><p>Overlay Text for Image</p></div>
</div>

并在样式中添加了悬浮效果的定义:

.image-container:hover .row-image {transform: scale(1.1);
}.image-overlay {opacity: 0;transition: opacity 0.3s ease;
}.image-container:hover .image-overlay {opacity: 1;
}

通过这些设置,实现了图像在悬浮时的放大效果及覆盖文字的显示,增加了页面的互动性和视觉效果。
在这里插入图片描述

3. 菜单导航与内容切换

之后实现了一个菜单导航系统,在选择不同的菜单项时,显示不同的项目内容。具体是使用 el-menu 组件来实现这个功能,并通过 @select 事件进行内容切换:

<el-menu:default-active="activeIndex2"class="el-menu-demo"mode="horizontal"@select="handleSelect"background-color="#545c64"text-color="#fff"active-text-color="#ffd04b"><el-menu-item index="1">精确分割</el-menu-item><el-menu-item index="2-1">智能生成</el-menu-item><el-menu-item index="2-2">相关推荐</el-menu-item><el-menu-item index="2-3">视频追踪</el-menu-item><el-menu-item index="3">风格变换</el-menu-item>
</el-menu>

在这里插入图片描述

4. 按钮交互效果

在设计按钮交互效果时,考虑到el-button的局限性太多,最终决定使用自定义的 div 代替 el-button,以便实现更灵活的样式和交互效果:

<div class="action-div primary-action" @click="primaryButtonClick">Primary Action</div>
<div class="action-div secondary-action" @click="secondaryButtonClick">Secondary Action</div>

并在样式中定义了按钮的外观和交互效果:

.action-div {width: 45%;height: 80px;line-height: 60px;text-align: center;padding: 10px;font-size: 20px;cursor: pointer;transition: background-color 0.3s, transform 0.3s;border-radius: 5px;
}.primary-action {background-color: #67c23a;color: white;
}.secondary-action {background-color: #ffffff;color: black;border: 1px solid;
}.action-div:hover {transform: scale(1.05);box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
5. 图标配置

之后是一个简单的“Why Choose Us”模块,简单介绍我们项目的亮点和优势。为了增强页面的视觉效果,我为每个服务模块配置了不同的图标,使用了 Element UI 提供的图标组件:

<el-icon :size="50" style="margin-right: 10px;"><component :is="item.icon" />
</el-icon>

在这里插入图片描述

6.其他方面

其他方面包括主页底部的信息板块、整个项目的Logo设计等方面,这里不再一一展示,仅贴上项目的logo展示一下:
在这里插入图片描述

这篇关于山东大学软件学院创新项目实训开发日志——收尾篇的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1075968

相关文章

Spring Boot + MyBatis Plus 高效开发实战从入门到进阶优化(推荐)

《SpringBoot+MyBatisPlus高效开发实战从入门到进阶优化(推荐)》本文将详细介绍SpringBoot+MyBatisPlus的完整开发流程,并深入剖析分页查询、批量操作、动... 目录Spring Boot + MyBATis Plus 高效开发实战:从入门到进阶优化1. MyBatis

Python基于wxPython和FFmpeg开发一个视频标签工具

《Python基于wxPython和FFmpeg开发一个视频标签工具》在当今数字媒体时代,视频内容的管理和标记变得越来越重要,无论是研究人员需要对实验视频进行时间点标记,还是个人用户希望对家庭视频进行... 目录引言1. 应用概述2. 技术栈分析2.1 核心库和模块2.2 wxpython作为GUI选择的优

SpringBoot日志配置SLF4J和Logback的方法实现

《SpringBoot日志配置SLF4J和Logback的方法实现》日志记录是不可或缺的一部分,本文主要介绍了SpringBoot日志配置SLF4J和Logback的方法实现,文中通过示例代码介绍的非... 目录一、前言二、案例一:初识日志三、案例二:使用Lombok输出日志四、案例三:配置Logback一

一文教你如何将maven项目转成web项目

《一文教你如何将maven项目转成web项目》在软件开发过程中,有时我们需要将一个普通的Maven项目转换为Web项目,以便能够部署到Web容器中运行,本文将详细介绍如何通过简单的步骤完成这一转换过程... 目录准备工作步骤一:修改​​pom.XML​​1.1 添加​​packaging​​标签1.2 添加

golang 日志log与logrus示例详解

《golang日志log与logrus示例详解》log是Go语言标准库中一个简单的日志库,本文给大家介绍golang日志log与logrus示例详解,感兴趣的朋友一起看看吧... 目录一、Go 标准库 log 详解1. 功能特点2. 常用函数3. 示例代码4. 优势和局限二、第三方库 logrus 详解1.

tomcat多实例部署的项目实践

《tomcat多实例部署的项目实践》Tomcat多实例是指在一台设备上运行多个Tomcat服务,这些Tomcat相互独立,本文主要介绍了tomcat多实例部署的项目实践,具有一定的参考价值,感兴趣的可... 目录1.创建项目目录,测试文China编程件2js.创建实例的安装目录3.准备实例的配置文件4.编辑实例的

利用Python开发Markdown表格结构转换为Excel工具

《利用Python开发Markdown表格结构转换为Excel工具》在数据管理和文档编写过程中,我们经常使用Markdown来记录表格数据,但它没有Excel使用方便,所以本文将使用Python编写一... 目录1.完整代码2. 项目概述3. 代码解析3.1 依赖库3.2 GUI 设计3.3 解析 Mark

如何自定义Nginx JSON日志格式配置

《如何自定义NginxJSON日志格式配置》Nginx作为最流行的Web服务器之一,其灵活的日志配置能力允许我们根据需求定制日志格式,本文将详细介绍如何配置Nginx以JSON格式记录访问日志,这种... 目录前言为什么选择jsON格式日志?配置步骤详解1. 安装Nginx服务2. 自定义JSON日志格式各

springboot集成Deepseek4j的项目实践

《springboot集成Deepseek4j的项目实践》本文主要介绍了springboot集成Deepseek4j的项目实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价... 目录Deepseek4j快速开始Maven 依js赖基础配置基础使用示例1. 流式返回示例2. 进阶

利用Go语言开发文件操作工具轻松处理所有文件

《利用Go语言开发文件操作工具轻松处理所有文件》在后端开发中,文件操作是一个非常常见但又容易出错的场景,本文小编要向大家介绍一个强大的Go语言文件操作工具库,它能帮你轻松处理各种文件操作场景... 目录为什么需要这个工具?核心功能详解1. 文件/目录存javascript在性检查2. 批量创建目录3. 文件