<template>
    <view class="sdetails">
        <u-swiper :list="list" height="500" border-radius="0"></u-swiper>
        <view class="info">
            <view class="title">
                <text>萨的环境</text>

                                               套装新款小个子春季时尚韩版短袖衬衫套装
新款小个子春季时尚韩版...
                            
            </view>
            <view class="pic">
                <text>￥24</text>
                <s>￥12</s>
            </view>
        </view>
        <view class="hr"></view>
        <navs></navs>
        <navs></navs>
        <navs></navs>
        <view class="xiangqing">
            <view class="heng"></view>
            <view class="title">商品详情</view>
            <view class="heng"></view>
        </view>
        <tloos></tloos>
    </view>
</template>
<script>
import navs from "../components/sdetails/navs"
import tloos from "../components/sdetails/tloos"
export default {
    name:"sdetails",
    components:{
        navs,
        tloos
    },
    data() {
        return {
            list: [{
                    image: '/static/uView/swiper/swiper1.jpg',
                    title: '蒹葭苍苍，白露为霜。所谓伊人，在水一方'
                },
                {
                    image: '/static/uView/swiper/swiper2.jpg',
                    title: '溯洄从之，道阻且长。溯游从之，宛在水中央'
                },
                {
                    image: '/static/uView/swiper/swiper3.jpg',
                    title: '蒹葭萋萋，白露未晞。所谓伊人，在水之湄'
                }
            ]
        }
    }
}
</script>
<style lang="scss" scoped>
.sdetails{
    /deep/image{
        background-color: #0f0;
    }
    .info{
        padding: 30rpx;
        .title{
            flex-wrap: wrap;
            >text{
                padding: 13rpx;
                font-size: 24rpx;
                color:#fff;
                margin-right: 13rpx;
                background-color: #FF780F;
                display: inline-block;
                border-radius: 25rpx;
            }
        }
        .pic{
            >text{
                font-size: 32rpx;
                color: #FF3131;
            }
            >s{
                font-size: 26rpx;
                color: #999;
                display: inline-block;
                margin-left: 30rpx;
            }
        }
    }
    .hr{
        width: 100%;
        height: 20rpx;
        background-color: #ececec;
    }
    .xiangqing{
        display: flex;
        height: 85rpx;
        background-color: #ececec;
        align-items: center;
        justify-content: center;
        .heng{
            width: 79rpx;
            height: 2rpx;
            background-color: #a9a9a9;

        }
        font-size: 28rpx;
        color: #999;
        .title{
            margin: 0 20rpx;
        }
    }
}
</style>