pc2.0

src/layout/component/Aside.vue

@@ -17,17 +17,31 @@ watch(
 const menuList = reactive([
   {
     MenuId: 1,
-    name: "报告及活动",
-    path: "/activity/list",
+    name: "研报",
+    path: "/report/list",
     icon_path: new URL('../../assets/leftNav/activity-s.png', import.meta.url).href,
     children: null,
   },
+  {
+    MenuId: 1,
+    name: "ETA图库",
+    path: "/chart/list",
+    icon_path: new URL('../../assets/leftNav/activity-s.png', import.meta.url).href,
+    children: null,
+  },
+  {
+    MenuId: 1,
+    name: "活动",
+    path: "/activity/list",
+    icon_path: new URL('../../assets/leftNav/activity-s.png', import.meta.url).href,
+    children: null,
+  }
 ]);
 </script>
 
 <template>
   <div class="aside-wrap">
-    <el-menu router :default-active="activePath" unique-opened background-color="#FFFBF5" text-color="#333" active-text-color="#333" class="el-menu-wrap">
+    <el-menu router :default-active="activePath" unique-opened text-color="#333" active-text-color="#F3A52F" class="el-menu-wrap">
       <template v-for="menu in menuList">
         <el-menu-item :index="menu.path" :key="menu.id" v-if="!menu.children">
           <img class="menu-icon" :src="menu.icon_path" alt="" />
@@ -64,11 +78,11 @@ const menuList = reactive([
   border: none;
 }
 .el-menu-item:hover{
-  background-color: #f0d6b2;
+  background-color: #FFFBF5;
+}
+.el-menu-item.is-active {
+  background-color: #FFFBF5 !important;
 }
-// .el-menu-item.is-active {
-//   background-color: rgba(253, 184, 99, 0.1) !important;
-// }
 .menu-icon {
   width: 20px;
   height: 20px;

src/layout/component/Footer.vue

@@ -11,7 +11,7 @@
                 <div class="info-item">邮箱：service@hzinsights.com</div>
             </div>
             <div class="right-con">
-                <img class="gzh-img" src="@/assets/gzh-img.png" alt="">
+                <img class="gzh-img" src="@/assets/gzh-img2.png" alt="">
                 <div style="font-size:16px;margin:14px 0 10px 0">扫码关注弘则研究公众号</div>
                 <div style="font-size:14px;color:#666">弘则研究：专注为全球投资<br/>者提供中立客观的研究服务</div>
             </div>

src/views/activity/List.vue

@@ -245,57 +245,55 @@ onActivated(()=>{//解决从详情返回到列表 分享时还是详情问题
 
 <template>
     <div class="activity-list-page" ref="listWrap" @scroll="listWrapScroll">
-        <teleport to="#report-search-box">
-            
-        </teleport>
-        <el-affix>
-            <div class="top-nav-wrap">
-                <div class="nav-first">
-                    <span :class="listData.tabActive==1&&'active'" @click="tabChange('1')">报告及线上会议</span>
-                    <span :class="listData.tabActive==3&&'active'" @click="tabChange('3')">线下沙龙</span>
-                </div>
-                <div class="status-box">
-                    <span :class="listData.statusActive==1&&'active'" @click="statusChange('1')">本周预告</span>
-                    <span :class="listData.statusActive==2&&'active'" @click="statusChange('2')">进行中</span>
-                    <span :class="listData.statusActive==3&&'active'" @click="statusChange('3')">已结束</span>
-                    <el-checkbox v-model="listData.onlySeeAuth" size="large" @change="authChange">只看有权限</el-checkbox>
-                </div>
+        <div class="top-nav-wrap">
+            <div class="nav-first">
+                <span :class="listData.tabActive==1&&'active'" @click="tabChange('1')">报告及线上会议</span>
+                <span :class="listData.tabActive==3&&'active'" @click="tabChange('3')">线下沙龙</span>
+            </div>
+            <div class="status-box">
+                <span :class="listData.statusActive==1&&'active'" @click="statusChange('1')">本周预告</span>
+                <span :class="listData.statusActive==2&&'active'" @click="statusChange('2')">进行中</span>
+                <span :class="listData.statusActive==3&&'active'" @click="statusChange('3')">已结束</span>
+                <el-checkbox v-model="listData.onlySeeAuth" size="large" @change="authChange">只看有权限</el-checkbox>
             </div>
-        </el-affix>
+        </div>
         <div class="empty-list" v-if="listData.list.length===0&&listData.finished">
             <img src="@/assets/empty-bg.png" alt="">
             <p>暂无数据</p>
         </div>
-        <ul class="list-wrap"  v-infinite-scroll="onLoad" :infinite-scroll-immediate="false" v-if="listData.list.length>0">
+        <ul class="list-wrap" v-if="listData.list.length>0">
             <li class="flex item" v-for="item in listData.list" :key="item.activityId" @click="goDetail(item.activityId)">
                 <el-image
-                    style="width: 93px; height: 111px;border-radius: 4px;flex-shrink: 0;"
+                    style="width: 74px; height: 104px;border-radius: 4px;flex-shrink: 0;"
                     :src="item.speakerHeadPic"
                     fit="cover"
                 ></el-image>
                 <div class="flex content">
-                    <span class="status-box status-before" v-if="item.activityState===1">未开始</span>
-                    <span class="status-box status-progress" v-if="item.activityState===2">进行中</span>
-                    <span class="status-box status-end" v-if="item.activityState===3">已结束</span>
+                    <div v-if="item.firstActivityTypeId===3&&item.city" class="city-box">{{item.city}}</div>
                     <div>
-                        <h2 class="title">{{item.activityTypeName}}</h2>
+                        <h2 class="title">
+                            <span>{{item.activityTypeName}}</span>
+                            <span class="status-box status-before" v-if="item.activityState===1">未开始</span>
+                            <span class="status-box status-progress" v-if="item.activityState===2">进行中</span>
+                            <span class="status-box status-end" v-if="item.activityState===3">已结束</span>
+                        </h2>
                         <p class="speaker">主讲：{{item.speaker}}</p>
                     </div>
-                    <div v-if="item.firstActivityTypeId===3&&item.city" class="city-box">{{item.city}}</div>
                     <div class="flex bot">
                         <span class="time">{{formatActivityTime(item.startTime,item.endTime)}}</span>
                         <div>
                             <block v-if="item.activityState===1">
-                                <span :class="['btn',!item.hasRemind&&'active']" @click.stop="handleRemind(item)">{{item.hasRemind?'取消提醒':'会议提醒'}}</span>
                                 <span 
-                                    :class="['btn',!item.registerState&&'active-2']"
+                                    style="width:138px"
+                                    :class="['btn',item.registerState&&'active']"
                                     v-if="item.firstActivityTypeId===3"
                                     @click.stop="handleRegister(item)"
                                 >{{item.registerState?'取消线下报名':'报名线下参会'}}</span>
+                                <span :class="['btn',item.hasRemind&&'active']" @click.stop="handleRemind(item)">{{item.hasRemind?'取消提醒':'会议提醒'}}</span>
                             </block>
                             <!-- 音频播放 -->
                             <div 
-                                :class="['btn btn-audio',$store.state.audioData.activityId==item.activityId&&'btn-audio-active']" 
+                                :class="['btn-audio',$store.state.audioData.activityId==item.activityId&&'btn-audio-active']" 
                                 v-if="item.firstActivityTypeId===1&&item.activityState===3&&item.hasPlayBack"
                                 @click.stop="handleGetAudio(item)"
                             >
@@ -318,103 +316,142 @@ onActivated(()=>{//解决从详情返回到列表 分享时还是详情问题
 
 <style lang="scss" scoped>
  .activity-list-page{
-    height: 100%;
-    overflow-y: auto;
+    // height: 100%;
+    // overflow-y: auto;
     .top-nav-wrap{
-        padding: 20px 0;
+        width: 100%;
+        padding-top: 40px;
+        padding-bottom: 20px;
         background-color: #fff;
+        position: fixed;
+        top: 60px;
+        z-index: 99;
         .nav-first{
             span{
                 color: #999999;
-                font-size: 18px;
+                font-size: 16px;
                 padding: 3px 0;
-                margin-right: 18px;
+                margin-right: 37px;
                 cursor: pointer;
             }
             .active{
-                color: #333;
-                font-weight: bold;
-                border-bottom: 2px solid #DAB37C;
+                color: #F3A52F;
+                position: relative;
+                &::after{
+                    content:'';
+                    display: block;
+                    width: 40px;
+                    height: 4px;
+                    border-radius: 2px;
+                    background: #F3A52F;
+                    position: absolute;
+                    left: 50%;
+                    transform: translateX(-50%);
+                    bottom: -5px;
+                }
             }
         }
         .status-box{
             margin-top: 23px;
             span{
                 display: inline-block;
-                width: 93px;
-                height: 36px;
-                background: #F7F7F7;
-                border-radius: 3px;
+                width: 140px;
+                height: 40px;
+                background-color: #F6F6F6;
+                border-radius: 20px;
                 text-align: center;
-                line-height: 36px;
+                line-height: 40px;
                 margin-right: 20px;
                 cursor: pointer;
                 font-size: 16px;
+                box-sizing: border-box;
+                &:hover{
+                    background: #FFFBF5;
+                    box-shadow: 0px 6px 7px 1px #FFF7EB;
+                    border-radius: 20px 20px 20px 20px;
+                    border: 1px solid #F3A52F;
+                    color: #F3A52F;
+                }
             }
             .active{
-                background-color: #DAB37C;
-                color: #fff;
+                background: #FFFBF5;
+                box-shadow: 0px 6px 7px 1px #FFF7EB;
+                border-radius: 20px 20px 20px 20px;
+                border: 1px solid #F3A52F;
+                color: #F3A52F;
             }
             :deep(.el-checkbox.el-checkbox--large .el-checkbox__label){
-                color: #DAB37C;
+                color: #F3A52F;
             }
             :deep(.el-checkbox__input.is-checked .el-checkbox__inner){
-                background-color: #DAB37C;
-                border-color: #DAB37C;
+                background-color: #F3A52F;
+                border-color: #F3A52F;
             }
             :deep(.el-checkbox__inner){
-                border-color: #DAB37C;
+                border-color: #F3A52F;
             }
         }
     }
+    .empty-list{
+        margin-top: 140px;
+    }
     .list-wrap{
-        border: 1px solid #EBEBEB;
         border-radius: 4px;
+        margin-top: 140px;
         .item{
-            border-bottom: 1px solid #EBEBEB;
-            &:last-child{
-                border: none;
-            }
-            padding: 20px;
+            border-bottom: 1px solid #F2F2F2;
+            padding: 16px 0;
             .content{
                 margin-left: 20px;
                 flex:1;
                 flex-direction: column;
                 justify-content: space-between;
                 position: relative;
-                .status-box{
-                    position: absolute;
-                    top: 0;
-                    right: 0;
-                    font-size: 16px;
-                }
-                .status-before{
-                    color: #DAB37C;
-                }
-                .status-progress{
-                    color: #2A65F5;
-                }
-                .status-end{
-                    color: #333;
-                }
                 .title{
-                    font-size: 16px;
+                    font-size: 20px;
                     margin-top: 0;
-                    margin-bottom: 9px;
-                    margin-right: 70px;
+                    margin-bottom: 14px;
+                    margin-right: 60px;
+                    .status-box{
+                        width: 69px;
+                        height: 28px;
+                        line-height: 28px;
+                        display: inline-block;
+                        text-align: center;
+                        font-size: 14px;
+                        font-weight: 600;
+                        border-radius: 4px;
+                        margin-left: 20px;
+                    }
+                    .status-before{
+                        background-color: #FFFBF5;
+                        color: #F3A52F;
+                    }
+                    .status-progress{
+                        background-color: #F2F6FF;
+                        color: #688EEC;
+                    }
+                    .status-end{
+                        background-color: #F2F2F2;
+                        color: #333;
+                    }
                 }
                 .speaker{
                     margin: 0;
+                    font-size: 16px;
                 }
                 .city-box{
-                    color: #DAB37C;
+                    color: #F3A52F;
                     font-size: 14px;
+                    position: absolute;
+                    top: 0;
+                    right: 0;
                     &::before{
                         content: '';
                         display: inline-block;
-                        width: 12px;
+                        width: 15px;
                         height: 15px;
-                        background-image: url('../../assets/location.png');
+                        background-image: url('@/assets/location.png');
                         background-size: cover;
                         margin-right: 5px;
                         position: relative;
@@ -425,33 +462,42 @@ onActivated(()=>{//解决从详情返回到列表 分享时还是详情问题
                     justify-content: space-between;
                     align-items: flex-end;
                     .time{
-                        font-size: 12px;
-                        color: #666666;
+                        font-size: 14px;
+                        color: #999;
                     }
                     .btn{
-                        min-width: 93px;
-                        height: 36px;
-                        background-color: #F7F7F7;
-                        border-radius: 3px;
+                        min-width: 100px;
+                        height: 28px;
+                        background-color: #fff;
+                        border-radius: 14px;
                         display: inline-block;
-                        margin-left: 10px;
+                        margin-left: 20px;
                         text-align: center;
-                        line-height: 36px;
+                        line-height: 28px;
                         cursor: pointer;
+                        color: #F3A52F;
+                        border: 1px solid #F3A52F;
+                        &:hover{
+                            background-color: #F3A52F;
+                            color: #fff;
+                        }
                     }
                     .active{
-                        background: #DAB37C;
-                        color: #fff;
-                    }
-                    .active-2{
-                        border: 1px solid #DAB37C;
-                        background-color: #fff;
-                        color: #DAB37C;
+                        background: #F6F6F6;
+                        color: #666666;
+                        border: none;
                     }
                     .btn-audio{
-                        border: 1px solid #DAB37C;
-                        color: #DAB37C;
+                        width: 100px;
+                        height: 28px;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        cursor: pointer;
+                        color: #F3A52F;
+                        border: 1px solid #F3A52F;
                         background-color: #fff;
+                        border-radius: 14px;
                     }
                     .btn-audio-active{
                         background: #DAB37C;