静态页面

src/pages/video/liveDetail/index.jsx

@@ -14,10 +14,10 @@ export default withLayout((props) => {
   const { router, shareContent, trackData, person, page } = props;
   const { id } = router.params;
 
-  const [data,setData] = useState({})
+  const [data, setData] = useState({})
   // 直播间信息
   const livingRef = useRef()
-  
+
   // 本页面分享或者海报参数
   const paramsRef = useParams({
     id,
@@ -26,7 +26,7 @@ export default withLayout((props) => {
     from: `${page.type}_share`,
   });
   const fullTrackData = { ...trackData, buildingId: data?.buildingId };
-  
+
   useShare(
     {
       title: shareContent.shareContentTitle || data?.name,
@@ -37,14 +37,14 @@ export default withLayout((props) => {
   );
 
   const getData = () => {
-    queryLiveDetail(id).then(res=>{
-        setData(res)
-        if (res?.liveRoomParam) {
-          const { livingid } = JSON.parse(res.liveRoomParam)
-          getLivingCode(livingid).then((liveInfo) => {
-            livingRef.current = liveInfo
-          })
-        }
+    queryLiveDetail(id).then(res => {
+      setData(res)
+      if (res?.liveRoomParam) {
+        const { livingid } = JSON.parse(res.liveRoomParam)
+        getLivingCode(livingid).then((liveInfo) => {
+          livingRef.current = liveInfo
+        })
+      }
     })
   };
 
@@ -58,7 +58,7 @@ export default withLayout((props) => {
     }
 
     // https://work.weixin.qq.com/api/doc/90000/90135/93635
-    const { livingCode, status  } =  livingRef.current
+    const { livingCode, status } = livingRef.current
 
     //
     if (status >= 3) {
@@ -85,13 +85,19 @@ export default withLayout((props) => {
       getData(id);
     }
   }, [id]);
-//   
+  //   
   return <view className="liveDetail">
-       {data.liveActivityId&&<><Image mode='aspectFill' src={getImgURL(data.detailTypeImg)} className='liveImg'></Image>
-       <view className='liveDetail-menu'>
-           <view onClick={()=>{Taro.navigateTo({ url: `/pages/index/buildingDetail/index?id=${data.buildingId}` })}}><text className="iconfont icon-fenxiang"></text><text>查看楼盘</text></view>
-           <view onClick={handleLive}><text className="iconfont icon-camera"></text><text>观看直播</text></view>
-           <button openType="share"><text className="iconfont icon-fenxiang"></text><text>分享好友</text></button>
-       </view></>}
+    {data.liveActivityId && <><Image mode='aspectFill' src={getImgURL(data.detailTypeImg)} className='liveImg'></Image>
+      <view className='liveDetail-menu flex-h'>
+        <view className='flex-item'>
+          <view onClick={() => { Taro.navigateTo({ url: `/pages/index/buildingDetail/index?id=${data.buildingId}` }) }}><text className="iconfont icon-fenxiang"></text><text>查看楼盘</text></view>
+        </view>
+        <view className='flex-item'>
+          <view onClick={handleLive}><text className="iconfont icon-camera"></text><text>观看直播</text></view>
+        </view>
+        <view className='flex-item'>
+          <button openType="share"><text className="iconfont icon-fenxiang"></text><text>分享好友</text></button>
+        </view>
+      </view></>}
   </view>;
 });

src/pages/video/liveDetail/index.scss

@@ -8,7 +8,7 @@
     height: 100%;
   }
   &-menu {
-      margin: auto;
+    margin: auto;
     display: flex;
     justify-content: space-around;
     align-items: center;
@@ -21,18 +21,22 @@
     font-size: 26px;
     font-family: DengXian;
     font-weight: bold;
-   
+
     line-height: 30px;
     letter-spacing: 6px;
-    text{
-         color: #ffffff;
-    }
-    >button {
-      background: none;
-      border: none;
-      color: #fff;
-      &::after {
-        display: none;
+    > view {
+      text-align: center;
+      text {
+        color: #ffffff;
+        font-size: 26px;
+      }
+      > button {
+        background: none;
+        border: none;
+        color: #fff;
+        &::after {
+          display: none;
+        }
       }
     }
   }