add support for rendering ui on various devices

src/components/DetailFramework/DetailFramework.tsx

@@ -105,8 +105,8 @@ export default class DetailFramework extends Component<
       description: this.props.isInfoShow['description'] ? (
         <View
           style={{
-            paddingTop: 10,
-            paddingBottom: 10,
+            paddingTop: '20rpx',
+            paddingBottom: '20rpx',
             width: '94%',
             marginLeft: '3%',
           }}
@@ -123,8 +123,8 @@ export default class DetailFramework extends Component<
       info: this.props.isInfoShow['info'] ? (
         <View
           style={{
-            paddingTop: 10,
-            paddingBottom: 10,
+            paddingTop: '20rpx',
+            paddingBottom: '20rpx',
             width: '94%',
             marginLeft: '3%',
           }}
@@ -133,7 +133,7 @@ export default class DetailFramework extends Component<
             isFull
             title={pt.get().ticketDetail.info.title}
             extra={pt.get().ticketDetail.info.extra}
-            extraStyle={{ fontSize: '32rpx', marginRight: 20 }}
+            extraStyle={{ fontSize: '32rpx', marginRight: '40rpx' }}
           >
             <View style={{ display: 'flex' }}>
               <View className='at-article__h3'>
@@ -149,7 +149,7 @@ export default class DetailFramework extends Component<
         <View></View>
       ),
       current: this.props.isInfoShow['current'] ? (
-        <View style={{ padding: 10 }}>
+        <View style={{ padding: '20rpx' }}>
           <AtSteps
             items={this.state.items}
             current={this.state.current}
@@ -161,11 +161,11 @@ export default class DetailFramework extends Component<
       ),
       notelist: this.props.isInfoShow['notelist'] ? (
         this.props.isInfoShow['showAllNotes'] ? (
-          <View style={{ padding: 10 }}>
+          <View style={{ padding: '20rpx' }}>
             <NoteList noteList={this.state.notes} />
           </View>
         ) : (
-          <View style={{ padding: 10 }}>
+          <View style={{ padding: '20rpx' }}>
             <NoteList
               noteList={[this.state.notes[this.state.notes.length - 1]]}
             />

src/components/NoteCard/NoteCard.tsx

@@ -35,7 +35,7 @@ export default class NoteCard extends Component<NoteCardProps, {}> {
     }
 
     return (
-      <View style={{ marginTop: 20, marginBottom: 20 }}>
+      <View style={{ marginTop: '40rpx', marginBottom: '40rpx' }}>
         <View className='at-article__p'>{note.op}</View>
         <View className='at-article__info'>
           {note.createdTime.format(timeFormat)}

src/components/NoteList/NoteList.tsx

@@ -19,7 +19,7 @@ export default class NoteList extends Component<NoteListProps, {}> {
         <AtDivider
           fontColor='#CCC'
           content={pt.get().ticketDetail.divider}
-          height={40}
+          height='80rpx'
         />
         {this.props.noteList.map((note, idx) => (
           <View key={idx}>

src/components/PageFooter/PageFooter.tsx

@@ -3,8 +3,8 @@ import { AtDivider } from 'taro-ui';
 import pt from '@/plain-text';
 
 export default () => {
-  const blankHeightUpper = 15;
-  const blankHeightLower = 110;
+  const blankHeightUpper = '30rpx';
+  const blankHeightLower = '220rpx';
   return (
     <View>
       <View style={{ height: blankHeightUpper }}></View>
@@ -16,7 +16,7 @@ export default () => {
         />
       </View>
       <View className='at-row at-row__justify--center'>
-        <Text style='color:#dddddd;'>© 2024 EVA Tech</Text>
+        <Text style='color:#dddddd; fontSize:32rpx'>© 2024 EVA Tech</Text>
       </View>
       <View style={{ height: blankHeightLower }}></View>
     </View>