2019-2-25 22:42:38

hrxmtc · Feb 25, 2019 · e2e35a2 · e2e35a2
1 parent 56d3505
commit e2e35a2
Show file tree

Hide file tree

Showing 24 changed files with 476 additions and 87 deletions.
diff --git a/demo/app.js b/demo/app.js
@@ -4,7 +4,9 @@ App({
     wx.getSystemInfo({
       success: e => {
         this.globalData.StatusBar = e.statusBarHeight;
-        this.globalData.CustomBar = e.platform == 'android' ? e.statusBarHeight + 50 : e.statusBarHeight + 45;
+        let custom = wx.getMenuButtonBoundingClientRect();
+        this.globalData.Custom = custom;  
+        this.globalData.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
       }
     })
   },

diff --git a/demo/app.json b/demo/app.json
@@ -33,7 +33,8 @@
     "pages/about/test/list",
     "pages/about/test/filter",
     "pages/about/home/home",
-    "custom-tab-bar/index"
+    "custom-tab-bar/index",
+    "pages/plugin/drawer/drawer"
   ],
   "window": {
     "navigationBarBackgroundColor": "#39b54a",

diff --git a/demo/app.wxss b/demo/app.wxss
@@ -1,6 +1,10 @@
 @import "icon.wxss";
 @import "colorui.wxss";
 
+.cu-modal.show {
+  z-index: 99999;
+}
+
 .nav-list {
   display: flex;
   flex-wrap: wrap;

diff --git a/demo/colorui.wxss b/demo/colorui.wxss
@@ -1,5 +1,5 @@
 /*
-  Color UI v2.0.6 修复v1 | by 文晓港 
+  Color UI v2.0.7 | by 文晓港 
   仅供学习交流，如作它用所承受的法律责任一概与作者无关   
   （QQ交流群：240787041）
   文档：http://www.color-ui.com/
@@ -774,6 +774,7 @@ button.icon.lg {
   height: 28rpx;
   color: #fff;
 }
+
 .cu-tag.badge:not([class*="bg-"]) {
   background: #dd514c;
 }
@@ -1464,10 +1465,11 @@ button.icon.lg {
 .cu-bar .content {
   position: absolute;
   text-align: center;
-  width: 400rpx;
+  width: calc(100% - 340rpx);
   left: 0;
   right: 0;
-  bottom: 20rpx;
+  bottom: 0;
+  top: 0;
   margin: auto;
   height: 60rpx;
   font-size: 32rpx;
@@ -1479,6 +1481,13 @@ button.icon.lg {
   overflow: hidden;
 }
 
+.cu-bar.ios .content {
+  bottom: 7px;
+  height: 30px;
+  font-size: 32rpx;
+  line-height: 30px;
+}
+
 .cu-bar.btn-group {
   justify-content: space-around;
 }
@@ -1543,6 +1552,14 @@ button.icon.lg {
 
 .cu-bar.tabbar {
   padding: 0;
+  z-index: 0;
+  height: calc(100rpx + env(safe-area-inset-bottom) / 2);
+  padding-bottom: calc(env(safe-area-inset-bottom) / 2);
+}
+
+.cu-tabbar-height {
+  min-height: 100rpx;
+  height: calc(100rpx + env(safe-area-inset-bottom) / 2);
 }
 
 .cu-bar.tabbar.shadow {
@@ -1716,49 +1733,70 @@ button.icon.lg {
   margin-left: 0rpx;
 }
 
-/* 
-.cu-bar.tabbar .action {
-  flex: 1;
-  text-align: center;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
+.cu-custom {
+  display: block;
+  position: relative;
+}
+
+.cu-custom .cu-bar .content {
+  width: calc(100% - 440rpx);
+}
+
+.cu-custom .cu-bar {
+  min-height: 0px;
+}
+
+.cu-custom .cu-bar {
+  padding-right: 220rpx;
+  box-shadow: 0rpx 0rpx 0rpx;
 }
-.cu-bar.tabbar .action .tabbar-icon {
-  width: 54rpx;
-  height: 54rpx;
+
+.cu-custom .cu-bar .border-custom {
   position: relative;
+  background: rgba(0, 0, 0, 0.15);
+  border-radius: 1000rpx;
+  height: 30px;
+}
+
+.cu-custom .cu-bar .border-custom::after {
+  content: " ";
+  width: 200%;
+  height: 200%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  border-radius: inherit;
+  transform: scale(0.5);
+  transform-origin: 0 0;
+  pointer-events: none;
+  box-sizing: border-box;
+  border: 1rpx solid #fff;
+  opacity: 0.5;
 }
-.cu-bar.tabbar .action image {  
+
+.cu-custom .cu-bar .border-custom::before {
+  content: " ";
+  width: 1rpx;
+  height: 110%;
   position: absolute;
+  top: 22.5%;
   left: 0;
   right: 0;
-  top: 0;
-  bottom: 0;
   margin: auto;
-}
-.cu-bar.tabbar .action .tabbar-icon image:first-child,.cu-bar.tabbar .action.cur .tabbar-icon image:last-child {  
-  width: 0rpx;
-  height: 0rpx;
-}
-.cu-bar.tabbar .action .tabbar-icon image:last-child,.cu-bar.tabbar .action.cur .tabbar-icon image:first-child {
-  width: 54rpx;
-  height: 54rpx;
+  transform: scale(0.5);
+  transform-origin: 0 0;
+  pointer-events: none;
+  box-sizing: border-box;
+  opacity: 0.6;
+  background-color: #fff;
 }
 
-.cu-bar.tabbar .action view {
-  font-size: 20rpx;
-} */
-
-.cu-custom {
+.cu-custom .cu-bar .border-custom text {
   display: block;
-  position: relative;
-}
-
-.cu-custom .cu-bar {
-  padding-right: 220rpx;
-  box-shadow: 0rpx 0rpx 0rpx;
+  flex: 1;
+  margin: auto !important;
+  text-align: center;
+  font-size: 34rpx;
 }
 
 /* ==================
@@ -2010,7 +2048,7 @@ button.icon.lg {
 
 .cu-card>.cu-item {
   display: block;
-  background: #fff;
+  background-color: #fff;
   overflow: hidden;
   border-radius: 10rpx;
   margin: 30rpx;

diff --git a/demo/pages/about/home/home.wxml b/demo/pages/about/home/home.wxml
@@ -64,17 +64,4 @@
   </view>
 </view>
 
-<view class="cu-modal {{modalName=='QrcodeModal'?'show':''}}">
-  <view class="cu-dialog">
-    <view class="bg-img" style="background-image: url('https://image.weilanwl.com/color2.0/zanCode.jpg');height:544rpx;">
-      <view class="cu-bar justify-end none-bg text-white">
-        <view class='action' bindtap='hideModal'>
-          <text class='icon-close '></text>
-        </view>
-      </view>
-    </view>
-    <view class="cu-bar">
-      <view class='justify-center flex-sub' bindtap='SaveQrcode'>保存到相册</view>
-    </view>
-  </view>
-</view>
+<view class='cu-tabbar-height'></view>
diff --git a/demo/pages/about/home/home.wxss b/demo/pages/about/home/home.wxss
@@ -1,6 +1,3 @@
-page{
-  padding-bottom: 100rpx;
-}
 .UCenter-bg {
   background-image: url(https://image.weilanwl.com/color2.0/index.jpg);
   background-size: cover;
@@ -36,4 +33,14 @@ page{
   height: 100rpx;   
 }
 
+map,.mapBox{
+  left: 0;
+  z-index: 99;
+  mix-blend-mode: screen;  
+  height: 100rpx;   
+}
 
+map,.mapBox{
+  width: 750rpx;
+  height: 300rpx;
+}
diff --git a/demo/pages/about/log/log.wxml b/demo/pages/about/log/log.wxml
@@ -8,6 +8,18 @@
 <view class="cu-timeline">
   <view class='cu-item text-green'>
     <view class="bg-gradual-green content shadow-blur">
+      <view class="cu-capsule radius">
+        <view class="cu-tag bg-white text-green">v2.0.7</view>
+        <view class="cu-tag line-white">2019/02/20</view>
+      </view>
+      <view class='margin-top-sm text-content'>
+        <view>1.新增操作条胶囊样式，优化全屏操作条</view>
+        <view>2.新增操垂直导航</view>
+      </view>
+    </view>
+  </view>
+  <view class='cu-item text-green'>
+    <view class="bg-green content shadow-blur">
       <view class="cu-capsule radius">
         <view class="cu-tag bg-white text-green">v2.0.6</view>
         <view class="cu-tag line-white">2019/02/09</view>

diff --git a/demo/pages/basics/home/home.wxml b/demo/pages/basics/home/home.wxml
@@ -6,3 +6,4 @@
     <text class='icon-{{item.icon}}'></text>
   </navigator>
 </view>
+<view class='cu-tabbar-height'></view>
diff --git a/demo/pages/basics/home/home.wxss b/demo/pages/basics/home/home.wxss
@@ -1,3 +0,0 @@
-page{
-  padding-bottom: 100rpx;
-}

diff --git a/demo/pages/component/bar/bar.js b/demo/pages/component/bar/bar.js
@@ -3,6 +3,7 @@ Page({
   data: {
     StatusBar: app.globalData.StatusBar,
     CustomBar: app.globalData.CustomBar,
+    Custom: app.globalData.Custom,
   },
 
 })
diff --git a/demo/pages/component/bar/bar.wxml b/demo/pages/component/bar/bar.wxml
@@ -1,9 +1,10 @@
 <view class="cu-custom" style="height:{{CustomBar}}px;">
   <view class="cu-bar fixed bg-gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
-    <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
+    <navigator class='action border-custom' open-type="navigateBack" delta="1" hover-class="none" style='width:{{Custom.width}}px;height:{{Custom.height}}px;margin-left:calc(750rpx - {{Custom.right}}px)'>
       <text class='icon-back'></text>
-      <text>操作条</text>
+      <text class='icon-homefill'></text>
     </navigator>
+    <view class='content' style='top:{{StatusBar}}px;'>操作条</view>
   </view>
 </view>
 

diff --git a/demo/pages/component/home/home.wxml b/demo/pages/component/home/home.wxml
@@ -6,3 +6,4 @@
     <text class='icon-{{item.icon}}'></text>
   </navigator>
 </view>
+<view class='cu-tabbar-height'></view>
diff --git a/demo/pages/component/home/home.wxss b/demo/pages/component/home/home.wxss
@@ -1,3 +0,0 @@
-page{
-  padding-bottom: 100rpx;
-}

diff --git a/demo/pages/component/modal/modal.wxml b/demo/pages/component/modal/modal.wxml
@@ -5,10 +5,9 @@
     </navigator>
   </view>
 </view>
-
-<view class="cu-bar bg-white">
+<view class="cu-bar bg-white margin-top">
   <view class='action'>
-    <text class='icon-title text-orange '></text> 模态窗口
+    <text class='icon-title text-orange '></text> 普通窗口
   </view>
   <view class='action'>
     <button class='cu-btn bg-green shadow' bindtap="showModal" data-target="Modal">Modal</button>