09.20 bug修改、功能开发

package-lock.json

@@ -10965,6 +10965,16 @@
         }
       }
     },
+    "px2rem-loader": {
+      "version": "0.1.9",
+      "resolved": "https://registry.npmjs.org/px2rem-loader/-/px2rem-loader-0.1.9.tgz",
+      "integrity": "sha512-3Ew8At5W/HHIIUe/KZk+FBRRb20KtgP1N1c/BnMlXk6LNkqrFmUIUF35GF/evzNdj/Q63iWJpkmn/c5qSMplRg==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^1.1.0",
+        "px2rem": "^0.5.0"
+      }
+    },
     "q": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",

package.json

@@ -35,6 +35,7 @@
     "@vue/cli-plugin-babel": "^3.8.0",
     "@vue/cli-service": "^3.8.0",
     "pdfjs-dist": "2.6.347",
+    "px2rem-loader": "^0.1.9",
     "qrcode": "^1.5.3",
     "vue-template-compiler": "^2.6.10",
     "webpack-obfuscator": "^2.6.0"

public/pdf/web/viewer.css

@@ -2600,6 +2600,9 @@ a.secondaryToolbarButton[href="#"] {
   padding: 10px 30px 0;
   overflow-x: hidden;
 }
+* {
+  scrollbar-width: 8px;
+}
 
 *::-webkit-scrollbar {
   /*滚动条轨道*/

src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="app">
+  <div id="app" ref="app">
     <Header v-if="!showHeader" class="Header" />
     <Navbar v-if="!showNavbar" class="Navbar" />
     <Content class="Content" />
@@ -7,8 +7,9 @@
     <Abandon v-model="abandon.show" />
     <isLogin v-model="is_login.show" />
     <ConfirmPopup />
-    <ToTop />
-    <ToContribute />
+    <ToTop class="FixedBtn" :style="{ left: btnLeft + 'px' }" />
+    <ToContribute class="FixedBtn" :style="{ left: btnLeft + 'px' }" />
+    <ToContact class="FixedBtn" :style="{ left: btnLeft + 'px' }" />
   </div>
 </template>
 
@@ -22,7 +23,8 @@ import Abandon from "@/components/module/abandon.vue"; // 放弃投稿
 import IsLogin from "@/components/module/is-login.vue"; // 未登录
 import ConfirmPopup from "@/components/module/confirm-popup.vue"; // 确认-通用
 import ToTop from "@/components/module/to-top.vue"; // 回到顶部
-import ToContribute from "./components/module/to-contribute.vue"; // 发布投稿
+import ToContribute from "@/components/module/to-contribute.vue"; // 发布投稿
+import ToContact from "@/components/module/to-contact.vue";
 import { mapState } from "vuex";
 
 export default {
@@ -37,10 +39,12 @@ export default {
     ConfirmPopup,
     ToTop,
     ToContribute,
+    ToContact,
   },
   data() {
     return {
       isLogin: true,
+      btnLeft: 0,
     };
   },
   computed: {
@@ -56,26 +60,26 @@ export default {
         : false;
     },
   },
-  methods: {},
+  mounted() {
+    let btnRight = 8 + 50 + 60;
+    this.btnLeft = window.innerWidth - btnRight;
+    window.onresize = () => {
+      this.$resizeListenerList.forEach((fn) => fn());
+      this.btnLeft = window.innerWidth - btnRight;
+      // body.style.zoom
+    };
+  },
 };
 </script>
 
 <style lang="scss">
 @import "~@/assets/css/common.scss";
 
-$body-width-100: calc(100vw - #{100}px);
-$body-width-min: 1080px;
-$body-height-100: calc(100vh - (#{100}px * 2));
-
-$headerHeight: 80px;
-$childBody: calc(100% - 260px);
-$navbarWidth: 180px;
-
 body {
   @extend %transitionAll;
   margin: 0;
   padding: 0;
-  min-width: 1300px;
+  min-width: 1000px;
   background-color: #f5f5f5;
 }
 .Header {
@@ -86,9 +90,10 @@ body {
   z-index: 100;
 }
 .Navbar {
-  position: absolute;
+  position: fixed;
   top: calc(#{$headerHeight} + 10px);
   left: 10px;
+  z-index: 100;
 }
 .Content {
   padding-top: $headerHeight;
@@ -96,4 +101,7 @@ body {
 .Footer {
   float: left;
 }
+.FixedBtn {
+  z-index: 50;
+}
 </style>

src/assets/css/common.scss

@@ -133,6 +133,9 @@ $scrollbarHeight: 8;
   $width: $scrollbarWidth,
   $height: $scrollbarHeight
 ) {
+  * {
+    scrollbar-width: #{$width}px;
+  }
   // 【局部】滚动条样式________________________
   &::-webkit-scrollbar {
     /*滚动条轨道*/
@@ -715,13 +718,21 @@ $orangeColor: rgba(251, 193, 105, 0.6);
   -webkit-filter: grayscale(1);
 }
 
+input,
+textarea {
+  font-family: "system-ui";
+  &::placeholder {
+    font-family: "system-ui";
+  }
+}
+
 $body-width-100: calc(100vw - #{$scrollbarWidth}px);
-$body-width-min: 1080px;
+$body-width-min: 1000px;
 $body-height-100: calc(100vh - (#{$scrollbarHeight}px * 2));
 
 $headerHeight: 80px;
 $childBody: calc(100% - 260px);
-$navbarWidth: 180px;
+$navbarWidth: 210px;
 
 // 滚动条样式________________________
 @include scrollbar(white, #cfcfcf, #aaa, 0);

src/assets/css/video-box.css

@@ -1,323 +0,0 @@
-.video-box .video-player-box,
-.video-box .video-player-box >>> .video-js,
-.video-box .video-player-box >>> video {
-  width: 100%;
-  height: 210px !important;
-  background-color: #000000;
-  padding: 0;
-}
-
-.video-box .video-player-box >>> .vjs-fullscreen video {
-  width: 100%;
-  height: auto !important;
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-.video-box >>> .prism-big-play-btn {
-  top: calc(50% - 32px) !important;
-  left: calc(50% - 32px) !important;
-}
-
-.video-player-box >>> .vjs-big-play-button {
-  top: calc(50% - 22.5px);
-  left: calc(50% - 45px);
-}
-
-.video-box >>> .full-screen-selection-btn.no-full-screen {
-  display: flex;
-}
-.video-box .prism-fullscreen >>> .full-screen-selection-btn.is-full-screen {
-  display: flex;
-}
-.video-box .prism-fullscreen >>> .full-screen-selection-btn1.is-full-screen {
-  display: flex;
-}
-.video-box .prism-fullscreen >>> .full-screen-selection-btn.no-full-screen {
-  display: none;
-}
-
-/* 倍速组件start */
-.video-box >>> .rate-components {
-  position: unset;
-}
-
-.video-box >>> .rate-list {
-  width: 100vw;
-  height: 210px !important;
-  position: fixed;
-  z-index: 9999999;
-  top: 0;
-  left: 0;
-  background: rgba(0, 0, 0, 0.9);
-  padding: 120px calc((100vw - calc(210px * 0.25 + 10px) * 5) / 2) 0;
-  box-sizing: border-box;
-}
-
-.video-box >>> .rate-list::before {
-  content: "倍速";
-  position: absolute;
-  top: 90px;
-  left: calc((100vw - calc(210px * 0.25 + 10px) * 5) / 2 + 5px);
-  color: #ffffff;
-  font-size: 15px;
-}
-
-.video-box >>> .rate-list li {
-  float: right;
-  background: none;
-  font-size: 12px;
-  width: calc(210px * 0.25);
-  height: calc(210px * 0.25);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin: 0 5px;
-  background: rgba(255, 255, 255, 0.1);
-  border-radius: 10px;
-  position: relative;
-  z-index: 9999999;
-}
-
-.video-box >>> .prism-fullscreen .rate-list {
-  width: 100vw;
-  height: 100% !important;
-  padding: 60vh calc((100vw - calc(210px * 0.25 + 10px) * 5) / 2) 0;
-}
-
-.video-box >>> .prism-fullscreen .rate-list li {
-  width: calc(210px * 0.25);
-  height: calc(210px * 0.25);
-}
-
-.video-box >>> .prism-fullscreen .rate-list::before {
-  top: calc(60vh - 40px);
-  left: calc((100vw - calc(210px * 0.25 + 10px) * 5) / 2 + 5px);
-}
-/* 倍速组件end */
-
-/* 视频非全屏start */
-.video-box >>> .prism-controlbar {
-  background: none;
-}
-
-.video-box >>> .prism-controlbar .prism-controlbar-bg {
-  display: none;
-}
-
-.video-box >>> .prism-controlbar .prism-progress {
-  width: calc(100% - 88px - 90px);
-  height: 2px;
-  left: 88px !important;
-  right: 90px !important;
-  bottom: 20px !important;
-}
-
-.video-box >>> .prism-controlbar .prism-progress .prism-progress-played {
-  background-color: #ffffff;
-  position: relative;
-}
-.video-box >>> .prism-controlbar .prism-progress .prism-progress-played::after {
-  content: "";
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: #ffffff;
-  position: absolute;
-  right: 0;
-  top: -3px;
-}
-
-.video-box >>> .prism-controlbar .prism-play-btn {
-  position: absolute;
-  left: 8px;
-  bottom: 10px;
-  margin: 0 !important;
-}
-
-.video-box >>> .prism-controlbar .prism-time-display .current-time {
-  width: 55px;
-  text-align: center;
-  position: absolute;
-  left: 31px;
-  bottom: 13px;
-  height: 17px !important;
-  font-size: 12px !important;
-  color: #ffffff;
-  display: flex !important;
-  justify-content: center;
-  align-items: center;
-}
-
-.video-box >>> .prism-controlbar .prism-time-display .duration {
-  width: 55px;
-  text-align: center;
-  position: absolute;
-  right: 32px;
-  bottom: 13px;
-  height: 17px !important;
-  font-size: 12px !important;
-  color: #ffffff;
-  display: flex !important;
-  justify-content: center;
-  align-items: center;
-}
-
-.video-box >>> .prism-controlbar .prism-fullscreen-btn {
-  position: absolute;
-  right: 8px;
-  bottom: 10px;
-  margin: 0 !important;
-}
-
-.video-box >>> .prism-player .prism-tooltip,
-.video-box >>> .prism-player .prism-thumbnail,
-.video-box >>> .prism-controlbar .prism-setting-btn,
-.video-box >>> .prism-controlbar .prism-volume,
-.video-box >>> .prism-controlbar .full-screen-selection-btn,
-.video-box >>> .prism-controlbar .rate-components,
-.video-box >>> .prism-controlbar .quality-components,
-.video-box >>> .prism-controlbar .prism-progress-cursor,
-.video-box >>> .prism-controlbar .prism-time-display .time-bound {
-  display: none !important;
-}
-.video-box >>> .prism-controlbar {
-  background: linear-gradient(0deg, black, transparent) !important;
-}
-/* 视频非全屏end */
-
-/* 视频全屏start */
-.video-box >>> .prism-fullscreen .prism-controlbar {
-  height: 100vh !important;
-  background: linear-gradient(0deg, black, transparent, black) !important;
-}
-
-.video-box >>> .prism-fullscreen .prism-controlbar .prism-progress {
-  width: 100%;
-  height: 2px;
-  left: 0 !important;
-  right: 0 !important;
-  bottom: 71px !important;
-}
-
-.video-box >>> .prism-fullscreen .prism-controlbar .prism-play-btn {
-  position: absolute;
-  left: 23px;
-  bottom: 27px;
-  margin: 0 !important;
-}
-
-.video-box
-  >>> .prism-fullscreen
-  .prism-controlbar
-  .prism-time-display
-  .current-time {
-  width: 55px;
-  text-align: center;
-  position: absolute;
-  left: 8px;
-  bottom: 83px;
-  line-height: 44px;
-}
-
-.video-box
-  >>> .prism-fullscreen
-  .prism-controlbar
-  .prism-time-display
-  .duration {
-  width: 55px;
-  text-align: center;
-  position: absolute;
-  right: 8px;
-  bottom: 83px;
-  color: #ffffff;
-  line-height: 44px;
-}
-
-.video-box >>> .prism-fullscreen .prism-controlbar .prism-fullscreen-btn {
-  position: fixed;
-  top: 36px;
-  left: 15px;
-  margin: 0 !important;
-  /* background: url(~@/assets/back-icon7.png) no-repeat; */
-  background-size: 20px 20px;
-}
-
-.video-box
-  >>> .prism-fullscreen
-  .prism-controlbar
-  .full-screen-selection-btn.is-full-screen {
-  display: block !important;
-  height: 21px;
-  position: absolute;
-  padding: 0 10px;
-  right: 16px;
-  bottom: 30px;
-  font-size: 15px;
-  color: #ffffff;
-}
-.video-box
-  >>> .prism-fullscreen
-  .prism-controlbar
-  .full-screen-selection-btn1.is-full-screen {
-  display: block !important;
-  height: 21px;
-  position: absolute;
-  padding: 0 10px;
-  left: 40px;
-  bottom: 30px;
-  font-size: 15px;
-  color: #ffffff;
-}
-.video-box >>> .prism-fullscreen .prism-controlbar .rate-components {
-  height: 21px;
-  display: block !important;
-  position: absolute;
-  right: 144px;
-  bottom: 30px;
-}
-
-.video-box >>> .prism-fullscreen .prism-controlbar .quality-components {
-  height: 21px;
-  border: 1px solid #ffffff;
-  display: block !important;
-  position: absolute;
-  right: 78px;
-  bottom: 30px;
-}
-.video-box
-  >>> .prism-fullscreen
-  .prism-controlbar
-  .quality-components
-  .quality-list {
-  width: max-content !important;
-  bottom: 25px;
-  left: 50%;
-  transform: translateX(calc(-50% + -3px));
-}
-
-.video-box
-  >>> .prism-fullscreen
-  .prism-controlbar
-  .quality-components
-  .quality-list
-  li {
-  width: 100%;
-  min-width: max-content !important;
-  text-align: center;
-  margin: 0;
-  padding: 0 3px;
-}
-
-.video-box >>> .prism-fullscreen .video-header {
-  position: fixed;
-  left: 53px;
-  top: 35px;
-  width: 70vw;
-  height: 25px;
-  font-size: 18px;
-  color: #ffffff;
-  line-height: 25px;
-  display: block !important;
-}
-/* 视频全屏end */

src/assets/css/video-box.scss

@@ -0,0 +1,372 @@
+.video-box {
+  .video-player-box,
+  .video-player-box .video-js,
+  .video-player-box video {
+    width: 100%;
+    height: 210px !important;
+    background-color: #000000;
+    padding: 0;
+  }
+
+  // 视屏容器
+  .video-player-box {
+    .vjs-fullscreen {
+      video {
+        width: 100%;
+        height: auto !important;
+        top: 50%;
+        transform: translateY(-50%);
+      }
+    }
+    .video-box .prism-big-play-btn {
+      top: calc(50% - 32px) !important;
+      left: calc(50% - 32px) !important;
+    }
+    .vjs-big-play-button {
+      top: calc(50% - 22.5px);
+      left: calc(50% - 45px);
+    }
+  }
+  // 提示栏
+  .prism-tooltip {
+    display: none !important;
+  }
+
+  // 全屏
+  .prism-fullscreen {
+    .video-header {
+      position: fixed;
+      left: 53px;
+      top: 35px;
+      width: 70vw;
+      height: 25px;
+      font-size: 18px;
+      color: #ffffff;
+      line-height: 25px;
+      display: block !important;
+    }
+    // 控制栏
+    .prism-controlbar {
+      height: 90px;
+      background: linear-gradient(0deg, black, transparent, black) !important;
+      // 进度条
+      .prism-progress {
+        width: calc(100% - 120px);
+        height: 5px;
+        top: 30px !important;
+        left: 60px !important;
+        // 已播放
+        .prism-progress-played {
+          background-color: #ffffff;
+          position: relative;
+          &::after {
+            content: "";
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+            background: #ffffff;
+            position: absolute;
+            right: 0;
+            top: -4px;
+          }
+        }
+      }
+      // 时长/时间
+      .prism-time-display {
+        // 当前时长
+        .current-time {
+          width: 55px;
+          text-align: center;
+          position: absolute;
+          left: 5px;
+          top: 24px;
+          height: 17px !important;
+          font-size: 12px !important;
+          color: #ffffff;
+          display: flex !important;
+          justify-content: center;
+          align-items: center;
+        }
+        // 总时长
+        .duration {
+          width: 55px;
+          text-align: center;
+          position: absolute;
+          right: 8px;
+          top: 24px;
+          height: 17px !important;
+          font-size: 12px !important;
+          color: #ffffff;
+          display: flex !important;
+          justify-content: center;
+          align-items: center;
+        }
+      }
+      // 倍速按钮
+      .rate-components {
+        right: 188px;
+      }
+      // 选集按钮
+      .selection-components {
+        height: 28px;
+        width: 50px;
+        line-height: 28px;
+        text-align: center;
+        position: absolute;
+        right: 138px;
+        bottom: 10px;
+        color: #fff;
+        margin: 0 !important;
+        display: block;
+        cursor: pointer;
+      }
+      // 退出全屏按钮
+      .prism-fullscreen-btn {
+        background-image: url("~@/assets/icon/退出全屏.png");
+      }
+    }
+  }
+
+  // 控制栏
+  .prism-controlbar {
+    background: linear-gradient(0deg, black, transparent) !important;
+    height: 80px;
+    box-sizing: border-box;
+    position: relative;
+
+    // 声音
+    // .prism-volume,
+    // 倍速
+    // .rate-components,
+    // 设置
+    .prism-setting-btn,
+    // 弹幕 
+    .prism-cc-btn,
+    // 清晰度 
+    .quality-components,
+    // 进度条-按钮 
+    .prism-progress-cursor,
+    // 时间分隔线 
+    .prism-time-display .time-bound {
+      display: none !important;
+    }
+
+    // 控制栏背景
+    .prism-controlbar-bg {
+      display: none;
+    }
+    // 进度条
+    .prism-progress {
+      width: calc(100% - 40px);
+      height: 5px;
+      top: 30px !important;
+      left: 20px !important;
+      // 已播放
+      .prism-progress-played {
+        background-color: #ffffff;
+        position: relative;
+        &::after {
+          content: "";
+          width: 12px;
+          height: 12px;
+          border-radius: 50%;
+          background: #ffffff;
+          position: absolute;
+          right: 0;
+          top: -4px;
+        }
+      }
+    }
+    // 时长/时间
+    .prism-time-display {
+      // 当前时长
+      .current-time {
+        width: 55px;
+        text-align: center;
+        position: absolute;
+        left: 8px;
+        top: 3px;
+        height: 17px !important;
+        font-size: 12px !important;
+        color: #ffffff;
+        display: flex !important;
+        justify-content: center;
+        align-items: center;
+      }
+      // 总时长
+      .duration {
+        width: 55px;
+        text-align: center;
+        position: absolute;
+        right: 8px;
+        top: 3px;
+        height: 17px !important;
+        font-size: 12px !important;
+        color: #ffffff;
+        display: flex !important;
+        justify-content: center;
+        align-items: center;
+      }
+    }
+    // 播放/暂停 按钮
+    .prism-play-btn {
+      position: absolute;
+      left: 16px;
+      bottom: 10px;
+      margin: 0 !important;
+    }
+    // 下一集按钮-------自定义
+    .prism-next-btn {
+      position: absolute;
+      left: 60px;
+      bottom: 10px;
+      margin: 0 !important;
+      width: 24px;
+      height: 24px;
+      background-image: url("~@/assets/icon/下一集.png");
+      background-size: 100% 100%;
+      cursor: pointer;
+    }
+
+    // 倍速
+    .rate-components {
+      width: 50px;
+      height: 28px;
+      position: absolute;
+      right: 138px;
+      bottom: 10px;
+      margin: 0 !important;
+      // 当前选中倍速
+      .current-rate {
+        width: 50px;
+        color: transparent;
+        content: "";
+        &::after {
+          color: #fff;
+          height: 28px;
+          width: 50px;
+          line-height: 28px;
+          text-align: center;
+          position: absolute;
+          right: 0;
+          top: 0;
+          content: "倍速";
+        }
+      }
+      // 倍速列表
+      .rate-list {
+        width: 300px;
+        height: 50px;
+        position: absolute;
+        z-index: 100;
+        top: -90px;
+        left: -150px;
+        background: rgba(0, 0, 0, 0.9);
+        padding: 10px;
+        li {
+          font-size: 12px;
+          width: 50px;
+          height: 50px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          margin: 0 5px;
+          background: rgba(255, 255, 255, 0.1);
+          border-radius: 10px;
+          float: right;
+        }
+        // &::before {
+        //   content: "倍速";
+        //   position: absolute;
+        //   top: 90px;
+        //   left: calc((100vw - calc(210px * 0.25 + 10px) * 5) / 2 + 5px);
+        //   color: #ffffff;
+        //   font-size: 15px;
+        // }
+      }
+    }
+    // 选集
+    .selection-components {
+      display: none;
+    }
+    // 音量按钮
+    .prism-volume {
+      position: absolute;
+      right: 102px;
+      bottom: 12px;
+      margin: 0 !important;
+      // 图标
+      .volume-icon {
+        width: 24px;
+        height: 24px;
+        background-image: url("~@/assets/icon/音量.png") !important;
+        background-size: 100% 100%;
+        // 音量动画
+        .short-horizontal,
+        .long-horizontal {
+          display: none;
+        }
+      }
+    }
+    // 网页全屏按钮
+    .prism-page-fullscreen-btn {
+      width: 24px;
+      height: 24px;
+      position: absolute;
+      right: 58px;
+      bottom: 12px;
+      margin: 0 !important;
+      background: url("~@/assets/icon/网页全屏.png");
+      background-size: 100% 100%;
+      cursor: pointer;
+    }
+    // 全屏按钮
+    .prism-fullscreen-btn {
+      position: absolute;
+      right: 18px;
+      bottom: 12px;
+      margin: 0 !important;
+      background-image: url("~@/assets/icon/全屏.png");
+      background-size: 100% 100%;
+    }
+  }
+  // 音量条
+  .prism-volume-control {
+    .volume-range {
+      .volume-value {
+        background: white !important;
+      }
+    }
+  }
+  // 选集列表
+  .selection-list-components {
+    width: 300px;
+    padding: 12px 15px;
+    box-sizing: border-box;
+    position: fixed;
+    bottom: 120px;
+    right: 150px;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    background: rgba(0, 0, 0, 0.4);
+    border-radius: 5px;
+    .list-item {
+      color: #fff;
+      padding: 10px 12px;
+      font-size: 16px;
+      font-weight: 500;
+      cursor: pointer;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+      &:hover {
+        background: rgba(0, 0, 0, 0.8);
+        border-radius: 5px;
+      }
+    }
+    .current {
+      color: #2a63f3;
+    }
+  }
+}

src/components/card/comment-detail-card.vue

@@ -72,7 +72,7 @@
           发布
         </div>
       </div>
-      <div
+      <!-- <div
         class="children-box"
         v-if="comment.children && comment.children.length"
       >
@@ -88,6 +88,14 @@
             v-on="$listeners"
           />
         </div>
+      </div> -->
+      <div class="parent-box" v-if="comment.parent_comment">
+        <CommentDetailCard
+          :comment="comment.parent_comment"
+          :isChild="true"
+          :option="option"
+          v-on="$listeners"
+        />
       </div>
     </div>
     <Report :type="reportType" :info="comment" v-model="reportVisible" />
@@ -230,7 +238,6 @@ export default {
     .content {
       width: 100%;
       font-size: 16px;
-      font-family: PingFangSC-Regular, PingFang SC;
       font-weight: 400;
       color: #151625;
     }
@@ -309,6 +316,9 @@ export default {
     .children-box {
       margin-top: 15px;
     }
+    .parent-box{
+      margin-top: 15px;
+    }
   }
 }
 </style>

src/components/card/image-text/my-buy-card.vue

@@ -105,7 +105,6 @@ export default {
       justify-content: space-between;
       .title {
         font-size: 20px;
-        font-family: PingFangSC-Regular, PingFang SC;
         font-weight: 400;
         color: #222222;
         width: 90%;

src/components/card/image-text/my-chasingFun-card.vue

@@ -109,7 +109,6 @@ export default {
       justify-content: space-between;
       .title {
         font-size: 20px;
-        font-family: PingFangSC-Regular, PingFang SC;
         font-weight: 400;
         color: #222222;
         width: 90%;

src/components/card/image-text/my-release-card.vue

@@ -165,7 +165,6 @@ export default {
       justify-content: space-between;
       .title {
         font-size: 20px;
-        font-family: PingFangSC-Regular, PingFang SC;
         font-weight: 400;
         color: #222222;
         width: 90%;
@@ -195,7 +194,6 @@ export default {
         display: flex;
         align-items: center;
         font-size: 12px;
-        font-family: MicrosoftSansSerif;
         color: #666666;
         .icon {
           width: 14px;

src/components/card/information/my-chasingFun-card.vue

@@ -113,7 +113,6 @@ export default {
       justify-content: space-between;
       .title {
         font-size: 20px;
-        font-family: PingFangSC-Regular, PingFang SC;
         font-weight: 400;
         color: #222222;
         width: 90%;

src/components/card/information/my-release-card.vue

@@ -156,7 +156,6 @@ export default {
       justify-content: space-between;
       .title {
         font-size: 20px;
-        font-family: PingFangSC-Regular, PingFang SC;
         font-weight: 400;
         color: #222222;
         width: 90%;
@@ -186,7 +185,6 @@ export default {
         display: flex;
         align-items: center;
         font-size: 12px;
-        font-family: MicrosoftSansSerif;
         color: #666666;
         .icon {
           width: 14px;

src/components/card/video/my-buy-card.vue

@@ -105,7 +105,6 @@ export default {
       justify-content: space-between;
       .title {
         font-size: 20px;
-        font-family: PingFangSC-Regular, PingFang SC;
         font-weight: 400;
         color: #222222;
         width: 90%;

src/components/card/video/my-chasingFun-card.vue

@@ -109,7 +109,6 @@ export default {
       justify-content: space-between;
       .title {
         font-size: 20px;
-        font-family: PingFangSC-Regular, PingFang SC;
         font-weight: 400;
         color: #222222;
         width: 90%;

src/components/card/video/my-collect-card.vue

@@ -5,7 +5,11 @@
         <CardCoverDetail :info="info" />
       </div>
       <div class="footer">
-        <CardFooter :info="info" v-on="$listeners" />
+        <CardFooter
+          :info="info"
+          :dict="{ is_like: 'is_praise', like_num: 'praise_num' }"
+          v-on="$listeners"
+        />
       </div>
     </CardBox>
   </div>

src/components/card/video/my-release-card.vue

@@ -150,7 +150,6 @@ export default {
       justify-content: space-between;
       .title {
         font-size: 20px;
-        font-family: PingFangSC-Regular, PingFang SC;
         font-weight: 400;
         color: #222222;
         width: 90%;
@@ -180,7 +179,6 @@ export default {
         display: flex;
         align-items: center;
         font-size: 12px;
-        font-family: MicrosoftSansSerif;
         color: #666666;
         .icon {
           width: 14px;

src/components/card/video/my-reply-card.vue

@@ -15,7 +15,7 @@
       <div class="target" @click="$emit('handleToDetail')">
         <CardContent
           style="margin-bottom: 10px"
-          :content="`@${info.user_name}：${info.parent_comment.content}`"
+          :content="`@${info.parent_comment.name}：${info.parent_comment.content}`"
         />
         <CardCoverDetail
           :info="{

src/components/image-text/image-text-all-card.vue

@@ -45,17 +45,17 @@ export default {
   background: white;
   border-radius: 12px;
   padding: 20px 20px;
-  height: 240px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   > .left {
     width: 360px;
-    height: 200px;
+    height: 220px;
     position: relative;
     .cover {
       width: 100%;
       height: 100%;
+      object-fit: cover;
     }
     .type {
       height: 24px;
@@ -81,7 +81,6 @@ export default {
     .header {
       .title {
         font-size: 20px;
-        font-family: PingFangSC-Regular, PingFang SC;
         font-weight: 400;
         color: #222222;
         width: 90%;

src/components/image-text/image-text-collection-card.vue

@@ -89,7 +89,6 @@ export default {
     .header {
       .title {
         font-size: 20px;
-        font-family: PingFangSC-Regular, PingFang SC;
         font-weight: 400;
         color: #222222;
         width: 90%;

src/components/image-text/image-text-detail-content.vue

@@ -67,8 +67,8 @@ export default {
         c.style.width = "max-content";
         c.style.height = windowHeight + "px";
         c.style.fontSize = fontSize + "px";
-        c.style.transform = "rotateZ(315deg)";
-        c.style.color = "rgba(0, 0, 0, 0.20)";
+        c.style.transform = "rotateZ(315deg) scale(0.7)";
+        c.style.color = "rgba(0, 0, 0, 0.15)";
         c.style.fontWeight = "bold";
         c.style.display = "flex";
         c.style.flexDirection = "column";

src/components/image-text/image-text-recommend-card.vue

@@ -97,15 +97,17 @@ export default {
 <style lang="scss" scoped>
 .image-text-recommend-card {
   width: calc(100% - 40px);
+  min-width: 600px;
+  aspect-ratio: 4/1;
   display: flex;
   align-items: center;
   justify-content: space-between;
   background-color: white;
   padding: 20px;
+  box-sizing: border-box;
   cursor: default;
   .content {
-    width: calc(100% - 400px);
-    height: 100%;
+    width: 58%;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
@@ -184,8 +186,8 @@ export default {
     }
   }
   .cover {
-    width: 360px;
-    height: 200px;
+    width: 40%;
+    aspect-ratio: 9/5;
     object-fit: cover;
   }
 }

src/components/image-text/image-text-recommend-image-card.vue

@@ -39,6 +39,7 @@ export default {
   width: calc(100% - 40px);
   background-color: white;
   padding: 20px;
+  box-sizing: border-box;
   cursor: default;
   .header {
     .title {

src/components/information/information-recommend-card.vue

@@ -11,7 +11,7 @@
         <div class="time">{{ info.release_time.slice(0, 10) }}</div>
       </div>
     </div>
-    <img class="vip" src="@/assets/icon/vip.png" />
+    <img class="vip" v-if="info.is_vip" src="@/assets/icon/vip.png" />
   </div>
 </template>
 

src/components/layout/Content.vue

@@ -1,6 +1,9 @@
 <template>
   <div :class="isFill ? 'router-content-fill' : 'router-content'">
-    <router-view :key="$route.fullPath"></router-view>
+    <keep-alive v-if="$route.meta.keepAlive">
+      <router-view :key="$route.fullPath"></router-view
+    ></keep-alive>
+    <router-view :key="$route.fullPath" v-else></router-view>
   </div>
 </template>
 
@@ -19,7 +22,7 @@ export default {
 .router-content {
   margin: 10px 0 0;
   float: right;
-  width: calc(100% - 250px);
+  width: calc(100% - #{$navbarWidth} - 10px);
 }
 .router-content-fill {
   width: 100%;

src/components/layout/Footer.vue

@@ -39,10 +39,12 @@ export default {
         {
           label: "客服中心",
           key: "customer_service",
+          click: () => this.$router.push("contact-online"),
         },
         {
           label: "会员说明",
           key: "user_equity",
+          click: this.toAgreement,
         },
         {
           label: "原创公约",

src/components/layout/Header.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="header">
-    <div
-      class="header-icon"
-      @click="routePath !== '/index' ? $router.push('/index') : ''"
-    >
-      GYXQCDZ
-    </div>
+    <div class="header-icon" @click="$router.push('/index')">GYXQCDZ</div>
     <div class="header-search">
-      <input class="search" type="text" v-model="searchState.value" />
+      <input
+        class="search"
+        type="text"
+        v-model="searchState.value"
+        @keydown.enter="handleSearch"
+      />
       <div class="hot">
         <img src="@/assets/icon/热搜榜.png" />
         <span>热搜榜</span>
@@ -37,7 +37,9 @@
               userInfo.headimg ? userInfo.headimg : '@/assets/icon/avatar.png'
             "
             @click="
-              routePath == '/index' ? $router.push('/vip') : handlePersonal()
+              vipPath.includes(routePath)
+                ? $router.push('/vip')
+                : handlePersonal()
             "
           />
           <div class="mark" v-if="centerMarkNum">{{ centerMarkNum }}</div>
@@ -62,6 +64,7 @@ export default {
   data() {
     return {
       path: ["video", "image-text", "information"],
+      vipPath: ["/index", "/search"],
     };
   },
   computed: {
@@ -82,8 +85,8 @@ export default {
     centerMarkNum() {
       let markNumState =
           this[
-            `${this.handleFilter().replace(/^\w/, function (match) {
-              return match.toLowerCase();
+            `${this.handleFilter().replace(/-([a-z])/g, function (g) {
+              return g[1].toUpperCase();
             })}MarkNum`
           ],
         num = 0,
@@ -150,7 +153,6 @@ export default {
   .header-icon {
     width: 160px;
     font-size: 28px;
-    font-family: ".SFNS-Regular, SFNS";
     font-weight: 400;
     color: #2a63f3;
     line-height: 38px;

src/components/layout/Navbar.vue

@@ -105,7 +105,11 @@ export default {
   },
   methods: {
     handlePush(item, index) {
-      if (item.link == this.routePath) return;
+      if (
+        item.link == this.routePath ||
+        item.link + item.children == this.routePath
+      )
+        return;
       if (!item.link) return this.$message.info("敬请期待");
       this.current = index;
       if (this.isCenter) {
@@ -129,8 +133,14 @@ export default {
   // width: calc(#{$body-width-100} * 0.15);
   width: $navbarWidth;
   padding: 25px;
-  box-sizing: content-box;
+  box-sizing: border-box;
   user-select: none;
+  height: calc(100vh - 8px - 90px);
+  overflow-y: auto;
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
+    width: 0;
+  }
   .navbar-item {
     width: calc(100% - 40px);
     height: 40px;

src/components/layout/childNavbar.vue

@@ -11,7 +11,7 @@
         <img :src="current == index ? item.icon_s : item.icon" alt="" />
         <span :class="{ blue: current == index }">{{ item.title }}</span>
         <div class="mark" v-if="item.numKey && !!num[item.numKey]">
-          {{ item.shape == "shape" ? "" : num[item.numKey] }}
+          {{ item.shape == "round" ? "" : num[item.numKey] }}
         </div>
       </div>
     </template>

src/components/module/collection.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="collection">
-    <div class="left" @click="$emit('toCollection')">
+  <div class="collection" @click="$emit('toCollection')">
+    <div class="left">
       <div class="top">
         <img class="icon" src="@/assets/icon/合集_蓝色.png" alt="" />
         <span class="title">{{ title || "---" }} </span>
@@ -11,7 +11,7 @@
     <div
       class="right"
       :class="{ switch: follow_switch }"
-      @click="$emit('handleSwitch')"
+      @click.stop="$emit('handleSwitch')"
     >
       <img
         :src="

src/components/module/contact-service.vue

@@ -15,7 +15,12 @@
           <div class="footer-btn cancel" @click="$emit('visible', false)">
             取消
           </div>
-          <div class="footer-btn confirm" @click="">联系客服</div>
+          <div
+            class="footer-btn confirm"
+            @click="$router.push('contact-online')"
+          >
+            联系客服
+          </div>
         </div>
       </div>
     </el-dialog>

src/components/module/contribute/contribute-tab.vue

@@ -6,7 +6,7 @@
       :class="{ select: index == current }"
       @click="
         (_) => {
-          !index ? $emit('changeTab', index) : $message.info('敬请期待');
+          !index ? $emit('changeTab', index) : $router.push('contact-online');
         }
       "
     >

src/components/module/detail-title.vue

@@ -18,14 +18,14 @@
           <img src="@/assets/icon/简介_蓝色.png" alt="" />
           <span>简介</span>
         </div>
-        <div
+        <!-- <div
           class="item"
           v-if="info.goods_id"
           @click="$message.success('敬请期待')"
         >
           <img src="@/assets/icon/产品_蓝色.png" alt="" />
           <span>相关产品</span>
-        </div>
+        </div> -->
         <div class="item" v-if="info.video_id" @click="$emit('toVideoDetail')">
           <img src="@/assets/icon/视频.png" alt="" />
           <span>相关视频</span>

src/components/module/invoice.vue

@@ -285,7 +285,6 @@ export default {
         .get-header {
           height: 50px;
           font-size: 14px;
-          font-family: PingFangSC-Regular, PingFang SC;
           font-weight: 400;
           color: #2a63f3;
           display: flex;

src/components/module/screen.vue

@@ -18,7 +18,7 @@
     <div class="children" v-if="show_second">
       <div
         class="children-item"
-        v-for="item in current.children"
+        v-for="item in childrenList"
         :class="{ 'children-select': item.id == childrenCurrent.id }"
         @click="childrenCurrent = item"
       >
@@ -54,9 +54,16 @@ export default {
       deep: true,
     },
   },
+  computed: {
+    childrenList() {
+      return this.current.children
+        ? [{ id: 0, title: "全部" }, ...this.current.children]
+        : [];
+    },
+  },
   mounted() {
     this.current = this.list[0];
-    this.childrenCurrent = this.list[0].children[0];
+    this.childrenCurrent = this.childrenList[0];
   },
 };
 </script>
@@ -123,6 +130,9 @@ export default {
     }
   }
 }
+.parents {
+  scrollbar-width: 10px !important;
+}
 .parents::-webkit-scrollbar {
   width: 10px !important;
 }

src/components/module/to-contact.vue

@@ -0,0 +1,33 @@
+<template>
+  <div
+    class="to-contact"
+    v-if="!$route.meta.children"
+    @click="$router.push('contact-online')"
+  >
+    <img src="@/assets/icon/客服.png" alt="" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ToContact",
+  data() {
+    return {
+      show: false,
+    };
+  },
+  methods: {
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.to-contact {
+  position: fixed;
+  bottom: 30px;
+  img {
+    width: 60px;
+    height: 60px;
+  }
+}
+</style>

src/components/module/to-contribute.vue

@@ -1,5 +1,9 @@
 <template>
-  <div class="to-contribute" v-if="handleFilter()" @click="handleContribute">
+  <div
+    class="to-contribute"
+    v-if="handleFilter() && !$route.meta.children"
+    @click="handleContribute"
+  >
     <img src="@/assets/icon/发布投稿.png" alt="" />
   </div>
 </template>
@@ -46,8 +50,7 @@ export default {
 <style lang="scss" scoped>
 .to-contribute {
   position: fixed;
-  bottom: 80px;
-  right: 20px;
+  bottom: 100px;
   img {
     width: 60px;
     height: 60px;

src/components/module/to-next.vue

@@ -0,0 +1,58 @@
+<template>
+  <div
+    class="to-next"
+    :style="{ left: btnLeft + 'px' }"
+    @click="$emit('toNext')"
+  >
+    <img src="@/assets/icon/next_unread.png" alt="" />
+    <span>下一条未读</span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ToNext",
+  data() {
+    return {
+      btnLeft: 0,
+      btnRight: 8 + 50 + 200,
+    };
+  },
+  mounted() {
+    this.btnLeft = window.innerWidth - this.btnRight;
+    this.$resizeListenerList.push(this.setBtnLeft);
+  },
+  methods: {
+    setBtnLeft() {
+      this.btnLeft = window.innerWidth - this.btnRight;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.to-next {
+  width: 200px;
+  height: 60px;
+  background: #ffffff;
+  border-radius: 40px;
+  border: 1px solid #0054f7;
+  position: fixed;
+  bottom: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  user-select: none;
+  cursor: pointer;
+  img {
+    width: 14px;
+    height: 14px;
+  }
+  span {
+    font-size: 18px;
+    font-weight: 500;
+    color: #0054f7;
+    margin-left: 10px;
+  }
+}
+</style>

src/components/module/to-top.vue

@@ -40,8 +40,7 @@ export default {
 <style lang="scss" scoped>
 .to-top {
   position: fixed;
-  bottom: 150px;
-  right: 20px;
+  bottom: 170px;
   img {
     width: 60px;
     height: 60px;

src/components/search/search-tab.vue

@@ -59,7 +59,6 @@ export default {
   }
   .tab-item-current {
     font-size: 20px;
-    font-family: PingFangSC-Medium, PingFang SC;
     font-weight: 500;
     color: #2a63f3;
     border-bottom: 5px solid #2a63f3;

src/components/video/video-all-card.vue

@@ -26,25 +26,26 @@ export default {
   display: flex;
   align-items: center;
   width: 100%;
+  aspect-ratio: 25/5;
   background-color: white;
   box-sizing: border-box;
   padding: 15px 20px;
   .cover {
-    width: 360px;
-    height: 200px;
+    width: 30%;
+    aspect-ratio: 9/5;
     img {
       width: 100%;
-      height: 100%;
+      aspect-ratio: 9/5;
       object-fit: cover;
     }
   }
   .info {
-    width: calc(100% - 380px);
-    height: 160px;
+    width: 60%;
     margin-left: 20px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
+    aspect-ratio: 20/5;
     .title {
       font-size: 20px;
       font-weight: 400;

src/components/video/video-player.vue

@@ -59,6 +59,20 @@
       </div>
     </div>
     <IsVip ref="isLoginVip" v-model="vipVisible" />
+    <div
+      v-show="selection_show"
+      ref="SelectionListComponents"
+      class="selection-list-components"
+    >
+      <div
+        class="list-item"
+        v-for="(item, index) in this.info.video_arr"
+        :class="{ current: currentVideo.id == item.id }"
+        @click="handleSelection(index)"
+      >
+        {{ item.title }}
+      </div>
+    </div>
   </div>
 </template>
 
@@ -98,14 +112,8 @@ export default {
       // 阿里播放器初始化结束
       aliPlayerInitEnd: false,
 
-      // 是否replace跳转页面 1是
-      replace: 0,
-
-      // 全屏-选集弹窗
-      fullScreenSelection: false,
-
-      //倍速-弹窗
-      doubleSpeed: false,
+      // 选集弹窗
+      selection_show: false,
     };
   },
   computed: {
@@ -114,8 +122,14 @@ export default {
       const videoArr = this.info.video_arr || [];
       return videoArr.length > 0 ? videoArr[this.videoArrIndex] : {};
     },
+    nextIndex() {
+      return (
+        this.info.video_arr.findIndex((item) => item == this.currentVideo) + 1
+      );
+    },
   },
   mounted() {
+    this.selection_show = false;
     this.initPlayer();
   },
   methods: {
@@ -154,15 +168,12 @@ export default {
     // 初始化阿里云播放器
     initAliPlayer(url, cover, ali_vid) {
       this.ali_vid = ali_vid;
+      let that = this;
       if (!!ali_vid === false) {
         this.aliPlayerInitEnd = true;
         return;
       }
-      // 自定义组件 - 手机号
-      const positionPhone = Aliplayer.Component({
-        init: () => {},
-        createEl: (el) => el.appendChild(this.$refs["position-phone"]),
-      });
+
       const aliplayerCreatedFn = (player) => {
         this.aliPlayerInitEnd = true;
         // 360浏览器层级问题
@@ -212,6 +223,66 @@ export default {
         /* return返回的是自定义起播时间  */
         return localStorage.getItem(memoryVideo);
       };
+      // 自定义组件 - 手机号水印
+      const positionPhone = Aliplayer.Component({
+        init: () => {},
+        createEl: (el) => el.appendChild(this.$refs["position-phone"]),
+      });
+      // 自定义组件 - 下一集
+      const NextComponent = Aliplayer.Component({
+        createEl: (el) => {
+          const bar = [...el.children].find((item) =>
+            item.className.includes("prism-controlbar")
+          );
+          const next = document.createElement("div");
+          // next.style.display =
+          //   this.nextIndex == this.info.video_arr.length - 1 ? "none !important" : "block";
+          next.setAttribute("class", "prism-next-btn");
+          next.addEventListener("click", (_) =>
+            that.handleSelection(that.nextIndex)
+          );
+          bar.appendChild(next);
+        },
+      });
+      // 自定义组件 - 网页全屏
+      const PageFullScreenComponent = Aliplayer.Component({
+        createEl: (el) => {
+          const bar = [...el.children].find((item) =>
+            item.className.includes("prism-controlbar")
+          );
+          const fullScreen = document.createElement("div");
+          fullScreen.addEventListener("click", (_) =>
+            that.$emit("handleFullScreen")
+          );
+          fullScreen.setAttribute("class", "prism-page-fullscreen-btn");
+          bar.appendChild(fullScreen);
+        },
+      });
+      // 自定义组件 - 选集按钮
+      const SelectionComponents = Aliplayer.Component({
+        createEl: (el) => {
+          const bar = [...el.children].find((item) =>
+            item.className.includes("prism-controlbar")
+          );
+          const selection = document.createElement("div");
+          selection.addEventListener(
+            "click",
+            (_) => (that.selection_show = true)
+          );
+
+          selection.setAttribute("class", "selection-components");
+          selection.innerHTML = "选集";
+          bar.appendChild(selection);
+        },
+      });
+      // 自定义组件 - 选集列表
+      const SelectionListComponents = Aliplayer.Component({
+        createEl: (el) => {
+          const selection = this.$refs["SelectionListComponents"];
+          el.appendChild(selection);
+        },
+      });
+
       const aliPlayerOption = {
         id: "player-con",
         format: "m3u8",
@@ -223,7 +294,7 @@ export default {
         rePlay: false, // 播放器自动循环播放
         playsinline: true, // H5是否内置播放
         preload: true, // 播放器自动加载
-        controlBarVisibility: "hover", // 控制栏显示方式
+        controlBarVisibility: "always", // 控制栏显示方式
         useH5Prism: true, // 指定使用H5播放器
         keyShortCuts: true, // 是否启用快捷键
         showBarTime: 3000,
@@ -232,6 +303,25 @@ export default {
             name: "positionPhone",
             type: positionPhone,
           },
+          that.nextIndex !== that.info.video_arr.length
+            ? {
+                name: "NextComponent",
+                type: NextComponent,
+              }
+            : "",
+          {
+            name: "PageFullScreenComponent",
+            type: PageFullScreenComponent,
+          },
+          {
+            name: "SelectionComponents",
+            type: SelectionComponents,
+          },
+
+          {
+            name: "SelectionListComponents",
+            type: SelectionListComponents,
+          },
           {
             name: "RateComponent",
             type: AliPlayerComponent.RateComponent,
@@ -250,7 +340,7 @@ export default {
             type: AliPlayerComponent.MemoryPlayComponent,
             args: [false, getTime, saveTime], //args里的参数表示：第一个参数表示是否自动播放记忆时间，false为否，需要点击跳转到上次记忆的时间；第二和三个参数表示获取的时间和存入的时间
           },
-        ],
+        ].filter((item) => item),
       };
       VideoDemandService.getVideoCredentials().then(({ data }) => {
         const encryptOption = {
@@ -300,17 +390,22 @@ export default {
         });
       }
     },
+    // 播放下一集
+    handleSelection(index) {
+      this.aliPlayer.fullscreenService.cancelFullScreen();
+      this.$emit("changeEpisode", index);
+    },
   },
 };
 </script>
-
+<style lang="scss">
+@import "~@/assets/css/video-box.scss";
+</style>
 <style lang="scss" scoped>
-@import "~@/assets/css/video-box.css";
-
 .video-player {
   width: 100%;
-  height: 100%;
   position: relative;
+  aspect-ratio: 16/9;
   .video-box {
     width: 100%;
     height: 100%;

src/components/video/video-recommend-card.vue

@@ -4,7 +4,7 @@
       <img class="cover" :src="info.cover" alt="" />
       <div class="play">
         <img src="@/assets/icon/play.png" alt="" />
-        <span>{{info.read_num}}</span>
+        <span>{{ info.read_num }}</span>
       </div>
       <div class="time">{{ info.duration | auditTime("--:--") }}</div>
       <img
@@ -57,13 +57,15 @@ export default {
   align-items: center;
   background-color: white;
   border-radius: 12px;
+  padding: 30px;
+  box-sizing: border-box;
   .cover-box {
-    width: 430px;
-    height: 240px;
+    width: 100%;
+    aspect-ratio: 43/24;
     position: relative;
     .cover {
       width: 100%;
-      height: 100%;
+      aspect-ratio: 43/24;
       border-radius: 12px;
       object-fit: cover;
     }
@@ -102,7 +104,7 @@ export default {
   }
 
   .title {
-    width: 430px;
+    width: 100%;
     margin: 20px 0;
     div {
       width: 75%;
@@ -115,7 +117,7 @@ export default {
     }
   }
   .app {
-    width: 430px;
+    width: 100%;
     font-size: 14px;
     font-weight: 400;
     color: #999999;

src/components/video/video-sidebar.vue

@@ -99,15 +99,18 @@ export default {
 
 <style lang="scss" scoped>
 .video-sidebar {
-  width: 100%;
   background-color: white;
-  padding: 20px 30px;
-  box-sizing: border-box;
-  border-radius: 12px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
   .app {
+    height: 50px;
     display: flex;
     align-items: center;
     margin-bottom: 20px;
+    margin-top: 10px;
     .app-logo {
       width: 50px;
       height: 50px;
@@ -126,12 +129,14 @@ export default {
   }
   .collection {
     width: 100%;
+    height: calc(100% - 70px);
     background: #f1f1f1;
     border-radius: 10px;
     box-sizing: border-box;
     padding: 15px 10px;
     user-select: none;
     .header {
+      height: 60px;
       .top {
         display: flex;
         align-items: center;
@@ -180,6 +185,7 @@ export default {
       }
     }
     .switch {
+      height: 25px;
       font-size: 18px;
       font-weight: 500;
       color: #141414;
@@ -193,10 +199,12 @@ export default {
       }
     }
     .list {
+      height: calc(100% - 125px);
       width: 100%;
       display: flex;
       flex-direction: column;
       align-items: center;
+      overflow-y: auto;
       .list-item {
         width: 100%;
         display: flex;

src/components/vip/order-card.vue

@@ -22,7 +22,7 @@
             : "申请开票"
         }}
       </div>
-      <div class="btn">联系客服</div>
+      <div class="btn" @click="$router.push('contact-online')">联系客服</div>
     </div>
   </div>
 </template>

src/lib/flexible.js

@@ -0,0 +1,126 @@
+
+;(function(win, lib) {
+    var doc = win.document;
+    var docEl = doc.documentElement;
+    var metaEl = doc.querySelector('meta[name="viewport"]');
+    var flexibleEl = doc.querySelector('meta[name="flexible"]');
+    var dpr = 0;
+    var scale = 0;
+    var tid;
+    var flexible = lib.flexible || (lib.flexible = {});
+
+    if (metaEl) {
+        console.warn('将根据已有的meta标签来设置缩放比例');
+        var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);
+        if (match) {
+            scale = parseFloat(match[1]);
+            dpr = parseInt(1 / scale);
+        }
+    } else if (flexibleEl) {
+        var content = flexibleEl.getAttribute('content');
+        if (content) {
+            var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
+            var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);
+            if (initialDpr) {
+                dpr = parseFloat(initialDpr[1]);
+                scale = parseFloat((1 / dpr).toFixed(2));
+            }
+            if (maximumDpr) {
+                dpr = parseFloat(maximumDpr[1]);
+                scale = parseFloat((1 / dpr).toFixed(2));
+            }
+        }
+    }
+
+    if (!dpr && !scale) {
+        var isAndroid = win.navigator.appVersion.match(/android/gi);
+        var isIPhone = win.navigator.appVersion.match(/iphone/gi);
+        var devicePixelRatio = win.devicePixelRatio;
+        if (isIPhone) {
+            // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
+            if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
+                dpr = 3;
+            } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
+                dpr = 2;
+            } else {
+                dpr = 1;
+            }
+        } else {
+            // 其他设备下，仍旧使用1倍的方案
+            dpr = 1;
+        }
+        scale = 1 / dpr;
+    }
+
+    docEl.setAttribute('data-dpr', dpr);
+    if (!metaEl) {
+        metaEl = doc.createElement('meta');
+        metaEl.setAttribute('name', 'viewport');
+        metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
+        if (docEl.firstElementChild) {
+            docEl.firstElementChild.appendChild(metaEl);
+        } else {
+            var wrap = doc.createElement('div');
+            wrap.appendChild(metaEl);
+            doc.write(wrap.innerHTML);
+        }
+    }
+
+    // function refreshRem(){
+    //     var width = docEl.getBoundingClientRect().width;
+    //     if (width / dpr > 540) {
+    //         width = 540 * dpr;
+    //     }
+    //     var rem = width / 10;
+    //     docEl.style.fontSize = rem + 'px';
+    //     flexible.rem = win.rem = rem;
+    // }
+    function refreshRem() {
+        var width = docEl.getBoundingClientRect().width;
+        if (width / dpr > 540) {
+          width = width * dpr;
+        }
+        //缩放比例，可按实际情况修改var rem = width / 8;docEl.style.fontSize = rem + 'px';flexible.rem = win.rem = rem;
+    }
+      
+
+    win.addEventListener('resize', function() {
+        clearTimeout(tid);
+        tid = setTimeout(refreshRem, 300);
+    }, false);
+    win.addEventListener('pageshow', function(e) {
+        if (e.persisted) {
+            clearTimeout(tid);
+            tid = setTimeout(refreshRem, 300);
+        }
+    }, false);
+
+    if (doc.readyState === 'complete') {
+        doc.body.style.fontSize = 12 * dpr + 'px';
+    } else {
+        doc.addEventListener('DOMContentLoaded', function(e) {
+            doc.body.style.fontSize = 12 * dpr + 'px';
+        }, false);
+    }
+
+
+    refreshRem();
+
+    flexible.dpr = win.dpr = dpr;
+    flexible.refreshRem = refreshRem;
+    flexible.rem2px = function(d) {
+        var val = parseFloat(d) * this.rem;
+        if (typeof d === 'string' && d.match(/rem$/)) {
+            val += 'px';
+        }
+        return val;
+    }
+    flexible.px2rem = function(d) {
+        var val = parseFloat(d) / this.rem;
+        if (typeof d === 'string' && d.match(/px$/)) {
+            val += 'rem';
+        }
+        return val;
+    }
+
+})(window, window['lib'] || (window['lib'] = {}));

src/main.js

@@ -2,9 +2,10 @@ import Vue from "vue";
 import App from "./App.vue";
 
 // rem适配
-import "lib-flexible/flexible";
+// import "lib-flexible/flexible";
+import "./lib/flexible.js";
 // 状态管理
-import store from './store/index'
+import store from "./store/index";
 // 路由
 import router from "./router";
 import Router from "vue-router";
@@ -27,6 +28,9 @@ import "video.js/dist/video-js.css";
 import { baseURL } from "@/common/request";
 Vue.use(VueVideoPlayer);
 
+Vue.prototype.$WindowMaxWidth = window.screen.availWidth;
+Vue.prototype.$resizeListenerList = [];
+
 Vue.config.productionTip = false;
 new Vue({
   router: router,

src/router/image-text-routes.js

@@ -1,116 +1,120 @@
 // 图文路由
 export const imageTextRoutes = [
-	{
-	  path: "/image-text",
-	  meta: {
-		title: "图文", // 页面标题title
-	  },
-	  component: () => import("@/views/image-text/index.vue"),
-	  children: [
-		{
-		  path: "comment-on-my",
-		  component: () => import("@/views/image-text/children/comment-on-my.vue"),
-		  meta: {
-			title: "图文-评论我的", // 页面标题title
-		  },
-		},
-		{
-		  path: "reply-on-my",
-		  component: () => import("@/views/image-text/children/reply-on-my.vue"),
-		  meta: {
-			title: "图文-回复我的", // 页面标题title
-		  },
-		},
-		{
-		  path: "like-on-my",
-		  component: () => import("@/views/image-text/children/like-on-my.vue"),
-		  meta: {
-			title: "图文-点赞我的", // 页面标题title
-		  },
-		},
-		{
-		  path: "my-chasingFun",
-		  component: () => import("@/views/image-text/children/my-chasingFun.vue"),
-		  meta: {
-			title: "图文-我的订阅", // 页面标题title
-		  },
-		},
-		{
-		  path: "my-comment",
-		  component: () => import("@/views/image-text/children/my-comment.vue"),
-		  meta: {
-			title: "图文-我的评论", // 页面标题title
-		  },
-		},
-		{
-		  path: "my-reply",
-		  component: () => import("@/views/image-text/children/my-reply.vue"),
-		  meta: {
-			title: "图文-我的回复", // 页面标题title
-		  },
-		},
-		{
-		  path: "my-like",
-		  component: () => import("@/views/image-text/children/my-like.vue"),
-		  meta: {
-			title: "图文-我的点赞", // 页面标题title
-		  },
-		},
-		{
-		  path: "my-release",
-		  component: () => import("@/views/image-text/children/my-release.vue"),
-		  meta: {
-			title: "图文-我的发布", // 页面标题title
-		  },
-		},
-		{
-		  path: "my-buy",
-		  component: () => import("@/views/image-text/children/my-buy.vue"),
-		  meta: {
-			title: "图文-我的已购", // 页面标题title
-		  },
-		},
-		{
-		  path: "my-collect",
-		  component: () => import("@/views/image-text/children/my-collect.vue"),
-		  meta: {
-			title: "图文-我的收藏", // 页面标题title
-		  },
-		},
-		{
-		  path: "study-history",
-		  component: () => import("@/views/image-text/children/study-history.vue"),
-		  meta: {
-			title: "图文-学习历史", // 页面标题title
-		  },
-		},
-	  ],
-	},
-	{
-		path: "/image-text-collection",
-		name: "image-text-collection",
-		component: () => import("@/views/image-text/image-text-collection.vue"),
-		meta: {
-		  title: "图文-图文合集", // 页面标题title
-		},
-	  },
-	{
-	  path: "/image-text-detail",
-	  name: "image-text-detail",
-	  component: () => import("@/views/image-text/image-text-detail.vue"),
-	  meta: {
-		title: "图文-图文详情", // 页面标题title
-		empty: ["Navbar"],
-		fill: true,
-	  },
-	},
-	{
-	  path: "/image-text-contribute",
-	  name: "image-text-contribute",
-	  component: () => import("@/views/image-text/image-text-contribute.vue"),
-	  meta: {
-		title: "图文-投稿图文", // 页面标题title
-	  },
-	},
-  ];
-  
+  {
+    path: "/image-text",
+    meta: {
+      title: "图文", // 页面标题title
+      keepAlive: true,
+    },
+    component: () => import("@/views/image-text/index.vue"),
+    children: [
+      {
+        path: "comment-on-my",
+        component: () =>
+          import("@/views/image-text/children/comment-on-my.vue"),
+        meta: {
+          title: "图文-评论我的", // 页面标题title
+        },
+      },
+      {
+        path: "reply-on-my",
+        component: () => import("@/views/image-text/children/reply-on-my.vue"),
+        meta: {
+          title: "图文-回复我的", // 页面标题title
+        },
+      },
+      {
+        path: "like-on-my",
+        component: () => import("@/views/image-text/children/like-on-my.vue"),
+        meta: {
+          title: "图文-点赞我的", // 页面标题title
+        },
+      },
+      {
+        path: "my-chasingFun",
+        component: () =>
+          import("@/views/image-text/children/my-chasingFun.vue"),
+        meta: {
+          title: "图文-我的订阅", // 页面标题title
+        },
+      },
+      {
+        path: "my-comment",
+        component: () => import("@/views/image-text/children/my-comment.vue"),
+        meta: {
+          title: "图文-我的评论", // 页面标题title
+        },
+      },
+      {
+        path: "my-reply",
+        component: () => import("@/views/image-text/children/my-reply.vue"),
+        meta: {
+          title: "图文-我的回复", // 页面标题title
+        },
+      },
+      {
+        path: "my-like",
+        component: () => import("@/views/image-text/children/my-like.vue"),
+        meta: {
+          title: "图文-我的点赞", // 页面标题title
+        },
+      },
+      {
+        path: "my-release",
+        component: () => import("@/views/image-text/children/my-release.vue"),
+        meta: {
+          title: "图文-我的发布", // 页面标题title
+        },
+      },
+      {
+        path: "my-buy",
+        component: () => import("@/views/image-text/children/my-buy.vue"),
+        meta: {
+          title: "图文-我的已购", // 页面标题title
+        },
+      },
+      {
+        path: "my-collect",
+        component: () => import("@/views/image-text/children/my-collect.vue"),
+        meta: {
+          title: "图文-我的收藏", // 页面标题title
+        },
+      },
+      {
+        path: "study-history",
+        component: () =>
+          import("@/views/image-text/children/study-history.vue"),
+        meta: {
+          title: "图文-学习历史", // 页面标题title
+        },
+      },
+    ],
+  },
+  {
+    path: "/image-text-collection",
+    name: "image-text-collection",
+    component: () => import("@/views/image-text/image-text-collection.vue"),
+    meta: {
+      title: "图文-图文合集", // 页面标题title
+      keepAlive: true,
+    },
+  },
+  {
+    path: "/image-text-detail",
+    name: "image-text-detail",
+    component: () => import("@/views/image-text/image-text-detail.vue"),
+    meta: {
+      title: "图文-图文详情", // 页面标题title
+      empty: ["Navbar"],
+      fill: true,
+    },
+  },
+  {
+    path: "/image-text-contribute",
+    name: "image-text-contribute",
+    component: () => import("@/views/image-text/image-text-contribute.vue"),
+    meta: {
+      title: "图文-投稿图文", // 页面标题title
+    },
+  },
+];

src/router/index.js

@@ -77,6 +77,16 @@ const routes = [
       fill: true,
     },
   },
+  // 客服
+  {
+    path: "/contact-online",
+    component: () => import("../views/contact-online.vue"),
+    meta: {
+      title: "客服", // 页面标题title
+      empty: ["Navbar"],
+      fill: true,
+    },
+  },
 ];
 
 const router = new VueRouter({
@@ -202,7 +212,6 @@ router.beforeEach((to, from, next) => {
   if (!leavePage(to, from) && !openNewWindow(to, from)) {
     store.state.routePath = to.path;
     store.state.contribute = false;
-    window.scrollTo(0, 0);
     if (to.meta.title) {
       document.title = to.meta.title;
     }

src/router/information-routes.js

@@ -4,6 +4,7 @@ export const informationRoutes = [
     path: "/information",
     meta: {
       title: "资料", // 页面标题title
+      keepAlive: true,
     },
     component: () => import("@/views/information/index.vue"),
     children: [
@@ -88,6 +89,7 @@ export const informationRoutes = [
     component: () => import("@/views/information/information-collection.vue"),
     meta: {
       title: "资料-资料合集", // 页面标题title
+      keepAlive: true,
     },
   },
   {

src/views/contact-online.vue

@@ -0,0 +1,79 @@
+<!-- 联系我们 -->
+<template>
+  <div class="wrap"></div>
+</template>
+<script>
+import { UserCenterService } from "@/common/service";
+export default {
+  components: {},
+  data() {
+    return {
+      userInfo: {},
+    };
+  },
+  mounted() {
+    UserCenterService.getUserInfo()
+      .then((data) => {
+        if (!data) {
+          this.$message.error("请先登录");
+          return;
+        } else {
+          window.easemobim.config = {
+            hide: true,
+            configId: "3cf9af90-d18a-4ace-8a05-eeaa3cd43206",
+            // 用户所在的 appKey 需要与 configId 中指定的关联的 appKey 一致
+            user: {
+              // username 必填，password 和 token 任选一项填写
+              username: this.userInfo.hx_username,
+              password: this.userInfo.hx_password,
+            },
+            // 访客信息（可选）
+            visitor: {
+              trueName: this.userInfo.name,
+              qq: "",
+              phone: this.userInfo.phone,
+              companyName: "",
+              userNickname: "",
+              description: "",
+              email: "",
+            },
+            minimum: false,
+          };
+          window.easemobim.bind({
+            configId: "3cf9af90-d18a-4ace-8a05-eeaa3cd43206",
+          });
+        }
+      })
+      .catch((err) => {
+        this.$message.error("请先登录");
+      });
+  },
+  methods: {
+    getUserInfo() {
+      return UserCenterService.getUserInfo()
+        .then(({ data }) => {
+          if (data) {
+            this.userInfo = data.detail;
+          }
+        })
+        .catch((err) => {
+          this.$message.error("请先登录");
+        });
+    },
+  },
+  beforeRouteLeave(to, from, next) {
+    window.easemobim.minimize();
+    next();
+  },
+};
+</script>
+
+<style>
+.wrap {
+  width: 100%;
+}
+body .window-demo .em-widget-wrapper {
+  width: 100%;
+  min-width: 340px !important;
+}
+</style>

src/views/image-text/children/comment-on-my.vue

@@ -63,6 +63,7 @@
           </div>
           <div
             class="card"
+            :ref="'card-' + item.id"
             :style="manageType ? { width: 'calc(100% - 60px)' } : ''"
             @click="handleRead([item], 1)"
           >
@@ -85,16 +86,19 @@
       </div>
     </div>
     <Reply v-model="replyVisible" :info="info" @handleReply="handleReply" />
+    <ToNext @toNext="toNext" v-if="!manageType" />
   </div>
 </template>
 
 <script>
+import { ArticleService } from "@/common/service";
 import CommentMyCard from "@/components/card/image-text/comment-my-card.vue";
 import TitleControl from "@/components/module/title-control.vue";
 import Reply from "@/components/module/reply.vue";
-import { ArticleService } from "@/common/service";
+import ToNext from "@/components/module/to-next.vue";
+
 export default {
-  components: { CommentMyCard, TitleControl, Reply },
+  components: { CommentMyCard, TitleControl, Reply, ToNext },
   data() {
     return {
       list: [],
@@ -184,6 +188,7 @@ export default {
             ? (item.is_read = params.is_read)
             : "";
         });
+        this.manageType = false;
         this.$store.dispatch("getMarkNum", "imageText");
       });
     },
@@ -225,6 +230,28 @@ export default {
         this.list_copy = "";
       }
     },
+    // 下一条未读
+    toNext() {
+      let current_index, next;
+      current_index = 0;
+      this.list.forEach((item, index) => {
+        let { top } = this.$refs["card-" + item.id][0].getBoundingClientRect();
+        if (top > -170 && top <= 100) {
+          current_index = index;
+          return;
+        }
+      });
+      if (current_index == this.list.length - 1 || !this.list.length)
+        return this.$message.info("没有下一条未读消息！");
+      next = this.list.slice(current_index + 1).find((item) => !item.is_read);
+      if (!next) return this.$message.info("没有下一条未读消息！");
+      window.scrollTo(
+        0,
+        window.scrollY +
+          this.$refs["card-" + next.id][0].getBoundingClientRect().top -
+          100
+      );
+    },
   },
 };
 </script>
@@ -236,10 +263,10 @@ export default {
   flex-direction: column;
   align-items: center;
   .wrap-title {
-    width: 70%;
+    width: 80%;
   }
   .wrap-content {
-    width: 70%;
+    width: 80%;
     margin-top: 20px;
     .read-box {
       display: flex;

src/views/image-text/children/like-on-my.vue

@@ -211,6 +211,7 @@ export default {
               .filter((item) => item);
             that.list = list;
             that.$message.success("删除成功！");
+            that.manageType = false;
           });
         })
         .catch((_) => {});
@@ -253,11 +254,12 @@ export default {
     // 回复
     handleReply(val) {
       this.replyVisible = false;
-      ArticleService.secondCommend({ id: this.info.like_id, content: val }).then(
-        ({ data }) => {
-          this.$message.success("回复成功");
-        }
-      );
+      ArticleService.secondCommend({
+        id: this.info.like_id,
+        content: val,
+      }).then(({ data }) => {
+        this.$message.success("回复成功");
+      });
     },
     // 筛选
     handleSearch(val) {
@@ -282,10 +284,10 @@ export default {
   flex-direction: column;
   align-items: center;
   .wrap-title {
-    width: 70%;
+    width: 80%;
   }
   .wrap-content {
-    width: 70%;
+    width: 80%;
     margin-top: 20px;
     .del-box {
       display: flex;

src/views/image-text/children/my-buy.vue

@@ -140,6 +140,7 @@ export default {
               .filter((item) => item);
             that.list = list;
             that.$message.success("删除成功！");
+            that.manageType = false;
           });
         })
         .catch((_) => {});
@@ -176,10 +177,10 @@ export default {
   flex-direction: column;
   align-items: center;
   .wrap-title {
-    width: 70%;
+    width: 80%;
   }
   .wrap-content {
-    width: 70%;
+    width: 80%;
     margin-top: 20px;
     .read-box {
       display: flex;

src/views/image-text/children/my-chasingFun.vue

@@ -85,6 +85,7 @@
           </div>
           <div
             class="card"
+            :ref="'card-' + item.id"
             :style="manageType ? { width: 'calc(100% - 60px)' } : ''"
             @click="handleRead([item], 1)"
           >
@@ -129,17 +130,20 @@
         <el-empty v-if="finished" description="没有更多数据"></el-empty>
       </div>
     </div>
+    <ToNext @toNext="toNext" v-if="!type && !manageType" />
   </div>
 </template>
 
 <script>
+import { mapState } from "vuex";
+import { ArticleService } from "@/common/service";
 import MyChasingFunCard from "@/components/card/image-text/my-chasingFun-card.vue";
 import MyChasingFunInfoCard from "@/components/card/image-text/my-chasingFun-info-card.vue";
 import TitleControl from "@/components/module/title-control.vue";
-import { mapState } from "vuex";
-import { ArticleService } from "@/common/service";
+import ToNext from "@/components/module/to-next.vue";
+
 export default {
-  components: { MyChasingFunCard, MyChasingFunInfoCard, TitleControl },
+  components: { MyChasingFunCard, MyChasingFunInfoCard, TitleControl, ToNext },
   data() {
     return {
       list: [],
@@ -245,6 +249,7 @@ export default {
               .filter((item) => item);
             that.list = list;
             that.$message.success(that.type ? "取消成功！" : "删除成功！");
+            that.manageType = false;
           });
         })
         .catch((_) => {});
@@ -264,6 +269,7 @@ export default {
             ? (item.is_read = params.is_read)
             : "";
         });
+        this.manageType = false;
         this.$store.dispatch("getMarkNum", "imageText");
       });
     },
@@ -291,6 +297,28 @@ export default {
         this.list_copy = "";
       }
     },
+    // 下一条未读
+    toNext() {
+      let current_index, next;
+      current_index = 0;
+      this.list.forEach((item, index) => {
+        let { top } = this.$refs["card-" + item.id][0].getBoundingClientRect();
+        if (top > -170 && top <= 100) {
+          current_index = index;
+          return;
+        }
+      });
+      if (current_index == this.list.length - 1 || !this.list.length)
+        return this.$message.info("没有下一条未读消息！");
+      next = this.list.slice(current_index + 1).find((item) => !item.is_read);
+      if (!next) return this.$message.info("没有下一条未读消息！");
+      window.scrollTo(
+        0,
+        window.scrollY +
+          this.$refs["card-" + next.id][0].getBoundingClientRect().top -
+          100
+      );
+    },
   },
 };
 </script>
@@ -302,10 +330,10 @@ export default {
   flex-direction: column;
   align-items: center;
   .wrap-title {
-    width: 70%;
+    width: 80%;
   }
   .wrap-content {
-    width: 70%;
+    width: 80%;
     margin-top: 20px;
     .read-box {
       display: flex;

src/views/image-text/children/my-collect.vue

@@ -191,6 +191,7 @@ export default {
               .filter((item) => item);
             that.list = list;
             that.$message.success("取消成功！");
+            that.manageType = false;
           });
         })
         .catch((_) => {});
@@ -212,7 +213,6 @@ export default {
       ArticleService.articleTransmit({
         item_id: item.id,
       }).then((_) => (item.transmit_num = Number(item.transmit_num) + 1));
-     
     },
     // 评论
     handleComment(item) {
@@ -265,10 +265,10 @@ export default {
   flex-direction: column;
   align-items: center;
   .wrap-title {
-    width: 70%;
+    width: 80%;
   }
   .wrap-content {
-    width: 70%;
+    width: 80%;
     margin-top: 20px;
     .del-box {
       display: flex;

src/views/image-text/children/my-comment.vue

@@ -133,6 +133,7 @@ export default {
               .filter((item) => item);
             that.list = list;
             that.$message.success("删除成功！");
+            that.manageType = false;
           });
         })
         .catch((_) => {});
@@ -172,10 +173,10 @@ export default {
   flex-direction: column;
   align-items: center;
   .wrap-title {
-    width: 70%;
+    width: 80%;
   }
   .wrap-content {
-    width: 70%;
+    width: 80%;
     margin-top: 20px;
     .del-box {
       display: flex;

src/views/image-text/children/my-like.vue

@@ -261,6 +261,7 @@ export default {
               .filter((item) => item);
             that.list = list;
             that.$message.success("取消成功！");
+            that.manageType = false;
           });
         })
         .catch((_) => {});
@@ -349,10 +350,10 @@ export default {
   flex-direction: column;
   align-items: center;
   .wrap-title {
-    width: 70%;
+    width: 80%;
   }
   .wrap-content {
-    width: 70%;
+    width: 80%;
     margin-top: 20px;
     .del-box {
       display: flex;

src/views/image-text/children/my-release.vue

@@ -113,10 +113,6 @@ export default {
     // 删除记录
     handleDelete(val) {
       if (!this.type) return (this.contactVisible = true);
-      // this.$alert("请联系客服下架视频！", "提示", {
-      //   confirmButtonText: "确定",
-      //   callback: (action) => {},
-      // });
       let that = this;
       this.showConfirmPopup("确定要删除该图文？")
         .then(() => {
@@ -156,10 +152,10 @@ export default {
   flex-direction: column;
   align-items: center;
   .wrap-title {
-    width: 70%;
+    width: 80%;
   }
   .wrap-content {
-    width: 70%;
+    width: 80%;
     margin-top: 20px;
     .list {
       .list-item {

src/views/image-text/children/my-reply.vue

@@ -134,6 +134,7 @@ export default {
               .filter((item) => item);
             that.list = list;
             that.$message.success("删除成功！");
+            that.manageType = false;
           });
         })
         .catch((_) => {});
@@ -173,10 +174,10 @@ export default {
   flex-direction: column;
   align-items: center;
   .wrap-title {
-    width: 70%;
+    width: 80%;
   }
   .wrap-content {
-    width: 70%;
+    width: 80%;
     margin-top: 20px;
     .del-box {
       display: flex;

src/views/image-text/children/reply-on-my.vue

@@ -63,6 +63,7 @@
           </div>
           <div
             class="card"
+            :ref="'card-' + item.id"
             :style="manageType ? { width: 'calc(100% - 60px)' } : ''"
             @click="handleRead([item], 1)"
           >
@@ -85,16 +86,18 @@
       </div>
     </div>
     <Reply v-model="replyVisible" :info="info" @handleReply="handleReply" />
+    <ToNext @toNext="toNext" v-if="!manageType" />
   </div>
 </template>
 
 <script>
+import { ArticleService } from "@/common/service";
 import ReplyMyCard from "@/components/card/image-text/reply-my-card.vue";
 import TitleControl from "@/components/module/title-control.vue";
 import Reply from "@/components/module/reply.vue";
-import { ArticleService } from "@/common/service";
+import ToNext from "@/components/module/to-next.vue";
 export default {
-  components: { ReplyMyCard, TitleControl, Reply },
+  components: { ReplyMyCard, TitleControl, Reply, ToNext },
   data() {
     return {
       list: [],
@@ -184,6 +187,7 @@ export default {
             ? (item.is_read = params.is_read)
             : "";
         });
+        this.manageType = false;
         this.$store.dispatch("getMarkNum", "imageText");
       });
     },
@@ -225,6 +229,28 @@ export default {
         this.list_copy = "";
       }
     },
+    // 下一条未读
+    toNext() {
+      let current_index, next;
+      current_index = 0;
+      this.list.forEach((item, index) => {
+        let { top } = this.$refs["card-" + item.id][0].getBoundingClientRect();
+        if (top > -170 && top <= 100) {
+          current_index = index;
+          return;
+        }
+      });
+      if (current_index == this.list.length - 1 || !this.list.length)
+        return this.$message.info("没有下一条未读消息！");
+      next = this.list.slice(current_index + 1).find((item) => !item.is_read);
+      if (!next) return this.$message.info("没有下一条未读消息！");
+      window.scrollTo(
+        0,
+        window.scrollY +
+          this.$refs["card-" + next.id][0].getBoundingClientRect().top -
+          100
+      );
+    },
   },
 };
 </script>
@@ -236,10 +262,10 @@ export default {
   flex-direction: column;
   align-items: center;
   .wrap-title {
-    width: 70%;
+    width: 80%;
   }
   .wrap-content {
-    width: 70%;
+    width: 80%;
     margin-top: 20px;
     .read-box {
       display: flex;

src/views/image-text/children/study-history.vue

@@ -155,6 +155,7 @@ export default {
               .filter((item) => item);
             that.list = list;
             that.$message.success("删除成功！");
+            that.manageType = false;
           });
         })
         .catch((_) => {});
@@ -194,10 +195,10 @@ export default {
   flex-direction: column;
   align-items: center;
   .wrap-title {
-    width: 70%;
+    width: 80%;
   }
   .wrap-content {
-    width: 70%;
+    width: 80%;
     margin-top: 20px;
     .del-box {
       display: flex;

src/views/image-text/components/child-content.vue

@@ -38,14 +38,21 @@ export default {
 <style lang="scss" scoped>
 .child {
   width: 100%;
+  min-width: 800px;
   position: relative;
   .navbar {
-    width: 220px;
-    position: absolute;
-    right: 30px;
+    width: $navbarWidth;
+    position: fixed;
+    right: 10px;
+  }
+  @media (max-width: 1300px) {
+    .navbar {
+      position: absolute;
+      right: calc(-#{$navbarWidth} - 10px);
+    }
   }
   .content {
-    width: calc(100% - 300px);
+    width: 100%;
   }
 }
 </style>

src/views/image-text/components/content.vue

@@ -103,6 +103,8 @@ export default {
   mounted() {
     this.getRecommendList();
     this.getCateTree();
+    if (this.$store.state.userInfo)
+      this.$store.dispatch("getMarkNum", "imageText");
   },
   methods: {
     // tab切换
@@ -258,13 +260,16 @@ export default {
 
 <style lang="scss" scoped>
 .content {
-  width: calc(100% - 240px);
-  max-width: 1200px;
+  width: 100%;
   margin: 0 auto;
+  min-width: 900px;
   .tab {
     margin-bottom: 20px;
   }
   .list {
+    min-width: 900px;
+    padding: 15px;
+    box-sizing: border-box;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -275,6 +280,8 @@ export default {
     }
   }
   .all {
+    padding: 15px;
+    box-sizing: border-box;
     .screen {
     }
     .sort {

src/views/image-text/image-text-collection.vue

@@ -1,33 +1,35 @@
 <template>
   <div class="wrap">
-    <div class="back" @click="$router.back()">
-      <img src="@/assets/icon/back.png" /><span>返回</span>
-    </div>
-    <div class="collection">
-      <Collection
-        :title="info.title"
-        :follow_switch="!!info.follow_switch"
-        :num="`共${info.item_list ? info.item_list.length : 0}篇文章`"
-        @handleSwitch="handleSwitch"
-      />
-    </div>
-    <div class="sort">
-      <Sort
-        :current="sort_type"
-        :list="[
-          { label: '正序', type: 2 },
-          { label: '倒序', type: 3 },
-        ]"
-        @changeSort="changeSort"
-      />
-    </div>
-    <div class="list">
-      <div
-        class="list-item"
-        v-for="item in info.item_list"
-        @click="toDetail(item.article_id, item.id)"
-      >
-        <ImageTextCollectionCard :info="item" />
+    <div class="wrap-content">
+      <div class="back" @click="$router.back()">
+        <img src="@/assets/icon/back.png" /><span>返回</span>
+      </div>
+      <div class="collection">
+        <Collection
+          :title="info.title"
+          :follow_switch="!!info.follow_switch"
+          :num="`共${info.item_list ? info.item_list.length : 0}篇文章`"
+          @handleSwitch="handleSwitch"
+        />
+      </div>
+      <div class="sort">
+        <Sort
+          :current="sort_type"
+          :list="[
+            { label: '正序', type: 2 },
+            { label: '倒序', type: 3 },
+          ]"
+          @changeSort="changeSort"
+        />
+      </div>
+      <div class="list">
+        <div
+          class="list-item"
+          v-for="item in info.item_list"
+          @click="toDetail(item.article_id, item.id)"
+        >
+          <ImageTextCollectionCard :info="item" />
+        </div>
       </div>
     </div>
   </div>
@@ -93,40 +95,45 @@ export default {
 <style lang="scss" scoped>
 .wrap {
   width: calc(100% - 240px);
-  max-width: 1200px;
-  margin: 0 auto;
-  .back {
-    width: 100px;
-    height: 50px;
-    line-height: 50px;
-    margin-top: 20px;
-    font-size: 22px;
-    font-weight: 400;
-    color: #222222;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: white;
-    border-radius: 4px;
-    cursor: pointer;
-    img {
-      width: 12px;
-      height: 20px;
-      margin-right: 5px;
+  min-width: 1000px;
+  .wrap-content {
+    width: 100%;
+    margin: 0 auto;
+    max-width: 1200px;
+
+    .back {
+      width: 100px;
+      height: 50px;
+      line-height: 50px;
+      margin-top: 20px;
+      font-size: 22px;
+      font-weight: 400;
+      color: #222222;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: white;
+      border-radius: 4px;
+      cursor: pointer;
+      img {
+        width: 12px;
+        height: 20px;
+        margin-right: 5px;
+      }
     }
-  }
-  .collection {
-    background: #ffffff;
-    border-radius: 10px;
-    margin-top: 20px;
-  }
-  .sort {
-    margin-top: 20px;
-  }
-  .list {
-    margin-top: 20px;
-    .list-item {
-      margin-bottom: 15px;
+    .collection {
+      background: #ffffff;
+      border-radius: 10px;
+      margin-top: 20px;
+    }
+    .sort {
+      margin-top: 20px;
+    }
+    .list {
+      margin-top: 20px;
+      .list-item {
+        margin-bottom: 15px;
+      }
     }
   }
 }

src/views/image-text/image-text-detail.vue

@@ -112,6 +112,7 @@ export default {
     this.info.id = option.id;
     if (option.article_id) this.getSeriesDetail();
     if (option.id) this.getDetail();
+    this.$store.dispatch("getMarkNum", "imageText");
   },
   mounted() {
     this.handleRead();
@@ -240,7 +241,7 @@ export default {
 .wrap {
   width: 70%;
   margin: 0 auto;
-  min-width: 1000px;
+  min-width: 800px;
   padding-top: 20px;
   position: relative;
   .title {
@@ -248,6 +249,8 @@ export default {
     background-color: white;
   }
   .content {
+    margin-top: 30px;
+
     width: calc(100% - 60px);
     padding: 30px;
     background-color: white;
@@ -287,9 +290,16 @@ export default {
     background-color: white;
   }
   .interactive {
-    position: absolute;
-    top: 20px;
-    right: -100px;
+    position: fixed;
+    top: 100px;
+    right: calc(15% - 100px);
+  }
+  @media (max-width: 1105px) {
+    .interactive {
+      position: absolute;
+      top: 20px;
+      left: 860px;
+    }
   }
 }
 </style>

src/views/image-text/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="video-wrap">
+  <div class="wrap">
     <Content v-if="!$route.meta.children" />
     <ChildContent :menu="menu" v-else />
   </div>
@@ -70,7 +70,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.video-wrap {
-  width: 100%;
+.wrap {
+  width: calc(100% - #{$navbarWidth});
 }
 </style>

src/views/index.vue

@@ -8,12 +8,12 @@
       />
       <el-carousel class="banner-container">
         <el-carousel-item v-for="item in bannerList" :key="item.id">
-          <img :src="item.cover" />
+          <img :src="item.cover" @click="toDetail(item)" />
         </el-carousel-item>
       </el-carousel>
     </div>
     <div class="content">
-      <div class="search">
+      <div class="search" @click="toSearch">
         <div class="search-content">
           <div class="hot">
             <img src="@/assets/icon/热搜榜.png" />
@@ -62,20 +62,17 @@
                 >
                   <div class="card-wenda-search-ipt-content">
                     <input type="text" placeholder="输入你想搜索的内容" />
-                    <button>搜索</button>
+                    <button @click="forumSearch">搜索</button>
                   </div>
                 </GradientBorder>
               </div>
             </div>
           </div>
-          <div v-else class="card-content">
+          <div v-else class="card-content" @click="toModule(item)">
             <img class="card-content-icon" :src="item.icon" alt="" />
             <img class="card-line" :src="item.line" alt="" />
             <div class="card-title">{{ item.title }}</div>
-            <div
-              class="card-content-jumpBtn"
-              @click="item.href ? $router.push(item.href) : ''"
-            >
+            <div class="card-content-jumpBtn">
               <GradientBorder borderWidth="1px" borderRadius="30px">
                 <div class="card-content-jumpBtn-content">
                   <span>GO</span>
@@ -193,12 +190,58 @@ export default {
     this.getBannerList();
   },
   methods: {
+    // 获取轮播图
     getBannerList() {
-      ExpediteService.getBanner().then(({ data }) => {
+      ExpediteService.getBanner({ is_pc: 1, num: 5 }).then(({ data }) => {
         this.bannerList = data.list;
         this.bannerList = data.list;
       });
     },
+    // 轮播图跳转详情
+    toDetail(item) {
+      let detailDict = {
+        video: {
+          link: "/video-detail",
+          first_id: "id",
+          second_id: "videoArrId",
+        },
+        article: {
+          link: "/image-text-detail",
+          first_id: "article_id",
+          second_id: "id",
+        },
+        datum: {
+          link: "/information-detail",
+          first_id: "datum_id",
+          second_id: "id",
+        },
+      };
+      let place = detailDict[item.place],
+        query = {};
+      if (!place) return;
+      query[place.first_id] = item.first_id;
+      query[place.second_id] = item.second_id;
+      this.$router.push({
+        path: place.link,
+        query,
+      });
+    },
+    // 跳转搜索
+    toSearch() {
+      this.$router.push("/search");
+    },
+    // 跳转模块
+    toModule(item) {
+      if (item.href) {
+        this.$router.push(item.href);
+      } else {
+        this.$message.info("敬请期待");
+      }
+    },
+    // 问答搜索
+    forumSearch() {
+      this.$message.info("敬请期待");
+    },
   },
 };
 </script>
@@ -323,7 +366,6 @@ $width: $body-width-100;
             justify-content: center;
             .card-app-info-app {
               font-size: 16px;
-              font-family: PingFangSC-Regular, PingFang SC;
               font-weight: 400;
               color: #666666;
               line-height: 20px;

src/views/information/children/comment-on-my.vue

@@ -63,6 +63,7 @@
           </div>
           <div
             class="card"
+            :ref="'card-' + item.id"
             :style="manageType ? { width: 'calc(100% - 60px)' } : ''"
             @click="handleRead([item], 1)"
           >
@@ -85,16 +86,18 @@
       </div>
     </div>
     <Reply v-model="replyVisible" :info="info" @handleReply="handleReply" />
+    <ToNext @toNext="toNext" v-if="!manageType" />
   </div>
 </template>
 
 <script>
+import { DatumService } from "@/common/service";
 import CommentMyCard from "@/components/card/information/comment-my-card.vue";
 import TitleControl from "@/components/module/title-control.vue";
 import Reply from "@/components/module/reply.vue";
-import { DatumService } from "@/common/service";
+import ToNext from "@/components/module/to-next.vue";
 export default {
-  components: { CommentMyCard, TitleControl, Reply },
+  components: { CommentMyCard, TitleControl, Reply, ToNext },
   data() {
     return {
       list: [],
@@ -182,6 +185,7 @@ export default {
             ? (item.is_read = params.is_read)
             : "";
         });
+        this.manageType = false;
         this.$store.dispatch("getMarkNum", "information");
       });
     },
@@ -223,6 +227,28 @@ export default {
         this.list_copy = "";
       }
     },
+    // 下一条未读
+    toNext() {
+      let current_index, next;
+      current_index = 0;
+      this.list.forEach((item, index) => {
+        let { top } = this.$refs["card-" + item.id][0].getBoundingClientRect();
+        if (top > -170 && top <= 100) {
+          current_index = index;
+          return;
+        }
+      });
+      if (current_index == this.list.length - 1 || !this.list.length)
+        return this.$message.info("没有下一条未读消息！");
+      next = this.list.slice(current_index + 1).find((item) => !item.is_read);
+      if (!next) return this.$message.info("没有下一条未读消息！");
+      window.scrollTo(
+        0,
+        window.scrollY +
+          this.$refs["card-" + next.id][0].getBoundingClientRect().top -
+          100
+      );
+    },
   },
 };
 </script>
@@ -234,10 +260,10 @@ export default {
   flex-direction: column;
   align-items: center;
   .wrap-title {
-    width: 70%;
+    width: 80%;
   }
   .wrap-content {
-    width: 70%;
+    width: 80%;
     margin-top: 20px;
     .read-box {
       display: flex;

src/views/information/children/like-on-my.vue

@@ -214,6 +214,7 @@ export default {
               .filter((item) => item);
             that.list = list;
             that.$message.success("删除成功！");
+            that.manageType = false;
           });
         })
         .catch((_) => {});
@@ -285,10 +286,10 @@ export default {
   flex-direction: column;
   align-items: center;
   .wrap-title {
-    width: 70%;
+    width: 80%;
   }
   .wrap-content {
-    width: 70%;
+    width: 80%;
     margin-top: 20px;
     .del-box {
       display: flex;

src/views/information/children/my-chasingFun.vue

@@ -85,6 +85,7 @@
           </div>
           <div
             class="card"
+            :ref="'card-' + item.id"
             :style="manageType ? { width: 'calc(100% - 60px)' } : ''"
             @click="handleRead([item], 1)"
           >
@@ -129,17 +130,20 @@
         <el-empty v-if="finished" description="没有更多数据"></el-empty>
       </div>
     </div>
+    <ToNext @toNext="toNext" v-if="!type && !manageType" />
   </div>
 </template>
 
 <script>
+import { mapState } from "vuex";
+import { DatumService } from "@/common/service";
 import MyChasingFunCard from "@/components/card/information/my-chasingFun-card.vue";
 import MyChasingFunInfoCard from "@/components/card/information/my-chasingFun-info-card.vue";
 import TitleControl from "@/components/module/title-control.vue";
-import { mapState } from "vuex";
-import { DatumService } from "@/common/service";
+import ToNext from "@/components/module/to-next.vue";
+
 export default {
-  components: { MyChasingFunCard, MyChasingFunInfoCard, TitleControl },
+  components: { MyChasingFunCard, MyChasingFunInfoCard, TitleControl, ToNext },
   data() {
     return {
       list: [],
@@ -244,6 +248,7 @@ export default {
               .filter((item) => item);
             that.list = list;
             that.$message.success(that.type ? "取消成功！" : "删除成功！");
+            that.manageType = false;
           });
         })
         .catch((_) => {});
@@ -263,6 +268,7 @@ export default {
             ? (item.is_read = params.is_read)
             : "";
         });
+        this.manageType = false;
         this.$store.dispatch("getMarkNum", "information");
       });
     },
@@ -290,6 +296,28 @@ export default {
         this.list_copy = "";
       }
     },
+    // 下一条未读
+    toNext() {
+      let current_index, next;
+      current_index = 0;
+      this.list.forEach((item, index) => {
+        let { top } = this.$refs["card-" + item.id][0].getBoundingClientRect();
+        if (top > -170 && top <= 100) {
+          current_index = index;
+          return;
+        }
+      });
+      if (current_index == this.list.length - 1 || !this.list.length)
+        return this.$message.info("没有下一条未读消息！");
+      next = this.list.slice(current_index + 1).find((item) => !item.is_read);
+      if (!next) return this.$message.info("没有下一条未读消息！");
+      window.scrollTo(
+        0,
+        window.scrollY +
+          this.$refs["card-" + next.id][0].getBoundingClientRect().top -
+          100
+      );
+    },
   },
 };
 </script>
@@ -301,10 +329,10 @@ export default {
   flex-direction: column;
   align-items: center;
   .wrap-title {
-    width: 70%;
+    width: 80%;
   }
   .wrap-content {
-    width: 70%;
+    width: 80%;
     margin-top: 20px;
     .read-box {
       display: flex;

src/views/information/children/my-collect.vue

@@ -190,6 +190,7 @@ export default {
               .filter((item) => item);
             that.list = list;
             that.$message.success("取消成功！");
+            that.manageType = false;
           });
         })
         .catch((_) => {});
@@ -265,10 +266,10 @@ export default {
   flex-direction: column;
   align-items: center;
   .wrap-title {
-    width: 70%;
+    width: 80%;
   }
   .wrap-content {
-    width: 70%;
+    width: 80%;
     margin-top: 20px;
     .del-box {
       display: flex;

src/views/information/children/my-comment.vue

@@ -133,6 +133,7 @@ export default {
               .filter((item) => item);
             that.list = list;
             that.$message.success("删除成功！");
+            that.manageType = false;
           });
         })
         .catch((_) => {});
@@ -172,10 +173,10 @@ export default {
   flex-direction: column;
   align-items: center;
   .wrap-title {
-    width: 70%;
+    width: 80%;
   }
   .wrap-content {
-    width: 70%;
+    width: 80%;
     margin-top: 20px;
     .del-box {
       display: flex;

src/views/information/children/my-like.vue

@@ -260,6 +260,7 @@ export default {
               .filter((item) => item);
             that.list = list;
             that.$message.success("取消成功！");
+            that.manageType = false;
           });
         })
         .catch((_) => {});
@@ -349,10 +350,10 @@ export default {
   flex-direction: column;
   align-items: center;
   .wrap-title {
-    width: 70%;
+    width: 80%;
   }
   .wrap-content {
-    width: 70%;
+    width: 80%;
     margin-top: 20px;
     .del-box {
       display: flex;

src/views/information/children/my-release.vue

@@ -113,10 +113,6 @@ export default {
     // 删除记录
     handleDelete(val) {
       if (!this.type) return (this.contactVisible = true);
-      // this.$alert("请联系客服下架视频！", "提示", {
-      //   confirmButtonText: "确定",
-      //   callback: (action) => {},
-      // });
       let that = this;
       this.showConfirmPopup("确定要删除该资料？")
         .then(() => {
@@ -154,10 +150,10 @@ export default {
   flex-direction: column;
   align-items: center;
   .wrap-title {
-    width: 70%;
+    width: 80%;
   }
   .wrap-content {
-    width: 70%;
+    width: 80%;
     margin-top: 20px;
     .list {
       .list-item {

src/views/information/children/my-reply.vue

@@ -134,6 +134,7 @@ export default {
               .filter((item) => item);
             that.list = list;
             that.$message.success("删除成功！");
+            that.manageType = false;
           });
         })
         .catch((_) => {});
@@ -173,10 +174,10 @@ export default {
   flex-direction: column;
   align-items: center;
   .wrap-title {
-    width: 70%;
+    width: 80%;
   }
   .wrap-content {
-    width: 70%;
+    width: 80%;
     margin-top: 20px;
     .del-box {
       display: flex;

src/views/information/children/reply-on-my.vue

@@ -63,6 +63,7 @@
           </div>
           <div
             class="card"
+            :ref="'card-' + item.id"
             :style="manageType ? { width: 'calc(100% - 60px)' } : ''"
             @click="handleRead([item], 1)"
           >
@@ -85,16 +86,18 @@
       </div>
     </div>
     <Reply v-model="replyVisible" :info="info" @handleReply="handleReply" />
+    <ToNext @toNext="toNext" v-if="!manageType" />
   </div>
 </template>
 
 <script>
+import { DatumService } from "@/common/service";
 import ReplyMyCard from "@/components/card/information/reply-my-card.vue";
 import TitleControl from "@/components/module/title-control.vue";
 import Reply from "@/components/module/reply.vue";
-import { DatumService } from "@/common/service";
+import ToNext from "@/components/module/to-next.vue";
 export default {
-  components: { ReplyMyCard, TitleControl, Reply },
+  components: { ReplyMyCard, TitleControl, Reply, ToNext },
   data() {
     return {
       list: [],
@@ -182,6 +185,7 @@ export default {
             ? (item.is_read = params.is_read)
             : "";
         });
+        this.manageType = false;
         this.$store.dispatch("getMarkNum", "information");
       });
     },
@@ -223,6 +227,28 @@ export default {
         this.list_copy = "";
       }
     },
+    // 下一条未读
+    toNext() {
+      let current_index, next;
+      current_index = 0;
+      this.list.forEach((item, index) => {
+        let { top } = this.$refs["card-" + item.id][0].getBoundingClientRect();
+        if (top > -170 && top <= 100) {
+          current_index = index;
+          return;
+        }
+      });
+      if (current_index == this.list.length - 1 || !this.list.length)
+        return this.$message.info("没有下一条未读消息！");
+      next = this.list.slice(current_index + 1).find((item) => !item.is_read);
+      if (!next) return this.$message.info("没有下一条未读消息！");
+      window.scrollTo(
+        0,
+        window.scrollY +
+          this.$refs["card-" + next.id][0].getBoundingClientRect().top -
+          100
+      );
+    },
   },
 };
 </script>
@@ -234,10 +260,10 @@ export default {
   flex-direction: column;
   align-items: center;
   .wrap-title {
-    width: 70%;
+    width: 80%;
   }
   .wrap-content {
-    width: 70%;
+    width: 80%;
     margin-top: 20px;
     .read-box {
       display: flex;

src/views/information/children/study-history.vue

@@ -155,6 +155,7 @@ export default {
               .filter((item) => item);
             that.list = list;
             that.$message.success("删除成功！");
+            that.manageType = false;
           });
         })
         .catch((_) => {});
@@ -194,10 +195,10 @@ export default {
   flex-direction: column;
   align-items: center;
   .wrap-title {
-    width: 70%;
+    width: 80%;
   }
   .wrap-content {
-    width: 70%;
+    width: 80%;
     margin-top: 20px;
     .del-box {
       display: flex;

src/views/information/components/child-content.vue

@@ -39,14 +39,21 @@ export default {
 <style lang="scss" scoped>
 .child {
   width: 100%;
+  min-width: 800px;
   position: relative;
   .navbar {
-    width: 220px;
-    position: absolute;
-    right: 30px;
+    width: $navbarWidth;
+    position: fixed;
+    right: 10px;
+  }
+  @media (max-width: 1300px) {
+    .navbar {
+      position: absolute;
+      right: calc(-#{$navbarWidth} - 10px);
+    }
   }
   .content {
-    width: calc(100% - 300px);
+    width: 100%;
   }
 }
 </style>

src/views/information/components/content.vue

@@ -101,6 +101,8 @@ export default {
   mounted() {
     this.getRecommendList();
     this.getCateTree();
+    if (this.$store.state.userInfo)
+      this.$store.dispatch("getMarkNum", "information");
   },
   methods: {
     // tab切换
@@ -232,23 +234,29 @@ export default {
 
 <style lang="scss" scoped>
 .content {
-  width: calc(100% - 240px);
-  max-width: 1200px;
+  width: 100%;
+  min-width: 900px;
   margin: 0 auto;
   .tab {
     margin-bottom: 20px;
   }
   .list {
+    min-width: 900px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     flex-wrap: wrap;
+    box-sizing: border-box;
+    padding: 15px;
     .card-item {
-      width: calc((100% - 20px) / 2);
+      width: calc((100% - 40px) / 2);
       margin: 10px 0;
     }
   }
   .all {
+    min-width: 1000px;
+    padding: 15px;
+    box-sizing: border-box;
     .screen {
     }
     .sort {

src/views/information/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="video-wrap">
+  <div class="wrap">
     <Content v-if="!$route.meta.children" />
     <ChildContent :menu="menu" v-else />
   </div>
@@ -66,7 +66,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.video-wrap {
-  width: 100%;
+.wrap {
+  width: calc(100% - #{$navbarWidth});
 }
 </style>

src/views/information/information-collection.vue

@@ -257,7 +257,6 @@ export default {
       align-items: center;
       justify-content: center;
       font-size: 16px;
-      font-family: PingFangSC-Regular, PingFang SC;
       font-weight: 400;
       color: #555555;
       background: #ffffff;

src/views/information/information-detail.vue

@@ -125,6 +125,7 @@ export default {
     this.info.id = option.id;
     if (option.datum_id) this.getSeriesDetail();
     if (option.id) this.getDetail();
+    this.$store.dispatch("getMarkNum", "information");
   },
   mounted() {
     this.handleRead();
@@ -286,7 +287,7 @@ export default {
 .wrap {
   width: 70%;
   margin: 0 auto;
-  min-width: 1000px;
+  min-width: 800px;
   padding-top: 20px;
   position: relative;
   .title {
@@ -358,9 +359,16 @@ export default {
     background-color: white;
   }
   .interactive {
-    position: absolute;
-    top: 20px;
-    right: -100px;
+    position: fixed;
+    top: 100px;
+    right: calc(15% - 100px);
+  }
+  @media (max-width: 1105px) {
+    .interactive {
+      position: absolute;
+      top: 20px;
+      left: 860px;
+    }
   }
 }
 </style>

src/views/login.vue

@@ -490,6 +490,8 @@ export default {
       height: 100%;
       overflow-y: auto;
       overflow-x: hidden;
+      scrollbar-width: none;
+
       .globalRoaming-option-item {
         width: 100%;
         box-sizing: border-box;
@@ -504,9 +506,9 @@ export default {
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
       }
-    }
-    .globalRoaming-option-box::-webkit-scrollbar {
-      width: 0;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
     }
   }
 }

src/views/video/children/comment-on-my.vue

@@ -63,6 +63,7 @@
           </div>
           <div
             class="card"
+            :ref="'card-' + item.id"
             :style="manageType ? { width: 'calc(100% - 60px)' } : ''"
             @click="handleRead([item], 1)"
           >
@@ -85,16 +86,18 @@
       </div>
     </div>
     <Reply v-model="replyVisible" :info="info" @handleReply="handleReply" />
+    <ToNext @toNext="toNext" v-if="!manageType" />
   </div>
 </template>
 
 <script>
+import { VideoService } from "@/common/service";
 import CommentMyCard from "@/components/card/video/comment-my-card.vue";
 import TitleControl from "@/components/module/title-control.vue";
 import Reply from "@/components/module/reply.vue";
-import { VideoService } from "@/common/service";
+import ToNext from "@/components/module/to-next.vue";
 export default {
-  components: { CommentMyCard, TitleControl, Reply },
+  components: { CommentMyCard, TitleControl, Reply, ToNext },
   data() {
     return {
       list: [],
@@ -182,6 +185,7 @@ export default {
             ? (item.is_read = params.is_read)
             : "";
         });
+        this.manageType = false;
         this.$store.dispatch("getMarkNum", "video");
       });
     },
@@ -223,6 +227,28 @@ export default {
         this.list_copy = "";
       }
     },
+    // 下一条未读
+    toNext() {
+      let current_index, next;
+      current_index = 0;
+      this.list.forEach((item, index) => {
+        let { top } = this.$refs["card-" + item.id][0].getBoundingClientRect();
+        if (top > -170 && top <= 100) {
+          current_index = index;
+          return;
+        }
+      });
+      if (current_index == this.list.length - 1 || !this.list.length)
+        return this.$message.info("没有下一条未读消息！");
+      next = this.list.slice(current_index + 1).find((item) => !item.is_read);
+      if (!next) return this.$message.info("没有下一条未读消息！");
+      window.scrollTo(
+        0,
+        window.scrollY +
+          this.$refs["card-" + next.id][0].getBoundingClientRect().top -
+          100
+      );
+    },
   },
 };
 </script>
@@ -234,10 +260,10 @@ export default {
   flex-direction: column;
   align-items: center;
   .wrap-title {
-    width: 70%;
+    width: 80%;
   }
   .wrap-content {
-    width: 70%;
+    width: 80%;
     margin-top: 20px;
     .read-box {
       display: flex;

src/views/video/children/like-on-my.vue

@@ -17,9 +17,11 @@
         <div slot="bottom" class="switch-box">
           <div class="btn" :class="{ select: !type }" @click="changeType(0)">
             视频
+            <div class="mark" v-if="!!videoMarkNum.video_praise_num"></div>
           </div>
           <div class="btn" :class="{ select: !!type }" @click="changeType(1)">
             评论
+            <div class="mark" v-if="!!videoMarkNum.comment_praise_num"></div>
           </div>
         </div>
       </TitleControl>
@@ -99,6 +101,7 @@ import LikeMyCommentCard from "@/components/card/video/like-my-comment-card.vue"
 import TitleControl from "@/components/module/title-control.vue";
 import Reply from "@/components/module/reply.vue";
 import { VideoService } from "@/common/service";
+import { mapState } from "vuex";
 export default {
   components: { LikeMyVideoCard, LikeMyCommentCard, TitleControl, Reply },
   data() {
@@ -131,8 +134,14 @@ export default {
       this.list.forEach((item) => (item.checked = false));
     },
   },
+  computed: {
+    ...mapState({
+      videoMarkNum: (state) => state.videoMarkNum, //直接拿到count数量
+    }),
+  },
   mounted() {
     this.getVideoList();
+    this.handleRead([]);
   },
   methods: {
     // 触底
@@ -151,6 +160,7 @@ export default {
       this.list = [];
       this.params.page = 1;
       this.manageType = false;
+      this.handleRead([]);
       !!type ? this.getCommentList() : this.getVideoList();
     },
     // 获取数据--视频
@@ -166,7 +176,6 @@ export default {
         } else {
           this.params.page++;
         }
-        this.handleRead(this.list);
       });
     },
     // 获取数据--评论
@@ -182,7 +191,6 @@ export default {
         } else {
           this.params.page++;
         }
-        this.handleRead(this.list);
       });
     },
     // 删除记录
@@ -204,6 +212,7 @@ export default {
               .filter((item) => item);
             that.list = list;
             that.$message.success("删除成功！");
+            that.manageType = false;
           });
         })
         .catch((_) => {});
@@ -215,8 +224,7 @@ export default {
         type: this.type ? 5 : 4,
         is_read: 1,
       };
-      params.id = arr.map((item) => item.id).join(",");
-      if (!params.id) return;
+      params.id = arr.map((item) => item.id).join(",") || "";
       VideoService.unreadChange(params).then((res) => {
         this.list.forEach((item) => {
           params.id.split(",").includes(item.id + "")
@@ -275,10 +283,10 @@ export default {
   flex-direction: column;
   align-items: center;
   .wrap-title {
-    width: 70%;
+    width: 80%;
   }
   .wrap-content {
-    width: 70%;
+    width: 80%;
     margin-top: 20px;
     .del-box {
       display: flex;
@@ -384,6 +392,17 @@ export default {
     border-radius: 22px;
     cursor: pointer;
     margin-right: 10px;
+    position: relative;
+    .mark {
+      width: 20px;
+      height: 20px;
+      transform: scale(0.7);
+      background: #ff5143;
+      border-radius: 20px;
+      position: absolute;
+      top: -5px;
+      right: -5px;
+    }
   }
   .select {
     background: #2a63f3;

src/views/video/children/my-buy.vue

@@ -141,6 +141,7 @@ export default {
               .filter((item) => item);
             that.list = list;
             that.$message.success("删除成功！");
+            that.manageType = false;
           });
         })
         .catch((_) => {});
@@ -180,10 +181,10 @@ export default {
   flex-direction: column;
   align-items: center;
   .wrap-title {
-    width: 70%;
+    width: 80%;
   }
   .wrap-content {
-    width: 70%;
+    width: 80%;
     margin-top: 20px;
     .read-box {
       display: flex;

src/views/video/children/my-chasingFun.vue

@@ -83,6 +83,7 @@
           </div>
           <div
             class="card"
+            :ref="'card-' + item.id"
             :style="manageType ? { width: 'calc(100% - 60px)' } : ''"
             @click="handleRead([item], 1)"
           >
@@ -127,17 +128,20 @@
         <el-empty v-if="finished" description="没有更多数据"></el-empty>
       </div>
     </div>
+    <ToNext @toNext="toNext" v-if="!type && !manageType" />
   </div>
 </template>
 
 <script>
+import { mapState } from "vuex";
+import { VideoService } from "@/common/service";
 import MyChasingFunCard from "@/components/card/video/my-chasingFun-card.vue";
 import MyChasingFunInfoCard from "@/components/card/video/my-chasingFun-info-card.vue";
 import TitleControl from "@/components/module/title-control.vue";
-import { mapState } from "vuex";
-import { VideoService } from "@/common/service";
+import ToNext from "@/components/module/to-next.vue";
+
 export default {
-  components: { MyChasingFunCard, MyChasingFunInfoCard, TitleControl },
+  components: { MyChasingFunCard, MyChasingFunInfoCard, TitleControl, ToNext },
   data() {
     return {
       list: [],
@@ -242,6 +246,7 @@ export default {
               .filter((item) => item);
             that.list = list;
             that.$message.success(that.type ? "取消成功！" : "删除成功！");
+            that.manageType = false;
           });
         })
         .catch((_) => {});
@@ -261,6 +266,7 @@ export default {
             ? (item.is_read = params.is_read)
             : "";
         });
+        this.manageType = false;
         this.$store.dispatch("getMarkNum", "video");
       });
     },
@@ -288,6 +294,28 @@ export default {
         this.list_copy = "";
       }
     },
+    // 下一条未读
+    toNext() {
+      let current_index, next;
+      current_index = 0;
+      this.list.forEach((item, index) => {
+        let { top } = this.$refs["card-" + item.id][0].getBoundingClientRect();
+        if (top > -170 && top <= 100) {
+          current_index = index;
+          return;
+        }
+      });
+      if (current_index == this.list.length - 1 || !this.list.length)
+        return this.$message.info("没有下一条未读消息！");
+      next = this.list.slice(current_index + 1).find((item) => !item.is_read);
+      if (!next) return this.$message.info("没有下一条未读消息！");
+      window.scrollTo(
+        0,
+        window.scrollY +
+          this.$refs["card-" + next.id][0].getBoundingClientRect().top -
+          100
+      );
+    },
   },
 };
 </script>
@@ -299,10 +327,10 @@ export default {
   flex-direction: column;
   align-items: center;
   .wrap-title {
-    width: 70%;
+    width: 80%;
   }
   .wrap-content {
-    width: 70%;
+    width: 80%;
     margin-top: 20px;
     .read-box {
       display: flex;

src/views/video/children/my-collect.vue

@@ -196,6 +196,7 @@ export default {
               .filter((item) => item);
             that.list = list;
             that.$message.success("取消成功！");
+            that.manageType = false;
           });
         })
         .catch((_) => {});
@@ -271,10 +272,10 @@ export default {
   flex-direction: column;
   align-items: center;
   .wrap-title {
-    width: 70%;
+    width: 80%;
   }
   .wrap-content {
-    width: 70%;
+    width: 80%;
     margin-top: 20px;
     .del-box {
       display: flex;

src/views/video/children/my-comment.vue

@@ -133,6 +133,7 @@ export default {
               .filter((item) => item);
             that.list = list;
             that.$message.success("删除成功！");
+            that.manageType = false;
           });
         })
         .catch((_) => {});
@@ -172,10 +173,10 @@ export default {
   flex-direction: column;
   align-items: center;
   .wrap-title {
-    width: 70%;
+    width: 80%;
   }
   .wrap-content {
-    width: 70%;
+    width: 80%;
     margin-top: 20px;
     .del-box {
       display: flex;

src/views/video/children/my-like.vue

@@ -266,6 +266,7 @@ export default {
               .filter((item) => item);
             that.list = list;
             that.$message.success("取消成功！");
+            that.manageType = false;
           });
         })
         .catch((_) => {});
@@ -355,10 +356,10 @@ export default {
   flex-direction: column;
   align-items: center;
   .wrap-title {
-    width: 70%;
+    width: 80%;
   }
   .wrap-content {
-    width: 70%;
+    width: 80%;
     margin-top: 20px;
     .del-box {
       display: flex;

src/views/video/children/my-release.vue

@@ -158,10 +158,10 @@ export default {
   flex-direction: column;
   align-items: center;
   .wrap-title {
-    width: 70%;
+    width: 80%;
   }
   .wrap-content {
-    width: 70%;
+    width: 80%;
     margin-top: 20px;
     .list {
       .list-item {

src/views/video/children/my-reply.vue

@@ -134,6 +134,7 @@ export default {
               .filter((item) => item);
             that.list = list;
             that.$message.success("删除成功！");
+            that.manageType = false;
           });
         })
         .catch((_) => {});
@@ -173,10 +174,10 @@ export default {
   flex-direction: column;
   align-items: center;
   .wrap-title {
-    width: 70%;
+    width: 80%;
   }
   .wrap-content {
-    width: 70%;
+    width: 80%;
     margin-top: 20px;
     .del-box {
       display: flex;