完善主页关键指标中按钮的布局，使之根据屏幕大小，自动排列

shinhaku · Jun 4, 2018 · f958417 · f958417
1 parent cf1a27a
commit f958417
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 7 deletions.
diff --git a/home_page/static/src/css/home_page.css b/home_page/static/src/css/home_page.css
@@ -50,4 +50,25 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
 .oe_quick_link{
     overflow:hidden;
     white-space:nowrap;
+}
+
+/* 小屏幕（平板，大于等于 768px） */
+@media (min-width: 768px) { 
+    .col-sm-1-5 {
+        width: 25%;
+    }
+}
+
+/* 中等屏幕（桌面显示器，大于等于 992px） */
+@media (min-width: 992px) { 
+    .col-sm-1-5 {
+        width: 20%;
+    }
+}
+
+/* 大屏幕（大桌面显示器，大于等于 1200px） */
+@media (min-width: 1200px) { 
+    .col-sm-1-5 {
+        width: 12.5%;
+    }
 }
diff --git a/home_page/static/src/js/home_page.js b/home_page/static/src/js/home_page.js
@@ -144,22 +144,23 @@ odoo.define('home_page', function (require) {
         second_part: function () {
             var self = this;
             var result_top = self.result_top;
-            var row_num = result_top.length / 4 > 1 ? 3 : parseInt(12 / result_top.length);
+            //var row_num = result_top.length / 4 > 1 ? 3 : parseInt(12 / result_top.length);
+            self.$el.find('.top_div').append($("<div class='container top_div_cotent'></div>"));
             for (var i = 0; i < result_top.length; i++) {
                 var top_data = this.result_top[i][0].split('  ');
-                if ((i + 1) / 4 > parseInt(result_top.length / 4)) {
-                    row_num = parseInt(12 / (result_top.length % 4)) == 0 ? 4 : parseInt(12 / (result_top.length % 4))
-                }
+                //if ((i + 1) / 4 > parseInt(result_top.length / 4)) {
+                //    row_num = parseInt(12 / (result_top.length % 4)) == 0 ? 4 : parseInt(12 / (result_top.length % 4))
+                //}
                 if (top_data.length == 2) {
                     //row_num = 1;
-                    var left_html_str = $("<div class='col-xs-6 col-sm-" + row_num + " block-center text-center'>\
+                    var left_html_str = $("<div class='col-xs-6 col-sm-1-5 block-center text-center'>\
                           <button class='oe_top_link_" + i +
                         "' oe_top_link='" + i + "' id='" + i + "' style='width: 120px;height: 80px'>\
                           <h4>" + top_data[0] + "</h4>\
                           <h3>\
                           " +  self.commafy(top_data[1]) + "</h3>\
                           </button><p class='m-t-sm'></p></div>");
-                    self.$el.find('.top_div').append(left_html_str);
+                    self.$el.find('.top_div_cotent').append(left_html_str);
                 }
             }
         },

diff --git a/home_page/static/src/xml/homepage.xml b/home_page/static/src/xml/homepage.xml
@@ -1,7 +1,7 @@
 <?xml version='1.0' encoding='UTF-8'?>
 <templates id='template' xml:space='preserve'>
     <t t-name='top_fist_1'>
-        <div  class='section m-t-lg m-b-lg top_div'>
+        <div  class='section m-t-lg top_div'>
             <div class='container'>
                     <div class='row-fluid'>
                         <div class='span12 feature-bg text-center'>