Merge branches 'tech_pool_23', 'tech_pool_23_new' and 'tech_pool_27'

src/components/SharePoster.vue

@@ -90,10 +90,10 @@ onLongPress(imgDom, onLongPressImg)
     .share-icon{
         position: fixed;
         bottom: 150px;
-        right: 35px;
+        right: 36px;
         z-index: 1000;
-        width: 50px;
-        height: 50px;
+        width: 48px;
+        height: 48px;
     }
     .chart-icon{
         float: right;

src/layout/Index.vue

@@ -19,7 +19,7 @@ import LoginPop from '@/components/LoginPop.vue'
         <el-aside width="160px">
           <Aside />
         </el-aside>
-        <el-main style="padding-left:180px;overflow:visible"> <!-- 使用粘性布局 需要overflow设置为visible 否则粘性布局会失效 -->
+        <el-main style="padding-left:180px;overflow:visible;"> <!-- 使用粘性布局 需要overflow设置为visible 否则粘性布局会失效 -->
           <div class="page-container">
           <router-view v-slot="{ Component }">
               <keep-alive>

src/layout/component/Aside.vue

@@ -6,7 +6,7 @@ const route = useRoute();
 const router= useRouter()
 const store=useStore()
 
-let activePath = ref("/report/index");
+let activePath = ref("/report/classify");
 watch(
   () => route.path,
   (to) => {
@@ -41,7 +41,7 @@ let menuList = reactive([
   {
     MenuId: 1,
     name: "研报",
-    path: "/report/index",
+    path: "/report/classify",
     icon_path: new URL('../../assets/leftNav/report-s.png', import.meta.url).href,
     children: null,
   },

src/layout/component/Header.vue

@@ -181,7 +181,7 @@ const handleSetUserInfo=()=>{
 
 <template>
   <div class="clear-float head-wrap">
-    <div class="flex-col-center logo-box">
+    <div class="flex-col-center logo-box" style="cursor: pointer;" @click="router.push('/report/index')">
       <img src="@/assets/logo.png" alt="logo" class="logo" />
       <span>弘则研报</span>
     </div>

src/router/index.js

@@ -68,18 +68,19 @@ const routes=[
   {
     path:'/report',
     name:'Report',
-    redirect: '/report/index',
+    redirect: '/report/classify',
     component: () => import("@/layout/Index.vue"),
     meta: {
       title:"研报"
     },
     children:[
+      // 研报与首页区分开了 首页为原来的研报页面，现在的研报页面是分类 -- 2022/10/17
       {
         path: "index",
         name: "ReportIndex",
         component: () => import("@/views/report/Index.vue"),
         meta: {
-          title: "研报",
+          title: "首页",
           keepAlive:true,
           isRoot:true
         },
@@ -89,10 +90,9 @@ const routes=[
         name: "ReportClassify",
         component: () => import("@/views/report/Classify.vue"),
         meta: {
-          title: "FICC研报分类",
+          title: "研报",
           keepAlive:false,
-          isRoot:false,
-          hasBack:true
+          isRoot:true
         },
       },
       {

src/views/activity/List.vue

@@ -436,42 +436,14 @@ const posterParams=computed(()=>{
     // overflow-y: auto;
     .top-nav-wrap{
         width: 100%;
-        padding-top: 40px;
+        padding-top: 30px;
         padding-bottom: 20px;
         background-color: #fff;
         position: fixed;
         top: 60px;
         z-index: 99;
         .nav-first{
-            span{
-                color: #999999;
-                font-size: 16px;
-                padding: 3px 0;
-                margin-right: 37px;
-                cursor: pointer;
-                &:hover{
-                    color: #F3A52F;
-                }
-            }
-            .active{
-                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;
+            margin-bottom: 20px;
             span{
                 display: inline-block;
                 width: 140px;
@@ -484,6 +456,7 @@ const posterParams=computed(()=>{
                 cursor: pointer;
                 font-size: 16px;
                 box-sizing: border-box;
+                border: 1px solid transparent;
                 &:hover{
                     background: #FFFBF5;
                     box-shadow: 0px 6px 7px 1px #FFF7EB;
@@ -510,6 +483,34 @@ const posterParams=computed(()=>{
                 border-color: #F3A52F;
             }
         }
+        .status-box{
+            span{
+                color: #999999;
+                font-size: 16px;
+                padding: 3px 0;
+                margin-right: 37px;
+                cursor: pointer;
+                &:hover{
+                    color: #F3A52F;
+                }
+            }
+            .active{
+                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;
+                // }
+            }
+        }
     }
     .empty-list{
         margin-top: 140px;

src/views/priceDriven/detail.vue

@@ -371,7 +371,7 @@ onUnmounted(() => {
             </h3>
             <p
               :class="info.core_driven_type ? 'down' : 'up'"
-              style="padding: 20px 17px"
+              style="padding: 20px 17px;border: none;"
             >
               {{ info.core_driven_content }}
             </p>
@@ -427,7 +427,7 @@ onUnmounted(() => {
           />
           <div style="margin-bottom: 10px;">您暂无权限查看价格驱动</div>
           <div>若想查看请联系对口销售</div>
-          <div>{{ noAuthInfo.name }}：<span style="color: #e3b377">{{ noAuthInfo.mobile }}</span>
+          <div>{{ noAuthInfo.name }}：<span style="color: #F3A52F">{{ noAuthInfo.mobile }}</span>
           </div>
         </div>
       </div>
@@ -469,8 +469,8 @@ onUnmounted(() => {
 .pricedriven-page {
   display: flex;
   .classify-cont {
-    box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.04);
-    padding: 30px 20px 12px;
+    // box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.04);
+    padding: 30px 0 12px;
     position: fixed;
     top: 60px;
     z-index: 9;
@@ -494,7 +494,7 @@ onUnmounted(() => {
         &.act,
         &:hover {
           background: #fdf8f2;
-          color: #e3b377;
+          color: #f3a52f;
           border-color: #f3a52f;
         }
       }
@@ -519,10 +519,11 @@ onUnmounted(() => {
       .classify-sub-item {
         flex-shrink: 0;
         position: relative;
+        color: #666666;
         margin: 5px 30px 4px 0;
         cursor: pointer;
         &.act {
-          color: #e3b377;
+          color: #F3A52F;
         }
       }
       .slide {
@@ -534,7 +535,7 @@ onUnmounted(() => {
     }
   }
   .richtext-container {
-    margin-top: 130px;
+    margin-top: 140px;
     .section {
       padding: 0 20px;
       border-bottom: 2px solid #f1f1f1;
@@ -555,17 +556,19 @@ onUnmounted(() => {
       }
       .tag {
         font-size: 14px;
-        padding: 0 4px;
-        border: 1px solid transparent;
+        padding: 2px 4px;
+        // border: 1px solid transparent;
         border-radius: 4px;
         margin-left: 20px;
         align-items: center;
       }
       .up {
+        border: 1px solid #D64C4C;
         background: #feefef;
         color: #d64c4c;
       }
       .down {
+        border: 1px solid #66B891;
         background: #ebfff0;
         color: #4fc08d;
       }

src/views/question/List.vue

@@ -301,23 +301,10 @@ const goSettingHandle = () => {
   showNicklog.value = false;
   router.push('/user/setinfo')
 }
-// <<<<<<< HEAD
 /* 不在提醒弹窗 */
 const setCancelNickHandle = async() => {
   showNicklog.value = false;
   await apiCanelNickTip()
-// =======
-// // 等待 网络差时等待资源加载
-// const audioWaiting = (item)=>{
-//   item.audio_status.loading = true
-// }
-// // 可以播放 
-// const audioCanPlay = (item,index)=>{
-//   item.audio_status.loading = false
-//   if(!audio.value[index].played){
-//     play(item,index)
-//   }
-// >>>>>>> CD_bugFix
 }
 
 
@@ -506,7 +493,6 @@ onActivated(()=>{
     }
     .noAuthor-box{
       font-size: 16px;
-      font-family: PingFang SC-Regular, PingFang SC;
       font-weight: 400;
       color: #333333;
       text-align: center;
@@ -532,7 +518,6 @@ onActivated(()=>{
         height: 40px;
         border-radius: 41px;
         margin-top: 30px;
-        font-family: 'PingFang SC';
         font-style: normal;
         font-weight: 500;
         font-size: 16px;
@@ -541,12 +526,12 @@ onActivated(()=>{
     }
 }
 .question-list-container{
-  border-left: 1px solid #F2F2F2;
-  border-right: 1px solid #F2F2F2;
+  // border-left: 1px solid #F2F2F2;
+  // border-right: 1px solid #F2F2F2;
   .top-nav-box{
-    padding: 30px 30px 12px 30px;
+    padding: 30px 0 12px;
     background: #FFFFFF;
-    box-shadow: 0px 4px 8px 1px rgba(0, 0, 0, 0.04);
+    // box-shadow: 0px 4px 8px 1px rgba(0, 0, 0, 0.04);
     position: sticky;
     top: 60px;
     width: 100%;
@@ -555,41 +540,56 @@ onActivated(()=>{
     .first-nav-box{
       display:flex;
       flex-wrap: wrap;
-        span{
-            display: inline-flex;
-            align-items:center;
-            justify-content:center;
-            width: 140px;
-            line-height: 40px;
-            text-align: center;
-            border-radius: 20px;
-            background-color: #F6F6F6;
-            font-size: 16px;
-            margin-right: 30px;
-            cursor: pointer;
-            margin-bottom:10px;
-        }
-        .ask-icon{
-          display:inline-flex;
-          background: #F3A52F;
-          border: 1px solid #F3A52F;
-          box-shadow: 0px 6px 7px #FFF7EB;
+      span{
+          display: inline-flex;
+          align-items:center;
+          justify-content:center;
+          width: 140px;
+          line-height: 40px;
+          text-align: center;
           border-radius: 20px;
-          font-family: 'PingFang SC';
-          font-style: normal;
-          font-weight: 400;
+          background-color: #F6F6F6;
           font-size: 16px;
-          color: #FFFFFF;
+          margin-right: 30px;
+          cursor: pointer;
+          margin-bottom:10px;
+          box-sizing: border-box;
+      }
+      .ask-icon{
+        display:inline-flex;
+        background: #F3A52F;
+        border: 1px solid #F3A52F;
+        box-shadow: 0px 6px 7px #FFF7EB;
+        border-radius: 20px;
+        font-style: normal;
+        font-weight: 400;
+        font-size: 16px;
+        color: #FFFFFF;
+        img{
+          margin-right:6px;
+        }
+      }
+      .active{
+          background-color: #FFFBF5;
+          box-shadow: 0px 6px 7px 1px #FFF7EB;
+          color: #F3A52F;
+          border: 1px solid #F3A52F;
+      }
+      @media screen and (max-width: 1280px){
+        span{
+              width: 90px;
+              height: 30px;
+              line-height: 30px;
+              margin-right: 15px;
+              font-size: 14px;
+          }
+        .ask-icon{
+          font-size: 14px;
           img{
-            margin-right:6px;
+            height: 12px;
           }
         }
-        .active{
-            background-color: #FFFBF5;
-            box-shadow: 0px 6px 7px 1px #FFF7EB;
-            color: #F3A52F;
-            border: 1px solid #F3A52F;
-        }
+      }
     }
     .sec-nav-box{
         margin-top: 30px;
@@ -615,7 +615,6 @@ onActivated(()=>{
     }
     span{
         margin-top: 30px;
-        font-family: 'PingFang SC';
         font-style: normal;
         font-weight: 400;
         font-size: 16px;
@@ -632,7 +631,6 @@ onActivated(()=>{
         display: flex;
         align-items: center;
         font-size: 16px;
-        font-family: PingFang SC-Medium, PingFang SC;
         font-weight: 500;
         color: #333333;
         margin-bottom: 16px;
@@ -646,7 +644,6 @@ onActivated(()=>{
           height: 24px;
           padding: 0 12px;
           font-size: 12px;
-          font-family: PingFang SC-Medium, PingFang SC;
           font-weight: 500;
           color: #F3A52F;
           margin-right: 14px;
@@ -654,7 +651,6 @@ onActivated(()=>{
       }
       .question-time{
         font-size: 16px;
-        font-family: PingFang SC-Regular, PingFang SC;
         font-weight: 400;
         color: #666666;
         margin-bottom: 24px;
@@ -683,7 +679,6 @@ onActivated(()=>{
         }
         .audio-time{
           font-size: 16px;
-          font-family: PingFang SC-Regular, PingFang SC;
           font-weight: 400;
           color: #FFFFFF;
         }
@@ -728,7 +723,6 @@ onActivated(()=>{
       text-align: right;
       margin-top: 10px;
       color: #999999;
-      font-family: 'PingFang SC';
       font-style: normal;
       font-weight: 400;
       font-size: 16px;
@@ -746,7 +740,6 @@ onActivated(()=>{
         width: 160px;
         height: 40px;
         color: #FFFFFF;
-        font-family: 'PingFang SC';
         font-style: normal;
         font-weight: 500;
         font-size: 16px;

src/views/question/MyList.vue

@@ -345,7 +345,7 @@ getBarList()
           <div v-for="item in question.barList" :key="item.key" @click="changeTopTar(item.key)"
           :class="['top-tabbar-item',item.key == question.selectKey?'tabbar-active':'']">
             <span class="top-tabbar-item-title">
-              {{item.label}}<span style="margin-left: 12px;">({{item.num}})</span>
+              {{item.label}}<span>({{item.num}})</span>
             </span>
           </div>
         </div>
@@ -399,12 +399,12 @@ getBarList()
 
 <style scoped lang="scss">
   .my-questionList-contain{
-    border-left: 1px solid #F2F2F2;
-    border-right: 1px solid #F2F2F2;
+    // border-left: 1px solid #F2F2F2;
+    // border-right: 1px solid #F2F2F2;
     .top-tabbar-box{
-      padding: 30px 30px 12px 30px;
+      padding: 30px 0 12px;
       background: #FFFFFF;
-      box-shadow: 0px 4px 8px 1px rgba(0, 0, 0, 0.04);
+      // box-shadow: 0px 4px 8px 1px rgba(0, 0, 0, 0.04);
       position: sticky;
       top: 60px;
       width: 100%;
@@ -424,15 +424,33 @@ getBarList()
           justify-content: center;
           margin-right: 30px;
           cursor: pointer;
-          margin-bottom: 10px;
+          // margin-bottom: 10px;
           .top-tabbar-item-title{
-            font-family: 'PingFang SC';
             font-style: normal;
             font-weight: 400;
             font-size: 16px;
             color: #333333;
+            span{
+              margin-left: 12px;
+            }
           }
         }
+        @media screen and (max-width: 900px){
+            .top-tabbar-item{
+                min-width: 90px;
+                padding: 0 10px;
+                height: 30px;
+                line-height: 28px;
+                margin-right: 15px;
+                font-size: 14px;
+                .top-tabbar-item-title{
+                    font-size: 14px;
+                    span{
+                      margin-left: 8px;
+                    }
+                }
+            }
+        }
         .tabbar-active{
           border: 1px solid #F3A52F;
           background-color: #FFFBF5;;
@@ -454,7 +472,6 @@ getBarList()
       }
       span{
           margin-top: 30px;
-          font-family: 'PingFang SC';
           font-style: normal;
           font-weight: 400;
           font-size: 16px;
@@ -471,7 +488,6 @@ getBarList()
           display: flex;
           align-items: center;
           font-size: 16px;
-          font-family: PingFang SC-Medium, PingFang SC;
           font-weight: 500;
           color: #333333;
           margin-bottom: 16px;
@@ -486,7 +502,6 @@ getBarList()
             height: 24px;
             padding: 0 12px;
             font-size: 12px;
-            font-family: PingFang SC-Medium, PingFang SC;
             font-weight: 500;
             color: #F3A52F;
             margin-right: 14px;
@@ -494,7 +509,6 @@ getBarList()
         }
         .question-time{
           font-size: 16px;
-          font-family: PingFang SC-Regular, PingFang SC;
           font-weight: 400;
           color: #666666;
           margin-bottom: 24px;
@@ -523,7 +537,6 @@ getBarList()
           }
           .audio-time{
             font-size: 16px;
-            font-family: PingFang SC-Regular, PingFang SC;
             font-weight: 400;
             color: #FFFFFF;
           }
@@ -567,7 +580,6 @@ getBarList()
     }
     .noAuthor-box{
       font-size: 16px;
-      font-family: PingFang SC-Regular, PingFang SC;
       font-weight: 400;
       color: #333333;
       text-align: center;
@@ -593,7 +605,6 @@ getBarList()
         height: 40px;
         border-radius: 41px;
         margin-top: 30px;
-        font-family: 'PingFang SC';
         font-style: normal;
         font-weight: 500;
         font-size: 16px;

src/views/report/Classify.vue

@@ -68,7 +68,7 @@ onMounted(()=>{
     <div class="report-classify-page">
         <img :src="$store.state.globalImgUrls.ficcServiceImg" alt=""  class="top-banner" @click="$router.push({path:'/report/ficcserveintro'})">
         <div class="list-wrap">
-            <el-row :gutter="20">
+            <el-row :gutter="20" style="margin-left:0 ;margin-right: 0;">
                 <el-col :span="6" v-for="item in list" :key="item.classify_name_first">
                     <div class="item" @click="goNext(item)" :style="'background-image:url('+item.back_img_url+')'">
                         <div class="con">

src/views/report/Index.vue

@@ -179,9 +179,9 @@ const getNewAnnounce=async ()=>{
 getNewAnnounce()
 
 //跳转至研报分类页
-const handleGoMoreClassify = () => {
-  router.push({ path:'/report/classify' });
-};
+// const handleGoMoreClassify = () => {
+//   router.push({ path:'/report/classify' });
+// };
 
 //点击上新公告
 const handleClickAnnounce=(data)=>{
@@ -278,8 +278,8 @@ onActivated(()=>{
             :key="item.classify_name" 
             @click="clickFirstType(item)"
           >{{ item.classify_name }}</div>
-          <!-- 查看更多 -->
-          <div class="see-more" @click="handleGoMoreClassify">查看更多</div>
+          <!-- 查看更多 2022-10-17 研报和首页分开，不显示查看更多按钮 https://share.lanhuapp.com/#/invite?sid=lxeTdwAa -->
+          <!-- <div class="see-more" @click="handleGoMoreClassify">查看更多</div> -->
         </div>
         <div class="sub-nav">
             <span 
@@ -415,9 +415,11 @@ onActivated(()=>{
       background-color: #fff;
       padding-top: 30px;
       padding-bottom: 12px;
-      width: 100%;
+      // width: 100%;
+      width: 1000px;
       .first-nav {
-        width: calc(100vw - 500px);
+        // width: calc(100vw - 500px);
+        width: 100%;
         overflow-x: auto;
         overflow-y: hidden;
         position: relative;
@@ -491,6 +493,8 @@ onActivated(()=>{
         margin-top: 30px;
         // overflow-x: auto;
         overflow-y: hidden;
+        display: flex;
+        align-items: center;
         // &::-webkit-scrollbar {
         //   display: none;
         // }

src/views/roadShow/video/List.vue

@@ -402,9 +402,9 @@ onActivated(()=>{
 }
 .video-list-page{
     .top-nav-box{
-        padding: 30px 30px 12px 30px;
+        padding: 30px 0 12px;
         background: #FFFFFF;
-        box-shadow: 0px 4px 8px 1px rgba(0, 0, 0, 0.04);
+        // box-shadow: 0px 4px 8px 1px rgba(0, 0, 0, 0.04);
         position: sticky;
         top: 60px;
         width: 100%;
@@ -414,13 +414,14 @@ onActivated(()=>{
             span{
                 display: inline-block;
                 width: 140px;
+                box-sizing: border-box;
                 line-height: 40px;
                 text-align: center;
                 border-radius: 20px;
                 background-color: #F6F6F6;
                 font-size: 16px;
                 margin-right: 30px;
-                margin-bottom:10px;
+                // margin-bottom:10px;
                 cursor: pointer;
             }
             .active{
@@ -442,8 +443,31 @@ onActivated(()=>{
                 color: #F3A52F;
             }
         }
+        @media screen and (max-width: 1100px){
+            .first-nav-box{
+                // height: 30px;
+                span{
+                    width: 90px;
+                    height: 30px;
+                    line-height: 30px;
+                    margin-right: 15px;
+                    font-size: 14px;
+                }
+            }
+            // .item{
+            // width: 90px;
+            // height: 30px;
+            // line-height: 30px;
+            // margin-right: 15px;
+            // font-size: 14px;
+            // }
+            // .see-more{
+            // font-size: 14px;
+            // margin-left: 10px;
+            // top: 5px;
+            // }
+        }
     }
-
     .list-wrap{
         padding-top: 30px;
         // border-left: 1px solid #E2E2E2;

src/views/sandBox/List.vue

@@ -554,7 +554,6 @@ onActivated(()=>{
             height: 360px;
         }
         span{
-            font-family: 'PingFang SC';
             font-style: normal;
             font-weight: 400;
             font-size: 16px;
@@ -574,7 +573,6 @@ onActivated(()=>{
             height: 40px;
             border-radius: 41px;
             margin-top: 30px;
-            font-family: 'PingFang SC';
             font-style: normal;
             font-weight: 500;
             font-size: 16px;
@@ -585,9 +583,9 @@ onActivated(()=>{
     .sandBox-contain{
         // margin-top: 130px;
         .classify-box{
-            padding: 30px 30px 12px 30px;
+            padding: 30px 0 12px;
             background: #FFFFFF;
-            box-shadow: 0px 4px 8px 1px rgba(0, 0, 0, 0.04);
+            // box-shadow: 0px 4px 8px 1px rgba(0, 0, 0, 0.04);
             position: sticky;
             top: 60px;
             width: 100%;
@@ -603,10 +601,9 @@ onActivated(()=>{
                     background-color: #F6F6F6;
                     font-size: 16px;
                     margin-right: 30px;
-                    margin-bottom:10px;
+                    // margin-bottom:10px;
                     cursor: pointer;
                     span{
-                        font-family: 'PingFang SC';
                         font-style: normal;
                         font-weight: 400;
                         font-size: 16px;
@@ -622,6 +619,18 @@ onActivated(()=>{
                         color: #F3A52F;
                     }
                 }
+                @media screen and (max-width: 1100px){
+                    .firstClassfy-item{
+                        width: 90px;
+                        height: 30px;
+                        line-height: 30px;
+                        margin-right: 15px;
+                        font-size: 14px;
+                        span{
+                            font-size: 14px;
+                        }
+                    }
+                }
             }
             .sec-nav-box{
                 margin-top: 30px;
@@ -647,7 +656,6 @@ onActivated(()=>{
             }
             span{
                 margin-top: 30px;
-                font-family: 'PingFang SC';
                 font-style: normal;
                 font-weight: 400;
                 font-size: 16px;
@@ -663,7 +671,6 @@ onActivated(()=>{
                     align-items: center;
                     justify-content: space-between;
                     span{
-                        font-family: 'PingFang SC';
                         font-style: normal;
                         font-weight: 600;
                         font-size: 16px;
@@ -696,7 +703,6 @@ onActivated(()=>{
                     }
                     .sandBox-source{
                         font-size: 20px;
-                        font-family: PingFang SC-Regular, PingFang SC;
                         font-weight: 400;
                         color: #666666;
                         -webkit-background-clip: text;
@@ -727,7 +733,6 @@ onActivated(()=>{
                 width: 112px;
                 height: 30px;
                 font-size: 16px;
-                font-family: 'PingFang SC';
                 color: #999;
             }
         }

src/views/video/List.vue

@@ -404,9 +404,9 @@ onActivated(()=>{
 }
 .video-list-page{
     .top-nav-box{
-        padding: 30px 30px 12px 30px;
+        padding: 30px 0 12px;
         background: #FFFFFF;
-        box-shadow: 0px 4px 8px 1px rgba(0, 0, 0, 0.04);
+        // box-shadow: 0px 4px 8px 1px rgba(0, 0, 0, 0.04);
         position: sticky;
         top: 60px;
         width: 100%;
@@ -422,8 +422,9 @@ onActivated(()=>{
                 background-color: #F6F6F6;
                 font-size: 16px;
                 margin-right: 30px;
-                margin-bottom:10px;
+                // margin-bottom:10px;
                 cursor: pointer;
+                box-sizing: border-box;
             }
             .active{
                 background-color: #FFFBF5;
@@ -431,6 +432,15 @@ onActivated(()=>{
                 color: #F3A52F;
                 border: 1px solid #F3A52F;
             }
+            @media screen and (max-width: 1100px){
+                span{
+                    width: 90px;
+                    height: 30px;
+                    line-height: 30px;
+                    margin-right: 15px;
+                    font-size: 14px;
+                }
+            }
         }
         .sec-nav-box{
             margin-top: 30px;

src/views/voice/List.vue

@@ -353,8 +353,12 @@ onActivated(()=>{
                     <h2 class="title" @click="goDetail(item)">{{item.BroadcastName}}</h2>
                     <div class="time">发布时间：{{moment(item.PublishTime).format('YYYY-MM-DD HH:mm:ss')}}</div>
                     <div class="flex audio-box" @click.stop="handlePlay(item)">
-                        <div :class="['icon',($store.state.audioData.voiceId==item.BroadcastId)&&!$store.state.audioData.paused?'active':'']"></div>
-                        <div>{{formarVoiceTime(item.VoicePlaySeconds)}}</div>
+                        <div :class="['audio-icon',($store.state.audioData.voiceId==item.BroadcastId)&&!$store.state.audioData.paused?'active':'']"></div>
+                        <div class="audio-pic">
+                            <img src="@/assets/audio-waveform1.png">
+                            <img src="@/assets/audio-waveform2.png">
+                        </div>
+                        <div class="audio-time">{{formarVoiceTime(item.VoicePlaySeconds)}}</div>
                     </div>
                     <img 
                         class="publish-btn" 
@@ -413,9 +417,9 @@ onActivated(()=>{
     .list-wrap{
         .item{
             padding: 20px;
-            border-left: 1px solid #F2F2F2;
+            // border-left: 1px solid #F2F2F2;
             border-top: 1px solid #F2F2F2;
-            border-right: 1px solid #F2F2F2;
+            // border-right: 1px solid #F2F2F2;
             position: relative;
             &:last-child{
                 border-bottom: 1px solid #F2F2F2;
@@ -430,25 +434,53 @@ onActivated(()=>{
                 font-size: 14px;
             }
             .audio-box{
-                width: 193px;
-                height: 38px;
-                background: #F4E1C9;
-                border-radius: 28px;
-                color: #E3B377;
-                font-size: 14px;
-                align-items: center;
+                // width: 193px;
+                // height: 38px;
+                // background: #F4E1C9;
+                // border-radius: 28px;
+                // color: #E3B377;
+                // font-size: 14px;
+                // align-items: center;
+                // margin-top: 20px;
+                // padding-left: 20px;
+                // cursor: pointer;
+                // .icon{
+                //     width: 16px;
+                //     height: 19px;
+                //     background-image: url('@/assets/voice/pause.png');
+                //     background-size: cover;
+                //     margin-right: 10px;
+                // }
+                // .active{
+                //     background-image: url('@/assets/voice/playing.png');
+                // }
+                width: 443px;
+                height: 46px;
+                background-color: #F3A52F;
+                border: 1px solid #F3A52F;
+                border-radius: 23px;
+                display: flex;
                 margin-top: 20px;
-                padding-left: 20px;
+                align-items: center;
+                padding: 0 54px 0 27px;
                 cursor: pointer;
-                .icon{
+                .audio-icon{
+                    // cursor: pointer;
                     width: 16px;
-                    height: 19px;
-                    background-image: url('@/assets/voice/pause.png');
+                    height: 19.5px;
                     background-size: cover;
-                    margin-right: 10px;
+                    background-image: url('@/assets/recordplay.png');
+                    &.active{
+                        background-image: url('@/assets/recordpause.png');
+                    }
+                }
+                .audio-pic{
+                margin: 0 27px 0 27px;
                 }
-                .active{
-                    background-image: url('@/assets/voice/playing.png');
+                .audio-time{
+                font-size: 16px;
+                font-weight: 400;
+                color: #FFFFFF;
                 }
             }
             .del-btn{
@@ -473,30 +505,45 @@ onActivated(()=>{
     .top-nav-list-box{
         position: fixed;
         top: 60px;
-        padding: 20px;
+        padding: 30px 0 12px;
         width: 100%;
         max-width: 1240px;
         z-index: 10;
         background-color: #fff;
-        border: 1px solid #F2F2F2;
+        // border: 1px solid #F2F2F2;
         .item{
+            min-width: 140px;
             display: inline-block;
             max-width: 100%;
             height: 40px;
             background: #F6F6F6;
-            border-radius: 4px;
+            // border-radius: 4px;
             line-height: 40px;
-            padding: 0 8px;
+            padding: 0 16px;
             font-size: 16px;
-            margin-right: 20px;
-            margin-bottom: 20px;
+            margin-right: 30px;
+            margin-bottom: 10px;
             cursor: pointer;
+            text-align: center;
+            border-radius: 20px;
+            box-sizing: border-box;
+            border: 1px solid transparent;
         }
         .active{
             color: #F3A52F;
-            background: #FFF5E9;
+            background: #FFFBF5;
             border: 1px solid #F3A52F;
         }
+        @media screen and (max-width: 1100px){
+            .item{
+                min-width: 90px;
+                height: 30px;
+                line-height: 28px;
+                margin-right: 15px;
+                font-size: 14px;
+                padding: 0 12px;
+            }
+        }
     }
 
 }

src/views/voice/Mine.vue

@@ -399,13 +399,13 @@ onActivated(()=>{
     .top-nav-list-box{
         position: fixed;
         top: 60px;
-        padding: 20px;
+        padding: 30px 0 12px;
         width: 100%;
         max-width: 1240px;
         z-index: 10;
         background: #FFFFFF;
-        box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.04);
-        border: 1px solid #F2F2F2;
+        // box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.04);
+        // border: 1px solid #F2F2F2;
         span{
             width: 140px;
             height: 40px;
@@ -417,6 +417,7 @@ onActivated(()=>{
             line-height: 40px;
             cursor: pointer;
             font-size: 16px;
+            box-sizing: border-box;
         }
 
         .active{