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
53ae16f097 5372041397
commit
8ea1ae05bb
5 changed files with 336 additions and 6 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. 48
      components/lf-nolanPhoto/lf-nolanPhoto.vue
  2. 6
      pages.json
  3. 182
      pages/find/find.vue
  4. 53
      pages/messageCenter/index.vue
  5. 53
      pages/messageCenter/system.vue

48
components/lf-nolanPhoto/lf-nolanPhoto.vue
View File

@ -0,0 +1,48 @@
<template>
<view class="content">
<view class="image-item" v-for="item in 5" :key="item">
<image src="https://picsum.photos/200"></image>
</view>
</view>
</template>
<script>
export default {
data(){
return {
}
},
onLoad(){
// TODO 优化当头像数量超过盒子大小时最后一个元素显示+剩余多少张
// 参考：http://www.bootstrapmb.com/item/2739
},
methods: {
}
}
</script>
<style lang="scss" scoped="scoped">
.content{
display: flex;
flex-wrap: nowrap;
width: 100%;
height: 60rpx;
margin-top: 20rpx;
.image-item{
width: 60rpx;
height: 60rpx;
border-radius: 50%;
border: 2rpx solid #FFFFFF;
overflow: hidden;
&:nth-child(n+2){
margin-left: -16rpx;
}
image{
width: 100%;
height: 100%;
}
}
}
</style>

6
pages.json
View File

@ -132,6 +132,12 @@
"style": { "style": {
"navigationBarTitleText": "消息" "navigationBarTitleText": "消息"
} }
},
{
"path": "pages/messageCenter/system",
"style": {
"navigationBarTitleText": "系统消息"
}
} }
], ],
"globalStyle": { "globalStyle": {

182
pages/find/find.vue
View File

@ -1,14 +1,81 @@
<template> <template>
<view> <view>
<swiper class="cover_swiper" :current="current">
<swiper-item v-for="(item, index) in cover_images" :key="index">
<lf-image :src="item"></lf-image>
</swiper-item>
</swiper>
<view class="content">
<view class="card" v-for="item in 2" :key="item">
<view class="avatar">
<lf-image src="../../static/logo.png" ></lf-image>
</view>
<view class="info">
<!-- 昵称和说说文字 -->
<view class="lf-font-28 lf-color-777">编号 73949</view>
<view class="lf-font-32 lf-color-222 lf-m-t-10">我更新了相册</view>
<!-- 图片显示区 -->
<view class="images-box">
<view class="img" v-for="item in 2" :key="item">
<lf-image src="https://picsum.photos/seed/picsum/200/300" />
</view>
</view>
<!-- 赞过的用户头像 -->
<lf-nolan-photo></lf-nolan-photo>
<!-- 时间和更多按钮 -->
<view class="lf-row-between lf-m-t-23">
<view class="lf-font-28 lf-color-777">08:38</view>
<view class="more" @click="show_more = !show_more">
<text>···</text>
<view class="more-modal" v-if="show_more">
<view class="more-item">
<text class="lf-iconfont icon-zan"></text>
<text class="lf-m-l-14">赞</text>
</view>
<view class="more-item">
<text class="lf-iconfont icon-pinglun"></text>
<text class="lf-m-l-14">评论</text>
</view>
<view class="more-item">
<text class="lf-iconfont icon-fenxiang"></text>
<text class="lf-m-l-14">分享</text>
</view>
</view>
</view>
</view>
<!-- 评论 -->
<view class="comment">
<view>评论：</view>
<view class="lf-m-t-20">
<text>等呵呵～：</text>
<text class="lf-color-333">哈哈哈哈哈哈</text>
</view>
<view class="lf-m-t-20">
<text>编号37894</text>
<text class="lf-color-333 lf-m-l-10 lf-m-r-10">回复</text>
<text>等呵呵～：</text>
<text class="lf-color-333">俺是头大本驴</text>
</view>
</view>
</view>
</view>
</view>
<!-- 悬浮发布按钮 -->
<view class="fixed-bottom" hover-class="lf-opacity">
<text class="lf-iconfont icon-jia lf-font-50"></text>
</view>
</view> </view>
</template> </template>
<script> <script>
import lfNolanPhoto from '@/components/lf-nolanPhoto/lf-nolanPhoto.vue';
export default { export default {
components: { lfNolanPhoto },
data(){ data(){
return { return {
current: 0,
cover_images: ['https://picsum.photos/seed/picsum/200/300'],
show_more: false
} }
}, },
onLoad(){ onLoad(){
@ -21,5 +88,116 @@
</script> </script>
<style lang="scss" scoped="scoped"> <style lang="scss" scoped="scoped">
.cover_swiper{
width: 750rpx;
height: 375rpx;
}
.content{
width: 750rpx;
height: max-content;
padding: 40rpx 32rpx;
box-sizing: border-box;
.card{
width: 100%;
height: max-content;
padding-bottom: 30rpx;
border-bottom: 1rpx solid #e5e5e5;
display: flex;
align-items: flex-start;
justify-content: space-between;
&:nth-child(n+2){
margin-top: 30rpx;
}
&:last-child{
border-bottom: none;
}
.avatar{
width: 110rpx;
height: 110rpx;
border-radius: 50%;
}
.info{
width: 560rpx;
height: max-content;
}
.images-box{
margin-top: 28rpx;
display: flex;
flex-wrap: wrap;
.img{
width: 275rpx;
height: 275rpx;
background-color: #0BCE5F;
margin-right: 10rpx;
&:nth-child(2n){
margin-right: 0rpx;
}
&:nth-child(n+3){
margin-top: 10rpx;
}
}
}
.more{
width: 66rpx;
height: 40rpx;
background-color: #F5F5F5;
border-radius: 5rpx;
color: #333333;
text-align: center;
line-height: 40rpx;
font-size: 42rpx;
position: relative;
.more-modal{
position: absolute;
left: -472rpx;
top: -14rpx;
width: 467rpx;
height: 68rpx;
background: #555555;
border-radius: 5rpx;
display: flex;
align-items: center;
.more-item{
width: 156rpx;
height: 48rpx;
border-right: 1rpx solid #777777;
font-size: 24rpx;
color: #FFFFFF;
display: flex;
justify-content: center;
align-items: center;
&:last-child{
border-right: none;
}
}
}
}
.comment{
margin-top: 20rpx;
width: 100%;
height: max-content;
background-color: #F5F5F5;
border-radius: 5rpx;
box-sizing: border-box;
padding: 20rpx;
font-size: 28rpx;
color: #777777;
}
}
}
.fixed-bottom{
position: fixed;
right: 32rpx;
bottom: 40rpx;
width: 100rpx;
height: 100rpx;
background-color: #E21196;
border-radius: 50%;
color: #FFFFFF;
display: flex;
justify-content: center;
align-items: center;
}
</style> </style>

53
pages/messageCenter/index.vue
View File

@ -1,6 +1,17 @@
<template> <template>
<view>
<view class="content">
<view class="list" v-for="(item, index) in list" :key="index" @click="$url(item.path)" hover-class="lf-opacity">
<image class="icon" src="../../static/images/empty.png"></image>
<view class="lf-row-between" style="width: 556rpx;">
<view>
<view class="lf-font-32 lf-color-222">{{ item.title }}</view>
<view class="lf-m-t-10 lf-font-28 lf-color-777">{{ item.desc }}</view>
</view>
<view>
<text class="lf-iconfont icon-xiangyou lf-color-999"></text>
</view>
</view>
</view>
</view> </view>
</template> </template>
@ -8,7 +19,25 @@
export default { export default {
data(){ data(){
return { return {
list: [{
title: '消息订阅',
desc: '关闭后将错过不少缘分',
icon: '',
path: '',
unread_count: 0
},{
title: '联系过的人',
desc: '去看看哪些人联系过了',
icon: '',
path: '',
unread_count: 0
},{
title: '系统消息',
desc: '查看官方消息',
icon: '',
path: '/pages/messageCenter/system',
unread_count: 0
}]
} }
}, },
onLoad(){ onLoad(){
@ -21,5 +50,21 @@
</script> </script>
<style lang="scss" scoped="scoped"> <style lang="scss" scoped="scoped">
.content{
padding: 0 32rpx;
width: 750rpx;
height: max-content;
box-sizing: border-box;
.list{
padding: 30rpx 0;
border-bottom: 1rpx solid #e5e5e5;
display: flex;
.icon{
width: 120rpx;
height: 120rpx;
border-radius: 50%;
margin-right: 15rpx;
}
}
}
</style> </style>

53
pages/messageCenter/system.vue
View File

@ -0,0 +1,53 @@
<template>
<view class="content">
<view class="list" v-for="item in 12">
<view class="lf-row-between">
<view class="lf-font-32 lf-color-222 lf-line-1" style="width: 420rpx;">小程序里发动态教程</view>
<view class="lf-font-24 lf-color-777">2021-08-06</view>
</view>
<view class="lf-m-t-10 lf-font-28 lf-color-777">小程序里发动态教程</view>
</view>
<u-back-top :scrollTop="pageScrollTop"></u-back-top>
</view>
</template>
<script>
export default {
data(){
return {
}
},
onLoad(){
},
methods: {
}
}
</script>
<style>
page{
background-color: #F5F5F5;
}
</style>
<style lang="scss" scoped="scoped">
.content{
width: 750rpx;
height: max-content;
padding: 30rpx 32rpx;
box-sizing: border-box;
.list{
width: 686rpx;
height: max-content;
background-color: #FFFFFF;
border-radius: 10rpx;
box-sizing: border-box;
padding: 30rpx;
&:nth-child(n+2){
margin-top: 30rpx;
}
}
}
</style>
Write Preview
Loading…
Cancel
Save