Skip to content

A
applet
提交 9207bcfd authored 作者: 何忠建's avatar 何忠建
1 浏览文件
操作

首页+公告静态页面

上级 17803cf7
隐藏空白字符变更
内嵌 并排
正在显示 包含 537 行增加 和 99 行删除
pages/announcement/index.vue 0 → 100644
浏览文件 @ 9207bcfd
<template>
<view class="container">
<view class="page">
<view class="nav-bar">
<image src="../../static/images/icon_press01.png" class="icon"></image>
<view class="nav-title">社区公告</view>
</view>
<view class="news">
<view class="tab">
<view class="item active">全部<image src="../../static/images/icon_press02.png" class="icon"></image>
</view>
<view class="item">未读</view>
<view class="item">已读</view>
</view>
<view class="list">
<view class="item">
<image src="../../static/images/img02.png" class="icon"></image>
<view class="con">
<view class="name">开展民族团结进步创建进社区 活动<view class="tag">非常紧急</view>
</view>
<view class="time">物业服务中心 2020/09/08</view>
</view>
</view>
<view class="item">
<image src="../../static/images/img03.png" class="icon"></image>
<view class="con">
<view class="name">开展民族团结进步创建进社区 活动</view>
<view class="time">物业服务中心 2020/09/08</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
},
onLoad() {
},
onShow() {
}
}
</script>
<style lang="scss" scoped>
.page {
padding: 30rpx 0 0;
background-color: #ffffff;
}
.nav-bar {
padding: 0 30rpx;
width: 100%;
height: 44px;
line-height: 44px;
margin-top: 10rpx;
display: flex;
align-items: center;
.icon {
width: 15rpx;
height: 24rpx;
}
.nav-title {
font-size: 36rpx;
color: #373737;
font-weight: 500;
width: 100%;
text-align: center;
margin-right: 35px;
}
}
.news {
background-color: #ffffff;
border-radius: 16rpx;
.tab {
padding: 30rpx 100rpx;
display: flex;
justify-content: space-between;
.item {
font-size: 30rpx;
color: #9D9CA6;
position: relative;
}
.active {
color: #373737;
.icon {
width: 40rpx;
height: 8rpx;
position: absolute;
bottom: -10px;
left: 5px;
}
}
}
.list {
background-color: #F8F6F9;
padding: 30rpx;
.item {
background-color: #ffffff;
border-radius: 30rpx;
display: flex;
justify-content: space-between;
padding: 30rpx;
margin-bottom: 30rpx;
.icon {
width: 280rpx;
height: 165rpx;
border-radius: 6rpx;
}
.con {
margin-left: 30rpx;
.name {
font-size: 30rpx;
color: #373737;
.tag {
font-size: 22rpx;
color: #F42E2E;
border: 1px solid #F42E2E;
padding: 4rpx 10rpx;
border-radius: 30rpx;
display: inline-block;
margin-left: 20rpx;
}
}
.time {
font-size: 24rpx;
color: #B6B6BA;
height: 30rpx;
line-height: 30rpx;
margin-top: 30rpx;
}
}
}
}
}
</style>
\ No newline at end of file
pages/home/index.vue
浏览文件 @ 9207bcfd
<template>
<view class="container">
首页
<view class="container" style="background-image: url('../../static/images/bg_home.png');">
<view class="page">
<view class="nav-top">
<view class="title">汉江之星小区</view>
<image src="../../static/images/icon_up.png" class="icon"></image>
</view>
<view class="banner">
<swiper class="swiper" :autoplay="false" :interval="3000" :circular="true">
<swiper-item>
<image src="../../static/images/banner.png" class="swiper-item"></image>
</swiper-item>
<swiper-item>
<image src="../../static/images/banner.png" class="swiper-item"></image>
</swiper-item>
</swiper>
</view>
<view class="message">
<image src="../../static/images/icon_notice.png" class="icon"></image>
<swiper class="swiper" circular :indicator-dots="false" :autoplay="true" :interval='3000'
:vertical="true">
<swiper-item :key="index" v-for="(item, index) in messageList">
<view class="text">{{item}}</view>
</swiper-item>
</swiper>
</view>
<view class="quick-entry">
<view class="item">
<view class="item-img">
<image src="../../static/images/quick01.png" class="icon"></image>
<view class="num">10</view>
</view>
<text>我的消息</text>
</view>
<view class="item">
<image src="../../static/images/quick02.png" class="icon"></image><text>房屋登记</text>
</view>
<view class="item">
<image src="../../static/images/quick03.png" class="icon"></image><text>生活缴费</text>
</view>
<view class="item">
<image src="../../static/images/quick04.png" class="icon"></image><text>维修上报</text>
</view>
<view class="item">
<image src="../../static/images/quick05.png" class="icon"></image><text>小区投诉</text>
</view>
<view class="item" @click="quickEntry(6)">
<image src="../../static/images/quick06.png" class="icon"></image><text>公告公示</text>
</view>
<view class="item">
<image src="../../static/images/quick07.png" class="icon"></image><text>缴纳物业费</text>
</view>
</view>
<view class="housekeeper" style="background-image: url('../../static/images/bg_guanjia.png');">
<view class="information">
<image src="../../static/images/img01.png" class="icon"></image>
<view class="title">
<text class="name">王一一</text>
<text class="about">您的专属管家</text>
</view>
</view>
<view class="phone">
<image src="../../static/images/icon_phone.png" class="icon"></image>
<text>159-2546-5285</text>
</view>
</view>
<view class="news">
<view class="title">
<text>社区活动公告</text>
<image src="../../static/images/icon_more.png" class="icon"></image>
</view>
<view class="list">
<view class="item">
<image src="../../static/images/img02.png" class="icon"></image>
<view class="con">
<view class="name">开展民族团结进步创建进社区 活动</view>
<view class="time">物业服务中心 2020/09/08</view>
</view>
</view>
<view class="item">
<image src="../../static/images/img03.png" class="icon"></image>
<view class="con">
<view class="name">开展民族团结进步创建进社区 活动</view>
<view class="time">物业服务中心 2020/09/08</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import { getHomeData } from '@/config/api.js'
export default {
name: 'home',
data() {
return {
page: 1,
}
},
methods: {
},
onLoad() {
},
onPullDownRefresh() {
},
onReachBottom() {
}
}
// import {
// getHomeData
// } from '@/config/api.js'
export default {
name: 'home',
data() {
return {
messageList: [
'紧急通知！！！ 所有居民请于下午3点于小区广场做核酸！',
'住建部：2025年基本实现垃圾分类全覆盖，住房和城乡建设部表示，力争到今年年底前，地级及以上城市居民小区垃圾分类覆盖率达到90%以上，2025年底前基本实现垃圾分类全覆盖。',
],
}
},
methods: {
quickEntry(type) {
if (type == 6) {
uni.navigateTo({
url: '/pages/announcement/index',
});
}
},
},
onLoad() {
},
onPullDownRefresh() {
},
onReachBottom() {
}
}
</script>
<style lang="scss" scoped>
.container {
width: 100%;
height: 100vh;
background-position: top center;
background-repeat: no-repeat;
background-size: 100%;
}
.page {
padding: 30rpx;
}
.nav-top {
width: 100%;
height: 44px;
line-height: 44px;
margin-top: 10rpx;
display: flex;
align-items: center;
.title {
font-size: 32rpx;
color: #1D1F1C;
font-weight: 700;
}
.icon {
width: 20rpx;
height: 12rpx;
margin-left: 15rpx;
}
}
.banner {
margin-top: 20rpx;
.swiper-item {
width: 100%;
height: 100%;
border-radius: 16rpx;
}
}
.message {
height: 70rpx;
line-height: 70rpx;
overflow: hidden;
line-height: 34rpx;
background-color: #ffffff;
border-radius: 16rpx;
margin: 30rpx 0;
display: flex;
align-items: center;
padding: 0 30rpx;
.icon {
width: 34rpx;
height: 28rpx;
margin-right: 20rpx;
}
.swiper {
width: 100%;
height: 70rpx;
line-height: 70rpx;
.text {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
font-size: 28rpx;
color: #373737;
}
}
}
.quick-entry {
background-color: #ffffff;
padding: 40rpx 30rpx 0;
border-radius: 16rpx;
display: flex;
flex-wrap: wrap;
.item {
width: 25%;
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 40rpx;
.item-img {
position: relative;
.num {
position: absolute;
top: -10px;
right: -10px;
font-size: 20rpx;
color: #FFFFFF;
padding: 4rpx 8rpx;
background-color: #F6C864;
border-radius: 20rpx;
}
}
.icon {
width: 74rpx;
height: 74rpx;
</style>
}
text {
margin-top: 12rpx;
font-size: 28rpx;
color: #373737;
}
}
}
.housekeeper {
display: flex;
justify-content: space-between;
align-items: center;
border-radius: 16rpx;
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
padding: 20rpx 30rpx;
margin: 30rpx 0;
.information {
display: flex;
justify-content: center;
align-items: center;
.icon {
width: 70rpx;
height: 70rpx;
border: 1px solid #F6C864;
border-radius: 702rpx;
}
.title {
margin-left: 20rpx;
.name {
font-size: 28rpx;
color: #ffffff;
font-weight: bold;
display: block;
}
.about {
font-size: 24rpx;
color: #ffffff;
display: block;
}
}
}
.phone {
height: 30rpx;
line-height: 30rpx;
background-color: #ffffff;
border-radius: 30rpx;
padding: 10rpx 24rpx;
display: flex;
justify-content: center;
align-items: center;
.icon {
width: 24rpx;
height: 22rpx;
}
text {
margin-left: 14rpx;
font-size: 24rpx;
color: #5159EA;
}
}
}
.news {
background-color: #ffffff;
padding: 30rpx;
border-radius: 16rpx;
.title {
height: 32rpx;
line-height: 32rpx;
display: flex;
justify-content: space-between;
text {
font-size: 32rpx;
color: #373737;
font-weight: bold;
padding-left: 18rpx;
border-left: 3px solid #6852F0;
}
.icon {
width: 10rpx;
height: 16rpx;
}
}
.list {
.item {
display: flex;
justify-content: space-between;
margin-top: 30px;
padding-bottom: 30px;
border-bottom: 1px solid #F0F0F2;
.icon {
width: 280rpx;
height: 165rpx;
border-radius: 6rpx;
}
.con {
margin-left: 30rpx;
.name {
font-size: 30rpx;
color: #373737;
}
.time {
font-size: 24rpx;
color: #B6B6BA;
height: 30rpx;
line-height: 30rpx;
margin-top: 30rpx;
}
}
}
}
}
</style>
\ No newline at end of file
pages/mine/index.vue
浏览文件 @ 9207bcfd
......@@ -24,79 +24,4 @@ export default {
</script>
<style lang="scss" scoped>
.title-box {
box-sizing: border-box;
position: relative;
width: 100%;
height: 474rpx;
display: flex;
flex-direction: column;
align-items: center;
/deep/ .uni-nav-bar-text {
font-size: 16px;
}
.mine-bg {
position: absolute;
width: 100%;
height: 474rpx;
top: 0;
left: 0;
z-index: -1;
}
.picture {
margin-top: 20rpx;
width: 160rpx;
height: 160rpx;
border-radius: 50%;
}
.name {
margin-top: 20rpx;
font-size: 32rpx;
color: #FFFFFF;
}
.identity {
flex: none;
margin-top: 20rpx;
padding: 0 35rpx;
height: 50rpx;
line-height: 50rpx;
border: 1rpx solid #D5E2F3;
border-radius: 25rpx;
font-size: 28rpx;
color: #FFFFFF;
}
.btn {
padding: 0;
font-size: 16px;
color: #FFFFFF;
border: none;
}
}
.list-box {
margin-top: 10px;
padding: 0 30rpx;
background-color: #FFFFFF;
}
.logout-box {
padding: 0 32rpx;
margin-top: 80rpx;
.logout {
background-color: #fff;
font-size: 14px;
color: #3b4144;
&::after {
border-radius: 0;
border: 0;
}
}
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论