|
@@ -1,68 +1,329 @@
|
|
|
<style lang="less">
|
|
|
-.overflow-wrap {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- scroll-view {
|
|
|
+.homeIndex {
|
|
|
+ padding: 68px 12px 30px;
|
|
|
+ position: relative;
|
|
|
+ background: #96f2e3;
|
|
|
+ .projectTitle {
|
|
|
+ color: #1f2429;
|
|
|
+ font-size: 22px;
|
|
|
+ line-height: 32px;
|
|
|
+ font-weight: 500;
|
|
|
+ display: flex;
|
|
|
+ .name {
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .projectInfo {
|
|
|
+ color: #626c78;
|
|
|
+ font-size: 13px;
|
|
|
+ line-height: 20px;
|
|
|
+ margin-top: 8px;
|
|
|
+ }
|
|
|
+ .weather {
|
|
|
+ color: #626c78;
|
|
|
+ font-size: 13px;
|
|
|
+ position: absolute;
|
|
|
+ top: 108px;
|
|
|
+ right: 12px;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .image {
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ }
|
|
|
+ .value {
|
|
|
+ margin-left: 8px;
|
|
|
+ margin-right: 8px;
|
|
|
+ }
|
|
|
+ .text {
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .scroll-view {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 350px;
|
|
|
+ z-index: 2;
|
|
|
+ white-space: nowrap;
|
|
|
+ margin-top: 27px;
|
|
|
+ }
|
|
|
+ .scroll-view-item {
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ display: inline-block;
|
|
|
+ width: 280px;
|
|
|
+ height: 350px;
|
|
|
+ margin-right: 12px;
|
|
|
+ background: red;
|
|
|
+ border-radius: 24px;
|
|
|
+ .itemCont {
|
|
|
+ position: relative;
|
|
|
+ top: 106px;
|
|
|
+ padding-left: 22px;
|
|
|
+ line-height: 32px;
|
|
|
+ font-size: 22px;
|
|
|
+ color: #fff;
|
|
|
+ .spaceName {
|
|
|
+ font-weight: 600;
|
|
|
+ .resident {
|
|
|
+ color: #1b2129;
|
|
|
+ font-size: 11px;
|
|
|
+ margin-left: 8px;
|
|
|
+ padding: 0 5px;
|
|
|
+ line-height: 18px;
|
|
|
+ background: #96f2e3;
|
|
|
+ border-radius: 4px;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .environment {
|
|
|
+ font-size: 13px;
|
|
|
+ color: rgba(255, 255, 255, 0.8);
|
|
|
+ .param {
|
|
|
+ margin-right: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .scroll-view2 {
|
|
|
position: relative;
|
|
|
width: 100%;
|
|
|
- height: 100%;
|
|
|
+ height: 76px;
|
|
|
z-index: 2;
|
|
|
+ white-space: nowrap;
|
|
|
+ margin-top: 25px;
|
|
|
+ }
|
|
|
+ .scroll-view-item2 {
|
|
|
+ display: inline-block;
|
|
|
+ min-width: 164px;
|
|
|
+ height: 76px;
|
|
|
+ margin-right: 10px;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 20px;
|
|
|
+ padding-top: 15px;
|
|
|
+ padding-left: 20px;
|
|
|
+ padding-right: 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ position: relative;
|
|
|
+ .title {
|
|
|
+ color: #1b2129;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 24px;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ .info {
|
|
|
+ margin-top: 3px;
|
|
|
+ color: #8b949e;
|
|
|
+ font-size: 13px;
|
|
|
+ line-height: 20px;
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+ .imageDiv {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ .image {
|
|
|
+ width: 76px;
|
|
|
+ height: 76px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .menuWrap {
|
|
|
+ .menuHeader {
|
|
|
+ color: #626c78;
|
|
|
+ line-height: 24px;
|
|
|
+ font-size: 16px;
|
|
|
+ margin-top: 24px;
|
|
|
+ }
|
|
|
+ .menuList {
|
|
|
+ margin-top: 8px;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ .menuItem {
|
|
|
+ width: 106px;
|
|
|
+ height: 84px;
|
|
|
+ border-radius: 20px;
|
|
|
+ margin-right: 8px;
|
|
|
+ float: left;
|
|
|
+ background: #fff;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ padding-top: 12px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .menuImg {
|
|
|
+ text-align: center;
|
|
|
+ .image {
|
|
|
+ height: 32px;
|
|
|
+ width: 32px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .menuTitle {
|
|
|
+ font-size: 13px;
|
|
|
+ color: #1b2129;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
+ .projectPop {
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ .projectWrap {
|
|
|
+ overflow-y: auto;
|
|
|
+ max-height: 400px;
|
|
|
+ .projectItem {
|
|
|
+ height: 50px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 50px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #1b2129;
|
|
|
+ &:hover {
|
|
|
+ background: #f1f4f6;
|
|
|
+ }
|
|
|
+ &:sel {
|
|
|
+ color: #1db1b2;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .button {
|
|
|
+ width: 100%;
|
|
|
+ font-size: 16px;
|
|
|
+ background: #fff;
|
|
|
+ color: #8b949e;
|
|
|
+ height: 50px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 50px;
|
|
|
+ border-top: 5px solid #f1f4f6;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.van-popup {
|
|
|
+ background-color: red;
|
|
|
}
|
|
|
</style>
|
|
|
-</wxs>
|
|
|
<template>
|
|
|
-<div class="overflow-wrap">
|
|
|
-<div @click="goEnv">
|
|
|
-环境控制
|
|
|
+<div class="homeIndex">
|
|
|
+ <div class="projectTitle" @click="showProject"><span class="name">上格云</span><van-icon name="arrow-down" size="20"/></div>
|
|
|
+ <div class="projectInfo">成为一家牛的让员工幸福的企业</div>
|
|
|
+ <div class="weather"><image class="image" :src="h5StaticPath+'cloudy.png'"/><span class="value">26.5℃</span><span class="text">晴</span></div>
|
|
|
+ <scroll-view scroll-x="true" class="scroll-view">
|
|
|
+ <view class="scroll-view-item">
|
|
|
+ <div class="itemCont">
|
|
|
+ <div class="spaceName">上格云<span class="resident">常驻工区</span></div>
|
|
|
+ <div class="environment"><span class="param">25℃</span><span class="param">299ppm</span><span class="param">0.09μg/m³</span></div>
|
|
|
+ </div>
|
|
|
+ <div class="itemCont">去设置<br>您的常驻工区<van-icon name="arrow" size="20"/></div>
|
|
|
+ </view>
|
|
|
+ <view class="scroll-view-item"><div class="itemCont">环境健康小知识<van-icon name="arrow" size="20"/></div></view>
|
|
|
+ </scroll-view>
|
|
|
+ <scroll-view scroll-x="true" class="scroll-view2">
|
|
|
+ <view class="scroll-view-item2"><div class="title">开启照明</div><div class="info">快速启动</div><div class="imageDiv">
|
|
|
+ <image class="image" :src="h5StaticPath+'lamb.png'"/>
|
|
|
+ </div></view>
|
|
|
+ <view class="scroll-view-item2"><div class="title">调高温度</div><div class="info">快速启动</div><div class="imageDiv">
|
|
|
+ <image class="image" :src="h5StaticPath+'airAdjust.png'"/>
|
|
|
+ </div></view>
|
|
|
+ <view class="scroll-view-item2"><div class="title">调低温度</div><div class="info">快速启动</div><div class="imageDiv">
|
|
|
+ <image class="image" :src="h5StaticPath+'airAdjust.png'"/>
|
|
|
+ </div></view>
|
|
|
+ <view class="scroll-view-item2"><div class="title">一键全关</div><div class="info">快速全关</div><div class="imageDiv">
|
|
|
+ <image class="image" :src="h5StaticPath+'allClose.png'"/>
|
|
|
+ </div></view>
|
|
|
+ <view class="scroll-view-item2" @click="goToIntroduce('overtime')"><div class="title">如何预约加时?</div><div class="info">点击查看<van-icon name="arrow" size="14"/></div></view>
|
|
|
+ <view class="scroll-view-item2" @click="goToIntroduce('resident')"><div class="title">如何设置常驻工区?</div><div class="info">点击查看<van-icon name="arrow" size="14"/></div></view>
|
|
|
+ <view class="scroll-view-item2" @click="goToIntroduce('carboncredit')"><div class="title">如何获取碳积分?</div><div class="info">点击查看<van-icon name="arrow" size="14"/></div></view>
|
|
|
+ </scroll-view>
|
|
|
+<div class="menuWrap">
|
|
|
+ <div class="menuHeader">服务</div>
|
|
|
+ <div class="menuList">
|
|
|
+ <div class="menuItem" @click="goEnv"><div class="menuImg"><image class="image" :src="h5StaticPath+'environment.png'"/></div><div class="menuTitle">环境调节</div></div>
|
|
|
+ <div class="menuItem"><div class="menuImg"><image class="image" :src="h5StaticPath+'find.png'"/></div><div class="menuTitle">找一找</div></div>
|
|
|
+ <div class="menuItem" @click="goPortrait"><div class="menuImg"><image class="image" :src="h5StaticPath+'myhabits.png'"/></div><div class="menuTitle">我的习惯</div></div>
|
|
|
+ <div class="menuItem" @click="goPersonCenter"><div class="menuImg"><image class="image" :src="h5StaticPath+'myself.png'"/></div><div class="menuTitle">个人中心</div></div>
|
|
|
+ </div>
|
|
|
+ <div class="menuHeader">管理</div>
|
|
|
+ <div class="menuList">
|
|
|
+ <div class="menuItem" @click="goEnv"><div class="menuImg"><image class="image" :src="h5StaticPath+'control.png'"/></div><div class="menuTitle">行政端管理</div></div>
|
|
|
</div>
|
|
|
-<div @click="goPortrait">
|
|
|
-节能评分
|
|
|
-</div>
|
|
|
-<div @click="goPersonCenter">
|
|
|
-个人中心
|
|
|
</div>
|
|
|
+<van-popup :show="show" position="bottom" @close="hideProject" round>
|
|
|
+ <div class="projectPop">
|
|
|
+ <div class="projectWrap" style="max-height:{{screenHeight-200}}px">
|
|
|
+ <div class="projectItem">上格云11</div><div class="projectItem">上格云22</div>
|
|
|
+ <div class="projectItem">上格云33</div><div class="projectItem">上格云44</div>
|
|
|
+ <div class="projectItem">上格云11</div><div class="projectItem">上格云22</div>
|
|
|
+ <div class="projectItem">上格云33</div><div class="projectItem">上格云44</div>
|
|
|
+ <div class="projectItem">上格云11</div><div class="projectItem">上格云22</div>
|
|
|
+ <div class="projectItem">上格云33</div><div class="projectItem">上格云44</div>
|
|
|
+ <div class="projectItem">上格云11</div><div class="projectItem">上格云22</div>
|
|
|
+ <div class="projectItem">上格云33</div><div class="projectItem">上格云44</div>
|
|
|
+ </div>
|
|
|
+ <div class="button">取消</div>
|
|
|
+ </div>
|
|
|
+</van-popup>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import wepy from '@wepy/core'
|
|
|
-import eventHub from '@/common/eventHub'
|
|
|
-import { mapState } from '@wepy/x'
|
|
|
-import store from '@/store'
|
|
|
-import testMixin from '@/mixins/test'
|
|
|
+import wepy from '@wepy/core';
|
|
|
+import eventHub from '@/common/eventHub';
|
|
|
+import { mapState } from '@wepy/x';
|
|
|
+import store from '@/store';
|
|
|
+import testMixin from '@/mixins/test';
|
|
|
+import config from '@/config';
|
|
|
|
|
|
wepy.page({
|
|
|
store,
|
|
|
config: {
|
|
|
- navigationBarTitleText: 'test'
|
|
|
+ navigationBarTitleText: 'test',
|
|
|
+ },
|
|
|
+ data: {
|
|
|
+ show: false,
|
|
|
+ h5StaticPath: config.h5StaticPath + '/page-home/',
|
|
|
+ screenHeight: 560,
|
|
|
},
|
|
|
-
|
|
|
- data: {},
|
|
|
methods: {
|
|
|
+ hideProject: function() {
|
|
|
+ this.show = false;
|
|
|
+ },
|
|
|
+ showProject: function() {
|
|
|
+ this.show = true;
|
|
|
+ },
|
|
|
goEnv() {
|
|
|
wx.navigateTo({
|
|
|
- url: '/packagesEnv/pages/officehome/index?spaceId=Sp1101080259b3510e26e7dd4dd9bf9784f06f3feb68'
|
|
|
- })
|
|
|
+ url:
|
|
|
+ '/packagesEnv/pages/officehome/index?spaceId=Sp1101080259b3510e26e7dd4dd9bf9784f06f3feb68',
|
|
|
+ });
|
|
|
+ },
|
|
|
+ goToIntroduce(id) {
|
|
|
+ debugger;
|
|
|
+ wx.navigateTo({
|
|
|
+ url: '/packagesEnv/pages/home/' + id,
|
|
|
+ });
|
|
|
},
|
|
|
goPortrait() {
|
|
|
wx.navigateTo({
|
|
|
- url: '/packagesEnv/pages/portrait/home'
|
|
|
- })
|
|
|
+ url: '/packagesEnv/pages/portrait/home',
|
|
|
+ });
|
|
|
},
|
|
|
goPersonCenter() {
|
|
|
wx.navigateTo({
|
|
|
- url: '/packagesEnv/pages/personalCenter/index'
|
|
|
- })
|
|
|
- }
|
|
|
+ url: '/packagesEnv/pages/personalCenter/index',
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+ // 获取系统信息
|
|
|
+ const systemInfo = wx.getSystemInfoSync();
|
|
|
+ this.screenHeight = systemInfo.screenHeight;
|
|
|
+ console.log('systemInfo', systemInfo);
|
|
|
},
|
|
|
- created() {}
|
|
|
-})
|
|
|
+});
|
|
|
</script>
|
|
|
<config>
|
|
|
{
|
|
|
-navigationBarTitleText: '首页',
|
|
|
+"navigationStyle":"custom",
|
|
|
usingComponents: {
|
|
|
+ "van-icon": "module:@vant/weapp/dist/icon",
|
|
|
+ "van-popup": "module:@vant/weapp/dist/popup"
|
|
|
}
|
|
|
}
|
|
|
</config>
|