113 lines
2.9 KiB
Vue
113 lines
2.9 KiB
Vue
|
<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>
|