邓平艺
4 years ago
14 changed files with 1422 additions and 41 deletions
-
2App.vue
-
40common/styles/iconfont.css
-
4common/styles/theme.css
-
31components/lf-nocontent/lf-nocontent.vue
-
46components/lf-price/lf-price.vue
-
220components/lf-waterfall-shopdetails/lf-waterfall.vue
-
16components/self-line/self-line.vue
-
5main.js
-
27pages.json
-
127pages/discover/discover.vue
-
236pages/discover/discoverdetails.vue
-
570pages/shop/shopdetail.vue
-
139pages/user/my/my.vue
-
BINstatic/images/empty.png
@ -0,0 +1,31 @@ |
|||
<template> |
|||
<view class="padding-xl margin-top-xl"> |
|||
<view class="flex justify-center"> |
|||
<image src="@/static/images/empty.png" mode="widthFix" class="no-content-img"></image> |
|||
</view> |
|||
<text class="block text-center margin-top">暂无数据</text> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data(){ |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
onLoad(){ |
|||
|
|||
}, |
|||
methods: { |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.no-content-img{ |
|||
width: 440rpx; |
|||
height: 380rpx; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,46 @@ |
|||
<template> |
|||
<view> |
|||
<block v-if="isPoint"> |
|||
<text class="text-price lf-font-48 lf-font-bold lf-color-price">{{ showPrice(1) }}</text> |
|||
<text class="lf-font-28 lf-font-bold lf-color-price">.{{ showPrice(2) }}</text> |
|||
</block> |
|||
<block v-else> |
|||
<text class="text-price lf-font-48 lf-font-bold lf-color-price">{{ showPrice() }} <text class="lf-font-24 lf-color-777 lf-m-l-10">起</text> </text> |
|||
</block> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
props: { |
|||
price: { |
|||
type: [Number, String], |
|||
default: '' |
|||
} |
|||
}, |
|||
computed: { |
|||
// 是否存在小数点 |
|||
isPoint(){ |
|||
let price = parseFloat(this.$props.price).toString(); |
|||
return price.indexOf('.') >= 0; |
|||
}, |
|||
showPrice(){ |
|||
let price = parseFloat(this.$props.price).toString(); // 过滤价格出现.00的情况 |
|||
return function(type){ |
|||
let price_arr = price.split('.'); |
|||
if(type == 1){ |
|||
return price_arr[0]; |
|||
}else if(type == 2){ |
|||
return price_arr[1]; |
|||
}else{ |
|||
return price_arr[0]; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped="scoped"> |
|||
|
|||
</style> |
|||
@ -0,0 +1,220 @@ |
|||
<template> |
|||
<view> |
|||
<u-waterfall v-model="dataList" ref="uWaterfall" v-for="itemFather of listlength" :key="itemFather" v-if="itemFather == tabindex"> |
|||
<template v-slot:left="{leftList}"> |
|||
<view class="list-warter" v-for="(item, index) in leftList" :key="index"> |
|||
<view v-if="!item.is_ad" @click="onClick(item.id)"> |
|||
<u-lazy-load threshold="-450" border-radius="8px 8px 0 0" :image="item.picture" :index="index"> |
|||
<view class="list-label">已售{{item.sale}}</view> |
|||
</u-lazy-load> |
|||
<view class="lf-p-20"> |
|||
<view class="list-title"> |
|||
{{item.title}} |
|||
</view> |
|||
<view class="list-price"> |
|||
<!-- <text>{{item.price}}元</text> --> |
|||
<lf-price :price="item.price"></lf-price> |
|||
<text class="lf-m-l-20 lf-font-24 lf-color-666 lf-line-through">{{item.original_price}}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view v-else @click="goAd(item.type,item.url)"> |
|||
<u-lazy-load threshold="-450" border-radius="8px 8px 0 0" :image="item.picture" :index="index"></u-lazy-load> |
|||
<view class="lf-p-20"> |
|||
<view class="list-title"> |
|||
{{item.title}} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<template v-slot:right="{rightList}"> |
|||
<view class="list-warter" v-for="(item, index) in rightList" :key="index"> |
|||
<view v-if="!item.is_ad" @click="onClick(item.id)"> |
|||
<u-lazy-load threshold="-450" border-radius="8px 8px 0 0" :image="item.picture" :index="index"> |
|||
<view class="list-label">已售{{item.sale}}</view> |
|||
</u-lazy-load> |
|||
<view class="lf-p-20"> |
|||
<view class="list-title"> |
|||
{{item.title}} |
|||
</view> |
|||
<view class="list-price"> |
|||
<!-- <text>{{item.price}}元</text> --> |
|||
<lf-price :price="item.price"></lf-price> |
|||
<text class="lf-m-l-20 lf-font-24 lf-color-666 lf-line-through">{{item.original_price}}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view v-else @click="goAd(item.type,item.url)"> |
|||
<u-lazy-load threshold="-450" border-radius="8px 8px 0 0" :image="item.picture" :index="index"></u-lazy-load> |
|||
<view class="lf-p-20"> |
|||
<view class="list-title"> |
|||
{{item.title}} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
</u-waterfall> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
props: { |
|||
list: { |
|||
type: Array, |
|||
default: [] |
|||
}, |
|||
tabindex: { |
|||
type: Number, |
|||
default: 0 |
|||
}, |
|||
listlength: { |
|||
type: Number, |
|||
default: 1 |
|||
} |
|||
}, |
|||
data(){ |
|||
return { |
|||
// dataList: [] |
|||
} |
|||
}, |
|||
computed: { |
|||
dataList: { |
|||
get() { |
|||
console.log('组件当前数据====',this.list) |
|||
return this.list; |
|||
}, |
|||
set(newValue) { console.log('newvalue',newValue) } |
|||
}, |
|||
}, |
|||
// watch: { |
|||
// list(newValue,oldValue) { |
|||
// console.log('值变了',newValue) |
|||
// console.log('旧值',this.$refs) |
|||
// // this.$forceUpdate(); |
|||
|
|||
|
|||
// this.dataList = newValue |
|||
|
|||
// console.log('当前值',this.dataList) |
|||
// return newValue |
|||
// } |
|||
// }, |
|||
onShow(){ |
|||
|
|||
}, |
|||
deactivated() { |
|||
|
|||
}, |
|||
onLoad() { |
|||
|
|||
}, |
|||
destroyed() { |
|||
|
|||
}, |
|||
methods: { |
|||
onClick(id){ |
|||
this.$url('/pages/goodsDetail/index?goods_id='+id); |
|||
this.$emit('click'); |
|||
}, |
|||
goAd(type,url){ |
|||
if(url) { |
|||
if(type == 0) { |
|||
this.$url(url); |
|||
}else { |
|||
this.$url('/pages/index/urlWeb?url='+url); |
|||
} |
|||
} |
|||
}, |
|||
clear() { |
|||
console.log('组件名',this.$refs) |
|||
this.$refs.uWaterfall[0].clear(); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped="scoped"> |
|||
// ==== |
|||
.list-warter { |
|||
border-radius: 20rpx; |
|||
margin: 10px 5px; |
|||
margin-top: 0px; |
|||
background-color: #ffffff; |
|||
// padding: 8px; |
|||
position: relative; |
|||
overflow: hidden; |
|||
box-shadow: 0rpx 2rpx 8rpx 1rpx rgba(0, 0, 0, 0.1); |
|||
} |
|||
|
|||
.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; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
// ==== |
|||
</style> |
|||
@ -0,0 +1,16 @@ |
|||
<template> |
|||
<view class="bg-gray1 h-20" /> |
|||
</template> |
|||
|
|||
<script> |
|||
</script> |
|||
|
|||
<style> |
|||
.h-20 { |
|||
height: 20rpx; |
|||
} |
|||
.bg-gray1 { |
|||
background-color: #F8F8F8; |
|||
color: #333333; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,127 @@ |
|||
<template> |
|||
<view> |
|||
<lf-nav :spreadOut="true" :showIcon="true" title="发现"></lf-nav> |
|||
<view> |
|||
<u-tabs :list="tab_list" active-color="#15716E" inactive-color='#777777' :is-scroll="true" :current="current" @change="tabChange"></u-tabs> |
|||
</view> |
|||
<view v-for="i of 6"> |
|||
<view class="lf-p-32"> |
|||
<view class="lf-flex"> |
|||
<view class="tag-father"> |
|||
<image src="https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png" mode="aspectFill" class="head-img"></image> |
|||
<view class="head-tag">V</view> |
|||
</view> |
|||
<view class="lf-flex-column lf-m-l-20"> |
|||
<view class="lf-font-32 lf-color-black lf-font-bold">最新FUEJFEI</view> |
|||
<view class="lf-font-24 lf-color-777 lf-m-t-15">08-28 18:39</view> |
|||
</view> |
|||
</view> |
|||
<view class="lf-font-28 lf-color-333 lf-m-t-20"> |
|||
在售商品在售商品在售商品在售商品在售商品在售商品在售商品在售 |
|||
</view> |
|||
<view class="lf-flex-wrap lf-m-t-20"> |
|||
<image v-for="item in 9" class="qzone-img" src="https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png" mode="aspectFill"></image> |
|||
</view> |
|||
<view class="lf-m-t-30 lf-row-between lf-p-l-50 lf-p-r-50"> |
|||
<view class="lf-row-center"> |
|||
<text class="lf-iconfont icon-shoucang"></text> |
|||
<text class="lf-font-24 lf-color-777 lf-m-l-10">379</text> |
|||
</view> |
|||
<view class="lf-row-center"> |
|||
<text class="lf-iconfont icon-fabu"></text> |
|||
<text class="lf-font-24 lf-color-777 lf-m-l-10">3579</text> |
|||
</view> |
|||
<view class="lf-row-center"> |
|||
<text class="lf-iconfont icon-fenxiang"></text> |
|||
<text class="lf-font-24 lf-color-777 lf-m-l-10">63</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<self-line/> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
tab_list: [ |
|||
{name: '最新',id: 1}, |
|||
{name: '最热',id: 2}, |
|||
{name: '已关注',id: 3}, |
|||
{name: '消息',id: 4} |
|||
], |
|||
current: 0, |
|||
} |
|||
}, |
|||
methods: { |
|||
tabChange(index){ |
|||
this.current = index; |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
page { |
|||
background-color: white; |
|||
} |
|||
</style> |
|||
|
|||
<style lang="scss" scoped> |
|||
.tag-father { |
|||
position: relative; |
|||
} |
|||
.head-tag { |
|||
color: white; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
text-align: center; |
|||
font-size: 24rpx; |
|||
width: 36rpx; |
|||
height: 36rpx; |
|||
border-radius: 50%; |
|||
background-color: #15716E; |
|||
border: 1rpx solid #FFFFFF; |
|||
position: absolute; |
|||
left: 66rpx; |
|||
top: 70rpx; |
|||
z-index: 99; |
|||
} |
|||
.qzone-img { |
|||
width: 220rpx; |
|||
height: 220rpx; |
|||
border-radius: 10rpx; |
|||
margin-right: 12rpx; |
|||
&:nth-child(3n) { |
|||
margin-right: 0; |
|||
} |
|||
&:nth-child(n + 4) { |
|||
margin-top: 12rpx; |
|||
} |
|||
} |
|||
.head-img { |
|||
width: 100rpx; |
|||
height: 100rpx; |
|||
border-radius: 50%; |
|||
} |
|||
// tab样式 |
|||
/deep/.u-scroll-box { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
border-bottom: 1rpx solid rgba(0, 0, 0, 0.1); |
|||
} |
|||
/deep/.u-scroll-box .u-tab-bar { |
|||
background-color: #15716E!important; |
|||
width: 80rpx!important; |
|||
position: absolute; |
|||
left: 0; |
|||
bottom: -14rpx; |
|||
} |
|||
/deep/ .u-tab-item { |
|||
font-size: 28rpx!important; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,236 @@ |
|||
<template> |
|||
<view> |
|||
<lf-nav :spreadOut="true" :showIcon="true" title="详情"></lf-nav> |
|||
<view class="lf-p-32"> |
|||
<view class="lf-flex"> |
|||
<view class="tag-father"> |
|||
<image src="https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png" mode="aspectFill" class="head-img"></image> |
|||
<view class="head-tag">V</view> |
|||
</view> |
|||
<view class="lf-flex-column lf-m-l-20"> |
|||
<view class="lf-font-32 lf-color-black lf-font-bold">最新FUEJFEI</view> |
|||
<view class="lf-font-24 lf-color-777 lf-m-t-15">08-28 18:39</view> |
|||
</view> |
|||
</view> |
|||
<view class="lf-font-28 lf-color-333 lf-m-t-20"> |
|||
在售商品在售商品在售商品在售商品在售商品在售商品在售商品在售 |
|||
</view> |
|||
<view class="lf-flex-wrap lf-m-t-20"> |
|||
<image v-for="item in 9" class="qzone-img" src="https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png" mode="aspectFill"></image> |
|||
</view> |
|||
<view class="lf-m-t-30 lf-row-between lf-p-l-50 lf-p-r-50"> |
|||
<view class="lf-row-center"> |
|||
<text class="lf-iconfont icon-shoucang"></text> |
|||
<text class="lf-font-24 lf-color-777 lf-m-l-10">379</text> |
|||
</view> |
|||
<view class="lf-row-center"> |
|||
<text class="lf-iconfont icon-fabu"></text> |
|||
<text class="lf-font-24 lf-color-777 lf-m-l-10">3579</text> |
|||
</view> |
|||
<view class="lf-row-center"> |
|||
<text class="lf-iconfont icon-fenxiang"></text> |
|||
<text class="lf-font-24 lf-color-777 lf-m-l-10">63</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<self-line/> |
|||
<!-- 评论 --> |
|||
<view class="comment"> |
|||
<view class="lf-color-555 lf-font-24">共 2条评论</view> |
|||
<!-- 评论开始 --> |
|||
<view> |
|||
<view class="lf-m-t-20"> |
|||
<view class="lf-flex"> |
|||
<view> |
|||
<image class="comment-img" src="https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png" mode="aspectFill"></image> |
|||
</view> |
|||
<view class="lf-flex-column lf-m-l-20"> |
|||
<view class="lf-color-999 lf-font-24">金城优选哈哈</view> |
|||
<view> |
|||
<view class="lf-color-black lf-line-2" style="max-width:550rpx;">评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论<text class="lf-color-999 lf-font-24 lf-m-l-10">08-30</text></view> |
|||
</view> |
|||
</view> |
|||
<view class="lf-m-l-32" style="position: absolute;right:33rpx;"> |
|||
<view> |
|||
<text class="lf-iconfont icon-shoucang"></text> |
|||
</view> |
|||
<view class="lf-color-555 lf-font-24">10</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="comment-replay"> |
|||
<view class="lf-flex"> |
|||
<view> |
|||
<image class="comment-img" src="https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png" mode="aspectFill"></image> |
|||
</view> |
|||
<view class="lf-flex-column lf-m-l-20"> |
|||
<view class="lf-color-999 lf-font-24">优选嘿嘿</view> |
|||
<view> |
|||
<view class="lf-color-black lf-line-2 lf-row-center" style="max-width: 446rpx;">评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论<text class="lf-color-999 lf-font-24 lf-m-l-10">08-30</text></view> |
|||
</view> |
|||
</view> |
|||
<view class="lf-m-l-32" style="position: absolute;right:33rpx;"> |
|||
<view> |
|||
<text class="lf-iconfont icon-shoucang"></text> |
|||
</view> |
|||
<view class="lf-color-555 lf-font-24">10</view> |
|||
</view> |
|||
</view> |
|||
<view class="lf-flex"> |
|||
<view class="lf-flex lf-m-t-30"> |
|||
<view> |
|||
<image class="comment-img" src="https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png" mode="aspectFill"></image> |
|||
</view> |
|||
<view class="lf-flex-column lf-m-l-20"> |
|||
<view class="lf-color-999 lf-font-24">金城优选哈哈</view> |
|||
<view class="lf-row-center" style="max-width: 446rpx;"> |
|||
<text class="lf-color-333 lf-m-r-10">回复</text> |
|||
<text class="lf-font-24 lf-color-999">优选嘿嘿:</text> |
|||
<text class="lf-font-26 lf-color-black lf-m-l-10">哈哈哈哈哈</text> |
|||
<text class="lf-color-999 lf-font-24 lf-m-l-10">08-30</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="lf-m-t-30" style="position: absolute;right:33rpx;"> |
|||
<view> |
|||
<text class="lf-iconfont icon-shoucang"></text> |
|||
</view> |
|||
<view class="lf-color-555 lf-font-24">10</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<!-- 评论结束 --> |
|||
<view> |
|||
<view class="lf-m-t-20"> |
|||
<view class="lf-flex"> |
|||
<view> |
|||
<image class="comment-img" src="https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png" mode="aspectFill"></image> |
|||
</view> |
|||
<view class="lf-flex-column lf-m-l-20"> |
|||
<view class="lf-color-999 lf-font-24">金城优选哈哈</view> |
|||
<view> |
|||
<view class="lf-color-black lf-line-2" style="max-width:550rpx;">评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论<text class="lf-color-999 lf-font-24 lf-m-l-10">08-30</text></view> |
|||
</view> |
|||
</view> |
|||
<view class="lf-m-l-32" style="position: absolute;right:33rpx;"> |
|||
<view> |
|||
<text class="lf-iconfont icon-shoucang"></text> |
|||
</view> |
|||
<view class="lf-color-555 lf-font-24">10</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<!-- 底部tab --> |
|||
<view class="comment-tab"> |
|||
<view> |
|||
<input class="rom-search" type="text" placeholder="说点什么" /> |
|||
</view> |
|||
<view class="lf-row-center"> |
|||
<view class="lf-row-center lf-m-r-35"> |
|||
<text class="lf-iconfont icon-shoucang"></text> |
|||
<text class="lf-m-l-10 lf-font-24 lf-color-black">379</text> |
|||
</view> |
|||
<view class="lf-row-center lf-m-r-35"> |
|||
<text class="lf-iconfont icon-fenxiang"></text> |
|||
<text class="lf-m-l-10 lf-font-24 lf-color-black">3579</text> |
|||
</view> |
|||
<view class="lf-row-center lf-m-r-35"> |
|||
<text class="lf-iconfont icon-fabu"></text> |
|||
<text class="lf-m-l-10 lf-font-24 lf-color-black">379</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.tag-father { |
|||
position: relative; |
|||
} |
|||
.head-tag { |
|||
color: white; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
text-align: center; |
|||
font-size: 24rpx; |
|||
width: 36rpx; |
|||
height: 36rpx; |
|||
border-radius: 50%; |
|||
background-color: #15716E; |
|||
border: 1rpx solid #FFFFFF; |
|||
position: absolute; |
|||
left: 66rpx; |
|||
top: 70rpx; |
|||
z-index: 99; |
|||
} |
|||
/deep/.input-placeholder{ |
|||
color: #aaa; |
|||
font-size: 28rpx; |
|||
} |
|||
.rom-search { |
|||
width: 279rpx; |
|||
height: 70rpx; |
|||
background: #F4F8F8; |
|||
border-radius: 35rpx; |
|||
padding-left: 30rpx; |
|||
font-size: 28rpx; |
|||
} |
|||
.comment-tab { |
|||
padding: 0 0 0 32rpx; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
height: 100rpx; |
|||
align-items: center; |
|||
width: 100%; |
|||
border-top: 1rpx solid rgba(0, 0, 0, 0.1); |
|||
position: fixed; |
|||
bottom: 0; |
|||
z-index: 99; |
|||
background-color: white; |
|||
} |
|||
.comment-replay { |
|||
margin-left: 96rpx; |
|||
margin-top: 28rpx; |
|||
} |
|||
.comment-img { |
|||
width: 75rpx; |
|||
height: 75rpx; |
|||
border-radius: 50%; |
|||
} |
|||
.comment{ |
|||
width: 100%; |
|||
height: max-content; |
|||
background-color: white; |
|||
border-radius: 5rpx; |
|||
box-sizing: border-box; |
|||
padding: 32rpx; |
|||
font-size: 28rpx; |
|||
color: #777777; |
|||
padding-bottom: 120rpx; |
|||
} |
|||
.qzone-img { |
|||
position: relative; |
|||
width: 220rpx; |
|||
height: 220rpx; |
|||
border-radius: 10rpx; |
|||
margin-right: 12rpx; |
|||
&:nth-child(3n) { |
|||
margin-right: 0; |
|||
} |
|||
&:nth-child(n + 4) { |
|||
margin-top: 12rpx; |
|||
} |
|||
} |
|||
.head-img { |
|||
width: 100rpx; |
|||
height: 100rpx; |
|||
border-radius: 50%; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,139 @@ |
|||
<template> |
|||
<view> |
|||
<lf-nav :spreadOut="true" :showIcon="true" bgColor="#F3F8F8" title="个人主页"></lf-nav> |
|||
<view class="user-top"> |
|||
<view class="lf-row-between lf-w-100"> |
|||
<view class="lf-flex"> |
|||
<view class="tag-father"> |
|||
<image src="https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png" mode="aspectFill" class="head-img"></image> |
|||
<view class="head-tag">V</view> |
|||
</view> |
|||
<view class="lf-flex-column lf-m-l-20"> |
|||
<text class="lf-font-42 lf-color-black lf-font-bold">最新</text> |
|||
<text class="lf-font-28 lf-color-black">0 关注 | 0 粉丝</text> |
|||
</view> |
|||
</view> |
|||
<view> |
|||
<button class="head-btn">关注</button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="lf-m-32"> |
|||
<view class="lf-font-48 lf-color-black lf-font-bold"> |
|||
08月27日 |
|||
</view> |
|||
<view class="lf-color-777 lf-font-24"> |
|||
18:39 |
|||
</view> |
|||
<view class="lf-flex-wrap lf-m-t-20"> |
|||
<image v-for="item in 9" class="qzone-img" src="https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png" mode="aspectFill"></image> |
|||
</view> |
|||
<view class="lf-m-t-30 lf-row-between lf-p-l-50 lf-p-r-50"> |
|||
<view class="lf-row-center"> |
|||
<text class="lf-iconfont icon-shoucang"></text> |
|||
<text class="lf-font-24 lf-color-777 lf-m-l-10">379</text> |
|||
</view> |
|||
<view class="lf-row-center"> |
|||
<text class="lf-iconfont icon-fabu"></text> |
|||
<text class="lf-font-24 lf-color-777 lf-m-l-10">3579</text> |
|||
</view> |
|||
<view class="lf-row-center"> |
|||
<text class="lf-iconfont icon-fenxiang"></text> |
|||
<text class="lf-font-24 lf-color-777 lf-m-l-10">63</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="lf-m-32"> |
|||
<view class="lf-font-48 lf-color-black lf-font-bold"> |
|||
08月27日 |
|||
</view> |
|||
<view class="lf-color-777 lf-font-24"> |
|||
18:39 |
|||
</view> |
|||
<view class="lf-flex-wrap lf-m-t-20"> |
|||
<image v-for="item in 9" class="qzone-img" src="https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png" mode="aspectFill"></image> |
|||
</view> |
|||
<view class="lf-m-t-30 lf-row-between lf-p-l-50 lf-p-r-50"> |
|||
<view class="lf-row-center"> |
|||
<text class="lf-iconfont icon-shoucang"></text> |
|||
<text class="lf-font-24 lf-color-777 lf-m-l-10">379</text> |
|||
</view> |
|||
<view class="lf-row-center"> |
|||
<text class="lf-iconfont icon-fabu"></text> |
|||
<text class="lf-font-24 lf-color-777 lf-m-l-10">3579</text> |
|||
</view> |
|||
<view class="lf-row-center"> |
|||
<text class="lf-iconfont icon-fenxiang"></text> |
|||
<text class="lf-font-24 lf-color-777 lf-m-l-10">63</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
</script> |
|||
|
|||
<style> |
|||
page { |
|||
background-color: white; |
|||
} |
|||
</style> |
|||
|
|||
<style lang="scss" scoped> |
|||
.tag-father { |
|||
position: relative; |
|||
} |
|||
.head-tag { |
|||
color: white; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
text-align: center; |
|||
font-size: 24rpx; |
|||
width: 36rpx; |
|||
height: 36rpx; |
|||
border-radius: 50%; |
|||
background-color: #15716E; |
|||
border: 1rpx solid #FFFFFF; |
|||
position: absolute; |
|||
left: 76rpx; |
|||
top: 86rpx; |
|||
z-index: 99; |
|||
} |
|||
.qzone-img { |
|||
width: 220rpx; |
|||
height: 220rpx; |
|||
border-radius: 10rpx; |
|||
margin-right: 12rpx; |
|||
&:nth-child(3n) { |
|||
margin-right: 0; |
|||
} |
|||
&:nth-child(n + 4) { |
|||
margin-top: 12rpx; |
|||
} |
|||
} |
|||
.user-top { |
|||
background-color: #F3F8F8; |
|||
height: 236rpx; |
|||
padding: 60rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
.head-img { |
|||
width: 120rpx; |
|||
height: 120rpx; |
|||
border-radius: 50%; |
|||
} |
|||
.head-btn { |
|||
width: 160rpx; |
|||
height: 70rpx; |
|||
background: #15716E; |
|||
display: flex; |
|||
align-items: center; |
|||
font-size: 28rpx; |
|||
color: white; |
|||
justify-content: center; |
|||
border-radius: 35rpx; |
|||
} |
|||
</style> |
|||
|
After Width: 990 | Height: 852 | Size: 295 KiB |
Write
Preview
Loading…
Cancel
Save
Reference in new issue