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

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

1ChangGeng

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

阅读量118

点赞数

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

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

版权

本文是毕业设计的一部分，详细介绍了如何利用Flex布局构建城市充电桩指示系统的前端页面，包括列表页、详情页和充电页。列表页通过v-for循环生成li，用flex布局调整内容布局。详情页和充电页的布局更为复杂，需要深入理解并灵活运用Flex布局，以解决页面适配和交互问题。此外，还涉及到了Vue中按钮的单选状态处理、元素的显示隐藏控制以及动态计算价格的逻辑。最后，针对页面验证逻辑进行了讨论，确保用户完整选择后才能进行下一步操作。

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

列表页及其后续页面

列表页

列表页没什么说的，用了ul加v-for循环生成li，每个li使用简单的flex布局，再在flex布局中使用局部的flex布局来调整内容布局
大flex
小flex

<ul class="list">
	<li v-for="item in items" class="item" :key="item.index">
        <router-link class="item_a" to="/detail">
        	<img src="@/assets/img/menu/logo.png" alt="" />
            	<div class="middle">
                	<span class="name">{
  { item.name }}</span>
                	<div>
                		<van-icon class="icon" name="location" />
                		<span class="far">{
  { item.far }}</span>
                	</div>
                    <span class="address">{
  { item.address }}</span>
                 </div>
                 <div class="right">
                 	<span class="price">{
  { item.price }}</span>
                    <div class="btn">{
  { item.btn }}</div>
                 </div>
         </router-link>
    </li>
</ul>

这里放一下flex布局有关的代码

// .list 主轴为横向，横向居中，自动换行
//（下面的li宽度写足够大，让一行放不开两个li）
.list {
   
	display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

// .middle 主轴改为纵向，在纵向上平均分布
.middle {
   
	display: flex;
    	flex-direction: column;
        justify-content: space-around;
}

详情页

这里的flex布局要比较复杂一点，写完这个页面之后，对于flex布局有了更深的理解。
想用好flex布局，要有整体和局部意识，整体应用flex布局以后，如果局部得不到想要的结果，就要考虑将局部看成一个整体，再使用flex布局，层层嵌套下去，就会得到预期的结果了。
li大概是这样的结构：
li的结构
经常使用flex布局，可以解决很多页面的适配问题，而且熟练以后也不会很繁琐，几个属性就搞定了。

充电页

充电页
这个页面的ui并不复杂，我在这个页面加了很多js，来做按钮的选择变色和判断。
按钮的选择，我参考了vue在多个按钮之间切换选中状态这篇文章
其中的原理就不过多赘述了

template：

<span class="middle_up_title">充电枪号</span>
<div class="middle_up">
	<van-button
        @click="changeChargeStyle($event, 1)"
        type="info"
        v-model="key"
    >
        1号
     </van-button>
     <van-button
         @click="changeChargeStyle($event, 2)"
         type="info"
         v-model="key"
     >
         2号
     </van-button>
     <van-button
         @click="changeChargeStyle($event, 3)"
         type="info"
         v-model="key"
     >
         3号
     </van-button>
     <van-button
         @click="changeChargeStyle($event, 4)"