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>