theluyuan/demingshangjia
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

massage

Browse Source
This commit is contained in:
zmr900709 2020-07-16 14:23:12 +08:00
parent 5f8e0f5f10
commit 82508aa615
4 changed files with 127 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
package-lock.json generated
View File

@ -5,9 +5,9 @@
"requires": true,
"dependencies": {
"uview-ui": {
"version": "1.3.3",
"resolved": "https://registry.npmjs.org/uview-ui/-/uview-ui-1.3.3.tgz",
"integrity": "sha512-aDXZCptHhBCzuPujX9QyCV26y2dX7WgNpm3VX9+6fxoeA6eA8s4CneNTh5jrsKzPrUYbbEs9TSqmN7zIN3a9xQ=="
"version": "1.5.2",
"resolved": "https://registry.npmjs.org/uview-ui/-/uview-ui-1.5.2.tgz",
"integrity": "sha512-FV9G+gZTAZKEE2m85ahIbIRiC/fdzTl+eNXDIMBoyc9b+fQWQhEtmAfu6huu7AtKuTI6gfqaYn6WGcmqYvr76w=="
}
}
}

2
package.json
View File

@ -4,7 +4,7 @@
"description": "",
"main": "main.js",
"dependencies": {
"uview-ui": "^1.3.3"
"uview-ui": "^1.5.2"
},
"devDependencies": {},
"scripts": {

12
pages.json
View File

@ -4,6 +4,18 @@
},
"pages": [
{
"path": "pages/messages/messagesList",
"style": {
"navigationBarTitleText": "消息",
"app-plus": {
"titleNView": {
"backgroundColor": "#FFFFFF",
"titleColor": "#333333"
}
}
}
},
{
"path": "pages/index/index",
"style": {

111
pages/messages/messagesList.vue Normal file
View File

@ -0,0 +1,111 @@
<template>
<!-- login页面 -->
<view>
<view class="border_serach">
<view class="u-search">
<u-search :show-action="false" input-align="left" shape="round" placeholder="搜索" v-model="keyword"></u-search>
</view>
</view>
<!-- 消息列表 -->
<view class="massage_list" v-for="(item,index) in list" :key="index">
<view class="images">
<image :src="item.url" ></image>
</view>
<view class="names">{{item.name}}</view>
<view class="content">{{item.content}}</view>
<view class="times">{{item.time}}</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
keyword: '搜索',
list: [{
name: '瘦瘦',
content: "木糖少女小紫薯西装领连衣裙夏季新款女装装领连衣裙夏季装领连衣裙夏季装领连衣裙夏季夏收腰格子格纹裙子",
url: '../../static/image/tosign/tosigin(5).png',
id : '1',
time : '10：15'
},
{
name: '瘦瘦',
content: "木糖少女小紫薯西装领连衣裙夏季新款女装装领连衣裙夏季装领连衣裙夏季装领连衣裙夏季夏收腰格子格纹裙子",
url: '../../static/image/tosign/tosigin(5).png',
id : '1',
time : '10：15'
},
{
name: '瘦瘦',
content: "木糖少女小紫薯西装领连衣裙夏季新款女装装领连衣裙夏季装领连衣裙夏季装领连衣裙夏季夏收腰格子格纹裙子",
url: '../../static/image/tosign/tosigin(5).png',
id : '1',
time : '10：15'
},
],
};
},
methods: {
}
};
</script>
<style lang="scss" scoped>
.u-search{
width: 690rpx;
margin: 0 auto;
padding: 14rpx;
}
.border_serach{
border-top: 1px solid #EDEDED;
}
.massage_list{
padding: 25rpx 18rpx 25rpx 31rpx;
position: relative;
border-bottom: 1px #ECECEC solid;
overflow: hidden;
zoom: 1;
.images{
width: 84rpx;
height: 84rpx;
margin-right: 28rpx;
}
}
.massage_list image{
width: 84rpx;
height: 84rpx;
.names{
font-size: 30rpx;
color: #333;
}
.content{
margin-bottom: 19rpx;
}
}
.content , .names{
width: 480rpx;
}
.content{
margin-top: 19rpx;
font-size: 26rpx;
color: #666666;
height: 30rpx;
height: 30rpx;
overflow:hidden; //超出的文本隐藏
text-overflow:ellipsis; //用省略号显示
white-space:nowrap; //不换行
}
.times{
position: absolute;
right: 29rpx;
top: 29rpx;
font-size: 22rpx;
color: #999999;
}
.massage_list > view{
float: left;
}
</style>