src/components/cardSecretBuy.vue

@@ -16,6 +16,14 @@
               <div class="type-price">{{ item.price }}元</div>
             </div>
           </div>
+          <div class="card-intro" v-if="cards_intro_list">
+            <div class="intro-title">
+              <div class="intro-prompt">卡密说明</div>
+            </div>
+            <div class="intro-content" v-for="(item, key) in cards_intro_list">
+              <div class="intro-line">{{ item }}</div>
+            </div>
+          </div>
         </div>
         <div class="card-search" v-if="tab==1">
           <div class="card-title">
@@ -58,6 +66,7 @@ export default {
 
       tab: 0,
       card_type_list: [],
+      cards_intro_list:"",
 
       inputValue: '',
       orderid: "",
@@ -73,7 +82,8 @@ export default {
     getCardSecretTypes: function () {
       this.$http.post(this.agent_url + "/h5_get_card_secret_types", {}).then(response => {
           if (response.data.status) {
-            this.card_type_list = response.data.data;
+            this.card_type_list = response.data.data.cardtypes;
+            this.cards_intro_list = response.data.data.cards_intro_list;
           } else {
             this.promptshow(response.data.info);
           }
@@ -210,7 +220,7 @@ export default {
 }
 
 .card-content {
-  padding: 20px 20px;
+  padding: 20px 20px 90px;
 }
 
 .card-title {
@@ -229,7 +239,7 @@ export default {
 .card-types {
   background: #fff;
   padding: 0 20px;
-  margin-top: 30px;
+  margin-top: 20px;
   border: 1px solid #F8F8F8;
   border-radius: 10px;
   box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
@@ -262,6 +272,34 @@ export default {
   background-size: 10%;
 }
 
+.card-intro{
+  font-size: 16px;
+}
+
+.intro-title{
+  margin-top: 5px;
+  line-height: 50px;
+  color: #747B8B;
+}
+
+.intro-prompt{
+  width: 50%;
+  padding-left: 20px;
+  background-image: url(../assets/images/card_secret_buy/buy_prompt.png);
+  background-repeat: no-repeat;
+  background-position: 0 50%;
+  background-size: 8%;
+}
+
+.intro-content{
+  line-height: 24px;
+}
+
+.intro-line{
+  margin-bottom: 5px;
+  color: #747B8B;
+}
+
 .card-order {
   width: 50%;
   display: inline-block;