1

PC-20250623MANY\Administrator

2025-07-22 beff59e6065d3283cc9fb10fe7151f2b757cd154

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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!-- 学习外汇-->
<template>
  <div>
    <pc-section class="index-section1 py-12">
      <h2 class="mb-4">{{ t("m5-wh-i-s0-t1") }}</h2>
      <h5>{{ t("m5-wh-i-s0-d1") }}</h5>
    </pc-section>
    <menu-layout :collapseList="menu5List">
      <template v-slot:content>
        <div class="grid grid-cols-2 gap-x-4 mb-12">
          <div
            class="card-wrapper"
            v-for="(_, i) in list10"
            :key="i"
            @click="gotoPage(_.url)"
          >
            <img :src="getUrl(i)" width="416" height="180" />
            <div class="p-8 text-left">
              <span class="green-tag">{{ t("Beginner") }}</span>
              <h4 class="fw-400 mb-4">{{ t(`m5-wh-i-${i + 2}-t1`) }}</h4>
              <h6 class="mb-4">{{ t(`m5-wh-i-${i + 2}-d1`) }}</h6>
              <h5 class="cursor-pointer">
                <a>{{ t("m5-i-s1-b1") }}</a>
              </h5>
            </div>
          </div>
        </div>
      </template>
    </menu-layout>
  </div>
</template>
 
<script setup>
import { useRoute, useRouter } from "vue-router";
import { useI18n } from "vue-i18n";
import { getImageUrl } from "@/utils";
import { menu5List } from "@/utils/path";
 
const router = useRouter();
const { t } = useI18n();
 
const list10 = [
  // {
  //   url: "/market-analysis/what-will-take-gold",
  // },
  {
    url: "/education/learn-forex/what-is-pip-value",
  },
  {
    url: "/education/learn-forex/risk-management",
  },
  {
    url: "/education/learn-forex/trend-lines",
  },
 
  {
    url: "/education/learn-forex/what-is-swap-in-forex",
  },
  {
    url: "/education/learn-forex/technical-indicators",
  },
 
  {
    url: "/education/learn-forex/how-forex-works",
  },
  {
    url: "/education/learn-forex/technical-analysis",
  },
 
  {
    url: "/education/learn-forex/trading-other-instruments",
  },
  {
    url: "/education/learn-forex/fundamental-analysis",
  },
  {
    url: "/education/learn-forex/10-trading-terms",
  },
];
const getUrl = (i) => {
  if (i == 0) {
    return getImageUrl(`/src/assets/forexImages/menu5/learnForex/h1.png`);
  }
  if (i == 3) {
    return getImageUrl(`/src/assets/forexImages/menu5/learnForex/h2.png`);
  }
 
  if (i == 5) {
    return getImageUrl(`/src/assets/forexImages/menu5/h1.png`);
  }
  if (i == 6) {
    return getImageUrl(`/src/assets/forexImages/menu5/h2.png`);
  }
 
  if (i == 7 || i == 4) {
    return getImageUrl(`/src/assets/forexImages/menu5/h3.png`);
  }
  if (i == 11 || i == 9) {
    return getImageUrl(`/src/assets/forexImages/menu5/learnForex/h2.png`);
  }
  return getImageUrl(`/src/assets/forexImages/menu5/learnForex/h3.png`);
};
 
const gotoPage = (path) => {
  router.push(path);
};
</script>
<style lang="scss" scoped>
.green-tag {
  background: #9bdfce;
  border-radius: 2px;
  padding: 4px 12px;
  display: inline-block;
  margin-bottom: 24px;
}
.card-wrapper {
  box-shadow: 0px 2px 8px 4px rgba(0, 0, 0, 0.05);
}
 
.fw-400 {
  font-weight: 400;
}
</style>