This commit is contained in:
A1300399510 2023-08-14 15:08:00 +08:00
parent 2e7ec8dda5
commit e6baac9d04
3 changed files with 281 additions and 222 deletions

View File

@ -220,7 +220,7 @@
</div> </div>
<div class="facilities-box"> <div class="facilities-box">
<template v-for="(item, key) of facilitiesKeyValue"> <template v-for="(item, key) of facilitiesKeyValue">
<div class="facilities-item flexflex" v-if="info['facilities'][key].length != 0"> <div class="facilities-item flexflex" v-if="info['facilities'][key] && info['facilities'][key].length != 0">
<div class="facilities-header flexflex"> <div class="facilities-header flexflex">
<div class="item-title">{{ item }}</div> <div class="item-title">{{ item }}</div>
</div> </div>

View File

@ -1,11 +1,36 @@
.btn { #fwin_login {
transform: translate(-50%, -50%);
}
.rental-listing * {
box-sizing: border-box;
}
.rental-listing .flexflex {
display: flex;
}
.rental-listing .flex1 {
flex: 1;
}
.rental-listing .flexcenter {
display: flex;
justify-content: center;
align-items: center;
}
.rental-listing .flexacenter {
display: flex;
align-items: center;
}
.rental-listing .flexjcenter {
display: flex;
justify-content: center;
}
.rental-listing .btn {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.pop-mask { .rental-listing .pop-mask {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
@ -14,38 +39,36 @@
background: rgba(0, 0, 0, 0.81764706); background: rgba(0, 0, 0, 0.81764706);
z-index: 1000; z-index: 1000;
} }
.pop-box { .rental-listing.pop-box {
position: relative; position: relative;
z-index: 1111; z-index: 1111;
box-sizing: border-box; box-sizing: border-box;
border-radius: 16px;
padding-top: 39px; padding-top: 39px;
background-color: #ffffff; background-color: #ffffff;
width: 640px;
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.11764706); -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.11764706);
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.11764706); -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.11764706);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.11764706); box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.11764706);
line-height: normal; line-height: normal;
} }
.pop-header { .rental-listing .pop-header {
font-size: 24px; font-size: 24px;
font-weight: 650; font-weight: 650;
color: #000000; color: #000000;
} }
.please-choose { .rental-listing .please-choose {
color: #555555; color: #555555;
font-size: 14px; font-size: 14px;
margin-top: 26px; margin-top: 26px;
margin-bottom: 24px; margin-bottom: 24px;
padding-left: 35px; padding-left: 35px;
} }
.choice-box { .rental-listing .choice-box {
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
padding: 0 35px 49px; padding: 0 35px 49px;
} }
.choice-box .choice-item, .rental-listing .choice-box .choice-item,
.choice-box .choice-long-item { .rental-listing .choice-box .choice-long-item {
background-color: #f6f6f6; background-color: #f6f6f6;
height: 160px; height: 160px;
width: 220px; width: 220px;
@ -54,8 +77,8 @@
box-sizing: border-box; box-sizing: border-box;
padding-top: 18px; padding-top: 18px;
} }
.choice-box .choice-item .choice-name, .rental-listing .choice-box .choice-item .choice-name,
.choice-box .choice-long-item .choice-name { .rental-listing .choice-box .choice-long-item .choice-name {
font-weight: 650; font-weight: 650;
font-size: 18px; font-size: 18px;
color: #000000; color: #000000;
@ -63,8 +86,8 @@
padding-left: 34px; padding-left: 34px;
text-align: left; text-align: left;
} }
.choice-box .choice-item .choice-name::after, .rental-listing .choice-box .choice-item .choice-name::after,
.choice-box .choice-long-item .choice-name::after { .rental-listing .choice-box .choice-long-item .choice-name::after {
content: ""; content: "";
position: absolute; position: absolute;
top: 50%; top: 50%;
@ -75,27 +98,27 @@
height: 16px; height: 16px;
border-radius: 3px; border-radius: 3px;
} }
.choice-box .choice-item:hover, .rental-listing .choice-box .choice-item:hover,
.choice-box .choice-long-item:hover { .rental-listing .choice-box .choice-long-item:hover {
cursor: pointer; cursor: pointer;
background-color: #f2f2f2; background-color: #f2f2f2;
} }
.choice-box .choice-item:hover .choice-arrows, .rental-listing .choice-box .choice-item:hover .choice-arrows,
.choice-box .choice-long-item:hover .choice-arrows { .rental-listing .choice-box .choice-long-item:hover .choice-arrows {
background-color: #000; background-color: #000;
background-image: url('@/assets/img/edit/selectArrow-white.svg'); background-image: url('@/assets/img/edit/selectArrow-white.svg');
} }
.choice-box .choice-long-item { .rental-listing .choice-box .choice-long-item {
width: 450px; width: 450px;
justify-content: space-between; justify-content: space-between;
height: 100px; height: 100px;
padding-right: 20px; padding-right: 20px;
} }
.choice-box .choice-long-item .choice-arrows { .rental-listing .choice-box .choice-long-item .choice-arrows {
margin: 0; margin: 0;
margin-top: -18px; margin-top: -18px;
} }
.choice-box .choice-explain { .rental-listing .choice-box .choice-explain {
color: #555555; color: #555555;
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
@ -104,7 +127,7 @@
padding-left: 34px; padding-left: 34px;
text-align: left; text-align: left;
} }
.choice-box .choice-arrows { .rental-listing .choice-box .choice-arrows {
width: 40px; width: 40px;
height: 40px; height: 40px;
background-color: #fddf6d; background-color: #fddf6d;
@ -115,7 +138,7 @@
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
} }
.close-icon { .rental-listing .close-icon {
position: absolute; position: absolute;
top: 20px; top: 20px;
right: 14px; right: 14px;
@ -123,47 +146,47 @@
height: 14px; height: 14px;
cursor: pointer; cursor: pointer;
} }
.affirm-hint { .rental-listing .affirm-hint {
color: #333333; color: #333333;
margin: 0 auto; margin: 0 auto;
text-align: left; text-align: left;
padding: 0 30px; padding: 0 30px;
} }
.affirm-a-hint { .rental-listing .affirm-a-hint {
text-align: center; text-align: center;
margin-top: 20px; margin-top: 20px;
} }
.affirm-b-hint { .rental-listing .affirm-b-hint {
margin: 36px auto 0; margin: 36px auto 0;
} }
.rules-box { .rental-listing .rules-box {
background: #f6f6f6; background: #f6f6f6;
margin: 30px; margin: 30px;
border-radius: 10px; border-radius: 10px;
padding: 15px; padding: 15px;
} }
.rules-box .rules-item { .rental-listing .rules-box .rules-item {
line-height: 24px; line-height: 24px;
} }
.rules-box .rules-item:not(:last-of-type) .rules-text { .rental-listing .rules-box .rules-item:not(:last-of-type) .rules-text {
border-bottom: 1px dashed #ebebeb; border-bottom: 1px dashed #ebebeb;
} }
.rules-box .rules-item .rules-text { .rental-listing .rules-box .rules-item .rules-text {
padding: 20px 0; padding: 20px 0;
font-size: 15px; font-size: 15px;
} }
.rules-box .rules-icon { .rental-listing .rules-box .rules-icon {
width: 15px; width: 15px;
height: 15px; height: 15px;
margin-top: 25px; margin-top: 25px;
margin-right: 12px; margin-right: 12px;
} }
.footer { .rental-listing .footer {
padding: 0 15px; padding: 0 15px;
height: 100px; height: 100px;
border-top: 1px solid #ebebeb; border-top: 1px solid #ebebeb;
} }
.footer .footer-item { .rental-listing .footer .footer-item {
width: 200px; width: 200px;
height: 50px; height: 50px;
border-radius: 40px; border-radius: 40px;
@ -172,10 +195,10 @@
background-color: #ffffff; background-color: #ffffff;
border: 1px solid #d7d7d7; border: 1px solid #d7d7d7;
} }
.footer .footer-item:first-of-type { .rental-listing .footer .footer-item:first-of-type {
margin-right: 20px; margin-right: 20px;
} }
.footer .footer-item.affirm { .rental-listing .footer .footer-item.affirm {
border: none; border: none;
background-color: #62b1ff; background-color: #62b1ff;
color: #ffffff; color: #ffffff;

View File

@ -1,211 +1,247 @@
.btn { #fwin_login {
position: absolute; transform: translate(-50%, -50%);
top: 0;
left: 0;
// background-color: #50e3c2;
width: 100%;
height: 100%;
} }
.pop-mask { .rental-listing {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.817647058823529);
z-index: 1000;
}
.pop-box { * {
position: relative;
z-index: 1111;
box-sizing: border-box;
border-radius: 16px;
padding-top: 39px;
background-color: #ffffff;
// width: 520px;
width: 640px;
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
line-height: normal;
}
.pop-header {
font-size: 24px;
font-weight: 650;
color: #000000;
// margin-bottom: 35px;
}
.please-choose {
color: #555555;
font-size: 14px;
margin-top: 26px;
margin-bottom: 24px;
padding-left: 35px;
}
.choice-box {
justify-content: space-between;
flex-wrap: wrap;
padding: 0 35px 49px;
.choice-item,
.choice-long-item {
background-color: #f6f6f6;
height: 160px;
width: 220px;
border-radius: 16px;
margin-bottom: 10px;
box-sizing: border-box; box-sizing: border-box;
padding-top: 18px;
.choice-name {
font-weight: 650;
font-size: 18px;
color: #000000;
position: relative;
padding-left: 34px;
text-align: left;
&::after {
content: "";
position: absolute;
top: 50%;
left: 16px;
transform: translateY(-50%);
background-color: #50e3c2;
width: 6px;
height: 16px;
border-radius: 3px;
}
}
&:hover {
cursor: pointer;
background-color: rgb(242, 242, 242);
.choice-arrows {
background-color: #000;
background-image: url('@/assets/img/edit/selectArrow-white.svg');
}
}
} }
.choice-long-item { .flexflex {
width: 450px; display: flex;
justify-content: space-between;
height: 100px;
padding-right: 20px;
.choice-arrows {
margin: 0;
margin-top: -18px;
}
} }
.choice-explain { .flex1 {
flex: 1;
}
.flexcenter {
display: flex;
justify-content: center;
align-items: center;
}
.flexacenter {
display: flex;
align-items: center;
}
.flexjcenter {
display: flex;
justify-content: center;
}
.btn {
position: absolute;
top: 0;
left: 0;
// background-color: #50e3c2;
width: 100%;
height: 100%;
}
.pop-mask {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.817647058823529);
z-index: 1000;
}
&.pop-box {
position: relative;
z-index: 1111;
box-sizing: border-box;
// border-radius: 16px;
padding-top: 39px;
background-color: #ffffff;
// width: 520px;
// width: 640px;
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
line-height: normal;
}
.pop-header {
font-size: 24px;
font-weight: 650;
color: #000000;
// margin-bottom: 35px;
}
.please-choose {
color: #555555; color: #555555;
font-size: 14px; font-size: 14px;
font-weight: 400; margin-top: 26px;
margin-top: 10px; margin-bottom: 24px;
margin-bottom: 21px; padding-left: 35px;
padding-left: 34px;
text-align: left;
} }
.choice-arrows { .choice-box {
width: 40px; justify-content: space-between;
height: 40px; flex-wrap: wrap;
background-color: #fddf6d; padding: 0 35px 49px;
border-radius: 50%;
margin: 0 auto;
background-image: url('@/assets/img/edit/selectArrow.png');
background-size: 24px;
background-repeat: no-repeat;
background-position: center;
}
}
.close-icon { .choice-item,
position: absolute; .choice-long-item {
top: 20px; background-color: #f6f6f6;
right: 14px; height: 160px;
width: 14px; width: 220px;
height: 14px; border-radius: 16px;
cursor: pointer; margin-bottom: 10px;
} box-sizing: border-box;
padding-top: 18px;
.affirm-hint { .choice-name {
color: #333333; font-weight: 650;
margin: 0 auto; font-size: 18px;
text-align: left; color: #000000;
padding: 0 30px; position: relative;
} padding-left: 34px;
text-align: left;
.affirm-a-hint { &::after {
text-align: center; content: "";
margin-top: 20px; position: absolute;
} top: 50%;
left: 16px;
transform: translateY(-50%);
background-color: #50e3c2;
width: 6px;
height: 16px;
border-radius: 3px;
}
}
.affirm-b-hint { &:hover {
margin: 36px auto 0; cursor: pointer;
} background-color: rgb(242, 242, 242);
.rules-box { .choice-arrows {
background: rgba(246, 246, 246, 1); background-color: #000;
margin: 30px; background-image: url('@/assets/img/edit/selectArrow-white.svg');
border-radius: 10px; }
padding: 15px; }
.rules-item {
line-height: 24px;
&:not(:last-of-type) .rules-text {
border-bottom: 1px dashed #ebebeb;
} }
.rules-text { .choice-long-item {
padding: 20px 0; width: 450px;
font-size: 15px; justify-content: space-between;
height: 100px;
padding-right: 20px;
.choice-arrows {
margin: 0;
margin-top: -18px;
}
}
.choice-explain {
color: #555555;
font-size: 14px;
font-weight: 400;
margin-top: 10px;
margin-bottom: 21px;
padding-left: 34px;
text-align: left;
}
.choice-arrows {
width: 40px;
height: 40px;
background-color: #fddf6d;
border-radius: 50%;
margin: 0 auto;
background-image: url('@/assets/img/edit/selectArrow.png');
background-size: 24px;
background-repeat: no-repeat;
background-position: center;
} }
} }
.rules-icon { .close-icon {
width: 15px; position: absolute;
height: 15px; top: 20px;
margin-top: 25px; right: 14px;
margin-right: 12px; width: 14px;
} height: 14px;
}
.footer {
padding: 0 15px;
height: 100px;
border-top: 1px solid #ebebeb;
.footer-item {
width: 200px;
height: 50px;
border-radius: 40px;
font-size: 20px;
cursor: pointer; cursor: pointer;
background-color: #ffffff;
border: 1px solid rgba(215, 215, 215, 1);
&:first-of-type {
margin-right: 20px;
}
&.affirm {
border: none;
background-color: rgba(98, 177, 255, 1);
color: #ffffff;
font-weight: 650;
}
} }
.affirm-hint {
color: #333333;
margin: 0 auto;
text-align: left;
padding: 0 30px;
}
.affirm-a-hint {
text-align: center;
margin-top: 20px;
}
.affirm-b-hint {
margin: 36px auto 0;
}
.rules-box {
background: rgba(246, 246, 246, 1);
margin: 30px;
border-radius: 10px;
padding: 15px;
.rules-item {
line-height: 24px;
&:not(:last-of-type) .rules-text {
border-bottom: 1px dashed #ebebeb;
}
.rules-text {
padding: 20px 0;
font-size: 15px;
}
}
.rules-icon {
width: 15px;
height: 15px;
margin-top: 25px;
margin-right: 12px;
}
}
.footer {
padding: 0 15px;
height: 100px;
border-top: 1px solid #ebebeb;
.footer-item {
width: 200px;
height: 50px;
border-radius: 40px;
font-size: 20px;
cursor: pointer;
background-color: #ffffff;
border: 1px solid rgba(215, 215, 215, 1);
&:first-of-type {
margin-right: 20px;
}
&.affirm {
border: none;
background-color: rgba(98, 177, 255, 1);
color: #ffffff;
font-weight: 650;
}
}
}
} }