From ea8e4b59c104ff8efea2833b5bf4f95247f5ac14 Mon Sep 17 00:00:00 2001
From: laixingyu <xingyu.lai@suwell.cn>
Date: Wed, 26 Jul 2023 01:24:16 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=E9=A6=96=E9=A1=B5?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/home/index.vue | 271 ++++++++++++++++++++++++++++-----------
 1 file changed, 194 insertions(+), 77 deletions(-)

diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 2d86397..2aeb4f5 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -42,27 +42,17 @@
           <span style="color: #6fbb60">下跌{{ marketEqual }}家</span>
         </div>
       </div>
-      <div class="left_nav">
-          <div class="nav_market_text">推荐信息</div>
-          <div class="nav_market_right" @click="marketDetail">
+      <div class="left_suggest_nav">
+          <div class="suggest_nav_market_text">推荐信息</div>
+          <div class="suggest_nav_market_right" @click="marketDetail">
           <div>我的收藏</div>
           <i class="el-icon-arrow-right"></i>
         </div>
       </div>
-      <div class="left_bottom_nav">
-        <div class="market_top_nav_text">
-            <div
-              v-for="(item, index) in suggestTopNav"
-              :key="index"
-              :style="{ color: item.is ? '#EC7C00' : '#999999' }"
-              @click="marketTopNavClick(item.name)"
-            >
-              {{ item.name }}
-            </div>
-        </div>
-        <div class="trend_nav_list">
+      <div class="left_suggest">
+        <div class="suggest_nav_list">
           <div
-            v-for="(item, index) in tendencyNav"
+            v-for="(item, index) in suggestTopNav"
             :key="index"
             :style="{ color: item.is ? '#EC7C00' : '#999999' }"
             @click="tendencyNavClick(item.name)"
@@ -70,70 +60,116 @@
             {{ item.name }}
           </div>
         </div>
-        <div class="trend_list_head">
-          <div class="trend_head_left">
-            <div class="trend__head_date">交易日期</div>
-            <div class="trend__head_name">东财行业指数2级</div>
-            <div class="head_plate_box">
-              <div class="trend__head_plate" @click="selectPlateRank">
-                板块排名
+        <div class="list">
+        <el-table
+          :data="suggestList"
+          style="width: 100%"
+          @row-click="rowClick"
+          :height="tableHeight"
+        >
+          <el-table-column prop="securityCode" label="股票代码">
+          </el-table-column>
+          <el-table-column prop="securityName" label="股票名称">
+          </el-table-column>
+          <el-table-column prop="openingPrice" label="开盘价">
+          </el-table-column>
+          <el-table-column prop="closingPrice" label="收盘价">
+          </el-table-column>
+          <el-table-column prop="highestPrice" label="最高价">
+          </el-table-column>
+          <el-table-column prop="lowestPrice" label="最低价"> </el-table-column>
+          <el-table-column label="当日涨跌幅">
+            <template slot-scope="scope">
+              <div
+                style="color: #d9001b"
+                v-if="scope.row.riseLossesCurrentDay > 0"
+              >
+                {{ scope.row.riseLossesCurrentDay.toFixed(2) }}%
               </div>
-              <div class="module_head_icon" v-if="plateRank">
-                <img
-                  src="../../static/shengxu_true.png"
-                  class="head_icon"
-                  mode="scaleToFill"
-                />
-                <img
-                  src="../../static/jiangxu_false.png"
-                  class="head_icon"
-                  mode="scaleToFill"
-                />
+              <div style="color: #6fbb60" v-else>
+                -{{ scope.row.riseLossesCurrentDay.toFixed(2) }}%
               </div>
-              <div class="module_head_icon" v-else>
-                <img
-                  src="../../static/shengxu_false.png"
-                  class="head_icon"
-                  mode="scaleToFill"
-                />
-                <img
-                  src="../../static/jiangxu_true.png"
-                  class="head_icon"
-                  mode="scaleToFill"
-                />
+            </template>
+          </el-table-column>
+          <el-table-column label="是否涨停">
+            <!-- riseStop -->
+            <template slot-scope="scope">
+              {{ scope.row.riseStop == 1 ? "是" : "否" }}
+            </template>
+          </el-table-column>
+          <el-table-column label="是否跌停">
+            <template slot-scope="scope">
+              {{ scope.row.lossesStop == 1 ? "是" : "否" }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="volume" label="成交量"> </el-table-column>
+          <el-table-column prop="turnover" label="成交额"> </el-table-column>
+          <el-table-column prop="freeCapitalization" label="自由流通市值">
+          </el-table-column>
+          <el-table-column
+            prop="totalInstitutionalPositions"
+            label="机构持仓合计"
+          >
+          </el-table-column>
+          <!-- <el-table-column prop="ban" label="几天几板" width="150"> -->
+          <!-- </el-table-column> -->
+          <el-table-column prop="dayAndPlate" width="150">
+            <template slot="header" slot-scope="scope">
+              <div class="plate_sift" @click="selectPlateSift">
+                <div>几天几板</div>
+                <div class="module_head_icon" v-if="plateSift">
+                  <img
+                    src="../../static/shengxu_true.png"
+                    class="head_icon"
+                    mode="scaleToFill"
+                  />
+                  <img
+                    src="../../static/jiangxu_false.png"
+                    class="head_icon"
+                    mode="scaleToFill"
+                  />
+                </div>
+                <div class="module_head_icon" v-else>
+                  <img
+                    src="../../static/shengxu_false.png"
+                    class="head_icon"
+                    mode="scaleToFill"
+                  />
+                  <img
+                    src="../../static/jiangxu_true.png"
+                    class="head_icon"
+                    mode="scaleToFill"
+                  />
+                </div>
               </div>
-            </div>
-          </div>
-          <div class="head_ranking_box" @click="selectRankChange">
-            <div>排名变化</div>
-            <div class="module_head_icon" v-if="rankChange">
-              <img
-                src="../../static/shengxu_true.png"
-                class="head_icon"
-                mode="scaleToFill"
-              />
-              <img
-                src="../../static/jiangxu_false.png"
-                class="head_icon"
-                mode="scaleToFill"
-              />
-            </div>
-            <div class="module_head_icon" v-else>
-              <img
-                src="../../static/shengxu_false.png"
-                class="head_icon"
-                mode="scaleToFill"
-              />
-              <img
-                src="../../static/jiangxu_true.png"
-                class="head_icon"
-                mode="scaleToFill"
-              />
-            </div>
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="dongCaiIndustryIndexLevel2"
+            label="所属东财行业指数2级"
+          >
+          </el-table-column>
+        </el-table>
+        <div class="pagination" v-if="total > 20" ref="footer">
+          <el-pagination
+            layout="prev, pager, next"
+            :total="total"
+            background
+            :page-size="20"
+            @current-change="currentChange"
+          >
+          </el-pagination>
+        </div>
+      </div>
+        <!-- <div class="suggest_list_head">
+          <div class="suggest_head_left">
+            <div class="suggest_head_date">交易日期</div>
+            <div class="suggest_head_name">名称</div>
+            <div class="suggest_head_industry_name">东财行业指数2级</div>
           </div>
         </div>
         <div
-          v-if="tendencyList.length == 0"
+          v-if="suggestList.length == 0"
           style="
             font-weight: bold;
             color: #999999;
@@ -145,8 +181,8 @@
         </div>
         <div v-else>
           <div
-            class="trend_list"
-            v-for="(item, index) in tendencyList"
+            class="suggest_list"
+            v-for="(item, index) in suggestList"
             :key="index"
           >
             <div class="trend_list_left">
@@ -185,7 +221,7 @@
               {{ item.sortChange }}
             </div>
           </div>
-        </div>
+        </div> -->
         <!-- <div class="market_bottom_nav_text">
           <div
             v-for="(item, index) in marketBottomNav"
@@ -564,6 +600,8 @@ export default {
           current: 30,
         },
       ],
+      // 推荐数据
+      suggestList:[],
       // 趋势板块数据
       tendencyList: [
         {
@@ -1405,6 +1443,7 @@ export default {
   background-color: #ffffff;
   padding: 20px;
   border-radius: 8px;
+  //大盘信息
   .left_nav {
     display: flex;
     align-items: center;
@@ -1474,6 +1513,84 @@ export default {
       cursor: pointer;
     }
   }
+  //推荐
+  .left_suggest_nav{
+    margin-top: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .suggest_nav_market_text {
+      font-weight: bold;
+    }
+    .suggest_nav_market_right {
+      cursor: pointer;
+      font-size: 14px;
+      display: flex;
+      // align-items: center;
+      color: #999999;
+    }
+    .el-icon-arrow-right {
+      margin-left: 5px;
+      line-height: 16px;
+    }
+  }
+
+  .left_suggest {
+    margin-top: 20px;
+    // padding: 20px;
+    border: 1px solid #e8e8e8;
+    .suggest_nav_list {
+      padding: 20px 20px 5px 20px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+    .suggest_list_head{
+      font-size: 14px;
+      font-weight: bold;
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      padding: 12px 20px;
+      margin-top: 12px;
+      background-color: #fff9f3;
+      .suggest_head_left {
+        display: flex;
+        align-items: center;
+        .suggest_head_date {
+          width: 90px;
+        }
+        .suggest_head_name {
+          width: 120px;
+          text-align: center;
+        }
+        .suggest_head_industry_name{
+          width: 120px;
+          text-align: center;
+        }
+      }
+    }
+    ::v-deep .el-table td {
+        text-align: center;
+        border: 0;
+      }
+      ::v-deep .el-table th.is-leaf {
+        text-align: center;
+        background-color: #fff9f3;
+        color: #333333;
+        padding: 13px 0;
+      }
+
+
+    .columnar_value {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .columnar_value > span {
+      margin-right: 30px;
+    }
+  }
 }
 .main_right {
   // background-color: white;