卡的类型图片

src/pages/subPages/mobileCard.vue

@@ -4,9 +4,18 @@
       <!-- 表单 -->
       <el-form ref="form" :model="formData" label-width="150px">
         <el-form-item label="支持电话卡的类型">
-          <img src="../../assets/move@2x.png" alt="" style="width: 80px;margin-right: 10px;margin-top:10px">
-          <img src="../../assets/Unicom@2x.png" alt="" style="width: 80px;;margin-right: 10px;margin-top:10px">
-          <img src="../../assets/telecom@2x.png" alt="" style="width: 80px;margin-top:10px">
+          <div style="display:inline-block" class="cardType">
+            <img src="../../assets/move.png" alt="">
+            <span>中国移动</span>
+          </div>
+          <div style="display:inline-block" class="cardType">
+            <img src="../../assets/Unicom.png" alt="">
+            <span>中国联通</span>
+          </div>
+          <div style="display:inline-block" class="cardType">
+            <img src="../../assets/telecom.png" alt="">
+            <span>中国电信</span>
+          </div>
         </el-form-item>
         <el-form-item label="充值金额">
           <el-button
@@ -212,6 +221,15 @@ export default {
 }
 </script>
 
-<style>
-
-</style>
+<style scoped>
+.cardType {
+  margin-right: 20px;
+}
+.cardType img {
+  vertical-align: middle;
+  margin-right: 10px;
+}
+.cardType  span {
+  vertical-align: middle;
+}
+</style>>

src/pages/subPages/oilCard.vue

@@ -4,8 +4,14 @@
       <!-- 表单 -->
       <el-form ref="form" :model="formData" label-width="150px">
         <el-form-item label="支持油卡的类型">
-          <img src="../../assets/petroleum@2x.png" alt="" style="width: 80px;margin-right: 10px;margin-top:10px">
-          <img src="../../assets/petrifaction@2x.png" alt="" style="width: 80px;margin-top:10px">
+          <div style="display:inline-block" class="cardType">
+            <img src="../../assets/petroleum.png" alt="">
+            <span>中国石油</span>
+          </div>
+          <div style="display:inline-block" class="cardType">
+            <img src="../../assets/petrifaction.png" alt="">
+            <span>中国石化</span>
+          </div>
         </el-form-item>
         <el-form-item label="充值金额">
           <el-button
@@ -227,6 +233,15 @@ export default {
 }
 </script>
 
-<style>
-
-</style>
+<style scoped>
+.cardType {
+  margin-right: 20px;
+}
+.cardType img {
+  vertical-align: middle;
+  margin-right: 10px;
+}
+.cardType  span {
+  vertical-align: middle;
+}
+</style>>