<template>
|
<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>
|
<div class="b_t">
|
<span>{{ kLineDetails.code }}</span>
|
</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>
|
</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>
|
</div>
|
<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>
|
</div>
|
</div>
|
</div>
|
<div class="right_ets">
|
<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>
|
</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>
|
</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>
|
</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>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="k_line_detail">
|
<Kline />
|
</div>
|
<div class="priect_top_bottom">
|
<div class="t_title">
|
<span>{{ '五档' }}</span>
|
</div>
|
<div class="charts">
|
<div class="left_s">
|
<div class="t_ma">
|
<span>{{ '买' }}</span>
|
</div>
|
<div class="ets">
|
<div class="left_sell1">
|
<span>{{ singDetails.sell1 }}</span>
|
</div>
|
<div class="right_sell1">
|
<span>{{ singDetails.sell1_num }}</span>
|
</div>
|
</div>
|
<div class="ets">
|
<div class="left_sell1">
|
<span>{{ singDetails.sell2 }}</span>
|
</div>
|
<div class="right_sell1">
|
<span>{{ singDetails.sell2_num }}</span>
|
</div>
|
</div>
|
<div class="ets">
|
<div class="left_sell1">
|
<span>{{ singDetails.sell3 }}</span>
|
</div>
|
<div class="right_sell1">
|
<span>{{ singDetails.sell3_num }}</span>
|
</div>
|
</div>
|
<div class="ets">
|
<div class="left_sell1">
|
<span>{{ singDetails.sell4 }}</span>
|
</div>
|
<div class="right_sell1">
|
<span>{{ singDetails.sell4_num }}</span>
|
</div>
|
</div>
|
<div class="ets">
|
<div class="left_sell1">
|
<span>{{ singDetails.sell5 }}</span>
|
</div>
|
<div class="right_sell1">
|
<span>{{ singDetails.sell5_num }}</span>
|
</div>
|
</div>
|
</div>
|
<div class="right_h">
|
<div class="t_ma">
|
<span>{{ '卖' }}</span>
|
</div>
|
<div class="ets">
|
<div class="left_sell1">
|
<span>{{ singDetails.buy1 }}</span>
|
</div>
|
<div class="right_sell1">
|
<span>{{ singDetails.buy1_num }}</span>
|
</div>
|
</div>
|
<div class="ets">
|
<div class="left_sell1">
|
<span>{{ singDetails.buy2 }}</span>
|
</div>
|
<div class="right_sell1">
|
<span>{{ singDetails.buy2_num }}</span>
|
</div>
|
</div>
|
<div class="ets">
|
<div class="left_sell1">
|
<span>{{ singDetails.buy3 }}</span>
|
</div>
|
<div class="right_sell1">
|
<span>{{ singDetails.buy3_num }}</span>
|
</div>
|
</div>
|
<div class="ets">
|
<div class="left_sell1">
|
<span>{{ singDetails.buy4 }}</span>
|
</div>
|
<div class="right_sell1">
|
<span>{{ singDetails.buy4_num }}</span>
|
</div>
|
</div>
|
<div class="ets">
|
<div class="left_sell1">
|
<span>{{ singDetails.buy5 }}</span>
|
</div>
|
<div class="right_sell1">
|
<span>{{ singDetails.buy5_num }}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="jianjie" :class="acseFlag ? 'isjj' : ''">
|
<div class="top_jj">
|
<span>{{ '简介' }}</span>
|
</div>
|
<div class="jet">
|
<span>国家体育总局等八部门日前共同印发了《户外运动产业发展规划(2022-2025年)》。《规划》提出，到2025年，户外运动产业高质量发展成效显著，基本形成供给与需求有效对接、产业与生态协调发展、产品与服务品牌彰显、业态与模式持续创新的发展格局。户外运动场地设施持续增加，普及程度大幅提升，参与人数不断增长，户外运动产业总规模超过3万亿元。</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" />
|
<img src="../../assets/img/shoucangle.png" alt v-else />
|
</div>
|
<div class="right_xx" @click="handleJj()">
|
<img src="../../assets/img/xiaoxi.png" alt />
|
</div>
|
</div>
|
<div class="rights">
|
<div class="buy_btn">
|
<div class="top_buy">
|
<span>{{ '卖出' }}</span>
|
</div>
|
<div class="bottom_buy">
|
<span>{{ '145.533' }}</span>
|
</div>
|
</div>
|
<div class="sell_btn">
|
<div class="top_sell">
|
<span>{{ '买入' }}</span>
|
</div>
|
<div class="bottom_sell">
|
<span>{{ '145.533' }}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import Kline from "./components/kLine.vue";
|
import * as api from "@/axios/api";
|
|
export default {
|
name: "kline",
|
data() {
|
return {
|
kLineDetails: {}, // K线图详情数据
|
singDetails: {},
|
scFlag: false,
|
acseFlag: false
|
};
|
},
|
components: {
|
Kline
|
},
|
created() {
|
const { query } = this.$route;
|
this.kLineDetails = query;
|
// this.$Lazyload();
|
this.getSingDetails();
|
},
|
methods: {
|
async getSingDetails() {
|
let opts = {
|
code: this.kLineDetails.code,
|
stockType: this.kLineDetails.type
|
};
|
await api.getSingleStock(opts).then(res => {
|
if (res.status === 0) {
|
this.singDetails = res.data;
|
console.log(this.singDetails);
|
}
|
});
|
},
|
handleJj() {
|
this.acseFlag = true;
|
setTimeout(() => {
|
this.acseFlag = false;
|
}, 1000);
|
},
|
handleBack() {
|
this.$router.go(-1);
|
},
|
handleSc() {
|
this.scFlag = !this.scFlag;
|
}
|
}
|
};
|
</script>
|
|
<style scoped lang="less">
|
.kline_detail_page {
|
width: 100%;
|
height: calc(100% - 1.7rem);
|
overflow: auto;
|
> .content {
|
width: 100%;
|
height: 100%;
|
position: relative;
|
}
|
}
|
.detail_title {
|
width: 100%;
|
height: 3.2rem;
|
padding: 0 0.3rem;
|
background: #fff;
|
.top_back {
|
width: 100%;
|
height: 1.2rem;
|
display: flex;
|
align-items: center;
|
.left_back {
|
width: 0.8rem;
|
height: 80%;
|
display: flex;
|
align-items: center;
|
> 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%;
|
font-size: 0.3615rem;
|
display: flex;
|
align-items: flex-start;
|
color: #8c8c8c;
|
}
|
}
|
}
|
}
|
.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%;
|
font-size: 0.741rem;
|
display: flex;
|
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 {
|
width: 100%;
|
height: 50%;
|
display: flex;
|
> div {
|
width: 50%;
|
height: 100%;
|
display: flex;
|
justify-content: space-between;
|
padding: 0 0.1rem;
|
}
|
}
|
}
|
}
|
.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;
|
border-bottom: 0.02rem solid rgb(235, 235, 235);
|
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 {
|
width: 49%;
|
height: 100%;
|
}
|
.t_ma {
|
width: 100%;
|
height: 0.3rem;
|
color: rgb(0, 0, 0);
|
display: flex;
|
font-size: 0.3046rem;
|
}
|
}
|
}
|
.ets {
|
width: 100%;
|
height: 0.5rem;
|
display: flex;
|
margin-top: 0.08rem;
|
> 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;
|
display: flex;
|
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%;
|
display: flex;
|
justify-content: flex-end;
|
align-items: center;
|
}
|
}
|
}
|
}
|
.btns {
|
width: 100%;
|
height: 1.7rem;
|
position: fixed;
|
bottom: 0;
|
background: #fff;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
.lefts {
|
width: 25%;
|
height: 70%;
|
display: flex;
|
align-items: center;
|
> 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 {
|
border-radius: 0.15rem;
|
}
|
.buy_btn {
|
width: 45%;
|
height: 100%;
|
background: rgb(225, 59, 69);
|
color: #fff;
|
.top_buy {
|
width: 100%;
|
height: 45%;
|
display: flex;
|
justify-content: center;
|
align-items: flex-end;
|
}
|
.bottom_buy {
|
width: 100%;
|
height: 55%;
|
display: flex;
|
justify-content: center;
|
align-items: flex-start;
|
font-size: 0.4015rem;
|
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%;
|
display: flex;
|
justify-content: center;
|
align-items: flex-end;
|
}
|
.bottom_sell {
|
width: 100%;
|
height: 55%;
|
display: flex;
|
justify-content: center;
|
align-items: flex-start;
|
padding: 0.1rem 0 0 0;
|
font-size: 0.4015rem;
|
}
|
}
|
}
|
}
|
.jianjie {
|
width: 100%;
|
height: 5rem;
|
background: rgb(255, 255, 255);
|
margin-top: 0.2rem;
|
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);
|
}
|
}
|
|
.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;
|
}
|
</style>
|
