Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
45c18ee9 by simon
Options

全部rem替换

1 parent cf88b29e
Inline Side-by-side
Showing 57 changed files with 1627 additions and 853 deletions
......@@ -5,7 +5,7 @@
<router-view />
</main>
<v-footer></v-footer>
<vhis-modal></vhis-modal>
<vhis-modal v-if="1>10"></vhis-modal>
</div>
</template>
......
......@@ -113,6 +113,14 @@ module.exports = {
name: "Useful Forms",
path: "/custom/service?q=m8"
},
{
name: "eCorrespondence Enquiry",
path: "/custom/service?q=m9"
},
{
name: "FAQ",
path: "/custom/service?q=m10"
},
]
},
{
......@@ -739,7 +747,7 @@ module.exports = {
menu7: "Complaints",
menu8: "Useful Forms",
menu9: "eCorrespondence Enquiry",
menu10: "常见问题",
menu10: "FAQ",
insuranceQuery: {
modify: "modify",
......
......@@ -113,6 +113,14 @@ module.exports = {
name: "常用表格",
path: "/custom/service?q=m8"
},
{
name: "電子通知書查詢",
path: "/custom/service?q=m9"
},
{
name: "常見問題",
path: "/custom/service?q=m10"
},
]
},
{
......
......@@ -113,6 +113,14 @@ module.exports = {
name: "常用表格",
path: "/custom/service?q=m8"
},
{
name: "电子通知书查询",
path: "/custom/service?q=m9"
},
{
name: "常见问题",
path: "/custom/service?q=m10"
},
]
},
{
......
......@@ -20,7 +20,7 @@ input {
.empty {
flex: 1;
height: 30rem;
height: 360px;
display: flex;
align-items: center;
justify-content: center;
......@@ -50,7 +50,7 @@ input {
color: #ffffff;
font-weight: 600;
cursor: pointer;
margin: 2.5rem auto;
margin: 30px auto;
text-align: center;
border-radius: 50px;
}
......@@ -77,7 +77,7 @@ input {
z-index: 10;
position: absolute;
top: 26px;
right: 1.2rem;
right: 14.4px;
background-image: url('~@/assets/images/reservation/re-down-arrow-2.png');
background-size: 100% 100%;
width: 15px;
......@@ -104,7 +104,7 @@ input {
}
.title:lang(zh) {
letter-spacing: .25rem;
letter-spacing: 3px;
}
.default-mt {
......@@ -207,12 +207,10 @@ input {
@extend .text-jtf;
span {
// margin-left: 1.3rem;
margin-left: 24px;
}
img {
// width: 1.3rem;
width: 22px;
}
}
......@@ -233,12 +231,10 @@ input {
img {
width: 2rem;
width: 24px;
}
span {
// font-size: 1rem;
// font-size: 18px;
margin-left: 10px;
color: $cOrange2;
}
......@@ -323,7 +319,7 @@ input {
}
.label:lang(zh) {
letter-spacing: .25rem;
letter-spacing: 3px;
}
.ipt-wrap {
......@@ -334,23 +330,23 @@ input {
.ipt {
border: 1px solid #ff6839 !important;
border-radius: 5px;
height: 3rem;
height: 36px;
display: flex;
align-items: center;
}
// 长文本
.textarea {
min-height: 8.75rem;
min-height: 105px;
@extend .bb;
padding: .75rem;
padding: 9px;
}
.down-arrow {
z-index: 10;
position: absolute;
top: 1.3rem;
right: 1.2rem;
top: 15.6px;
right: 14.4px;
background-image: url('~@/assets/images/reservation/re-down-arrow-2.png');
background-size: 100% 100%;
width: 15px;
......@@ -362,16 +358,15 @@ input {
.validator {
color: $cOrange2;
margin-top: 0.5rem;
margin-top: 6px;
position: absolute;
right: 1rem;
right: 12px;
display: flex;
align-items: center;
// bottom: 0;
img {
display: inline-block;
margin-right: 0.4rem;
margin-right: 4.8px;
}
}
}
......@@ -381,8 +376,6 @@ input {
width: 100%;
display: flex;
justify-content: flex-start;
// padding: 0 $marginSmall;
// margin-bottom: 16px;
.label {
@extend .bb;
......@@ -393,20 +386,18 @@ input {
font-size: 20px;
.main-label {
// font-size: 1.5rem;
font-size: 22px;
color: $cOrange2;
}
}
.label:lang(zh) {
letter-spacing: .25rem;
letter-spacing: 3px;
}
.date-container {
width: 60%;
position: relative;
// background-color: wheat;
}
.value {
......@@ -419,34 +410,32 @@ input {
.ipt {
border: 1px solid #ff6839 !important;
border-radius: 5px;
height: 3rem;
height: 36px;
display: flex;
align-items: center;
}
.ipt2 {
// width: 100%;
border-bottom: 1px solid #ccc;
height: 3rem;
height: 36px;
display: flex;
align-items: center;
margin-bottom: 10px;
// width: 700px;
width: 100%;
}
// 长文本
.textarea {
min-height: 8.75rem;
min-height: 105px;
@extend .bb;
padding: .75rem;
padding: 9px;
}
.down-arrow {
z-index: 10;
position: absolute;
top: 26px;
right: 1.2rem;
right: 14.4px;
background-image: url('~@/assets/images/reservation/re-down-arrow-2.png');
background-size: 100% 100%;
width: 15px;
......@@ -466,19 +455,19 @@ input {
.notice {
margin-top: 4rem;
margin-top: 48px;
@extend .bb;
padding: 0 1rem;
padding: 0 12px;
&-item {
position: relative;
line-height: 2;
margin-bottom: 1rem;
margin-bottom: 12px;
&-icon {
width: 14px;
position: absolute;
top: .6rem;
top: 7.2px;
}
}
......
......@@ -62,7 +62,7 @@ $borderSize: 6px;
}
.clarms-title-container {
// margin-left: 2.5rem;
// margin-left: 30px;
flex-grow: 1;
width: 100%;
......@@ -160,21 +160,21 @@ $borderSize: 6px;
background-color: rgba($color: #000000, $alpha: .1);
img {
width: 2.5rem;
height: 2.5rem;
width: 30px;
height: 30px;
}
}
.mask-bg-2 {
background-color: rgba($color: #000000, $alpha: .5) !important;
color: white !important;
font-size: 1rem;
font-size: 12px;
line-height: initial;
}
}
.clarms-upload-tips {
font-size: 1rem;
font-size: 12px;
color: $cFontGray2;
text-align: center;
}
......@@ -229,7 +229,7 @@ $borderSize: 6px;
// }
// .clarms-icon {
// width: 4.166667rem;
// width: 50px;
// }
// }
......@@ -255,10 +255,10 @@ $borderSize: 6px;
// @media (max-width: 500px) {
// .clarms-container .clarms-box .clarms-title-container .clarms-t1 {
// font-size: 1rem;
// font-size: 12px;
// }
// .clarms-container .clarms-box .clarms-title-container .clarms-t2 {
// font-size: 1rem;
// font-size: 12px;
// }
// }
......
......@@ -104,7 +104,7 @@ $borderRadius:6px;
}
.ipt-date {
padding: 0 2rem;
padding: 0 24px;
width: 100%;
background-color: #ffffff;
height: 48px;
......@@ -127,7 +127,7 @@ $borderRadius:6px;
}
.label:lang(zh) {
letter-spacing: .25rem;
letter-spacing: 3px;
}
.ipt-wrap {
......@@ -146,7 +146,7 @@ $borderRadius:6px;
.ipt {
border: none !important;
border-radius: 5px;
height: 3rem;
height: 36px;
width: 100%;
background-color: #ffffff;
......@@ -157,16 +157,16 @@ $borderRadius:6px;
// 长文本
.textarea {
min-height: 8.75rem;
min-height: 105px;
@extend .bb;
padding: .75rem;
padding: 9px;
}
.down-arrow {
z-index: 10;
position: absolute;
top: 22px;
right: 1.2rem;
right: 14.4px;
background-image: url('~@/assets/images/reservation/re-down-arrow-2.png');
background-size: 100% 100%;
width: 15px;
......@@ -178,16 +178,16 @@ $borderRadius:6px;
.validator {
color: $cOrange2;
margin-top: 0.5rem;
margin-top: 6px;
position: absolute;
right: 1rem;
right: 12px;
display: flex;
align-items: center;
// bottom: 0;
img {
display: inline-block;
margin-right: 0.4rem;
margin-right: 4.8px;
}
}
}
......@@ -211,7 +211,7 @@ $borderRadius:6px;
}
.label:lang(zh) {
letter-spacing: .25rem;
letter-spacing: 3px;
}
.date-container {
......@@ -229,7 +229,7 @@ $borderRadius:6px;
.ipt {
border: 1px solid $cOrange !important;
border-radius: 5px;
height: 3rem;
height: 36px;
display: flex;
align-items: center;
}
......@@ -238,7 +238,7 @@ $borderRadius:6px;
.ipt2 {
width: 100%;
border-bottom: 1px solid #ccc;
height: 3rem;
height: 36px;
display: flex;
align-items: center;
margin-bottom: 10px;
......@@ -246,16 +246,16 @@ $borderRadius:6px;
// 长文本
.textarea {
min-height: 8.75rem;
min-height: 105px;
@extend .bb;
padding: .75rem;
padding: 9px;
}
.down-arrow {
z-index: 10;
position: absolute;
top: 22px;
right: 1.2rem;
right: 14.4px;
background-image: url('~@/assets/images/reservation/re-down-arrow-2.png');
background-size: 100% 100%;
width: 15px;
......@@ -270,19 +270,19 @@ $borderRadius:6px;
.notice {
margin-top: 4rem;
margin-top: 48px;
@extend .bb;
padding: 0 1rem;
padding: 0 12px;
&-item {
position: relative;
line-height: 2;
margin-bottom: 1rem;
margin-bottom: 12px;
&-icon {
width: 14px;
position: absolute;
top: .6rem;
top: 7.2px;
}
}
......@@ -294,7 +294,7 @@ $borderRadius:6px;
@media (max-width: 1200px) {
.mobile-margin {
margin-top: 2.5rem;
margin-top: 30px;
}
}
......@@ -323,7 +323,7 @@ $borderRadius:6px;
@media (max-width: 700px) {
.reservation-container {
padding: 32px 2rem 34px 2rem;
padding: 32px 24px 34px 24px;
}
.form {
......
......@@ -21,8 +21,8 @@
margin-left: 0px;
@extend .bb;
max-width: 37.5rem;
min-width: 25rem;
max-width: 450px;
min-width: 300px;
height: 320px;
border-radius: $borderRadius;
background-color: wheat;
......@@ -142,19 +142,19 @@
}
.ipt:lang(zh) {
letter-spacing: .1rem;
letter-spacing: 1.2px;
}
// 长文本
.textarea {
min-height: 8.75rem;
border-radius: 1rem;
min-height: 105px;
border-radius: 12px;
}
.down-arrow {
position: absolute;
top: 2.2rem;
right: 2rem;
top: 26.4px;
right: 24px;
}
......@@ -162,11 +162,11 @@
@extend .fcc;
// font-family: Arial;
font-size: 18px;
width: 8.5rem;
width: 102px;
border: solid 1px #dcdddd;
background-color: #f2f2f2;
flex: none;
margin-left: 1.5rem;
margin-left: 18px;
color: $cFontGray;
}
......@@ -179,7 +179,7 @@
.ipt-code {
flex: 1;
padding-right: 1.75rem;
padding-right: 21px;
}
.veri-btn {
......
......@@ -2,14 +2,14 @@
.drop-list {
display: inline-block;
min-width: 10rem;
min-width: 120px;
position: relative;
margin: 0 1.1rem;
margin: 0 13.2px;
font-size: $fontSizeTitle;
.list {
position: absolute;
width: 11rem;
width: 132px;
left: 0;
right: 0;
margin: 0 auto;
......@@ -18,7 +18,7 @@
transform: translateX(-50%); //居中处理
.space {
height: 1.5rem;
height: 18px;
}
}
......@@ -32,19 +32,19 @@
ul {
display: none;
overflow: hidden;
box-shadow: 0 0 1.5rem 0 rgba(255, 87, 0, 0.15);
border-radius: .5rem;
box-shadow: 0 0 18px 0 rgba(255, 87, 0, 0.15);
border-radius: 6px;
li {
// border-bottom: solid 1px #f1f1f1;
background: #ffffff;
text-align: center;
padding: 1.5rem 0;
padding: 18px 0;
position: relative;
&:after {
content: "";
width: 7rem;
width: 84px;
height: 1px;
background: #f1f1f1;
position: absolute;
......@@ -74,9 +74,9 @@
}
.user {
width: 9.25rem;
height: 3rem;
border-radius: 3rem;
width: 111px;
height: 36px;
border-radius: 36px;
background-color: $cOrange;
display: flex;
align-items: center;
......@@ -85,14 +85,14 @@
margin: 0 auto;
span {
max-width: 4.25rem;
max-width: 51px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.icon-img {
margin: 0 .5rem;
margin: 0 6px;
}
}
......
......@@ -27,16 +27,16 @@
// 信息
.info {
padding: 2rem 0 2rem;
padding: 24px 0 24px;
display: flex;
// 热线
.hotline {
min-width: 24.5rem;
min-width: 294px;
.contact {
.n-item {
margin-bottom: 0.6rem;
margin-bottom: 7.2px;
}
.phone {
......@@ -46,7 +46,7 @@
}
&:first-child {
margin-bottom: 2rem;
margin-bottom: 24px;
}
}
}
......@@ -59,7 +59,7 @@
.n-item {
cursor: pointer;
min-width: 14.75rem;
min-width: 177px;
}
}
......@@ -71,11 +71,11 @@
.public {
position: relative;
text-align: left;
margin-left: 5.32rem;
margin-left: 63.84px;
.qrcode-wrap {
text-align: center;
margin-top: 0.3rem;
margin-top: 3.6px;
.qrcode {
......@@ -83,21 +83,21 @@
}
.c1 {
margin-top: 0.3rem;
margin-top: 3.6px;
}
}
.icon {
margin-top: .75rem;
margin-right: 1rem;
margin-top: 9px;
margin-right: 12px;
display: inline-block;
}
}
// 公共组件
.n-item {
margin-bottom: 2rem;
padding-right: 3rem ;
margin-bottom: 24px;
padding-right: 36px;
color: #dcdddd;
&:first-child {
......@@ -113,7 +113,7 @@
// 版权
.copyright {
color: rgba(179, 177, 168, 0.5);
padding: 1.5rem 0;
padding: 18px 0;
line-height: 1.58;
font-size: $fontSizeSmall;
}
......@@ -135,7 +135,7 @@
.hotline {}
.nav {
margin-top: 2rem;
margin-top: 24px;
display: flex;
.nav-v {
......@@ -155,15 +155,15 @@
.public {
margin: 0;
margin-top: 3rem;
margin-top: 36px;
text-align: left;
min-height: 12rem;
min-height: 144px;
}
}
.copyright {
box-sizing: border-box;
padding-right: 2rem;
padding-right: 24px;
}
}
}
......@@ -204,11 +204,11 @@
.public {
margin: 0;
min-width: 9rem;
min-width: 108px;
.qrcode-wrap {
img {
width: 7rem;
width: 84px;
}
.c1 {
......@@ -219,10 +219,10 @@
// 公共组件
.n-item {
margin-bottom: 2rem;
margin-bottom: 24px;
&:first-child {
margin-bottom: 2rem;
margin-bottom: 24px;
}
}
}
......
@import '@/styles/_support.scss';
$navHei: 7.666667rem;
$navHeiM: 6rem;
$navHei: 92px;
$navHeiM: 72px;
.v-header {
height: $navHei;
......@@ -26,8 +26,8 @@ $navHeiM: 6rem;
}
.logo-img {
margin-right: 3.6rem;
max-width: 17.75rem;
margin-right: 43.2px;
max-width: 213px;
cursor: pointer;
}
......@@ -57,7 +57,7 @@ $navHeiM: 6rem;
.nav-item.link-item {
padding: 0 50px;
height: 5rem;
height: 60px;
}
.nav-item.search {
......@@ -69,7 +69,7 @@ $navHeiM: 6rem;
.lang {
color: $cOrange;
min-width: 8rem;
min-width: 96px;
}
}
}
......@@ -108,7 +108,7 @@ $navHeiM: 6rem;
@media (max-width: 1100px) {
.v-header {
.logo-img {
margin-right: 2rem;
margin-right: 24px;
}
}
......@@ -136,7 +136,7 @@ $navHeiM: 6rem;
.main-nav {}
.logo-img {
max-width: 17.75rem;
max-width: 213px;
margin: 0;
}
......@@ -166,7 +166,7 @@ $navHeiM: 6rem;
height: $navHeight-M;
.logo-img {
width: 15.5rem;
width: 186px;
margin: 0;
}
......
......@@ -23,14 +23,14 @@
.modal {
position: relative;
@extend .bb;
width: 46.25rem;
height: 28.5rem;
border-radius: 1.25rem;
width: 555px;
height: 342px;
border-radius: 15px;
background-color: #ffffff;
padding: 4.5rem 2rem 2.5rem;
padding: 54px 24px 30px;
&-title {
margin-bottom: 3rem;
margin-bottom: 36px;
color: $cOrange;
font-size: $fontSizeTitle;
font-weight: bold;
......@@ -38,11 +38,11 @@
&-icon-wrap {
@extend .fcc;
height: 12rem;
height: 144px;
}
&-content {
margin-top: 1rem;
margin-top: 12px;
color: $cOrange;
font-size: $fontSizeTitle;
font-weight: bold;
......@@ -53,8 +53,8 @@
justify-content: center;
.btn {
@include btc2(12rem, 3.6rem, 16px);
margin: 3rem 1rem 0;
@include btc2(144px, 43.2px, 16px);
margin: 36px 12px 0;
@extend .pointer;
}
}
......@@ -78,17 +78,17 @@
@media (max-width: 768px) {
.modal {
// height: 28.5rem;
width: 90%;
height: auto;
&-title {
margin-bottom: 1rem;
margin-bottom: 12px;
}
&-icon-wrap {
height: 10rem;
img{
height: 120px;
img {
height: 100%;
}
}
......
......@@ -129,7 +129,7 @@ ul{
&-title {}
&-icon-wrap {
height: 10rem;
height: 120px;
img {
height: 100%;
......
......@@ -22,8 +22,8 @@
.modal {
position: relative;
width: 45.5rem;
min-height: 18.25rem;
width: 546px;
min-height: 219px;
border-radius: $borderRadius;
background-color: #ffffff;
......@@ -34,23 +34,23 @@
@include ellipsis(1);
font-size: $fontSizeTitle;
font-weight: bold;
height: 5rem;
line-height: 5rem;
height: 60px;
line-height: 60px;
// font-weight: bold;
background-color: #f2f2f2;
text-align: left;
padding: 0 3rem;
padding: 0 36px;
.close-btn {
position: absolute;
top: 2rem;
right: 2rem;
top: 24px;
right: 24px;
}
}
&-icon-wrap {
@extend .fcc;
height: 12rem;
height: 144px;
}
&-content {
......@@ -58,8 +58,8 @@
@extend .bb;
font-size: $fontSize;
font-weight: bold;
min-height: 13.25rem;
padding: $marginMedium-M 3rem;
min-height: 159px;
padding: $marginMedium-M 36px;
}
&-btn-wrap {
......@@ -67,8 +67,8 @@
justify-content: center;
.btn {
@include btc2(12rem, 3.6rem, 16px);
margin: 3rem 1rem 0;
@include btc2(144px, 43.2px, 16px);
margin: 36px 12px 0;
@extend .pointer;
}
}
......@@ -99,7 +99,7 @@
&-title {}
&-icon-wrap {
height: 10rem;
height: 120px;
img {
height: 100%;
......
......@@ -23,8 +23,8 @@
.modal {
@extend .bb;
position: relative;
width: 45.5rem;
min-height: 23.25rem;
width: 546px;
min-height: 279px;
border-radius: $borderRadius;
background-color: #ffffff;
padding-bottom: $marginMedium-M;
......@@ -37,23 +37,22 @@
@include ellipsis(1);
font-size: $fontSizeTitle;
font-weight: bold;
height: 5rem;
line-height: 5rem;
// font-weight: bold;
height: 60px;
line-height: 60px;
background-color: #f2f2f2;
text-align: left;
padding: 0 3rem;
padding: 0 36px;
.close-btn {
position: absolute;
top: 2rem;
right: 2rem;
top: 24px;
right: 24px;
}
}
&-icon-wrap {
@extend .fcc;
height: 12rem;
height: 144px;
}
&-content {
......@@ -61,8 +60,8 @@
@extend .bb;
font-size: $fontSize;
font-weight: bold;
min-height: 13.25rem;
padding: $marginMedium-M 3rem;
min-height: 159px;
padding: $marginMedium-M 36px;
.upload {
display: flex;
......@@ -72,12 +71,12 @@
&-item {
padding: 0 $marginSmallHalf;
max-width: 15.583333rem ;
max-width: 187px ;
img {
width: 100%;
max-width: 14.75rem;
max-height: 10rem;
max-width: 177px;
max-height: 120px;
}
}
}
......@@ -88,8 +87,8 @@
justify-content: center;
.btn {
@include btc2(12rem, 3.6rem, 16px);
margin: 0 1rem 0;
@include btc2(144px, 43.2px, 16px);
margin: 0 12px 0;
@extend .pointer;
}
}
......@@ -118,7 +117,7 @@
&-title {}
&-icon-wrap {
height: 10rem;
height: 120px;
img {
height: 100%;
......
......@@ -10,7 +10,7 @@
&-item {
@extend .bb;
padding: 0 .8rem;
padding: 0 9.6px;
display: flex;
justify-content: center;
align-items: center;
......@@ -18,7 +18,7 @@
}
span {
margin: 0.4rem 0.7rem;
margin: 4.8px 8.4px;
text-align: center;
}
......@@ -26,8 +26,8 @@
@extend .fcc;
@extend .bb;
padding: 0 4px;
min-width: 2.25rem;
height: 2.5rem;
min-width: 27px;
height: 30px;
border: solid 1px #dcdddd;
text-align: center;
cursor: pointer;
......@@ -52,10 +52,10 @@
.ipt {
@extend .bb;
width: 5rem;
height: 2.5rem;
width: 60px;
height: 30px;
border: solid 1px #dcdddd;
padding: 0 .7rem;
padding: 0 8.4px;
text-align: center;
}
......
......@@ -204,11 +204,11 @@ $borderRadius:6px;
}
.default-mt {
margin-top: 2.2rem;
margin-top: 26.4px;
}
.half-mt {
margin-top: 1rem;
margin-top: 12px;
}
.btn-wrap {
......
......@@ -71,13 +71,13 @@ input {
background: url("~@assets/images/vhis/vhis-btn.png");
background-size: 100% 100%;
background-repeat: no-repeat;
width: 15rem;
height: 2.5rem;
line-height: 2.5rem;
width: 180px;
height: 30px;
line-height: 30px;
color: white;
font-weight: 600;
cursor: pointer;
margin: 2.5rem auto;
margin: 30px auto;
text-align: center;
}
......@@ -140,7 +140,7 @@ input {
margin: 20px auto 0 auto;
select {
padding: 0 1.25rem;
padding: 0 15px;
border: none;
border-bottom: 1px solid #666666;
color: #666666;
......@@ -152,7 +152,7 @@ input {
}
.submit-btn {
margin: 2.5rem auto 1rem;
margin: 30px auto 12px;
}
.flex-top {
......@@ -171,7 +171,7 @@ input {
.check-item {
display: flex;
align-items: center;
margin-right: 2rem;
margin-right: 24px;
margin-bottom: 10px;
span {
......@@ -210,7 +210,7 @@ input {
.tip {
color: $cOrange;
font-size: 1rem;
font-size: 12px;
margin-top: 10px;
text-align: center;
width: 100px;
......@@ -262,17 +262,17 @@ input {
align-items: center;
span {
margin-left: 1.3rem;
margin-left: 15.6px;
}
img {
width: 1.3rem;
width: 15.6px;
}
}
hr {
border-top: 1px solid #eee;
margin-top: 2.5rem;
margin-top: 30px;
}
.tips {
......@@ -285,7 +285,7 @@ input {
}
span {
font-size: 1rem;
font-size: 12px;
margin-left: 10px;
color: $cOrange;
}
......@@ -317,7 +317,7 @@ input {
width: 100%;
border: 1px solid $cOrange !important;
border-radius: 5px;
height: 3rem;
height: 36px;
align-items: center;
padding-left: 10px;
}
......@@ -339,7 +339,7 @@ input {
}
.label:lang(zh) {
letter-spacing: .25rem;
letter-spacing: 3px;
}
......@@ -351,23 +351,23 @@ input {
.ipt {
border: 1px solid $cOrange !important;
border-radius: 5px;
height: 3rem;
height: 36px;
display: flex;
align-items: center;
}
// 长文本
.textarea {
min-height: 8.75rem;
min-height: 105px;
@extend .bb;
padding: .75rem;
padding: 9px;
}
.down-arrow {
z-index: 10;
position: absolute;
top: 1.3rem;
right: 1.2rem;
top: 15.6px;
right: 14.4px;
background-image: url('~@/assets/images/reservation/re-down-arrow-2.png');
background-size: 100% 100%;
width: 7.6px;
......@@ -379,16 +379,16 @@ input {
.validator {
color: $cOrange;
margin-top: 0.5rem;
margin-top: 6px;
position: absolute;
right: 1rem;
right: 12px;
display: flex;
align-items: center;
// bottom: 0;
img {
display: inline-block;
margin-right: 0.4rem;
margin-right: 4.8px;
}
}
}
......@@ -412,7 +412,7 @@ input {
}
.label:lang(zh) {
letter-spacing: .25rem;
letter-spacing: 3px;
}
.date-container {
......@@ -430,7 +430,7 @@ input {
.ipt {
border: 1px solid $cOrange !important;
border-radius: 5px;
height: 3rem;
height: 36px;
display: flex;
align-items: center;
}
......@@ -439,7 +439,7 @@ input {
.ipt2 {
width: 100%;
border-bottom: 1px solid #ccc;
height: 3rem;
height: 36px;
display: flex;
align-items: center;
margin-bottom: 10px;
......@@ -447,16 +447,16 @@ input {
// 长文本
.textarea {
min-height: 8.75rem;
min-height: 105px;
@extend .bb;
padding: .75rem;
padding: 9px;
}
.down-arrow {
z-index: 10;
position: absolute;
top: 1.3rem;
right: 1.2rem;
top: 15.6px;
right: 14.4px;
background-image: url('~@/assets/images/reservation/re-down-arrow-2.png');
background-size: 100% 100%;
width: 7.6px;
......@@ -471,25 +471,25 @@ input {
.notice {
margin-top: 4rem;
margin-top: 48px;
@extend .bb;
padding: 0 1rem;
padding: 0 12px;
&-item {
position: relative;
line-height: 2;
margin-bottom: 1rem;
margin-bottom: 12px;
&-icon {
width: 14px;
position: absolute;
top: .6rem;
top: 7.2px;
}
}
&-item:lang(zh) {
letter-spacing: .25rem;
letter-spacing: 3px;
}
}
......@@ -526,7 +526,7 @@ input {
// @media (max-width: 600px) {
// .reservation-container {
// padding: 32px 2rem 34px 2rem;
// padding: 32px 24px 34px 24px;
// }
// .form {
......@@ -582,6 +582,6 @@ input {
// @media (max-width: 400px) {
// .reservation-container-2 {
// // padding: 20px 1rem;
// // padding: 20px 12px;
// }
// }
......
......@@ -24,7 +24,7 @@ li:last-child {
.content {
padding-bottom: 78px;
min-height: 50rem;
min-height: 600px;
font-size: $articleNormal;
}
......
......@@ -2,12 +2,12 @@
.content {
position: relative;
padding-bottom: 2.5rem;
padding-bottom: 30px;
// font-family: MicrosoftYaHei;
}
.top-space {
height: 2.5rem;
height: 30px;
}
.box {
......@@ -40,7 +40,7 @@
cursor: pointer;
.icon-wrap {
height: 11rem;
height: 132px;
@extend .fcc;
}
......@@ -66,7 +66,7 @@
.product {
&-item {
width: 45%;
height: 15rem;
height: 180px;
}
}
......
......@@ -18,13 +18,13 @@ input {
background: url("~@assets/images/vhis/vhis-btn.png");
background-size: 100% 100%;
background-repeat: no-repeat;
width: 15rem;
height: 2.5rem;
line-height: 2.5rem;
width: 180px;
height: 30px;
line-height: 30px;
color: white;
font-weight: 600;
cursor: pointer;
margin: 2.5rem auto;
margin: 30px auto;
text-align: center;
}
......@@ -34,7 +34,7 @@ input {
border-radius: 8px;
border: solid 1px $cOrange;
background-color: #ffffff;
padding: 32px 10rem 34px 10rem;
padding: 32px 120px 34px 120px;
min-height: 500px;
.title {
......@@ -82,7 +82,7 @@ input {
border-radius: 8px;
border: solid 1px $cOrange;
background-color: #ffffff;
padding: 20px 10rem 34px 10rem;
padding: 20px 120px 34px 120px;
.title {
font-size: 16px;
......@@ -91,7 +91,7 @@ input {
margin: 20px auto 0 auto;
select {
padding: 0 1.25rem;
padding: 0 15px;
border: none;
border-bottom: 1px solid #666666;
color: #666666;
......@@ -103,7 +103,7 @@ input {
}
.submit-btn {
margin: 2.5rem auto 1rem;
margin: 30px auto 12px;
}
.flex-top {
......@@ -122,7 +122,7 @@ input {
.check-item {
display: flex;
align-items: center;
margin-right: 2rem;
margin-right: 24px;
margin-bottom: 10px;
span {
......@@ -161,7 +161,7 @@ input {
.tip {
color: $cOrange;
font-size: 1rem;
font-size: 12px;
margin-top: 10px;
text-align: center;
width: 100px;
......@@ -213,17 +213,17 @@ input {
align-items: center;
span {
margin-left: 1.3rem;
margin-left: 15.6px;
}
img {
width: 1.3rem;
width: 15.6px;
}
}
hr {
border-top: 1px solid #eee;
margin-top: 2.5rem;
margin-top: 30px;
}
.tips {
......@@ -236,7 +236,7 @@ input {
}
span {
font-size: 1rem;
font-size: 12px;
margin-left: 10px;
color: $cOrange;
}
......@@ -268,7 +268,7 @@ input {
width: 100%;
border: 1px solid $cOrange !important;
border-radius: 5px;
height: 3rem;
height: 36px;
align-items: center;
padding-left: 10px;
}
......@@ -289,7 +289,7 @@ input {
}
.label:lang(zh) {
letter-spacing: .25rem;
letter-spacing: 3px;
}
.ipt-wrap {
......@@ -300,23 +300,23 @@ input {
.ipt {
border: 1px solid $cOrange !important;
border-radius: 5px;
height: 3rem;
height: 36px;
display: flex;
align-items: center;
}
// 长文本
.textarea {
min-height: 8.75rem;
min-height: 105px;
@extend .bb;
padding: .75rem;
padding: 9px;
}
.down-arrow {
z-index: 10;
position: absolute;
top: 1.3rem;
right: 1.2rem;
top: 15.6px;
right: 14.4px;
background-image: url('~@/assets/images/reservation/re-down-arrow-2.png');
background-size: 100% 100%;
width: 7.6px;
......@@ -328,16 +328,16 @@ input {
.validator {
color: $cOrange;
margin-top: 0.5rem;
margin-top: 6px;
position: absolute;
right: 1rem;
right: 12px;
display: flex;
align-items: center;
// bottom: 0;
img {
display: inline-block;
margin-right: 0.4rem;
margin-right: 4.8px;
}
}
}
......@@ -361,7 +361,7 @@ input {
}
.label:lang(zh) {
letter-spacing: .25rem;
letter-spacing: 3px;
}
.date-container {
......@@ -379,7 +379,7 @@ input {
.ipt {
border: 1px solid $cOrange !important;
border-radius: 5px;
height: 3rem;
height: 36px;
display: flex;
align-items: center;
}
......@@ -388,7 +388,7 @@ input {
.ipt2 {
width: 100%;
border-bottom: 1px solid #ccc;
height: 3rem;
height: 36px;
display: flex;
align-items: center;
margin-bottom: 10px;
......@@ -396,16 +396,16 @@ input {
// 长文本
.textarea {
min-height: 8.75rem;
min-height: 105px;
@extend .bb;
padding: .75rem;
padding: 9px;
}
.down-arrow {
z-index: 10;
position: absolute;
top: 1.3rem;
right: 1.2rem;
top: 15.6px;
right: 14.4px;
background-image: url('~@/assets/images/reservation/re-down-arrow-2.png');
background-size: 100% 100%;
width: 7.6px;
......@@ -420,19 +420,19 @@ input {
.notice {
margin-top: 4rem;
margin-top: 48px;
@extend .bb;
padding: 0 1rem;
padding: 0 12px;
&-item {
position: relative;
line-height: 2;
margin-bottom: 1rem;
margin-bottom: 12px;
&-icon {
width: 14px;
position: absolute;
top: .6rem;
top: 7.2px;
}
}
......@@ -443,13 +443,13 @@ input {
@media (max-width: 1200px) {
.mobile-margin {
margin-top: 2.5rem;
margin-top: 30px;
}
}
@media (max-width: 1000px) {
.reservation-container-2 {
padding: 20px 2rem 34px 2rem;
padding: 20px 24px 34px 24px;
}
.form {
......@@ -475,7 +475,7 @@ input {
@media (max-width: 600px) {
.reservation-container {
padding: 32px 2rem 34px 2rem;
padding: 32px 24px 34px 24px;
}
.form {
......@@ -531,6 +531,6 @@ input {
@media (max-width: 400px) {
.reservation-container-2 {
padding: 20px 1rem;
padding: 20px 12px;
}
}
......
......@@ -27,7 +27,7 @@ export default {
methods: {
downloadHandle(item) {
if (item.download) {
location.href = item.download;
window.open(item.download);
}
},
initData() { }
......
......@@ -10,14 +10,14 @@
@include border-top-radius(8px);
display: flex;
align-items: center;
height: 3.25rem;
height: 39px;
color: #ffffff;
font-weight: bold;
&-item {}
}
&-header:lang(zh) {
letter-spacing: .1rem;
letter-spacing: 1.2px;
}
&-content {
......@@ -26,7 +26,7 @@
text-align: center;
border: solid 1px #f2f2f2;
@include border-bottom-radius(8px);
$gridHei: 5.25rem;
$gridHei: 63px;
&-item {
position: relative;
......@@ -38,11 +38,11 @@
.hl {
position: absolute;
width: 6.45rem;
width: 77.4px;
height: 1px;
background-color: #dcdddd;
bottom: 0;
left: 1rem;
left: 12px;
}
.grid {
......@@ -55,7 +55,7 @@
.v-line {
position: absolute;
width: 1px;
height: 2.25rem;
height: 27px;
background-color: #dcdddd;
right: 0;
top: 0;
......@@ -64,7 +64,7 @@
}
.icon {
margin-right: .916667rem;
margin-right: 11px;
}
}
......@@ -85,7 +85,7 @@
.w4 {
.h-line {
width: 12rem;
width: 144px;
}
color: $cOrange;
......@@ -98,20 +98,20 @@
}
.w1 {
width: 8.75rem; // 105
width: 105px;
}
.w2 {
width: 29rem; // 348
width: 348px;
}
.w3 {
width: 29.75rem; // 357
width: 357px;
}
.w4 {
width: 12rem;
width: 13.75rem;
width: 144px;
width: 165px;
}
}
......
@import '@/styles/_support.scss';
.top-space {
// height: 4.25rem;
// height: 51px;
}
.reservation-container {
......@@ -24,7 +24,7 @@
color: #f05a23;
display: flex;
align-items: center;
margin-bottom: .7rem;
margin-bottom: 8.4px;
.icon {
width: 26px;
......@@ -32,7 +32,7 @@
}
img {
height: 1rem;
height: 12px;
}
}
......@@ -43,29 +43,29 @@
.ipt {}
.name-ipt {
width: 18rem;
width: 216px;
}
.phone-ipt {
width: 18rem;
width: 216px;
}
.mail-ipt {}
// 长文本
.textarea {
min-height: 8.75rem;
border-radius: 1rem;
min-height: 105px;
border-radius: 12px;
@extend .bb;
padding: .75rem;
padding: 9px;
}
.down-arrow {
position: absolute;
top: 2.2rem;
right: 2rem;
top: 26.4px;
right: 24px;
background-image: url('~@/assets/images/reservation/re-down-arrow.png');
width: 1rem;
width: 12px;
height: 8px;
pointer-events: none;
cursor: default;
......@@ -74,16 +74,16 @@
.validator {
color: $cOrange;
margin-top: 0.5rem;
margin-top: 6px;
position: absolute;
right: 1rem;
right: 12px;
display: flex;
align-items: center;
// bottom: 0;
img {
display: inline-block;
margin-right: 0.4rem;
margin-right: 4.8px;
}
}
}
......@@ -91,11 +91,11 @@
// 不换行
&-item2 {
display: flex;
margin-bottom: 2.25rem;
margin-bottom: 27px;
.label {
min-width: 12.833333rem;
height: 2.5rem;
min-width: 154px;
height: 30px;
}
.cont {
......@@ -103,14 +103,14 @@
display: flex;
.boo-btn {
width: 5.25rem;
height: 2.5rem;
line-height: 2.5rem;
width: 63px;
height: 30px;
line-height: 30px;
border: solid 1px #dcdddd;
background-color: #ffffff;
border-radius: 2.5rem;
border-radius: 30px;
text-align: center;
margin: 0 0.6rem;
margin: 0 7.2px;
}
.active {
......@@ -131,7 +131,7 @@
flex-wrap: wrap;
.validator {
margin-top: 3rem;
margin-top: 36px;
}
.label {
......@@ -141,14 +141,14 @@
.ipt-wrap {
position: relative;
// width: 50%;
margin-left: 1.75rem;
margin-left: 21px;
input {
color: #4c4948;
}
input:lang(zh) {
letter-spacing: .116667rem;
letter-spacing: 1.4px;
}
}
......@@ -166,7 +166,7 @@
.mt8 {
margin-top: 8px;
margin-left: 10rem;
margin-left: 120px;
}
}
......@@ -184,19 +184,19 @@
}
.notice {
margin-top: 4rem;
margin-top: 48px;
@extend .bb;
padding: 0 1rem;
padding: 0 12px;
&-item {
position: relative;
line-height: 2;
margin-bottom: 1rem;
margin-bottom: 12px;
&-icon {
position: absolute;
width: 14px;
top: .6rem;
top: 7.2px;
}
}
......@@ -206,18 +206,18 @@
}
.submit-btn {
width: 13.583333rem;
width: 163px;
height: 49px;
margin: 2.5rem auto 0;
margin: 30px auto 0;
line-height: 49px;
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);
background-image: linear-gradient(to bottom, #ec6429, #ec6429), linear-gradient(to top, #000000, #ffffff);
text-align: center;
font-size: 1.291667rem;
font-size: 15.5px;
color: #ffffff;
border-radius: 3.5rem;
border-radius: 42px;
cursor: pointer;
border: none;
color: #ffffff;
......@@ -229,7 +229,7 @@
}
.submit-btn:lang(zh) {
letter-spacing: .129167rem;
letter-spacing: 1.55px;
}
@media (max-width: 768px) {
......
......@@ -3,13 +3,13 @@
.contact-us-container {
.info-item {
padding-right: 1.25rem;
padding-right: 15px;
}
}
.border {
@extend .bb;
padding: 3.5rem 4.0rem 2rem 4.5rem;
padding: 42px 48px 24px 54px;
min-height: 490px;
border-radius: $borderRadius;
border: solid 1px #f2f2f2;
......@@ -23,7 +23,7 @@
&-item {
font-size: $fontSize;
margin-bottom: 4.416667rem;
margin-bottom: 50px;
@extend .text-jtf;
&-tit {
......@@ -35,7 +35,7 @@
height: 34px;
.icon-wrap {
margin-right: .75rem;
margin-right: 9px;
}
}
......@@ -52,23 +52,23 @@
ul {
list-style-type: none;
margin-top: 1.5rem;
margin-top: 18px;
}
li {
// @extend .bb;
background-image: url('~@assets/images/payment-type/icon-li.png');
background-repeat: no-repeat;
background-position: 0rem .5rem;
padding: 0 1rem;
margin: .6rem 0;
background-position: 0px 6px;
padding: 0 12px;
margin: 7.2px 0;
}
}
.info2 {
.info-item {
@extend .bb;
padding-right: 2rem;
margin-bottom: 1rem;
padding-right: 24px;
margin-bottom: 12px;
}
}
......
import { mapState } from "vuex";
import api from '@/api/api'
import {
httpGet,
httpPost
} from '@/api/fetch-api.js'
import Auth from '@components/auth/auth.vue';
import PolicyHeadList from "./policy-head-list.vue";
import { formatMoney, getInsuredPeriod, getBenefitType, getPayPeriod, getPayType, getMoneyName, getPayMode, getPolicyName } from "@/utils/biz.js";
export default {
name: "InsuranceQuery",
data() {
return {
showForm: false,
dataForm: null,
insuranceForm: {
f1: true,
f2: true,
f3: true,
f4: true,
f5: true,
},
policy: null,
}
},
methods: {
handlePolicySelect(data) {
let submitData = {
policyId: data[0].id,
policyCode: data[0].code
}
this.policy = submitData;
this.dataForm = null;
httpPost({ url: api.policyDetail, sid: true, data: submitData }).then(res => {
this.dataForm = res;
if (this.dataForm.clientNameCn) {
let userInfo = JSON.parse(JSON.stringify(this.userInfo));
userInfo.name = this.dataForm.clientNameCn
this.$store.commit("SET_USER_INFO", userInfo);
}
}).catch(err => {
if (err.code == 404) {
this.$refs.auth.noAuth();
}
});
},
toMoneyCode(moneyCode) {
switch (moneyCode) {
case "USD":
return "$";
default:
return "HK$";
}
},
toMoneyCodeName(moneyCode) {
switch (moneyCode) {
case "USD":
return "美元";
default:
return "港币";
}
},
toModifyPage(type, toContact) {
// 1=受保人；2=投保人
if (!this.policy || !this.dataForm) {
return;
}
let data = encodeURIComponent(JSON.stringify({ id: this.policy.policyId, code: this.policy.policyCode }));
sessionStorage.setItem("_hklife_policy", data);
if (type == 1) {
this.$router.push({ path: "/custom/service", query: { q: "m43", u: 2 } });
} else {
if (1 == toContact) {
this.$router.push({ path: "/custom/service", query: { q: "m42" } });
} else {
this.$router.push({ path: "/custom/service", query: { q: "m43", u: 1 } });
}
}
},
formatMoney(s, t) {
if (typeof t == "undefined") {
t = 1;
}
return formatMoney(s, t);
},
// 保障年限，保n年
formatInsuredPeriod(t, v) {
return getInsuredPeriod(this.$i18n.locale, t, v);
},
formatBenefitType(t) {
return getBenefitType(this.$i18n.locale, t);
},
// 缴费方式，交n年
formatPayPeriod(t, v) {
return getPayPeriod(this.$i18n.locale, t, v);
},
// 支付方式，支票xxx
formatPayMode(v) {
return getPayMode(this.$i18n.locale, v);
},
// 缴费频率
formatPayType(v) {
return getPayType(this.$i18n.locale, v);
},
// 钱的名字
formatMoneyName(c) {
return getMoneyName(this.$i18n.locale, c);
},
formatPanduPayPeriod(y, p) {
switch (this.$i18n.locale) {
case "zh":
case "tc":
return "第" + y + "年第" + p + "期";
default:
return this.formatNumber(p) + " payment in " + this.formatNumber(y) + " year";
}
},
formatPolicyName(c, n) {
return getPolicyName(this.$i18n.locale, c, c);
},
formatNumber(p) {
let pmod = p % 4;
let pstr = p + "";
switch (pmod) {
case 0:
pstr += "th";
break;
case 1:
pstr += "st";
break;
case 2:
pstr += "nd";
break;
case 3:
pstr += "rd";
break;
default:
pstr += "th";
break;
}
return pstr;
},
userLogout() {
this.showForm = false;
},
userLogin(data) {
this.showForm = true;
}
},
computed: {
...mapState({
userInfo: state => state.userInfo
}),
i18n() {
return this.$i18n.messages && this.$i18n.locale ? this.$i18n.messages[this.$i18n.locale] : {};
},
},
components: {
Auth,
PolicyHeadList,
},
}
@import '@/styles/_support.scss';
.container{
// font-size: 18px;
}
.cell-group {
margin-bottom: 12px;
&:last-child {
margin-bottom: 0;
}
div {
color: #4c4948;
}
.w1 {
width: 240px;
text-align: center;
}
.w2 {
width: 150px;
text-align: center;
}
.table-header {
height: 39px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
background-color: #f2f2f2;
display: flex;
align-items: center;
.normal-header {
@extend .bb;
padding: 0 32px;
width: 100%;
margin: auto;
display: flex;
justify-content: space-between;
align-items: center;
.title {
font-weight: bold;
color: #575453;
}
.guide {
transition: all 0.5s;
cursor: pointer;
width: 12px;
height: 8px;
background: url("~@/assets/images/insurance-query/triangle-down.png") no-repeat center center;
background-size: 100% 100%;
}
.rotate180 {
transform: rotate(180deg);
transition: all 0.5s;
}
}
}
.table-content {
height: auto;
// display: inline-block;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
border-left: solid 1px #f2f2f2;
border-right: solid 1px #f2f2f2;
border-bottom: solid 1px #f2f2f2;
padding: 0 32px;
max-height: 500px;
transition: max-height ease-out 0.3s !important;
overflow: scroll;
.data-line {
height: 50px;
margin: auto;
display: flex;
justify-content: space-between;
align-items: center;
.td {
display: flex;
justify-content: center;
align-items: center;
}
.cell1 {
width: 98%;
display: flex;
justify-content: space-between;
margin: auto;
div:first-child{
text-align: left;
min-width: 80px !important;
}
}
.cell1:nth-child(1){
text-align: right !important;
}
.separator-v {
height: 30px;
width: 2px;
background-color: #f2f2f2;
margin: 0 11px;
}
}
.label span {
color: #f05a23;
margin-left: 7px;
cursor: pointer;
text-decoration: underline;
}
.separator-h {
width: 100%;
height: 1px;
background-color: #f2f2f2;
}
}
.orange {
background-color: #f05a23 !important;
div {
color: #ffffff;
}
}
.hide {
max-height: 0;
border-bottom: none;
}
}
.cell-between {
.data-line {
.td {
&:first-child {
justify-content: flex-start;
}
&:last-child {
justify-content: flex-end;
}
}
}
}
.icon-download {
margin: 0 12px;
}
.icon-check {
height: 17px;
margin: 0 12px;
}
@media (max-width: 1200px) {
.container {
width: 1200px;
display: -webkit-box;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
width: 92vw;
}
}
// .container::-webkit-scrollbar {
// display: none;
// }
// .container{
// -ms-overflow-style: none;
// }
// .list-container::-webkit-scrollbar {
// display: none;
// }
// .list-container{
// -ms-overflow-style: none;
// }
// .table-content::-webkit-scrollbar {
// display: none;
// }
// .table-content{
// -ms-overflow-style: none;
// }
<template>
<div class="container">
<!-- 登陆/注册提示 -->
<auth @onLogin="userLogin" @onLogout="userLogout" :checkProfile="true" :tipModel="'m1'" ref="auth"></auth>
<div v-if="showForm">
<!-- 保单列表 -->
<policy-head-list :multiSelectable="false" @onSelect="handlePolicySelect"></policy-head-list>
<!-- 保单详情 -->
<template v-if="dataForm">
<div class="cell-group">
<div class="table-header">
<div class="normal-header">
<div class="title">{{$t('customService.insuranceQuery.t2Title')}}</div>
<div class="guide" :class="{rotate180 : !insuranceForm.f1}" @click="insuranceForm.f1 = !insuranceForm.f1"></div>
</div>
</div>
<div class="table-content" :class="{hide : !insuranceForm.f1}">
<div class="data-line">
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t2n1')}}</div>
<div class="label">{{formatPolicyName(dataForm.productCode, dataForm.productName)}}</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t2n2')}}</div>
<div class="label">{{dataForm.moneyMark}} {{formatMoney(dataForm.amount,0)}}</div>
</div>
</div>
<div class="separator-h"></div>
<div class="data-line">
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t2n9k')}}</div>
<div class="label">{{$t('customService.insuranceQuery.t2n9v')}}</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t2n3')}}</div>
<div class="label">{{dataForm.activeDate?dataForm.activeDate.split(" ")[0]:""}}</div>
</div>
</div>
<div class="separator-h"></div>
<div class="data-line">
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t2n4')}}</div>
<div class="label">{{formatInsuredPeriod(dataForm.periodType,dataForm.periodValue)}}</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t2n5')}}
<span @click="toModifyPage(1)">{{$t('customService.insuranceQuery.modify')}}</span>
</div>
<div class="label">{{dataForm.insuredNameCn}}</div>
</div>
</div>
<div class="separator-h"></div>
<div class="data-line">
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t2n6')}}
<span @click="toModifyPage(1)">{{$t('customService.insuranceQuery.modify')}}</span>
</div>
<div class="label">{{dataForm.insuredNameEn}}</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t2n7')}}</div>
<div class="label">{{dataForm.insuredBirthday?dataForm.insuredBirthday.split(" ")[0]:""}}</div>
</div>
</div>
<div class="separator-h"></div>
<div class="data-line">
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t2n8')}}
<span @click="toModifyPage(1)">{{$t('customService.insuranceQuery.modify')}}</span>
</div>
<div class="label">{{dataForm.insuredIdNumber}}</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label"></div>
<div class="label"></div>
</div>
</div>
</div>
</div>
<div class="cell-group">
<div class="table-header">
<div class="normal-header">
<div class="title">{{$t('customService.insuranceQuery.t3Title')}}</div>
<div class="guide" :class="{rotate180 : !insuranceForm.f2}" @click="insuranceForm.f2 = !insuranceForm.f2"></div>
</div>
</div>
<div class="table-content" :class="{hide : !insuranceForm.f2}">
<div class="data-line">
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t3n1')}}
<span @click="toModifyPage(2)">{{$t('customService.insuranceQuery.modify')}}</span>
</div>
<div class="label">{{dataForm.clientNameCn}}</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t3n2')}}
<span @click="toModifyPage(2)">{{$t('customService.insuranceQuery.modify')}}</span>
</div>
<div class="label">{{dataForm.clientNameEn}}</div>
</div>
</div>
<div class="separator-h"></div>
<div class="data-line">
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t3n3')}}</div>
<div class="label">{{dataForm.clientBirthday?dataForm.clientBirthday.split(" ")[0]:""}}</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t3n4')}}
<span @click="toModifyPage(2)">{{$t('customService.insuranceQuery.modify')}}</span>
</div>
<div class="label">{{dataForm.clientIdNumber}}</div>
</div>
</div>
<div class="separator-h"></div>
<div class="data-line">
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t3n5')}}
<span @click="toModifyPage(2,1)">{{$t('customService.insuranceQuery.modify')}}</span>
</div>
<div class="label"> {{dataForm.clientContactAddress}}</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t3n6')}}
<span @click="toModifyPage(2,1)">{{$t('customService.insuranceQuery.modify')}}</span>
</div>
<div class="label"> {{dataForm.clientLivingAddress}}</div>
</div>
</div>
<div class="separator-h"></div>
<div class="data-line">
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t3n7')}}
<span @click="toModifyPage(2,1)">{{$t('customService.insuranceQuery.modify')}}</span>
</div>
<div class="label">{{dataForm.clientMobileNo}}</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t3n8')}}
<span @click="toModifyPage(2,1)">{{$t('customService.insuranceQuery.modify')}}</span>
</div>
<div class="label">{{dataForm.clientEmail}}</div>
</div>
</div>
</div>
</div>
<div class="cell-group cell-between">
<div class="table-header">
<div class="normal-header">
<div class="title">{{$t('customService.insuranceQuery.t4Title')}}</div>
<div class="guide" :class="{rotate180 : !insuranceForm.f3}" @click="insuranceForm.f3 = !insuranceForm.f3"></div>
</div>
</div>
<div class="table-content" :class="{hide : !insuranceForm.f3}">
<div class="data-line">
<div class="td w2">{{$t('customService.insuranceQuery.t4NameCn')}}</div>
<div class="td w2">{{$t('customService.insuranceQuery.t4NameEn')}}</div>
<div class="td w2">{{$t('customService.insuranceQuery.t4Relation')}}</div>
<div class="td w2">{{$t('customService.insuranceQuery.t4Allocation')}}</div>
</div>
<div class="separator-h"></div>
<div v-for="(item,index) in dataForm.benefitList" :key="index">
<div class="data-line">
<div class="td w2">{{item.name}}</div>
<div class="td w2">{{item.nameEn}}</div>
<div class="td w2">{{formatBenefitType(item.relationshipWithLA)}}</div>
<div class="td w2">{{item.benefitRate}}</div>
</div>
<div class="separator-h" v-if="index < dataForm.benefitList.length - 1"></div>
</div>
</div>
</div>
<div class="cell-group">
<div class="table-header">
<div class="normal-header">
<div class="title">{{$t('customService.insuranceQuery.t5Title')}}</div>
<div class="guide" :class="{rotate180 : !insuranceForm.f4}" @click="insuranceForm.f4 = !insuranceForm.f4"></div>
</div>
</div>
<div class="table-content" :class="{hide : !insuranceForm.f4}">
<div class="data-line">
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t5PaymentPeriod')}}</div>
<div class="label">{{formatPayPeriod(dataForm.payPeriodType,dataForm.payPeriodValue)}}</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t5PaymentMethod')}}</div>
<div class="label">{{formatPayMode(dataForm.payMode)}}</div>
</div>
</div>
<div class="separator-h"></div>
<div class="data-line">
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t5PaymentCurrency')}}</div>
<div class="label">{{formatMoneyName(dataForm.moneyId)}}</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t5CurrentPremium')}}</div>
<div class="label">{{dataForm.moneyMark}} {{formatMoney(dataForm.premium)}}</div>
</div>
</div>
<div class="separator-h"></div>
<div class="data-line">
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t5PaymentBank')}}</div>
<div class="label">{{dataForm.bankName}}</div>
</div>
<div class="separator-v"></div>
<div class="cell1">
<div class="label">{{$t('customService.insuranceQuery.t5PaymentAccount')}}</div>
<div class="label">{{dataForm.bankAccount}}</div>
</div>
</div>
<div class="separator-h"></div>
</div>
</div>
<div class="cell-group cell-between">
<div class="table-header">
<div class="normal-header">
<div class="title">{{$t('customService.insuranceQuery.t6Title')}}</div>
<div class="guide" :class="{rotate180 : !insuranceForm.f5}" @click="insuranceForm.f5 = !insuranceForm.f5"></div>
</div>
</div>
<div class="table-content" :class="{hide : !insuranceForm.f5}">
<div class="data-line">
<div class="td w2">{{$t('customService.insuranceQuery.t6PaymentPeriod')}}</div>
<div class="td w2">{{$t('customService.insuranceQuery.t6PaymentMethod')}}</div>
<div class="td w2">{{$t('customService.insuranceQuery.t6ClosingDate')}}</div>
<div class="td w2">{{$t('customService.insuranceQuery.t6PaymentAmount')}}</div>
</div>
<div class="separator-h"></div>
<div v-for="(item,index) in dataForm.pandupList" :key="index">
<div class="data-line">
<div class="td w2">{{formatPanduPayPeriod(item.policyYear,item.policyPeriod)}}</div>
<div class="td w2">{{formatPayMode(dataForm.payMode)}}</div>
<div class="td w2">{{item.receiptDate?item.receiptDate.split(" ")[0]:""}}</div>
<div class="td w2">{{dataForm.moneyMark}} {{formatMoney(item.totalPremium)}}</div>
</div>
<div class="separator-h" v-if="index < dataForm.pandupList.length - 1"></div>
</div>
</div>
</div>
</template>
</div>
</div>
</template>
<script src="./insurance-query.js"></script>
<style lang="scss" scoped>
@import "./insurance-query.scss";
</style>
/**
* 页面描述:FAQ
* 内容从CMS中取
*/
import api from '@/api/api'
import {
httpGet,
httpPost
} from '@/api/fetch-api.js'
export default {
data() {
return {
key: 'value',
dataList: [{
q: "我可以更改平安•傳家福的身故賠償支付方式嗎?",
a: "答: 於第一保單週年日後，您可填妥<保單服務申請書>並遞交給我們申請更改身故賠償支付方式。這項表格可於我們的官網下載。",
}]
}
},
components: {},
computed: {
locale() {
return this.$i18n.locale || 'tc';
},
i18n() {
return this.$i18n.messages && this.$i18n.locale ? this.$i18n.messages[this.$i18n.locale] : {};
},
},
methods: {
downloadHandle(item) {
if (item.download) {
window.open(item.download);
}
},
initData() {}
},
mounted() {},
created() {}
}
@import '@/styles/_support.scss';
.container {
// margin-top: -48px;
.title {
text-align: center;
font-size: $articleTitleLarge;
font-weight: bold;
}
.title:lang(zh) {
letter-spacing: 3.65px;
}
.desc {
margin-top: 28px;
font-size: 22px;
&-item {
@extend .bb;
padding: 40px 0 42px;
border-bottom: solid 2px #eaebeb;
.question {
font-weight: bold;
}
.answer {
margin-top: 12px;
}
}
&-item:lang(zh) {
letter-spacing: 2.2px;
}
}
}
@media (max-width: 1200px) {
.container {
width: 92vw;
}
}
<template>
<div class="container ">
<div class="top-space"></div>
<div class="title">
常见问题
</div>
<div class="desc">
<!-- <div class="desc-item" v-for="item in dataList" :key="item.id">
<div class="question">{{ item.q }}</div>
<div class="answer">{{ item.a }}</div>
</div> -->
<div class="desc-item" v-for="item in 8" :key="item.id">
<div class="question">{{ dataList[0].q }}</div>
<div class="answer">{{ dataList[0].a }}</div>
</div>
</div>
</div>
</template>
<script src="./faq.js"></script>
<style lang="scss" scoped>
@import "./faq.scss";
</style>
@import '@/styles/_support.scss';
.container{
// font-size: 18px;
}
.cell-group {
margin-bottom: 1rem;
margin-bottom: 12px;
&:last-child {
margin-bottom: 0;
......@@ -12,20 +16,17 @@
}
.w1 {
// width: 10rem;
width: 20rem;
width: 240px;
text-align: center;
}
.w2 {
// width: 6.25rem;
width: 12.5rem;
width: 150px;
text-align: center;
}
.table-header {
// width: 64.166667rem;
height: 3.25rem;
height: 39px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
background-color: #f2f2f2;
......@@ -33,9 +34,8 @@
align-items: center;
.normal-header {
// width: 58.833333rem;
@extend .bb;
padding: 0 2.75rem;
padding: 0 32px;
width: 100%;
margin: auto;
display: flex;
......@@ -50,7 +50,7 @@
.guide {
transition: all 0.5s;
cursor: pointer;
width: 1rem;
width: 12px;
height: 8px;
background: url("~@/assets/images/insurance-query/triangle-down.png") no-repeat center center;
background-size: 100% 100%;
......@@ -64,7 +64,6 @@
}
.table-content {
// width: 64.166667rem;
height: auto;
// display: inline-block;
......@@ -73,13 +72,13 @@
border-left: solid 1px #f2f2f2;
border-right: solid 1px #f2f2f2;
border-bottom: solid 1px #f2f2f2;
padding: 0 2.75rem;
max-height: 41.666667rem;
padding: 0 32px;
max-height: 500px;
transition: max-height ease-out 0.3s !important;
overflow: scroll;
.data-line {
height: 4.416667rem;
height: 50px;
margin: auto;
display: flex;
justify-content: space-between;
......@@ -108,17 +107,17 @@
}
.separator-v {
height: 2.5rem;
height: 30px;
width: 2px;
background-color: #f2f2f2;
margin: 0 .916667rem;
margin: 0 11px;
}
}
.label span {
color: #f05a23;
margin-left: .583333rem;
margin-left: 7px;
cursor: pointer;
text-decoration: underline;
}
......@@ -145,8 +144,6 @@
}
.cell-between {
.data-line {
.td {
......@@ -163,12 +160,12 @@
}
.icon-download {
margin: 0 1rem;
margin: 0 12px;
}
.icon-check {
height: 1.4rem;
margin: 0 1rem;
height: 17px;
margin: 0 12px;
}
@media (max-width: 1200px) {
......@@ -181,26 +178,27 @@
}
}
.container::-webkit-scrollbar {
display: none;
}
// .container::-webkit-scrollbar {
// display: none;
// }
.container{
-ms-overflow-style: none;
}
// .container{
// -ms-overflow-style: none;
// }
.list-container::-webkit-scrollbar {
display: none;
}
// .list-container::-webkit-scrollbar {
// display: none;
// }
.list-container{
-ms-overflow-style: none;
}
// .list-container{
// -ms-overflow-style: none;
// }
.table-content::-webkit-scrollbar {
display: none;
}
// .table-content::-webkit-scrollbar {
// display: none;
// }
// .table-content{
// -ms-overflow-style: none;
// }
.table-content{
-ms-overflow-style: none;
}
......
<template>
<div class="container">
<!-- 登陆/注册提示 -->
<auth @onLogin="userLogin" @onLogout="userLogout" :checkProfile="true" :tipModel="'m1'" ref="auth"></auth>
<div v-if="showForm">
<!-- 保单列表 -->
<policy-head-list :multiSelectable="false" @onSelect="handlePolicySelect"></policy-head-list>
<!-- 保单详情 -->
<template v-if="dataForm">
<div class="cell-group">
<div class="table-header">
<div class="normal-header">
......@@ -253,9 +256,7 @@
<div class="separator-h"></div>
<div v-for="(item,index) in dataForm.pandupList" :key="index">
<div class="data-line">
<!-- <div class="td w2">{{item.paidPeriod}}</div> -->
<div class="td w2">{{formatPanduPayPeriod(item.policyYear,item.policyPeriod)}}</div>
<!-- <div class="td w2">{{formatPayType(item.payTypeValue)}}</div> -->
<div class="td w2">{{formatPayMode(dataForm.payMode)}}</div>
<div class="td w2">{{item.receiptDate?item.receiptDate.split(" ")[0]:""}}</div>
<div class="td w2">{{dataForm.moneyMark}} {{formatMoney(item.totalPremium)}}</div>
......@@ -265,9 +266,6 @@
</div>
</div>
</template>
<template v-else>
</template>
</div>
</div>
</template>
......
......@@ -3,7 +3,7 @@
.content {}
.top-space {
height: 2.25rem;
height: 27px;
}
.payment {
......@@ -15,22 +15,22 @@
&-item {
@extend .pointer;
@include border-top-radius(.5rem);
@include border-top-radius(6px);
display: flex;
justify-content: center;
align-items: center;
height: 4.75rem;
height: 57px;
background-color: #f2f2f2;
padding: 0 20px;
margin-right: $marginSmall;
min-width: 10rem;
min-width: 120px;
&-icon {
margin-right: 0.6rem;
margin-right: 7.2px;
img {
width: 2.4rem;
width: 28.8px;
}
}
......@@ -53,10 +53,10 @@
&-cont {
@extend .bb;
padding: 4.25rem 2rem $marginMedium-M 2.5rem;
padding: 51px 24px $marginMedium-M 30px;
border: solid 1px #f2f2f2;
background-color: #ffffff;
min-height: 43.75rem;
min-height: 525px;
@include border-bottom-radius(8px);
......
......@@ -29,7 +29,7 @@
color: #f05a23;
display: flex;
align-items: center;
margin-bottom: .7rem;
margin-bottom: 8.4px;
.icon {
width: 26px;
......@@ -37,7 +37,7 @@
}
img {
height: 1rem;
height: 12px;
}
}
......@@ -68,18 +68,18 @@
// 长文本
.textarea {
min-height: 8.75rem;
border-radius: 1rem;
min-height: 105px;
border-radius: 12px;
@extend .bb;
padding: .75rem;
padding: 9px;
}
.down-arrow {
position: absolute;
top: 2.2rem;
right: 2rem;
top: 26.4px;
right: 24px;
background-image: url('~@/assets/images/reservation/re-down-arrow.png');
width: 1rem;
width: 12px;
height: 8px;
pointer-events: none;
cursor: default;
......@@ -94,7 +94,7 @@
.validator {
color: $cOrange;
margin-top: 0.5rem;
margin-top: 6px;
position: absolute;
right: 192px;
display: flex;
......@@ -103,7 +103,7 @@
img {
display: inline-block;
margin-right: 0.4rem;
margin-right: 4.8px;
}
}
}
......@@ -111,7 +111,7 @@
}
.submit-btn {
width: 13.583333rem;
width: 163px;
height: 49px;
margin: 0 auto 0;
line-height: 49px;
......@@ -119,9 +119,9 @@
background-blend-mode: soft-light, ;
background-image: linear-gradient(to top, #000000, #ffffff), linear-gradient(to bottom, #ec6429, #ec6429);
text-align: center;
font-size: 1.291667rem;
font-size: 15.5px;
color: #ffffff;
border-radius: 3.5rem;
border-radius: 42px;
cursor: pointer;
border: none;
color: #ffffff;
......@@ -132,7 +132,7 @@
}
.submit-btn:lang(zh) {
letter-spacing: .129167rem;
letter-spacing: 1.55px;
}
@media (max-width: 1200px) {
......
......@@ -10,7 +10,7 @@
@include border-top-radius(8px);
display: flex;
align-items: center;
height: 3.25rem;
height: 39px;
color: #ffffff;
font-weight: bold;
......@@ -18,7 +18,7 @@
}
&-header:lang(zh) {
letter-spacing: .1rem;
letter-spacing: 1.2px;
}
......@@ -40,7 +40,6 @@
.hl {
position: absolute;
width: 95%;
// width: 77rem;
height: 1px;
background-color: #dcdddd;
bottom: 0;
......@@ -52,13 +51,13 @@
.grid {
position: relative;
padding: 2rem 3rem;
padding: 24px 36px;
background-color: #ffffff;
.v-line {
position: absolute;
width: 1px;
height: 2.25rem;
height: 27px;
background-color: #dcdddd;
right: 0;
top: 0;
......@@ -67,7 +66,7 @@
}
.icon {
margin-right: .25rem;
margin-right: 3px;
display: inline-block;
}
}
......@@ -96,7 +95,7 @@
}
.h-line {
width: 9rem;
width: 108px;
}
}
......@@ -108,19 +107,19 @@
}
.w1 {
width: 13.25rem;
width: 159px;
}
.w2 {
width: 21.5rem;
width: 258px;
}
.w3 {
width: 10.75rem;
width: 129px;
}
.w4 {
width: 15.5rem
width: 186px
}
.w5 {
......@@ -149,11 +148,11 @@
.icon {
display: inline-block;
width: 1rem;
margin-right: .5rem;
width: 12px;
margin-right: 6px;
}
margin-top: 1.25rem;
margin-top: 15px;
}
@media (max-width: 1200px) {
......
@import '@/styles/_support.scss';
.container {
padding-bottom: 2rem;
padding-bottom: 24px;
}
.border {
......@@ -20,30 +20,30 @@
@include border-top-radius(8px);
display: flex;
align-items: center;
height: 3.25rem;
height: 39px;
color: #ffffff;
font-weight: bold;
&-item {
@extend .bb;
padding: 0 2rem;
padding: 0 24px;
}
}
&-header:lang(zh) {
letter-spacing: .1rem;
letter-spacing: 1.2px;
}
}
.form {
@extend .bb;
padding: 1rem .75rem;
padding: 12px 9px;
&-item {
position: relative;
margin-bottom: 28px;
padding: 0 1.25rem;
padding: 0 15px;
height: auto;
.label {
......@@ -51,7 +51,7 @@
display: flex;
align-items: center;
margin-bottom: .7rem;
margin-bottom: 8.4px;
.fla2{
@extend .bb;
......@@ -71,7 +71,7 @@
}
img {
height: 1rem;
height: 12px;
}
}
......@@ -80,7 +80,7 @@
.icon2 {
width: 1.2rem;
width: 14.4px;
display: flex;
}
......@@ -107,10 +107,10 @@
// 长文本
.textarea {
min-height: 8.75rem;
border-radius: 1rem;
min-height: 105px;
border-radius: 12px;
@extend .bb;
padding: .75rem;
padding: 9px;
}
}
......@@ -119,12 +119,11 @@
// 不换行
&-item2 {
display: flex;
margin-bottom: 2.25rem;
margin-bottom: 27px;
.label {
// min-width: 12.833333rem;
height: 2.5rem;
margin-right: 2.25rem;
height: 30px;
margin-right: 27px;
color: $cFontGray;
}
......@@ -133,15 +132,15 @@
display: flex;
.boo-btn {
// width: 5.25rem;
padding: 0 2.25rem;
height: 2.5rem;
line-height: 2.5rem;
// width: 63px;
padding: 0 27px;
height: 30px;
line-height: 30px;
border: solid 1px #dcdddd;
background-color: #ffffff;
border-radius: 2.5rem;
border-radius: 30px;
text-align: center;
margin: 0 0.6rem;
margin: 0 7.2px;
}
.active {
......@@ -163,7 +162,7 @@
}
.submit-btn {
width: 13.583333rem;
width: 163px;
height: 49px;
margin: 0 auto 0;
line-height: 49px;
......@@ -172,7 +171,7 @@
background-image: linear-gradient(to top, #000000, #ffffff), linear-gradient(to bottom, #ec6429, #ec6429);
text-align: center;
color: #ffffff;
border-radius: 3.5rem;
border-radius: 42px;
cursor: pointer;
border: none;
color: #ffffff;
......@@ -183,7 +182,7 @@
}
.submit-btn :lang(zh) {
letter-spacing: .129167rem;
letter-spacing: 1.55px;
}
......
......@@ -2,7 +2,7 @@
.list-container {
overflow-x: auto;
margin-bottom: 2rem;
margin-bottom: 24px;
}
.hide {
......@@ -33,7 +33,7 @@
position: absolute;
transition: all 0.5s;
cursor: pointer;
width: 1rem;
width: 12px;
height: 8px;
background: url("~@/assets/images/insurance-query/triangle-down2.png") no-repeat center center;
background-size: 100% 100%;
......@@ -47,7 +47,7 @@
}
.cell-group {
margin-bottom: 1rem;
margin-bottom: 12px;
&:last-child {
margin-bottom: 0;
......@@ -58,20 +58,20 @@
}
.w1 {
// width: 10rem;
width: 20rem;
// width: 120px;
width: 240px;
text-align: center;
}
.w2 {
// width: 6.25rem;
width: 12.5rem;
// width: 75px;
width: 150px;
text-align: center;
}
.table-header {
// width: 64.166667rem;
height: 3.25rem;
// width: 770px;
height: 39px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
background-color: #f2f2f2;
......@@ -79,9 +79,9 @@
align-items: center;
.normal-header {
// width: 58.833333rem;
// width: 706px;
@extend .bb;
padding: 0 2.75rem;
padding: 0 32px;
width: 100%;
margin: auto;
display: flex;
......@@ -96,7 +96,7 @@
.guide {
transition: all 0.5s;
cursor: pointer;
width: 1rem;
width: 12px;
height: 8px;
background: url("~@/assets/images/insurance-query/triangle-down.png") no-repeat center center;
background-size: 100% 100%;
......@@ -110,24 +110,23 @@
}
.table-content {
// width: 64.166667rem;
// width: 770px;
height: auto;
max-height: 50rem;
max-height: 600px;
// display: inline-block;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
border-left: solid 1px #f2f2f2;
border-right: solid 1px #f2f2f2;
border-bottom: solid 1px #f2f2f2;
padding: 0 2.75rem;
// max-height: 41.666667rem;
padding: 0 32px;
transition: max-height ease-out 0.3s !important;
overflow: auto;
.data-line {
// padding: 0 2.75rem;
height: 4.416667rem;
// padding: 0 32px;
height: 50px;
margin: auto;
display: flex;
justify-content: space-between;
......@@ -149,16 +148,16 @@
}
.separator-v {
height: 2.5rem;
height: 30px;
width: 2px;
background-color: #f2f2f2;
margin: 0 .916667rem;
margin: 0 11px;
}
}
.label span {
color: $cOrange;
margin-left: .583333rem;
margin-left: 7px;
cursor: pointer;
text-decoration: underline;
}
......@@ -185,7 +184,7 @@
.sp {
text-decoration: underline;
padding: 0 .4rem;
padding: 0 4.8px;
}
.ac {
......@@ -215,7 +214,7 @@
}
.empty {
height: 41.666667rem;
height: 500px;
display: flex;
align-items: center;
justify-content: center;
......@@ -235,16 +234,15 @@
}
}
@media (max-width: 1200px) {
.list-container {
display: -webkit-box;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
width: 92vw;
}
}
.list-container::-webkit-scrollbar {
display: none;
}
// @media (max-width: 1200px) {
// .list-container {
// display: -webkit-box;
// overflow-x: auto;
// -webkit-overflow-scrolling: touch;
// width: 92vw;
// }
// }
// .list-container::-webkit-scrollbar {
// display: none;
// }
......
......@@ -3,7 +3,7 @@
input {
padding: 0 2rem;
padding: 0 24px;
}
.top-space {}
......@@ -13,7 +13,7 @@ input {
border-radius: 8px;
border: solid 1px #f2f2f2;
background-color: #ffffff;
padding: 32px 34px 34px 2rem;
padding: 32px 34px 34px 24px;
}
.form {
......@@ -30,7 +30,7 @@ input {
color: $cOrange;
display: flex;
align-items: center;
margin-bottom: .7rem;
margin-bottom: 8.4px;
.icon {
width: 26px;
......@@ -38,7 +38,7 @@ input {
}
img {
height: 1rem;
height: 12px;
}
}
......@@ -50,18 +50,18 @@ input {
// 长文本
.textarea {
min-height: 8.75rem;
border-radius: 1rem;
min-height: 105px;
border-radius: 12px;
@extend .bb;
padding: .75rem;
padding: 9px;
}
.down-arrow {
position: absolute;
top: 2.2rem;
right: 2rem;
top: 26.4px;
right: 24px;
background-image: url('~@/assets/images/reservation/re-down-arrow.png');
width: 1rem;
width: 12px;
height: 8px;
pointer-events: none;
cursor: default;
......@@ -70,16 +70,16 @@ input {
.validator {
color: $cOrange;
margin-top: 0.5rem;
margin-top: 6px;
position: absolute;
right: 1rem;
right: 12px;
display: flex;
align-items: center;
// bottom: 0;
img {
display: inline-block;
margin-right: 0.4rem;
margin-right: 4.8px;
}
}
}
......@@ -87,11 +87,11 @@ input {
// 不换行
&-item2 {
display: flex;
margin-bottom: 2.25rem;
margin-bottom: 27px;
.label {
height: 2.5rem;
margin-right: 1rem;
height: 30px;
margin-right: 12px;
}
.cont {
......@@ -99,14 +99,14 @@ input {
display: flex;
.boo-btn {
width: 5.25rem;
height: 2.5rem;
line-height: 2.5rem;
width: 63px;
height: 30px;
line-height: 30px;
border: solid 1px #dcdddd;
background-color: #ffffff;
border-radius: 2.5rem;
border-radius: 30px;
text-align: center;
margin: 0 0.6rem;
margin: 0 7.2px;
}
.active {
......@@ -130,14 +130,14 @@ input {
.ipt-wrap {
width: 50%;
margin-left: 1.75rem;
margin-left: 21px;
input {
color: #4c4948;
}
input:lang(zh) {
letter-spacing: .116667rem;
letter-spacing: 1.4px;
}
}
......@@ -155,26 +155,26 @@ input {
.mt8 {
margin-top: 8px;
margin-left: 10rem;
margin-left: 120px;
}
}
}
.notice {
margin-top: 4rem;
margin-top: 48px;
@extend .bb;
padding: 0 1rem;
padding: 0 12px;
&-item {
position: relative;
line-height: 2;
margin-bottom: 1rem;
margin-bottom: 12px;
&-icon {
width: 14px;
position: absolute;
top: .6rem;
top: 7.2px;
}
}
......@@ -184,9 +184,9 @@ input {
}
.submit-btn {
width: 13.583333rem;
width: 163px;
height: 49px;
margin: 2.5rem auto;
margin: 30px auto;
line-height: 49px;
box-shadow: 0px 10px 13px 0 rgba(236, 100, 41, 0.2);
background-blend-mode: soft-light, ;
......@@ -195,7 +195,7 @@ input {
text-align: center;
font-size: $fontSize;
color: #ffffff;
border-radius: 3.5rem;
border-radius: 42px;
cursor: pointer;
border: none;
color: #ffffff;
......@@ -207,7 +207,7 @@ input {
}
.submit-btn:lang(zh) {
letter-spacing: .129167rem;
letter-spacing: 1.55px;
}
......
......@@ -32,6 +32,10 @@ import Reservation from './components/reservation.vue'
import ComplaintAcceptance from './components/complaint-acceptance.vue'
// 常用表格
import CommonForm from './components/common-form.vue'
// 电子通知书查询
import ECorrespondenceEnquiry from './components/e-correspondence-enquiry.vue'
// 常见问题
import Faq from './components/faq.vue'
export default {
......@@ -98,6 +102,8 @@ export default {
PolicyChangeGuide,
PolicyChangeContact,
PolicyChangeInformation,
Clarms
Clarms,
ECorrespondenceEnquiry,
Faq,
}
}
......
......@@ -4,16 +4,15 @@
display: flex;
margin: 28px auto;
position: relative;
}
.left-panel {
width: 192px;
width: 220px;
margin-right: $marginMedium;
.separator {
margin: auto;
width: 13.25rem;
width: 195px;
height: 1px;
background-color: #dcdddd;
}
......@@ -21,7 +20,7 @@
.menu-item {
position: relative;
@extend .bb;
padding: 1.5rem 0;
padding: 18px 0;
font-weight: bold;
color: $cFontGray;
text-align: center;
......@@ -30,13 +29,12 @@
align-items: center;
justify-content: flex-start;
border-bottom: solid 1px #dcdddd;
width: 13.25rem;
margin-left: 1.25rem;
width: 195px;
.icon-wrap {
@extend .bb;
padding-left: 0px;
width: 42px;
width: 40px;
.icon {
max-height: 28px;
......@@ -46,9 +44,10 @@
.tit {
flex: 1;
@extend .bb;
padding: 0 4px;
padding: 0 0px;
text-align: left;
word-wrap:break-word;
font-size: 18px;
}
.sel {
......@@ -58,7 +57,7 @@
top: 0;
bottom: 0;
// right: 0;
right: -1.75rem;
right: -12px;
margin: auto 0;
background: url("~@/assets/images/insurance-query/triangle.png") no-repeat center center;
@extend .bis;
......@@ -69,7 +68,7 @@
}
&:first-child {
padding: 0 0 1.5rem;
padding: 0 0 18px;
}
&:last-child {
......@@ -84,8 +83,10 @@
}
.right-panel {
max-width: 975px;
width: 975px;
// max-width: 975px;
// width: 975px;
max-width: 972px;
width: 972px;
background-color: #ffffff;
.panel {
......
......@@ -52,6 +52,12 @@
<div class="panel" v-if="activity == 'm8'">
<common-form></common-form>
</div>
<div class="panel" v-if="activity == 'm9'">
<e-correspondence-enquiry></e-correspondence-enquiry>
</div>
<div class="panel" v-if="activity == 'm10'">
<faq></faq>
</div>
</div>
</div>
</template>
......
......@@ -2,7 +2,7 @@
.content {
position: relative;
min-height: 50rem;
min-height: 600px;
padding-bottom: $marginMedium;
color: $cFontGray;
font-size: $fontSize;
......@@ -37,17 +37,17 @@
.step {
@extend .fcc;
margin-bottom: 3rem;
margin-bottom: 36px;
}
.login {
color: $cFontGray;
@extend .bb;
padding: 2.75rem 6.25rem 3.75rem;
border-bottom: solid 0.9rem $cGreen;
padding: 32px 75px 45px;
border-bottom: solid 10.8px $cGreen;
margin: auto;
max-width: 51rem;
max-width: 612px;
border-radius: $borderRadius;
@extend .box-shadow;
background-color: #ffffff;
......@@ -62,24 +62,24 @@
}
&-tit:lang(zh) {
letter-spacing: .2rem;
letter-spacing: 2.4px;
}
&-tit-space-1 {
height: 2rem;
height: 24px;
}
&-nav {
margin: 2.25rem 0 auto;
margin: 27px 0 auto;
display: flex;
justify-content: center;
align-items: center;
&-v-line {
width: .2rem;
height: 1.25rem;
width: 2.4px;
height: 15px;
background-color: #4c4948;
margin: 0 2.25rem;
margin: 0 27px;
}
&-tit {
......@@ -96,14 +96,14 @@
}
&-protocol {
margin: 2.5rem auto 0;
margin: 30px auto 0;
display: flex;
align-items: center;
padding-left: 1rem;
padding-left: 12px;
.check {
height: 1rem;
margin-right: .6rem;
height: 12px;
margin-right: 7.2px;
}
.protocol {
......@@ -115,11 +115,11 @@
display: flex;
// justify-content: space-between;
justify-content: center;
margin-top: 2rem;
margin-top: 24px;
}
&-submit {
@include btc2(17.25rem, 5.25rem, 16px);
@include btc2(207px, 63px, 16px);
}
&-submit:lang(zh) {
......@@ -127,12 +127,12 @@
}
&-func {
margin: 1.5rem auto 0;
margin: 18px auto 0;
display: flex;
justify-content: center;
&-btn {
margin: 0 1.25rem;
margin: 0 15px;
text-decoration: underline;
}
}
......@@ -159,23 +159,23 @@
}
input:lang(zh) {
letter-spacing: .1rem;
letter-spacing: 1.2px;
}
&-item {
position: relative;
margin-bottom: 1.75rem;
margin-bottom: 21px;
padding: 0 $marginSmall;
.label {
color: $cOrange;
display: flex;
align-items: center;
margin-bottom: 1.25rem;
margin-bottom: 15px;
img {
height: 1rem;
margin-right: 1rem;
height: 12px;
margin-right: 12px;
}
}
......@@ -190,7 +190,7 @@
}
.ipt:lang(zh) {
letter-spacing: .1rem;
letter-spacing: 1.2px;
}
.date {
......@@ -199,14 +199,14 @@
// 长文本
.textarea {
min-height: 8.75rem;
border-radius: 1rem;
min-height: 105px;
border-radius: 12px;
}
.down-arrow {
position: absolute;
top: 2.2rem;
right: 2rem;
top: 26.4px;
right: 24px;
}
......@@ -214,11 +214,11 @@
@extend .fcc;
// font-family: Arial;
font-size: 18px;
width: 8.5rem;
width: 102px;
border: solid 1px #dcdddd;
background-color: #f2f2f2;
flex: none;
margin-left: 1.5rem;
margin-left: 18px;
color: $cFontGray;
}
......@@ -231,7 +231,7 @@
.ipt-code {
flex: 1;
padding-right: 1.75rem;
padding-right: 21px;
}
.veri-btn {
......@@ -247,15 +247,15 @@
.validator {
color: $cOrange;
margin-top: 0.5rem;
margin-top: 6px;
position: absolute;
right: .5rem;
right: 6px;
display: flex;
align-items: center;
img {
display: inline-block;
margin-right: 0.4rem;
margin-right: 4.8px;
}
}
}
......@@ -273,27 +273,26 @@
}
.login {
padding: 1rem 1rem 3.5rem;
padding: 12px 12px 42px;
border-bottom: none;
min-height: 42rem;
min-height: 504px;
&-tit-space-1 {
// height: 5.25rem;
}
&-tit-space-4 {
height: 1rem;
height: 12px;
}
&-nav {
margin: 1.75rem auto 1rem;
margin: 21px auto 12px;
}
.form {
&-item {
margin: 2rem auto 0;
margin: 24px auto 0;
}
}
......@@ -303,9 +302,9 @@
&-submit {
margin: 0 auto 0;
width: 17.25rem;
height: 3.25rem;
line-height: 3.25rem;
width: 207px;
height: 39px;
line-height: 39px;
}
}
......@@ -325,7 +324,7 @@
}
.box-shadow {
box-shadow: 0 0 1.5rem 0 rgba(255, 87, 0, 0.15);
box-shadow: 0 0 18px 0 rgba(255, 87, 0, 0.15);
}
@media (max-width: 1200px) {
......
@import '@/styles/_support.scss';
.content {
padding-bottom: 2.25rem;
padding-bottom: 27px;
}
.top-space {
height: 2.25rem;
height: 27px;
}
.box {
......@@ -110,16 +110,16 @@
position: relative;
width: 24.25rem;
width: 291px;
// width: 100%;
height: 32.75rem;
height: 393px;
border-radius: $borderRadiusSmall;
@extend .box-shadow;
background-color: #fbfbfb;
.img {
width: 100%;
height: 24.25rem;
height: 291px;
background-size: cover;
}
......@@ -148,10 +148,10 @@
position: absolute;
left: 0;
right: 0;
bottom: 3rem;
bottom: 36px;
margin: 0 auto;
@include btc2(13.5rem, 4rem, 16px);
@include btc2(162px, 48px, 16px);
}
img {
......@@ -226,7 +226,7 @@
}
.box-shadow {
box-shadow: 0 0 1.5rem 0 rgba(255, 87, 0, 0.15);
box-shadow: 0 0 18px 0 rgba(255, 87, 0, 0.15);
}
@media (max-width: 1200px) {
......
......@@ -2,7 +2,7 @@
.content {
position: relative;
min-height: 50rem;
min-height: 600px;
padding-bottom: $marginMedium;
color: $cFontGray;
font-size: $fontSize;
......@@ -21,7 +21,7 @@
}
.mr30{
margin-right: 2.5rem ;
margin-right: 30px ;
}
.ebg {
background: url('~@/assets/images/common/login-bg.png') center no-repeat;
......@@ -34,17 +34,17 @@
.step {
@extend .fcc;
margin-bottom: 3rem;
margin-bottom: 36px;
}
.login {
color: $cFontGray;
@extend .bb;
padding: 2.75rem 6.25rem 3.75rem;
border-bottom: solid 0.9rem $cGreen;
padding: 32px 75px 45px;
border-bottom: solid 10.8px $cGreen;
margin: auto;
max-width: 51rem;
max-width: 612px;
border-radius: $borderRadius;
@extend .box-shadow;
background-color: #ffffff;
......@@ -59,24 +59,24 @@
}
&-tit:lang(zh) {
letter-spacing: .2rem;
letter-spacing: 2.4px;
}
&-tit-space-1 {
height: 2rem;
height: 24px;
}
&-nav {
margin: 2.25rem 0 auto;
margin: 27px 0 auto;
display: flex;
justify-content: center;
align-items: center;
&-v-line {
width: .2rem;
height: 1.25rem;
width: 2.4px;
height: 15px;
background-color: #4c4948;
margin: 0 2.25rem;
margin: 0 27px;
}
&-tit {
......@@ -98,14 +98,14 @@
}
&-protocol {
margin: 2.5rem auto 0;
margin: 30px auto 0;
display: flex;
align-items: center;
padding-left: 1rem;
padding-left: 12px;
.check {
height: 1rem;
margin-right: .6rem;
height: 12px;
margin-right: 7.2px;
}
.protocol {
......@@ -117,11 +117,11 @@
display: flex;
// justify-content: space-between;
justify-content: center;
margin-top: 2rem;
margin-top: 24px;
}
&-submit {
@include btc2(14.25rem, 5.25rem, 16px);
@include btc2(171px, 63px, 16px);
}
&-submit:lang(zh) {
......@@ -129,12 +129,12 @@
}
&-func {
margin: 1.5rem auto 0;
margin: 18px auto 0;
display: flex;
justify-content: center;
&-btn {
margin: 0 1.25rem;
margin: 0 15px;
text-decoration: underline;
}
}
......@@ -167,23 +167,23 @@
}
input:lang(zh) {
letter-spacing: .1rem;
letter-spacing: 1.2px;
}
&-item {
position: relative;
margin-bottom: 1.75rem;
margin-bottom: 21px;
padding: 0 $marginSmall;
.label {
color: $cOrange;
display: flex;
align-items: center;
margin-bottom: 1.25rem;
margin-bottom: 15px;
img {
height: 1rem;
margin-right: 1rem;
height: 12px;
margin-right: 12px;
}
}
......@@ -199,7 +199,7 @@
}
.ipt:lang(zh) {
letter-spacing: .1rem;
letter-spacing: 1.2px;
}
.date {
......@@ -208,14 +208,14 @@
// 长文本
.textarea {
min-height: 8.75rem;
border-radius: 1rem;
min-height: 105px;
border-radius: 12px;
}
.down-arrow {
position: absolute;
top: 2.2rem;
right: 2rem;
top: 26.4px;
right: 24px;
}
......@@ -223,11 +223,11 @@
@extend .fcc;
// font-family: Arial;
font-size: 18px;
width: 8.5rem;
width: 102px;
border: solid 1px #dcdddd;
background-color: #f2f2f2;
flex: none;
margin-left: 1.5rem;
margin-left: 18px;
color: $cFontGray;
}
......@@ -240,7 +240,7 @@
.ipt-code {
flex: 1;
padding-right: 1.75rem;
padding-right: 21px;
}
.veri-btn {
......@@ -256,15 +256,15 @@
.validator {
color: $cOrange;
margin-top: 0.5rem;
margin-top: 6px;
position: absolute;
right: .5rem;
right: 6px;
display: flex;
align-items: center;
img {
display: inline-block;
margin-right: 0.4rem;
margin-right: 4.8px;
}
}
}
......@@ -282,32 +282,32 @@
}
.login {
padding: 1rem 1rem 3.5rem;
padding: 12px 12px 42px;
border-bottom: none;
min-height: 42rem;
min-height: 504px;
&-tit-space-1 {
// height: 5.25rem;
// height: 63px;
}
&-tit-space-4 {
height: 1rem;
height: 12px;
}
&-nav {
margin: 1.75rem auto 1rem;
margin: 21px auto 12px;
}
.form {
&-item {
margin: 2rem auto 0;
margin: 24px auto 0;
}
}
.authTip {
margin-top: 2rem;
margin-top: 24px;
}
&-protocol {
......@@ -316,9 +316,9 @@
&-submit {
margin: 0 auto 0;
width: 12.25rem;
height: 3.25rem;
line-height: 3.25rem;
width: 147px;
height: 39px;
line-height: 39px;
}
}
......@@ -338,7 +338,7 @@
}
.box-shadow {
box-shadow: 0 0 1.5rem 0 rgba(255, 87, 0, 0.15);
box-shadow: 0 0 18px 0 rgba(255, 87, 0, 0.15);
}
@media (max-width: 1200px) {
......
......@@ -2,7 +2,7 @@
.content {
position: relative;
min-height: 50rem;
min-height: 600px;
padding-bottom: $marginMedium;
color: $cFontGray;
font-size: $fontSize;
......@@ -33,11 +33,11 @@
.login {
color: $cFontGray;
@extend .bb;
padding: 2.75rem 6.25rem 4.5rem;
border-bottom: solid 0.9rem $cGreen;
padding: 32px 75px 54px;
border-bottom: solid 10.8px $cGreen;
margin: auto;
max-width: 51rem;
max-width: 612px;
border-radius: $borderRadius;
@extend .box-shadow;
background-color: #ffffff;
......@@ -48,11 +48,11 @@
font-size: $fontSizeTitle;
font-weight: bold;
text-shadow: 3px 5.2px 9px rgba(236, 100, 41, 0.27);
margin-top: 2rem;
margin-top: 24px;
}
&-tit2:lang(zh) {
letter-spacing: .2rem;
letter-spacing: 2.4px;
}
&-tit {
......@@ -64,29 +64,29 @@
justify-content: center;
img {
height: 1.75rem;
height: 21px;
}
.img-en {
height: 1.2rem;
height: 14.4px;
}
}
&-tit:lang(zh) {
letter-spacing: .2rem;
letter-spacing: 2.4px;
}
&-nav {
margin: 2.75rem auto 1rem;
margin: 32px auto 12px;
display: flex;
justify-content: center;
align-items: center;
&-v-line {
width: 2px;
height: 1.2rem;
height: 14.4px;
background-color: $cFontGray;
margin: 0 2.25rem;
margin: 0 27px;
}
&-tit {
......@@ -102,14 +102,14 @@
}
&-protocol {
margin: 3rem auto 0;
margin: 36px auto 0;
display: flex;
align-items: center;
// padding-left: 1rem;
// padding-left: 12px;
.check {
height: 1rem;
margin-right: .5rem;
height: 12px;
margin-right: 6px;
}
.protocol {
......@@ -118,12 +118,12 @@
}
.loginLeft {
padding-left: 1rem;
padding-left: 12px;
}
&-submit {
@include btc2(17.25rem, 5.25rem, 16px);
margin: 4rem auto 0;
@include btc2(207px, 63px, 16px);
margin: 48px auto 0;
}
......@@ -132,12 +132,12 @@
}
&-func {
margin: 2rem auto 0;
margin: 24px auto 0;
display: flex;
justify-content: center;
&-btn {
margin: 0 1.5rem;
margin: 0 18px;
text-decoration: underline;
}
}
......@@ -162,7 +162,7 @@
&-item {
position: relative;
margin-top: 3.25rem;
margin-top: 39px;
.area-code {
border: transparent !important;
......@@ -177,11 +177,11 @@
color: $cOrange;
display: flex;
align-items: center;
margin-bottom: 1.25rem;
margin-bottom: 15px;
img {
height: 1.5rem;
margin-right: .8rem;
height: 18px;
margin-right: 9.6px;
}
}
......@@ -193,40 +193,39 @@
// input和下拉
.ipt {
flex: 1;
padding: 0 2.5rem 0 2rem;
padding: 0 30px 0 24px;
}
.ipt:lang(zh) {
letter-spacing: .1rem;
letter-spacing: 1.2px;
}
// 长文本
.textarea {
min-height: 8.75rem;
border-radius: 1rem;
min-height: 105px;
border-radius: 12px;
}
.down-arrow {
position: absolute;
top: 2.0rem;
right: 1rem;
top: 24px;
right: 12px;
}
.region-tel {
margin-right: .8rem;
margin-right: 9.6px;
max-width: 30%;
}
.verify-btn {
@extend .fcc;
// font-family: Arial;
font-size: 18px;
width: 8.5rem;
width: 102px;
border: solid 1px #dcdddd;
background-color: #f2f2f2;
flex: none;
margin-left: 1.5rem;
margin-left: 18px;
color: $cFontGray;
}
......@@ -239,7 +238,7 @@
.ipt-code {
flex: 1;
padding-right: 1.75rem;
padding-right: 21px;
}
.veri-btn {
......@@ -255,22 +254,22 @@
.validator {
color: $cOrange;
margin-top: 0.5rem;
margin-top: 6px;
position: absolute;
right: .5rem;
right: 6px;
display: flex;
align-items: center;
img {
display: inline-block;
margin-right: 0.4rem;
margin-right: 4.8px;
}
}
}
}
.box-shadow {
box-shadow: 0 0 1.5rem 0 rgba(255, 87, 0, 0.15);
box-shadow: 0 0 18px 0 rgba(255, 87, 0, 0.15);
}
@media (max-width: 1200px) {
......@@ -285,7 +284,7 @@
}
.login {
padding: 2rem 1rem 3.5rem;
padding: 24px 12px 42px;
border-bottom: none;
......@@ -295,20 +294,20 @@
font-size: $fontSizeTitle;
font-weight: bold;
text-shadow: 3px 5.2px 9px rgba(236, 100, 41, 0.27);
margin-top: 2rem;
margin-top: 24px;
}
&-tit2:lang(zh) {
letter-spacing: .2rem;
letter-spacing: 2.4px;
}
&-nav {
margin: 1.75rem auto 1rem;
margin: 21px auto 12px;
}
.form {
&-item {
margin-top: 2rem;
margin-top: 24px;
}
}
......@@ -317,10 +316,10 @@
}
&-submit {
margin: 3rem auto 0;
width: 17.25rem;
height: 3.25rem;
line-height: 3.25rem;
margin: 36px auto 0;
width: 207px;
height: 39px;
line-height: 39px;
}
}
......
@import '@/styles/_support.scss';
.content {
// padding-bottom: 8.5rem;
padding-bottom: 2.33rem;
// padding-bottom: 102px;
padding-bottom: 28px;
}
.box {
position: relative;
max-width: $articleWidth;
// max-width: 64rem;
// max-width: 768px;
}
.top-space {
height: 3rem;
height: 36px;
}
.tit {
......@@ -27,29 +27,29 @@
.back {
text-align: right;
margin-top: .75rem;
margin-top: 9px;
cursor: pointer;
}
.dat {
margin-top: 4rem;
margin-top: 48px;
display: flex;
.date {
display: flex;
margin-right: 4rem;
margin-right: 48px;
align-items: center;
.icon-clock {
height: 1.25rem;
margin-right: .5rem;
height: 15px;
margin-right: 6px;
}
}
}
.desc {
max-width: $articleWidth;
margin-top: 4rem;
margin-top: 48px;
line-height: 2;
}
......
......@@ -2,11 +2,11 @@
.content {
position: relative;
min-height: 50rem;
min-height: 600px;
}
.top-space {
height: 2rem;
height: 24px;
}
.box {
......@@ -25,7 +25,7 @@
.news {
color: #4c4948;
margin: 0 auto;
max-width: 81.75rem;
max-width: 981px;
&-item {
......@@ -33,7 +33,7 @@
justify-content: space-between;
align-items: center;
height: 5.5rem;
height: 66px;
border-bottom: solid 1px #dcdddd;
cursor: pointer;
......@@ -43,24 +43,24 @@
// flex: 1;
.point {
width: .5rem;
height: .5rem;
width: 6px;
height: 6px;
background-color: #4c4948;
margin: 0 1.75rem;
margin: 0 21px;
}
.tit{
.tit {
// flex: 1;
flex-grow: 1;
}
.new {
margin: 0 1rem;
margin: 0 12px;
}
}
&-date {
margin: 0 1rem;
margin: 0 12px;
}
&:last-child {
......@@ -73,13 +73,14 @@
.pagination {
padding: 2.25rem 0;
padding: 27px 0;
}
@media (max-width: 1200px) {
.content {
@include content-percent();
}
.ebg {
display: none;
}
......@@ -91,11 +92,12 @@
&-item {
&-tit {
flex: 1;
.point {
width: .5rem;
height: .5rem;
width: 6px;
height: 6px;
background-color: #4c4948;
margin: 0 0.75rem;
margin: 0 9px;
}
}
}
......
......@@ -2,7 +2,7 @@
.content {
position: relative;
padding-bottom: 2.25rem;
padding-bottom: 27px;
position: relative;
padding-bottom: $paddingMedium;
color: $cFontGray;
......@@ -28,17 +28,17 @@
.step {
@extend .fcc;
margin-bottom: 3rem;
margin-bottom: 36px;
}
.login {
@extend .bb;
padding: 2rem 6.25rem 2rem;
border-bottom: solid 0.9rem $cGreen;
// height: 38rem;
padding: 24px 75px 24px;
border-bottom: solid 10.8px $cGreen;
// height: 456px;
margin: auto;
max-width: 51rem;
max-width: 612px;
border-radius: $borderRadius;
@extend .box-shadow;
background-color: #ffffff;
......@@ -52,28 +52,28 @@
}
&-tit:lang(zh) {
letter-spacing: .2rem;
letter-spacing: 2.4px;
}
&-tit-space-1 {
height: 5.25rem;
height: 63px;
}
&-tit-space-4 {
height: 3rem;
height: 36px;
}
&-nav {
margin: 2.25rem 0 auto;
margin: 27px 0 auto;
display: flex;
justify-content: center;
align-items: center;
&-v-line {
width: .2rem;
height: 1.25rem;
width: 2.4px;
height: 15px;
background-color: $cFontGray;
margin: 0 2.25rem;
margin: 0 27px;
}
&-tit {
......@@ -90,14 +90,14 @@
}
&-protocol {
margin: 2.5rem auto 0;
margin: 30px auto 0;
display: flex;
align-items: center;
padding-left: 1rem;
padding-left: 12px;
.check {
height: 1rem;
margin-right: .6rem;
height: 12px;
margin-right: 7.2px;
}
.protocol {
......@@ -106,12 +106,12 @@
}
&-submit {
@include btc2(17.25rem, 5.25rem, 16px);
margin: 4.166667rem auto 0;
@include btc2(207px, 63px, 16px);
margin: 50px auto 0;
left: 0;
right: 0;
margin: 2rem auto 0;
bottom: 3rem;
margin: 24px auto 0;
bottom: 36px;
}
&-submit:lang(zh) {
......@@ -119,12 +119,12 @@
}
&-func {
margin: 1.5rem auto 0;
margin: 18px auto 0;
display: flex;
justify-content: center;
&-btn {
margin: 0 1.25rem;
margin: 0 15px;
text-decoration: underline;
}
}
......@@ -151,13 +151,13 @@
}
input:lang(zh) {
letter-spacing: .1rem;
letter-spacing: 1.2px;
}
&-item {
position: relative;
margin-bottom: 3rem;
margin-bottom: 36px;
.label {
font-size: $fontSizeTitle;
......@@ -165,11 +165,11 @@
color: $cOrange;
display: flex;
align-items: center;
margin-bottom: 1.25rem;
margin-bottom: 15px;
img {
height: 1.5rem;
margin-right: .8rem;
height: 18px;
margin-right: 9.6px;
}
}
......@@ -184,19 +184,19 @@
}
.ipt:lang(zh) {
letter-spacing: .1rem;
letter-spacing: 1.2px;
}
// 长文本
.textarea {
min-height: 8.75rem;
border-radius: 1rem;
min-height: 105px;
border-radius: 12px;
}
.down-arrow {
position: absolute;
top: 2.2rem;
right: 2rem;
top: 26.4px;
right: 24px;
}
......@@ -204,11 +204,11 @@
@extend .fcc;
// font-family: Arial;
font-size: 18px;
width: 8.5rem;
width: 102px;
border: solid 1px #dcdddd;
background-color: #f2f2f2;
flex: none;
margin-left: 1.5rem;
margin-left: 18px;
color: $cFontGray;
}
......@@ -221,7 +221,7 @@
.ipt-code {
flex: 1;
padding-right: 1.75rem;
padding-right: 21px;
}
.veri-btn {
......@@ -237,22 +237,22 @@
.validator {
color: $cOrange;
margin-top: 0.5rem;
margin-top: 6px;
position: absolute;
right: .5rem;
right: 6px;
display: flex;
align-items: center;
img {
display: inline-block;
margin-right: 0.4rem;
margin-right: 4.8px;
}
}
}
}
.box-shadow {
box-shadow: 0 0 1.5rem 0 rgba(255, 87, 0, 0.15);
box-shadow: 0 0 18px 0 rgba(255, 87, 0, 0.15);
}
@media (max-width: 1200px) {
......@@ -267,26 +267,26 @@
}
.login {
padding: 3rem 1rem 3.5rem;
padding: 36px 12px 42px;
border-bottom: none;
min-height: 42rem;
min-height: 504px;
&-tit-space-1 {
height: 2.25rem;
height: 27px;
}
&-tit-space-4 {
height: 1rem;
height: 12px;
}
&-nav {
margin: 1.75rem auto 1rem;
margin: 21px auto 12px;
}
.form {
&-item {
margin: 2rem auto 0;
margin: 24px auto 0;
}
}
......@@ -295,10 +295,10 @@
}
&-submit {
margin: 3.25rem auto 0;
width: 17.25rem;
height: 3.25rem;
line-height: 3.25rem;
margin: 39px auto 0;
width: 207px;
height: 39px;
line-height: 39px;
}
}
......
......@@ -2,7 +2,7 @@
.content {
position: relative;
padding-bottom: 2.25rem;
padding-bottom: 27px;
position: relative;
padding-bottom: $paddingMedium;
color: $cFontGray;
......@@ -28,17 +28,17 @@
.step {
@extend .fcc;
margin-bottom: 3rem;
margin-bottom: 36px;
}
.login {
@extend .bb;
padding: 2rem 6.25rem 4.5rem;
border-bottom: solid 0.9rem $cGreen;
min-height: 48rem;
padding: 24px 75px 54px;
border-bottom: solid 10.8px $cGreen;
min-height: 576px;
margin: auto;
max-width: 51rem;
max-width: 612px;
border-radius: $borderRadius;
@extend .box-shadow;
background-color: #ffffff;
......@@ -52,28 +52,28 @@
}
&-tit:lang(zh) {
letter-spacing: .2rem;
letter-spacing: 2.4px;
}
&-tit-space-1 {
height: 5.25rem;
height: 63px;
}
&-tit-space-4 {
height: 3rem;
height: 36px;
}
&-nav {
margin: 2.25rem 0 auto;
margin: 27px 0 auto;
display: flex;
justify-content: center;
align-items: center;
&-v-line {
width: .2rem;
height: 1.25rem;
width: 2.4px;
height: 15px;
background-color: $cFontGray;
margin: 0 2.25rem;
margin: 0 27px;
}
&-tit {
......@@ -90,14 +90,14 @@
}
&-protocol {
margin: 2.5rem auto 0;
margin: 30px auto 0;
display: flex;
align-items: center;
padding-left: 1rem;
padding-left: 12px;
.check {
height: 1rem;
margin-right: .6rem;
height: 12px;
margin-right: 7.2px;
}
.protocol {
......@@ -106,13 +106,13 @@
}
&-submit {
@include btc2(17.25rem, 5.25rem, 16px);
margin: 4.166667rem auto 0;
@include btc2(207px, 63px, 16px);
margin: 50px auto 0;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
bottom: 3rem;
bottom: 36px;
}
&-submit:lang(zh) {
......@@ -120,12 +120,12 @@
}
&-func {
margin: 1.5rem auto 0;
margin: 18px auto 0;
display: flex;
justify-content: center;
&-btn {
margin: 0 1.25rem;
margin: 0 15px;
text-decoration: underline;
}
}
......@@ -152,12 +152,12 @@
}
input:lang(zh) {
letter-spacing: .1rem;
letter-spacing: 1.2px;
}
&-item {
position: relative;
margin-bottom: 3rem;
margin-bottom: 36px;
.label {
font-size: $fontSizeTitle;
......@@ -165,11 +165,11 @@
color: $cOrange;
display: flex;
align-items: center;
margin-bottom: 1.25rem;
margin-bottom: 15px;
img {
height: 1.5rem;
margin-right: .8rem;
height: 18px;
margin-right: 9.6px;
}
}
......@@ -184,19 +184,19 @@
}
.ipt:lang(zh) {
letter-spacing: .1rem;
letter-spacing: 1.2px;
}
// 长文本
.textarea {
min-height: 8.75rem;
border-radius: 1rem;
min-height: 105px;
border-radius: 12px;
}
.down-arrow {
position: absolute;
top: 2.2rem;
right: 2rem;
top: 26.4px;
right: 24px;
}
......@@ -204,11 +204,11 @@
@extend .fcc;
// font-family: Arial;
font-size: 18px;
width: 8.5rem;
width: 102px;
border: solid 1px #dcdddd;
background-color: #f2f2f2;
flex: none;
margin-left: 1.5rem;
margin-left: 18px;
color: $cFontGray;
}
......@@ -221,7 +221,7 @@
.ipt-code {
flex: 1;
padding-right: 1.75rem;
padding-right: 21px;
}
.veri-btn {
......@@ -237,22 +237,22 @@
.validator {
color: $cOrange;
margin-top: 0.5rem;
margin-top: 6px;
position: absolute;
right: .5rem;
right: 6px;
display: flex;
align-items: center;
img {
display: inline-block;
margin-right: 0.4rem;
margin-right: 4.8px;
}
}
}
}
.box-shadow {
box-shadow: 0 0 1.5rem 0 rgba(255, 87, 0, 0.15);
box-shadow: 0 0 18px 0 rgba(255, 87, 0, 0.15);
}
@media (max-width: 1200px) {
......@@ -267,26 +267,26 @@
}
.login {
padding: 1rem 1rem 3.5rem;
padding: 12px 12px 42px;
border-bottom: none;
min-height: 42rem;
min-height: 504px;
&-tit-space-1 {
// height: 5.25rem;
// height: 63px;
}
&-tit-space-4 {
height: 1rem;
height: 12px;
}
&-nav {
margin: 1.75rem auto 1rem;
margin: 21px auto 12px;
}
.form {
&-item {
margin: 2rem auto 0;
margin: 24px auto 0;
}
}
......@@ -296,9 +296,9 @@
&-submit {
margin: 0 auto 0;
width: 17.25rem;
height: 3.25rem;
line-height: 3.25rem;
width: 207px;
height: 39px;
line-height: 39px;
}
}
......
......@@ -18,7 +18,7 @@
.btn-position {
position: absolute;
top: 27.2rem;
top: 326.4px;
left: 34px;
cursor: pointer;
}
......@@ -33,9 +33,9 @@
color: #fff;
margin-left: 0;
width: 160px;
height: 4.166667rem;
height: 50px;
display: inline-block;
line-height: 4.166667rem;
line-height: 50px;
text-align: center;
border-radius: 5px;
font-size: 20px;
......@@ -47,11 +47,11 @@
}
.blank-pannel {
height: 2.5rem;
height: 30px;
}
.rule-btn-out-group {
height: 3rem;
height: 36px;
}
.rule-btn-group {
......@@ -61,8 +61,8 @@
.rule-btn {
width: 33%;
height: 3rem;
line-height: 3rem;
height: 36px;
line-height: 36px;
text-align: center;
font-size: 14px;
color: #666666;
......
@import '@/styles/_support.scss';
.content {
padding-bottom: 2.33rem;
min-height: 50rem;
padding-bottom: 28px;
min-height: 600px;
}
.box {
......@@ -10,7 +10,7 @@
}
.top-space {
height: 3rem;
height: 36px;
}
.tit {
......@@ -25,7 +25,7 @@
.desc {
max-width: $articleWidth;
margin-top: 3rem;
margin-top: 36px;
line-height: 2;
font-size: $articleNormal;
}
......
@import '@/styles/_support.scss';
.content {
// padding-bottom: 8.5rem;
padding-bottom: 2.33rem;
padding-bottom: 28px;
}
.box {
......@@ -10,7 +9,7 @@
}
.top-space {
height: 3rem;
height: 36px;
}
.tit {
......@@ -26,7 +25,7 @@
.desc {
max-width: $articleWidth;
margin-top: 3rem;
margin-top: 36px;
line-height: 2;
}
......@@ -38,6 +37,6 @@
@media (max-width: 1200px) {
.content {
@include content-percent();
padding-bottom: 2rem;
padding-bottom: 24px;
}
}
......
......@@ -2,7 +2,7 @@
.content {
position: relative;
min-height: 50rem;
min-height: 600px;
padding-bottom: $paddingMedium;
color: $cFontGray;
font-size: $fontSize;
......@@ -31,23 +31,23 @@
.step {
@extend .fcc;
margin: .5rem auto 4.25rem;
margin: 6px auto 51px;
img {
height: 4.25rem;
height: 51px;
}
}
.login {
@extend .bb;
padding: 2.75rem 6.25rem 4.5rem;
border-bottom: solid 0.9rem $cGreen;
padding: 32px 75px 54px;
border-bottom: solid 10.8px $cGreen;
margin: auto;
max-width: 51rem;
max-width: 612px;
border-radius: $borderRadius;
// box-shadow: 0 0 1.5rem 0 rgba(255, 87, 0, 0.15);
// box-shadow: 0 0 18px 0 rgba(255, 87, 0, 0.15);
@extend .box-shadow;
background-color: #ffffff;
......@@ -59,11 +59,11 @@
justify-content: center;
img {
height: 1.416667rem;
height: 17px;
}
.img-en {
height: 1.2rem;
height: 14.4px;
}
}
......@@ -73,25 +73,25 @@
font-size: $fontSizeTitle;
font-weight: bold;
text-shadow: 3px 5.2px 9px rgba(236, 100, 41, 0.27);
margin-top: 2rem;
margin-top: 24px;
}
&-tit2:lang(zh) {
letter-spacing: .2rem;
letter-spacing: 2.4px;
}
&-nav {
margin: 2.75rem auto 1rem;
margin: 32px auto 12px;
display: flex;
justify-content: center;
align-items: center;
&-v-line {
width: 2px;
height: 1.2rem;
height: 14.4px;
background-color: $cFontGray;
margin: 0 2.25rem;
margin: 0 27px;
}
&-tit {
......@@ -107,14 +107,14 @@
}
&-protocol {
margin: 3rem auto 0;
margin: 36px auto 0;
display: flex;
align-items: center;
// padding-left: 1rem;
// padding-left: 12px;
.check {
height: 1rem;
margin-right: .6rem;
height: 12px;
margin-right: 7.2px;
}
.protocol {
......@@ -123,13 +123,13 @@
}
.loginLeft {
padding-left: 1rem;
padding-left: 12px;
}
&-submit {
@include btc2(17.25rem, 5.25rem, 16px);
margin: 4.166667rem auto 0;
@include btc2(207px, 63px, 16px);
margin: 50px auto 0;
}
......@@ -138,12 +138,12 @@
}
&-func {
margin: 2rem auto 0;
margin: 24px auto 0;
display: flex;
justify-content: center;
&-btn {
margin: 0 1.5rem;
margin: 0 18px;
text-decoration: underline;
}
}
......@@ -168,12 +168,12 @@
input {}
input:lang(zh) {
letter-spacing: .1rem;
letter-spacing: 1.2px;
}
&-item {
position: relative;
margin-top: 3.25rem;
margin-top: 39px;
.label {
font-size: $fontSizeTitle;
......@@ -181,11 +181,11 @@
color: $cOrange;
display: flex;
align-items: center;
margin-bottom: 1.25rem;
margin-bottom: 15px;
img {
height: 1.5rem;
margin-right: .8rem;
height: 18px;
margin-right: 9.6px;
}
}
......@@ -197,27 +197,27 @@
// input和下拉
.ipt {
flex: 1;
padding: 0 2.5rem 0 2rem;
padding: 0 30px 0 24px;
}
.ipt:lang(zh) {
letter-spacing: .1rem;
letter-spacing: 1.2px;
}
// 长文本
.textarea {
min-height: 8.75rem;
border-radius: 1rem;
min-height: 105px;
border-radius: 12px;
}
.down-arrow {
position: absolute;
top: 2.0rem;
right: 1rem;
top: 24px;
right: 12px;
}
.region-tel {
margin-right: .8rem;
margin-right: 9.6px;
max-width: 30%;
}
......@@ -226,11 +226,11 @@
@extend .fcc;
// font-family: Arial;
font-size: 18px;
width: 8.5rem;
width: 102px;
border: solid 1px #dcdddd;
background-color: #f2f2f2;
flex: none;
margin-left: 1.5rem;
margin-left: 18px;
color: $cFontGray;
}
......@@ -243,12 +243,12 @@
.ipt-tel {
flex: 1;
// padding-left: 1.75rem;
// padding-left: 21px;
}
.ipt-code {
flex: 1;
padding-right: 1.75rem;
padding-right: 21px;
}
.veri-btn {
......@@ -264,15 +264,15 @@
.validator {
color: $cOrange;
margin-top: 0.5rem;
margin-top: 6px;
position: absolute;
right: .5rem;
right: 6px;
display: flex;
align-items: center;
img {
display: inline-block;
margin-right: 0.4rem;
margin-right: 4.8px;
}
}
......@@ -280,7 +280,7 @@
}
.box-shadow {
box-shadow: 0 0 1.5rem 0 rgba(255, 87, 0, 0.15);
box-shadow: 0 0 18px 0 rgba(255, 87, 0, 0.15);
}
@media (max-width: 1200px) {
......@@ -295,20 +295,20 @@
}
.step {
margin-bottom: 1rem;
margin-bottom: 12px;
}
.login {
padding: 1rem 1rem 3.5rem;
padding: 12px 12px 42px;
border-bottom: none;
&-nav {
margin: 1.75rem auto 1rem;
margin: 21px auto 12px;
}
.form {
&-item {
margin-top: 2rem;
margin-top: 24px;
}
}
......@@ -318,10 +318,10 @@
}
&-submit {
margin: 3rem auto 0;
width: 17.25rem;
height: 3.25rem;
line-height: 3.25rem;
margin: 36px auto 0;
width: 207px;
height: 39px;
line-height: 39px;
}
}
......
......@@ -7,7 +7,7 @@ $borderSize: 6px;
}
.content {
padding-bottom: 2.25rem;
padding-bottom: 27px;
}
.box {
......
......@@ -49,27 +49,27 @@
.ipt {
@extend .bb;
width: 100%;
height: 4.5rem;
border-radius: 4.5rem;
height: 54px;
border-radius: 54px;
border: solid 1px #dcdddd !important;
background-color: #ffffff;
padding: 0 2rem;
padding: 0 24px;
flex: 1;
display: flex;
align-items: center;
}
.ipt:lang(zh) {
letter-spacing: 0.1rem;
letter-spacing: 1.2px;
}
.down-arrow {
position: absolute;
top: 2.2rem;
right: 2rem;
top: 26.4px;
right: 24px;
background-image: url('~@/assets/images/common/down-arrow.png');
width: 1rem;
width: 12px;
height: 8px;
pointer-events: none;
cursor: default;
......@@ -77,8 +77,8 @@
.eye {
position: absolute;
top: 1.2rem;
right: 2rem;
top: 14.4px;
right: 24px;
background-image: url('~@/assets/images/common/icon-eyes-off.png');
width: 27px;
height: 24px;
......@@ -108,8 +108,8 @@
// 轮播
.swiper-pagination-bullet {
width: 1rem !important;
height: 1rem !important;
width: 12px !important;
height: 12px !important;
}
.swiper-pagination-bullet-active {
......
......@@ -103,7 +103,7 @@
// 橙色按钮
@mixin btc2($wid:5.25rem, $hei:2.5rem, $fontSize:12px) {
@mixin btc2($wid:63px, $hei:30px, $fontSize:12px) {
width: $wid;
height: $hei;
line-height: $hei;
......@@ -123,7 +123,7 @@
}
@mixin btc3($wid:5.25rem, $hei:2.5rem, $fontSize:12px) {
@mixin btc3($wid:63px, $hei:30px, $fontSize:12px) {
width: $wid;
height: $hei;
line-height: $hei;
......@@ -134,7 +134,7 @@
border: solid 1px #006441;
}
@mixin btc4($wid:24rem, $hei:5rem, $fontSize:12px) {
@mixin btc4($wid:288px, $hei:60px, $fontSize:12px) {
width: $wid;
height: $hei;
line-height: $hei;
......