SUSE 计算机学习盒子 - 底部栏设计指南

<template>
	<!-- 底部栏 -->
	<view class='footer'>
		<view class='foot'>
			<view class='left-part1'>
				<img src='../../static/images/058f58c90bf666d325ce180eb683eb37.png' alt=''>
				<view class='title'>
					SUSE 计算机学习盒子
				</view>
			</view>
			<!-- 底部关于我们 -->
			<view class='right-part'>
				<view class='right-part1'>
					<view class='title'>
						探索
					</view>
					<view class='content'>
						关于我们<br v-for='i in 2'>
						服务<br v-for='i in 2'>
						博客
					</view>
				</view>
				<view class='right-part1'>
					<view class='title'>
						联系我们
					</view>
					<view class='content'>
						邮件<br v-for='i in 2'>
						电话<br v-for='i in 2'>
						地址<br v-for='i in 2'>
						社交网站
					</view>
				</view>
			</view>
<pre><code>	&lt;/view&gt;
	

&lt;/view&gt;
</code></pre>
</template>
<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>
<style>
.footer{
		background-color: #000000;
		padding: 2rem;
	}
.foot{
color: white;
	display: flex;
	flex-direction: row;
	justify-content: space-between;

}
.foot .left-part1{
	display: flex;
	align-items: center;
	flex-direction: row;	
	justify-content:start;
}
.foot .left-part1 img{
	width: 2rem;
	height: 1rem;
}
.foot .left-part1 .title{
	font-size: 1.5rem;
	font-weight: 600;
	margin-left: 0.5rem;
}
.foot .right-part{
	display: flex;
	flex-direction: row;
	margin-right: 6rem;
}
.foot .right-part1{
	display: flex;
	flex-direction: column;
	justify-content: start;
	margin-right: 9rem;
}
.foot .right-part1 .title{
	font-size: 1.2rem;
	margin-bottom: 1.2rem;
}
.foot .right-part1 .content{
	color: #BFBFBF;
	font-size: 0.8rem;
}
</style>
<p>在左侧部分，将图标和文字垂直对齐，可以使用flex布局和align-items属性。将.left-part1的样式修改如下：</p>
<pre><code class="language-css">.foot .left-part1{
	display: flex;
	align-items: center;
	flex-direction: row;	
	justify-content:start;
}
</code></pre>
<p>这样就可以实现图标和文字的垂直对齐了。</p>