修改缴付保费页面

+import api from '@/api/api'
+import {
+	httpGet,
+	httpPost
+} from '@/api/fetch-api.js'
+
+export default {
+	data() {
+		return {
+			key: 'value'
+		}
+	},
+	components: {},
+	methods: {
+		initData() {}
+	},
+	mounted() {},
+	created() {}
+}

+@import '@/styles/_support';
+
+.content {}
+
+.border {
+  width: 770px;
+  height: 387px;
+  border-radius: 8px;
+  border: solid 1px #f2f2f2;
+  background-color: #ffffff;
+}

+
+<template>
+	<div class="border">
+		contact-us
+	</div>
+</template>
+
+<script src="./contact-us.js"></script>
+<style lang="scss" scoped>
+@import "./contact-us.scss";
+</style>

 @import '@/styles/_support';
 
-.content {
-}
+.content {}
 
 .top-space {
   height: 2.25rem;
 }
 
-.box {
-  border: solid 1px #f2f2f2;
-  background-color: #ffffff;
-  @extend .bb;
-  padding: 4.5rem 1.75rem 3.5rem;
-  border-bottom: none;
-  @include border-top-radius(.75rem);
-}
-
 .payment {
-  min-height: 26rem;
+
   &-nav {
     display: flex;
-		justify-content: space-between;
-		flex-wrap: wrap;
+    justify-content: space-between;
+    flex-wrap: wrap;
 
     &-item {
       @extend .pointer;
@@ -31,14 +21,13 @@
       align-items: center;
       height: 3.75rem;
       background-color: #f2f2f2;
-      width: 12rem;
+      padding: 0 1.25rem;
 
       &-icon {
-        margin-right: .5rem;
+        margin-right: .4rem;
 
         img {
-          max-height: 1.75rem;
-          max-width: 1.5rem;
+          max-width: 2rem;
         }
       }
     }
@@ -51,18 +40,21 @@
 
   &-line {
     height: 1px;
-    background-color: #f05a23;
+    background-color: $cOrange;
   }
 
-
   &-cont {
-    margin-top: 3.5rem;
-    max-width: 67.5rem;
+    @extend .bb;
+    padding: 3.5rem 6.166667rem 0 2rem;
+    border: solid 1px #f2f2f2;
+    background-color: #ffffff;
+    min-height: 43.75rem;
+    @include border-bottom-radius(.666667rem);
+
 
     &-item {
-      @extend .bb;
+      color: #4c4948;
       line-height: 3;
-      padding: 0 1rem;
 
       ul {
         list-style-type: none;

@@ -186,4 +186,10 @@ input {
   color: #ffffff;
   border-radius: 3.5rem;
   cursor: pointer;
+  border: none;
+  color: #ffffff;
+  background-color: #f05a23;
+  box-shadow: 0px 10px 13px 0 rgba(236, 100, 41, 0.2);
+  background-blend-mode: soft-light, ;
+  background-image: linear-gradient(to top, #000000, #ffffff), linear-gradient(to bottom, #ec6429, #ec6429);
 }

@@ -28,7 +28,7 @@
 
 				<div class="pure-u-1 pure-u-md-1-2 form-item">
 					<div class="label">
-						<div class="icon"><img src="@/assets/images/reservation/icon-re-name.png"></div>{{$t('reservation.contact')}}
+						<div class="icon"><img src="@/assets/images/reservation/icon-re-phone.png"></div>{{$t('reservation.contact')}}
 					</div>
 					<div class="ipt-wrap">
 						<input :placeholder="$t('reservation.contactPlaceholder')" class="ipt" type="text">

@@ -4,6 +4,7 @@ import {
 	httpPost
 } from '@/api/fetch-api.js'
 
+import ContactUs from './components/contact-us.vue'
 import InsuranceQuery from './components/insurance-query.vue'
 import reservation from './components/reservation.vue'
 import PaymentType from './components/payment-type.vue'
@@ -15,13 +16,13 @@ export default {
 		}
 	},
 	methods: {
-		initData() { },
+		initData() {},
 		toPath(path) {
 			this.$router.push({
 				path: path
 			});
 		},
-		changeActivity(a){
+		changeActivity(a) {
 			this.activity = a;
 			this.$route.query.q = a;
 			console.log(this.$route.query);
@@ -43,6 +44,7 @@ export default {
 		this.activity = activity;
 	},
 	components: {
+		ContactUs,
 		InsuranceQuery,
 		reservation,
 		PaymentType

@@ -145,7 +145,8 @@
 
 .right-panel {
   margin-left: 1.166667rem;
-  width: 64.166667rem;
+  // width: 64.166667rem;
+  width: 64.416667rem;
   background-color: #ffffff;
 
   .panel {

@@ -6,7 +6,7 @@
 				<i class="m1"></i>{{$t('customService.menu1')}}
 			</div>
 			<div class="separator"></div>
-			<div class="menu-item" :class="{activity : activity == 'm2'}" @click="toPath('/payment/type');/*activity = 'm2'*/">
+			<div class="menu-item" :class="{activity : activity == 'm2'}" @click="changeActivity('m2')">
 				<i class="m2"></i>{{$t('customService.menu2')}}
 			</div>
 			<div class="separator"></div>
@@ -61,20 +61,19 @@
 			</div>
 		</div>
 		<div class="right-panel">
-			<div class="panel" :class="{activity : activity == 'm1'}"></div>
+			<div class="panel" :class="{activity : activity == 'm1'}">
+				<contact-us></contact-us>
+			</div>
 			<div class="panel" :class="{activity : activity == 'm2'}">
 				<payment-type></payment-type>
-				<!-- <div class="empty-line"></div> -->
 			</div>
 			<div class="panel" :class="{activity : activity == 'm3'}">
 				<insurance-query></insurance-query>
-				<!-- <div class="empty-line"></div> -->
 			</div>
 			<div class="panel" :class="{activity : activity == 'm4'}"></div>
 			<div class="panel" :class="{activity : activity == 'm5'}"></div>
 			<div class="panel" :class="{activity : activity == 'm6'}">
 				<reservation></reservation>
-				<!-- <div class="empty-line"></div> -->
 			</div>
 			<div class="panel" :class="{activity : activity == 'm7'}"></div>
 			<div class="panel" :class="{activity : activity == 'm8'}"></div>