Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
928b71b3 by simon
Options

默认提交

1 parent 66706665
Inline Side-by-side
Showing 10 changed files with 302 additions and 278 deletions
1
2 .cell-group { 1 .cell-group {
3 margin-bottom: 1rem /* 12/12 */; 2 margin-bottom: 1rem;
4 div{ 3
5 font-size: 1rem /* 12/12 */; 4 &:last-child {
6 color: #4c4948; 5 margin-bottom: 0;
6 }
7
8 div {
9 font-size: 1rem;
10 color: #4c4948;
11 }
12
13 .w1 {
14 min-width: 9.166667rem;
15 text-align: center;
16 }
17
18 .w2 {
19 min-width: 6.25rem;
20 text-align: center;
21 }
22
23 .table-header {
24 width: 64.166667rem;
25 height: 2.5rem;
26 border-top-left-radius: .666667rem;
27 border-top-right-radius: .666667rem;
28 background-color: #f2f2f2;
29 display: flex;
30 align-items: center;
31
32 .normal-header {
33 width: 58.833333rem;
34 margin: auto;
35 display: flex;
36 justify-content: space-between;
37 align-items: center;
38
39 .title {
40 font-size: 1rem;
41 font-weight: bold;
42 color: #575453;
43 }
44
45 .guide {
46 transition: all 0.5s;
47 cursor: pointer;
48 width: 1rem;
49 height: .666667rem;
50 background: url("~@/assets/images/insurance-query/triangle-down.png") no-repeat center center;
51 background-size: 100% 100%;
52 }
53
54 .rotate180 {
55 transform: rotate(180deg);
56 transition: all 0.5s;
57 }
7 } 58 }
59 }
60
61 .table-content {
62 width: 64.166667rem;
63 height: auto;
64 display: inline-block;
65 border-bottom-left-radius: .666667rem;
66 border-bottom-right-radius: .666667rem;
67 border-left: solid .083333rem #f2f2f2;
68 border-right: solid .083333rem #f2f2f2;
69 border-bottom: solid .083333rem #f2f2f2;
70 padding: 0 2.583333rem;
71 max-height: 41.666667rem;
72 transition: max-height ease-out 0.3s !important;
73 overflow: hidden;
74
75 .data-line {
76 height: 4.416667rem;
77 margin: auto;
78 display: flex;
79 justify-content: space-between;
80 align-items: center;
81
82 .cell1 {
83 width: 29.166667rem;
84 display: flex;
85 justify-content: space-between;
86 margin: auto;
87 }
8 88
9 .w1 { 89 .separator-v {
10 min-width: 9.166667rem /* 110/12 */; 90 height: 2.5rem;
11 text-align: center; 91 width: .166667rem;
92 background-color: #f2f2f2;
93 margin: 0 .916667rem;
94 }
12 } 95 }
13 96
14 .w2 { 97 .label span {
15 min-width: 6.25rem /* 75/12 */; 98 color: #f05a23;
16 text-align: center; 99 margin-left: .583333rem;
100 cursor: pointer;
101 text-decoration: underline;
17 } 102 }
18 103
19 .table-header { 104 .separator-h {
20 width: 64.166667rem /* 770/12 */; 105 width: 58.833333rem;
21 height: 2.5rem /* 30/12 */; 106 height: .083333rem;
22 border-top-left-radius: .666667rem /* 8/12 */; 107 background-color: #f2f2f2;
23 border-top-right-radius: .666667rem /* 8/12 */;
24 background-color: #f2f2f2;
25 display: flex;
26 align-items: center;
27
28 .normal-header {
29 width: 58.833333rem /* 706/12 */;
30 margin: auto;
31 display: flex;
32 justify-content: space-between;
33 align-items: center;
34
35 .title {
36 font-size: 1rem /* 12/12 */;
37 font-weight: bold;
38 color: #575453;
39 }
40
41 .guide {
42 transition: all 0.5s;
43 cursor: pointer;
44 width: 1rem /* 12/12 */;
45 height: .666667rem /* 8/12 */ ;
46 background: url("~@/assets/images/insurance-query/triangle-down.png") no-repeat center center;
47 background-size: 100% 100%;
48 }
49
50 .rotate180 {
51 transform: rotate(180deg);
52 transition: all 0.5s;
53 }
54 }
55 } 108 }
109 }
56 110
57 .table-content { 111 .orange {
58 width: 64.166667rem /* 770/12 */; 112 background-color: #f05a23 !important;
59 height: auto;
60 display: inline-block;
61 border-bottom-left-radius: .666667rem /* 8/12 */;
62 border-bottom-right-radius: .666667rem /* 8/12 */;
63 border-left: solid .083333rem /* 1/12 */ #f2f2f2;
64 border-right: solid .083333rem /* 1/12 */ #f2f2f2;
65 border-bottom: solid .083333rem /* 1/12 */ #f2f2f2;
66 padding: 0 2.583333rem /* 31/12 */;
67 max-height: 41.666667rem /* 500/12 */;
68 transition: max-height ease-out 0.3s !important;
69 overflow: hidden;
70
71 .data-line {
72 height: 4.416667rem /* 53/12 */;
73 margin: auto;
74 display: flex;
75 justify-content: space-between;
76 align-items: center;
77
78 .cell1 {
79 width: 29.166667rem /* 350/12 */;
80 display: flex;
81 justify-content: space-between;
82 margin: auto;
83 }
84
85 .separator-v {
86 height: 2.5rem /* 30/12 */;
87 width: .166667rem /* 2/12 */;
88 background-color: #f2f2f2;
89 margin: 0 .916667rem /* 11/12 */;
90 }
91 }
92
93 .label span {
94 color: #f05a23;
95 margin-left: .583333rem /* 7/12 */;
96 cursor: pointer;
97 text-decoration: underline;
98 }
99
100 .separator-h {
101 width: 58.833333rem /* 706/12 */;
102 height: .083333rem /* 1/12 */;
103 background-color: #f2f2f2;
104 }
105 }
106 .orange {
107 background-color: #f05a23 !important;
108 div {
109 color: #ffffff;
110 }
111 }
112 113
113 .hide { 114 div {
114 max-height: 0; 115 color: #ffffff;
115 border-bottom:none;
116 } 116 }
117 }
118
119 .hide {
120 max-height: 0;
121 border-bottom: none;
122 }
117 123
118 } 124 }
......
1 @import '@/styles/_support'; 1 @import '@/styles/_support';
2 2
3 input { 3 input {
4 padding: 0 2.083333rem /* 25/12 */; 4 padding: 0 2.083333rem;
5 } 5 }
6 6
7 .content { 7 .content {
8 padding-bottom: 6rem; 8 // padding-bottom: 6rem;
9 } 9 }
10 10
11 .top-space { 11 .top-space {
12 height: 4.25rem; 12 // height: 4.25rem;
13 } 13 }
14 14
15 .reservation-container { 15 .reservation-container {
16 width: 64.25rem /* 771/12 */; 16 width: 64.25rem;
17 border-radius: .666667rem /* 8/12 */; 17 border-radius: .666667rem;
18 border: solid .083333rem /* 1/12 */ #f2f2f2; 18 border: solid .083333rem #f2f2f2;
19 background-color: #ffffff; 19 background-color: #ffffff;
20 padding: 2.166667rem /* 26/12 */ .916667rem /* 11/12 */; 20 padding: 2.166667rem .916667rem 0;
21 } 21 }
22 22
23 .form { 23 .form {
...@@ -27,10 +27,8 @@ input { ...@@ -27,10 +27,8 @@ input {
27 27
28 &-item { 28 &-item {
29 position: relative; 29 position: relative;
30 // padding: 0 1.75rem; 30 padding: 0 1.25rem;
31 padding:0 1.25rem /* 15/12 */; 31 margin-bottom: 2.333333rem;
32 // margin-bottom: 2.5rem;
33 margin-bottom: 2.333333rem /* 28/12 */;
34 32
35 .label { 33 .label {
36 color: #f05a23; 34 color: #f05a23;
...@@ -39,13 +37,12 @@ input { ...@@ -39,13 +37,12 @@ input {
39 margin-bottom: .7rem; 37 margin-bottom: .7rem;
40 38
41 .icon { 39 .icon {
42 width: 2.166667rem /* 26/12 */; 40 width: 2.166667rem;
43 display: flex; 41 display: flex;
44 } 42 }
45 43
46 img { 44 img {
47 height: 1rem; 45 height: 1rem;
48 // margin-right: .8rem;
49 } 46 }
50 } 47 }
51 48
...@@ -61,7 +58,7 @@ input { ...@@ -61,7 +58,7 @@ input {
61 border: solid 1px #dcdddd; 58 border: solid 1px #dcdddd;
62 background-color: #ffffff; 59 background-color: #ffffff;
63 border-radius: 3.5rem; 60 border-radius: 3.5rem;
64 padding: 0 2.083333rem /* 25/12 */; 61 padding: 0 2.083333rem;
65 } 62 }
66 63
67 // 长文本 64 // 长文本
...@@ -76,6 +73,11 @@ input { ...@@ -76,6 +73,11 @@ input {
76 position: absolute; 73 position: absolute;
77 top: 1.6rem; 74 top: 1.6rem;
78 right: 2rem; 75 right: 2rem;
76 background-image: url('~@/assets/images/reservation/re-down-arrow.png');
77 width: 1rem;
78 height: .666667rem;
79 pointer-events: none;
80 cursor: default;
79 } 81 }
80 } 82 }
81 83
...@@ -84,11 +86,10 @@ input { ...@@ -84,11 +86,10 @@ input {
84 // 不换行 86 // 不换行
85 &-item2 { 87 &-item2 {
86 display: flex; 88 display: flex;
87 margin-bottom: 2.25rem /* 27/12 */; 89 margin-bottom: 2.25rem;
88 90
89 .label { 91 .label {
90 // min-width: 13.75rem; 92 min-width: 12.833333rem;
91 min-width: 12.833333rem /* 154/12 */;
92 height: 2.5rem; 93 height: 2.5rem;
93 } 94 }
94 95
...@@ -125,16 +126,15 @@ input { ...@@ -125,16 +126,15 @@ input {
125 flex-wrap: wrap; 126 flex-wrap: wrap;
126 127
127 .label { 128 .label {
128 // min-width: 13.75rem; 129 min-width: 8.833333rem;
129 min-width: 8.833333rem /* 106/12 */;
130 } 130 }
131 131
132 .ipt-wrap { 132 .ipt-wrap {
133 width: 50%; 133 width: 50%;
134 134
135 input { 135 input {
136 font-size: 1.166667rem /* 14/12 */; 136 font-size: 1.166667rem;
137 letter-spacing: .116667rem /* 1.4/12 */; 137 letter-spacing: .116667rem;
138 color: #4c4948; 138 color: #4c4948;
139 font-family: Arial; 139 font-family: Arial;
140 } 140 }
...@@ -148,8 +148,9 @@ input { ...@@ -148,8 +148,9 @@ input {
148 } 148 }
149 } 149 }
150 } 150 }
151
151 .mt8 { 152 .mt8 {
152 margin-top: .666667rem /* 8/12 */; 153 margin-top: .666667rem;
153 } 154 }
154 } 155 }
155 156
...@@ -166,7 +167,6 @@ input { ...@@ -166,7 +167,6 @@ input {
166 margin-bottom: 1rem; 167 margin-bottom: 1rem;
167 168
168 &-icon { 169 &-icon {
169 // display: inline-block;
170 position: absolute; 170 position: absolute;
171 top: .5rem; 171 top: .5rem;
172 } 172 }
...@@ -174,17 +174,17 @@ input { ...@@ -174,17 +174,17 @@ input {
174 } 174 }
175 175
176 .submit-btn { 176 .submit-btn {
177 width: 13.583333rem /* 163/12 */; 177 width: 13.583333rem;
178 height: 4.083333rem /* 49/12 */; 178 height: 4.083333rem;
179 margin: 2.5rem /* 30/12 */ auto; 179 margin: 2.5rem auto;
180 line-height: 4.083333rem /* 49/12 */; 180 line-height: 4.083333rem;
181 box-shadow: 0px 10px 13px 0 rgba(236, 100, 41, 0.2); 181 box-shadow: 0px 10px 13px 0 rgba(236, 100, 41, 0.2);
182 background-blend-mode: soft-light, ; 182 background-blend-mode: soft-light, ;
183 background-image: linear-gradient(to top, #000000, #ffffff), linear-gradient(to bottom, #ec6429, #ec6429); 183 background-image: linear-gradient(to top, #000000, #ffffff), linear-gradient(to bottom, #ec6429, #ec6429);
184 text-align: center; 184 text-align: center;
185 font-size: 1.291667rem /* 15.5/12 */; 185 font-size: 1.291667rem;
186 letter-spacing: .129167rem /* 1.55/12 */; 186 letter-spacing: .129167rem;
187 color: #ffffff; 187 color: #ffffff;
188 border-radius: 3.5rem; 188 border-radius: 3.5rem;
189 cursor: pointer; 189 cursor: pointer;
190 }
...\ No newline at end of file ...\ No newline at end of file
190 }
......
1 1
2 <template> 2 <template>
3 <div class="reservation-container"> 3 <div class="reservation-container">
4 <div class=""> 4 <div class="temp">
5 <div class="gird-g form"> 5 <div class="gird-g form">
6 6
7 <div class="pure-u-1 pure-u-md-1-2 form-item"> 7 <div class="pure-u-1 pure-u-md-1-2 form-item">
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
18 <div class="icon"><img src="@/assets/images/reservation/icon-re-contact.png"></div>{{$t('reservation.contactType')}} 18 <div class="icon"><img src="@/assets/images/reservation/icon-re-contact.png"></div>{{$t('reservation.contactType')}}
19 </div> 19 </div>
20 <div class="ipt-wrap"> 20 <div class="ipt-wrap">
21 <img class="down-arrow" src="@/assets/images/reservation/re-down-arrow.png" alt=""> 21 <div class="down-arrow"></div>
22 <select class="ipt"> 22 <select class="ipt">
23 <option v-if="locale !='zh'">電話</option> 23 <option v-if="locale !='zh'">電話</option>
24 <option v-else>电话</option> 24 <option v-else>电话</option>
...@@ -40,7 +40,7 @@ ...@@ -40,7 +40,7 @@
40 <div class="icon"><img src="@/assets/images/reservation/icon-re-clock.png"></div>{{$t('reservation.reservationType')}} 40 <div class="icon"><img src="@/assets/images/reservation/icon-re-clock.png"></div>{{$t('reservation.reservationType')}}
41 </div> 41 </div>
42 <div class="ipt-wrap"> 42 <div class="ipt-wrap">
43 <img class="down-arrow" src="@/assets/images/reservation/re-down-arrow.png" alt=""> 43 <div class="down-arrow"></div>
44 <select class="ipt"> 44 <select class="ipt">
45 <template v-if="locale =='zh'"> 45 <template v-if="locale =='zh'">
46 <option>投保咨询</option> 46 <option>投保咨询</option>
...@@ -112,6 +112,6 @@ ...@@ -112,6 +112,6 @@
112 </template> 112 </template>
113 113
114 <script src="./reservation.js"></script> 114 <script src="./reservation.js"></script>
115 <style lang="scss" > 115 <style lang="scss" scoped>
116 @import "./reservation.scss"; 116 @import "./reservation.scss";
117 </style> 117 </style>
......
1
2
3 .content { 1 .content {
4 display: flex; 2 display: flex;
3 // margin-top: 2.333333rem;
4 margin: 2.333333rem 0;
5 } 5 }
6 6
7 .left-panel { 7 .left-panel {
8 width: 12.833333rem ; 8 width: 12.833333rem;
9 height: 42.333333rem ; 9 height: 42.333333rem;
10 margin-left: 3.166667rem; 10 margin-left: 3.166667rem;
11 11
12 .separator { 12 .separator {
13 margin:auto; 13 margin: auto;
14 width: 10.5rem ; 14 width: 10.5rem;
15 height: .083333rem; 15 height: .083333rem;
16 background-color: #dcdddd; 16 background-color: #dcdddd;
17 } 17 }
18 .menu-item { 18
19 height: 5.916667rem; 19 .menu-item {
20 line-height: 5.916667rem; 20 height: 5.916667rem;
21 font-size: 1.5rem ; 21 line-height: 5.916667rem;
22 font-weight: bold; 22 font-size: 1.5rem;
23 color: #4c4948; 23 font-weight: bold;
24 text-align: center; 24 color: #4c4948;
25 cursor: pointer; 25 text-align: center;
26 display: flex; 26 cursor: pointer;
27 align-items: center; 27 display: flex;
28 justify-content: center; 28 align-items: center;
29 29 justify-content: center;
30 i {
31 display: inline-block;
32 width: 3.416667rem /* 41/12 */;
33 height: 3.416667rem /* 41/12 */;
34 // margin-right: 1.333333rem;
35 margin-right: .166667rem /* 2/12 */;
36 vertical-align: middle;
37 }
38 .m1 {
39 background: url("~@/assets/images/insurance-query/m1-unselect.png") no-repeat center center;
40 background-size: 100% 100%;
41 }
42 .m2 {
43 background: url("~@/assets/images/insurance-query/m2-unselect.png") no-repeat center center;
44 background-size: 100% 100%;
45 }
46 .m3 {
47 background: url("~@/assets/images/insurance-query/m3-unselect.png") no-repeat center center;
48 background-size: 100% 100%;
49 }
50 .m4 {
51 background: url("~@/assets/images/insurance-query/m4-unselect.png") no-repeat center center;
52 background-size: 100% 100%;
53 }
54 .m5 {
55 background: url("~@/assets/images/insurance-query/m5-unselect.png") no-repeat center center;
56 background-size: 100% 100%;
57 }
58 .m6 {
59 background: url("~@/assets/images/insurance-query/m6-unselect.png") no-repeat center center;
60 background-size: 100% 100%;
61 }
62 .m7 {
63 background: url("~@/assets/images/insurance-query/m7-unselect.png") no-repeat center center;
64 background-size: 100% 100%;
65 }
66 .m8 {
67 background: url("~@/assets/images/insurance-query/m8-unselect.png") no-repeat center center;
68 background-size: 100% 100%;
69 }
70 }
71 .menu-item.activity {
72 color: #f05a23 !important;
73
74 .m1 {
75 background: url("~@/assets/images/insurance-query/m1.png") no-repeat center center;
76 background-size: 100% 100%;
77 }
78 .m2 {
79 background: url("~@/assets/images/insurance-query/m2.png") no-repeat center center;
80 background-size: 100% 100%;
81 }
82 .m3 {
83 background: url("~@/assets/images/insurance-query/m3.png") no-repeat center center;
84 background-size: 100% 100%;
85 }
86 .m4 {
87 background: url("~@/assets/images/insurance-query/m4.png") no-repeat center center;
88 background-size: 100% 100%;
89 }
90 .m5 {
91 background: url("~@/assets/images/insurance-query/m5.png") no-repeat center center;
92 background-size: 100% 100%;
93 }
94 .m6 {
95 background: url("~@/assets/images/insurance-query/m6.png") no-repeat center center;
96 background-size: 100% 100%;
97 }
98 .m7 {
99 background: url("~@/assets/images/insurance-query/m7.png") no-repeat center center;
100 background-size: 100% 100%;
101 }
102 .m8 {
103 background: url("~@/assets/images/insurance-query/m8.png") no-repeat center center;
104 background-size: 100% 100%;
105 }
106 30
31 i {
32 display: inline-block;
33 width: 3.416667rem;
34 height: 3.416667rem;
35 margin-right: .166667rem;
36 vertical-align: middle;
107 } 37 }
108 }
109 38
110 .min-panel { 39 .m1 {
111 margin-left: .666667rem; 40 background: url("~@/assets/images/insurance-query/m1-unselect.png") no-repeat center center;
112 width: 1.166667rem; 41 background-size: 100% 100%;
42 }
113 43
114 .item { 44 .m2 {
115 width: 1.166667rem ; 45 background: url("~@/assets/images/insurance-query/m2-unselect.png") no-repeat center center;
116 height: 6rem; 46 background-size: 100% 100%;
117 display: flex;
118 justify-content: flex-start;
119 align-items: center;
120 } 47 }
121 48
122 .activity .triangle { 49 .m3 {
123 width: .583333rem; 50 background: url("~@/assets/images/insurance-query/m3-unselect.png") no-repeat center center;
124 height: 1.166667rem ; 51 background-size: 100% 100%;
125 background: url("~@/assets/images/insurance-query/triangle.png") no-repeat center center;
126 background-size: 100% 100%;
127 } 52 }
128 }
129 53
130 .right-panel { 54 .m4 {
131 margin-left: 1.166667rem; 55 background: url("~@/assets/images/insurance-query/m4-unselect.png") no-repeat center center;
132 width: 64.166667rem ; 56 background-size: 100% 100%;
133 background-color: #ffffff; 57 }
58
59 .m5 {
60 background: url("~@/assets/images/insurance-query/m5-unselect.png") no-repeat center center;
61 background-size: 100% 100%;
62 }
63
64 .m6 {
65 background: url("~@/assets/images/insurance-query/m6-unselect.png") no-repeat center center;
66 background-size: 100% 100%;
67 }
68
69 .m7 {
70 background: url("~@/assets/images/insurance-query/m7-unselect.png") no-repeat center center;
71 background-size: 100% 100%;
72 }
73
74 .m8 {
75 background: url("~@/assets/images/insurance-query/m8-unselect.png") no-repeat center center;
76 background-size: 100% 100%;
77 }
78 }
79
80 .menu-item.activity {
81 color: #f05a23 !important;
82
83 .m1 {
84 background: url("~@/assets/images/insurance-query/m1.png") no-repeat center center;
85 background-size: 100% 100%;
86 }
134 87
135 .panel { 88 .m2 {
136 display: none; 89 background: url("~@/assets/images/insurance-query/m2.png") no-repeat center center;
90 background-size: 100% 100%;
137 } 91 }
138 92
139 .activity { 93 .m3 {
140 display: block !important; 94 background: url("~@/assets/images/insurance-query/m3.png") no-repeat center center;
95 background-size: 100% 100%;
141 } 96 }
97
98 .m4 {
99 background: url("~@/assets/images/insurance-query/m4.png") no-repeat center center;
100 background-size: 100% 100%;
101 }
102
103 .m5 {
104 background: url("~@/assets/images/insurance-query/m5.png") no-repeat center center;
105 background-size: 100% 100%;
106 }
107
108 .m6 {
109 background: url("~@/assets/images/insurance-query/m6.png") no-repeat center center;
110 background-size: 100% 100%;
111 }
112
113 .m7 {
114 background: url("~@/assets/images/insurance-query/m7.png") no-repeat center center;
115 background-size: 100% 100%;
116 }
117
118 .m8 {
119 background: url("~@/assets/images/insurance-query/m8.png") no-repeat center center;
120 background-size: 100% 100%;
121 }
122
123 }
124 }
125
126 .min-panel {
127 margin-left: .666667rem;
128 width: 1.166667rem;
129
130 .item {
131 width: 1.166667rem;
132 height: 6rem;
133 display: flex;
134 justify-content: flex-start;
135 align-items: center;
136 }
137
138 .activity .triangle {
139 width: .583333rem;
140 height: 1.166667rem;
141 background: url("~@/assets/images/insurance-query/triangle.png") no-repeat center center;
142 background-size: 100% 100%;
143 }
144 }
145
146 .right-panel {
147 margin-left: 1.166667rem;
148 width: 64.166667rem;
149 background-color: #ffffff;
150
151 .panel {
152 display: none;
153 }
154
155 .activity {
156 display: block !important;
157 }
142 } 158 }
143 159
144 .empty-line { 160 .empty-line {
145 height: 1.333333rem /* 16/12 */; 161 height: 1.333333rem;
146 } 162 }
......
...@@ -64,15 +64,18 @@ ...@@ -64,15 +64,18 @@
64 <div class="panel" :class="{activity : activity == 'm1'}"></div> 64 <div class="panel" :class="{activity : activity == 'm1'}"></div>
65 <div class="panel" :class="{activity : activity == 'm2'}"> 65 <div class="panel" :class="{activity : activity == 'm2'}">
66 <payment-type></payment-type> 66 <payment-type></payment-type>
67 <div class="empty-line"></div></div> 67 <!-- <div class="empty-line"></div> -->
68 </div>
68 <div class="panel" :class="{activity : activity == 'm3'}"> 69 <div class="panel" :class="{activity : activity == 'm3'}">
69 <insurance-query></insurance-query> 70 <insurance-query></insurance-query>
70 <div class="empty-line"></div></div> 71 <!-- <div class="empty-line"></div> -->
72 </div>
71 <div class="panel" :class="{activity : activity == 'm4'}"></div> 73 <div class="panel" :class="{activity : activity == 'm4'}"></div>
72 <div class="panel" :class="{activity : activity == 'm5'}"></div> 74 <div class="panel" :class="{activity : activity == 'm5'}"></div>
73 <div class="panel" :class="{activity : activity == 'm6'}"> 75 <div class="panel" :class="{activity : activity == 'm6'}">
74 <reservation></reservation> 76 <reservation></reservation>
75 <div class="empty-line"></div></div> 77 <!-- <div class="empty-line"></div> -->
78 </div>
76 <div class="panel" :class="{activity : activity == 'm7'}"></div> 79 <div class="panel" :class="{activity : activity == 'm7'}"></div>
77 <div class="panel" :class="{activity : activity == 'm8'}"></div> 80 <div class="panel" :class="{activity : activity == 'm8'}"></div>
78 </div> 81 </div>
......
...@@ -49,9 +49,9 @@ ...@@ -49,9 +49,9 @@
49 // width: auto; 49 // width: auto;
50 text-align: center; 50 text-align: center;
51 justify-content: space-between; 51 justify-content: space-between;
52 max-width: 79.166667rem /* 950/12 */; 52 max-width: 79.166667rem;
53 // max-width: 1200px; 53 // max-width: 1200px;
54 54
55 55
56 56
57 &-item { 57 &-item {
......
...@@ -78,7 +78,7 @@ ...@@ -78,7 +78,7 @@
78 margin: 2.5rem auto 0; 78 margin: 2.5rem auto 0;
79 display: flex; 79 display: flex;
80 align-items: center; 80 align-items: center;
81 padding-left: 1rem /* 12/12 */; 81 padding-left: 1rem;
82 82
83 .check { 83 .check {
84 height: 1rem; 84 height: 1rem;
...@@ -118,7 +118,7 @@ ...@@ -118,7 +118,7 @@
118 &-item { 118 &-item {
119 position: relative; 119 position: relative;
120 // margin-top: 2.75rem; 120 // margin-top: 2.75rem;
121 margin-top: 2.5rem /* 30/12 */; 121 margin-top: 2.5rem;
122 122
123 .label { 123 .label {
124 font-family: MicrosoftYaHei; 124 font-family: MicrosoftYaHei;
......
...@@ -85,7 +85,7 @@ ...@@ -85,7 +85,7 @@
85 margin: 2.5rem auto 0; 85 margin: 2.5rem auto 0;
86 display: flex; 86 display: flex;
87 align-items: center; 87 align-items: center;
88 padding-left: 1rem /* 12/12 */; 88 padding-left: 1rem;
89 89
90 .check { 90 .check {
91 height: 1rem; 91 height: 1rem;
...@@ -99,8 +99,7 @@ ...@@ -99,8 +99,7 @@
99 99
100 &-submit { 100 &-submit {
101 @include btc2(13.5rem, 4rem, 16px); 101 @include btc2(13.5rem, 4rem, 16px);
102 margin: 4.166667rem /* 50/12 */auto 0 ; 102 margin: 4.166667rem auto 0 ;
103 // margin: 8.25rem auto 0;
104 letter-spacing: 1.6px; 103 letter-spacing: 1.6px;
105 } 104 }
106 105
......
1 @import '@/styles/_support'; 1 @import '@/styles/_support';
2 2
3 input { 3 input {
4 padding: 0 2.083333rem /* 25/12 */; 4 padding: 0 2.083333rem;
5 } 5 }
6 6
7 .content { 7 .content {
...@@ -48,7 +48,7 @@ input { ...@@ -48,7 +48,7 @@ input {
48 border: solid 1px #dcdddd; 48 border: solid 1px #dcdddd;
49 background-color: #ffffff; 49 background-color: #ffffff;
50 border-radius: 3.5rem; 50 border-radius: 3.5rem;
51 padding: 0 2.083333rem /* 25/12 */; 51 padding: 0 2.083333rem;
52 } 52 }
53 53
54 // 长文本 54 // 长文本
......
...@@ -100,6 +100,6 @@ ...@@ -100,6 +100,6 @@
100 </template> 100 </template>
101 101
102 <script src="./reservation.js"></script> 102 <script src="./reservation.js"></script>
103 <style lang="scss" > 103 <style lang="scss" scoped>
104 @import "./reservation.scss"; 104 @import "./reservation.scss";
105 </style> 105 </style>
......