theluyuan/deming
2
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

一部分

Browse Source
This commit is contained in:
luyuan 2020-06-15 08:49:26 +08:00
parent 09f11d7d44
commit bce0d0328e
Signed by: theluyuan
GPG Key ID: A7972FD973317FF3
6 changed files with 289 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
pageB/components/sdetails/navs.vue Normal file
View File

@ -0,0 +1,30 @@
<template>
<view class="nav">
<text>dsadasdas</text>
<image></image>
</view>
</template>
<script>
export default {
name:"navs"
}
</script>
<style lang="scss" scoped>
.nav{
width: 100%;
height: 100rpx;
display: flex;
padding: 30rpx;
align-items: center;
justify-content: space-between;
font-size: 30rpx;
// margin-bottom: 2rpx;
border-bottom: 2rpx solid #ececec;
color:#333;
background-color: #fff;
>image{
width: 13rpx;
height: 25rpx;
}
}
</style>

55
pageB/components/sdetails/tloos.vue Normal file
View File

@ -0,0 +1,55 @@
<template>
<view class="tloos">
<view class="navs">
<image></image>
123
</view>
<view class="navs" style="margin-right:30rpx">
<image></image>
123
</view>
<view class="button" style="background:rgba(253,211,96,0.6);">试穿试送</view>
<view class="button" style="background:rgba(253,211,96,1);">加入购物车</view>
<view class="button" style="background:rgba(255,120,15,1);">立即购买</view>
</view>
</template>
<script>
export default {
name:"tloos"
}
</script>
<style lang="scss" scoped>
.tloos{
display: flex;
position: fixed;
height: 98rpx;
width: 100%;
bottom:0;
border-top: 1rpx solid #ececec;
.navs{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 24rpx;
color: #666;
flex-shrink: 0;
margin-left: 30rpx;
>image{
width: 35rpx;
height: 35rpx;
margin-bottom: 15rpx;
}
}
.button{
width: 100%;
height: 100%;
line-height: 98rpx;
text-align: center;
color: #fff;
}
}
</style>

53
pageB/components/sdetails/youhuiitem.vue Normal file
View File

@ -0,0 +1,53 @@
<template>
<view class="youhuiitem">
<view class="left">
<view>
<text>￥41</text>
<text>店铺优惠券</text>
</view>
<text>新用户可用</text>
<text>有效期2018.09.06-2018.10.06</text>
</view>
<view class="right">立即领取</view>
</view>
</template>
<script>
export default {
name:"youhuiitem"
}
</script>
<style lang="scss" scoped>
.youhuiitem{
width: 689rpx;
height: 173rpx;
padding: 0 60rpx 0 40rpx;
display: flex;
align-items: center;
justify-content: space-between;
.left{
display: flex;
flex-direction: column;
>text{
margin-top: 17rpx;
font-size: 24rpx;
color: #fff;
}
>view{
display: flex;
align-items: flex-end;
color: #fff;
>text:first-child{
font-size: 50rpx;
}
>text:last-child{
font-size: 28rpx;
}
}
}
.right{
font-size: 32rpx;
color: #fff;
}
}
</style>

27
pageB/components/sdetails/youhuiquan.vue Normal file
View File

@ -0,0 +1,27 @@
<template>
<view class="youhuiquan">
<view class="top">
优惠券详情
</view>
<view class="title">
领取优惠券
</view>
<scroll-view class="gundong" :scroll-y="true">
</scroll-view>
</view>
</template>
<script>
export default {
name:"youhuiquan"
}
</script>
<style lang="scss" scoped>
.youhuiquan{
.gundong{
width: 100%;
height: 447rpx;
}
}
</style>

113
pageB/sdetails/index.vue Normal file
View File

@ -0,0 +1,113 @@
<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>

11
pages.json
View File

@ -56,6 +56,17 @@
}
}
},
{
"path": "sdetails/index",
"style": {
"navigationBarTitleText": "商品详情",
"app-plus":{
"titleNView":{
"backgroundColor":"#ffffff"
}
}
}
},
{
"path": "search/index",
"style": {