1

李凌

2025-10-17 1927f50d962dfe4478fda88b88b5cf83061036e2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<template>
    <div class="trade-head mt-20">
        <!-- <div class="flex justify-start items-center">
            <div class="left_icon text-center mr-15">CR</div>
            <div class="title font-bold flex-1 flex justify-start items-center">
                <span class="mr-15">{{ symbolObj.name }}</span>
                <img class="down_icon" src="@/assets/image/down.png" alt="">
            </div>
            <div class="icons flex justify-center items-center">
                <img class="down_icon" src="@/assets/imgs/trade/icon1.png" alt="">
                <img class="down_icon ml-30" src="@/assets/imgs/trade/icon2.png" alt="">
                <img class="down_icon ml-30" src="@/assets/imgs/trade/icon3.png" alt="">
            </div>
        </div> -->
 
        <div class="flex justify-between items-center mt-30">
            <div style="width:46%">
                <p class="text-green font-bold font-60">{{ symbolObj.close }}</p>
                <p class="font-24 mt-10">
                    <!-- ≈ 101,701.7 -->
                    <span :class="symbolObj.change_ratio < 0 ? 'text-red' : 'text-green'">
                        {{ symbolObj.change_ratio < 0 ? '' : '+' }} {{ symbolObj.change_ratio }}% </span>
                </p>
            </div>
 
            <div class="flex-1">
                <div class="flex justify-between items-center head_item">
                    <span>{{ $t('24h最高价') }}</span>
                    <span>{{ symbolObj.high }}</span>
                </div>
                <div class="flex justify-between items-center head_item">
                    <span>{{ $t('24h最低价') }}</span>
                    <span>{{ symbolObj.low }}</span>
                </div>
                <div class="flex justify-between items-center head_item">
                    <span>{{ $t('24h成交额') }}</span>
                    <span>{{ symbolObj.amount }}</span>
                </div>
            </div>
        </div>
    </div>
</template>
 
<script>
export default {
    name: "tradeHead",
    props: {
        symbolObj: {
            type: Object,
            required: true
        }
    }
}
 
</script>
 
<style lang="scss" scoped>
.trade-head {
    .left_icon {
        width: 3.2rem;
        height: 2.2rem;
        line-height: 2.2rem;
        background-color: #fdf0cc;
        color: #f7b600;
        border-radius: 0.2rem;
        font-size: 1.6rem;
    }
 
    .title {
        color: $log-c;
        font-size: 2.4rem;
    }
 
    .down_icon {
        width: 2.1rem;
    }
 
    .icons {
        img {
            width: 2.8rem;
        }
    }
 
    .head_item {
        font-size: 1.4rem;
        line-height: 2.2rem;
 
        &>span:first-child {
            color: #9a9999;
        }
    }
}
</style>