feat(首页): 新增 房抵贷 卡片

src/assets/v1.5.0/badge-house.svg

@@ -0,0 +1,20 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#230;&#136;&#191;&#230;&#138;&#181;&#232;&#180;&#183;&#229;&#155;&#190;&#230;&#160;&#135;" clip-path="url(#clip0_28916_5960)">
+<rect id="Rectangle 1332" width="22" height="22" rx="4" fill="#F7F8FF"/>
+<g id="Group 176813">
+<g id="Subtract">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.8295 10.2459C18.0358 10.228 18.2273 10.1312 18.3641 9.97578H18.3529C18.4267 9.87485 18.4596 9.74971 18.445 9.62549C18.4304 9.50128 18.3693 9.38719 18.2741 9.30616L11.9493 4.31496C11.6628 4.11013 11.3195 4 10.9673 4C10.6152 4 10.2719 4.11013 9.98541 4.31496L3.67748 9.30616C3.58134 9.38642 3.51918 9.50012 3.50352 9.62436C3.48786 9.74861 3.51986 9.87418 3.59307 9.97578C3.73853 10.1354 3.94029 10.2322 4.15578 10.2459C4.23248 10.2527 4.30402 10.2874 4.35689 10.3434C4.40977 10.3994 4.44031 10.4728 4.44276 10.5497L4.52154 16.4919C4.56614 16.9077 4.7635 17.2922 5.07538 17.5708C5.38726 17.8494 5.79146 18.0024 6.20965 18H15.7757C16.1939 18.0024 16.5981 17.8494 16.9099 17.5708C17.2218 17.2922 17.4192 16.9077 17.4638 16.4919L17.5426 10.5497C17.5438 10.4724 17.5739 10.3983 17.627 10.3421C17.6801 10.2858 17.7524 10.2515 17.8295 10.2459ZM9.45095 12.6391C9.45095 12.0595 9.92362 11.4349 10.9928 11.4349C12.045 11.4349 12.5233 12.0595 12.5402 12.6391V14.3416C12.5402 14.5162 12.4708 14.6837 12.3474 14.8072C12.2239 14.9306 12.0565 15 11.8818 15H10.1037C10.0175 15 9.93216 14.9829 9.85259 14.9498C9.77303 14.9166 9.70082 14.868 9.64013 14.8068C9.57945 14.7456 9.53148 14.673 9.49901 14.5932C9.46654 14.5133 9.45021 14.4278 9.45095 14.3416V12.6391Z" fill="#DCEDF4"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.8295 10.2459C18.0358 10.228 18.2273 10.1312 18.3641 9.97578H18.3529C18.4267 9.87485 18.4596 9.74971 18.445 9.62549C18.4304 9.50128 18.3693 9.38719 18.2741 9.30616L11.9493 4.31496C11.6628 4.11013 11.3195 4 10.9673 4C10.6152 4 10.2719 4.11013 9.98541 4.31496L3.67748 9.30616C3.58134 9.38642 3.51918 9.50012 3.50352 9.62436C3.48786 9.74861 3.51986 9.87418 3.59307 9.97578C3.73853 10.1354 3.94029 10.2322 4.15578 10.2459C4.23248 10.2527 4.30402 10.2874 4.35689 10.3434C4.40977 10.3994 4.44031 10.4728 4.44276 10.5497L4.52154 16.4919C4.56614 16.9077 4.7635 17.2922 5.07538 17.5708C5.38726 17.8494 5.79146 18.0024 6.20965 18H15.7757C16.1939 18.0024 16.5981 17.8494 16.9099 17.5708C17.2218 17.2922 17.4192 16.9077 17.4638 16.4919L17.5426 10.5497C17.5438 10.4724 17.5739 10.3983 17.627 10.3421C17.6801 10.2858 17.7524 10.2515 17.8295 10.2459ZM9.45095 12.6391C9.45095 12.0595 9.92362 11.4349 10.9928 11.4349C12.045 11.4349 12.5233 12.0595 12.5402 12.6391V14.3416C12.5402 14.5162 12.4708 14.6837 12.3474 14.8072C12.2239 14.9306 12.0565 15 11.8818 15H10.1037C10.0175 15 9.93216 14.9829 9.85259 14.9498C9.77303 14.9166 9.70082 14.868 9.64013 14.8068C9.57945 14.7456 9.53148 14.673 9.49901 14.5932C9.46654 14.5133 9.45021 14.4278 9.45095 14.3416V12.6391Z" fill="url(#paint0_linear_28916_5960)"/>
+</g>
+</g>
+</g>
+<defs>
+<linearGradient id="paint0_linear_28916_5960" x1="18.4484" y1="18" x2="3.2079" y2="17.6749" gradientUnits="userSpaceOnUse">
+<stop stop-color="#4A68FF"/>
+<stop offset="1" stop-color="#4DBAF8"/>
+</linearGradient>
+<clipPath id="clip0_28916_5960">
+<rect width="22" height="22" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/pages/home/index.scss

@@ -160,7 +160,7 @@
     background-color: #fff;
     box-sizing: border-box;
     border-radius: 16px;
-    margin: 32px 0 60px;
+    margin: 32px 0 32px;
     box-shadow: 0 12px 24px 0 rgba(5, 23, 77, 0.08);
     .index-car-loan-entrance-header {
       width: 100%;

src/pages/home/index.tsx

@@ -97,13 +97,24 @@ const Home = () => {
   };
 
   const carLoanFlowHandler = async () => {
-    const DEFAULT_CHANNEL_CODE = 'hrqbxcx'
+    const DEFAULT_CHANNEL_CODE = "hrqbxcx";
 
-    const url = 'https://m1.h5.hrshuke.cn/carv2/' + (channelCode || DEFAULT_CHANNEL_CODE)
+    const url =
+      "https://m1.h5.hrshuke.cn/carv2/" + (channelCode || DEFAULT_CHANNEL_CODE);
     RouteUtil.toWebViewPage({
-      url
-    })
-  }
+      url,
+    });
+  };
+
+  const houseLoanFlowHandler = async () => {
+    const DEFAULT_CHANNEL_CODE = "hrqbxcx";
+
+    const url =
+      "https://m1.h5.hrshuke.cn/house/" + (channelCode || DEFAULT_CHANNEL_CODE);
+    RouteUtil.toWebViewPage({
+      url,
+    });
+  };
 
   const imgBackStyle = useMemo(() => {
     return {
@@ -286,12 +297,20 @@ const Home = () => {
           <View className="index-car-loan-entrance">
             <View className="index-car-loan-entrance-header">
               <View className="index-car-loan-entrance-title">车抵贷</View>
-              <Image src={require("../../assets/v1.5.0/badge-car.svg")} className="icon-car-badge"  />
+              <Image
+                src={require("../../assets/v1.5.0/badge-car.svg")}
+                className="icon-car-badge"
+              />
             </View>
             <View className="index-car-loan-entrance-body">
               <View className="index-car-loan-entrance-body-p1">
-                <Image className="icon-car-product" src={require('../../assets/v1.5.0/icon-car-product.svg')} />
-                <Text className="index-car-loan-entance-body-p1-product-name">车主贷</Text>
+                <Image
+                  className="icon-car-product"
+                  src={require("../../assets/v1.5.0/icon-car-product.svg")}
+                />
+                <Text className="index-car-loan-entance-body-p1-product-name">
+                  车主贷
+                </Text>
 
                 <View className="product-tag-wrapper">
                   <View className="product-tag">不押车</View>
@@ -301,14 +320,65 @@ const Home = () => {
               </View>
               <View className="index-car-loan-entrance-body-p2">
                 <View className="loan-information-item">
-                  <Text className="money-text">3~100<Text className="unit">万</Text></Text>
+                  <Text className="money-text">
+                    3~100<Text className="unit">万</Text>
+                  </Text>
+                  <Text className="sub">额度范围（元）</Text>
+                </View>
+                <View className="loan-information-item">
+                  <Text className="rate-text">7.20%</Text>
+                  <Text className="sub">参考年化利率</Text>
+                </View>
+                <Image
+                  src={require("../../assets/v1.5.0/car-loan-apply-button.svg")}
+                  className="index-car-loan-apply-button"
+                  onClick={carLoanFlowHandler}
+                />
+              </View>
+            </View>
+          </View>
+        </Padding>
+
+        <Padding padding={EdgeInsets.symmetric({ horizontal: 32 })}>
+          <View className="index-car-loan-entrance">
+            <View className="index-car-loan-entrance-header">
+              <View className="index-car-loan-entrance-title">房抵贷</View>
+              <Image
+                src={require("../../assets/v1.5.0/icon-house-product.svg")}
+                className="icon-car-badge"
+              />
+            </View>
+            <View className="index-car-loan-entrance-body">
+              <View className="index-car-loan-entrance-body-p1">
+                <Image
+                  className="icon-car-product"
+                  src={require("../../assets/v1.5.0/badge-house.svg")}
+                />
+                <Text className="index-car-loan-entance-body-p1-product-name">
+                  房主贷
+                </Text>
+
+                <View className="product-tag-wrapper">
+                  <View className="product-tag">额度高</View>
+                  <View className="product-tag">流程快</View>
+                </View>
+              </View>
+              <View className="index-car-loan-entrance-body-p2">
+                <View className="loan-information-item">
+                  <Text className="money-text">
+                    5~1000<Text className="unit">万</Text>
+                  </Text>
                   <Text className="sub">额度范围（元）</Text>
                 </View>
                 <View className="loan-information-item">
                   <Text className="rate-text">7.20%</Text>
                   <Text className="sub">参考年化利率</Text>
                 </View>
-                <Image src={require('../../assets/v1.5.0/car-loan-apply-button.svg')} className="index-car-loan-apply-button" onClick={carLoanFlowHandler} />
+                <Image
+                  src={require("../../assets/v1.5.0/car-loan-apply-button.svg")}
+                  className="index-car-loan-apply-button"
+                  onClick={houseLoanFlowHandler}
+                />
               </View>
             </View>
           </View>