最新

XIGUASSR

2022-11-10 f891d8d35067d3bb40e2b48ecc4ab28e26f00bcd

 src/page/kline/index.vue

@@ -2,41 +2,93 @@
  <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>{{ kLineDetails.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&&tabsItemIndex == 1"
                    style="white-space: nowarp;"
                  >
                    {{ '¥' + $store.state.userInfo.userIndexAmt
                    }}
                  </span>
                  <span
                    v-if="$store.state.userInfo.userAmt!=undefined&&tabsItemIndex == 0"
                    style="white-space: nowarp;"
                  >
                    {{ '¥ ' + $store.state.userInfo.userAmt
                    }}
                  </span>
                  <span
                    v-if="$store.state.userInfo.userAmt!=undefined&&tabsItemIndex == 2"
                    style="white-space: nowarp;"
                  >
                    {{ '¥ ' + $store.state.userInfo.userAmt
                    }}
                  </span>
                  <span
                    v-if="$store.state.userInfo&&tabsItemIndex == 3"
                    style="white-space: nowarp;"
                  >
                    {{
                    '¥' + $store.state.userInfo.userFuturesAmt
                    }}
                  </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>
        <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 :class="singDetails.nowPrice - singDetails.preclose_px < 0 ? 'price green' : 'price red'">{{
                  singDetails.nowPrice
              }}</span>
            </div>
            <div class="bottom_now">
              <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>{{ singDetails.nowPrice - singDetails.preclose_px > 0
                    ? '+' : ''
                }}{{ (singDetails.nowPrice - singDetails.preclose_px).toFixed(2) }}</span>
              </div>
              <div
                class="tew"
                :class="singDetails.nowPrice - singDetails.preclose_px <0?'number green':'number red'"
              >
              <div class="tew" :class="singDetails.nowPrice - singDetails.preclose_px < 0 ? 'number green' : 'number red'">
                <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.nowPrice - singDetails.preclose_px > 0 ? '+' : '' }}
                  {{ singDetails.hcrate ? singDetails.hcrate : '0' }}%)</span>
              </div>
            </div>
          </div>
@@ -44,29 +96,29 @@
            <div class="tops">
              <div class="lefts topes">
                <span class="titles">{{ '今开' }}</span>
                <span
                  :class="singDetails.nowPrice - singDetails.preclose_px <0?'number green':'number red'"
                >{{ singDetails.open_px }}</span>
                <span :class="singDetails.nowPrice - singDetails.preclose_px < 0 ? 'number green' : 'number red'">{{
                    singDetails.open_px
                }}</span>
              </div>
              <div class="rights topes">
                <span class="titles">{{ '最高' }}</span>
                <span
                  :class="singDetails.nowPrice - singDetails.preclose_px <0?'number green':'number red'"
                >{{ singDetails.today_max }}</span>
                <span :class="singDetails.nowPrice - singDetails.preclose_px < 0 ? 'number green' : 'number red'">{{
                    singDetails.today_max
                }}</span>
              </div>
            </div>
            <div class="bottoms">
              <div class="lefts bots">
                <span class="titles">{{ '昨收' }}</span>
                <span
                  :class="singDetails.nowPrice - singDetails.preclose_px <0?'number green':'number red'"
                >{{ singDetails.preclose_px }}</span>
                <span :class="singDetails.nowPrice - singDetails.preclose_px < 0 ? 'number green' : 'number red'">{{
                    singDetails.preclose_px
                }}</span>
              </div>
              <div class="rights bots">
                <span class="titles">{{ '最低' }}</span>
                <span
                  :class="singDetails.nowPrice - singDetails.preclose_px <0?'number green':'number red'"
                >{{ singDetails.today_min }}</span>
                <span :class="singDetails.nowPrice - singDetails.preclose_px < 0 ? 'number green' : 'number red'">{{
                    singDetails.today_min
                }}</span>
              </div>
            </div>
          </div>
@@ -159,6 +211,8 @@
              </div>
              <div class="right_sell1">
                <span>{{ singDetails.buy4_num }}</span>


              </div>
            </div>
            <div class="ets">
@@ -177,15 +231,15 @@
          <span>{{ '简介' }}</span>
        </div>
        <div class="jet">
          <span>国家体育总局等八部门日前共同印发了《户外运动产业发展规划(2022-2025年)》。《规划》提出，到2025年，户外运动产业高质量发展成效显著，基本形成供给与需求有效对接、产业与生态协调发展、产品与服务品牌彰显、业态与模式持续创新的发展格局。户外运动场地设施持续增加，普及程度大幅提升，参与人数不断增长，户外运动产业总规模超过3万亿元。</span>
          <span>{{ jianjie }}</span>
        </div>
      </div>
      <div class="border_bottom"></div>
    </div>
    <div class="btns">
      <div class="lefts">
        <div class="left_ca" @click="handleSc()">
          <img src="../../assets/img/meishoucang.png" alt v-if="scFlag === false" />
        <div class="left_ca" @click="option()">
          <img src="../../assets/img/meishoucang.png" alt v-if="isOptionOpt === false" />
          <img src="../../assets/img/shoucangle.png" alt v-else />
        </div>
        <div class="right_xx" @click="handleJj()">
@@ -201,7 +255,7 @@
            <span>{{ '145.533' }}</span>
          </div>
        </div>
        <div class="sell_btn">
        <div class="sell_btn" @click="goBuy()">
          <div class="top_sell">
            <span>{{ '买入' }}</span>
          </div>
@@ -225,7 +279,10 @@
      kLineDetails: {}, // K线图详情数据
      singDetails: {},
      scFlag: false,
      acseFlag: false
      acseFlag: false,
      jianjie: "",
      optionBtn:false,
      isOptionOpt:false,
    };
  },
  components: {
@@ -234,10 +291,49 @@
  created() {
    const { query } = this.$route;
    this.kLineDetails = query;
    this.getOpation();
    // this.$Lazyload();
    this.getSingDetails();
  },
  methods: {
    async option() {
      if(this.optionBtn){
        return
      };
      this.optionBtn = true;
      if (this.isOptionOpt) {
        let data = await api.delOption({ code: this.kLineDetails.code });
        if (data.status === 0) {
          this.getOpation();
          this.optionBtn = false;
        } else {
          this.optionBtn = false;
          console.log(data.msg);
         
        }
      } else {
        let data = await api.addOption({ code: this.kLineDetails.code });
        if (data.status === 0) {
          this.getOpation();
          this.optionBtn = false;
        } else {
          console.log(data.msg);
          this.optionBtn = false;
        }
      }
    },
    async getOpation () {
        let opts = {
          code: this.$route.query.code
        }
        let data = await api.isOption(opts)
        if (data.status === 0) {
          // 0 --> 未添加
          this.isOptionOpt = false
        } else {
          this.isOptionOpt = true
        }
      },
    async getSingDetails() {
      let opts = {
        code: this.kLineDetails.code,
@@ -245,7 +341,12 @@
      };
      await api.getSingleStock(opts).then(res => {
        if (res.status === 0) {
          this.singDetails = res.data;
          this.singDetails = res.data.stock;
          if (res.data.introduction) {
            this.jianjie = res.data.introduction.result.data.fareArea;
          } else {
            this.jianjie = res.data.indexintroduction;
          }
          console.log(this.singDetails);
        }
      });
@@ -261,56 +362,79 @@
    },
    handleSc() {
      this.scFlag = !this.scFlag;
    },
    goBuy() {
      this.$router.push({
        path: "/TradingBuy"
      });
    }
  }
};
</script>

<style scoped lang="less">
.ti_cont {
  width: 100%;
  display: flex;
}
.kline_detail_page {
  width: 100%;
  height: calc(100% - 1.7rem);
  overflow: auto;
  > .content {

  >.content {
    width: 100%;
    height: 100%;
    position: relative;
  }
}
.sss {
  width: 50%;
  height: 1.2rem;
  display: flex;
  justify-content: flex-end;
}
.detail_title {
  width: 100%;
  height: 3.2rem;
  padding: 0 0.3rem;
  background: #fff;

  .top_back {
    width: 100%;
    width: 50%;
    height: 1.2rem;
    display: flex;
    align-items: center;

    .left_back {
      width: 0.8rem;
      height: 80%;
      display: flex;
      align-items: center;
      > img {

      >img {
        margin-top: 0.2rem;
        width: 0.6rem;
        height: 0.6rem;
      }
    }

    .right_title {
      width: 3rem;
      height: 80%;

      .t_t {
        width: 100%;
        height: 70%;
        display: flex;
        align-items: center;
        font-size: 0.4615rem;

        span {
          font-weight: 600;
        }
      }

      .b_t {
        width: 100%;
        height: 30%;
@@ -322,20 +446,24 @@
    }
  }
}

.k_line_detail {
  width: 100%;
  height: 8.3rem;
  background: #fff;
  border-radius: 0 0 0.3rem 0.3rem;
}

.real_time_detail {
  width: 100%;
  height: 2rem;
  display: flex;
  justify-content: space-between;

  .left_now_price {
    width: 35%;
    height: 100%;

    .top_now {
      width: 100%;
      height: 65%;
@@ -344,28 +472,34 @@
      align-items: center;
      padding-left: 0.1rem;
      padding-top: 0.3rem;

      span {
        font-weight: 500;
      }
    }

    .bottom_now {
      width: 100%;
      height: 35%;
      display: flex;
      padding-left: 0.1rem;
    }

    .tew {
      margin-left: 0.2rem;
    }
  }

  .right_ets {
    width: 65%;
    height: 100%;
    > div {

    >div {
      width: 100%;
      height: 50%;
      display: flex;
      > div {

      >div {
        width: 50%;
        height: 100%;
        display: flex;
@@ -375,21 +509,25 @@
    }
  }
}

.topes {
  span {
    display: inline-block;
    padding-top: 0.6rem;
  }
}

.bots {
  span {
    display: inline-block;
    padding-top: 0.2rem;
  }
}

.titles {
  color: rgb(159, 159, 159);
}

.border_bottom {
  width: 100%;
  height: 0.05rem;
@@ -397,31 +535,37 @@
  position: absolute;
  top: 3rem;
}

.priect_top_bottom {
  width: 100%;
  background: #fff;
  padding: 0.3rem 0.3rem;
  margin-top: 0.2rem;
  border-radius: 0.3rem 0.3rem 0 0;

  .t_title {
    width: 100%;
    height: 15%;
    font-size: 0.4546rem;
    margin-top: 0.2rem;

    span {
      font-weight: 800;
    }
  }

  .charts {
    width: 100%;
    height: 85%;
    display: flex;
    justify-content: space-between;
    margin-top: 0.6rem;
    > div {

    >div {
      width: 49%;
      height: 100%;
    }

    .t_ma {
      width: 100%;
      height: 0.3rem;
@@ -431,40 +575,49 @@
    }
  }
}

.ets {
  width: 100%;
  height: 0.5rem;
  display: flex;
  margin-top: 0.08rem;
  > div {

  >div {
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
  }

  .right_sell1 {
    justify-content: flex-end;
  }

  span {
    font-weight: 600;
  }
}

.left_s {
  color: #028f52;
}

.right_h {
  color: #d50000;
}

.ob_detail {
  width: 100%;
  height: 10rem;
  background: #fff;
  margin-bottom: 1.2821rem;
  margin-top: 0.3rem;

  .ob_content {
    width: 100%;
    height: 100%;
    padding: 0 0.3rem;

    .ob_title {
      width: 100%;
      height: 1rem;
@@ -472,17 +625,20 @@
      align-items: center;
      font-size: 0.5128rem;
    }

    .details {
      width: 100%;
      height: 1rem;
      display: flex;
      font-size: 0.3846rem;

      .left_details {
        width: 40%;
        height: 100%;
        display: flex;
        align-items: center;
      }

      .right_details {
        width: 60%;
        height: 100%;
@@ -493,6 +649,7 @@
    }
  }
}

.btns {
  width: 100%;
  height: 1.7rem;
@@ -502,37 +659,44 @@
  display: flex;
  align-items: center;
  justify-content: center;

  .lefts {
    width: 25%;
    height: 70%;
    display: flex;
    align-items: center;
    > div {

    >div {
      width: 50%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        width: 0.6rem;
        height: 0.6rem;
      }
    }
  }

  .rights {
    width: 70%;
    height: 70%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    > div {

    >div {
      border-radius: 0.15rem;
    }

    .buy_btn {
      width: 45%;
      height: 100%;
      background: rgb(225, 59, 69);
      color: #fff;

      .top_buy {
        width: 100%;
        height: 45%;
@@ -540,6 +704,7 @@
        justify-content: center;
        align-items: flex-end;
      }

      .bottom_buy {
        width: 100%;
        height: 55%;
@@ -550,11 +715,13 @@
        padding: 0.1rem 0 0 0;
      }
    }

    .sell_btn {
      width: 45%;
      height: 100%;
      background: rgb(68, 155, 84);
      color: #fff;

      .top_sell {
        width: 100%;
        height: 45%;
@@ -562,6 +729,7 @@
        justify-content: center;
        align-items: flex-end;
      }

      .bottom_sell {
        width: 100%;
        height: 55%;
@@ -574,6 +742,7 @@
    }
  }
}

.jianjie {
  width: 100%;
  height: 5rem;
@@ -582,45 +751,126 @@
  border-radius: 0.3rem 0.3rem 0 0;
  margin-bottom: 1.7rem;
  padding: 0 0.3rem;

  .top_jj {
    width: 100%;
    height: 1.3rem;
    display: flex;
    align-items: center;
    font-size: 0.4546rem;

    span {
      font-weight: 800;
    }
  }

  .jet {
    width: 100%;

    span {
      line-height: 0.5rem;
    }
  }
}
@-webkit-keyframes zy{ 
   10% { 
     transform: rotate(15deg); 
   } 
   20% { 
     transform: rotate(-10deg); 
   } 
   30% { 
     transform: rotate(5deg); 
   } 
   40% { 
     transform: rotate(-5deg); 
   } 
   50%,100% { 
     transform: rotate(0deg); 
   } 

  @-webkit-keyframes zy{
  10% {
    transform: rotate(15deg);
  }

  20% {
    transform: rotate(-10deg);
  }

  30% {
    transform: rotate(5deg);
  }

  40% {
    transform: rotate(-5deg);
  }

  50%,
  100% {
    transform: rotate(0deg);
  }
}

.isjj {
  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 .15s linear infinite;
  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>