update

.gitignore

@@ -1,7 +1,7 @@
 .DS_Store
 node_modules
 /dist
-# umychart
+/umychart
 
 
 # local env files

README.md

@@ -1,5 +1,5 @@
 # kline-web
-### https://www.ilikegou.cn/umychart/index.html
+### https://www.ilikegou.cn/umychart/
 
 ## Project setup
 ```

src/views/kline/index.vue

@@ -3,26 +3,29 @@
     <div class="left-menu">
       <leftMenu />
     </div>
-    <div id="kline1Frame" style="border: 1px solid #000; height: 350px; float: left">
+    <div id="kline1Frame" class="frame">
       <!--//****************************Franklin 创建主队K线*********************************-->
-      <div id="klineHome" style="height: 400px; float: left; position: relative; border: 1px solid #000"></div>
-      <div id="kline1Sub" style="float: left; width: 300px; height: 400px; border: 1px solid #000">
-        <subs :title="matchTitle" :fields="field1" :team="team.team1" />
+      <div id="klineHome" style="height: 400px; float: left; position: relative; border-right: 1px solid #000"></div>
+      <div style="float: left; width: 300px; height: 400px">
+        <div id="matchTitle" class="title" style="float: left">{{ matchTitle }}</div>
+        <div id="kline1Sub" style="float: left; width: 100%; height: 200px; border-right: 1px solid #000">
+          <subs :title="matchTitle" :fields="field1" :team="team.team1" />
+        </div>
       </div>
     </div>
 
-    <div id="kline2Frame" style="border: 1px solid #000; height: 350px; float: left">
+    <div id="kline2Frame" class="frame">
       <!--//****************************Franklin 创建主队K线*********************************-->
-      <div id="klineAway" style="height: 400px; float: left; position: relative; border: 1px solid #000"></div>
-      <div id="kline2Sub" style="float: left; width: 300px; height: 400px; border: 1px solid #000">
+      <div id="klineAway" style="height: 400px; float: left; position: relative; border-right: 1px solid #000"></div>
+      <div id="kline2Sub" class="sub">
         <subs :fields="field1" :team="team.team2" />
       </div>
     </div>
 
-    <div id="kline3Frame" style="border: 1px solid #000; height: 350px; float: left">
+    <div id="kline3Frame" class="frame">
       <!--//****************************Franklin 创建主队K线*********************************-->
-      <div id="klineCalculation" style="height: 400px; float: left; position: relative; border: 1px solid #000"></div>
-      <div id="kline3Sub" style="float: left; width: 300px; height: 400px; border: 1px solid #000">
+      <div id="klineCalculation" style="height: 400px; float: left; position: relative; border-right: 1px solid #000"></div>
+      <div id="kline3Sub" class="sub">
         <subs :fields="field2" :team="team.team3" />
       </div>
     </div>
@@ -306,7 +309,9 @@ export default {
       var kline1Frame = document.getElementById('kline1Frame');
       kline1Frame.style.height = height + 'px';
       var kline1Sub = document.getElementById('kline1Sub');
-      kline1Sub.style.height = height + 'px';
+      var matchTitle = document.getElementById('matchTitle');
+      var titleHeight = matchTitle.offsetHeight;
+      kline1Sub.style.height = height - titleHeight + 'px';
       divKlineHome.JSChart.OnSize();
       //****************************Franklin 创建第二条K线*********************************
       var divKlineAway = document.getElementById('klineAway');
@@ -357,4 +362,22 @@ export default {
   float: left;
   height: 100vh;
 }
+.frame {
+  border-bottom: 1px solid #000;
+  height: 350px;
+  float: left;
+  .sub {
+    float: left;
+    width: 300px;
+    height: 400px;
+    border-right: 1px solid #000;
+  }
+}
+.title {
+  text-align: center;
+  font-size: 20px;
+  font-weight: 500;
+  height: 60px;
+  border-bottom: 1px solid #000;
+}
 </style>

src/views/kline/parts/sub.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="subs">
     <el-row>
-      <el-col :span="24" v-if="title" class="title">{{ title }}</el-col>
+      <!-- <el-col :span="24" v-if="title" class="title">{{ title }}</el-col> -->
       <el-col :span="24" class="teamTitle">{{ `${getProp({ key: 'symbol' })}-` || '' }}威廉希尔赔率</el-col>
     </el-row>
     <el-row v-for="(l, index) in fields" :key="`tableRow-${index}`" type="flex">
@@ -29,9 +29,15 @@ export default {
   methods: {
     // {label,key}: label:值为什么显示什么;key:去team中取出来对应key的value
     getProp(object) {
+      let value = '--';
       const { label, key } = object;
-      if (label) return label === 'none' ? '' : label;
-      return _.get(this.team, key);
+      if (label) {
+        if (label === 'none') value = '';
+        else value = label;
+      } else value = _.get(this.team, key, '--');
+
+      if (!value && value != '') value = '--';
+      return value;
     },
     getColor(object) {
       // 取出key值的数字,看excel的规律是数字位临界判断值
@@ -40,7 +46,7 @@ export default {
         const { key } = object;
         const num = key.replace(/[^0-9]/gi, '');
         const value = this.getProp(object);
-        if (num && value && parseFloat(value) < parseFloat(num)) color = 'red';
+        if (num && value && _.isNumber(value) && parseFloat(value) < parseFloat(num)) color = 'red';
       }
       return color;
     },
@@ -57,12 +63,6 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.title {
-  text-align: center;
-  font-size: 20px;
-  font-weight: 500;
-  border-bottom: 2px solid #000;
-}
 .teamTitle {
   text-align: center;
   font-size: 16px;