<!-- menu2入口 -->
|
<template>
|
<div>
|
<pc-section class="section1" innerclass="flex">
|
<div class="flex1 pt-12 px-24">
|
<h1 class="text-4xl mb-4">{{ t("m2-index-s1-t1") }}</h1>
|
<h5 class="w-532">{{ t("m2-index-s1-d1") }}</h5>
|
</div>
|
<div class="flex1 text-left">
|
<img src="@/assets/forexImages/menu2/image0.png" width="665" height="296" />
|
</div>
|
</pc-section>
|
<!-- 导航 -->
|
<pc-section>
|
<navigator></navigator>
|
</pc-section>
|
<!-- 可用工具 -->
|
<pc-section class="px-48 py-12" innerclass="text-center">
|
<h2 class="mb-4">{{ t("m2-index-s2-t1") }}</h2>
|
<h5 class="mb-12">{{ t("m2-index-s2-d1") }}</h5>
|
<div class="flex flex-wrap justify-center" style="width: 1000px;margin:auto;">
|
<card-why v-for="(item, index) in list4" :index="index + 1" :key="index"
|
:desc="`${t(`m2-index-s2-${index + 1}-d1`)}`" :title="`${t(`m2-index-s2-${index + 1}-t1`)}`" :imgPath="false">
|
</card-why>
|
</div>
|
</pc-section>
|
<!-- 掉期、点差和佣金 -->
|
<pc-section class="section3" innerclass="flex">
|
<div class="flex1 text-right">
|
<img src="@/assets/forexImages/menu2/image1.png" width="711" height="408" />
|
</div>
|
<div class="flex flex-col justify-center pl-8">
|
<h1 class="mb-4 text-white">{{ t("m2-index-s3-t1") }}</h1>
|
<h5 class="mb-4 text-white">{{ t("m2-index-s3-d1") }}</h5>
|
<div>
|
<el-button class="gray-large-btn mt-4">{{
|
t("m2-index-s3-b1")
|
}}</el-button>
|
</div>
|
</div>
|
</pc-section>
|
<pc-section class="section4 py-20" innerclass="text-center">
|
<h2 class="mb-4">{{ t("m2-index-s4-t1") }}</h2>
|
<h5>{{ t("m2-index-s4-d1") }}</h5>
|
<div class="flex justify-center mt-4">
|
<div class="section4-w mr-12">
|
<h3 class="mb-4">{{ t("m2-index-s4-1-t1") }}</h3>
|
<h5>{{ t("m2-index-s4-1-d1") }}</h5>
|
</div>
|
<div class="section4-w">
|
<h3 class="text-4xl mb-4">{{ t("m2-index-s4-2-t1") }}</h3>
|
<h5>{{ t("m2-index-s4-2-d1") }}</h5>
|
</div>
|
</div>
|
<el-button class="gray-large-btn mt-8">{{
|
t("m2-index-s4-b1")
|
}}</el-button>
|
</pc-section>
|
<pc-section class="section5 py-20" innerclass="flex justify-center">
|
<div class="mr-12">
|
<h2>{{ t("m2-index-s5-t1") }}</h2>
|
<h5 class="w-460">{{ t("m2-index-s5-d1") }}</h5>
|
<el-button class="white-middle-link-btn mt-8">{{
|
t("learn-more-info")
|
}}</el-button>
|
</div>
|
<img src="@/assets/forexImages/menu2/image2.png" width="620" height="258" />
|
</pc-section>
|
|
<pc-section class="section6" innerclass="flex">
|
<img src="@/assets/forexImages/menu2/image3.png" width="620" height="322" />
|
<div class="pl-16">
|
<h2 class="mb-4 mt-12">{{ t("m2-index-s6-t1") }}</h2>
|
<p>{{ t("m2-index-s6-d1") }}</p>
|
<el-button class="gray-middle-btn mt-4">{{
|
t("learn-more-info")
|
}}</el-button>
|
</div>
|
</pc-section>
|
<ready :needBg="true"></ready>
|
</div>
|
</template>
|
|
<script setup>
|
import { useRoute, useRouter } from "vue-router";
|
import { useI18n } from "vue-i18n";
|
import pcSection from "@comForex/pcSection.vue";
|
import cardWhy from "@comForex/cardCommon.vue";
|
import ready from "@comForex/ready.vue";
|
import navigator from "@comForex/navigator.vue";
|
const list4 = Array(4);
|
const route = useRoute();
|
const { t } = useI18n();
|
</script>
|
<style lang="scss" scoped>
|
.section1,
|
.section4,
|
.section6 {
|
background: #f2f4f6;
|
}
|
|
.section7 {
|
background: #192989;
|
height: 330px;
|
}
|
|
.section4-w {
|
width: 320px;
|
}
|
|
.section3 {
|
background: #192989;
|
}
|
|
// 公用
|
.w-460 {
|
width: 460px;
|
}
|
|
.w-532 {
|
width: 532px;
|
}
|
</style>
|
