Browse Source
Merge branch 'master' of http://8.134.10.79:3000/Leadfyy.co/blindDate
Merge branch 'master' of http://8.134.10.79:3000/Leadfyy.co/blindDate
# Conflicts: # pages.jsonmaster
9 changed files with 377 additions and 25 deletions
-
4common/styles/theme.css
-
76components/lf-userList/lf-userList.vue
-
16components/self-line/self-line.vue
-
4main.js
-
17pages.json
-
124pages/index/index.vue
-
83pages/upTheWall/upTheWall.vue
-
78pages/wallMember/wallMember.vue
-
BINstatic/logo.png
@ -0,0 +1,76 @@ |
|||||
|
<template> |
||||
|
<view class="content" :style="padding ? 'padding: 0rpx 32rpx' : 'padding: 0rpx'"> |
||||
|
<view class="list" v-for="(item, index) in list" :key="index"> |
||||
|
<lf-image class="avatar" src="@/static/logo.png"></lf-image> |
||||
|
<view class="info"> |
||||
|
<view class="lf-flex-1"> |
||||
|
<text>编号:83927</text> |
||||
|
<u-icon name="tags" class="lf-m-l-10"></u-icon> |
||||
|
</view> |
||||
|
<view class="lf-flex-1 lf-m-t-16">24岁·牛·180cm·本科·未婚</view> |
||||
|
<view class="lf-flex-1 lf-m-t-16">自有公司·金融/证券/保险·50万以上</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'lf-userList', |
||||
|
props: { |
||||
|
padding: { |
||||
|
type: Boolean, // 是否显示列表距离页面的边距 |
||||
|
default: true |
||||
|
}, |
||||
|
list: { |
||||
|
type: Array, |
||||
|
default: function(){ |
||||
|
return [1,2,3,4,5,6,7,8,9,10] |
||||
|
// return [1] |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
data(){ |
||||
|
return { |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
onLoad(){ |
||||
|
|
||||
|
}, |
||||
|
methods: { |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped="scoped"> |
||||
|
.content{ |
||||
|
width: 100%; |
||||
|
height: max-content; |
||||
|
box-sizing: border-box; |
||||
|
.list{ |
||||
|
padding: 30rpx 0; |
||||
|
border-bottom: 1rpx solid #E5E5E5; |
||||
|
display: flex; |
||||
|
width: 100%; |
||||
|
height: max-content; |
||||
|
.avatar{ |
||||
|
width: 150rpx; |
||||
|
height: 150rpx; |
||||
|
border-radius: 10rpx; |
||||
|
margin-right: 15rpx; |
||||
|
background-color: #EEEEEE; |
||||
|
} |
||||
|
.info{ |
||||
|
flex: auto; |
||||
|
min-height: 150rpx; |
||||
|
max-width: 522rpx; |
||||
|
display: flex; |
||||
|
align-content: space-between; |
||||
|
flex-wrap: wrap; |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,16 @@ |
|||||
|
<template> |
||||
|
<view class="bg-gray1 h-20" /> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
.h-20 { |
||||
|
height: 20rpx; |
||||
|
} |
||||
|
.bg-gray1 { |
||||
|
background-color: #F6F6F6; |
||||
|
color: #333333; |
||||
|
} |
||||
|
</style> |
||||
@ -1,41 +1,123 @@ |
|||||
<template> |
<template> |
||||
<view class="lf-row-center lf-flex-column"> |
|
||||
<image class="logo" src="/static/logo.png"></image> |
|
||||
<view class="text-area"> |
|
||||
<text class="title">{{title}}</text> |
|
||||
|
<view> |
||||
|
<!-- 头部搜索框 --> |
||||
|
<view class="head-bar"> |
||||
|
<view class="lf-flex search"> |
||||
|
<u-icon name="search" class="lf-font-30 lf-m-l-20"></u-icon> |
||||
|
<view class="lf-m-l-10 lf-font-24">搜索</view> |
||||
|
</view> |
||||
|
<view class="botton">签到</view> |
||||
</view> |
</view> |
||||
|
<!-- 上墙部分 --> |
||||
|
<view class="up-the-wall"> |
||||
|
<view class="lf-row-between"> |
||||
|
<view class="lf-font-32 lf-color-black">最新上墙</view> |
||||
|
<view class="lf-color-999" @click="$url('/pages/wallMember/wallMember')"> |
||||
|
<text class="lf-font-28">查看全部</text> |
||||
|
<u-icon name="arrow-right"></u-icon> |
||||
|
</view> |
||||
|
</view> |
||||
|
<scroll-view class="scroll-bar" :scroll-x="true"> |
||||
|
<view class="lf-flex"> |
||||
|
<view class="user-item" @click="$url('/pages/upTheWall/upTheWall')"> |
||||
|
<!-- <lf-image class="avatar" src="@/static/logo.png"></lf-image> --> |
||||
|
<image class="add-icon" src="@/static/logo.png"></image> |
||||
|
<view class="lf-m-t-12 lf-color-555 lf-font-24 lf-line-1">我要上墙</view> |
||||
|
</view> |
||||
|
<view class="user-item" v-for="item in 6" :key="item"> |
||||
|
<image class="avatar" src="@/static/logo.png"></image> |
||||
|
<view class="lf-m-t-12 lf-color-555 lf-font-24 lf-line-1">编号 73949</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</scroll-view> |
||||
|
</view> |
||||
|
<self-line /> |
||||
|
<!-- 推荐单身 --> |
||||
|
<view> |
||||
|
<view class="lf-row-between lf-p-30 lf-p-32 lf-p-b-20"> |
||||
|
<view class="lf-font-32 lf-color-black">推荐单身</view> |
||||
|
<view class="lf-color-999"> |
||||
|
<text class="lf-font-28">最新</text> |
||||
|
<u-icon name="arrow-right"></u-icon> |
||||
|
</view> |
||||
|
</view> |
||||
|
<lf-user-list></lf-user-list> |
||||
|
</view> |
||||
|
<!-- 加载 --> |
||||
|
<view class="loading-more"> |
||||
|
<text class="loading-more-text">正在加载中</text> |
||||
|
</view> |
||||
|
<!-- 回到顶部 --> |
||||
|
<u-back-top :scrollTop="pageScrollTop"></u-back-top> |
||||
</view> |
</view> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
|
import lfUserList from '@/components/lf-userList/lf-userList.vue'; |
||||
export default { |
export default { |
||||
|
components: { lfUserList }, |
||||
data() { |
data() { |
||||
return { |
return { |
||||
title: 'Hello Leadfyy UI' |
|
||||
|
|
||||
} |
} |
||||
} |
} |
||||
} |
} |
||||
</script> |
</script> |
||||
|
|
||||
<style lang="scss" scoped> |
<style lang="scss" scoped> |
||||
.logo { |
|
||||
height: 200rpx; |
|
||||
width: 200rpx; |
|
||||
margin-top: 200rpx; |
|
||||
margin-left: auto; |
|
||||
margin-right: auto; |
|
||||
margin-bottom: 50rpx; |
|
||||
} |
|
||||
|
|
||||
.text-area { |
|
||||
|
.head-bar{ |
||||
|
width: 750rpx; |
||||
|
height: max-content; |
||||
|
padding: 21rpx 32rpx; |
||||
display: flex; |
display: flex; |
||||
justify-content: center; |
|
||||
|
justify-content: space-between; |
||||
|
.search{ |
||||
|
width: 530rpx; |
||||
|
height: 62rpx; |
||||
|
background: #F7F7F7; |
||||
|
border-radius: 32rpx; |
||||
|
color: #999999; |
||||
|
} |
||||
|
.botton{ |
||||
|
width: 140rpx; |
||||
|
height: 62rpx; |
||||
|
background: #F7F7F7; |
||||
|
border-radius: 32rpx; |
||||
|
text-align: center; |
||||
|
line-height: 62rpx; |
||||
|
color: #222222; |
||||
|
} |
||||
} |
} |
||||
|
|
||||
.title { |
|
||||
font-size: 36rpx; |
|
||||
background-image: linear-gradient(135deg, red, blue); |
|
||||
background-clip: text; |
|
||||
color: transparent; |
|
||||
|
.up-the-wall{ |
||||
|
width: 750rpx; |
||||
|
height: max-content; |
||||
|
padding: 21rpx 32rpx 0; |
||||
|
.scroll-bar{ |
||||
|
width: 100%; |
||||
|
height: 164rpx; |
||||
|
padding: 30rpx 0; |
||||
|
.user-item{ |
||||
|
width: 136rpx; |
||||
|
margin-right: 40rpx; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
flex-wrap: wrap; |
||||
|
&:last-child{ |
||||
|
margin-right: 0rpx; |
||||
|
} |
||||
|
} |
||||
|
.add-icon{ |
||||
|
width: 110rpx; |
||||
|
height: 110rpx; |
||||
|
border-radius: 50%; |
||||
|
} |
||||
|
.avatar{ |
||||
|
width: 96rpx; |
||||
|
height: 96rpx; |
||||
|
border: 5rpx solid #E21196; |
||||
|
border-radius: 50%; |
||||
|
} |
||||
|
} |
||||
} |
} |
||||
</style> |
</style> |
||||
@ -0,0 +1,83 @@ |
|||||
|
<template> |
||||
|
<view class="content"> |
||||
|
<view> |
||||
|
<view class="lf-row-between lf-font-28"> |
||||
|
<view class="lf-font-bold lf-color-black required">【不完全档案】</view> |
||||
|
<view class="lf-color-999">0/300</view> |
||||
|
</view> |
||||
|
<textarea class="textarea" placeholder="请描述一下您的性格观念,工作情况,家庭情况等~"></textarea> |
||||
|
</view> |
||||
|
<view> |
||||
|
<view class="lf-row-between lf-font-28"> |
||||
|
<view class="lf-font-bold lf-color-black required">【平日里,我喜欢】</view> |
||||
|
<view class="lf-color-999">0/300</view> |
||||
|
</view> |
||||
|
<textarea class="textarea" placeholder="请描述一下您的兴趣爱好~"></textarea> |
||||
|
</view> |
||||
|
<view> |
||||
|
<view class="lf-row-between lf-font-28"> |
||||
|
<view class="lf-font-bold lf-color-black required">【我心目中的你】</view> |
||||
|
<view class="lf-color-999">0/300</view> |
||||
|
</view> |
||||
|
<textarea class="textarea" placeholder="请描述一下您的择偶观等~"></textarea> |
||||
|
</view> |
||||
|
|
||||
|
<view class="lf-font-28 lf-color-primary lf-m-b-60"> |
||||
|
<view>*1、申请上墙将消耗您3条红线,若您未能上墙,红线将返还给您。</view> |
||||
|
<view>*2、VIP会员免费上墙,在各自的vip群里艾特@工作人员。</view> |
||||
|
<view>*3、上墙后您的信息将展示在公众号、红娘朋友圈、小程序首页等,上墙展示时间持续7天。</view> |
||||
|
</view> |
||||
|
<button class="button">提交上墙</button> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data(){ |
||||
|
return { |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
onLoad(){ |
||||
|
|
||||
|
}, |
||||
|
methods: { |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped="scoped"> |
||||
|
.lf-m-b-60{ |
||||
|
margin-bottom: 60rpx; |
||||
|
} |
||||
|
.content{ |
||||
|
padding: 38rpx 32rpx; |
||||
|
} |
||||
|
.required{ |
||||
|
padding-left: 10rpx; |
||||
|
position: relative; |
||||
|
&::after{ |
||||
|
position: absolute; |
||||
|
content: '*'; |
||||
|
left: 0; |
||||
|
color: #E21196; |
||||
|
} |
||||
|
} |
||||
|
.textarea{ |
||||
|
width: 686rpx; |
||||
|
height: 200rpx; |
||||
|
background: #F5F5F5; |
||||
|
border-radius: 10rpx; |
||||
|
margin-top: 30rpx; |
||||
|
margin-bottom: 60rpx; |
||||
|
padding: 30rpx; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
.button{ |
||||
|
background-color: #E21196; |
||||
|
color: #FFFFFF; |
||||
|
border-radius: 46rpx; |
||||
|
font-size: 32rpx; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,78 @@ |
|||||
|
<template> |
||||
|
<view> |
||||
|
<view class="content"> |
||||
|
<view class="card" v-for="item in 7" :key="item"> |
||||
|
<lf-image class="cover"></lf-image> |
||||
|
<view class="label"> |
||||
|
<view class="lf-line-1">旅游#体育#美食#逛…</view> |
||||
|
<view class="lf-line-1">青秀区·双鱼座</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<!-- 加载更多 --> |
||||
|
<view class="loading-more"> |
||||
|
<text>没有更多数据啦~</text> |
||||
|
</view> |
||||
|
<!-- 回到顶部 --> |
||||
|
<u-back-top :scrollTop="pageScrollTop"></u-back-top> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data(){ |
||||
|
return { |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
onLoad(){ |
||||
|
|
||||
|
}, |
||||
|
methods: { |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped="scoped"> |
||||
|
.content{ |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
padding: 44rpx 32rpx; |
||||
|
} |
||||
|
.card{ |
||||
|
width: 334rpx; |
||||
|
height: 360rpx; |
||||
|
border-radius: 10rpx; |
||||
|
position: relative; |
||||
|
overflow: hidden; |
||||
|
margin-right: 18rpx; |
||||
|
margin-bottom: 18rpx; |
||||
|
&:nth-child(2n){ |
||||
|
margin-right: 0rpx; |
||||
|
} |
||||
|
.cover{ |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
background-color: #EEEEEE; |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
} |
||||
|
.label{ |
||||
|
position: absolute; |
||||
|
bottom: 0; |
||||
|
left: 0; |
||||
|
width: 100%; |
||||
|
height: 98rpx; |
||||
|
color: #FFFFFF; |
||||
|
background: rgba(0, 0, 0, 0.5); |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
padding: 0 20rpx; |
||||
|
flex-wrap: nowrap; |
||||
|
flex-direction: column; |
||||
|
font-size: 28rpx; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
|
Before Width: 72 | Height: 72 | Size: 3.9 KiB After Width: 500 | Height: 500 | Size: 4.8 KiB |
Write
Preview
Loading…
Cancel
Save
Reference in new issue