Forráskód Böngészése

首页布局修改

zhaojing 1 éve
szülő
commit
fc1c5eac41

+ 3 - 0
src/app.wpy

@@ -51,6 +51,9 @@ wepy.app({
         "root": "packagesEnv/",
         "pages": [
           'pages/home/index',
+          'pages/home/carboncredit',
+          'pages/home/overtime',
+          'pages/home/resident',
           'pages/officehome/index',
           'pages/officehome/detail',
           'pages/officehome/demo',

+ 37 - 0
src/packagesEnv/pages/home/carboncredit.wpy

@@ -0,0 +1,37 @@
+<style lang="less">
+.box {
+  padding: 118px 20px 60px;
+  .image {
+    width: 100%;
+  }
+}
+</style>
+<template>
+<div class="box">
+  <navigationbar></navigationbar>
+  <image class="image" :src="h5StaticPath+'carboncredit.svg'" mode="widthFix"/></div>
+</template>
+
+<script>
+import wepy from '@wepy/core';
+import store from '@/store';
+import config from '@/config';
+
+wepy.page({
+  store,
+  config: {},
+  data: {
+    h5StaticPath: config.h5StaticPath + '/page-home/',
+  },
+  methods: {},
+  created() {},
+});
+</script>
+<config>
+{
+"navigationStyle":"custom",
+usingComponents: {
+  "navigationbar":'./navigationbar',
+}
+}
+</config>

+ 293 - 32
src/packagesEnv/pages/home/index.wpy

@@ -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>

+ 50 - 0
src/packagesEnv/pages/home/navigationbar.wpy

@@ -0,0 +1,50 @@
+<style lang="less">
+.arrow {
+  position: absolute;
+  left: 16px;
+}
+</style>
+<template>
+<div class="arrow" style="top:{{barTop}}px" @click="goBack"><van-icon name="arrow-left" size="20"/></div>
+</template>
+
+<script>
+import wepy from '@wepy/core';
+import store from '@/store';
+import config from '@/config';
+
+wepy.page({
+  store,
+  props: {},
+  data: {
+    h5StaticPath: config.h5StaticPath + '/page-home/',
+    barTop: 0,
+  },
+  ready() {
+    debugger;
+ 
+    // 胶囊按钮位置信息
+    const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
+    // console.log('menuButtonInfo', menuButtonInfo);
+    this.barTop = menuButtonInfo.top + 4;
+  },
+  detached() {
+    debugger;
+    console.log('detacheddetached');
+  },
+  watch: {},
+  methods: {
+    goBack() {
+      wx.navigateBack();
+    },
+  },
+});
+</script>
+<config>
+{
+"navigationStyle":"custom",
+usingComponents: {
+  "van-icon": "module:@vant/weapp/dist/icon",
+}
+}
+</config>

+ 37 - 0
src/packagesEnv/pages/home/overtime.wpy

@@ -0,0 +1,37 @@
+<style lang="less">
+.box {
+  padding: 118px 20px 60px;
+  .image {
+    width: 100%;
+  }
+}
+</style>
+<template>
+<div class="box">
+  <navigationbar></navigationbar>
+  <image class="image" :src="h5StaticPath+'overtime.svg'" mode="widthFix"/>
+</div>
+</template>
+<script>
+import wepy from '@wepy/core';
+import store from '@/store';
+import config from '@/config';
+
+wepy.page({
+  store,
+  config: {},
+  data: {
+    h5StaticPath: config.h5StaticPath + '/page-home/',
+  },
+  methods: {},
+  created() {},
+});
+</script>
+<config>
+{
+"navigationStyle":"custom",
+usingComponents: {
+  "navigationbar":'./navigationbar',
+}
+}
+</config>

+ 52 - 0
src/packagesEnv/pages/home/resident.wpy

@@ -0,0 +1,52 @@
+<style lang="less">
+.box {
+  position: relative;
+  padding: 118px 20px 120px;
+  .image {
+    width: 100%;
+  }
+  .button {
+    position: fixed;
+    height: 50px;
+    width: 335px;
+    line-height: 50px;
+    background: #3dcbcc;
+    color: #fff;
+    font-size: 16px;
+    text-align: center;
+    bottom: 35px;
+    border-radius: 28px;
+  }
+}
+</style>
+<template>
+<div class="box">
+  <navigationbar></navigationbar>
+  <image class="image" :src="h5StaticPath+'resident.svg'" mode="widthFix"/>
+  <div class="button">去设置常驻工区</div>
+</div>
+</template>
+
+<script>
+import wepy from '@wepy/core';
+import store from '@/store';
+import config from '@/config';
+
+wepy.page({
+  store,
+  config: {},
+  data: {
+    h5StaticPath: config.h5StaticPath + '/page-home/',
+  },
+  methods: {},
+  created() {},
+});
+</script>
+<config>
+{
+"navigationStyle":"custom",
+usingComponents: {
+  "navigationbar":'./navigationbar',
+}
+}
+</config>