<template>
<view class="appCotent">
<div class="shop__detail">
    <div class="top__swiper">
        <u-swiper radius='0' :list="list6" @change="e => currentNum = e.current" :autoplay="false" height='358' indicatorStyle="right: 20px">
            <view slot="indicator" class="indicator-num">
                <text class="indicator-num__text">{{ currentNum + 1 }}/{{ list6.length }}</text>
            </view>
        </u-swiper>
        <div class="shop__title">
            <div>防晒布罩 加厚防风 大款 商务风</div>
            <div>
                <span>￥48.00</span>
                <span>销量500笔</span>
            </div>
        </div>
        <div class="shop__title__2">规格 <span>儿童数学思维训练游戏(套装共5册)</span></div>
        <div class="shop__content">
            <div class="content__title">
                商品详情
            </div>
            何秋光老师是“儿童数学思维训练”课程的创始人，既有儿童数学思维教育理论知识，又有丰富教学实践经验，本书集作者三十余年儿童数学教学、十余年儿童数学思维训练教学实践与理论研究的成果，是目前国内比较完整、系统和科学的对儿童进行数学思维训练与开发的丛书。本书于2012年首次出版，六年间加印十多次，市场认可度较好。之前五本图书分两次出版，体例有所不同，这次再版修订了之前体例不统一的问题，优化了部分题目的设计，重新编写了专家提示”的内容，对每一种类型题目的解题方法和对孩子的引导方法都做了更加详细的介绍。
        </div>
    </div>
    <div class="shop__btn view__no__bind" @click="pay">立即购买</div>
    <u-gap bgColor="transparent" height="80"></u-gap>
</div>
</view>
</template>

<script>
export default {
    data() {
        return {
            currentNum: 0,
            list6: [require('@/static/shop/item.jpg'),
                require('@/static/shop/item.jpg'),
                require('@/static/shop/item.jpg'),
            ],
        }
    },
    methods: {
        pay(){
            uni.navigateTo({
                url: '/pagesC/pages/shop/pay'
            })
        }
    },
}
</script>

<style lang="scss" scoped>
.shop__detail {

    .indicator-num {
        padding: 2px 0;
        background-color: rgba(0, 0, 0, 0.35);
        border-radius: 100px;
        width: 35px;
        margin-bottom: 40rpx;
        @include flex;
        justify-content: center;

        &__text {
            color: #FFFFFF;
            font-size: 12px;
        }
    }

    .shop__title {
        background: #FFFFFF;
        box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.2);
        border-radius: 0rpx 0rpx 20rpx 20rpx;
        padding: 10rpx 40rpx 30rpx 40rpx;
        border-radius: 20rpx;

        >div:nth-of-type(1) {
            font-size: 36rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #333333;
            margin-bottom: 20rpx;
        }

        >div:nth-of-type(2) {
            display: flex;
            justify-content: space-between;

            >span:nth-of-type(1) {
                font-size: 24rpx;
                font-family: PingFang SC;
                font-weight: 500;
                color: #F1251B;
            }

            >span:nth-of-type(2) {
                font-size: 28rpx;
                font-family: PingFang SC;
                font-weight: 500;
                color: #999999;
            }
        }
    }

    .shop__title__2 {
        background: #FFFFFF;
        box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.2);
        border-radius: 20rpx;
        padding: 30rpx 40rpx;
        font-size: 30rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #333333;
        margin: 30rpx 0;

        span {
            font-size: 30rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #666666;
            padding-left: 30rpx;
        }
    }

    .shop__content {
        background: #FFFFFF;
        box-shadow: 0rpx 0rpx 28prx 1rpx rgba(232, 232, 232, 0.2);
        border-radius: 20rpx;
        padding: 40rpx 30rpx;

        .content__title {
            font-size: 32rpx;
            font-family: PingFang SC;
            font-weight: bold;
            color: #333333;
            text-align: center;
            margin-bottom: 30rpx;
            font-size: 28rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #333333;
            line-height: 42rpx;
        }
    }

    .shop__btn {
        width: 670rpx;
        height: 76rpx;
        text-align: center;
        line-height: 76rpx;
        margin: 0 auto;
        font-size: 32rpx;
    }

    .view__no__bind {
        background: url('@/static/move-car/move-car-view2.png') no-repeat;
        margin-bottom: 30rpx;
        background-size: contain;
        color: rgba(255, 255, 255, 1);
        position: fixed;
        bottom: 60rpx;
        left: 0;
        right: 0;
        margin: 0 auto;
    }
}
</style>
