.

src/app.config.js

     'pages/LicenseInfo/index',
     'pages/dogList/index',
     'pages/setDogInfo/index',
+    'pages/dogCardDetail/index',
   ],
   window: {
     backgroundTextStyle: 'light',

src/pages/dogCardDetail/index.config.js

+export default {
+  navigationBarTitleText: '犬证详情',
+  disableScroll: true,
+  navigationBarBackgroundColor: "#FBD804",
+  navigationBarTextStyle: "black",
+  backgroundColor: "#FBD804",
+  usingComponents: {
+  }
+
+}

src/pages/dogCardDetail/index.jsx

+import { View, Image, ScrollView } from '@tarojs/components'
+import './style.less'
+
+export default (props) => {
+  const status=2;
+  return (
+    <ScrollView scrollY style={{ height: '100vh' }}>
+      <View className='dogCardDetail'>
+        <View className='card'>
+          <View className='title'>电&nbsp;&nbsp;&nbsp;子&nbsp;&nbsp;&nbsp;版&nbsp;&nbsp;&nbsp;犬&nbsp;&nbsp;&nbsp;证</View>
+
+          <View className='body'>
+            <View className='cardLeft'>
+              <View className='cell'>
+                <View className='lable'>犬主</View>：
+                <View className='content'>六花</View>
+              </View>
+              <View className='cell'>
+                <View className='lable'>电话</View>：
+                <View className='content'>18544446868</View>
+              </View>
+              <View className='cell'>
+                <View className='lable'>犬名</View>：
+                <View className='content'>噬嗥</View>
+              </View>
+            </View>
+            <View className='cardRight'>
+              <Image
+                className='thumb'
+                src='https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fq_70%2Cc_zoom%2Cw_640%2Fimages%2F20181228%2Ff22539cd34044f5f821e9893f508765d.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656163682&t=bec14da4c530bf5f0ae04ff8488a9ebd'
+              ></Image>
+            </View>
+          </View>
+          <View className='cell' style={{marginTop:'-8px'}}>
+            <View className='lable'>状态</View>：
+            <View className={['state','color'+status]}>{status==1?'正常':status==2?'过期':'挂失'}</View>
+            {/* 挂失 续期 */}
+          </View>
+          <View className='cell'>
+            <View className='lable'>犬种</View>：
+            <View className='content'>银月狼神一族</View>
+          </View>
+          <View className='cell'>
+            <View className='lable'>毛色</View>：
+            <View className='content'>米白</View>
+          </View>
+          <View className='cell'>
+            <View className='lable'>证件号</View>：
+            <View className='content'>36559948485522</View>
+          </View>
+          <View className='cell'>
+            <View className='lable'>有效期</View>：
+            <View className='content'>2021-12-20~2022-12-20</View>
+          </View>
+          <View className='cell'>
+            <View className='lable'>住址</View>：
+            <View className='content'>江苏省南京市江宁区南京南站城际空间站旁边第一个小区的一期的219栋3304房最里面那间</View>
+          </View>
+        </View>
+      </View>
+    </ScrollView>
+  )
+}

src/pages/dogCardDetail/style.less

+.dogCardDetail{
+  padding: 32px;
+  .card{
+    background-color: rgb(251, 216, 4);
+    border-radius: 16px;
+    padding: 32px 16px;
+    .title{
+      font-size: 48px;
+      font-weight: bold;
+      text-align: center;
+      margin-bottom: 32px;
+    }
+    .cell{
+      margin: 16px 0;
+      display: flex;
+      .lable{
+        width: 3em;
+        display: inline-block;
+        text-align: justify;
+        text-align-last: justify;
+        padding: 8px 0;
+      }
+      .content{
+        flex: 1;
+        padding: 8px 16px;
+        background-color: white;
+      }
+      .state{
+        flex: 1;
+        padding: 8px 16px;
+        text-align: center;
+        letter-spacing: 0.5em;
+      }
+      .color1{
+        background-color: yellowgreen;
+      }
+      .color2{
+        background-color:red;
+      }
+      .color3{
+        background-color:rgb(170, 168, 168);
+      }
+    }
+    .cardLeft{
+      width: 60%;
+      display: inline-block;
+    }
+    .cardRight{
+      width: 40%;
+      display: inline-block;
+      text-align: center;
+      vertical-align: top;
+      .thumb{
+        width: 30vw;
+        height: 30vw;
+        margin: 16px 0 16px 16px;
+      }
+      // 100vw-64px-32px*0.4
+    }
+  }
+}

src/pages/index/index.jsx

     Taro.navigateTo({url:'/pages/noticeInfo/index'})
   }
   const goDogLicenseList = (e) => {
+    // Taro.navigateTo({
+    //   url: '/pages/dogLicenseList/index'
+    // })
     Taro.navigateTo({
-      url: '/pages/dogLicenseList/index'
+      url: '/pages/dogCardDetail/index'
     })
   }
   return (