山东大学软件学院创新项目实训DrugLLM-基于大语言模型的药物分子性质分析平台(七)

目录

本周进度

学习内容

本周进度

本周主要设计了前台的主页部分

学习内容

在最初想要设计一个类似于全屏轮播图的形式,展示项目的相关前沿论文,并设置可以直接导航到相应文章的按钮进行展示,最初想要通过VueUse的插件进行实现,通过vueUse的文档找到了轮播图的实现方式,但是最后因为vue版本过低,无法支持轮播图的插件。

于是采用element中的el-carousel轮播图插件进行实现,为了便于项目的统一,将轮播图重新设置了大小,设置了全屏展示,同时将按钮更改为圆形的按钮,使得界面更加美观:

下面进行了触发以及点击之后的渲染

设置全屏展示,其中不仅应该在外容器中设置全屏的效果,在内容器中也要设置相应的大小参数,其他的样式在此不做展示

之后进行了按钮的设计,由于element格式固定,因此需要采用!important进行相应参数的强制修改,最后实现效果如下:

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值