产品详情适配

src/components/common/ProductCard.vue

@@ -9,31 +9,59 @@
 
 <template>
   <!-- <div> -->
+
+  
   <div class="roolsolt">
-    <div class="rool">
+
+
+    <div class="rool" style="  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); border-radius: 10px; padding-bottom:20px">
       <van-row type="flex">
         <van-col span="24" class="title">最高贷款额度</van-col>
       </van-row>
-      <van-row type="flex" justify="center" class="integral">
-        <van-col span="24" style="font-size: 24px;font-weight: 900; margin-top: 5%;">{{ money }}</van-col>
+
+
+       <van-row type="flex" justify="center" >
+                      <div class="lines" style="z-index: 1; position:absolute;  left:0px; width: 98%;margin:0 1%;margin-top: 1.5%;">
+        <div style="width: 100%; height: 5px; border-bottom: 1px silver solid;"></div>
+        <div style="width: 100%; height: 5px; border-bottom: 1px silver solid;"></div>
+        <div style="width: 100%; height: 5px; border-bottom: 1px silver solid;"></div>
+        <div style="width: 100%; height: 5px; border-bottom: 1px silver solid;"></div>
+        <div style="width: 100%; height: 5px; border-bottom: 1px silver solid;"></div>
+
+        <div style="width: 100%; height: 5px; border-bottom: 1px silver solid;"></div>
+        <div style="width: 100%; height: 5px; border-bottom: 1px silver solid;"></div>
+        <div style="width: 100%; height: 5px; border-bottom: 1px silver solid;"></div>
+        <div style="width: 100%; height: 5px; border-bottom: 1px silver solid;"></div>
+        <div style="width: 100%; height: 5px; border-bottom: 1px silver solid;"></div>
+        
+        <div style="width: 100%; height: 5px; border-bottom: 1px silver solid;"></div>
+        <div style="width: 100%; height: 5px; border-bottom: 1px silver solid;"></div>
+ 
+      </div>
+      </van-row>
+      
+  
+      <van-row type="flex" justify="center" class="integral" >
+        <van-col span="24" style="z-index:2; font-size: 36px;font-weight: 900; margin-top: 5%;">{{ money }}</van-col>
       </van-row>
       <van-row type="flex" justify="center" class="integrall">
         <van-col span="24">{{ moneyName }}</van-col>
       </van-row>
       <van-row type="flex" justify="center" class="button">
         <van-col span="24">
-          <van-button type="info" style="background-color:3672F1" @click="lodiing()">立即申请</van-button>
+          <van-button type="info" style=" width: 50%; margin: 0px 10px; background-color:#3672F1; border-radius: 5px;border:0px;" @click="lodiing()">立即申请</van-button>
+
         </van-col>
       </van-row>
     </div>
-    <div>
+    <div style="">
         <scroller-view v-calculate-height  :height="10000" > 
-      <van-collapse v-model="activeNames" style="    margin-top: 20%;
+      <van-collapse v-model="activeNames" style="
    
     width: 100%;
     height: 100%;
     border-radius: 8px;
-    margin: 20% auto;
+    margin: 15px  auto;
     box-shadow: 0 y-shadow 10px 10px rgba(0, 0, 0, .2);
     ">
         <van-collapse-item title="产品介绍" name="1">农村信用社向符合条件的客户发放的用于满足个人消费、生产经营流动资金等需求的一项贷款业务。</van-collapse-item>
@@ -102,7 +130,7 @@ export default class ProductCard extends Vue {
   margin: 0px auto;
   font-size: 36px;
   color: #FFA121;
-  background-image: url('../../assets/images/tw.png');
+  // background-image: url('../../assets/images/tw.png');
 }
 
 
@@ -112,6 +140,7 @@ export default class ProductCard extends Vue {
   text-align: center;
   color: #FFA121;
   font-size: 14px;
+  margin: 10px auto;
 }
 
 .button {
@@ -121,4 +150,30 @@ export default class ProductCard extends Vue {
   font-size: 14px;
   color: #FFFFFF;
 }
+
+.ax_default {
+    font-family: 'Arial Normal', 'Arial';
+    font-weight: 400;
+    font-style: normal;
+    font-size: 13px;
+    letter-spacing: normal;
+    color: #333333;
+    vertical-align: none;
+    text-align: center;
+    line-height: normal;
+    text-transform: none;
+}
+
+::v-deep .van-cell__title, .van-cell__value {
+    -webkit-box-flex: 1;
+    -webkit-flex: 1;
+    flex: 1;
+    font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';
+    font-weight: 700;
+    font-style: normal;
+    font-size: 16px;
+}
+
+
+
 </style>

src/components/common/ProductDetail.vue

@@ -21,7 +21,7 @@
   </div> -->
   <div class="d-flex flex-column loop" >
       <div class="p-2 " ><van-icon name="arrow-left" /></div>
-      <div class="p-2 " style="width:100%;height:70%;">{{productName}}</div>
+      <div class="productName " style="width:100%;height:70%; ">{{"  "+ productName}}</div>
       
   </div>
 </template>

src/views/main/Main.vue

@@ -8,7 +8,7 @@
 -->
 
 <template>
-  <div class="d-page d-flex flex-column" style="background-color:background: linear-gradient(to bottom, #0B54E0 50px , #ffffff);">
+  <div class="d-page d-flex flex-column" style="background-color: linear-gradient(to bottom, #0B54E0 50px , #ffffff); padding-bottom:20px;">
     <div class="rarle">
       <tools-bar :title="tatleName" style="width: 100%; height: calc(25vh)">
       </tools-bar>