beautify ui!

src/components/DetailFramework/DetailFramework.tsx

@@ -103,56 +103,48 @@ export default class DetailFramework extends Component<
         <View></View>
       ),
       description: this.props.isInfoShow['description'] ? (
-        this.props.isInfoShow['info'] ? (
+        <View
-          <View
+          style={{
-            className='at-row'
+            paddingTop: 10,
-            style={{ paddingTop: 10, paddingBottom: 10, width: '100%' }}
+            paddingBottom: 10,
+            width: '94%',
+            marginLeft: '3%',
+          }}
+        >
+          <AtCard isFull title={pt.get().ticketDetail.descTitle}>
+            <View className='at-article__h3'>
+              {this.state.ticketInfo.description}
+            </View>
+          </AtCard>
+        </View>
+      ) : (
+        <View></View>
+      ),
+      info: this.props.isInfoShow['info'] ? (
+        <View
+          style={{
+            paddingTop: 10,
+            paddingBottom: 10,
+            width: '94%',
+            marginLeft: '3%',
+          }}
+        >
+          <AtCard
+            isFull
+            title={pt.get().ticketDetail.info.title}
+            extra={pt.get().ticketDetail.info.extra}
+            extraStyle={{ fontSize: '32rpx', marginRight: 20 }}
           >
-            <View
+            <View style={{ display: 'flex' }}>
-              className='at-col'
-              style={{
-                marginLeft: 10,
-                paddingRight: 5,
-                marginTop: 10,
-                marginBottom: 10,
-                width: '50%',
-              }}
-            >
-              <AtCard title={pt.get().ticketDetail.descTitle}>
-                <View className='at-article__h3'>
-                  {this.state.ticketInfo.description}
-                </View>
-              </AtCard>
-            </View>
-            <View
-              className='at-col'
-              style={{
-                marginLeft: 5,
-                paddingRight: 10,
-                marginTop: 10,
-                marginBottom: 10,
-                width: '50%',
-              }}
-            >
-              <AtCard title={pt.get().ticketDetail.infoTitle}>
-                <View className='at-article__h3'>
-                  {this.state.ticketInfo.info.name}
-                </View>
-                <View className='at-article__h3'>
-                  {this.state.ticketInfo.info.phone}
-                </View>
-              </AtCard>
-            </View>
-          </View>
-        ) : (
-          <View style={{ marginTop: 10, marginBottom: 10 }}>
-            <AtCard title={pt.get().ticketDetail.descTitle}>
               <View className='at-article__h3'>
-                {this.state.ticketInfo.description}
+                {this.state.ticketInfo.info.name}
               </View>
-            </AtCard>
+              <View style={{ marginLeft: 'auto' }} className='at-article__h3'>
-          </View>
+                {this.state.ticketInfo.info.phone}
-        )
+              </View>
+            </View>
+          </AtCard>
+        </View>
       ) : (
         <View></View>
       ),
@@ -189,6 +181,7 @@ export default class DetailFramework extends Component<
         {elements.device}
         {elements.createdTime}
         {elements.description}
+        {elements.info}
         {elements.current}
         {this.props.middleButton}
         {elements.notelist}

src/components/NoteCard/NoteCard.tsx

@@ -36,13 +36,12 @@ export default class NoteCard extends Component<NoteCardProps, {}> {
     }
 
     return (
-      <View>
+      <View style={{ marginTop: 20, marginBottom: 20 }}>
-        <View className='at-article__h2'>{note.op}</View>
+        <View className='at-article__p'>{note.op}</View>
         <View className='at-article__info'>
           {note.createdTime.format(timeFormat)}
         </View>
-        <View className='at-article__p'>{message}</View>
+        <View className='at-article__h3'>{message}</View>
-        <AtDivider />
       </View>
     );
   }

src/components/NoteList/NoteList.tsx

@@ -15,7 +15,7 @@ export default class NoteList extends Component<NoteListProps, {}> {
   render(): ReactNode {
     return (
       <View>
-        <AtDivider />
+        <AtDivider height={40} />
         {this.props.noteList.map((note, idx) => (
           <View key={idx}>
             <NoteCard note={note} />

src/pages/TicketDetail/TicketDetail.tsx

@@ -269,10 +269,10 @@ export default class TicketDetail extends Component<{}, TicketDetailState> {
             <AtButton
               loading={this.state.isStatusLoading}
               disabled={this.state.isStatusDisable}
-              type='secondary'
+              type='primary'
               onClick={this.onChangeStatus.bind(this)}
             >
-              {pt.get().ticketDetail.addNote}
+              {pt.get().ticketDetail.status.button}
             </AtButton>
           </View>
           <View

src/pages/TicketDetail/TicketNote.ts

@@ -23,6 +23,7 @@ export class ShowElements {
   device: JSX.Element;
   createdTime: JSX.Element;
   description: JSX.Element;
+  info: JSX.Element;
   current: JSX.Element;
   notelist: JSX.Element;
 }

src/pages/index/DutyInfo.tsx

@@ -49,7 +49,7 @@ class Card extends Component {
           <View
             style={{
               marginLeft: 10,
-              fontSize: 30,
+              fontSize: '60rpx',
               fontWeight: 'bold',
             }}
           >

src/pages/index/index.tsx

@@ -105,15 +105,17 @@ export default class MainPage extends Component<{}, MainPageState> {
     return (
       <View>
         <TitleCard />
-        <View style={{ marginTop: 30 }}>
+        <View style={{ width: '94%', marginLeft: '3%' }}>
-          {mainPageCard(this.state.dutyInfoCard)}
+          <View style={{ marginTop: 30 }}>
-          {mainPageCard(this.state.tipsInfoCard)}
+            {mainPageCard(this.state.dutyInfoCard)}
-          <ExpandItem
+            {mainPageCard(this.state.tipsInfoCard)}
-            title={mainPage.expandTitle.stepInfo}
+            <ExpandItem
-            content={mainPageCard(this.state.stepInfoCard)}
+              title={mainPage.expandTitle.stepInfo}
-          />
+              content={mainPageCard(this.state.stepInfoCard)}
+            />
+          </View>
+          <PageFooter />
         </View>
-        <PageFooter />
       </View>
     );
   }

src/pages/repair/repair.tsx

@@ -207,9 +207,16 @@ export default class RepairPage extends Component<{}, RepairPageState> {
       </AtCard>
     ));
     return (
-      <View>
+      <View style={{ width: '94%', marginLeft: '3%' }}>
         <AtMessage />
-        {ticketsRenderer}
+        <View
+          style={{
+            marginTop: 10,
+            marginBottom: 20,
+          }}
+        >
+          {ticketsRenderer}
+        </View>
         <AtCard
           note={pt.get().repairPage.cardText.note}
           title={pt.get().repairPage.cardText.title}

src/plain-text/TicketDetail.ts

@@ -10,7 +10,10 @@ export interface TicketDetailText {
   statusModifyPrefix: string;
   statusModifyMessage: Map<StatusStr, string>;
   descTitle: string;
-  infoTitle: string;
+  info: {
+    title: string;
+    extra: string;
+  };
   tookAway: string;
   addToOreo: string;
   addNote: string;
@@ -54,7 +57,10 @@ export const ticketDetailZhCn: TicketDetailText = {
     ['7', '维修翻车已取回'],
   ]),
   descTitle: '问题描述',
-  infoTitle: '机主信息',
+  info: {
+    title: '机主姓名',
+    extra: '联系方式',
+  },
   tookAway: '我已取回',
   addToOreo: '加入 Oreo',
   addNote: '添加评论',
@@ -98,7 +104,10 @@ export const ticketDetailEnUs: TicketDetailText = {
     ['7', 'Retrieved (Failed)'],
   ]),
   descTitle: 'Description',
-  infoTitle: 'Contact',
+  info: {
+    title: 'Name',
+    extra: 'Contact',
+  },
   tookAway: 'Already retrieved',
   addToOreo: 'Add to Oreo',
   addNote: 'Comment',