毕业设计——基于Web的城市充电桩指示系统（三）

最新推荐文章于 2024-09-13 10:46:15 发布

1ChangGeng

最新推荐文章于 2024-09-13 10:46:15 发布

阅读量112

点赞数

分类专栏：毕业设计文章标签：前端课程设计 ui

本文链接：https://blog.csdn.net/qq_46590172/article/details/129820448

版权

本文是毕业设计的一部分，主要介绍如何进行页面重构，以实现基于Web的城市充电桩指示系统的PC和手机端适配。通过媒体查询分别编写两套HTML和CSS代码，将平板分辨率归为手机页面。首页采用百度地图API，需注册成为开发者获取AK密钥，并在Vue项目中集成百度地图。虽然PC页面设计较为简单，但整个过程展示了前端开发中的响应式布局和API集成技巧。

摘要由CSDN通过智能技术生成

页面重构

根据ui设计图，先创建几个vue页面，然后在router里面配置路由
UI 总设计
router
因为我的想法是要写pc端和手机端的页面，所以需要先思考怎么做双端页面的适配，我选择的方法是用媒体查询，html和css分别写两套代码（样式差别较大，不适合做成一套）。因为pc和手机分辨率中间还有一部分是平板的分辨率，我们不写平板的页面，就偷个懒把它归到手机的页面里去了。

首页

	宽度在767px以下的屏幕，显示手机页面的代码，屏幕宽度大于768px的，显示pc页面的代码
	style部分：

@media only screen and (min-width: 768px) {
   
    .mobile {
   
        display: none !important;
    }
    .pc {
   
        display: block !important;