什么网站做的最好,手机网站分辨率做多大,wordpress表情按钮,wordpress mxtheme02山东大学软件学院创新项目实训开发日志——收尾篇
项目名称#xff1a;ModuFusion Visionary#xff1a;实现跨模态文本与视觉的相关推荐
-------项目目标#xff1a; 本项目旨在开发一款跨模态交互式应用#xff0c;用户可以上传图片或视频#xff0c;并使用文本、点、…山东大学软件学院创新项目实训开发日志——收尾篇
项目名称ModuFusion Visionary实现跨模态文本与视觉的相关推荐
-------项目目标 本项目旨在开发一款跨模态交互式应用用户可以上传图片或视频并使用文本、点、框等提示精确分割出图片或视频中指定的物体或者无提示地分割出所有物体。基于分割出的物体用户可以选择生成感兴趣的其他图片或视频。内置推荐算法可以自动根据分割结果推荐与之相关的信息。 收尾工作完成项目主页开发
1. 视频轮播组件的实现
项目主页的顶部计划实现一个视频轮播组件要求视频自动播放、循环播放且不显示播放控件。为此我使用了 el-carousel 组件并对视频标签进行了配置
el-carousel indicator-positionoutside height600pxel-carousel-item v-forvideo in videoSources :keyvideovideo :srcvideo autoplay muted loop classcarousel-video/video/el-carousel-item
/el-carousel通过设置 autoplay、muted 和 loop 属性实现了视频的自动播放和循环播放同时隐藏了播放控件提升了用户体验。
2. 图像展示与悬浮效果
在顶部视频轮播图之下计划实现图像展示功能图像在悬浮时放大并显示覆盖文字。以下是部分代码展示
div classimage-container v-forsrc in imageSources1 :keysrc clickhandleImageClickimg :srcsrc :altImage src classrow-imagediv classimage-overlaypOverlay 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-activeactiveIndex2classel-menu-demomodehorizontalselecthandleSelectbackground-color#545c64text-color#fffactive-text-color#ffd04bel-menu-item index1精确分割/el-menu-itemel-menu-item index2-1智能生成/el-menu-itemel-menu-item index2-2相关推荐/el-menu-itemel-menu-item index2-3视频追踪/el-menu-itemel-menu-item index3风格变换/el-menu-item
/el-menu4. 按钮交互效果
在设计按钮交互效果时考虑到el-button的局限性太多最终决定使用自定义的 div 代替 el-button以便实现更灵活的样式和交互效果
div classaction-div primary-action clickprimaryButtonClickPrimary Action/div
div classaction-div secondary-action clicksecondaryButtonClickSecondary 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 :size50 stylemargin-right: 10px;component :isitem.icon /
/el-icon6.其他方面
其他方面包括主页底部的信息板块、整个项目的Logo设计等方面这里不再一一展示仅贴上项目的logo展示一下
