修改交易页面样式

lxf

2025-06-14 f341440c577806306332f1e55b3b4005b2a67e16

 src/page/kline/index.vue

@@ -9,10 +9,10 @@
            </div>
            <div class="right_title">
              <div class="t_t" style="white-space: nowrap">
                <span>{{ singDetails.spell }}</span>
                <span>{{ singDetails.name }}({{ singDetails.gid }})</span>
              </div>
              <div class="b_t">
                <span>{{ singDetails.code }}</span>
                <span>{{ singDetails.spell }}</span>
              </div>
            </div>
          </div>
@@ -63,7 +63,7 @@
                  </span>
                </div>
                <div class="sanjiao">
                 

                </div>
              </div>
              <div class="bottom_balance">
@@ -82,7 +82,7 @@
              }}</span> -->
              <span
                :class="singDetails.hcrate > 0 ? 'price green' : 'price red'"
                >{{ singDetails.nowPrice }}</span
                >₹{{ singDetails.nowPrice }}</span
              >
            </div>
            <div class="bottom_now">
@@ -92,10 +92,8 @@
                    ? '+' : ''
                }}{{ (singDetails.nowPrice - singDetails.preclose_px).toFixed(2) }}</span> -->
                <span v-else>
                  {{
                    (singDetails.nowPrice - singDetails.preclose_px).toFixed(
                      2
                    ) || 0
                  ₹{{
                    (singDetails.nowPrice - singDetails.preclose_px).toFixed(2)
                  }}</span
                >
              </div>
@@ -106,9 +104,8 @@
                <span v-if="singDetails.nowPrice === 0">-</span>
                <!-- <span v-else>({{ singDetails.nowPrice - singDetails.preclose_px > 0 ? '+' : '' }}
                  {{ singDetails.hcrate ? singDetails.hcrate : '0' }}%)</span> -->
                <span v-else
                  >({{ singDetails.hcrate > 0 ? "+" : "" }}
                  {{ singDetails.hcrate ? singDetails.hcrate : "0" }}%)</span
                <span v-else>
                  ({{ singDetails.hcrate ? singDetails.hcrate : "0" }}%)</span
                >
              </div>
            </div>
@@ -124,7 +121,7 @@
                  :class="
                    singDetails.hcrate > 0 ? 'number green' : 'number red'
                  "
                  >{{ singDetails.open_px }}</span
                  >₹{{ singDetails.open_px }}</span
                >
              </div>
              <div class="rights topes">
@@ -136,7 +133,7 @@
                  :class="
                    singDetails.hcrate > 0 ? 'number green' : 'number red'
                  "
                  >{{ singDetails.today_max }}</span
                  >₹{{ singDetails.today_max }}</span
                >
              </div>
            </div>
@@ -150,7 +147,7 @@
                  :class="
                    singDetails.hcrate > 0 ? 'number green' : 'number red'
                  "
                  >{{ singDetails.preclose_px }}</span
                  >₹{{ singDetails.preclose_px }}</span
                >
              </div>
              <div class="rights bots">
@@ -162,7 +159,7 @@
                  :class="
                    singDetails.hcrate > 0 ? 'number green' : 'number red'
                  "
                  >{{ singDetails.today_min }}</span
                  >₹{{ singDetails.today_min }}</span
                >
              </div>
            </div>
@@ -170,16 +167,16 @@
        </div>
      </div>
      <div class="k_line_detail">
        <Kline :type="singDetails.type" />
        <Kline :key="key" :type="singDetails.type" />
      </div>
      <div
        class="priect_top_bottom"
        style="display: none"
        v-if="
          kLineDetails.if_us != 1 &&
          kLineDetails.type != 'hk' &&
          kLineDetails.type != 'hk' &&
          kLineDetails.if_zhishu == 0
            kLineDetails.type != 'hk' &&
            kLineDetails.type != 'hk' &&
            kLineDetails.if_zhishu == 0
        "
      >
        <div class="t_title">
@@ -336,7 +333,7 @@
          </div>
        </div>
      </div>
      <div
      <!-- <div
        class="jianjie"
        v-if="
          !(kLineDetails.if_zhishu != '0' && singDetails.gid.indexOf('hk') > -1)
@@ -351,8 +348,8 @@
        <div class="jet">
          <span>{{ jianjie }}</span>
        </div>
      </div>
      <div
      </div> -->
      <!-- <div
        class="hknews"
        v-if="
          kLineDetails.if_zhishu != '0' && singDetails.gid.indexOf('hk') > -1
@@ -385,8 +382,8 @@
            </mt-tab-container-item>
          </mt-tab-container>
        </div>
      </div>
      <div class="hknews" v-else>
      </div> -->
      <!-- <div class="hknews" v-else>
        <div class="news-tab">
          <div class="t_title">
            <span>{{ $t("hj6") }}</span>
@@ -413,7 +410,7 @@
            </mt-tab-container-item>
          </mt-tab-container>
        </div>
      </div>
      </div> -->
      <!-- <div class="border_bottom"></div> -->
    </div>
    <div class="btns">
@@ -427,7 +424,7 @@
          <img src="../../assets/img/shoucangle.png" alt v-else />
        </div>
        <div class="right_xx" @click="handleJj()">
          <a href="#"><img src="../../assets/img/xiaoxi.png" alt /></a>
          <a href="#"><img src="../../assets/img/xiaoxi.png" alt/></a>
        </div>
      </div>
      <div class="rights">
@@ -435,17 +432,17 @@
          <div class="top_buy" @click="goBuy(0)">
            <span>{{ $t("hj84") }}</span>
          </div>
          <div class="bottom_buy">
            <span>{{ singDetails.nowPrice }}</span>
          </div>
          <!-- <div class="bottom_buy">
            <span>₹{{ singDetails.nowPrice  }}</span>
          </div> -->
        </div>
        <div class="sell_btn" @click="goBuy(1)">
          <div class="top_sell">
            <span>{{ $t("hj85") }}</span>
          </div>
          <div class="bottom_sell">
            <span>{{ singDetails.nowPrice }}</span>
          </div>
          <!-- <div class="bottom_sell">
            <span>₹{{ singDetails.nowPrice  }}</span>
          </div> -->
        </div>
      </div>
    </div>
@@ -474,10 +471,11 @@
      newsdetailList: [],
      bayType: "",
      timer: null,
      key: 0
    };
  },
  components: {
    Kline,
    Kline
  },

  created() {
@@ -488,7 +486,7 @@
    } else {
      this.timer = setInterval(() => {
        this.getSingDetails();
      }, 500);
      }, 2000);
    }
    this.getOpation();
    // this.$Lazyload();
@@ -504,7 +502,7 @@
  // },
  methods: {
    async getHknews() {
      await api.queryIndexNews().then((res) => {
      await api.queryIndexNews().then(res => {
        if (res.status === 0) {
          this.newsdetailList = res.data.data;
        }
@@ -526,13 +524,13 @@
          this.optionBtn = false;
          this.$message({
            message: this.$t("hj97"),
            type: "success",
            type: "success"
          });
        } else {
          this.optionBtn = false;
          this.$message({
            message: data.msg,
            type: "warning",
            type: "warning"
          });
        }
      } else {
@@ -542,12 +540,12 @@
          this.optionBtn = false;
          this.$message({
            message: this.$t("hj96"),
            type: "success",
            type: "success"
          });
        } else {
          this.$message({
            message: data.msg,
            type: "warning",
            type: "warning"
          });
          this.optionBtn = false;
        }
@@ -571,7 +569,7 @@
    },
    async getOpation() {
      let opts = {
        code: this.$route.query.code,
        code: this.$route.query.code
      };
      let data = await api.isOption(opts);
      if (data.status === 0) {
@@ -584,9 +582,9 @@
    async getSingDetails() {
      let opts = {
        code: this.kLineDetails.code,
        stockType: this.kLineDetails.type,
        stockType: this.kLineDetails.type
      };
      await api.getSingleStock(opts).then((res) => {
      await api.getSingleStock(opts).then(res => {
        if (res.status === 0) {
          this.singDetails = res.data.stock;
          this.bayType = res.data.stock.type;
@@ -598,7 +596,7 @@
          }
          const obj = {
            pid: res.data.stock.code,
            type: res.data.stock.type,
            type: res.data.stock.type
          };
          window.localStorage.setItem("kLine", JSON.stringify(obj));
          // console.log(this.singDetails)
@@ -616,9 +614,9 @@
    async getSingDetailUs() {
      let opts = {
        code: this.kLineDetails.code,
        stockType: this.kLineDetails.type,
        stockType: this.kLineDetails.type
      };
      await api.getUsDetail(opts).then((res) => {
      await api.getUsDetail(opts).then(res => {
        // console.log(res,1111123);
        // var that = this
        // if(!res){
@@ -662,12 +660,17 @@
      this.$router.push({
        path: "/newPage",
        query: {
          listid: item.id,
        },
          listid: item.id
        }
      });
    },
    goBuy(index) {
      clearInterval(this.timer);
      // 最高价：singDetails.today_max
      // 最低价：singDetails.today_min
      // 名字：singDetails.name
      // 当前涨幅：singDetails.nowPrice - singDetails.preclose_px
      // 涨幅百分比：singDetails.hcrate
      this.$router.push({
        path: "/TradingBuy",
        query: {
@@ -677,15 +680,25 @@
          type: this.kLineDetails.if_zhishu,
          id: this.singDetails.id,
          name: this.kLineDetails.name,
          spell: this.singDetails.spell,
          if_us: this.kLineDetails.if_us,
          bayType: this.bayType,
        },
          gid: this.singDetails.gid,

          max: this.singDetails.today_max,
          min: this.singDetails.today_min,
          cname: this.singDetails.name,
          up: (
            this.singDetails.nowPrice - this.singDetails.preclose_px
          ).toFixed(2),
          upPercent: this.singDetails.hcrate
        }
      });
      if (navigator.vibrate) {
        // 支持
        navigator.vibrate([55]);
      }
    },
    }
  },
  filters: {
    getName(spell) {
@@ -747,8 +760,8 @@
        .replace(/年|月/g, "-")
        .replace(/日/g, " ");
      return beijingDatetime; // 2017-03-31 16:02:06
    },
  },
    }
  }
};
</script>

@@ -910,7 +923,7 @@

.k_line_detail {
  width: 100%;
  height: 8.3rem;
  height: calc(100vh - 300px);
  background: #fff;
  border-radius: 0 0 0.3rem 0.3rem;
}
@@ -931,10 +944,10 @@
    .top_now {
      width: 100%;
      // height: 65%;
      font-size: 0.741rem;
      font-size: 25px;
      display: flex;
      align-items: center;

      font-weight: bold;
      span {
        font-weight: 500;
      }
@@ -954,7 +967,7 @@
  }

  .right_ets {
    max-width: 60%;
    max-width: 70%;
    height: 100%;

    > div {
@@ -1162,12 +1175,13 @@
    .buy_btn {
      width: 45%;
      height: 100%;
      background: rgb(225, 59, 69);
      background: #0062ac;
      color: #fff;

      .top_buy {
        width: 100%;
        height: 45%;
        // height: 45%;
        height: 64%;
        display: flex;
        justify-content: center;
        align-items: flex-end;
@@ -1187,12 +1201,13 @@
    .sell_btn {
      width: 45%;
      height: 100%;
      background: rgb(68, 155, 84);
      background: #fc4f30;
      color: #fff;

      .top_sell {
        width: 100%;
        height: 45%;
        // height: 45%;
        height: 64%;
        display: flex;
        justify-content: center;
        align-items: flex-end;