Browse Source

移动端logo显示异常,活动详情页样式调整

lwei 1 year ago
parent
commit
3ca8f5eb05

+ 65 - 29
src/Activity/ActivitySpecialInfo.tsx

@@ -1,7 +1,8 @@
 import React, { useState } from 'react'
 import useRequest from '@ahooksjs/use-request/es'
+import { useHistory } from 'react-router-dom'
 
-import { Descriptions, Col, Row, Tag, Modal, Popover, Spin } from 'antd'
+import { Col, Row, Tag, Modal, Popover, Spin } from 'antd'
 import { InfoCircleOutlined } from '@ant-design/icons'
 
 import { ReactComponent as CityImg } from 'assets/city.svg'
@@ -9,6 +10,7 @@ import { ReactComponent as CityImg } from 'assets/city.svg'
 import NoPermission, { INewPermissionType, ISpecialType, ITryType } from 'Material/components/NoPermission'
 import { useLogin2p } from 'Login2p/Login2pContext'
 import ResearchActivity from 'Community/components/ResearchActivity'
+import NButton from 'components/NButton/NButton'
 import ActivityBtnComponent from './components/ActivityBtn.component'
 import { ActivityService } from './Activity.service'
 import styles from './css/ActivityTypeDetail.module.scss'
@@ -20,6 +22,7 @@ export interface IActivitySpecialInfo {
 const ActivitySpecialInfo: React.FC<IActivitySpecialInfo> = props => {
   const { activityID } = props
   const login2p = useLogin2p()
+  const history = useHistory()
 
   const [isFollow, setIsFollow] = useState<boolean>(false)
 
@@ -70,6 +73,13 @@ const ActivitySpecialInfo: React.FC<IActivitySpecialInfo> = props => {
         })
       : applyActivityFollow()
   }
+  // 登录报名
+  const handleToShowMore = () => {
+    if (!login2p.jwt) {
+      history.push(`/login2p?next=${window.location.pathname}`)
+      return
+    }
+  }
   return (
     <div className={styles['activity-detail-page']}>
       <Spin spinning={activityInfoLoading}>
@@ -91,16 +101,13 @@ const ActivitySpecialInfo: React.FC<IActivitySpecialInfo> = props => {
                         {isFollow ? '取消通知' : '新活动通知'}
                       </div>
                     </div>
-                    <Descriptions
-                      title={data?.Detail.ResearchTheme}
-                      column={1}
-                      labelStyle={{ width: 75, justifyContent: 'flex-end' }}
-                      className="activity-detail-des"
-                    >
-                      <Descriptions.Item label="活动类型">
-                        <span className="g-va-middle">
-                          ({data?.Detail.ChartPermissionName}) {data?.Detail.ActivityTypeName}
-                        </span>
+                    <div className="activity-detail-title">
+                      <span className="com-fz18">{data?.Detail.ResearchTheme}</span>
+                    </div>
+                    <div className="activity-detail-list">
+                      <div className="activity-detail-line">
+                        <span className="activity-detail-label">活动类型:</span>
+                        <span className="g-va-middle no-wrap">{data?.Detail.ActivityTypeName}</span>
                         <Tag color="blue" className="spec-tag-ml">
                           {data?.Detail.TripStatus === 1 ? '预报名' : '确定行程'}
                         </Tag>
@@ -116,59 +123,88 @@ const ActivitySpecialInfo: React.FC<IActivitySpecialInfo> = props => {
                         )}
                         {data?.Detail.City && (
                           <div className="city-wrapper g-va-middle">
-                            <CityImg fill="#3385FF" className="city-img" />
+                            <CityImg fill="#faa12f" className="city-img" />
                             <span className="g-va-middle">{data?.Detail.City}</span>
                           </div>
                         )}
-                      </Descriptions.Item>
-                      <Descriptions.Item label="所属行业">{data?.Detail.ChartPermissionName}</Descriptions.Item>
+                      </div>
+                      <div className="activity-detail-line">
+                        <span className="activity-detail-label">所属行业:</span>
+                        {data?.Detail.ChartPermissionName}
+                      </div>
                       {data?.Detail.TripStatus === 1 && data?.Detail.ActivityTimeText && (
-                        <Descriptions.Item label="预期时间">{data?.Detail.ActivityTimeText}</Descriptions.Item>
+                        <div className="activity-detail-line">
+                          <span className="activity-detail-label">预期时间:</span>
+                          {data?.Detail.ActivityTimeText}
+                        </div>
                       )}
+
                       {data?.Detail.TripStatus === 2 && data?.Detail.ActivityTimeTextByDay && (
-                        <Descriptions.Item label="开始时间">{data?.Detail.ActivityTimeTextByDay}</Descriptions.Item>
+                        <div className="activity-detail-line">
+                          <span className="activity-detail-label">开始时间:</span>
+                          {data?.Detail.ActivityTimeTextByDay}
+                        </div>
                       )}
                       {data?.Detail.SpecialType && (
-                        <Descriptions.Item label="调研形式">
+                        <div className="activity-detail-line">
+                          <span className="activity-detail-label">调研形式:</span>
                           {data?.Detail.SpecialType === 1 ? '线上' : '线下'}
-                        </Descriptions.Item>
+                        </div>
                       )}
                       {data?.Detail.IndustrialName || data?.Detail.IndustrialSubjectName ? (
                         <>
                           {data?.Detail.IndustrialName && (
-                            <Descriptions.Item label="产业名称">{data?.Detail.IndustrialName}</Descriptions.Item>
+                            <div className="activity-detail-line">
+                              <span className="activity-detail-label">产业名称:</span>
+                              {data?.Detail.IndustrialName}
+                            </div>
                           )}
 
                           {data?.Detail.IndustrialSubjectName && (
-                            <Descriptions.Item label="相关公司">{data?.Detail.IndustrialSubjectName}</Descriptions.Item>
+                            <div className="activity-detail-line">
+                              <span className="activity-detail-label">相关公司:</span>
+                              {data?.Detail.IndustrialSubjectName}
+                            </div>
                           )}
                         </>
                       ) : (
                         <>
                           {data?.Detail.Label && (
-                            <Descriptions.Item label="相关主题">{data?.Detail.Label}</Descriptions.Item>
+                            <div className="activity-detail-line">
+                              <span className="activity-detail-label">相关主题:</span>
+                              {data?.Detail.Label}
+                            </div>
                           )}
                         </>
                       )}
                       {data?.Detail.ReportLink && (
-                        <Descriptions.Item label="相关报告">
+                        <div className="activity-detail-line">
+                          <span className="activity-detail-label">相关报告:</span>
                           <a href={data?.Detail.ReportLink}>{data?.Detail.ReportLink}</a>
-                        </Descriptions.Item>
+                        </div>
                       )}
-                    </Descriptions>
-                    <div className="detail-btn-wrapper">
-                      {login2p.jwt && data.HasPermission === INewPermissionType.OK && data?.Detail && (
+                    </div>
+                    {login2p.jwt && data.HasPermission === INewPermissionType.OK && data?.Detail && (
+                      <div className="detail-btn-wrapper">
                         <ActivityBtnComponent
                           item={data?.Detail}
+                          btnGrous="detail"
                           isSpecial={true}
                           btnWrap={true}
                           onChangeSomething={refresh}
                         />
-                      )}
-                    </div>
+                      </div>
+                    )}
+                    {!login2p.jwt && (
+                      <div className="detail-btn-wrapper">
+                        <NButton type="primary" onClick={handleToShowMore} size="big-large" className="m-center">
+                          请登录后报名
+                        </NButton>
+                      </div>
+                    )}
                   </div>
                 ) : null}
-                {!activityInfoLoading && data?.HasPermission !== INewPermissionType.OK ? (
+                {!activityInfoLoading && login2p.jwt && data?.HasPermission !== INewPermissionType.OK ? (
                   <NoPermission
                     hasPermission={data?.HasPermission}
                     detailID={activityID}

+ 6 - 1
src/Activity/css/ActivityTypeDetail.module.scss

@@ -25,6 +25,7 @@
         display: inline-block;
         min-width: 85px;
         text-align: right;
+        color:rgba(0, 0, 0, 0.45)
       }
     }
     .audio-div {
@@ -173,6 +174,10 @@
 }
 @media screen and (max-width: 1024px) {
   .activity-detail-page {
-    padding: 0 20px;
+    :global{
+      .activity-detail-content {        
+        padding: 10px;
+      }
+    }
   }
 }

+ 1 - 1
src/NewPageHeader.tsx

@@ -150,7 +150,7 @@ const NewPage: React.FC = props => {
         <div className={styles['newpage-mobile-header']}>
           <div className="newpage-mobile-menu-wrapper">
             <img
-              src='"https://hzstatic.hzinsights.com/cygx_web/ico/logo_inedx.png"'
+              src="https://hzstatic.hzinsights.com/cygx_web/ico/logo_inedx.png"
               className={styles.headerLogo}
               alt="logo"
             />