From ed8a450409d89a448b4394300d33ebc2fd31fe0d Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Sat, 28 Oct 2023 17:27:15 +0800
Subject: [PATCH] 首页文件修改
---
components/curMenu/index.vue | 17 +
components/gridMenu/index.vue | 78 ++++--
components/menuList/index.vue | 12
static/flex.css | 61 +++++
pages/login/index.vue | 3
pages/home/index.vue | 190 ++++++++++++++--
static/margin.css | 148 +++++++++++++
static/base.css | 54 ++++
App.vue | 4
static/padding.css | 59 +++++
10 files changed, 557 insertions(+), 69 deletions(-)
diff --git a/App.vue b/App.vue
index bb2d038..ccb87cd 100644
--- a/App.vue
+++ b/App.vue
@@ -339,6 +339,10 @@
</script>
<style lang="scss">
@import "./static/iconfont.css";
+ @import "./static/base.css";
+ @import "./static/flex.css";
+ @import "./static/margin.css";
+ @import "./static/padding.css";
/*uview全局样式*/
@import "uview-ui/index.scss";
diff --git a/components/curMenu/index.vue b/components/curMenu/index.vue
index ee66c6a..f212f45 100644
--- a/components/curMenu/index.vue
+++ b/components/curMenu/index.vue
@@ -1,7 +1,10 @@
<template>
<view class="menu-box" @click="curMenuClick(curMenu)">
- <view>
+ <view v-if="imgShow">
<u--image :src="curMenu.imgUrl" :width='curMenu.imgWidth || 54' :height='curMenu.imgHeight || 54' shape="circle"></u--image>
+ </view>
+ <view v-if="textShow" :style="{height: curMenu.numHeight ? curMenu.numHeight + 'px' : '56rpx'}">
+ {{curMenu.num}}
</view>
<view :style="{height: curMenu.titleHeight ? curMenu.titleHeight + 'px' : '56rpx'}">
{{curMenu.title}}
@@ -17,7 +20,17 @@
default: () => {
return {}
}
- }
+ },
+
+ imgShow: {
+ type: Boolean,
+ default: true
+ },
+
+ textShow: {
+ type: Boolean,
+ default: false
+ },
},
methods: {
diff --git a/components/gridMenu/index.vue b/components/gridMenu/index.vue
index e4e63e7..d8fb6c5 100644
--- a/components/gridMenu/index.vue
+++ b/components/gridMenu/index.vue
@@ -1,16 +1,22 @@
<template>
<view class="cur-container">
- <view>
- {{gridData.title}}
+ <view v-if="!gridData.useSlot">
+ <view>
+ {{gridData.title}}
+ </view>
+ <view>
+ <view class="l">
+ {{gridData.data}}
+ </view>
+ <view class="r">
+ <u-icon name="phone-fill" color="#fff"></u-icon>
+ {{gridData.phone}}
+ </view>
+ </view>
</view>
- <view>
- <view class="l">
- {{gridData.data}}
- </view>
- <view class="r">
- <u-icon name="phone-fill" color="#fff"></u-icon>
- {{gridData.phone}}
- </view>
+
+ <view class="slot-box" v-else>
+ {{gridData.title}}
</view>
</view>
</template>
@@ -33,33 +39,45 @@
<style lang="scss" scoped>
.cur-container {
- padding: 10rpx;
display: flex;
- flex-direction: column;
-
- & > view:first-child {
- height: 60%;
+
+ &>view {
+ flex: 1;
+ padding: 10rpx;
display: flex;
- align-items: center;
- justify-content: flex-start;
- }
-
- & > view:last-child {
- height: 40%;
- display: flex;
- justify-content: space-between;
- align-items: center;
- font-size: 24rpx;
-
- .l {
+ flex-direction: column;
+
+ &>view:first-child {
+ height: 60%;
+ display: flex;
+ align-items: center;
justify-content: flex-start;
}
-
- .r {
+
+ &>view:last-child {
+ height: 40%;
display: flex;
- justify-content: flex-end;
+ justify-content: space-between;
align-items: center;
+ font-size: 24rpx;
+
+ .l {
+ justify-content: flex-start;
+ }
+
+ .r {
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+ }
}
}
+
+ .slot-box {
+ padding: 10rpx;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
}
</style>
\ No newline at end of file
diff --git a/components/menuList/index.vue b/components/menuList/index.vue
index 1f2bc87..f800f6f 100644
--- a/components/menuList/index.vue
+++ b/components/menuList/index.vue
@@ -1,6 +1,6 @@
<template>
<view class="cur-container">
- <cur-menu class="child-menu" v-for="(item, index) in menuData" :curMenu="item" :key="index"></cur-menu>
+ <cur-menu :class="{'boder-f7f8f9-1': border}" class="up-down-0-20 child-menu" v-for="(item, index) in menuData" :curMenu="item" :key="index"></cur-menu>
</view>
</template>
@@ -12,7 +12,12 @@
menuData: {
type: Array,
default: () => []
- }
+ },
+
+ border: {
+ type: Boolean,
+ default: false
+ },
},
components: {
@@ -24,10 +29,13 @@
<style lang="scss" scoped>
.cur-container {
display: flex;
+ flex-wrap: wrap;
height: 100%;
.child-menu {
flex: 1;
+ min-width: calc(100% / 3);
+ box-sizing: border-box;
}
}
</style>
\ No newline at end of file
diff --git a/pages/home/index.vue b/pages/home/index.vue
index 6ee2b1b..5352c35 100644
--- a/pages/home/index.vue
+++ b/pages/home/index.vue
@@ -25,16 +25,53 @@
<menu-list :menuData="btnList"></menu-list>
</view>
- <view class="main-phone">
- <grid-menu :gridData='item' v-for="(item, index) in gridDataList" :key='index'></grid-menu>
- </view>
-
- <view class="main-bt">
- <view class="main-live">
- <menu-list :menuData="liveList"></menu-list>
+ <view class="main-phone-house">
+ <view class="phone-box">
+ <grid-menu :gridData='item' v-for="(item, index) in gridDataList" :key='index'></grid-menu>
</view>
- <view class="main-taska">
+ <view class="house-box">
+ <box-title :title="'楼盘表'"></box-title>
+ <view class="content">
+ <grid-menu :gridData='item' v-for="(item, index) in houseDataList" :key='index'></grid-menu>
+ </view>
+ </view>
+ </view>
+
+ <view class="main-bt pb-40">
+ <view class="mt-20">
+ <box-title :title="'生活'"></box-title>
+
+ <view class="mt-20 b-c-w">
+ <menu-list :menuData="liveList"></menu-list>
+ </view>
+ </view>
+
+ <view class="mt-20">
+ <box-title :title="'工作台'"></box-title>
+
+ <view class="mt-20 b-c-w">
+ <menu-list :border='true' :menuData="jobList"></menu-list>
+ </view>
+ </view>
+
+ <view class="mt-20 main-taska">
+ <box-title :title="'我的任务'"></box-title>
+
+ <view class="mt-20 b-c-w">
+ <view class="flex">
+ <view class="flex-1" v-for="(item, index) in taskTypeList" :key='index'>
+ <cur-menu class='boder-f7f8f9-1 p-all-16' :curMenu="item" :imgShow="false"
+ :textShow="true"></cur-menu>
+ </view>
+ </view>
+ <u-cell-group :border='false'>
+ <u-cell class="boder-f7f8f9-1" :border='false' :title="item.title"
+ v-for="(item, index) in taskList" :key="index">
+ <view slot="right-icon">待处理 {{item.num}}</view>
+ </u-cell>
+ </u-cell-group>
+ </view>
</view>
</view>
@@ -46,12 +83,14 @@
<script>
import tabBar from "@/components/tabBar/tabBar.vue";
+ import curMenu from "@/components/curMenu/index.vue";
import menuList from "@/components/menuList/index.vue";
import gridMenu from "@/components/gridMenu/index.vue";
export default {
components: {
tabBar,
+ curMenu,
menuList,
gridMenu
},
@@ -89,8 +128,27 @@
phone: '无'
}
],
- liveList: [
+
+ houseDataList: [
{
+ title: '万达广场',
+ useSlot: true
+ },
+ {
+ title: '万达晶座',
+ useSlot: true
+ },
+ {
+ title: '万达华府',
+ useSlot: true
+ },
+ {
+ title: '万达华府',
+ useSlot: true
+ }
+ ],
+
+ liveList: [{
imgUrl: '/static/img/ggbs.png',
title: '公共报事',
imgWidth: 40,
@@ -108,6 +166,68 @@
imgWidth: 40,
imgHeight: 40
}
+ ],
+
+ jobList: [{
+ imgUrl: '/static/img/ggbs.png',
+ title: '场所记录',
+ imgWidth: 40,
+ imgHeight: 40
+ },
+ {
+ imgUrl: '/static/img/bmrx.png',
+ title: '场所采集',
+ imgWidth: 40,
+ imgHeight: 40
+ },
+ {
+ imgUrl: '/static/img/zhsb.png',
+ title: '出租房管理',
+ imgWidth: 40,
+ imgHeight: 40
+ },
+ {
+ imgUrl: '/static/img/zhsb.png',
+ title: '标签事件',
+ imgWidth: 40,
+ imgHeight: 40
+ },
+ {
+ imgUrl: '/static/img/zhsb.png',
+ title: '场所维护',
+ imgWidth: 40,
+ imgHeight: 40
+ },
+ {
+ imgUrl: '/static/img/zhsb.png',
+ title: '报事审核',
+ imgWidth: 40,
+ imgHeight: 40
+ }
+ ],
+
+ taskTypeList: [{
+ title: '一次性',
+ num: 1,
+ },
+ {
+ title: '周期性',
+ num: 0,
+ }
+ ],
+
+ taskList: [{
+ title: '综治任务',
+ num: 0
+ },
+ {
+ title: '住建任务',
+ num: 0
+ },
+ {
+ title: '公安任务',
+ num: 0
+ },
],
}
},
@@ -186,37 +306,43 @@
color: #000;
}
- .main-phone {
- display: flex;
- position: absolute;
- top: 52%;
+ .main-phone-house {
+ margin-top: 180rpx;
width: 100%;
- height: 12%;
- view {
- margin: 0 16rpx;
- flex: 1;
- background: linear-gradient(to right, #407BE9, #73A2F9);
- border-radius: 10rpx;
+ .phone-box {
+ display: flex;
+
+ &>view {
+ margin: 0 16rpx;
+ height: 116rpx;
+ flex: 1;
+ background: linear-gradient(to right, #407BE9, #73A2F9);
+ border-radius: 10rpx;
+ }
+ }
+
+ .house-box {
+ .content {
+ display: flex;
+ flex-wrap: wrap;
+
+ &>view {
+ margin: 0 16rpx;
+ margin-top: 20rpx;
+ min-width: calc((100% - 16rpx * 6) / 3);
+ height: 66rpx;
+ background: linear-gradient(to right, #407BE9, #73A2F9);
+ border-radius: 33rpx;
+ }
+ }
}
}
.main-bt {
- position: absolute;
- top: 66%;
+ margin-top: 2%;
width: 100%;
color: #000;
-
- .main-live {
- height: 180rpx;
- background: #fff;
- }
-
- .main-taska {
- margin-top: 16rpx;
- height: 240rpx;
- background: #fff;
- }
}
}
}
diff --git a/pages/login/index.vue b/pages/login/index.vue
index 5045d65..4a3a435 100644
--- a/pages/login/index.vue
+++ b/pages/login/index.vue
@@ -20,9 +20,6 @@
<view class="statement">
仅限湖北省水库管理人员使用
</view>
-
-
-
</view>
</template>
diff --git a/static/base.css b/static/base.css
new file mode 100644
index 0000000..7813a2c
--- /dev/null
+++ b/static/base.css
@@ -0,0 +1,54 @@
+.content-center {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ margin: auto;
+}
+
+.b-r-6 {
+ border-radius: 6rpx;
+}
+
+.b-r-20 {
+ border-radius: 20rpx;
+}
+
+.b-c-w {
+ background-color: #fff;
+}
+
+.cursor-p {
+ cursor: pointer;
+}
+
+.f-c-black {
+ color: #000;
+}
+
+.overflow-h {
+ overflow: hidden;
+}
+
+.relative {
+ position: relative;
+}
+
+.b-s-b {
+ box-sizing: border-box;
+}
+
+.text-align-l {
+ text-align: left
+}
+
+.nowrap-ellipsis-hidden {
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+}
+
+.boder-f7f8f9-1 {
+ border: 1rpx solid #F7F8F9;
+}
\ No newline at end of file
diff --git a/static/flex.css b/static/flex.css
new file mode 100644
index 0000000..f8cbe4a
--- /dev/null
+++ b/static/flex.css
@@ -0,0 +1,61 @@
+.flex {
+ display: flex;
+}
+
+.flex-1 {
+ flex: 1;
+}
+
+.flex-2 {
+ flex: 2;
+}
+
+.flex-3 {
+ flex: 3;
+}
+
+.flex-5 {
+ flex: 5;
+}
+
+.flex-8 {
+ flex: 8;
+}
+
+.a-i-c {
+ align-items: center;
+}
+
+.flex_base {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.j-c-s-a {
+ justify-content: space-around;
+}
+
+.j-c-s-b {
+ justify-content: space-between;
+}
+
+.j-c-c {
+ justify-content: center;
+}
+
+.f-d-c {
+ flex-direction: column;
+}
+
+.j-c-f-s {
+ justify-content: flex-start;
+}
+
+.j-c-f-e {
+ justify-content: flex-end;
+}
+
+.flex-wrap {
+ flex-wrap: wrap;
+}
diff --git a/static/margin.css b/static/margin.css
new file mode 100644
index 0000000..f17a34d
--- /dev/null
+++ b/static/margin.css
@@ -0,0 +1,148 @@
+.around-m-5 {
+ margin: 0 5rpx;
+}
+
+.around-m-20 {
+ margin: 0 20rpx;
+}
+
+.around-m-22 {
+ margin: 0 22rpx;
+}
+
+.up-down-m-10 {
+ margin-top: 10rpx;
+ margin-bottom: 10rpx;
+}
+
+.m-all-10 {
+ margin: 10rpx;
+}
+
+.m-all-20 {
+ margin: 20rpx;
+}
+
+.mt-0 {
+ margin-top: 0;
+}
+
+.mt-4 {
+ margin-top: 4rpx;
+}
+
+.mt-6 {
+ margin-top: 6rpx;
+}
+
+.mt-8 {
+ margin-top: 8rpx !important;
+}
+
+.mt-9 {
+ margin-top: 9rpx;
+}
+
+.mt--10 {
+ margin-top: -10rpx;
+}
+
+.mt-10 {
+ margin-top: 10rpx;
+}
+
+.mt-16 {
+ margin-top: 16rpx;
+}
+
+.mt-20 {
+ margin-top: 20rpx;
+}
+
+.mt-55 {
+ margin-top: 55rpx;
+}
+
+.ml-0 {
+ margin-left: 0;
+}
+
+.ml--1 {
+ margin-left: -1rpx;
+}
+
+.ml-4 {
+ margin-left: 4rpx;
+}
+
+.ml--5 {
+ margin-left: -5rpx;
+}
+
+.ml-5 {
+ margin-left: 5rpx;
+}
+
+.ml-8 {
+ margin-left: 8rpx;
+}
+
+.ml-10 {
+ margin-left: 10rpx;
+}
+
+.ml-15 {
+ margin-left: 15rpx;
+}
+
+.ml-16 {
+ margin-left: 16rpx;
+}
+
+.ml-20 {
+ margin-left: 20rpx;
+}
+
+.ml-22 {
+ margin-left: 22rpx;
+}
+
+.ml-30 {
+ margin-left: 30rpx;
+}
+
+.ml-150 {
+ margin-left: 150rpx;
+}
+
+.mr--1 {
+ margin-right: -1rpx;
+}
+
+.mr-6 {
+ margin-right: 6rpx;
+}
+
+.mr-10 {
+ margin-right: 10rpx;
+}
+
+.mr-20 {
+ margin-right: 20rpx;
+}
+
+.mr-30 {
+ margin-right: 30rpx;
+}
+
+.mb-10 {
+ margin-bottom: 10rpx;
+}
+
+.mb-20 {
+ margin-bottom: 20rpx;
+}
+
+.mb-30 {
+ margin-bottom: 30rpx;
+}
\ No newline at end of file
diff --git a/static/padding.css b/static/padding.css
new file mode 100644
index 0000000..c0e4492
--- /dev/null
+++ b/static/padding.css
@@ -0,0 +1,59 @@
+.around-p-10 {
+ padding: 0 10rpx;
+}
+
+.around-p-20 {
+ padding: 0 20rpx;
+}
+
+.up-down-0-10 {
+ padding: 10rpx 0;
+}
+
+.up-down-0-20 {
+ padding: 20rpx 0;
+}
+
+.p-all-10 {
+ padding: 10rpx;
+}
+
+.p-all-16 {
+ padding: 16rpx;
+}
+
+.p-all-20 {
+ padding: 20rpx;
+}
+
+.pt-0 {
+ padding-top: 0rpx;
+}
+
+.pt-10 {
+ padding-top: 10rpx;
+}
+
+.pt-16 {
+ padding-top: 16rpx;
+}
+
+.pt-20 {
+ padding-top: 20rpx;
+}
+
+.pl-1 {
+ padding-left: 1rpx;
+}
+
+.pr-1 {
+ padding-right: 1rpx;
+}
+
+.pb-20 {
+ padding-bottom: 20rpx;
+}
+
+.pb-40 {
+ padding-bottom: 40rpx;
+}
--
Gitblit v1.9.3