完成服务介绍页

src/router/index.js

@@ -161,6 +161,17 @@ const routes=[
           hasBack:true
         },
       },
+      {
+        path: "ficcserveintro",
+        name: "FiccServeIntro",
+        component: () => import("@/views/report/FiccIntroduce.vue"),
+        meta: {
+          title: "FICC服务介绍",
+          keepAlive:false,
+          isRoot:false,
+          hasBack:true
+        },
+      },
     ]
   },
   {

src/views/report/Classify.vue

@@ -52,7 +52,7 @@ const goNext=(item)=>{
 </script>
 <template>
     <div class="report-classify-page">
-        <img :src="$store.state.globalImgUrls.ficcServiceImg" alt=""  class="top-banner">
+        <img :src="$store.state.globalImgUrls.ficcServiceImg" alt=""  class="top-banner" @click="$router.push('/report/ficcserveintro')">
         <div class="list-wrap">
             <el-row :gutter="20">
                 <el-col :span="6" v-for="item in list" :key="item.classify_name_first">

src/views/report/FiccIntroduce.vue

@@ -0,0 +1,146 @@
+<script setup>
+import {ref} from 'vue'
+
+let table=ref([
+    [{name:'每日经济数据备忘录'},{name:'研究报告'},{name:'每日早晨发送'}],
+    [{name:'FICC晨报'},{name:'研究报告'},{name:'每日早晨发送'}],
+    [{name:'每日宏观及商品复盘'},{name:'研究报告'},{name:'每日收盘后发送'}],
+    [{name:'宏观数据及商品库存点评'},{name:'研究报告'},{name:'数据发布后的及时点评'}],
+    [{name:'FICC全品种周报'},{name:'研究报告'},{name:'每周周日发送'}],
+    [{name:'商品品种双周报'},{name:'研究报告'},{name:'每两周发送'}],
+    [{name:'宏观深度月报'},{name:'研究报告'},{name:'每月发送'}],
+    [{name:'电话讨论会'},{name:'电话拨入'},{name:'每周/每两周/每月'}],
+    [{name:'不定期沙龙'},{name:'线下沙龙'},{name:'根据时事主题多次开办'}],
+    [{name:'年度策略'},{name:'年度策略会议'},{name:'根据时事主题多次开办'}],
+    [{name:'分析师1v1（VIP）',color:'#F3A52F'},{name:'多种形式',color:'#F3A52F'},{name:'即时服务',color:'#F3A52F'}],
+    [{name:'上门路演服务（VIP）',color:'#F3A52F'},{name:'上门路演',color:'#F3A52F'},{name:'提前预约',color:'#F3A52F'}],
+    [{name:'FICC咨询服务（VIP）',color:'#F3A52F'},{name:'多种形式',color:'#F3A52F'},{name:'即时服务',color:'#F3A52F'}],
+])
+
+let userList=ref([
+    {
+        name:'王沛',
+        title1:'弘则研究创始人',
+        title2:'首席宏观分析师',
+        avatar:new URL('../../assets/ficcServerIntro/王沛.png', import.meta.url).href
+    },
+    {
+        name:'施琪',
+        title1:'研究总监&合伙人',
+        title2:'英国约克大学博士',
+        avatar:new URL('../../assets/ficcServerIntro/施琪.png', import.meta.url).href
+    },
+    {
+        name:'苏畅',
+        title1:'首席经济学家',
+        title2:'美国波士顿大学博士',
+        avatar:new URL('../../assets/ficcServerIntro/苏畅.png', import.meta.url).href
+    },
+    {
+        name:'戚明之',
+        title1:'化工组组长',
+        title2:'中国科学院硕士',
+        avatar:new URL('../../assets/ficcServerIntro/戚明之.png', import.meta.url).href
+    },
+    {
+        name:'章左昊',
+        title1:'宏观组组长',
+        title2:'日本东北大学数学硕士',
+        avatar:new URL('../../assets/ficcServerIntro/章左昊.png', import.meta.url).href
+    },
+    {
+        name:'黄溢',
+        title1:'宏观高级分析师',
+        title2:'上海交通大学硕士',
+        avatar:new URL('../../assets/ficcServerIntro/黄溢.png', import.meta.url).href
+    },
+    {
+        name:'魏忻悦',
+        title1:'黑色组组长',
+        title2:'复旦大学硕士',
+        avatar:new URL('../../assets/ficcServerIntro/魏忻悦.png', import.meta.url).href
+    },
+    {
+        name:'钱鹏',
+        title1:'有色组组长',
+        title2:'华东理工大学学士',
+        avatar:new URL('../../assets/ficcServerIntro/钱鹏.png', import.meta.url).href
+    },
+])
+</script>
+
+<template>
+    <div class="ficc-server-introduce">
+        <img class="top-img" src="@/assets/ficcServerIntro/top-img.png" alt="">
+        <p style="text-align:center;color: #F3A52F;font-size: 14px;">COMPANY PROFILE</p>
+        <p style="text-align:center;font-size: 18px;font-weight: bold;">公司介绍</p>
+        <p style="font-size: 14px;line-height: 28px;">弘则研究是中国资本市场最优秀的独立研究机构，以研究为内核，为国内及海外的机构投资者提供宏观经济、大类资产、新兴行业及公司分析 和投资策略服务。</p>
+        <p style="font-size: 14px;line-height: 28px;">公司本着独立客观，踏实前瞻的研究态度，主要服务于专业的机构投资者、企业、交易所和政府等非盈利组织。弘则研究的公募基金客户群体覆 盖了国内位居前五十位的基金公司。弘则也为大型央企和优秀民营企业提供研究咨询服务，包括有色、化工、煤炭、钢铁多个品种的全国最大贸易商和厂商。</p>
+        <p style="font-size: 14px;line-height: 28px;">公司核心团队拥有优异的教育背景以及平均8年以上的金融研究或行业经验，并曾在目前市场上有影响力的投资咨询机构担任核心业务或管理职位。现有200余人的团队，总部位于上海，现有美国、新加坡、深圳、北京、杭州、无锡办公室。</p>
+        <p  style="text-align:center;color: #F3A52F;font-size: 14px;margin-top: 80px;">PRODUCT INTRODUCTION</p>
+        <p style="text-align:center;font-size: 18px;font-weight: bold;margin-bottom: 20px;">产品介绍</p>
+        <table>
+            <tr>
+                <td style="border-color: #F3A52F;color: #F3A52F;font-weight: bold;">服务内容</td>
+                <td style="border-color: #F3A52F;color: #F3A52F;font-weight: bold;">服务形式</td>
+                <td style="border-color: #F3A52F;color: #F3A52F;font-weight: bold;">服务次数</td>
+            </tr>
+            <tr v-for="item in table">
+                <td v-for="_item in item" :style="{color:_item.color}">{{_item.name}}</td>
+            </tr>
+        </table>
+        <p  style="text-align:center;color: #F3A52F;font-size: 14px;margin-top: 80px;">RESEARCHER INTRODUCTION</p>
+        <p style="text-align:center;font-size: 18px;font-weight: bold;">主要研究员介绍</p>
+        <div class="flex user-wrap">
+            <div class="item" v-for="item in userList" :key="item.name">
+                <img :src="item.avatar" alt="">
+                <div style="margin: 10px 0 5px 0;font-weight: bold;">{{item.name}}</div>
+                <div>{{item.title1}}</div>
+                <div>{{item.title2}}</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.ficc-server-introduce{
+    .top-img{
+        width: 100%;
+        display: block;
+        margin-bottom: 50px;
+    }
+    p{
+        margin: 10px 0;
+    }
+    
+    table{
+        width: 100%;
+        border-spacing: 0;
+        border-collapse: collapse;
+        td{
+            text-align: center;
+            border: 1px solid #E6E6E6;
+            padding: 14px 10px 16px 10px;
+            font-size: 14px;
+        }
+    }
+
+    .user-wrap{
+        width: 100%;
+        flex-wrap: wrap;
+        .item{
+            width: 25%;
+            text-align: center;
+            font-size: 14px;
+            margin-bottom: 60px;
+            img{
+                width: 84px;
+                height: 84px;
+                object-fit: cover;
+                border-radius: 50%;
+            }
+        }
+    }
+}
+
+</style>