修改排版BUG

home.php

@@ -123,7 +123,8 @@ include($_SERVER['DOCUMENT_ROOT'] . "/Authorization/script/php/permission/check_
 				<header class="page-header">
 					<h2>綜合登入入口</h2>
 				</header>
-				<panel-object></panel-object>
+
+				<panel-row></panel-row>
 			</section>
 
 		</div>
@@ -134,15 +135,25 @@ include($_SERVER['DOCUMENT_ROOT'] . "/Authorization/script/php/permission/check_
 		var userName = "<?php echo $_SESSION['name'] ?>";
 		var role = "<?php echo ($groupName); ?>";
 		var right = <?php echo ($right); ?>;
-		var tempData = [];
-		for (i = 0; i < panel_data.length; i++) {
-			if (right >= panel_data[i].right) {
-				tempData.push(panel_data[i])
-			}
+		var rowWidth = 3;
+		var panelGroup = [];
+		let tempData = [];
+		
+		panel_data.forEach(function(data){
+			if(right >= data.right){
+				tempData.push(data);
+				if(tempData.length == rowWidth){
+					panelGroup.push(tempData);
+					tempData = [];
+				}
+			}	
+		})
+		if(tempData.length > 0){
+			panelGroup.push(tempData);
+			tempData = [];
 		}
+
 		vm.mount('.body');
-		
-		
 	</script>
 
 	<!-- Vendor -->
@@ -158,9 +169,9 @@ include($_SERVER['DOCUMENT_ROOT'] . "/Authorization/script/php/permission/check_
 
 	<script>
 		$(document).ready(function() {
-			addUserImage(userName.charAt(0),role);
+			addUserImage(userName.charAt(0), role);
 		})
-		
+
 		$('.panel').hoverIntent({
 			sensitivity: 50, //滑鼠滑動的敏感度,最少要設定為1    
 			interval: 200, //滑鼠滑過後要延遲的秒數    

script/js/vue-panel.js

@@ -75,12 +75,45 @@ const vm = Vue.createApp({});
 vm.component('panel-object', {
     data() {
         return {
-            panel_data: panel_data,
-            right:right,
+            panel_data: tempData
         }
     },
     template: `<div v-for="panel in panel_data"  class="col-md-6 col-lg-6 col-xl-4" >
-        <section class="panel" v-if="right >= panel.right">
+        <section class="panel">
+            <header class="panel-heading bg-primary">
+                <div class="panel-heading-profile-picture">
+                    <img v-bind:src="panel.image" height="75px" alt="BIM">
+                </div>
+            </header>
+            <div class="panel-body">
+                <div class="panel-body-title">
+                    <h4 class="text-semibold mt-sm">{{panel.name}}</h4>
+                    <hr class="solid short">
+                    <a v-for="button in panel.buttons" v-bind:href="button.url"><button type="button" class="mb-xs mt-xs mr-xs btn btn-primary">{{button.name}}</button></a>                    
+                </div>
+                <div class="panel-body-info" v-html="panel.info" hidden></div>
+            </div>
+        </section>
+    </div>`
+});
+
+vm.component('panel-row', {
+    data() {
+        return {
+            panel_data: panelGroup,
+        }
+    },
+    template:  `<div v-for="rows in panel_data" class="row">
+                    <panel-test v-for="row in rows" :panel="row"></panel-test>
+                </div>`
+});
+
+vm.component('panel-test', {
+    props: {
+        panel: Array,
+    },
+    template: `<div class="col-md-6 col-lg-6 col-xl-4">
+        <section class="panel">
             <header class="panel-heading bg-primary">
                 <div class="panel-heading-profile-picture">
                     <img v-bind:src="panel.image" height="75px" alt="BIM">