<template>
    <view class="main">
        <!-- 列表 -->
        <view class="charityList">
            <view class="item" v-for="(item, index) in 10" :key="index" @click="goto(index)">
                <u--image class="img" :showLoading="true" src="../../static/charity/Rectangle 2.png" width="318rpx"
                    height="230rpx"></u--image>
                <view class="title">New Balance Raff Simons Bright Bright </view>
                <view class="target">Target: $1309348</view>
                <u-line-progress class="progressbar" :showText="(index * 10) > 18" :percentage="index * 10"
                    activeColor="#00E8A2" height="22rpx">
                </u-line-progress>
            </view>
        </view>
        <!-- tabBar -->
        <tab-bar :selectActive="3"></tab-bar>
    </view>
</template>

<script>
export default {
    name: 'charity',
    data() {
        return {

        }
    },
    onLoad() {

    },
    onShow() {

    },
    onHide() {
    },
    computed: {
        i18n() {
            return this.$t('markets')
        }
    },
    methods: {
        goto(index) {
            uni.navigateTo({
                url: `/pages/charity/details?id=${index}`
            });
        }
    }
}

</script>

<style lang="scss" scoped>
.main {
    padding-bottom: 198rpx; // 避免底部TabBar盖住内容

    .charityList {
        // width: 318rpx;
        margin: 120rpx 38rpx 0 40rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;

        .item {
            position: relative;
            width: 318rpx;
            height: 430rpx;
            box-sizing: border-box;
            background-color: #323045;
            border-radius: 20rpx;
            margin-bottom: 32rpx;

            /deep/.img {
                overflow: hidden;
                border-radius: 20rpx;
            }

            .title {
                height: 72rpx;
                line-height: 35rpx;
                font-size: 32rpx;
                margin: 24rpx 20rpx 12rpx;
                // 超出字符省略成...
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box; //兼容
                word-wrap: break-word;
                white-space: normal !important;
                -webkit-line-clamp: 2; //显示行数
                -webkit-box-orient: vertical;
            }

            .target {
                height: 40rpx;
                line-height: 40rpx;
                color: $mainColor;
                font-size: 26rpx;
                margin-left: 20rpx;
            }

            .progressbar {
                margin: 12rpx 20rpx 0;

                /deep/.u-line-progress__text {
                    color: #000;
                    font-size: 16rpx;
                    transform: scale(0.66) // 字体超过12px以下的需要缩放 8/12 =0.666
                }
            }

        }
    }




}
</style>
