项目实训-vue(八)

项目实训-vue(八)

文章目录

  • 项目实训-vue(八)
    • 1.概述
    • 2.医院动态图像轮播
    • 3.页面背景板
    • 4.总结

1.概述

除了系统首页的轮播图展示之外,还需要在医院的首页展示医院动态部分的信息,展示医院动态是为了确保患者、家属以及广大公众能够及时了解医院的最新消息、活动和重要公告。这不仅有助于提高医院的透明度和可信度,还能增强与社区的互动和沟通。通过实时更新医院的动态信息,患者可以获取到最新的医疗服务变化、健康讲座、公益活动等内容,从而更好地安排自己的就诊和健康管理。同时,展示医院动态也有助于医院宣传其最新成就和进展,提升医院的形象和影响力。

2.医院动态图像轮播

在这里插入图片描述
医院首页之中此部分的代码在class为body的这一个div中,通过设置浮动布局来使其在水平方向上对齐,从而更好地实现页面的美观效果。

<div class="main_top_left"><el-carousel><el-carousel-item v-for="(image, index) in images2" :key="index"><!--  <h3 class="small">{{ item }}</h3> --><img :src="image.src" :alt="image.alt" class="carousel-img" /></el-carousel-item></el-carousel>
</div>           

上述这段代码定义了一个包含图片轮播组件的

元素。使用了 Element UI 框架中的 和 组件来创建一个轮播图。通过 v-for 指令,轮播图会迭代 images2 数组中的每一个图片对象,并为每个图片对象生成一个轮播项。每个图片对象包含 src 和 alt 属性,分别用于指定图片的路径和替代文本。在每个轮播项中,使用 标签来展示图片,并通过绑定 :src 和 :alt 属性动态设置图片的路径和替代文本。

接下来需要设置图像的轮播参数

 currentIndex2: 0,images2: [{src: require('@/assets/imgs/20240530130822.jpg'),alt: "Image 1",buttonSrc: buttonSrc, // 按钮图片},{src: require('@/assets/imgs/20240530130422.jpg'),alt: "Image 2",buttonSrc: buttonSrc, // 按钮图片},{src:  require('@/assets/imgs/20240530114916.jpg'),alt: "Image 3",buttonSrc: buttonSrc, // 按钮图片},],

这样就实现了图片的自动轮播功能。

效果如下:
在这里插入图片描述

3.页面背景板

/* 引入样式表文件 */
@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,600,600i,700,700i,900");.total {display: flex;flex-direction: column;
}

在我的网页设计中,我使用了自定义字体来增强文本的可读性和视觉效果。通过 @import 引入了来自 Google Fonts 的 Open Sans 和 Raleway 字体系列,这些字体具有多种字重和样式变体,使得文字在不同设备上展示清晰流畅。此外,我通过 .total 类定义了一个灵活的垂直列布局,采用了 Flexbox 技术。该布局使得元素依次排列在垂直方向上,从而优化了页面结构和用户体验。这种设计不仅使得内容易于浏览和阅读,还提升了网页的整体美观度和功能性。除此之外我在最外层的div中加入了一张背景板,从而使前端页面更加好看。

这段CSS代码展示了我在网页设计中注重字体选择和布局优化的实践,为读者带来了更好的阅读和浏览体验。

4.总结

展示医院动态的目的在于提供及时、透明的信息,使患者和公众能够随时了解医院的最新消息和活动,提升医院的公信力和社区参与度。前端技术的应用不仅限于视觉效果,更在于功能的实现和用户体验的优化。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/35996.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【PHP】控制摄像头缩放监控画面大小,并保存可视画面为图片

一、前言 功能描述 调用摄像头并可以控制缩放摄像头监控画面的大小&#xff0c;把可视画面保存为图片。 我使用的是USB摄像头&#xff0c;其他摄像头此方法应该也通用。 使用技术 使用到的技术比较简单&#xff0c;前端使用WebcamJS插件调用摄像头&#xff0c;并摄像头监控…

shell实用脚本1

参考公众号民工哥技术之路 场景一&#xff1a; 有两台服务器&#xff0c;a服务器的IP为11.0.1.18&#xff0c;b服务器的IP为11.0.1.12&#xff0c;都有个目录/app/tmp/test&#xff0c;我们需要比较这个目录里面的文件的一致性 #!/bin/bash ################################…

《mysql》--mysql约束

数据库约束 有的时候数据库中的数据是有一定要求的&#xff0c;有些数据认为是合法数据&#xff0c;有些是非法数据&#xff0c;如果靠人工检查显然是不靠谱的&#xff1b; 数据库会自动的对数据的合法性进行校验检查目的就是&#xff0c;保证数据中能够避免被插入/修改一些非…

Linux基础 - 使用 ssh 服务管理远程主机(window linux vscode)

目录 零. 简介 一. 打开linux shh 二. window连接linux 三. linux连接linux 四. VSCode远程 零. 简介 SSH&#xff08;Secure Shell&#xff09;服务是一种网络协议&#xff0c;主要用于在不安全的网络环境中为计算机之间的通信提供安全的加密连接。 SSH 服务具有以下重要…

二、安装虚拟机

本篇来源&#xff1a;山海同行 本篇地址&#xff1a;https://shanhaigo.cn/courseDetail/1805875642621952000 本篇资源&#xff1a;以整理到-山海同行 一、官网下载centos7 1. 进入CentOS 官方网站 官方网站&#xff1a;https://www.centos.org/download/ 2. 选择iso 点击下…

Java中的注解:原理与实战

Java中的注解&#xff1a;原理与实战 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01; Java注解&#xff08;Annotation&#xff09;是一种用于在代码中添加元数…

在nginx服务器发布项目以及在tomcat服务器发布项目

在nginx服务器发布项目&#xff1a; nginx有一个“热部署”或“无缝升级”的特性&#xff0c;这意味着在不停止服务的情况下&#xff0c;也可以更新配置文件和html文件夹。 如果上传的是配置文件&#xff0c;或者修改了nginx的配置&#xff0c;那么可能需要重启nginx来应用这…

高中数学:不等式-常用不等式知识点汇总

一、基本性质 比较大小的常用两种方法&#xff1a;作差法&#xff0c;作商法 等式性质 不等式性质 二、基本(均值)不等式 扩展 三、二次函数与一元二次方程不等式 定义 解的对应关系 一元二次不等式的求解过程 四、二元一次不等式(组)与线性规划 关键在于求多个不等…

无线领夹麦克风怎么挑选,能让声音变好听的领夹麦推荐大全

近年来&#xff0c;随着直播销售和个人视频日志&#xff08;Vlog&#xff09;的流行&#xff0c;自媒体内容创作已经成为一种文化现象。这一现象不仅改变了人们获取信息的方式&#xff0c;也极大地推动了相关音频设备的发展。无线领夹麦克风&#xff0c;以其轻巧的设计和出色的…

MySQL数据库基础练习系列:科研项目管理系统

DDL CREATE TABLE Users (user_id INT AUTO_INCREMENT PRIMARY KEY COMMENT 用户ID,username VARCHAR(50) NOT NULL UNIQUE COMMENT 用户名,password VARCHAR(255) NOT NULL COMMENT 密码,gender ENUM(男, 女) NOT NULL COMMENT 性别,email VARCHAR(100) UNIQUE COMMENT 邮箱 …

【杂记-浅谈VRRP虚拟路由器冗余协议】

一、VRRP协议概述 VRRP&#xff0c;Virtual Router Redundancy Protocol&#xff0c;即虚拟路由器冗余协议&#xff0c;是一种用于提高网络可靠性和容错能力的协议。它能够在多个路由器之间共享一个虚拟IP地址&#xff0c;当主路由器失效时&#xff0c;备用路由器可以接管虚拟…

字节码编程ASM之idea插件asm bytecode outline的使用

写在前面 直接用ASM来编写字节码程序难度其实还是蛮大的&#xff0c;为此&#xff0c;就有热心人事开发了相关的idea插件 &#xff0c;其中比较优秀的一个是asm bytecode outline,本文就来一起看下如何使用。 1&#xff1a;安装 file->setting->plugins,搜索asm bytec…

gin-vue-amdin 新增路由

1&#xff1a;在api目录的example 下新建controller 层如下图&#xff08;&#xff09;&#xff1a; 在enter.go 中 加入 这个新建的结构体&#xff1a; 2&#xff1a;在router 的example 文件夹下 新建对应的路由文件 3&#xff1a;在initlize 的router 中 添加对应的代码&a…

PDF处理篇:有哪些免费的PDF注释工具

PDF 是一种功能强大的格式&#xff0c;广泛用于处理和传输数据。您可以创建自己的 PDF 文件&#xff0c;也可以使用其他人创建的 PDF 文件。但是&#xff0c;有时您想在 PDF 文件中包含其他文本、图形和其他元素。这就是 PDF 注释器为您提供帮助的地方。 有许多可用的 PDF 注释…

Bazel与Gradle工具差异

之前介绍Bazel文章中有同学闻到Bazel与Gradle工具的差异。这篇文章我们解答这个问题。 来自Bazel员工的说法 Bazel和Gradle强调构建体验的不同方面。在某种程度上,它们的侧重点是互斥的——Gradle对灵活性和非突出性的要求对它的构建结构进行了限制,而Bazel对可靠性和性能的…

无线领夹麦克风品牌排名,揭秘哪种领夹麦性价比高!

在直播电商和Vlog的热潮推动下&#xff0c;自媒体内容创作迎来了前所未有的繁荣。麦克风行业也因应这一趋势&#xff0c;迎来了快速的增长期。特别是无线领夹麦克风&#xff0c;以其便携性和高效的录音能力&#xff0c;迅速成为视频制作者的新宠。它不仅在直播带货和短视频制作…

allure安装教程

1、下载 allure的官网下载地址&#xff1a; https://github.com/allure-framework/allure2/releases 注意&#xff1a;官网时常访问失败&#xff0c;可以访问以下网址&#xff1a; https://repo.maven.apache.org/maven2/io/qameta/allure/allure-commandline/ 选择一个版本&…

Qt实现开机自启两种方法包含注意事项以及常见问题解决

Qt开机自启教程 Qt是一个跨平台的C++框架,用于开发图形用户界面应用程序,同时也支持其他类型的应用程序开发,如命令行工具、服务器、嵌入式设备应用程序等。用户在虚拟机开发后使用交叉编译器放到设备中设置开机自启,以下是两种常用的方法。 通过Systemd 设置开机自启 1…

C++ CMake 预定义宏与变量

宏/变量 说明 CMAKE_SOURCE_DIR 顶层 CMakeLists.txt 所在的目录 CMAKE_BINARY_DIR 构建输出目录的顶层路径 CMAKE_CURRENT_SOURCE_DIR 当前处理的 CMakeLists.txt 所在的路径 CMAKE_CURRENT_BINARY_DIR 当前处理的 CMakeLists.txt 输出的构建目录 CMAKE_CURRENT_LIS…

Uniapp的使用

为什么要使用uniapp uniapp 可以进行多端开发&#xff0c;uniapp 在设计的时候就拥有许多兼容性代码&#xff0c;可以兼容很多的平台 如 支付宝小程序 html页面 微信小程序等&#xff0c;注重开发效率而不是运行效率时 &#xff0c;就可以考虑一下 uniapp 当然也可以去…