邓平艺
5 years ago
2 changed files with 333 additions and 0 deletions
@ -0,0 +1,327 @@ |
|||||
|
<template> |
||||
|
<view> |
||||
|
<view class="flex-direction bg-blue justify-between align-center text-center lf-p-t-30 lf-p-b-30" style="height: 340rpx;"> |
||||
|
<view> |
||||
|
<image src="../../static/logo.png" mode="aspectFill" style="width: 200rpx;height: 200rpx;border-radius: 50%;"></image> |
||||
|
</view> |
||||
|
<view class="lf-font-36 align-center text-center text-white lf-m-t-30"> |
||||
|
小小的小可爱 |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="list"> |
||||
|
<view class="lf-row-between list-item" hover-class="lf-opacity" @click="$url('/pages/collect/index')"> |
||||
|
<view class="lf-row-center"> |
||||
|
<image class="icon-img" src="../../static/logo.png"></image> |
||||
|
<text class="lf-text-vertical lf-m-l-20 lf-font-28 lf-color-black">我的订单</text> |
||||
|
</view> |
||||
|
<view> |
||||
|
<u-icon name="arrow-right" color="#777" size="28"></u-icon> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="lf-row-between list-item" hover-class="lf-opacity" @click="$url('/pages/contactService/index')"> |
||||
|
<view class="lf-row-center"> |
||||
|
<image class="icon-img" src="../../static/logo.png"></image> |
||||
|
<text class="lf-text-vertical lf-m-l-16 lf-font-28 lf-color-black">消息中心</text> |
||||
|
</view> |
||||
|
<view> |
||||
|
<u-icon name="arrow-right" color="#777" size="28"></u-icon> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="lf-row-between list-item" hover-class="lf-opacity"> |
||||
|
<view class="lf-row-center"> |
||||
|
<image class="icon-img" src="../../static/logo.png"></image> |
||||
|
<text class="lf-text-vertical lf-m-l-16 lf-font-28 lf-color-black">意见反馈</text> |
||||
|
</view> |
||||
|
<view> |
||||
|
<u-icon name="arrow-right" color="#777" size="28"></u-icon> |
||||
|
</view> |
||||
|
<button class="feedback-btn" open-type="feedback"></button> |
||||
|
</view> |
||||
|
<view class="lf-row-between list-item" hover-class="lf-opacity"> |
||||
|
<view class="lf-row-center"> |
||||
|
<image class="icon-img" src="../../static/logo.png"></image> |
||||
|
<text class="lf-text-vertical lf-m-l-16 lf-font-28 lf-color-black">我的收藏</text> |
||||
|
</view> |
||||
|
<view> |
||||
|
<u-icon name="arrow-right" color="#777" size="28"></u-icon> |
||||
|
</view> |
||||
|
<button class="feedback-btn" open-type="feedback"></button> |
||||
|
</view> |
||||
|
<view class="lf-row-between list-item" hover-class="lf-opacity"> |
||||
|
<view class="lf-row-center"> |
||||
|
<image class="icon-img" src="../../static/logo.png"></image> |
||||
|
<text class="lf-text-vertical lf-m-l-16 lf-font-28 lf-color-black">关于我们</text> |
||||
|
</view> |
||||
|
<view> |
||||
|
<u-icon name="arrow-right" color="#777" size="28"></u-icon> |
||||
|
</view> |
||||
|
<button class="feedback-btn" open-type="feedback"></button> |
||||
|
</view> |
||||
|
<view class="lf-row-between list-item" hover-class="lf-opacity"> |
||||
|
<view class="lf-row-center"> |
||||
|
<image class="icon-img" src="../../static/logo.png"></image> |
||||
|
<text class="lf-text-vertical lf-m-l-16 lf-font-28 lf-color-black">联系客服</text> |
||||
|
</view> |
||||
|
<view> |
||||
|
<u-icon name="arrow-right" color="#777" size="28"></u-icon> |
||||
|
</view> |
||||
|
<button class="feedback-btn" open-type="feedback"></button> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view style="background-color: #F6F6F6;"> |
||||
|
<view class="lf-p-t-40 lf-p-b-20 text-center details-title"> |
||||
|
|
||||
|
<view class="lf-font-32 details-text flex justify-between align-center text-center" style="color: #222;position: relative;left: 270rpx;"> |
||||
|
<view class="rhombus lf-m-l-30"></view> |
||||
|
<view>为你推荐</view> |
||||
|
<view class="rhombus lf-m-r-30"></view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<u-waterfall v-model="list" :ref="'uWaterfall-'+ tabIndex"> |
||||
|
<template v-slot:left="{leftList}"> |
||||
|
<view class="list-warter" v-for="(item, index) in leftList" :key="index"> |
||||
|
<u-lazy-load threshold="-450" :image="item.image" :index="index"> |
||||
|
<view class="list-label">已售8777</view> |
||||
|
</u-lazy-load> |
||||
|
<view class="lf-p-20"> |
||||
|
<view class="list-title"> |
||||
|
{{item.title}} |
||||
|
</view> |
||||
|
<view class="list-price"> |
||||
|
<text>{{item.price}}元</text> |
||||
|
<text class="lf-m-l-20 lf-font-24 lf-color-666 lf-line-through">¥399.00</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
<template v-slot:right="{rightList}"> |
||||
|
<view class="list-warter" v-for="(item, index) in rightList" :key="index"> |
||||
|
<u-lazy-load threshold="-450" :image="item.image" :index="index"> |
||||
|
<view class="list-label">已售8777</view> |
||||
|
</u-lazy-load> |
||||
|
<view class="lf-p-20"> |
||||
|
<view class="list-title"> |
||||
|
{{item.title}} |
||||
|
</view> |
||||
|
<view class="list-price"> |
||||
|
<text>{{item.price}}元</text> |
||||
|
<text class="lf-m-l-20 lf-font-24 lf-color-666 lf-line-through">¥399.00</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
</u-waterfall> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
list: [ |
||||
|
{ |
||||
|
price: 35, |
||||
|
title: '北国风光，千里冰封，万里雪飘', |
||||
|
shop: '李白杜甫白居易旗舰店', |
||||
|
image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23327_s.jpg', |
||||
|
}, |
||||
|
{ |
||||
|
price: 75, |
||||
|
title: '望长城内外，惟余莽莽', |
||||
|
shop: '李白杜甫白居易旗舰店', |
||||
|
image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23325_s.jpg', |
||||
|
}, |
||||
|
{ |
||||
|
price: 385, |
||||
|
title: '大河上下，顿失滔滔', |
||||
|
shop: '李白杜甫白居易旗舰店', |
||||
|
image: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg', |
||||
|
}, |
||||
|
{ |
||||
|
price: 784, |
||||
|
title: '欲与天公试比高', |
||||
|
shop: '李白杜甫白居易旗舰店', |
||||
|
image: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/zzpic23369_s.jpg', |
||||
|
}, |
||||
|
{ |
||||
|
price: 7891, |
||||
|
title: '须晴日，看红装素裹，分外妖娆', |
||||
|
shop: '李白杜甫白居易旗舰店', |
||||
|
image: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2130_s.jpg', |
||||
|
}, |
||||
|
{ |
||||
|
price: 2341, |
||||
|
shop: '李白杜甫白居易旗舰店', |
||||
|
title: '江山如此多娇，引无数英雄竞折腰', |
||||
|
image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23346_s.jpg', |
||||
|
}, |
||||
|
{ |
||||
|
price: 661, |
||||
|
shop: '李白杜甫白居易旗舰店', |
||||
|
title: '惜秦皇汉武，略输文采', |
||||
|
image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23344_s.jpg', |
||||
|
}, |
||||
|
{ |
||||
|
price: 1654, |
||||
|
title: '唐宗宋祖，稍逊风骚', |
||||
|
shop: '李白杜甫白居易旗舰店', |
||||
|
image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg', |
||||
|
}, |
||||
|
{ |
||||
|
price: 1678, |
||||
|
title: '一代天骄，成吉思汗', |
||||
|
shop: '李白杜甫白居易旗舰店', |
||||
|
image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg', |
||||
|
}, |
||||
|
{ |
||||
|
price: 924, |
||||
|
title: '只识弯弓射大雕', |
||||
|
shop: '李白杜甫白居易旗舰店', |
||||
|
image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg', |
||||
|
}, |
||||
|
{ |
||||
|
price: 8243, |
||||
|
title: '俱往矣，数风流人物，还看今朝', |
||||
|
shop: '李白杜甫白居易旗舰店', |
||||
|
image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg', |
||||
|
}, |
||||
|
] |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
.rhombus{ |
||||
|
width: 16rpx; |
||||
|
height: 16rpx; |
||||
|
transform: rotateZ(45deg); |
||||
|
background: #222; |
||||
|
} |
||||
|
.details-title { |
||||
|
position: relative; |
||||
|
|
||||
|
&::after { |
||||
|
position: absolute; |
||||
|
left: 144rpx; |
||||
|
top: 60rpx; |
||||
|
content: ''; |
||||
|
width: 69%; |
||||
|
height: 1rpx; |
||||
|
border-bottom: 1rpx solid rgba(0, 0, 0, 0.08) |
||||
|
} |
||||
|
|
||||
|
.details-text { |
||||
|
position: relative; |
||||
|
// display: inline-block; |
||||
|
width: 264rpx; |
||||
|
background-color: #f5f5f9; |
||||
|
z-index: 9; |
||||
|
} |
||||
|
} |
||||
|
.list{ |
||||
|
margin-top: 20rpx; |
||||
|
padding: 0 32rpx; |
||||
|
background-color: #FFFFFF; |
||||
|
width: 100%; |
||||
|
height: auto; |
||||
|
} |
||||
|
.list-item{ |
||||
|
border-bottom: 1rpx solid #EEEEEE; |
||||
|
height: 110rpx; |
||||
|
box-sizing: border-box; |
||||
|
position: relative; |
||||
|
.icon-img{ |
||||
|
width: 50rpx; |
||||
|
height: 50rpx; |
||||
|
} |
||||
|
.feedback-btn{ |
||||
|
position: absolute; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
z-index: 1; |
||||
|
background: transparent; |
||||
|
} |
||||
|
&:last-child{ |
||||
|
border-bottom: none; |
||||
|
} |
||||
|
} |
||||
|
//waterfall |
||||
|
|
||||
|
.list-warter { |
||||
|
border-radius: 8px; |
||||
|
margin: 10px 5px; |
||||
|
margin-top: 0px; |
||||
|
background-color: #ffffff; |
||||
|
// padding: 8px; |
||||
|
position: relative; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
.u-close { |
||||
|
position: absolute; |
||||
|
top: 32rpx; |
||||
|
right: 32rpx; |
||||
|
} |
||||
|
|
||||
|
.list-image { |
||||
|
width: 100%; |
||||
|
border-radius: 4px; |
||||
|
} |
||||
|
|
||||
|
.list-title { |
||||
|
font-size: 28rpx; |
||||
|
font-weight: bold; |
||||
|
color: $u-main-color; |
||||
|
} |
||||
|
|
||||
|
.list-label{ |
||||
|
position: absolute; |
||||
|
bottom: 0; |
||||
|
right: 0; |
||||
|
background-color: rgba(0,0,0,0.5); |
||||
|
width: 140rpx; |
||||
|
height: 48rpx; |
||||
|
border-radius: 20rpx 0rpx 0rpx 0rpx; |
||||
|
font-size: 22rpx; |
||||
|
color: #FFFFFF; |
||||
|
line-height: 48rpx; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.list-tag { |
||||
|
display: flex; |
||||
|
margin-top: 5px; |
||||
|
} |
||||
|
|
||||
|
.list-tag-owner { |
||||
|
background-color: $u-type-error; |
||||
|
color: #FFFFFF; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
padding: 4rpx 14rpx; |
||||
|
border-radius: 50rpx; |
||||
|
font-size: 20rpx; |
||||
|
line-height: 1; |
||||
|
} |
||||
|
|
||||
|
.list-tag-text { |
||||
|
border: 1px solid $u-type-primary; |
||||
|
color: $u-type-primary; |
||||
|
margin-left: 10px; |
||||
|
border-radius: 50rpx; |
||||
|
line-height: 1; |
||||
|
padding: 4rpx 14rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
border-radius: 50rpx; |
||||
|
font-size: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.list-price { |
||||
|
font-size: 30rpx; |
||||
|
color: $u-type-error; |
||||
|
margin-top: 5px; |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue