最新

XIGUASSR

2022-11-12 cf0d36bbe155ecdfd8bca429666405e830d0dc7a

 src/page/kline/index.vue

@@ -2,16 +2,57 @@
  <div class="kline_detail_page">
    <div class="content">
      <div class="detail_title">
        <div class="top_back">
          <div class="left_back" @click="handleBack()">
            <img src="../../assets/img/zuojiantou.png" alt />
          </div>
          <div class="right_title">
            <div class="t_t">
              <span>{{ kLineDetails.name }}</span>
        <div class="ti_cont">
          <div class="top_back">
            <div class="left_back" @click="handleBack()">
              <img src="../../assets/img/zuojiantou.png" alt />
            </div>
            <div class="b_t">
              <span>{{ singDetails.code }}</span>
            <div class="right_title">
              <div class="t_t">
                <span>{{ kLineDetails.name }}</span>
              </div>
              <div class="b_t">
                <span>{{ singDetails.code }}</span>
              </div>
            </div>
          </div>
          <div class="right_money sss" @click="openDialog()">
            <div class="content_money">
              <div class="top_price">
                <div class="left">
                  <span>{{ '余额' }}</span>
                </div>
                <div class="right">
                  <span v-if="$store.state.userInfo.userAmt==undefined">¥0.00</span>
                  <span
                    v-if="$store.state.userInfo&&kLineDetails.if_zhishu!='0'"
                    style="white-space: nowarp;"
                  >
                    {{ '¥' + $store.state.userInfo.userIndexAmt
                    }}
                  </span>
                  <span
                    v-if="$store.state.userInfo.userAmt!=undefined&&kLineDetails.if_zhishu=='0'"
                    style="white-space: nowarp;"
                  >
                    {{ '¥ ' + $store.state.userInfo.userAmt
                    }}
                  </span>
                </div>
                <div class="sanjiao">
                  <img
                    :class="dialogFlag ? 'xuanz' : ''"
                    style="transition: all 0.5s;"
                    src="../../assets/img/xiala.png"
                    alt
                  />
                </div>
              </div>
              <div class="bottom_balance">
                <div>
                  <span>{{ '可用余额' }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
@@ -170,7 +211,7 @@
          </div>
        </div>
      </div>
      <div class="jianjie" :class="acseFlag ? 'isjj' : ''">
      <div class="jianjie" :class="acseFlag ? 'isjj' : ''" ref="isjj" id="isjj">
        <div class="top_jj">
          <span>{{ '简介' }}</span>
        </div>
@@ -187,24 +228,24 @@
          <img src="../../assets/img/shoucangle.png" alt v-else />
        </div>
        <div class="right_xx" @click="handleJj()">
          <img src="../../assets/img/xiaoxi.png" alt />
          <a href="#isjj"><img src="../../assets/img/xiaoxi.png" alt /></a>
        </div>
      </div>
      <div class="rights">
        <div class="buy_btn">
          <div class="top_buy">
          <div class="top_buy" @click="goBuy(0)">
            <span>{{ '卖出' }}</span>
          </div>
          <div class="bottom_buy">
            <span>{{ '145.533' }}</span>
            <span>{{ singDetails.nowPrice }}</span>
          </div>
        </div>
        <div class="sell_btn">
        <div class="sell_btn" @click="goBuy(1)">
          <div class="top_sell">
            <span>{{ '买入' }}</span>
          </div>
          <div class="bottom_sell">
            <span>{{ '145.533' }}</span>
            <span>{{ singDetails.nowPrice }}</span>
          </div>
        </div>
      </div>
@@ -227,6 +268,7 @@
      jianjie: "",
      optionBtn:false,
      isOptionOpt:false,
      dialogFlag:false,
    };
  },
  components: {
@@ -238,6 +280,7 @@
    this.getOpation();
    // this.$Lazyload();
    this.getSingDetails();
    this.getUserInfo();
  },
  methods: {
    async option() {
@@ -265,6 +308,18 @@
          this.optionBtn = false;
        }
      }
    },
    async getUserInfo() {
      // 获取用户信息
      //   let showcookie = this.getCookie('USER_TOKEN');
      let data = await api.getUserInfo();
      if (data.status === 0) {
        // this.getProductSetting()
        this.$store.state.userInfo = data.data;
      } else {
        Toast(data.msg);
      }
      this.$store.state.user = this.user;
    },
    async getOpation () {
        let opts = {
@@ -306,12 +361,28 @@
    },
    handleSc() {
      this.scFlag = !this.scFlag;
    },
    goBuy(index) {
      this.$router.push({
        path: "/TradingBuy",
        query: {
          t:index,
          code:this.kLineDetails.code,
          m:this.singDetails.nowPrice,
          type:this.kLineDetails.if_zhishu,
          name:this.kLineDetails.name,
        }
      });
    }
  }
};
</script>

<style scoped lang="less">
.ti_cont {
  width: 100%;
  display: flex;
}
.kline_detail_page {
  width: 100%;
  height: calc(100% - 1.7rem);
@@ -323,7 +394,13 @@
    position: relative;
  }
}

.sss {
  width: 50%;
  height: 1.2rem;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.detail_title {
  width: 100%;
  height: 3.2rem;
@@ -331,7 +408,7 @@
  background: #fff;

  .top_back {
    width: 100%;
    width: 50%;
    height: 1.2rem;
    display: flex;
    align-items: center;
@@ -731,5 +808,76 @@
  animation: zy 2.5s .15s linear infinite;
  animation: zy 2.5s .15s linear infinite;
  animation: zy 2.5s .15s linear infinite;
  animation: zy 2.5s 0.15s linear infinite;
  animation: zy 2.5s 0.15s linear infinite;
  animation: zy 2.5s 0.15s linear infinite;
  animation: zy 2.5s 0.15s linear infinite;
}
.content_money {
  width: 80%;
  height: 80%;
}
.sanjiao {
  width: 0.4rem;
  height: 0.4rem;
  display: flex;
  align-items: center;
  justify-content: center;

  img {
    width: 0.4rem;
    height: 0.4rem;
  }
}
.top_price {
  width: 100%;
  height: 70%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  .left {
    width: 0.8rem;
    height: 0.4103rem;
    border-radius: 0.1rem;
    background: #4d73b1;
    color: #fff;
    font-size: 0.3077rem;
    display: flex;
    align-items: center;
    justify-content: center;

    span {
      display: inline-block;
      transform: scale(0.8);
      font-weight: 600;
    }
  }

  .right {
    width: auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    white-space: nowrap;
    margin-left: 0.1rem;
    margin-right: 0.1rem;
    min-width: 1.9rem;
    span {
      font-weight: 600;
      text-align: right;
    }
  }
}
.bottom_balance {
  width: 100%;
  height: 30%;
  display: flex;
  justify-content: flex-end;
  font-size: 0.3077rem;
  color: #acaeaf;
  transform: scale(0.9);
  margin-left: 0.2rem;
  padding-right: 0.68rem;
}
</style>