update duty info card

src/pages/index/DutyInfo.tsx

@@ -1,6 +1,9 @@
 import { Component, ReactNode } from 'react';
-import { View } from '@tarojs/components';
+import { View, Image } from '@tarojs/components';
+import { AtTimeline } from 'taro-ui';
 import pt from '@/plain-text';
+import tick from '@/assets/icons/MainPage/tick.svg';
+import cross from '@/assets/icons/MainPage/cross.svg';
 
 export class DutyData {
   constructor() {
@@ -18,6 +21,45 @@ export class DutyData {
   dutyRecoverTime: string; // from backend
 }
 
+class Card extends Component {
+  props = {
+    isInDuty: false,
+  };
+  render(): ReactNode {
+    const inDuty = this.props.isInDuty;
+    const dc = pt.get().mainPage.dutyCard;
+    const title = inDuty ? dc.inDuty.title : dc.offDuty.title;
+    const iconsrc = inDuty ? tick : cross;
+    return (
+      <View>
+        <View
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            marginBottom: 20,
+          }}
+        >
+          <Image
+            src={iconsrc}
+            style={{
+              width: 24,
+              height: 24,
+            }}
+          />
+          <View
+            style={{
+              marginLeft: 10,
+              fontSize: 36,
+            }}
+          >
+            {title}
+          </View>
+        </View>
+      </View>
+    );
+  }
+}
+
 export class DutyInfo extends Component {
   props = {
     data: new DutyData(),
@@ -28,9 +70,13 @@ export class DutyInfo extends Component {
     const od = pt.get().mainPage.dutyCard.offDuty;
     return (
       <View>
-        <View>{od.title}</View>
-        <View>{od.reason(data.offDutyReason)}</View>
-        <View>{od.recoverTime(data.dutyRecoverTime)}</View>
+        <Card isInDuty={data.isInDuty} />
+        <AtTimeline
+          items={[
+            { title: od.reason(data.offDutyReason) },
+            { title: od.recoverTime(data.dutyRecoverTime) },
+          ]}
+        />
       </View>
     );
   }
@@ -40,9 +86,13 @@ export class DutyInfo extends Component {
     const id = pt.get().mainPage.dutyCard.inDuty;
     return (
       <View>
-        <View>{id.title}</View>
-        <View>{id.currentDutyText(data.currentDuty)}</View>
-        <View>{id.inDutyCnt(data.inDutyCnt)}</View>
+        <Card isInDuty={data.isInDuty} />
+        <AtTimeline
+          items={[
+            { title: id.currentDutyText(data.currentDuty) },
+            { title: id.inDutyCnt(data.inDutyCnt) },
+          ]}
+        />
       </View>
     );
   }