mirror of
https://gitee.com/java110/PropertyApp.git
synced 2026-02-23 21:36:39 +08:00
首页画页面
This commit is contained in:
wuxw
parent
6191663c9f
commit
0c43665aba
@ -52,5 +52,8 @@
|
|||||||
"text": "我的"
|
"text": "我的"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
},
|
||||||
|
"networkTimeout": {
|
||||||
|
"request": 10000
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,5 +1,37 @@
|
|||||||
<template>
|
<template>
|
||||||
<view>
|
<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>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
@ -8,9 +40,18 @@
|
|||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
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: {
|
methods: {
|
||||||
|
|
||||||
}
|
}
|
||||||
@ -18,5 +59,10 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|
||||||
|
.photo_icon{
|
||||||
|
font-size: 48upx;
|
||||||
|
color:#0081FF;
|
||||||
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -1,9 +1,94 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="content">
|
<view class="content">
|
||||||
<image class="logo" src="/static/logo.png"></image>
|
<scroll-view :scroll-y="modalName==null" class="page" :class="show">
|
||||||
<view class="text-area">
|
<view class="cu-list grid" :class="['col-' + gridCol,gridBorder?'':'no-border']">
|
||||||
<text class="title">{{title}}</text>
|
<view class="cu-item" v-for="(item,index) in cuIconList" :key="index" v-if="index<gridCol*2">
|
||||||
</view>
|
<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>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -11,7 +96,87 @@
|
|||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
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() {
|
onLoad() {
|
||||||
@ -24,29 +189,11 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.content {
|
.swiper-height-index{
|
||||||
display: flex;
|
height: 240upx;
|
||||||
flex-direction: column;
|
min-height: 240upx;
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.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>
|
</style>
|
||||||
|
|||||||
@ -1,5 +1,8 @@
|
|||||||
<template>
|
<template>
|
||||||
<view>
|
<view>
|
||||||
|
<view class="my-top">
|
||||||
|
|
||||||
|
</view>
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 6.4 KiB After Width: | Height: | Size: 5.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.2 KiB After Width: | Height: | Size: 6.1 KiB |
Loading…
Reference in New Issue
Block a user