admingit/PropertyApp
1
0
Fork 0
mirror of https://gitee.com/java110/PropertyApp.git synced 2026-02-23 21:36:39 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

首页画页面

Browse Source
This commit is contained in:
wuxw 2020-02-22 14:28:01 +08:00
parent 6191663c9f
commit 0c43665aba
6 changed files with 226 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
pages.json
View File

@ -52,5 +52,8 @@
"text": "我的"
}
]
},
"networkTimeout": {
"request": 10000
}
}

46
pages/addressList/addressList.vue
View File

@ -1,5 +1,37 @@
<template>
<view>
<view class="cu-bar bg-white search " >
<view class="search-form round">
<text class="cuIcon-search"></text>
<input type="text" placeholder="输入搜索的关键词" confirm-type="search"></input>
</view>
<view class="action">
<button class="cu-btn bg-gradual-green shadow-blur round">搜索</button>
</view>
</view>
<scroll-view scroll-y class="indexes" :scroll-into-view="'indexes-'+ listCurID" :style="[{height:'calc(100vh - '+ CustomBar + 'px - 50px)'}]"
:scroll-with-animation="true" :enable-back-to-top="true">
<block v-for="(item,index) in list" :key="index">
<view :class="'indexItem-' + item.name" :id="'indexes-' + item.name" :data-index="item.name">
<view class="padding">{{item.name}}</view>
<view class="cu-list menu-avatar no-padding">
<view class="cu-item" v-for="(items,sub) in 2" :key="sub">
<view class="cu-avatar round lg">{{item.name}}</view>
<view class="content">
<view class="text-grey">{{item.name}}<text class="text-abc">{{list[sub].name}}</text>君</view>
<view class="text-gray text-sm">
有{{sub+2}}个主子需要伺候
</view>
</view>
<view class="action">
<text class="lg text-gray cuIcon-dianhua photo_icon"></text>
</view>
</view>
</view>
</view>
</block>
</scroll-view>
</view>
</template>
@ -8,9 +40,18 @@
export default {
data() {
return {
list: []
}
},
onLoad() {
let list = [{}];
for (let i = 0; i < 5; i++) {
list[i] = {};
list[i].name = String.fromCharCode(65 + i);
}
this.list = list;
},
methods: {
}
@ -19,4 +60,9 @@
<style>
.photo_icon{
font-size: 48upx;
color:#0081FF;
}
</style>

197
pages/index/index.vue
View File

@ -1,17 +1,182 @@
<template>
<view class="content">
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">{{title}}</text>
<scroll-view :scroll-y="modalName==null" class="page" :class="show">
<view class="cu-list grid" :class="['col-' + gridCol,gridBorder?'':'no-border']">
<view class="cu-item" v-for="(item,index) in cuIconList" :key="index" v-if="index<gridCol*2">
<view :class="['cuIcon-' + item.cuIcon,'text-' + item.color]">
<view class="cu-tag badge" v-if="item.badge!=0">
<block v-if="item.badge!=1">{{item.badge>99?'99+':item.badge}}</block>
</view>
</view>
<text>{{item.name}}</text>
</view>
</view>
<!-- 轮播图 -->
<view class="margin-top">
<swiper class="screen-swiper swiper-height-index" :class="round-dot" :indicator-dots="true" :circular="true"
:autoplay="true" interval="5000" duration="500">
<swiper-item v-for="(item,index) in swiperList" :key="index">
<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover" v-if="item.type=='video'"></video>
</swiper-item>
</swiper>
</view>
<view class="cu-bar bg-white solid-bottom margin-top">
<view class="action">
小区文化
</view>
<view class="action">
<text class="lg text-gray cuIcon-more"></text>
</view>
</view>
<view class="cu-list menu-avatar">
<view class="cu-item">
<view class="cu-avatar radius lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg);"></view>
<view class="content">
<view class="text-grey">凯尔</view>
<view class="text-gray text-sm flex">
<view class="text-cut">
<text class="cuIcon-infofill text-red margin-right-xs"></text>
我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。
</view> </view>
</view>
<view class="action">
<view class="text-grey text-xs">22:20</view>
</view>
</view>
<view class="cu-item">
<view class="cu-avatar radius lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg);"></view>
<view class="content">
<view class="text-grey">凯尔</view>
<view class="text-gray text-sm flex">
<view class="text-cut">
<text class="cuIcon-infofill text-red margin-right-xs"></text>
我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。
</view> </view>
</view>
<view class="action">
<view class="text-grey text-xs">22:20</view>
</view>
</view>
<view class="cu-item">
<view class="cu-avatar radius lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg);"></view>
<view class="content">
<view class="text-grey">凯尔</view>
<view class="text-gray text-sm flex">
<view class="text-cut">
<text class="cuIcon-infofill text-red margin-right-xs"></text>
我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。
</view> </view>
</view>
<view class="action">
<view class="text-grey text-xs">22:20</view>
</view>
</view>
<view class="cu-item">
<view class="cu-avatar radius lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg);"></view>
<view class="content">
<view class="text-grey">凯尔</view>
<view class="text-gray text-sm flex">
<view class="text-cut">
<text class="cuIcon-infofill text-red margin-right-xs"></text>
我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。
</view> </view>
</view>
<view class="action">
<view class="text-grey text-xs">22:20</view>
</view>
</view>
</view>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello'
gridCol: 4,
cuIconList: [{
cuIcon: 'cardboardfill',
color: 'red',
badge: 120,
name: 'VR'
}, {
cuIcon: 'recordfill',
color: 'orange',
badge: 1,
name: '录像'
}, {
cuIcon: 'picfill',
color: 'yellow',
badge: 0,
name: '图像'
}, {
cuIcon: 'noticefill',
color: 'olive',
badge: 22,
name: '通知'
}, {
cuIcon: 'upstagefill',
color: 'cyan',
badge: 0,
name: '排行榜'
}, {
cuIcon: 'clothesfill',
color: 'blue',
badge: 0,
name: '皮肤'
}, {
cuIcon: 'discoverfill',
color: 'purple',
badge: 0,
name: '发现'
}, {
cuIcon: 'questionfill',
color: 'mauve',
badge: 0,
name: '帮助'
}, {
cuIcon: 'commandfill',
color: 'purple',
badge: 0,
name: '问答'
}, {
cuIcon: 'brandfill',
color: 'mauve',
badge: 0,
name: '版权'
}],
swiperList: [{
id: 0,
type: 'image',
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84000.jpg'
}, {
id: 1,
type: 'image',
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big37006.jpg',
}, {
id: 2,
type: 'image',
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big39000.jpg'
}, {
id: 3,
type: 'image',
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg'
}, {
id: 4,
type: 'image',
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big25011.jpg'
}, {
id: 5,
type: 'image',
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big21016.jpg'
}, {
id: 6,
type: 'image',
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg'
}],
}
},
onLoad() {
@ -24,29 +189,11 @@
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.swiper-height-index{
height: 240upx;
min-height: 240upx;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
</style>

3
pages/my/my.vue
View File

@ -1,5 +1,8 @@
<template>
<view>
<view class="my-top">
</view>
</view>
</template>

BIN
static/image/addressList-selected.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.4 KiB

After

Width:  |  Height:  |  Size: 5.5 KiB

BIN
static/image/addressList.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.2 KiB

After

Width:  |  Height:  |  Size: 6.1 KiB