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

1.完成soup-item组件的布局和样式

<template>
    <view class="soupItem">
        <view class="head">
            <view class="left">
                <soup-tab-group></soup-tab-group>
            </view>
            <view class="right">
                <uni-icons type="eye" size="18" color="#999"></uni-icons>
                <text>详情</text>
            </view>
        </view>
        <view class="content">
            主体内容文字
        </view>
        <view class="info">
            <view class="left">
                <view class="time">2024-05-05 11:11:00</view>
            </view>
            <view class="right">
                <view class="group">
                    <view class="every">
                        <uni-icons type="heart" color="#a7a7a7" size="16"></uni-icons>
                        <text class="font">3</text>
                    </view>
                    <view class="every">
                        <uni-icons type="star" color="#a7a7a7" size="16"></uni-icons>
                        <text class="font">3</text>
                    </view>
                    <view class="every">
                        <uni-icons type="chatbubble" color="#a7a7a7" size="16"></uni-icons>
                        <text class="font">3</text>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>

</script>

<style lang="scss" scoped>
    .soupItem {
        border: 1px solid #e4e4e4;
        border-bottom-width: 3px;
        margin-bottom: 40rpx;
        border-radius: 10rpx;
        

        .head {
            padding: 20rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .right {
                font-size: 28rpx;
                color: $text-font-color-3;
                display: flex;
                align-items: center;

                text {
                    margin-left: 10rpx;
                    line-height: 1em;
                }
            }
        }
        .content{
            padding: 30rpx 20rpx;
            font-size: 36rpx;
            font-weight: bold;
            line-height: 1.7em;
            text-align: justify;
        }
        .info{
            background: #f9f9f9;
            padding: 20rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: $text-font-color-3;
            .group{
                display: flex;
                align-items: center;
                .every{
                    margin-left: 20rpx;
                    .font{
                        color: #999;
                        font-size: 26rpx;
                    }
                }
            }
        }
        
    }
</style>