XiaoMo/gterFang
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

详情部分

Browse Source
This commit is contained in:
luJianJun
2023-07-20 19:03:08 +08:00
parent 4adeb65dbd
commit 8cc4549dca
14 changed files with 331 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
src/views/detail.vue
View File

@@ -3,17 +3,55 @@
<pageTopBar></pageTopBar>
<div class="dis-f jus-x al-item">
<div class="body-maxWidth mg-t-35">
<div class="title-top-box">
<div class="breadcrumb-box">
<el-breadcrumb :separator-icon="ArrowRight">
<el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
<el-breadcrumb-item>promotion management</el-breadcrumb-item>
<el-breadcrumb-item>promotion list</el-breadcrumb-item>
<el-breadcrumb-item>promotion detail</el-breadcrumb-item>
</el-breadcrumb>
<breadcrumb></breadcrumb>
<div class="dis-f jus-bet" style="transform: translateY(-15px);">
<div class="info-box">
<div class="detail-price-box">
<span class="unit">HK$</span><span class="rent">123456</span><span>/月</span>
</div>
<div class="dis-f al-item detail-condition-box">
<div class="condition condition-border">
<div class="dis-f al-item">
<div class="icon">
</div>
整租
</div>
<div class="type-text">
两房
</div>
</div>
<div class="condition condition-border">
<div class="dis-f al-item">
<div class="icon">
</div>
租期
</div>
<div class="type-text">
一年
</div>
</div>
<div class="condition condition-border">
<div class="dis-f al-item">
<div class="icon">
</div>
起租日期
</div>
<div class="type-text">
随时
</div>
</div>
</div>
<div>
</div>
</div>
<div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
@@ -31,6 +69,7 @@ import pageTopBar from '../components/pageTopBar/pageTopBar.vue';
import circleBtn from '@/components/public/circle-btn.vue'
import api from "../utils/api";
import footerTool from '@/components/footer/footer.vue'
import breadcrumb from '../components/detail/breadcrumb.vue'
@@ -69,9 +108,9 @@ img {
justify-content: space-between;
}
.title-top-box {
width: 1200px;
height: 186px;
.info-box {
width: 876px;
height: 1650px;
background: inherit;
background-color: rgba(255, 255, 255, 1);
box-sizing: border-box;
@@ -83,10 +122,68 @@ img {
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
font-size: 14px;
transform: translateY(-38px);
padding: 30px 20px;
.breadcrumb-box {
padding: 20px;
.detail-price-box {
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400;
font-size: 16px;
color: #555555;
.rent {
font-family: 'Arial-Black', 'Arial Black', sans-serif;
font-weight: 900;
font-size: 28px;
color: #F95D5D;
margin: 0 5px;
}
.unit {
font-family: 'Arial-Black', 'Arial Black', sans-serif;
font-weight: 900;
color: #000000;
}
}
.detail-condition-box {
width: 816px;
height: 80px;
background: inherit;
background-color: rgba(246, 246, 246, 1);
border: none;
border-radius: 12px;
margin-top: 30px;
.condition-border {
border-right: 1px solid #ebebeb;
}
.condition {
padding: 15px 0;
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400;
font-style: normal;
color: #7F7F7F;
width: 272px;
.icon {
border: 6px solid #61b1fc;
border-top: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid transparent;
margin-right: 10px;
}
.type-text {
margin-top: 8px;
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
font-weight: 650;
font-style: normal;
font-size: 17px;
color: #000000;
margin-left: 22px;
}
}
}
}
</style>