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-13 18:08:54 +08:00
parent c051c60e7e
commit 5a918cda3e
7 changed files with 367 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

261
src/components/biserialListItem/biserialListItem.vue Normal file
View File

@@ -0,0 +1,261 @@
<template>
<div class="list-item">
<div class="authentication-box dis-f al-item">
<img src="../../assets/homeImage/authenticationLogo.png" class="logo" alt="">
<img src="../../assets/homeImage/topAuthenticationBg.svg" class="bg" alt="">
<img src="../../assets/homeImage/authenticationText.png" class="text-img" alt="">
</div>
<div class="top-box">
<div class="title-text">
123456789
</div>
<div class="mg-t-10 dis-f al-item jus-bet s-w-100">
<div>
<div class="dis-f al-item">
<div class="tab-item" :class="[{ 'mg-l-5': i > 0 }, { 'first-tab': i === 0 }]"
v-for="(item, i) in 5" :key="i">
{{ item }}
</div>
</div>
<div class="address-text dis-f al-item">
<img src="" class="img" alt="">
<span>九龙 > 尖沙咀/佐敦</span>
</div>
<div class="price-text dis-f" style="align-items: end;">
<span class="unit">HK$</span>
<span class="price">5600</span>
<span>/月</span>
</div>
</div>
<div class="img">
<img src="" class="img" alt="">
</div>
</div>
<img src="../../assets/homeImage/corner.svg" class="tab-img" alt="">
</div>
<div class="btm-box dis-f al-item">
<img src="" class="user-img" alt="">
<span class="user-name">123</span>
<div class="btn">456456</div>
</div>
</div>
</template>
<script setup>
</script>
<style scoped>
img {
object-fit: contain;
}
.dis-f {
display: flex;
}
.jus-x {
justify-content: center;
}
.jus-bet {
justify-content: space-between;
}
.al-item {
align-items: center;
}
.pos-r {
position: relative;
}
.body-maxWidth {
width: 1200px;
min-width: 1200px;
}
.s-w-100 {
width: 100%;
}
.authentication-box {
width: 100%;
height: 30px;
.bg {
height: 100%;
height: 100%;
}
.logo {
width: 18px;
height: 18px;
position: absolute;
left: 15px;
}
.text-img {
width: 81px;
height: 81px;
position: absolute;
left: 35px;
}
}
.list-item {
width: 590px;
background-color: rgba(255, 255, 255, 1);
border: none;
border-radius: 16px;
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
position: relative;
.mg-t-10 {
margin-top: 10px;
}
.img {
width: 100px;
height: 100px;
object-fit: cover;
border-radius: 10px;
}
.top-box {
padding: 20px;
.tab-img {
width: 32px;
height: 32px;
position: absolute;
top: 0;
right: 0;
z-index: 66;
}
.title-text {
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 18px;
color: #000000;
text-align: left;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.mg-l-5 {
margin-left: 5px;
}
.tab-item {
padding: 5px;
background: inherit;
background-color: rgba(242, 242, 242, 1);
border: none;
border-radius: 6px;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 14px;
color: #7F7F7F;
text-align: center;
}
.address-text {
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 15px;
color: #555555;
margin-top: 15px;
.img {
width: 18px;
height: 18px;
margin-right: 10px;
}
}
.price-text {
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 14px;
color: #555555;
margin-top: 15px;
.price {
font-family: 'Arial-Black', 'Arial Black', sans-serif;
font-weight: 900;
font-size: 20px;
color: #F95D5D;
line-height: 20px;
}
.unit {
font-family: 'Arial-Black', 'Arial Black', sans-serif;
font-weight: 900;
color: #000000;
font-size: 14px;
}
}
.first-tab {
background: #000;
color: #fff;
}
}
.btm-box {
padding: 20px;
border-top: 1px dashed #d7d7d7;
.user-img {
width: 24px;
height: 24px;
border-radius: 50%;
}
.user-name {
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400;
font-style: normal;
color: #555555;
font-size: 14px;
margin-left: 10px;
}
.btn {
margin-left: 10px;
padding: 3px 5px;
background: inherit;
background-color: rgba(242, 242, 242, 0);
box-sizing: border-box;
border-width: 1px;
border-style: solid;
border-color: rgba(215, 215, 215, 1);
border-radius: 42px;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 14px;
color: #555555;
text-align: center;
}
}
}
</style>