choujiang/pages/index/index.vue

<template>
    <view class="app-content">
        <statusNav fontWeight="800" titleColor="rgba(255, 255, 255, 100)" backgroudColor="#F37A61" navBarTitle="抽奖"
            :ifReturn="ifReturn"></statusNav>
        <view class="head">
            <view class="li">
                <view class="text">
                    <text class="num">0</text> 积分
                </view>
                <navigator url="/pagesB/integralMall/integralMall" class="button">
                    去兑换>
                </navigator>
            </view>
            <view class="li">
                <view class="text">
                    <text class="num">0.00</text>元
                </view>
                <view class="button">
                    去提现>
                </view>
            </view>
        </view>

        <view class="function-list">
            <navigator :url="item.url" class="li" v-for="(item,index) in dataFunction">
                <image src="" class="icon" mode=""></image>
                <view class="text">
                    {{item.title}}
                </view>
            </navigator>
        </view>

        <view class="main">
            <view class="title-content">
                <view class="title">
                    每日福利
                </view>
                <view class="text">
                    <text>我要上首页</text>
                    <view class="bor">
                    </view>
                    <text>分享</text>
                </view>
            </view>

            <view class="welfare-content">
                <view class="img-content">
                    <image src="" class="img" mode="aspectFill"></image>
                    <view class="icon">
                        抽
                    </view>
                </view>

                <view class="text-content">
                    <view class="name">
                        奖品：现金红包666元独宠一人 x1份
                    </view>
                    <view class="date">
                        开奖时间：2021年10月27日<text class="fs16 bold cF37A61">22</text>时<text
                            class="fs16 bold cF37A61">30</text>分
                    </view>
                    <view class="text">
                        抽奖商城 <text class="bold">赞助</text>
                    </view>
                    <view class="button">
                        免费参与
                    </view>
                </view>
            </view>
            <view class="title-content">
                <view class="title">
                    精选福利
                </view>

            </view>
            <view class="choiceness-content">
                <view class="li" v-for="(item,index) in dataChoiceness">
                    <view class="img-content">
                        <image src="" class="img" mode="aspectFill"></image>
                        <view class="text">
                            抽奖商城<text class="bold">赞助</text>
                        </view>
                        <view class="icon">
                            抽
                        </view>
                    </view>
                    <view class="text-content">
                        <view class="clips2 name">
                            {{item.title}}<text class="on">x1份</text>
                        </view>
                        <view class="date">
                            开奖时间：10/27 <text class="cF37A61 bold"> 22:30</text>
                        </view>
                        <view class="button" :class="item.state==0?'btn':''">

                            <text v-if="item.state==0">已免费参与</text>
                            <text v-else> 免费参与</text>
                        </view>
                    </view>
                </view>
            </view>
            <view class="title-content">
                <view class="title">
                    自助福利
                </view>

            </view>
            <view class="self-help">
                <view class="li">
                    <image src="" class="img" mode=""></image>
                    <view class="text-content">
                        <view class="name">
                            奖品：兰蔻口红196<text class="on">x1份</text>
                        </view>
                        <view class="date">
                            开奖时间：2021年10月27日<text class="ml fs16 bold cF37A61">22</text>时<text
                                class="fs16 bold cF37A61">30</text>分
                        </view>
                        <view class="button">
                            免费参与
                        </view>
                    </view>
                </view>
                <view class="li">
                    <image src="" class="img" mode=""></image>
                    <view class="text-content">
                        <view class="name">
                            奖品：兰蔻口红196<text class="on">x1份</text>
                        </view>
                        <view class="date">
                            开奖时间：2021年10月27日<text class="ml fs16 bold cF37A61">22</text>时<text
                                class="fs16 bold cF37A61">30</text>分
                        </view>
                        <view class="button">
                            免费参与
                        </view>
                    </view>
                </view>
            </view>
        </view>


        <footTabOne></footTabOne>
    </view>
</template>

<script>
    import footTabOne from "../../components/foot-tabs/foot-tab-one.vue"
    import statusNav from '../../components/status-nav.vue';
    export default {
        components: {
            footTabOne,
            statusNav
        },
        
        data() {
            return {
                ifReturn: false,
                dataFunction: [{
                        src: "",
                        title: "天天签到",
                        url:"/pagesB/signin/signin"
                    },
                    {
                        src: "",
                        title: "积分商城",
                        url:"/pagesB/signin/signin"
                    },
                    {
                        src: "",
                        title: "惊喜盲盒",
                          url:"/pagesB/signin/signin"
                    },
                ],
                dataChoiceness: [{
                        title: "奖品：现金红包666元独宠一人",
                        state: 1,
                    },
                    {
                        title: "奖品：现金红包666元独宠一人",
                        state: 1,
                    },
                    {
                        title: "奖品：现金红包666元独宠一人",
                        state: 1,
                    },
                    {
                        title: "奖品：现金红包666元独宠一人",
                        state: 0,
                    },
                ]

            }
        },
        onLoad() {
            // uni.navigateTo({
            //     url:"/pagesB/myPrize/myPrize"
            // })
        },
        methods: {

        }
    }
</script>

<style>
    .head {
        width: 100%;
        height: 382rpx;
        background-color: #F37A61;
        padding: 0 44rpx;
        display: flex;
        position: relative;
        box-sizing: border-box;
        padding-top: 38rpx;
        justify-content: space-between;
    }

    .head .li .text {
        color: rgba(255, 255, 255, 100);
        font-size: 28rpx;
        font-family: PingFangSC-regular;
    }

    .head .li .text .num {
        color: rgba(255, 255, 255, 100);
        font-size: 48rpx;
        font-family: PingFangSC-regular;
    }

    .head .li {
        text-align: center;
        display: inline-block;
    }

    .head .li .button {
        margin-top: 42rpx;
        width: 214rpx;
        background-color: #FFFFFF;
        height: 66rpx;
        color: rgba(243, 122, 97, 100);
        line-height: 66rpx;
        border-radius: 60rpx;
        text-align: center;
    }

    .function-list {
        width: 702rpx;
        margin: auto;
        margin-top: -142rpx;
        position: relative;
        background-color: #FFFFFF;
        z-index: 2;
        height: 182rpx;
        border-radius: 20rpx;
        text-align: center;
        box-shadow: 0px 6rpx 18rpx 0px rgba(0, 0, 0, 0.09);
        padding: 0 60rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        color: rgba(16, 16, 16, 100);
        font-size: 28rpx;
        font-family: PingFangSC-regular;
    }

    .function-list .li .icon {
        width: 72rpx;
        height: 72rpx;
        background-color: rgba(227, 227, 227, 100);
        text-align: center;
        margin-bottom: 30rpx;
    }

    .main {
        padding: 0 25rpx;
    }

    .main .title-content {
        display: flex;
        margin-top: 40rpx;
        align-items: flex-end;
        justify-content: space-between;
    }

    .main .title-content .title {
        color: rgba(16, 16, 16, 100);
        font-size: 36rpx;
        font-family: PingFangSC-regular;
    }

    .main .title-content .text {
        color: rgba(176, 176, 176, 100);
        font-size: 24rpx;
        display: flex;
        align-items: center;
        font-family: PingFangSC-regular;
    }

    .main .title-content .text .bor {
        border-left: 4rpx solid rgba(176, 176, 176, 100);
        width: 2rpx;
        height: 25rpx;
        margin: 0 23rpx;
    }

    .welfare-content {
        box-shadow: 0px 0px 6rpx 0px rgba(0, 0, 0, 0.1);
        margin-top: 26rpx;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        overflow: hidden;
        position: relative;
    }

    .welfare-content .img-content {
        width: 100%;
        position: relative;
        height: 350rpx;
        border-radius: 20rpx 20rpx 0rpx 0px;
    }

    .welfare-content .img-content .img {
        width: 100%;
        height: 100%;
        border-radius: 20rpx 20rpx 0rpx 0px;
        background-color: rgba(227, 227, 227, 100);
    }

    .welfare-content .img-content .icon {
        position: absolute;
        right: 30rpx;
        top: 30rpx;
        width: 58rpx;
        height: 58rpx;
        line-height: 58rpx;
        color: #FFFFFF;
        font-size: 28rpx;
        border-radius: 50%;
        background-color: rgba(243, 122, 97, 100);
        text-align: center;
    }

    .welfare-content .text-content {
        padding: 20rpx;
        position: relative;
    }

    .welfare-content .text-content .name {
        color: rgba(16, 16, 16, 100);
        font-size: 28rpx;
        font-family: PingFangSC-regular;
    }

    .welfare-content .text-content .date {
        color: rgba(16, 16, 16, 100);
        font-size: 24rpx;
        font-family: PingFangSC-regular;
        margin: 20rpx 0rpx;
    }

    .welfare-content .text-content .text {
        color: rgba(243, 122, 97, 100);
        font-size: 28rpx;
        font-family: PingFangSC-regular;
    }

    .welfare-content .text-content .button {
        width: 160rpx;
        height: 58rpx;
        position: absolute;
        right: 20rpx;
        top: 70rpx;
        border-radius: 8rpx;
        background-color: rgba(243, 122, 97, 100);
        text-align: center;
        color: #FFFFFF;
        line-height: 58rpx;
        font-size: 28rpx;
    }

    .choiceness-content {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .choiceness-content .li {
        width: 340rpx;
        height: 560rpx;
        background-color: #FFFFFF;
        border-radius: 20rpx;
        margin-top: 22rpx;
        box-shadow: 0px 0px 12rpx 0px rgba(0, 0, 0, 0.1);
    }

    .choiceness-content .li .img-content {
        position: relative;
        width: 100%;
        background-color: rgba(227, 227, 227, 100);
        height: 310rpx;
        overflow: hidden;
        border-radius: 20rpx 20rpx 0px 0px;
    }

    .choiceness-content .li .img-content .text {
        width: 166rpx;
        height: 44rpx;
        background-color: rgba(78, 180, 255, 100);
        color: rgba(255, 255, 255, 100);
        font-size: 28rpx;
        position: absolute;
        left: 0rpx;
        font-size: 24rpx;
        line-height: 44rpx;
        top: 0rpx;
        text-align: center;
        font-family: Arial;
    }

    .choiceness-content .li .img-content .icon {
        position: absolute;
        right: 10rpx;
        top: 10rpx;
        width: 58rpx;
        height: 58rpx;
        line-height: 58rpx;
        color: #FFFFFF;
        font-size: 28rpx;
        border-radius: 50%;
        background-color: rgba(243, 122, 97, 100);
        text-align: center;
    }

    .choiceness-content .li .img-content .img {
        width: 100%;
        height: 100%;
    }

    .choiceness-content .text-content {
        padding: 14rpx 22rpx 0rpx 14rpx;
    }

    .choiceness-content .text-content .name {
        color: rgba(16, 16, 16, 100);
        font-size: 28rpx;
        line-height: 46rpx;
        text-align: left;
        font-family: PingFangSC-regular;
    }

    .choiceness-content .text-content .name .on {
        color: rgba(227, 227, 227, 100);
        margin-left: 10rpx;
    }

    .choiceness-content .text-content .date {
        color: rgba(16, 16, 16, 100);
        font-size: 24rpx;
        line-height: 50rpx;
        text-align: left;
        font-family: PingFangSC-regular;
    }

    .choiceness-content .text-content .date .bold {
        font-size: 28rpx;
        margin-left: 10rpx;
    }

    .choiceness-content .text-content .button {
        width: 100%;
        height: 58rpx;
        border-radius: 8rpx;
        background-color: rgba(243, 122, 97, 100);
        text-align: center;
        color: #FFFFFF;
        line-height: 58rpx;
        margin-top: 16rpx;
        ;
        font-size: 28rpx;
    }

    .choiceness-content .text-content .btn {
        background-color: rgba(185, 185, 185, 100);
    }

    .self-help {
        width: 100%;
        border-radius: 20rpx;
        margin-top: 20rpx;
        padding: 20rpx;
        padding-right: 36rpx;
        box-sizing: border-box;
        box-shadow: 0px 0px 12rpx 0px rgba(0, 0, 0, 0.1);
    }

    .self-help .li {
        padding-bottom: 20rpx;
        border-bottom: 2rpx solid rgba(187, 187, 187, 100);
        display: flex;
        margin-bottom: 20rpx;
    }
 .self-help .li:last-child{
     border: none;
        padding-bottom: 0rpx;
         margin-bottom: 0rpx;
 }
    .self-help .li .img {
        width: 182rpx;
        height: 182rpx;
        margin-right: 12rpx;
        background-color: rgba(227, 227, 227, 100);
        border-radius: 8rpx;
    }

    .self-help .li .name {
        color: rgba(16, 16, 16, 100);
        font-size: 28rpx;
        line-height: 46rpx;
        text-align: left;
        font-family: PingFangSC-regular;
    }

    .self-help .li .name .on {
        color: rgba(227, 227, 227, 100);
        margin-left: 10rpx;
    }

    .self-help .li .date {
        color: rgba(16, 16, 16, 100);
        font-size: 24rpx;
        line-height: 50rpx;
        text-align: left;
        font-family: PingFangSC-regular;
    }
  .self-help .li .date .ml{
      margin-left: 10rpx;
  }
    .self-help .li .button {
        width: 438rpx;
        height: 58rpx;
        border-radius: 8rpx;
        background-color: rgba(243, 122, 97, 100);
        text-align: center;
        color: #FFFFFF;
        line-height: 58rpx;
        margin-top: 16rpx;
        font-size: 28rpx;
    }
</style>