研报首页

src/layout/Index.vue

@@ -41,9 +41,9 @@ store.state.audioData.INS=globalAudioIns
         <el-main style="padding-left:180px">
           <router-view v-slot="{ Component }">
               <keep-alive>
-                  <component :is="Component" v-if="$route.meta.keepAlive" />
+                  <component :is="Component" :key="$route.name" v-if="$route.meta.keepAlive" />
               </keep-alive>
-              <component :is="Component" v-if="!$route.meta.keepAlive" />
+              <component :is="Component" :key="$route.name" v-if="!$route.meta.keepAlive" />
           </router-view>
         </el-main>
         </el-container>

src/router/index.js

@@ -67,12 +67,34 @@ const routes=[
   {
     path:'/report',
     name:'Report',
-    redirect: '/report/detail',
+    redirect: '/report/list',
     component: () => import("@/layout/Index.vue"),
     meta: {
-      title:"报告"
+      title:"研报"
     },
-    children:[]
+    children:[
+      {
+        path: "list",
+        name: "ReportList",
+        component: () => import("@/views/report/List.vue"),
+        meta: {
+          title: "研报首页",
+          keepAlive:true,
+          isRoot:true
+        },
+      },
+      {
+        path: "classify",
+        name: "ReportClassify",
+        component: () => import("@/views/report/Classify.vue"),
+        meta: {
+          title: "研报分类",
+          keepAlive:true,
+          isRoot:false,
+          hasBack:true
+        },
+      },
+    ]
   },
   {
     path: "/apply",

src/views/report/Classify.vue

@@ -0,0 +1,14 @@
+<script setup>
+
+</script>
+<template>
+    <div>
+        研报分类页
+    </div>
+</template>
+
+
+
+<style lang="scss" scoped>
+
+</style>

src/views/report/List.vue

@@ -0,0 +1,331 @@
+<script setup>
+import { computed, onMounted, ref } from "vue";
+import { varietyData, informationData, reportData } from "./staticData.js";
+import { useRouter } from "vue-router";
+
+let report = ref(null); //报告页面的dom
+let icon_more_path = new URL("../../assets/icon-more.png", import.meta.url)
+  .href; //查看更多的icon
+let activeTab = ref("宏观经济"); //默认激活的nav
+let activeSubTab = ref("宏观"); //默认激活的subnav
+let varietySubData = computed(() => {
+  //subnav
+  return varietyData.find((i) => i.label === activeTab.value).child;
+});
+let showMore = false; //是否展示加载更多按钮
+const checkMore = () => {
+  //检查reportData长度是否超过el-main的clientHeight
+  //reportData-item的minHeight为(125*childNum+56)
+};
+const router = useRouter();
+const toClassPage = () => {
+  //跳转至研报分类页
+  router.push({ name: "ReportClassify" });
+};
+const changeTab = (className, item) => {
+  if (className === "main") {
+    activeTab.value = item.label;
+    activeSubTab.value = item.child[0].label;
+  } else {
+    activeSubTab.value = item.label;
+  }
+};
+onMounted(() => {});
+</script>
+<template>
+  <div class="report-list-page" ref="report">
+    <div class="report-main">
+      <div class="nav-wrap">
+        <div class="main-nav">
+          <div
+            class="main-nav-item"
+            :class="{ active: activeTab === item.label }"
+            v-for="item in varietyData"
+            :key="item.label"
+            @click="changeTab('main', item)"
+          >
+            {{ item.label }}
+          </div>
+          <div class="more" @click="toClassPage">
+            <span>查看更多</span>
+            <img :src="icon_more_path" class="more-img" />
+          </div>
+        </div>
+        <div class="sub-nav">
+          <div
+            class="sub-nav-item"
+            v-for="item in varietySubData"
+            :key="item.label"
+            :class="{ active: activeSubTab === item.label }"
+            @click="changeTab('sub', item)"
+          >
+            {{ item.label }}
+          </div>
+        </div>
+      </div>
+      <div class="container">
+        <div
+          class="report-item"
+          v-for="item in reportData"
+          :key="item.timeLabel"
+        >
+          <div class="item-title">{{ item.timeLabel }}</div>
+          <div class="time-point-wrap">
+            <div
+              class="time-point-item"
+              v-for="point in item.child"
+              :key="point.timeLabel"
+            >
+              <div class="point-time">{{ point.timeLabel }}</div>
+              <div class="point-title">{{ point.title }}</div>
+              <div class="point-content">{{ point.abstract }}</div>
+              <div class="point-tab" v-for="tab in point.label" :key="tab">
+                #{{ tab }}
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="check-more" v-if="showMore">加载更多</div>
+      </div>
+    </div>
+    <div class="report-aside">
+      <div class="aside-item">
+        <div class="aside-title">最新资讯</div>
+        <div class="infomation-wrap">
+          <div
+            class="infomation-item"
+            v-for="item in informationData"
+            :key="item.title"
+          >
+            <div class="item-title">{{ item.title }}</div>
+            <div class="item-content">{{ item.no }}|{{ item.main }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="aside-item">
+        <div class="aside-title" style="margin-top:60px;">上新公告</div>
+        <div class="annoucement">
+            <div class="title">行业调研</div>
+            <p class="content">带您感知最微观的行业变化</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+
+
+<style lang="scss" scoped>
+$bg-color: #f6f6f6;
+$active-color: #f3a52f;
+.report-list-page {
+  .report-main {
+    margin-right: 220px;
+    margin-left: -20px;
+    .nav-wrap {
+      padding: 10px 30px;
+      box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.04);
+      .main-nav {
+        display: flex;
+        justify-content: space-between;
+        .main-nav-item {
+          cursor: pointer;
+          width: 140px;
+          height: 40px;
+          background-color: $bg-color;
+          color: #333333;
+          box-sizing: border-box;
+          text-align: center;
+          line-height: 40px;
+          border-radius: 20px;
+          border: 1px solid $bg-color;
+          transition: 0.3s;
+          &.active,
+          &:hover {
+            background-color: #fffbf5;
+            color: $active-color;
+            border: 1px solid $active-color;
+            box-shadow: 0px 6px 7px #fff7eb;
+          }
+        }
+        .more {
+          cursor: pointer;
+          align-self: center;
+          color: $active-color;
+          display: flex;
+          align-items: center;
+          .more-img {
+            width: 16px;
+            height: 16px;
+            margin-left: 6px;
+          }
+        }
+      }
+      .sub-nav {
+        margin-top: 30px;
+        margin-bottom: 2px;
+        display: flex;
+        justify-content: left;
+        .sub-nav-item {
+          cursor: pointer;
+          color: #666666;
+          margin-right: 30px;
+          transition: 0.3s;
+          &:last-child {
+            margin-right: 0;
+          }
+          &.active,
+          &:hover {
+            color: $active-color;
+          }
+        }
+      }
+    }
+    .container {
+      padding: 30px;
+      .report-item {
+        margin-top: 20px;
+        &:first-child {
+          margin-top: 0;
+        }
+        .item-title {
+          color: #333333;
+        }
+        .time-point-wrap {
+          margin-top: 20px;
+          .time-point-item {
+            position: relative;
+            margin: 35px 0 0 35px;
+            &:first-child {
+              margin-top: 20px;
+            }
+            &:last-child {
+              &::after {
+                height: calc(100% - 16px);
+              }
+            }
+            &::before {
+              position: absolute;
+              top: 5px;
+              left: -32px;
+              content: "";
+              width: 8px;
+              height: 8px;
+              border-radius: 50%;
+              background-color: $active-color;
+              box-shadow: 0 0 0 4px rgb(250, 219, 172);
+            }
+            &::after {
+              position: absolute;
+              top: 16px;
+              left: -28px;
+              content: "";
+              width: 1px;
+              height: calc(100% + 35px);
+              background-color: $active-color;
+            }
+            .point-time,
+            .point-content {
+              margin-bottom: 10px;
+              font-size: 14px;
+              color: #666666;
+            }
+            .point-time {
+              &::before {
+                content: "";
+                display: inline-block;
+                margin-left: -20px;
+                margin-bottom: 4px;
+                width: 20px;
+                height: 1px;
+                background-color: $active-color;
+              }
+            }
+            .point-title {
+              color: #333333;
+              margin-bottom: 10px;
+            }
+            .point-tab {
+              display: inline-block;
+              font-size: 14px;
+              color: $active-color;
+              margin-top: 10px;
+              margin-right: 30px;
+              &:last-child {
+                margin-right: 0;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .report-aside {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 240px;
+    height: 100%;
+    box-sizing: border-box;
+    padding: 102px 30px;
+    border-left: 2px solid #f2f2f2;
+    .aside-title {
+      font-size: 18px;
+      color: #333333;
+      &::before {
+        content: "";
+        display: inline-block;
+        width: 3px;
+        height: 17px;
+        background-color: $active-color;
+        margin-right: 10px;
+      }
+    }
+    .infomation-wrap {
+      margin-top: 20px;
+      font-size: 14px;
+      .infomation-item {
+        margin-top: 20px;
+        padding-bottom: 12px;
+        border-bottom: 1px solid #f2f2f2;
+        cursor: pointer;
+        .item-title {
+          color: #333333;
+          margin-bottom: 10px;
+        }
+        .item-content {
+          color: #666666;
+        }
+        &:hover {
+          .item-title,
+          .item-content {
+            color: $active-color;
+            transition: 0.3s;
+          }
+        }
+      }
+    }
+    .annoucement{
+        margin-top: 20px;
+        padding:18px;
+        height:110px;
+        border: 1px solid black;
+        border-radius: 5px;
+        background: no-repeat center/cover url("../../assets/announce-pic.png")  ;
+       /*  background-image: url("../../assets/announce-pic.png");
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: cover; */
+        .title{
+            color: #CFC09F;
+            font-size: 18px;
+        }
+        .content{
+            color: #CFC09F;
+            line-height: 18px;
+        }
+    }
+  }
+}
+</style>

src/views/report/staticData.js

@@ -0,0 +1,144 @@
+//品种数据
+const varietyData = [{
+        key: '',
+        label: '宏观经济',
+        child: [{
+                label: '宏观',
+            },
+            {
+                label: '利率债'
+            }
+        ]
+    },
+    {
+        label: '化工',
+        child: [{
+                label: '原油'
+            },
+            {
+                label: '沥青',
+                alias: ['BU']
+            },
+            {
+                label: 'PTA'
+            },
+            {
+                label: 'MEG',
+                alias: ['EG', '乙二醇']
+            },
+            {
+                label: '聚酯',
+                alias: ['长丝', '短纤', '瓶片']
+            },
+            {
+                label: '织造终端'
+            },
+            {
+                label: '纯苯+苯乙烯',
+                alias: ['EB']
+            },
+            {
+                label: '甲醇',
+                alias: ['MA']
+            },
+            {
+                label: '聚烯烃',
+                alias: ['PP', 'PE']
+            },
+            {
+                label: '橡胶',
+                alias: ['RU']
+            },
+            {
+                label: 'PVC'
+            }
+        ]
+    },
+    {
+        label: '黑色',
+        child: [{
+                label: '钢材'
+            },
+            {
+                label: '铁矿'
+            },
+            {
+                label: '双焦(焦煤、焦炭)'
+            },
+            {
+                label: '玻璃纯碱',
+                alias: ['玻璃', '纯碱', 'FG', 'SA']
+            }
+        ]
+    },
+    {
+        label: '有色',
+        child: [{
+                label: '有色(铜、铝)'
+            },
+            {
+                label: '有色(锌、铅)'
+            },
+            {
+                label: '镍+不锈钢'
+            },
+            {
+                label: '钴锂'
+            }
+        ]
+    }
+]
+//mock的最新资讯数据
+const informationData = [{
+        title: '股债日评',
+        no: 178,
+        main: '关注中美领导交流'
+    },
+    {
+        title: '知白守黑日度点评',
+        no: 190,
+        main: '关注中美领导交流'
+    },
+    {
+        title: '甲醇库存数据点评',
+        no: 230,
+        main: '甲醇库存甲醇库存甲醇库存甲醇库存'
+    }
+]
+//mock的研报首页数据
+const reportData = [{
+    timeLabel: '3.28周一',
+    child: [{
+        timeLabel: '15:40:40',
+        title: '关注中美领导交流',
+        abstract: '中美领导视频会在本周进行，从会前吹风来看，中美在碳中和和关税上存在政策诉求。如果中美关税下调，则人民币会有明确的升值反应。中美领导视频会在本周进行，从会前吹风来看，中美在碳中和和关税上存在政策诉求。如果中美关税下调，则人民币会有明确的升值反应。',
+        label:['双周报','宏观双周报']
+    },{
+        timeLabel: '15:42:40',
+        title: '啦啦啦啦',
+        abstract: '随便写点什么',
+        label:['宏观双周报']
+    }
+]
+},{
+    timeLabel: '3.29周二',
+    child: [{
+        timeLabel: '15:40:40',
+        title: '关注中美领导交流',
+        abstract: 'aaaa',
+        label:['双周报','宏观双周报']
+    },{
+        timeLabel: '15:42:40',
+        title: '啦啦啦啦',
+        abstract: '随便写点什么',
+        label:['宏观双周报']
+    }
+]
+}
+]
+
+export {
+    varietyData,
+    informationData,
+    reportData
+}