修改login頁面

Author: veelatseng

css/mohw.css

@@ -7996,41 +7996,58 @@ div.tag ul li a:hover, div.tag ul li a:focus {
           box-sizing: border-box;
 }
 
-.loginTab .tabSet .tabItem {
+.loginTab .login_Tab .tabItem {
   font-size: 1em;
-  margin: 0 6px;
+  margin: 0 4px;
 }
-.loginTab .tabSet .tabItem a {
+.loginTab .login_Tab .tabItem a {
   padding: 12px 30px;
   background: #767676;
+  color: #fff;
+  border-radius: 4px 4px 0 0;
+  position: relative;
 }
-.loginTab .tabSet .tabItem.active a {
-  background: #984696;
-}
-.loginTab .tabSet .tabItem.active a:before {
+.loginTab .login_Tab .tabItem a:before {
+  content: "";
+  position: absolute;
+  width: 0px;
+  height: 0px;
+  display: none;
+  border-style: solid;
   border-width: 8px 10px 0 10px;
   border-color: #984696 transparent transparent transparent;
   bottom: -8px;
+  left: 50%;
   margin-left: -10px;
+  z-index: 1;
+}
+.loginTab .login_Tab .tabItem.active a {
+  background: #984696;
+}
+.loginTab .login_Tab .tabItem.active a:before {
+  display: block;
+}
+.loginTab .login_Tab .tabContent {
+  background: #f2f2f2;
 }
-.loginTab .tabSet .tabContent .form_grid .form_grp p {
+.loginTab .login_Tab .tabContent .form_grid .form_grp p {
   margin: 0;
 }
-.loginTab .tabSet .tabContent .form_grid .form_grp p a {
+.loginTab .login_Tab .tabContent .form_grid .form_grp p a {
   text-decoration: underline;
   margin: 0 2px;
 }
-.loginTab .tabSet .tabContent .form_grid .btn_grp {
+.loginTab .login_Tab .tabContent .form_grid .btn_grp {
   margin-bottom: 0;
   padding-bottom: 0;
 }
-.loginTab .tabSet .tabContent .form_grid .btn_grp a {
+.loginTab .login_Tab .tabContent .form_grid .btn_grp a {
   text-decoration: underline;
 }
-.loginTab .tabSet ~ p {
+.loginTab .login_Tab ~ p {
   text-align: center;
 }
-.loginTab .tabSet ~ p a {
+.loginTab .login_Tab ~ p a {
   text-decoration: underline;
 }
 

css/mohw.css.map

@@ -625,6 +625,72 @@ $(function() {
     $('.related_tab .tabs>.tabItem:first-child>a').trigger('click');
     tabSetRelated();
 
+
+    /*-----------------------------------*/
+    ////////////////多組Tab4////////////////
+    /*-----------------------------------*/
+    var resizeTimer3;
+    _window.resize(function() {
+        clearTimeout(resizeTimer3);
+        resizeTimer3 = setTimeout(function() {
+            ww = _window.outerWidth();
+            tabSetLogin();
+        }, 50);
+    });
+
+    function tabSetLogin() {
+        $('.login_Tab').each(function() {
+            var _tab = $(this),
+            _tabItem = _tab.find('.tabItem'),
+            _tabItemA = _tabItem.children('a'),
+            _tabContent = _tab.find('.tabContent'),
+            tabwidth = _tab.width(),
+            tabItemHeight = _tabItem.outerHeight(),
+            tabContentHeight = _tab.find('.active').next().innerHeight(),
+            tiGap = 0,
+            tabItemLength = _tabItem.length,
+            tabItemWidth;
+            _tab.find('.active').next('.tabContent').show();
+            if (ww >= wwSmall) {
+                _tabContent.css('top', tabItemHeight);
+                _tab.height(tabContentHeight + tabItemHeight);
+                // tabItemWidth = (tabwidth - (tabItemLength - 1) * tiGap) / tabItemLength;
+                tabItemWidth =_tabItem.width();
+                // _tabItem.width(tabItemWidth).css('margin-left', tiGap);
+                _tabItem.first().css('margin-left', 0);
+                // _tabItem.last().css({ 'position': 'absolute', 'top': 0, 'right': 0 }).width(tabItemWidth);
+            } else {
+                _tab.css('height', 'auto');
+                // _tabItem.width(tabwidth);
+                _tabItem.css('margin-left', 0).last().css('position', 'relative');
+            }
+            _tabItemA.focus(tabs);
+            _tabItemA.click(tabs);
+
+            function tabs(e) {
+                var _tabItemNow = $(this).parent(),
+                tvp = _tab.offset().top,
+                tabIndex = _tabItemNow.index() / 2,
+                scollDistance = tvp + tabItemHeight * tabIndex - hh;
+                _tabItem.removeClass('active');
+                _tabItemNow.addClass('active');
+                if (ww <= wwSmall) {
+                    _tabItem.not('.active').next().slideUp();
+                    _tabItemNow.next().slideDown();
+                    $("html,body").stop(true, false).animate({ scrollTop: scollDistance });
+                } else {
+                    _tabItem.not('.active').next().hide();
+                    _tabItemNow.next().show();
+                    tabContentHeight = _tabItemNow.next().innerHeight();
+                    _tab.height(tabContentHeight + tabItemHeight);
+                }
+                e.preventDefault();
+            }
+        });
+    }
+    $('.login_Tab .tabs>.tabItem:first-child>a').trigger('click');
+    tabSetLogin();
+
     /*-----------------------------------*/
     ///////////////置頂go to top////////////
     /*-----------------------------------*/

js/hyui.js

@@ -189,7 +189,7 @@ <h2 class="title">
           <section class="fp">
             <!-- loginTab 新增區塊 -->
             <div class="loginTab">
-              <div class="tabSet">
+              <div class="tabSet login_Tab">
                 <div class="tabs">
                   <!-- tab1 -->
                   <div class="tabItem active">

login.htm

@@ -4,29 +4,43 @@
 }
 
 .loginTab {
-  .tabSet {
+  .login_Tab {
     .tabItem {
       font-size: 1em;
-      margin: 0 6px;
+      margin: 0 4px;
       a {
         padding: 12px 30px;
         background: #767676;
+        color: #fff;
+        border-radius: 4px 4px 0 0;
+        position: relative;
         &:before {
+          content: "";
+          position: absolute;
+          width: 0px;
+          height: 0px;
+          display: none;
+          border-style: solid;
+          border-width: 8px 10px 0 10px;
+          border-color: #984696 transparent transparent transparent;
+          bottom: -8px;
+          left: 50%;
+          margin-left: -10px;
+          z-index: 1;
         }
       }
       &.active {
         a {
           background: #984696;
+
           &:before {
-            border-width: 8px 10px 0 10px;
-            border-color: #984696 transparent transparent transparent;
-            bottom: -8px;
-            margin-left: -10px;
+            display: block;
           }
         }
       }
     }
     .tabContent {
+      background: #f2f2f2;
       .form_grid {
         .form_grp {
           p {