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

[完成] 首页UI 

[完成] 封装用户列表组件
master
LAPTOP-D7TKRI82\邓 5 years ago
parent
eb7c896cb9
commit
96bfbabe06
6 changed files with 201 additions and 23 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 76
      components/lf-userList/lf-userList.vue
  2. 16
      components/self-line/self-line.vue
  3. 4
      main.js
  4. 4
      pages.json
  5. 124
      pages/index/index.vue
  6. BIN
      static/logo.png

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'; import lfNocontent from '@/components/lf-nocontent/lf-nocontent.vue';
Vue.component('lf-nocontent', lfNocontent); Vue.component('lf-nocontent', lfNocontent);
// 页面分割
import selfLine from '@/components/self-line/self-line.vue';
Vue.component('self-line', selfLine);
const app = new Vue({ const app = new Vue({
...App ...App

4
pages.json
View File

@ -6,7 +6,7 @@
{ {
"path": "pages/index/index", "path": "pages/index/index",
"style": { "style": {
"navigationBarTitleText": "领峰UI",
"navigationBarTitleText": "相亲交友",
"enablePullDownRefresh": true "enablePullDownRefresh": true
} }
}, },
@ -20,7 +20,7 @@
], ],
"globalStyle": { "globalStyle": {
"navigationBarTextStyle": "black", "navigationBarTextStyle": "black",
"navigationBarTitleText": "领峰UI",
"navigationBarTitleText": "相亲交友",
"navigationBarBackgroundColor": "#FFFFFF", "navigationBarBackgroundColor": "#FFFFFF",
"backgroundColor": "#F8F8F8" "backgroundColor": "#F8F8F8"
}, },

124
pages/index/index.vue
View File

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

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