1
jhzh
2025-07-28 a8b0eb32d97e7a540692a8a29f610fe76d67ef74
src/page/kline/index.vue
@@ -16,6 +16,16 @@
              </div>
            </div>
          </div>
          <div class="top_back" style="flex-direction: row-reverse;">
            <div class="left_ca" @click="option()">
              <img style="width: 20px;"
                src="../../assets/img/meishoucang.png"
                alt
                v-if="isOptionOpt === false"
              />
              <img style="width: 20px;" src="../../assets/img/shoucangle.png" alt v-else />
            </div>
          </div>
          <!-- 隐藏右侧金额显示 -->
          <!-- <div class="right_money sss">
            <div class="content_money">
@@ -74,25 +84,98 @@
            </div>
          </div> -->
        </div>
        <div class="real_time_detail" style="border-bottom: 1px solid #dadada;">
          <div style="display: flex;justify-content: center;align-items: center;">
            <img style="width: 40px;border-radius: 50px;" src="../../assets/img/nologo.svg"/>
            <div class="left_now_price" style="margin-left: 10px;">
              <div class="top_now">
                <!-- <span :class="singDetails.nowPrice - singDetails.preclose_px > 0 ? 'price green' : 'price red'">{{
                    singDetails.nowPrice
                }}</span> -->
                <span style="color: #0FAD60;font-size: 12px;"
                  :class="singDetails.hcrate > 0 ? 'price green' : 'price red'"
                  >{{ singDetails.name }}</span
                >
              </div>
              <div class="bottom_now" style="margin-top: 5px;font-weight: bold;">
                <div>
                  <span v-if="singDetails.nowPrice === 0">-</span>
                  <!-- <span v-else>{{ singDetails.nowPrice - singDetails.preclose_px > 0
                      ? '+' : ''
                  }}{{ (singDetails.nowPrice - singDetails.preclose_px).toFixed(2) }}</span> -->
                  <span :class="singDetails.hcrate > 0 ? 'number green' : 'number red'" v-else>
                    {{ singDetails.spell }}</span
                  >
                </div>
              </div>
            </div>
          </div>
          <div class="right_ets">
            <div class="tops">
              <div class="lefts topes">
                <span class="titles">{{ $t("hj40") }}</span>
                <!-- <span :class="singDetails.preclose_px < 0 ? 'number green' : 'number red'">{{
                    singDetails.open_px
                }}</span> -->
                <!-- <span style="font-weight: bold;"
                  >{{ singDetails.nowPrice  }}</span
                > -->
              </div>
              <div class="rights topes">
                <!-- <span class="titles">{{ $t("hj73") }}</span> -->
                <!-- <span :class="singDetails.preclose_px < 0 ? 'number green' : 'number red'">{{
                    singDetails.today_max
                }}</span> -->
                <span :class="singDetails.preclose_px < 0 ? 'number green' : 'number red'"
                  style="font-weight: bold;"
                  >{{ $t("hj74") }}</span
                >
              </div>
            </div>
            <div class="bottoms">
              <div class="lefts bots">
                <!-- <span class="titles">{{ $t("hj74") }}</span> -->
                <!-- <span :class="singDetails.preclose_px < 0 ? 'number green' : 'number red'">{{
                    singDetails.preclose_px
                }}</span> -->
                <span
                 style="font-weight: bold;font-size: 18px;"
                  >{{ singDetails.preclose_px   }}</span
                >
              </div>
               <div class="rights bots">
                <!-- <span class="titles">{{ $t("hj75") }}</span> -->
                <!-- <span :class="singDetails.preclose_px < 0 ? 'number green' : 'number red'">{{
                    singDetails.today_min
                }}</span> -->
                <span :class="singDetails.preclose_px < 0 ? 'number green' : 'number red'"
                 style="font-weight: bold;"
                  >{{ singDetails.hcrate ? singDetails.hcrate : "0" }}%</span
                >
              </div>
            </div>
          </div>
        </div>
        <div class="real_time_detail">
          <div class="left_now_price">
            <div class="top_now">
              <!-- <span :class="singDetails.nowPrice - singDetails.preclose_px > 0 ? 'price green' : 'price red'">{{
                  singDetails.nowPrice
              }}</span> -->
              <span
              <span style="color: #0FAD60;"
                :class="singDetails.hcrate > 0 ? 'price green' : 'price red'"
                >¥{{ singDetails.nowPrice  }}</span
                >{{ singDetails.nowPrice  }}</span
              >
            </div>
            <div class="bottom_now">
            <div class="bottom_now" style="margin-top: 5px;font-weight: bold;">
              <div>
                <span v-if="singDetails.nowPrice === 0">-</span>
                <!-- <span v-else>{{ singDetails.nowPrice - singDetails.preclose_px > 0
                    ? '+' : ''
                }}{{ (singDetails.nowPrice - singDetails.preclose_px).toFixed(2) }}</span> -->
                <span v-else>
                  ¥{{
                <span :class="singDetails.hcrate > 0 ? 'number green' : 'number red'" v-else>
                  {{
                    (singDetails.nowPrice - singDetails.preclose_px).toFixed(2)
                  }}</span
                >
@@ -117,11 +200,9 @@
                <!-- <span :class="singDetails.preclose_px < 0 ? 'number green' : 'number red'">{{
                    singDetails.open_px
                }}</span> -->
                <span
                  :class="
                    singDetails.hcrate > 0 ? 'number green' : 'number red'
                  "
                  >¥{{ singDetails.open_px   }}</span
                <span style="font-weight: bold;"
                  >{{ singDetails.open_px   }}</span
                >
              </div>
              <div class="rights topes">
@@ -130,10 +211,8 @@
                    singDetails.today_max
                }}</span> -->
                <span
                  :class="
                    singDetails.hcrate > 0 ? 'number green' : 'number red'
                  "
                  >¥{{ singDetails.today_max   }}</span
                  style="font-weight: bold;"
                  >{{ singDetails.today_max   }}</span
                >
              </div>
            </div>
@@ -144,10 +223,8 @@
                    singDetails.preclose_px
                }}</span> -->
                <span
                  :class="
                    singDetails.hcrate > 0 ? 'number green' : 'number red'
                  "
                  >¥{{ singDetails.preclose_px   }}</span
                 style="font-weight: bold;"
                  >{{ singDetails.preclose_px   }}</span
                >
              </div>
               <div class="rights bots">
@@ -156,10 +233,8 @@
                    singDetails.today_min
                }}</span> -->
                <span
                  :class="
                    singDetails.hcrate > 0 ? 'number green' : 'number red'
                  "
                  >¥{{ singDetails.today_min  }}</span
                 style="font-weight: bold;"
                  >{{ singDetails.today_min  }}</span
                >
              </div>
            </div>
@@ -414,7 +489,7 @@
      <!-- <div class="border_bottom"></div> -->
    </div>
    <div class="btns">
      <div class="lefts">
      <!-- <div class="lefts">
        <div class="left_ca" @click="option()">
          <img
            src="../../assets/img/meishoucang.png"
@@ -426,23 +501,23 @@
        <div class="right_xx" @click="handleJj()">
          <a href="#"><img src="../../assets/img/xiaoxi.png" alt /></a>
        </div>
      </div>
      </div> -->
      <div class="rights">
        <div class="buy_btn">
          <div class="top_buy" @click="goBuy(0)">
            <span>{{ $t("hj84") }}</span>
          </div>
          <div class="bottom_buy">
          <!-- <div class="bottom_buy">
            <span>¥{{ singDetails.nowPrice  }}</span>
          </div>
          </div> -->
        </div>
        <div class="sell_btn" @click="goBuy(1)">
          <div class="top_sell">
            <span>{{ $t("hj85") }}</span>
          </div>
          <div class="bottom_sell">
          <!-- <div class="bottom_sell">
            <span>¥{{ singDetails.nowPrice  }}</span>
          </div>
          </div> -->
        </div>
      </div>
    </div>
@@ -489,7 +564,6 @@
      }, 2000);
    }
    this.getOpation();
    // this.$Lazyload();
    this.getUserInfo();
    this.getNohknews();
  },
@@ -931,7 +1005,7 @@
    .top_now {
      width: 100%;
      // height: 65%;
      font-size: 25px;
      font-size: 40px;
      display: flex;
      align-items: center;
      font-weight: bold;
@@ -1149,7 +1223,7 @@
  }
  .rights {
    width: 70%;
    width: 100%;
    height: 70%;
    display: flex;
    align-items: center;
@@ -1162,23 +1236,25 @@
    .buy_btn {
      width: 45%;
      height: 100%;
      background: rgb(225, 59, 69);
      background: #185546;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      .top_buy {
        width: 100%;
        height: 45%;
        // height: 45%;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        align-items: center;
      }
      .bottom_buy {
        width: 100%;
        height: 55%;
        // height: 55%;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        align-items: center;
        font-size: 0.4015rem;
        padding: 0.1rem 0 0 0;
      }
@@ -1187,23 +1263,25 @@
    .sell_btn {
      width: 45%;
      height: 100%;
      background: rgb(68, 155, 84);
      background: #185546;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      .top_sell {
        width: 100%;
        height: 45%;
        // height: 45%;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        // align-items: flex-end;
      }
      .bottom_sell {
        width: 100%;
        height: 55%;
        // height: 55%;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        // align-items: flex-start;
        padding: 0.1rem 0 0 0;
        font-size: 0.4015rem;
      }