add support for rendering ui on various devices

src/pages/index/DutyInfo.tsx

@@ -36,19 +36,19 @@ class Card extends Component {
           style={{
             display: 'flex',
             alignItems: 'center',
-            marginBottom: 20,
+            marginBottom: '40rpx',
           }}
         >
           <Image
             src={iconsrc}
             style={{
-              width: 24,
-              height: 24,
+              width: '48rpx',
+              height: '48rpx',
             }}
           />
           <View
             style={{
-              marginLeft: 10,
+              marginLeft: '20rpx',
               fontSize: '60rpx',
               fontWeight: 'bold',
             }}

src/pages/index/TitleCard.tsx

@@ -10,7 +10,7 @@ export default class TitleCard extends React.Component {
       <View className='at-row at-row__align--center'>
         <View className='at-col at-col-1 at-col--auto'>
           <Image
-            style='width: 50px; height: 50px; margin-left: 15px;'
+            style='width: 100rpx; height: 100rpx; margin-left: 30rpx;'
             src={logo}
             mode='aspectFit'
           />

src/pages/index/index.tsx

@@ -20,7 +20,7 @@ class CardContent {
 
 function mainPageCard(c: CardContent): JSX.Element {
   return (
-    <View style={{ marginTop: 10, marginBottom: 20 }}>
+    <View style={{ marginTop: '20rpx', marginBottom: '40rpx' }}>
       <AtCard note={c.note} extra={c.extra} title={c.title}>
         {c.content()}
       </AtCard>
@@ -106,7 +106,7 @@ export default class MainPage extends Component<{}, MainPageState> {
       <View>
         <TitleCard />
         <View style={{ width: '94%', marginLeft: '3%' }}>
-          <View style={{ marginTop: 30 }}>
+          <View style={{ marginTop: '60rpx' }}>
             {mainPageCard(this.state.dutyInfoCard)}
             {mainPageCard(this.state.tipsInfoCard)}
             <ExpandItem