Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found

Target

Select target project
  • fz2907/switchroom
1 result
Show changes
Commits on Source (4)
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 10852 additions and 65 deletions
FrontendFolder/switch-room/src/App.vue
View file @ 63ae5ae4
......@@ -3,9 +3,21 @@ import AppFooter from "@/components/AppFooter.vue";
import AppHeader from "@/components/AppHeader.vue";
</script>
<template>
<app-header v-if="!$route.meta.hideHeader"></app-header>
<router-view></router-view>
<app-footer></app-footer>
<body>
<app-header v-if="!$route.meta.hideHeader"></app-header>
<router-view class="wrapper"></router-view>
<app-footer class="footer"></app-footer>
</body>
</template>
<style></style>
\ No newline at end of file
<style>
body {
text-align: center;
display: flex;
flex-direction: column;
min-height: 100vh;
}
.wrapper {
flex: 1;
}
</style>
FrontendFolder/switch-room/src/assets/house/p1.jpeg 0 → 100644
View file @ 63ae5ae4
FrontendFolder/switch-room/src/assets/house/p1.jpeg

47 KiB

FrontendFolder/switch-room/src/assets/house/p2.jpeg 0 → 100644
View file @ 63ae5ae4
FrontendFolder/switch-room/src/assets/house/p2.jpeg

149 KiB

FrontendFolder/switch-room/src/components/AppFooter.vue
View file @ 63ae5ae4
......@@ -36,7 +36,7 @@
text-align: left;
font: normal 16px sans-serif;
padding: 45px 50px;
position: fixed;
/*position: fixed;*/
bottom: 0;
left: 0;
right: 0;
......
FrontendFolder/switch-room/src/components/MatchOffer.vue
View file @ 63ae5ae4
<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>
FrontendFolder/switch-room/src/components/MatchWishList.vue
View file @ 63ae5ae4
<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>
FrontendFolder/switch-room/src/services/UserService.ts
View file @ 63ae5ae4
......@@ -24,10 +24,10 @@ function getProfile() {
return serverHttpService.Get(baseUrl + urlPath);
}
export {
export {
postUserDataToServer,
loginUser,
checkLoginSession,
resetPassword,
getProfile
getProfile,
};
FrontendFolder/switch-room/src/views/MatchedView.vue
View file @ 63ae5ae4
<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>