做一个VUE项目(二 模仿一个牙科医院—— 布局分析)

前言,因为是模仿,所以不去查看任何有页面的代码,只是就样式进行分析以及功能的实现技术

页面分析

在百度上随便找一个牙科医院简单的宣传页面分析布局,就上图而言
整个页面是一个类似聊天页面的东西
前面有三条语句,页面提示是历史消息,我试了试,每次刷新都存在,所以轮播和上面的语句应该是写死了的,也不排除是后端动态加载的,不过无关紧要,先把样式写出来数据哪里来都一样
中间有一个轮播轮播的图片块,有标题,头像,文字,简介和认证等
轮播下是一个正常聊天界面,输入输出的数据可以在页面显示,不过离开刷新后数据被刷新,无保留
最下方是功能栏
功能栏上方有一个悬浮的电话咨询
功能栏中有一个输入框输入框可以插入图片和文字,表情,那个田字格无功能

功能实现分析

实现难点

1. 轮播图实现
2. 动态添加聊天数据
3. 聊天数据获取
4. 图片上传

实现方法

所有功能均采用elmentui实现

1. 轮播实现 采用elementui Carousel 走马灯实现
2. 动态添加聊天数据 自定义聊天组件,所有数据通过传入组件来动态显示到页面
   3.聊天数据获取 后台采用django 获取数据用http轮询获取,获取时间为1s一次
   4.图片上传 后台采用django 上传回显用image标签 在聊天子组件中将图片样式写死即可

可添加功能

qq客服聊天功能 -通过连接的方式,在电脑有qq的情况下,向客服qq发起聊天
轮播转动的同时,轮播页面文字变化-将轮播块做成子组件插入,所有变化都在子组件发起

明天开始写代码,先主体框架
随后轮播组件
最后聊天子组件
关注我,带你一点点写自己的网站