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
| <template>
| <div class="contact-futrue box-show">
| <div class="font-24 text-grey mb-24">{{ $t("交割时间") }}</div>
| <ul class="flex flex-wrap w-full">
| <li
| v-for="(item, index) in initFutrue.para"
| :key="item.para_id"
| class="h-92 flex items-center mb-22 justify-center flex-col"
| @click="onSelect(item, index)"
| >
| <p
| class="w-125 h-full flex justify-center items-center font-22 flex-1 mr-10 ml-10"
| :class="
| active === item.para_id
| ? 'bg-light-blue text-white'
| : 'bgDark textColor'
| "
| >
| {{ item.time_num + item.time_unit.substr(0, 1) }}
| </p>
| <p
| class="w-125 h-full flex justify-center items-center font-22 flex-1 mr-10 ml-10"
| :class="
| active === item.para_id
| ? 'bg-dark-blue text-white'
| : 'contBackground textColor'
| "
| >
| {{ item.profit_ratio }}%
| </p>
| </li>
| </ul>
| </div>
| </template>
|
| <script>
| export default {
| name: "ContractFutrue",
| props: {
| initFutrue: {
| type: Object,
| default() {
| return {};
| },
| },
| },
| data() {
| return {
| active: "",
| initParam: [], // 初始化参数
| };
| },
| created() {
| this.active =
| this.initFutrue && this.initFutrue.para
| ? this.initFutrue.para[0].para_id
| : "";
| this.$emit("paraId", { id: this.active, index: 0 });
| },
| methods: {
| onSelect(item, index) {
| // 选中
| this.active = item.para_id;
| this.$emit("paraId", { id: this.active, index });
| },
| },
| };
| </script>
| <style scoped lang="scss">
| .bgDark {
| @include themify() {
| background: themed("tab_background2");
| }
| }
|
| .bg-light-blue {
| background: #1d91ff;
| }
|
| .bg-dark-blue {
| background: #1255a3;
| }
| </style>
|
|
