|
@@ -1,6 +1,6 @@
|
|
|
<template>
|
|
|
<div :class="classes">
|
|
|
- <div class="rect-col" :style="{ width: rightColWidth + '%' }">
|
|
|
+ <div ref="rectColRef1" class="rect-col" style="width: 50%">
|
|
|
<div
|
|
|
class="rect-col-item"
|
|
|
ref="stdnoContainer"
|
|
@@ -16,7 +16,7 @@
|
|
|
<slot name="dynamic"></slot>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="rect-col" :style="{ width: leftColWidth + '%' }">
|
|
|
+ <div ref="rectColRef2" class="rect-col" style="width: 50%">
|
|
|
<div
|
|
|
class="rect-col-item"
|
|
|
ref="stdinfoContainer"
|
|
@@ -72,6 +72,18 @@ export default {
|
|
|
},
|
|
|
methods: {
|
|
|
initStyles() {
|
|
|
+ // width size
|
|
|
+ const fillNumber = this.data.fillNumber || 13;
|
|
|
+ if (fillNumber <= 10) {
|
|
|
+ this.leftColWidth = 50;
|
|
|
+ } else {
|
|
|
+ let leftColWidth = 50 + 4 * (fillNumber - 10);
|
|
|
+ this.leftColWidth = Math.min(this.maxRigthColWidth, leftColWidth);
|
|
|
+ }
|
|
|
+ this.rightColWidth = 100 - this.leftColWidth;
|
|
|
+ this.$refs.rectColRef1.style.width = `${this.leftColWidth}%`;
|
|
|
+ this.$refs.rectColRef2.style.width = `${this.rightColWidth}%`;
|
|
|
+
|
|
|
const containers = ["stdinfo", "notice", "stdno", "dynamic"];
|
|
|
containers.forEach((container) => {
|
|
|
const dom =
|
|
@@ -82,19 +94,10 @@ export default {
|
|
|
Object.keys(this.orgHeights).map((key) => {
|
|
|
this.heights[key] = this.orgHeights[key] + 2;
|
|
|
});
|
|
|
+
|
|
|
this.resizeRect();
|
|
|
},
|
|
|
resizeRect() {
|
|
|
- // width size
|
|
|
- const fillNumber = this.data.fillNumber || 13;
|
|
|
- if (fillNumber <= 10) {
|
|
|
- this.rightColWidth = 50;
|
|
|
- } else {
|
|
|
- let rightColWidth = 50 + 4 * (fillNumber - 10);
|
|
|
- this.rightColWidth = Math.min(this.maxRigthColWidth, rightColWidth);
|
|
|
- }
|
|
|
- this.leftColWidth = 100 - this.rightColWidth;
|
|
|
-
|
|
|
// height size
|
|
|
let col1 = this.orgHeights.stdinfo + this.orgHeights.notice;
|
|
|
let col2 = this.orgHeights.stdno + this.orgHeights.dynamic;
|