Leadfyy.co
/
blindDate
11
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Merge branch 'master' of http://8.134.10.79:3000/Leadfyy.co/blindDate 

# Conflicts:
#	pages.json
master
石可 5 years ago
parent
b9b5f6e55e d6053bd646
commit
f9e21367f7
9 changed files with 377 additions and 25 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      common/styles/theme.css
  2. 76
      components/lf-userList/lf-userList.vue
  3. 16
      components/self-line/self-line.vue
  4. 4
      main.js
  5. 17
      pages.json
  6. 124
      pages/index/index.vue
  7. 83
      pages/upTheWall/upTheWall.vue
  8. 78
      pages/wallMember/wallMember.vue
  9. BIN
      static/logo.png

4
common/styles/theme.css
View File

@ -61,11 +61,11 @@ radio:not([disabled]) .wx-radio-input:hover checkbox:not([disabled]) .wx-checkbo
/* #endif */
.lf-color-primary {
color: #1998FE !important;
color: #E21196 !important;
}
.lf-bg-primary {
background: #1998FE !important;
background: #E21196 !important;
}
.lf-color-secondary {

76
components/lf-userList/lf-userList.vue
View File

@ -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>

16
components/self-line/self-line.vue
View File

@ -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>

4
main.js
View File

@ -24,6 +24,10 @@ Vue.prototype.$http = $http;
// 将无数据组件注入全局
import lfNocontent from '@/components/lf-nocontent/lf-nocontent.vue';
Vue.component('lf-nocontent', lfNocontent);
// 页面分割
import selfLine from '@/components/self-line/self-line.vue';
Vue.component('self-line', selfLine);
const app = new Vue({
...App

17
pages.json
View File

@ -6,10 +6,23 @@
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页",
"navigationBarTitleText": "相亲交友",
"enablePullDownRefresh": true
}
},
{
"path": "pages/wallMember/wallMember",
"style": {
"navigationBarTitleText": "上墙会员",
"enablePullDownRefresh": true
}
},
{
"path": "pages/upTheWall/upTheWall",
"style": {
"navigationBarTitleText": "我要上墙"
}
},
{
"path": "pages/login/index",
"style": {
@ -36,7 +49,7 @@
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "领峰UI",
"navigationBarTitleText": "相亲交友",
"navigationBarBackgroundColor": "#FFFFFF",
"backgroundColor": "#F8F8F8"
},

124
pages/index/index.vue
View File

@ -1,41 +1,123 @@
<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 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>
</template>
<script>
import lfUserList from '@/components/lf-userList/lf-userList.vue';
export default {
components: { lfUserList },
data() {
return {
title: 'Hello Leadfyy UI'
}
}
}
</script>
<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;
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>

83
pages/upTheWall/upTheWall.vue
View File

@ -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>

78
pages/wallMember/wallMember.vue
View File

@ -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>

BIN
static/logo.png
View File

Side by Side Swipe Overlay

Before

Width: 72  |  Height: 72  |  Size: 3.9 KiB

After

Width: 500  |  Height: 500  |  Size: 4.8 KiB

Write Preview
Loading…
Cancel
Save