默认提交
Showing
20 changed files
with
227 additions
and
117 deletions
... | @@ -3,7 +3,9 @@ import { | ... | @@ -3,7 +3,9 @@ import { |
3 | } from 'vuex' | 3 | } from 'vuex' |
4 | 4 | ||
5 | import api from '@/api/api' | 5 | import api from '@/api/api' |
6 | import { httpPost } from '@/api/fetch-api.js' | 6 | import { |
7 | httpPost | ||
8 | } from '@/api/fetch-api.js' | ||
7 | 9 | ||
8 | export default { | 10 | export default { |
9 | name: "DropDownList", | 11 | name: "DropDownList", |
... | @@ -16,25 +18,25 @@ export default { | ... | @@ -16,25 +18,25 @@ export default { |
16 | props: { | 18 | props: { |
17 | type: { | 19 | type: { |
18 | type: String, | 20 | type: String, |
19 | default() { | 21 | default () { |
20 | return "nav"; | 22 | return "nav"; |
21 | } | 23 | } |
22 | }, | 24 | }, |
23 | dataObj: { | 25 | dataObj: { |
24 | type: Object, | 26 | type: Object, |
25 | default() { | 27 | default () { |
26 | return {}; | 28 | return {}; |
27 | } | 29 | } |
28 | }, | 30 | }, |
29 | dataList: { | 31 | dataList: { |
30 | type: Array, | 32 | type: Array, |
31 | default() { | 33 | default () { |
32 | return []; | 34 | return []; |
33 | } | 35 | } |
34 | }, | 36 | }, |
35 | labelProperty: { | 37 | labelProperty: { |
36 | type: String, | 38 | type: String, |
37 | default() { | 39 | default () { |
38 | return "name"; | 40 | return "name"; |
39 | } | 41 | } |
40 | } | 42 | } |
... | @@ -94,14 +96,11 @@ export default { | ... | @@ -94,14 +96,11 @@ export default { |
94 | }) | 96 | }) |
95 | } | 97 | } |
96 | } | 98 | } |
97 | // console.log("name:", this.dataList[index].name); | ||
98 | // this.$emit("change", { | ||
99 | // index: index, | ||
100 | // value: this.dataList[index] | ||
101 | // }); | ||
102 | }, | 99 | }, |
103 | loginHandler() { | 100 | loginHandler() { |
104 | httpPost({ url: api.logout }).then(() => { | 101 | httpPost({ |
102 | url: api.logout | ||
103 | }).then(() => { | ||
105 | this.$store.commit("SET_USER_INFO", null); | 104 | this.$store.commit("SET_USER_INFO", null); |
106 | this.showLogoutTip(); | 105 | this.showLogoutTip(); |
107 | }); | 106 | }); |
... | @@ -116,6 +115,5 @@ export default { | ... | @@ -116,6 +115,5 @@ export default { |
116 | return this.dataList[this.activeIndex][this.labelProperty]; | 115 | return this.dataList[this.activeIndex][this.labelProperty]; |
117 | } | 116 | } |
118 | }, | 117 | }, |
119 | created() { | 118 | created() {}, |
120 | }, | ||
121 | }; | 119 | }; | ... | ... |
... | @@ -22,6 +22,7 @@ export default { | ... | @@ -22,6 +22,7 @@ export default { |
22 | data() { | 22 | data() { |
23 | return { | 23 | return { |
24 | dropdownMVisible: false, | 24 | dropdownMVisible: false, |
25 | loginMVisible: false, | ||
25 | maxClientWidth: 1200, | 26 | maxClientWidth: 1200, |
26 | navList: [], | 27 | navList: [], |
27 | loginData: {}, | 28 | loginData: {}, |
... | @@ -59,29 +60,16 @@ export default { | ... | @@ -59,29 +60,16 @@ export default { |
59 | path: "/" | 60 | path: "/" |
60 | }) | 61 | }) |
61 | }, | 62 | }, |
62 | onShowDropdown(boo = true) { | 63 | onShowDropdown(evtStr) { |
63 | this.dropdownMVisible = boo; | 64 | console.log("evtStr:", evtStr); |
64 | // if (this.dropdownMVisible) { | 65 | this.dropdownMVisible = false; |
65 | // this.stop(); | 66 | this.loginMVisible = false; |
66 | // } else { | 67 | if (evtStr == 'nav') { |
67 | // this.move(); | 68 | this.dropdownMVisible = true; |
68 | // } | 69 | } else if (evtStr == 'login') { |
70 | this.loginMVisible = true; | ||
71 | } else {} | ||
69 | }, | 72 | }, |
70 | // stop() { | ||
71 | // var mo = function (e) { | ||
72 | // e.preventDefault(); | ||
73 | // }; | ||
74 | // document.body.style.overflow = 'hidden'; | ||
75 | // document.addEventListener("touchmove", mo, false); //禁止页面滑动 | ||
76 | // }, | ||
77 | // /***取消滑动限制***/ | ||
78 | // move() { | ||
79 | // var mo = function (e) { | ||
80 | // e.preventDefault(); | ||
81 | // }; | ||
82 | // document.body.style.overflow = ''; //出现滚动条 | ||
83 | // document.removeEventListener("touchmove", mo, false); | ||
84 | // }, | ||
85 | checkIsSmallScreen() { | 73 | checkIsSmallScreen() { |
86 | const self = this; | 74 | const self = this; |
87 | if (document.body.clientWidth > self.maxClientWidth) { | 75 | if (document.body.clientWidth > self.maxClientWidth) { | ... | ... |
... | @@ -8,11 +8,13 @@ | ... | @@ -8,11 +8,13 @@ |
8 | <!-- mobile --> | 8 | <!-- mobile --> |
9 | <div class="nav-list-m mobile"> | 9 | <div class="nav-list-m mobile"> |
10 | <div class="mobile-nav-list"> | 10 | <div class="mobile-nav-list"> |
11 | <img src="@/assets/images/home/mobile-user.png" alt=""> | 11 | <img @click="onShowDropdown('login')" v-if="!loginMVisible" src="@/assets/images/home/mobile-user.png" alt=""> |
12 | <img @click="onShowDropdown(true)" v-if="!dropdownMVisible" src="@/assets/images/home/mobile-nav.png" alt=""> | 12 | <img @click="onShowDropdown('')" v-else src="@/assets/images/home/mobile-user.png" alt=""> |
13 | <img @click="onShowDropdown(false)" v-else src="@/assets/images/home/mobile-nav-close.png" alt=""> | 13 | <img @click="onShowDropdown('nav')" v-if="!dropdownMVisible" src="@/assets/images/home/mobile-nav.png" alt=""> |
14 | <img @click="onShowDropdown('')" v-else src="@/assets/images/home/mobile-nav-close.png" alt=""> | ||
14 | </div> | 15 | </div> |
15 | <m-dropdown class="lang" :lang-list="langData.list" :visible="dropdownMVisible" :show-dropdown-m="onShowDropdown"></m-dropdown> | 16 | <m-dropdown class="lang" :type="'nav'" :visible="dropdownMVisible" :show-dropdown-m="onShowDropdown" :lang-list="langData.list"></m-dropdown> |
17 | <m-dropdown class="lang" :type="'login'" :visible="loginMVisible" :show-dropdown-m="onShowDropdown"></m-dropdown> | ||
16 | </div> | 18 | </div> |
17 | 19 | ||
18 | <!-- pc --> | 20 | <!-- pc --> | ... | ... |
... | @@ -25,6 +25,12 @@ export default { | ... | @@ -25,6 +25,12 @@ export default { |
25 | return false; | 25 | return false; |
26 | } | 26 | } |
27 | }, | 27 | }, |
28 | type: { | ||
29 | type: String, | ||
30 | default () { | ||
31 | return "nav"; | ||
32 | } | ||
33 | }, | ||
28 | langList: { | 34 | langList: { |
29 | type: Array, | 35 | type: Array, |
30 | default () { | 36 | default () { |
... | @@ -46,10 +52,11 @@ export default { | ... | @@ -46,10 +52,11 @@ export default { |
46 | }, | 52 | }, |
47 | }, | 53 | }, |
48 | methods: { | 54 | methods: { |
55 | // 跳转菜单 | ||
49 | onClickHandler(item) { | 56 | onClickHandler(item) { |
50 | let path = item && item.path || ""; | 57 | let path = item && item.path || ""; |
51 | if (path) { | 58 | if (path) { |
52 | this.showDropdownM(false); | 59 | this.showDropdownM(''); |
53 | this.$router.push({ | 60 | this.$router.push({ |
54 | path: path | 61 | path: path |
55 | }) | 62 | }) |
... | @@ -63,7 +70,7 @@ export default { | ... | @@ -63,7 +70,7 @@ export default { |
63 | * 设置语言 | 70 | * 设置语言 |
64 | */ | 71 | */ |
65 | setLangHandler(curData) { | 72 | setLangHandler(curData) { |
66 | this.showDropdownM(false); | 73 | this.showDropdownM(''); |
67 | // 如果是语言设置,则设置语言 | 74 | // 如果是语言设置,则设置语言 |
68 | let lang = curData.value; | 75 | let lang = curData.value; |
69 | this.$i18n.locale = lang; | 76 | this.$i18n.locale = lang; |
... | @@ -72,13 +79,39 @@ export default { | ... | @@ -72,13 +79,39 @@ export default { |
72 | window.location.reload(); | 79 | window.location.reload(); |
73 | }, | 80 | }, |
74 | initData() { | 81 | initData() { |
75 | let navList = this.i18n.nav.navList; | 82 | let navList = []; |
76 | navList.forEach(element => { | 83 | if (this.type == "nav") { |
77 | this.activeNames.push( | 84 | navList = this.i18n.nav.navList; |
78 | [] | 85 | navList.forEach(element => { |
79 | ) | 86 | this.activeNames.push( |
80 | }); | 87 | [] |
88 | ) | ||
89 | }); | ||
90 | } else if (this.type == "login") { | ||
91 | // 构建登陆页面 | ||
92 | let i18n = this.$i18n.messages[this.$i18n.locale] || {}; | ||
93 | let menuData = JSON.parse(JSON.stringify(i18n.nav.loginData)); | ||
94 | let list = []; | ||
95 | if (this.userInfo && this.userInfo.name) { | ||
96 | menuData.name = this.userInfo.name; | ||
97 | menuData.list.forEach(element => { | ||
98 | if (element.type == "auth") { | ||
99 | list.push(element); | ||
100 | } | ||
101 | }); | ||
102 | } else { | ||
103 | menuData.list.forEach(element => { | ||
104 | if (element.type == "noAuth") { | ||
105 | list.push(element); | ||
106 | } | ||
107 | }); | ||
108 | } | ||
109 | // menuData.list = list; | ||
110 | navList = list; | ||
111 | console.log("navList:", navList); | ||
112 | } | ||
81 | this.navList = navList; | 113 | this.navList = navList; |
114 | |||
82 | } | 115 | } |
83 | }, | 116 | }, |
84 | created() { | 117 | created() { | ... | ... |
1 | <template> | 1 | <template> |
2 | <div> | 2 | <div> |
3 | <div ref="panel" class="panel" :class="{'hide':!visible}"> | 3 | <div ref="panel" class="panel" :class="{'hide':!visible}"> |
4 | <div class="mask" @click="showDropdownM(false)"></div> | 4 | <div class="mask" @click="showDropdownM('')"></div> |
5 | <!-- 列表 --> | 5 | <!-- 列表 --> |
6 | <div class="list"> | 6 | <div class="list"> |
7 | <div v-for="(item,index) in navList" :key="item.id" :index="index"> | 7 | <div v-for="(item,index) in navList" :key="item.id" :index="index"> | ... | ... |
1 | @import '@/styles/_support'; | 1 | @import '@/styles/_support'; |
2 | 2 | ||
3 | .common-form-container { | 3 | .common-form-container {} |
4 | // @extend .bb; | ||
5 | // border-radius: .666667rem; | ||
6 | // border: solid .083333rem #f2f2f2; | ||
7 | // background-color: #ffffff; | ||
8 | // padding: 2.666667rem 2.833333rem 2.833333rem 2rem; | ||
9 | } | ||
10 | 4 | ||
11 | .table { | 5 | .table { |
12 | $girdHei: 4.333333rem; | 6 | $girdHei: 4.333333rem; |
... | @@ -119,7 +113,19 @@ | ... | @@ -119,7 +113,19 @@ |
119 | } | 113 | } |
120 | } | 114 | } |
121 | 115 | ||
122 | |||
123 | .orange { | 116 | .orange { |
124 | background-color: $cOrange; | 117 | background-color: $cOrange; |
125 | } | 118 | } |
119 | |||
120 | @media (max-width: 1200px) { | ||
121 | .container { | ||
122 | display: -webkit-box; | ||
123 | overflow-x: scroll; | ||
124 | -webkit-overflow-scrolling: touch; | ||
125 | width: 92vw; | ||
126 | } | ||
127 | } | ||
128 | |||
129 | .container::-webkit-scrollbar { | ||
130 | display: none; | ||
131 | } | ... | ... |
1 | 1 | ||
2 | <template> | 2 | <template> |
3 | <div class="common-form-container"> | 3 | <div class="container common-form-container"> |
4 | <div class="table"> | 4 | <div class="table"> |
5 | <div class="table-header orange"> | 5 | <div class="table-header orange"> |
6 | <div class="table-header-item w1">{{$t('commonForm.head1')}}</div> | 6 | <div class="table-header-item w1">{{$t('commonForm.head1')}}</div> | ... | ... |
... | @@ -160,3 +160,17 @@ | ... | @@ -160,3 +160,17 @@ |
160 | height: 1.4rem; | 160 | height: 1.4rem; |
161 | margin: 0 1rem; | 161 | margin: 0 1rem; |
162 | } | 162 | } |
163 | |||
164 | @media (max-width: 1200px) { | ||
165 | .container { | ||
166 | width: 1200px; | ||
167 | display: -webkit-box; | ||
168 | overflow-x: scroll; | ||
169 | -webkit-overflow-scrolling: touch; | ||
170 | width: 92vw; | ||
171 | } | ||
172 | } | ||
173 | |||
174 | .container::-webkit-scrollbar { | ||
175 | display: none; | ||
176 | } | ... | ... |
This diff is collapsed.
Click to expand it.
... | @@ -43,7 +43,6 @@ | ... | @@ -43,7 +43,6 @@ |
43 | background-image: linear-gradient(to bottom, #f05f28, #f05021); | 43 | background-image: linear-gradient(to bottom, #f05f28, #f05021); |
44 | } | 44 | } |
45 | 45 | ||
46 | |||
47 | } | 46 | } |
48 | 47 | ||
49 | &-line { | 48 | &-line { |
... | @@ -53,7 +52,7 @@ | ... | @@ -53,7 +52,7 @@ |
53 | 52 | ||
54 | &-cont { | 53 | &-cont { |
55 | @extend .bb; | 54 | @extend .bb; |
56 | padding: 4.25rem 2rem 0 2.5rem; | 55 | padding: 4.25rem 2rem $marginMedium-M 2.5rem; |
57 | border: solid 1px #f2f2f2; | 56 | border: solid 1px #f2f2f2; |
58 | background-color: #ffffff; | 57 | background-color: #ffffff; |
59 | min-height: 43.75rem; | 58 | min-height: 43.75rem; |
... | @@ -90,11 +89,6 @@ | ... | @@ -90,11 +89,6 @@ |
90 | } | 89 | } |
91 | } | 90 | } |
92 | 91 | ||
93 | /* 隐藏下方的滚动条 */ | ||
94 | // .payment-nav::-webkit-scrollbar { | ||
95 | // background-color: transparent; | ||
96 | // } | ||
97 | |||
98 | .payment-nav::-webkit-scrollbar { | 92 | .payment-nav::-webkit-scrollbar { |
99 | display: none; | 93 | display: none; |
100 | } | 94 | } | ... | ... |
... | @@ -52,10 +52,7 @@ | ... | @@ -52,10 +52,7 @@ |
52 | flex: 1; | 52 | flex: 1; |
53 | } | 53 | } |
54 | 54 | ||
55 | .agree{ | 55 | .agree {} |
56 | // @extend .bb; | ||
57 | // padding-left: 80px; | ||
58 | } | ||
59 | 56 | ||
60 | .name-ipt { | 57 | .name-ipt { |
61 | width: 13.666667rem; | 58 | width: 13.666667rem; |
... | @@ -132,3 +129,24 @@ | ... | @@ -132,3 +129,24 @@ |
132 | background-blend-mode: soft-light, ; | 129 | background-blend-mode: soft-light, ; |
133 | background-image: linear-gradient(to top, #000000, #ffffff), linear-gradient(to bottom, #ec6429, #ec6429); | 130 | background-image: linear-gradient(to top, #000000, #ffffff), linear-gradient(to bottom, #ec6429, #ec6429); |
134 | } | 131 | } |
132 | |||
133 | |||
134 | @media (max-width: 768px) { | ||
135 | .form { | ||
136 | &-item { | ||
137 | .ipt-wrap { | ||
138 | display: block; | ||
139 | } | ||
140 | |||
141 | .agree { | ||
142 | margin-top: $marginSmall-M; | ||
143 | |||
144 | .check-icon { | ||
145 | margin-left: 0; | ||
146 | } | ||
147 | } | ||
148 | |||
149 | |||
150 | } | ||
151 | } | ||
152 | } | ... | ... |
... | @@ -8,7 +8,7 @@ | ... | @@ -8,7 +8,7 @@ |
8 | </div> | 8 | </div> |
9 | <div class="ipt-wrap"> | 9 | <div class="ipt-wrap"> |
10 | <input class="ipt mail-ipt" :class="{err : errorTips.e1.length > 0}" type="text" v-model="data.mobile"> | 10 | <input class="ipt mail-ipt" :class="{err : errorTips.e1.length > 0}" type="text" v-model="data.mobile"> |
11 | <div class="agree pointer" @click="checked1 = !checked1"> | 11 | <div class="agree" @click="checked1 = !checked1"> |
12 | <img v-if="!checked1" class="check-icon pointer" src="@/assets/images/reservation/un-check.png"> | 12 | <img v-if="!checked1" class="check-icon pointer" src="@/assets/images/reservation/un-check.png"> |
13 | <img v-else class="check-icon pointer" src="@/assets/images/reservation/check.png"> | 13 | <img v-else class="check-icon pointer" src="@/assets/images/reservation/check.png"> |
14 | <span>{{$t("policyChangeContact.checkTips")}}</span> | 14 | <span>{{$t("policyChangeContact.checkTips")}}</span> |
... | @@ -25,7 +25,7 @@ | ... | @@ -25,7 +25,7 @@ |
25 | </div> | 25 | </div> |
26 | <div class="ipt-wrap"> | 26 | <div class="ipt-wrap"> |
27 | <input class="ipt mail-ipt" type="text" :class="{err : errorTips.e2.length > 0}" v-model="data.address"> | 27 | <input class="ipt mail-ipt" type="text" :class="{err : errorTips.e2.length > 0}" v-model="data.address"> |
28 | <div class="pointer" @click="checked2 = !checked2"> | 28 | <div class="agree" @click="checked2 = !checked2"> |
29 | <img v-if="!checked2" class="check-icon pointer" src="@/assets/images/reservation/un-check.png"> | 29 | <img v-if="!checked2" class="check-icon pointer" src="@/assets/images/reservation/un-check.png"> |
30 | <img v-else class="check-icon pointer" src="@/assets/images/reservation/check.png"> | 30 | <img v-else class="check-icon pointer" src="@/assets/images/reservation/check.png"> |
31 | <span>{{$t("policyChangeContact.checkTips")}}</span> | 31 | <span>{{$t("policyChangeContact.checkTips")}}</span> |
... | @@ -41,7 +41,7 @@ | ... | @@ -41,7 +41,7 @@ |
41 | </div> | 41 | </div> |
42 | <div class="ipt-wrap"> | 42 | <div class="ipt-wrap"> |
43 | <input class="ipt mail-ipt" type="text" :class="{err : errorTips.e3.length > 0}" v-model="data.email"> | 43 | <input class="ipt mail-ipt" type="text" :class="{err : errorTips.e3.length > 0}" v-model="data.email"> |
44 | <div class="pointer" @click="checked3 = !checked3"> | 44 | <div class="agree" @click="checked3 = !checked3"> |
45 | <img v-if="!checked3" class="check-icon pointer" src="@/assets/images/reservation/un-check.png"> | 45 | <img v-if="!checked3" class="check-icon pointer" src="@/assets/images/reservation/un-check.png"> |
46 | <img v-else class="check-icon pointer" src="@/assets/images/reservation/check.png"> | 46 | <img v-else class="check-icon pointer" src="@/assets/images/reservation/check.png"> |
47 | <span>{{$t("policyChangeContact.checkTips")}}</span> | 47 | <span>{{$t("policyChangeContact.checkTips")}}</span> | ... | ... |
... | @@ -121,8 +121,8 @@ | ... | @@ -121,8 +121,8 @@ |
121 | } | 121 | } |
122 | 122 | ||
123 | .w5 { | 123 | .w5 { |
124 | flex: 1; | 124 | // flex: 1; |
125 | // width: 212px; | 125 | width: 212px; |
126 | } | 126 | } |
127 | 127 | ||
128 | } | 128 | } |
... | @@ -146,9 +146,22 @@ | ... | @@ -146,9 +146,22 @@ |
146 | .icon { | 146 | .icon { |
147 | display: inline-block; | 147 | display: inline-block; |
148 | width: 1rem; | 148 | width: 1rem; |
149 | ; | ||
150 | margin-right: .5rem; | 149 | margin-right: .5rem; |
151 | } | 150 | } |
152 | 151 | ||
153 | margin-top: 1.25rem; | 152 | margin-top: 1.25rem; |
154 | } | 153 | } |
154 | |||
155 | @media (max-width: 1200px) { | ||
156 | .container { | ||
157 | display: -webkit-box; | ||
158 | overflow-x: scroll; | ||
159 | -webkit-overflow-scrolling: touch; | ||
160 | width: 92vw; | ||
161 | |||
162 | } | ||
163 | } | ||
164 | |||
165 | .container::-webkit-scrollbar { | ||
166 | display: none; | ||
167 | } | ... | ... |
1 | 1 | ||
2 | <template> | 2 | <template> |
3 | <div class="policy-change-guide-container"> | 3 | <div> |
4 | <div class="table"> | 4 | <div class="container policy-change-guide-container"> |
5 | <div class="table-header orange"> | 5 | <div class="table"> |
6 | <div class="table-header-item w1">{{$t('policyChangeGuide.head1')}}</div> | 6 | <div class="table-header orange"> |
7 | <div class="table-header-item w2">{{$t('policyChangeGuide.head2')}}</div> | 7 | <div class="table-header-item w1">{{$t('policyChangeGuide.head1')}}</div> |
8 | <div class="table-header-item w3">{{$t('policyChangeGuide.head3')}}</div> | 8 | <div class="table-header-item w2">{{$t('policyChangeGuide.head2')}}</div> |
9 | <div class="table-header-item w4">{{$t('policyChangeGuide.head4')}}</div> | 9 | <div class="table-header-item w3">{{$t('policyChangeGuide.head3')}}</div> |
10 | <div class="table-header-item w5">{{$t('policyChangeGuide.head5')}}</div> | 10 | <div class="table-header-item w4">{{$t('policyChangeGuide.head4')}}</div> |
11 | </div> | 11 | <div class="table-header-item w5">{{$t('policyChangeGuide.head5')}}</div> |
12 | <div class="table-content"> | 12 | </div> |
13 | <div v-for="(item,index) in i18n.policyChangeGuide.form" :key="index" class="table-content-item"> | 13 | <div class="table-content"> |
14 | <div v-if="index < i18n.policyChangeGuide.form.length-1" class="hl"></div> | 14 | <div v-for="(item,index) in i18n.policyChangeGuide.form" :key="index" class="table-content-item"> |
15 | <div class="ww w1"> | 15 | <div v-if="index < i18n.policyChangeGuide.form.length-1" class="hl"></div> |
16 | <div class="grid"> | 16 | <div class="ww w1"> |
17 | <div class="v-line"></div> | 17 | <div class="grid"> |
18 | <span :class="{'act':item.projectType == 1}" @click="onProjectHandler(item)" v-html="item.project"> {{item.project}}</span> | 18 | <div class="v-line"></div> |
19 | <span :class="{'act':item.projectType == 1}" @click="onProjectHandler(item)" v-html="item.project"> {{item.project}}</span> | ||
20 | </div> | ||
19 | </div> | 21 | </div> |
20 | </div> | 22 | <div class="ww w2"> |
21 | <div class="ww w2"> | 23 | <div class="grid"> |
22 | <div class="grid"> | 24 | <div class="v-line"></div> |
23 | <div class="v-line"></div> | 25 | <span v-html="item.content"> {{item.content}}</span> |
24 | <span v-html="item.content"> {{item.content}}</span> | 26 | </div> |
25 | </div> | 27 | </div> |
26 | </div> | 28 | <div class="ww w3"> |
27 | <div class="ww w3"> | 29 | <div class="grid"> |
28 | <div class="grid"> | 30 | <div class="v-line"></div> |
29 | <div class="v-line"></div> | 31 | <span v-html="item.applicant"> {{item.applicant}}</span> |
30 | <span v-html="item.applicant"> {{item.applicant}}</span> | 32 | </div> |
31 | </div> | 33 | </div> |
32 | </div> | 34 | <div class="ww w4"> |
33 | <div class="ww w4"> | 35 | <div class="grid"> |
34 | <div class="grid"> | 36 | <div class="v-line"></div> |
35 | <div class="v-line"></div> | 37 | <span v-html="item.receptionTime"> {{item.receptionTime}}</span> |
36 | <span v-html="item.receptionTime"> {{item.receptionTime}}</span> | 38 | </div> |
37 | </div> | 39 | </div> |
38 | </div> | 40 | <div class="ww w5"> |
39 | <div class="ww w5"> | 41 | <div class="grid"> |
40 | <div class="grid"> | 42 | <div class="material" :class="{'pointer':item2.type == 1}" v-for="(item2,index2) in item.materialList" :key="index2"> |
41 | <div class="material" :class="{'pointer':item2.type == 1}" v-for="(item2,index2) in item.materialList" :key="index2"> | 43 | <img v-if="item2.type == 1" class="icon" src="@/assets/images/common-form/icon-cf-download.png" alt=""> |
42 | <img v-if="item2.type == 1" class="icon" src="@/assets/images/common-form/icon-cf-download.png" alt=""> | 44 | <span :class="{'act':item2.type == 1}" v-html="item2.name">{{ item2.name }}</span> |
43 | <span :class="{'act':item2.type == 1}" v-html="item2.name">{{ item2.name }}</span> | 45 | </div> |
44 | </div> | 46 | </div> |
45 | </div> | 47 | </div> |
46 | </div> | 48 | </div> |
47 | </div> | 49 | </div> |
48 | </div> | 50 | </div> |
49 | </div> | 51 | </div> |
52 | |||
50 | <div class="notice"> | 53 | <div class="notice"> |
51 | <img class="icon" src="@/assets/images/policy-change-guide/icon-pcg-notice.png" alt=""> {{$t("policyChangeGuide.notice")}} | 54 | <img class="icon" src="@/assets/images/policy-change-guide/icon-pcg-notice.png" alt=""> {{$t("policyChangeGuide.notice")}} |
52 | </div> | 55 | </div> |
53 | </div> | 56 | </div> |
57 | |||
54 | </template> | 58 | </template> |
55 | 59 | ||
56 | <script src="./policy-change-guide.js"></script> | 60 | <script src="./policy-change-guide.js"></script> | ... | ... |
... | @@ -167,3 +167,12 @@ | ... | @@ -167,3 +167,12 @@ |
167 | background-blend-mode: soft-light, ; | 167 | background-blend-mode: soft-light, ; |
168 | background-image: linear-gradient(to top, #000000, #ffffff), linear-gradient(to bottom, #ec6429, #ec6429); | 168 | background-image: linear-gradient(to top, #000000, #ffffff), linear-gradient(to bottom, #ec6429, #ec6429); |
169 | } | 169 | } |
170 | |||
171 | |||
172 | @media (max-width: 768px) { | ||
173 | .form { | ||
174 | &-item2 { | ||
175 | display: block; | ||
176 | } | ||
177 | } | ||
178 | } | ... | ... |
... | @@ -302,3 +302,27 @@ | ... | @@ -302,3 +302,27 @@ |
302 | // color: $cFontGray; | 302 | // color: $cFontGray; |
303 | color: #4c4948; | 303 | color: #4c4948; |
304 | } | 304 | } |
305 | |||
306 | .box-shadow { | ||
307 | box-shadow: 0 0 1.5rem 0 rgba(255, 87, 0, 0.15); | ||
308 | } | ||
309 | |||
310 | @media (max-width: 1200px) { | ||
311 | .content { | ||
312 | @include content-percent(); | ||
313 | min-height: 0; | ||
314 | padding-bottom: 0; | ||
315 | } | ||
316 | |||
317 | .top-space { | ||
318 | height: 0; | ||
319 | } | ||
320 | |||
321 | .box-shadow { | ||
322 | box-shadow: none; | ||
323 | } | ||
324 | |||
325 | .ebg { | ||
326 | display: none; | ||
327 | } | ||
328 | } | ... | ... |
... | @@ -242,6 +242,10 @@ | ... | @@ -242,6 +242,10 @@ |
242 | } | 242 | } |
243 | } | 243 | } |
244 | 244 | ||
245 | .box-shadow { | ||
246 | box-shadow: 0 0 1.5rem 0 rgba(255, 87, 0, 0.15); | ||
247 | } | ||
248 | |||
245 | @media (max-width: 1200px) { | 249 | @media (max-width: 1200px) { |
246 | .content { | 250 | .content { |
247 | @include content-percent(); | 251 | @include content-percent(); |
... | @@ -267,7 +271,6 @@ | ... | @@ -267,7 +271,6 @@ |
267 | height: 1rem; | 271 | height: 1rem; |
268 | } | 272 | } |
269 | 273 | ||
270 | |||
271 | &-nav { | 274 | &-nav { |
272 | margin: 1.75rem auto 1rem; | 275 | margin: 1.75rem auto 1rem; |
273 | } | 276 | } | ... | ... |
... | @@ -242,6 +242,10 @@ | ... | @@ -242,6 +242,10 @@ |
242 | } | 242 | } |
243 | } | 243 | } |
244 | 244 | ||
245 | .box-shadow { | ||
246 | box-shadow: 0 0 1.5rem 0 rgba(255, 87, 0, 0.15); | ||
247 | } | ||
248 | |||
245 | @media (max-width: 1200px) { | 249 | @media (max-width: 1200px) { |
246 | .content { | 250 | .content { |
247 | @include content-percent(); | 251 | @include content-percent(); | ... | ... |
... | @@ -30,7 +30,7 @@ | ... | @@ -30,7 +30,7 @@ |
30 | 30 | ||
31 | .step { | 31 | .step { |
32 | @extend .fcc; | 32 | @extend .fcc; |
33 | margin-bottom: 4.25rem; | 33 | margin: .5rem auto 4.25rem; |
34 | 34 | ||
35 | img { | 35 | img { |
36 | height: 4.25rem; | 36 | height: 4.25rem; |
... | @@ -250,6 +250,10 @@ | ... | @@ -250,6 +250,10 @@ |
250 | } | 250 | } |
251 | } | 251 | } |
252 | 252 | ||
253 | .box-shadow { | ||
254 | box-shadow: 0 0 1.5rem 0 rgba(255, 87, 0, 0.15); | ||
255 | } | ||
256 | |||
253 | @media (max-width: 1200px) { | 257 | @media (max-width: 1200px) { |
254 | .content { | 258 | .content { |
255 | @include content-percent(); | 259 | @include content-percent(); | ... | ... |
-
Please register or sign in to post a comment