From 0728f5345cf97bc2f61373cbf6bbeed1c9cab071 Mon Sep 17 00:00:00 2001
From: qiang <guoshengqiang@live.com>
Date: Thu, 28 Feb 2019 15:57:42 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20titleNView=E6=8C=89=E9=92=AE=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E9=85=8D=E7=BD=AE=E5=B0=8F=E7=BA=A2=E7=82=B9=E5=92=8C?=
 =?UTF-8?q?=E8=A7=92=E6=A0=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/platforms/h5/components/page/pageHead.vue | 51 ++++++++++++++++---
 1 file changed, 45 insertions(+), 6 deletions(-)

diff --git a/src/platforms/h5/components/page/pageHead.vue b/src/platforms/h5/components/page/pageHead.vue
index c32c556b..9db6aa75 100644
--- a/src/platforms/h5/components/page/pageHead.vue
+++ b/src/platforms/h5/components/page/pageHead.vue
@@ -18,8 +18,11 @@
           <div
             v-if="btn.float === 'left'"
             :key="index"
-            :style="{marginRight:index>0?'5px':'0px',backgroundColor: btn.background}"
-            class="uni-page-head-btn">
+            :style="{backgroundColor: type==='transparent'?btn.background:'transparent'}"
+            :badge-text="btn.badgeText"
+            :class="{'uni-page-head-btn-red-dot':btn.redDot||btn.badgeText}"
+            class="uni-page-head-btn"
+          >
             <i
               :style="_formatBtnStyle(btn)"
               class="uni-btn-icon"
@@ -71,8 +74,11 @@
           <div
             v-if="btn.float !== 'left'"
             :key="index"
-            :style="{backgroundColor: btn.background}"
-            class="uni-page-head-btn">
+            :style="{backgroundColor: type==='transparent'?btn.background:'transparent'}"
+            :badge-text="btn.badgeText"
+            :class="{'uni-page-head-btn-red-dot':btn.redDot||btn.badgeText}"
+            class="uni-page-head-btn"
+          >
             <i
               :style="_formatBtnStyle(btn)"
               class="uni-btn-icon"
@@ -148,12 +154,45 @@ uni-page-head .uni-page-head-bd {
 }
 
 .uni-page-head-btn {
+  position: relative;
   max-width: 48px;
   word-break: keep-all;
   margin: 0 2px;
-  overflow: hidden;
   word-break: keep-all;
-  background-color: rgba(153,153,153,1);
+}
+
+.uni-page-head-transparent .uni-page-head-btn{
+  background-color: rgba(153, 153, 153, 1);
+}
+
+uni-page-head .uni-btn-icon {
+  overflow: hidden;
+}
+
+.uni-page-head-btn-red-dot::after {
+  content: attr(badge-text);
+  position: absolute;
+  right: 0;
+  top: 0;
+  background-color: red;
+  color: white;
+  width: 18px;
+  height: 18px;
+  line-height: 18px;
+  border-radius: 18px;
+  overflow: hidden;
+  transform: scale(0.6);
+  transform-origin: 100% 0;
+}
+
+.uni-page-head-btn-red-dot[badge-text]::after {
+  font-size: 12px;
+  width: auto;
+  min-width: 18px;
+  max-width: 42px;
+  text-align: center;
+  padding: 0 3px;
+  transform: scale(0.7);
 }
 
 .uni-page-head-search {
-- 
GitLab