学习日记--股票输赢统计div

1.效果图

2.代码

<template>
  <div class="businessNow klineContent">
    <div class="title_tips">
        <span class="title">{{currency1}}/{{currency2}}</span>
        <span>{{Number(symbolDetail.newPrice).toFixed(6)}}  <i>≈
            <!-- {{rateNum}} -->
            {{Number(symbolDetail.currencyExUsdt).toFixed(6)}}USD
            </i> </span>
        <span>
            <i>{{$t('contain.Rise')}}</i>
            <i v-if="symbolDetail.increase && symbolDetail.increase == 0">{{symbolDetail.increase}}</i>
            <i class="out" v-else-if="symbolDetail.increase && !(symbolDetail.increase).indexOf('+')">{{symbolDetail.increase}}</i>
            <i class="in" v-else-if="symbolDetail.increase && !(symbolDetail.increase).indexOf('-')">{{symbolDetail.increase}}</i>
        </span>
        <span> </span>
        <span>{{$t('contain.Lowest')}} {{symbolDetail.lowPrice}}</span>
        <span>{{$t('contain.MainSector')}} {{Number(symbolDetail.vol) ? Number(symbolDetail.vol).toFixed(6) : symbolDetail.vol}} {{currency1}}</span>
    </div>
    <div class="table_header">
        <span class="timeList">
            <i  @click="checkTime(item)" v-for="item in KlineList" :key="'KlineList'+item.id" :class="item.id == this_time ? 'this_time' : ''">{{item.name}}</i>
        </span>
    </div>
    <!-- <el-collapse v-model="activeNames"> -->
      <!-- <el-collapse-item name="1"> -->
        <div >
            <TVChartContainer class="Kline" v-if="showKline" :timeText = 'this_time_text'></TVChartContainer>
        </div>
      <!-- </el-collapse-item> -->
    <!-- </el-collapse> -->
  </div>
</template>
 
 
<script>
  import TVChartContainer from '@/components/TVChartContainer'
  import {
    getToken
  } from '@/utils/auth'
  export default {
    props:['symbolDetail','ratePrice'],
    name: 'Kline',
    components:{TVChartContainer},
    data(){
        return{
            activeNames:['1'],
            currency1:'',
            currency2:'',
            rateType:'',
            rateNum:'',
            showKline:true,
            this_time:'1',
            this_time_text:'1min',
            KlineList:[
                {id:1,name:'1min'},
                {id:2,name:'5min'},
                {id:3,name:'15min'},
                {id:4,name:'30min'},
                {id:5,name:'1hour'},
                {id:6,name:'6hour'},
                {id:7,name:'12hour'},
                {id:8,name:'1day'},
                {id:9,name:'1week'},
            ]
        }
    },
    mounted(){
        var theString = this.$route.query.symbol;
        this.currency1 = theString.split("-")[0];
        this.currency2 = theString.split("-")[1];
        this.rateType = getToken("RATE");
        // console.log(this.symbolDetail.highPrice,this.ratePrice);
        if(this.symbolDetail.highPrice){
            this.rateNum = Number(this.symbolDetail.highPrice*this.ratePrice).toFixed(6);
        }
    },
    watch:{
        $route(){
            var theString = this.$route.query.symbol;
            this.currency1 = theString.split("-")[0]
            this.currency2 = theString.split("-")[1];
            // console.log(this.currency1 , this.currency1)
        },
        symbolDetail(val){
            if(this.symbolDetail.highPrice){
                this.rateNum = Number(this.symbolDetail.highPrice*this.ratePrice).toFixed(6);
            }
            // console.log(val)
        }
    },
    methods:{
        checkTime(item){
            this.this_time = item.id;
            this.this_time_text =  item.name;
            this.showKline = false
             this.$nextTick(() => {
             this.showKline = true
            })
        }
    }
  }
 
</script>
 
<style scoped>
    .businessNow{
        background-color: #4c5070;
        position: relative;
        background-color: #1d2a30;
    }
    .klineContent{
        margin: 0;
        /* border-left: 1px solid #000;
        border-right: 1px solid #000; */
        min-width: 630px;
    }
    .title_tips{
        font-size: 12px;
        color: #cbd7f0;
        height: 50px;
        line-height: 50px;
        display: flex;
        align-items: center;
        background-color: #283b43;
        padding-left: 10px;
    }
    .title_tips span{
        margin-right: 10px;
    }
    .title_tips span i{
        color: #666b93;
        font-style: normal;
    }
     .klineContent .in{
        color: rgb(72, 185, 153);
    }
     .klineContent .out{
        color: #d64172;
    }
    .title_tips .title{
        font-size: 20px;
        font-weight: bold;
        color: #cbd7f0;
    }
    .table_header{
        text-align: left;
        padding-top: 10px;
 
    }
    .timeList{
        /* float: left; */
        padding:0 10px;
    }
    .timeList i{
        font-style: normal;
        color: #666b93;
        margin: 0 5px;
        padding: 2px 4px;
    }
    .timeList .this_time{
        background-color: #1e2237;
        color: #2f75df;
    }
    .timeList i:hover{
        cursor: pointer;
 
    }
</style>
<style>
   .businessNow .el-collapse-item__arrow{
       float: left;
        margin-left: 10px
   }
    .klineContent .el-collapse-item__header{
        text-align: left;
        background-color: #1b1d2f;
        color:#cbd7f0;
        border-bottom: none;
 
    }
    .businessNow .el-collapse{
        border:none;
    }
    .businessNow .el-collapse-item__content{
        background-color: #1d2a30;
    }
    .businessNow .el-collapse-item__wrap{
       border:none;
    }
    .businessNow .el-collapse-item__content{
        padding-bottom :0;
    }
    .businessNow .is-horizontal {
    display: none;
    }
 
    .businessNow .el-scrollbar__wrap {
        overflow:auto;
    }
</style>