.

src/pages/dogCardDetail/index.jsx

@@ -1,4 +1,5 @@
 import { View, Image, ScrollView } from '@tarojs/components'
+import RatioItem from '@/components/RatioItem';
 import './style.less'
 
 export default (props) => {
@@ -22,12 +23,19 @@ export default (props) => {
                 <View className='lable'>犬名</View>：
                 <View className='content'>噬嗥</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>
+                <RatioItem ratio='109:151'>
+                  <Image
+                    style={{width:'100%'}}
+                    mode='center'
+                    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>
+                </RatioItem>
             </View>
           </View>
           <View className='cell' style={{ marginTop: '0' }}>
@@ -39,10 +47,7 @@ export default (props) => {
             <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>

src/pages/dogCardDetail/style.less

@@ -41,21 +41,18 @@
         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 0 16px;
+    .body{
+      display: flex;
+      justify-content:space-between;
+      .cardLeft{
+        width: 60%;
+      }
+      .cardRight{
+        overflow: hidden;
+        width: 35%;
+        margin: 16px 0;        
       }
-      // 100vw-64px-32px*0.4
     }
+    
   }
 }