🐞 fix(性能测评):性能测评UI整改

src/components/moveBtn/index.module.scss

@@ -70,7 +70,7 @@
 
 .video_box {
   border-radius: 16px;
-  width: 300px;
+  width: 250px;
   height: 300px;
   // background-color: red;
   position: relative;
@@ -86,14 +86,25 @@
     position: absolute;
     bottom: -100px;
     z-index: 999;
-    text-align: center;
     width: 100%;
     height: 40px;
     line-height: 40px;
+    display: flex;
+    align-items: center;
     background-color: #337fff;
-    color: #fff;
+    // border-bottom-left-radius: 16px;
-    border-bottom-left-radius: 16px;
+    // border-bottom-right-radius: 16px;
-    border-bottom-right-radius: 16px;
+    border-radius: 16px;
-    font-size: 26px;
+
+    .fonts {
+      width: 140px;
+      height: 40px;
+      color: #fff;
+      font-size: 26px;
+      margin-left: 10px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
   }
 }

src/components/moveBtn/index.tsx

@@ -14,6 +14,8 @@ import { formatImgUrl } from '@/common/fotmat'
 import { ORDER_STATUS } from '@/common/enum'
 import IconFont from '@/components/iconfont/iconfont'
 import { IMG_CND_Prefix } from '@/common/constant'
+import DotLoading from '@/components/dotLoading'
+import { MallCherryestimate_catevideoview } from '@/api/material'
 
 type ShowStatus = 'shop'|'customer'|'order'|'code'
 interface param {
@@ -114,6 +116,16 @@ const MoveBtn = ({ showFloatVideo = false, floatVideoFile = [], playVideo = true
     }
   }, [playVideo])
 
+  const { fetchData: viewNumsFetch } = MallCherryestimate_catevideoview()
+
+  const handSee = async(e) => {
+    console.log(e, 'eeeee')
+    if (e.detail.fullScreen) {
+      await viewNumsFetch({ id: floatVideoFile[0]?.estimate_video_id })
+    }
+    // e.stopPropagation()
+  }
+
   return (
     <MovableArea className={styles.movableItem}>
       {children}
@@ -152,7 +164,7 @@ const MoveBtn = ({ showFloatVideo = false, floatVideoFile = [], playVideo = true
         className={classnames(styles.moveBtn, showVido && showFloatVideo ? styles.no_bg_moveBtn_next : styles.no_bg_moveBtn_next_ever)}
         direction="all"
         inertia
-        x="470rpx"
+        x="500rpx"
         y="100rpx"
       >
 
@@ -161,14 +173,21 @@ const MoveBtn = ({ showFloatVideo = false, floatVideoFile = [], playVideo = true
             <IconFont name="icon-qingchuxinxi" size={60} color="#acacac"></IconFont>
           </View>
           <Video
-            style={{ width: '300rpx', height: '400rpx', borderRadius: '32rpx' }}
+            style={{ width: '250rpx', height: '400rpx', borderRadius: '16rpx' }}
             autoplay
             id="video"
             src={floatVideoFile.length ? IMG_CND_Prefix + floatVideoFile[0].video_url[0] : ''}
             loop
+            onFullScreenChange={e => handSee(e)}
             object-fit="contain"
           ></Video>
-          <View className={styles.bottom_box}>{floatVideoFile?.[0]?.title}</View>
+          <View className={styles.bottom_box}>
+            <View style={{ marginLeft: '20px' }}>
+              <DotLoading></DotLoading>
+
+            </View>
+            <View className={styles.fonts}>{floatVideoFile?.[0]?.title}</View>
+          </View>
         </View>
       </MovableView>}
       {showCode && <CodeSelect orderObj={orderObj} y={screenHeight.code as number} />}

src/pages/details/index.module.scss

@@ -188,7 +188,7 @@ page {
       padding-top: 30px;
       // width: 100%;
       border-radius: 16px;
-      height: 450px;
+      // height: 450px;
       background-color: #fff;
       margin-top: 25px;
       margin-bottom: 25px;
@@ -205,16 +205,16 @@ page {
       // margin-left: 40px;
       // margin-top: 30px;
       margin: 20px;
-      width: 300px;
+      width: 250px;
-      height: 190px;
+      // height: 190px;
       position: relative;
 
       .cricle {
         position: absolute;
-        top: 20px;
+        top: 90px;
-        right: 20px;
+        right: 80px;
-        width: 40px;
+        width: 90px;
-        height: 40px;
+        height: 90px;
         border-radius: 50%;
         background-color: #c7c7c7;
         display: flex;
@@ -226,7 +226,7 @@ page {
           margin-left: 20px;
           width: 0px;
           height: 0px;
-          border: 15px solid transparent; /*以下四个样式对应四种三角形，任选其一即可实现*/
+          border: 20px solid transparent; /*以下四个样式对应四种三角形，任选其一即可实现*/
           /* border-top-color:lightseagreen; */
           border-left-color: #fff;
           // border-right-color: lightseagreen;
@@ -234,34 +234,46 @@ page {
         }
       }
       .img_style {
-        border-top-right-radius: 16px;
+        border-top-right-radius: 8px;
-        border-top-left-radius: 16px;
+        border-top-left-radius: 8px;
 
         // top: 0;
         // left: 0;
         position: absolute;
         z-index: 12;
-        width: 300px;
+        width: 250px;
-        height: 242px;
+        height: 270px;
       }
-      .bottom_box {
+      .bottom_big {
-        position: absolute;
+        margin-top: -12px;
-        bottom: -102px;
+        width: 247px;
-        z-index: 50;
+        height: 100px;
-        text-align: center;
+        border: 1px solid #d0d0d0;
-        width: 100%;
+        border-bottom-left-radius: 8px;
-        height: 50px;
+        border-bottom-right-radius: 8px;
-        line-height: 50px;
+        .bottom_box {
-        background-color: #c9c9c9;
+          // position: absolute;
-        color: #fff;
+          // bottom: -102px;
-        border-bottom-left-radius: 16px;
+          // z-index: 50;
-        border-bottom-right-radius: 16px;
+          // text-align: center;
-        font-size: 26px;
+          margin-top: 10px;
-      }
+          margin-left: 10px;
-      .title_name {
+          width: 100%;
-        text-align: center;
+          height: 50px;
-        font-size: 28px;
+          // line-height: 50px;
-        margin-top: 10px;
+          // background-color: #c9c9c9;
+          color: #343434;
+          font-weight: 500;
+
+          font-size: 26px;
+        }
+        .title_name {
+          // text-align: center;
+          font-size: 28px;
+          margin-left: 10px;
+          color: #999999;
+          // margin-top: 10px;
+        }
       }
     }
     .tag_box {

src/pages/details/index.tsx

@@ -375,7 +375,7 @@ const Details = (props: Params) => {
             <View className={styles.flexBox}>
               <View className={styles.title}>商品参数</View>
               {
-                productInfo.is_instruct && <View className={styles.flexRight} onClick={() => setshowPopup(true)}>{'特色百科 >'}</View>
+                productInfo.is_instruct && <View className={styles.flexRight} onClick={() => setshowPopup(true)}>{'详细信息 >'}</View>
               }
             </View>
             <View className={styles.con}>
@@ -427,7 +427,7 @@ const Details = (props: Params) => {
                           mode="aspectFill"
                         ></Image>
                         <Video
-                          style={{ width: '300rpx', height: '290rpx', borderRadius: '16rpx' }}
+                          style={{ width: '250rpx', height: '270rpx', borderTopLeftRadius: '8rpx', borderTopRightRadius: '8rpx' }}
                           id={`video${index}`}
                           src={IMG_CND_Prefix + item.video_url[0]}
                           object-fit="contain"
@@ -436,8 +436,10 @@ const Details = (props: Params) => {
                           show-fullscreen-btn={false}
                           onFullScreenChange={event => handleClose(event, `video${index}`)}
                         ></Video>
-                        <View className={styles.bottom_box}>{item.title}</View>
+                        <View className={styles.bottom_big}>
-                        <View className={styles.title_name}>{item.result}</View>
+                          <View className={styles.bottom_box}>{item.title}</View>
+                          <View className={styles.title_name}>{item.result}</View>
+                        </View>
                       </View>
                     )
                   })