鸡汤来咯开发学习笔记-7

1.安装官方的扩展组件uni-icons图标

2.在index.vue的info中加入内容，以下代码，加入1中的图标

                    <view class="left">
                        <view class="item">
                            <uni-icons type="redo" size="28" color="#999"></uni-icons>
                            <text></text>
                        </view>
                        
                    </view>
                    <view class="right">
                        <view class="item">
                            <uni-icons type="heart" size="28" color="#999"></uni-icons>
                            <text></text>
                        </view>
                        <view class="item">
                            <uni-icons type="star" size="28" color="#999"></uni-icons>
                            <text></text>
                        </view>
                        <view class="item">
                            <uni-icons type="chatbubble" size="28" color="#999"></uni-icons>
                            <text></text>
                        </view>

3.删除info的测试边框样式，写入新的样式

.info{
                    
                    height: 130rpx;
                    display: flex;
                    justify-content: space-between;/* 均匀排列每个元素首个元素放置于起点，末尾元素放置于终点 */
                    align-items: center;
                    padding: 0 30rpx;
                    .item{
                        display: flex;
                        align-items: center;
                        padding: 10rpx 15rpx;
                        
                        
                    }
                    .left{
                        .item{
                            padding-left: 0;
                        }
                    }
                    .right{
                        
                        display: flex;
                        .item{
                            padding-right: 0;
                        }
                        
                    }
                }

4.在index.vue的info中加入内容，以下代码，加入选中图标

<view class="item">
                            <uni-icons v-if="true" type="heart" size="28" color="#999"></uni-icons>
                            <uni-icons v-else type="heart-filled" size="28" color="#dd524d"></uni-icons>
                            
                            <text>12</text>
                        </view>
                        <view class="item">
                            <uni-icons v-if="true" type="star" size="28" color="#999"></uni-icons>
                            <uni-icons v-else type="star-filled" size="28" color="#f0ad4e"></uni-icons>
                            
                            <text>34</text>