diff --git a/FrontendFolder/switch-room/src/assets/house/p1.jpeg b/FrontendFolder/switch-room/src/assets/house/p1.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..bd83d3c0c4bfe52defd52601ac7b61353c3ecb4b
Binary files /dev/null and b/FrontendFolder/switch-room/src/assets/house/p1.jpeg differ
diff --git a/FrontendFolder/switch-room/src/assets/house/p2.jpeg b/FrontendFolder/switch-room/src/assets/house/p2.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..747ce53102fd55eb22e83544d9ad2b0a421ac8db
Binary files /dev/null and b/FrontendFolder/switch-room/src/assets/house/p2.jpeg differ
diff --git a/FrontendFolder/switch-room/src/components/MatchOffer.vue b/FrontendFolder/switch-room/src/components/MatchOffer.vue
index e9bbdee7837e91396bd1e9239099e6cf65ed75c4..366c4b836850fc29922318559a971ca04376c91d 100644
--- a/FrontendFolder/switch-room/src/components/MatchOffer.vue
+++ b/FrontendFolder/switch-room/src/components/MatchOffer.vue
@@ -1,8 +1,16 @@
<template>
<div class="offerSide">
- <div class="card">
- <div class="container">
- <h4><b>Matched Offer Information</b></h4>
+ <div id="container">
+ <div class="product-details">
+ <h1>Matched Offer Information</h1>
+ <!-- <span class="hint-star star">-->
+ <!-- <i class="fa fa-star" aria-hidden="true"></i>-->
+ <!-- <i class="fa fa-star" aria-hidden="true"></i>-->
+ <!-- <i class="fa fa-star" aria-hidden="true"></i>-->
+ <!-- <i class="fa fa-star" aria-hidden="true"></i>-->
+ <!-- <i class="fa fa-star-o" aria-hidden="true"></i>-->
+ <!-- </span>-->
+
<p>Space Located City: {{ offer.spaceLocateCity }}</p>
<p>Space Located State: {{ offer.state }}</p>
<p>Available Time start: {{ offer.availableTimeStart }}</p>
@@ -10,7 +18,42 @@
<p>Max People: {{ offer.maxNumberOfPeople }}</p>
<p v-if="offer.offering">It is offering now</p>
</div>
+
+ <div class="product-image">
+ <img src="../assets/house/p1.jpeg" class="image" />
+
+ <div class="info">
+ <h2>Offer Description</h2>
+ <ul>
+ <li>
+ <strong>Step1 : </strong>Check the location with required space
+ </li>
+ <li>
+ <strong>Step2 : </strong>Check the time window with required
+ window
+ </li>
+ <li>
+ <strong>Step3 : </strong>Check the housing capacity carefully
+ </li>
+ <li>
+ <strong>Step4 : </strong>Check the status to make sure it is
+ offering
+ </li>
+ </ul>
+ </div>
+ </div>
</div>
+ <!-- <div class="card">-->
+ <!-- <div class="container">-->
+ <!-- <h4><b>Matched Offer Information</b></h4>-->
+ <!-- <p>Space Located City: {{ offer.spaceLocateCity }}</p>-->
+ <!-- <p>Space Located State: {{ offer.state }}</p>-->
+ <!-- <p>Available Time start: {{ offer.availableTimeStart }}</p>-->
+ <!-- <p>Available Time end: {{ offer.availableTimeEnd }}</p>-->
+ <!-- <p>Max People: {{ offer.maxNumberOfPeople }}</p>-->
+ <!-- <p v-if="offer.offering">It is offering now</p>-->
+ <!-- </div>-->
+ <!-- </div>-->
</div>
</template>
@@ -29,18 +72,195 @@ const props = defineProps<{
justify-content: center;
align-items: center;
}
-.card {
- box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
- transition: 0.3s;
+/*body {*/
+/* background: #dfc2f2;*/
+/* background-image: linear-gradient(to right, #ffffb3, #ffe6e6);*/
+/* background-attachment: fixed;*/
+/* background-size: cover;*/
+/*}*/
+
+h1 {
+ font-size: large;
+ text-align: center;
+}
+
+#container {
+ box-shadow: 0 15px 30px 1px grey;
+ background: rgba(255, 255, 255, 0.9);
+ text-align: center;
+ border-radius: 5px;
+ overflow: hidden;
+ height: 400px;
+ width: 800px;
+}
+
+.product-details {
+ position: relative;
+ text-align: left;
+ overflow: hidden;
+ padding: 30px;
+ height: 100%;
+ float: left;
width: 40%;
+}
+
+#container .product-details h1 {
+ font-family: "Bebas Neue", cursive;
+ display: inline-block;
+ position: relative;
+ font-size: 30px;
+ color: #344055;
+ margin: 0;
+}
+
+#container .product-details h1:before {
+ position: absolute;
+ content: "";
+ right: 0%;
+ top: 0%;
+ transform: translate(25px, -15px);
+ font-family: "Bree Serif", serif;
+ display: inline-block;
+ background: #ffe6e6;
+ border-radius: 5px;
+ font-size: 14px;
+ padding: 5px;
+ color: white;
+ margin: 0;
+ animation: chan-sh 6s ease infinite;
+}
+
+.hint-star {
+ display: inline-block;
+ margin-left: 0.5em;
+ color: gold;
+ width: 50%;
+}
+
+#container .product-details > p {
+ font-family: "EB Garamond", serif;
+ text-align: center;
+ font-size: 18px;
+ color: #7d7d7d;
+}
+.control {
+ position: absolute;
+ bottom: 20%;
+ left: 22.8%;
+}
+.btn {
+ transform: translateY(0px);
+ transition: 0.3s linear;
+ background: #809fff;
+ border-radius: 5px;
+ position: relative;
+ overflow: hidden;
+ cursor: pointer;
+ outline: none;
+ border: none;
+ color: #eee;
+ padding: 0;
+ margin: 0;
+}
+
+.btn:hover {
+ transform: translateY(-6px);
+ background: #1a66ff;
+}
+
+.btn span {
+ font-family: "Farsan", cursive;
+ transition: transform 0.3s;
+ display: inline-block;
+ padding: 10px 20px;
+ font-size: 1.2em;
+ margin: 0;
+}
+.btn .price,
+.shopping-cart {
+ background: #333;
+ border: 0;
+ margin: 0;
+}
+
+.btn .price {
+ transform: translateX(-10%);
+ padding-right: 15px;
+}
+
+.btn .shopping-cart {
+ transform: translateX(-100%);
+ position: absolute;
+ background: #333;
+ z-index: 1;
+ left: 0;
+ top: 0;
+}
+
+.btn .buy {
+ z-index: 3;
+ font-weight: bolder;
+}
+
+.btn:hover .price {
+ transform: translateX(-110%);
+}
+
+.btn:hover .shopping-cart {
+ transform: translateX(0%);
+}
+
+.product-image {
+ transition: all 0.3s ease-out;
+ display: inline-block;
+ position: relative;
+ overflow: hidden;
+ height: 100%;
+ float: right;
+ width: 45%;
+ display: inline-block;
+}
+
+#container img {
+ width: 100%;
+ height: 100%;
+}
+
+.info {
+ background: rgba(27, 26, 26, 0.9);
+ font-family: "Bree Serif", serif;
+ transition: all 0.3s ease-out;
+ transform: translateX(-100%);
+ position: absolute;
+ line-height: 1.8;
+ text-align: left;
+ font-size: 105%;
+ cursor: no-drop;
+ color: #fff;
+ height: 100%;
+ width: 100%;
+ left: 0;
+ top: 0;
+}
+
+.info h2 {
text-align: center;
}
+.product-image:hover .info {
+ transform: translateX(0);
+}
-.card:hover {
- box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
+.info ul li {
+ transition: 0.3s ease;
+}
+.info ul li:hover {
+ transform: translateX(50px) scale(1.3);
}
-.container {
- padding: 2px 16px;
+.product-image:hover img {
+ transition: all 0.3s ease-out;
+}
+.product-image:hover img {
+ transform: scale(1.2, 1.2);
}
</style>
diff --git a/FrontendFolder/switch-room/src/components/MatchWishList.vue b/FrontendFolder/switch-room/src/components/MatchWishList.vue
index 2af628d7c9e746f9e2936e9a8bfe67723a3513ec..ee307260147667fe0b5a25307f8c53b3d9765ad5 100644
--- a/FrontendFolder/switch-room/src/components/MatchWishList.vue
+++ b/FrontendFolder/switch-room/src/components/MatchWishList.vue
@@ -1,14 +1,47 @@
<template>
<div class="wishlistSide">
- <div class="card">
- <div class="container">
- <h4><b>Matched required space Information</b></h4>
+ <div id="container">
+ <div class="product-details">
+ <h1>Matched required space Information</h1>
+ <!-- <span class="hint-star star">-->
+ <!-- <i class="fa fa-star" aria-hidden="true"></i>-->
+ <!-- <i class="fa fa-star" aria-hidden="true"></i>-->
+ <!-- <i class="fa fa-star" aria-hidden="true"></i>-->
+ <!-- <i class="fa fa-star" aria-hidden="true"></i>-->
+ <!-- <i class="fa fa-star-o" aria-hidden="true"></i>-->
+ <!-- </span>-->
+
<p>required city: {{ wishlist.cityName }}</p>
<p>required state: {{ wishlist.state }}</p>
<p>required start time: {{ wishlist.startTime }}</p>
<p>required end time: {{ wishlist.endTime }}</p>
<p>required details: {{ wishlist.details }}</p>
</div>
+
+ <div class="product-image">
+ <img src="../assets/house/p2.jpeg" class="image" />
+
+ <div class="info">
+ <h2>Wishlist Description</h2>
+ <ul>
+ <li><strong>Step1 : </strong>Check the location with offer</li>
+ <li><strong>Step2 : </strong>Check the time window with offer</li>
+ <li>
+ <strong>Step3 : </strong>Check the details house keeper leaves
+ </li>
+ </ul>
+ </div>
+ </div>
+ <!-- <div class="card">-->
+ <!-- <div class="container">-->
+ <!-- <h4><b>Matched required space Information</b></h4>-->
+ <!-- <p>required city: {{ wishlist.cityName }}</p>-->
+ <!-- <p>required state: {{ wishlist.state }}</p>-->
+ <!-- <p>required start time: {{ wishlist.startTime }}</p>-->
+ <!-- <p>required end time: {{ wishlist.endTime }}</p>-->
+ <!-- <p>required details: {{ wishlist.details }}</p>-->
+ <!-- </div>-->
+ <!-- </div>-->
</div>
</div>
</template>
@@ -28,18 +61,188 @@ const props = defineProps<{
justify-content: center;
align-items: center;
}
-.card {
- box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
- transition: 0.3s;
+#container {
+ box-shadow: 0 15px 30px 1px grey;
+ background: rgba(255, 255, 255, 0.9);
+ text-align: center;
+ border-radius: 5px;
+ overflow: hidden;
+ height: 400px;
+ width: 800px;
+}
+
+.product-details {
+ position: relative;
+ text-align: left;
+ overflow: hidden;
+ padding: 30px;
+ height: 100%;
+ float: left;
width: 40%;
+}
+
+#container .product-details h1 {
+ font-family: "Bebas Neue", cursive;
+ display: inline-block;
+ position: relative;
+ font-size: 30px;
+ color: #344055;
+ margin: 0;
+}
+
+#container .product-details h1:before {
+ position: absolute;
+ content: "";
+ right: 0%;
+ top: 0%;
+ transform: translate(25px, -15px);
+ font-family: "Bree Serif", serif;
+ display: inline-block;
+ background: #ffe6e6;
+ border-radius: 5px;
+ font-size: 14px;
+ padding: 5px;
+ color: white;
+ margin: 0;
+ animation: chan-sh 6s ease infinite;
+}
+
+.hint-star {
+ display: inline-block;
+ margin-left: 0.5em;
+ color: gold;
+ width: 50%;
+}
+
+h1 {
+ font-size: large;
+ text-align: center;
+}
+
+#container .product-details > p {
+ font-family: "EB Garamond", serif;
text-align: center;
+ font-size: 18px;
+ color: #7d7d7d;
+}
+.control {
+ position: absolute;
+ bottom: 20%;
+ left: 22.8%;
+}
+.btn {
+ transform: translateY(0px);
+ transition: 0.3s linear;
+ background: #809fff;
+ border-radius: 5px;
+ position: relative;
+ overflow: hidden;
+ cursor: pointer;
+ outline: none;
+ border: none;
+ color: #eee;
+ padding: 0;
+ margin: 0;
+}
+
+.btn:hover {
+ transform: translateY(-6px);
+ background: #1a66ff;
}
-.card:hover {
- box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
+.btn span {
+ font-family: "Farsan", cursive;
+ transition: transform 0.3s;
+ display: inline-block;
+ padding: 10px 20px;
+ font-size: 1.2em;
+ margin: 0;
+}
+.btn .price,
+.shopping-cart {
+ background: #333;
+ border: 0;
+ margin: 0;
}
-.container {
- padding: 2px 16px;
+.btn .price {
+ transform: translateX(-10%);
+ padding-right: 15px;
+}
+
+.btn .shopping-cart {
+ transform: translateX(-100%);
+ position: absolute;
+ background: #333;
+ z-index: 1;
+ left: 0;
+ top: 0;
+}
+
+.btn .buy {
+ z-index: 3;
+ font-weight: bolder;
+}
+
+.btn:hover .price {
+ transform: translateX(-110%);
+}
+
+.btn:hover .shopping-cart {
+ transform: translateX(0%);
+}
+
+.product-image {
+ transition: all 0.3s ease-out;
+ display: inline-block;
+ position: relative;
+ overflow: hidden;
+ height: 100%;
+ float: right;
+ width: 45%;
+ display: inline-block;
+}
+
+#container img {
+ width: 100%;
+ height: 100%;
+}
+
+.info {
+ background: rgba(27, 26, 26, 0.9);
+ font-family: "Bree Serif", serif;
+ transition: all 0.3s ease-out;
+ transform: translateX(-100%);
+ position: absolute;
+ line-height: 1.8;
+ text-align: left;
+ font-size: 105%;
+ cursor: no-drop;
+ color: #fff;
+ height: 100%;
+ width: 100%;
+ left: 0;
+ top: 0;
+}
+
+.info h2 {
+ text-align: center;
+}
+.product-image:hover .info {
+ transform: translateX(0);
+}
+
+.info ul li {
+ transition: 0.3s ease;
+}
+.info ul li:hover {
+ transform: translateX(50px) scale(1.3);
+}
+
+.product-image:hover img {
+ transition: all 0.3s ease-out;
+}
+.product-image:hover img {
+ transform: scale(1.2, 1.2);
}
</style>
diff --git a/FrontendFolder/switch-room/src/services/UserService.ts b/FrontendFolder/switch-room/src/services/UserService.ts
index 77fed4b449d1a2805195905150257e14c38d5664..803612967dd6de200f8631a4b942e1c03bb0eb19 100644
--- a/FrontendFolder/switch-room/src/services/UserService.ts
+++ b/FrontendFolder/switch-room/src/services/UserService.ts
@@ -24,10 +24,10 @@ function getProfile() {
return serverHttpService.Get(baseUrl + urlPath);
}
-export {
+export {
postUserDataToServer,
loginUser,
checkLoginSession,
resetPassword,
- getProfile
+ getProfile,
};
diff --git a/FrontendFolder/switch-room/src/views/MatchedView.vue b/FrontendFolder/switch-room/src/views/MatchedView.vue
index 641b85322d138e981295efb15fd422ca156c2742..b0706b641529cd02848d9638ad4a22b2442cf00a 100644
--- a/FrontendFolder/switch-room/src/views/MatchedView.vue
+++ b/FrontendFolder/switch-room/src/views/MatchedView.vue
@@ -1,10 +1,25 @@
<template>
<div class="match-view">
- <p>This is the matched result page</p>
- <match-offer :offer="offer"></match-offer>
- <match-wish-list :wishlist="wishlist"></match-wish-list>
- <button>Sign Agreement Documentation</button>
- <button>It is not suitable</button>
+ <div class="parent">
+ <div class="div1">
+ The following are the matching choices matched by the system for you
+ <br /><strong class="strong-font"
+ >Tips: If after your careful consideration, you agree to the match
+ brought by the system, you need to click Agree to sign the agreement.
+ <br />
+ If you do not agree, you need to click Disagree, and the system will
+ stop pushing for you.</strong
+ >
+ </div>
+ <div class="div2"><match-offer :offer="offer"></match-offer></div>
+ <div class="div3">
+ <match-wish-list :wishlist="wishlist"></match-wish-list>
+ </div>
+ <div class="div4">
+ <button>Sign Agreement</button>
+ <button>It is not suitable</button>
+ </div>
+ </div>
</div>
</template>
@@ -61,6 +76,11 @@ watch(
margin-left: 2%;
}
+.strong-font {
+ color: #1a66ff;
+ font-size: 20px;
+}
+
button,
button::after {
margin-top: 2%;
@@ -156,4 +176,28 @@ button:hover::after {
transform: translate(0);
}
}
+
+.parent {
+ margin-top: 5%;
+ display: grid;
+ grid-template-columns: repeat(6, 1fr);
+ grid-template-rows: repeat(5, 1fr);
+ grid-column-gap: 0px;
+ grid-row-gap: 0px;
+}
+
+.div1 {
+ grid-area: 1 / 1 / 2 / 7;
+ font-size: 30px;
+ font-family: Symbol;
+}
+.div2 {
+ grid-area: 2 / 1 / 5 / 4;
+}
+.div3 {
+ grid-area: 2 / 4 / 5 / 7;
+}
+.div4 {
+ grid-area: 5 / 1 / 6 / 7;
+}
</style>