调整 UI

src/app.config.ts

@@ -5,7 +5,7 @@ export default defineAppConfig({
         'pages/home/home'
     ],
     window: {
-        backgroundTextStyle: 'light',
+        backgroundTextStyle: 'dark',
         navigationBarBackgroundColor: '#fff',
         navigationBarTitleText: 'WeChat',
         navigationBarTextStyle: 'black'

src/components/VideoSwiper/index.less

@@ -33,7 +33,7 @@
 
             .progress-bg {
                 position: absolute;
-                bottom: 0;
+                bottom: 17px;
                 width: 100%;
                 height: 40px;
 
@@ -63,7 +63,7 @@
                 flex-direction: column;
                 justify-content: space-between;
                 align-items: center;
-                background-color: linear-gradient(to bottom, rgba(0, 0, 0, 0), 10%, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
+                background-color: linear-gradient(to right, rgba(0, 0, 0, 0), 50%, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));
                 ;
 
                 .showInfo {
@@ -98,7 +98,7 @@
                 .indicator-bg {
                     display: flex;
                     flex-direction: row;
-                    width: 90%;
+                    width: 100%;
                     height: 20px;
                     background-color: #979797;
                     align-items: center;
@@ -195,7 +195,7 @@
             font-size: 32px;
             padding: 10px 20px 0;
             text-shadow: #000 1px 0 6px;
-            background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, .3));
+            background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .3));
 
             .video-user-info {
                 display: flex;
@@ -275,7 +275,7 @@
                     width: 30px;
                     font-size: 30px;
                     line-height: 44px;
-                    font-weight: 400;
+                    font-weight: 500;
                 }
 
             }
@@ -305,7 +305,7 @@
                     width: 90px;
                     font-size: 22px;
                     line-height: 30px;
-                    font-weight: 400;
+                    font-weight: 500;
                 }
             }
 

src/components/VideoSwiper/index.tsx

@@ -179,7 +179,7 @@ export default function VideoSwiper({ list, onFinish, needResumePlay, flushList,
 
 function CustomVideo({ video, current, index, onTimeUpdate, onProgressMove, needResumePlay }) {
     const [showEndCover, setShowEndCover] = useState(false)
-    const [durPersec, setDurPersec] = useState(1)
+    const [durPersec, setDurPersec] = useState(0)
     const [showProgressIndicator, setShowProgressIndicator] = useState(false)
     const [playerState, setPlayerState] = useState(0)
     const [isPlaying, setIsPlaying] = useState(false)
@@ -190,7 +190,7 @@ function CustomVideo({ video, current, index, onTimeUpdate, onProgressMove, need
     const [startMoveX, setStartMoveX] = useState(0)
     const [hasReportPlaySuccess, setHasReportPlaySuccess] = useState(false)
     const [hasReportRealplay, setHasReportRealplay] = useState(false)
-    const [showRedShareBtn, setShowRedShareBtn] = useState(false)
+    const [showRedShareBtn, setShowRedShareBtn] = useState(true)
 
     let videoContext = Taro.createVideoContext(`${video.id}`)
     const logReportVideoPlaySuccessOnce = once(logReportVideoPlaySuccess)
@@ -338,8 +338,8 @@ function CustomVideo({ video, current, index, onTimeUpdate, onProgressMove, need
         let { width = 375 } = systemInfo.safeArea
 
         // 移动中
-        //计算 seek 进度，并设置播放器 seek。 等比设置：拖动屏幕宽距离，偏移 90% 进度
-        let rate = distance / width * 0.9
+        //计算 seek 进度，并设置播放器 seek。 等比设置：拖动屏幕宽距离，偏移 100% 进度
+        let rate = distance / width * 1
         return rate
     }
 
@@ -361,13 +361,14 @@ function CustomVideo({ video, current, index, onTimeUpdate, onProgressMove, need
                 onSeekComplete={onSeekCom}
                 onTap={onTapVideo}
             />
-            {(playerState == PlayState.pause) && <View className='playBtn'>
+            {(playerState == PlayState.pause) && <View className='playBtn' onClick={onTapVideo}>
                 <Image src='http://weapppiccdn.yishihui.com/wxicon/common/icon_play_btn_dark2.png'/>
             </View>}
             <View className='progress-bg'
                 onTouchStart={onTouchStart}
                 onTouchMove={onTouchMove}
                 onTouchEnd={onTouchEnd}
+                catchMove
             >
                 <View className='progress-container'>
                     <View className='progress' style={{ width: `${durPersec * 100}%;` }}>
@@ -405,7 +406,7 @@ function VideoIntroduce({ detail, showRedShareBtn, index}) {
             <View className='video-title'>
                 {detail.title}
             </View>
-            {showRedShareBtn && <Button className='redShareBtn' openType='share' data-button-type={2}>分享给群友</Button>}
+            {true && <Button className='redShareBtn' openType='share' data-button-type={2}>分享给群友</Button>}
         </View>
     )
 }

src/components/VideoSwiper/index.wxss

@@ -30,7 +30,7 @@
 }
 .video-swiper .video-swiper-item .custom-video .progress-bg {
   position: absolute;
-  bottom: 0;
+  bottom: 17px;
   width: 100%;
   height: 40px;
 }
@@ -57,7 +57,7 @@
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
-  background-color: linear-gradient(to bottom, rgba(0, 0, 0, 0), 10%, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
+  background-color: linear-gradient(to right, rgba(0, 0, 0, 0), 50%, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));
 }
 .video-swiper .video-swiper-item .custom-video .progress-indicator .showInfo {
   display: flex;
@@ -87,7 +87,7 @@
 .video-swiper .video-swiper-item .custom-video .progress-indicator .indicator-bg {
   display: flex;
   flex-direction: row;
-  width: 90%;
+  width: 100%;
   height: 20px;
   background-color: #979797;
   align-items: center;
@@ -171,7 +171,7 @@
   font-size: 32px;
   padding: 10px 20px 0;
   text-shadow: #000 1px 0 6px;
-  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3));
+  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
 }
 .video-swiper .video-swiper-item .video-introduce .video-user-info {
   display: flex;
@@ -242,7 +242,7 @@
   width: 30px;
   font-size: 30px;
   line-height: 44px;
-  font-weight: 400;
+  font-weight: 500;
 }
 .video-swiper .video-swiper-item .video-bar .friend::after {
   border: none;
@@ -267,7 +267,7 @@
   width: 90px;
   font-size: 22px;
   line-height: 30px;
-  font-weight: 400;
+  font-weight: 500;
 }
 .video-swiper .video-swiper-item .video-bar .pyq::after {
   border: none;

src/custom-tab-bar/index.less

@@ -10,7 +10,7 @@
 }
 
 .tab-bar-border {
-    background-color: rgba(0, 0, 0, 0.33);
+    background-color: #222;
     position: absolute;
     left: 0;
     top: 0;
@@ -26,6 +26,7 @@
     justify-content: center;
     align-items: center;
     flex-direction: column;
+    font-weight: 500;
 
     .line {
         width: 60px;

src/custom-tab-bar/index.tsx

@@ -9,7 +9,7 @@ export default class Index extends Component {
         selected: 0,
         color: '#999999',
         selectedColor: '#ffffff',
-        backgroundColor: '#000000',
+        backgroundColor: '#222',
         fontSize: 16,
         list: [
             {
@@ -40,7 +40,7 @@ export default class Index extends Component {
         const { list, selected, color, selectedColor, backgroundColor, fontSize } = this.state
         return (
             <CoverView className='tab-bar' style={{ backgroundColor: backgroundColor }}>
-                <CoverView className='tab-bar-border'></CoverView>
+                {/* <CoverView className='tab-bar-border'></CoverView> */}
                 {list.map((item, index) => {
                     return (
                         <CoverView key={index} className='tab-bar-item' onClick={this.switchTab.bind(this, index, item.pagePath)}>

src/custom-tab-bar/index.wxss

@@ -9,7 +9,7 @@
   padding-bottom: env(safe-area-inset-bottom);
 }
 .tab-bar-border {
-  background-color: rgba(0, 0, 0, 0.33);
+  background-color: #222;
   position: absolute;
   left: 0;
   top: 0;
@@ -24,6 +24,7 @@
   justify-content: center;
   align-items: center;
   flex-direction: column;
+  font-weight: 500;
 }
 .tab-bar-item .line {
   width: 60px;