css代码优化

自学uni，css极简代码优化

感觉代码优化之后在后面想要改的时候就会尤为简单了！

<template>
	<view class="index-list">
		<view class="index-list1 u-f-ajc">
			<view class="u-f-ac u-f-c9">
				<image src="../../static/demo/userpic/1.jpg" mode="widthFix" lazy-load></image>
				昵称
			</view>
			<view class="u-f-ac">
				<view class="icon iconfont icon-zengjia"></view>关注
			</view>
		</view>
		<view class="index-list2 u-f-pt">我是标题</view>
		<view class="index-list3 u-f-pt">
			<image src="../../static/demo/datapic/1.jpg" mode="widthFix" lazy-load></image>
		</view>
		<view class="index-list4 u-f-ajc u-f-c9">
			<view class="u-f-ac">
				<view class="u-f-ac u-f-mr10"><view class="icon iconfont icon-icon_xiaolian-mian u-f-mr10"></view>10</view>
				<view class="u-f-ac"><view class="icon iconfont icon-kulian u-f-mr10"></view>10</view>
			</view>
			<view class="u-f-ac">
				<view class="u-f-ac u-f-mr10"><view class="icon iconfont icon-pinglun1 u-f-mr10"></view>10</view>
				<view class="u-f-ac"><view class="icon iconfont icon-zhuanfa u-f-mr10"></view>10</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	<!--请注意下面，下面是我封装的css代码，从而实现代码优化-->
	.u-f,.u-f-ac,.u-f-ajc{
		display: flex;
	}
	.u-f-ac,.u-f-ajc{
		align-items: center;
	}
	.u-f-ajc{
		justify-content: space-between;
	}
	.u-f-mr10{
		margin-right: 10upx;
	}
	.u-f-pt{
		padding-top: 15upx;
	}
	.u-f-c9{
		color: #999999;
	}
	<!--到此为止，封装完毕-->
	<!--所谓封装优化，就是把下面的重复的代码提取出来，单独封装成一个class，OK就这么简单-->
	.index-list{
		padding: 20upx;
		border-bottom: 1upx solid #EEEEEE;
	}
	.index-list1>view:last-child{
		background-color: #F4F4F4;
		border-radius: 5upx;
		padding: 0 10upx;
	}
	.index-list1>view:first-child image{
		width: 90upx;
		height: 90upx;
		border-radius: 100%;
		margin-right: 10upx;
	}
	.index-list2{
		font-size: 32upx;
	}
	.index-list3>image{
		width: 100%;
		border-radius: 20upx;
	}
	.index-list4{
		padding: 15px;
	}
	
</style>