zhaoyang/estate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

储藏室页面部分结构

Browse Source
This commit is contained in:
Zy
2026-04-06 18:00:46 +08:00
parent f414026af8
commit ee55b4dca7
15 changed files with 805 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

194
src/views/community/index.vue Normal file
View File

@@ -0,0 +1,194 @@
<template>
<div class="container">
<div class="community_nav_box">
<div class="currentbox">当前小区：xxxxxxxxxxxxx</div>
<div class="subtitle flex align-center">
<div class="line"></div>
<div class="changecommunity">切换小区</div>
</div>
</div>
<div class="communityBody">
<div
class="coummunity_card"
:class="{
activeCommunity: index === 2
}"
v-for="(item, index) in list"
:key="index"
>
<img src="https://picsum.photos/400/400" alt="" />
<div class="coummunityaction_box">
<div class="coummunityname">{{ item.name }}</div>
<div class="counmmunityaddress">{{ item.address }}</div>
</div>
<div class="actions flex">
<div>管理</div>
<div>编辑</div>
<div>删除</div>
</div>
</div>
<div @click="handleAdd" class="coummunity_card addActions flex flex-items-center justify-center">
<div class="addCoummunity">
<el-icon>
<AddLocation></AddLocation>
</el-icon>
<div>添加小区</div>
</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
const list = ref([
{
name: '北境碧桂园小区',
address: '北境朝北市塔reek儿大道368号'
},
{
name: '北境碧桂园小区',
address: '北境朝北市塔reek儿大道368号'
},
{
name: '北境碧桂园小区',
address: '北境朝北市塔reek儿大道368号'
},
{
name: '北境碧桂园小区',
address: '北境朝北市塔reek儿大道368号'
},
{
name: '北境碧桂园小区',
address: '北境朝北市塔reek儿大道368号'
}
]);
const router = useRouter();
function handleAdd() {
console.log('add');
router.push({
path: '/community/AddCommunity'
});
}
</script>
<style scoped lang="scss">
.container {
width: 100%;
margin: 0 auto;
padding: 20px;
background-color: #f5f7fb;
.community_nav_box {
height: 98px;
border-radius: 5px;
background-color: rgba(255, 255, 255, 1);
padding: 20px;
.currentbox {
height: 20px;
line-height: 20px;
color: rgba(102, 102, 102, 1);
font-size: 14px;
margin-bottom: 20px;
}
.subtitle {
.line {
margin-top: 4px;
width: 5px;
height: 19px;
border-radius: 5px;
background-color: rgba(26, 117, 255, 1);
margin-right: 5px;
}
.changecommunity {
height: 25px;
line-height: 25px;
color: rgba(51, 51, 51, 1);
font-size: 18px;
}
}
}
.communityBody {
padding: 30px;
color: #000;
display: flex;
flex-wrap: wrap;
align-items: center;
.coummunity_card {
width: 330px;
height: 330px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: rgba(255, 255, 255, 1);
margin-right: 15px;
margin-bottom: 15px;
overflow: hidden;
img {
height: 200px;
width: 100%;
object-fit: cover;
}
.coummunityaction_box {
height: 100px;
padding: 10px 10px;
.counmmunityaddress {
margin-top: 20px;
font-size: small;
color: #ccc;
}
}
.actions {
height: 30px;
line-height: 30px;
div {
border-top: 1px solid #ccc;
border-right: 1px solid #ccc;
flex: 1;
text-align: center;
font-size: small;
color: #4791ff;
cursor: pointer;
&:hover {
background-color: #f5f7fb;
}
}
& > div:last-child {
color: red;
border-right: none;
}
}
.addCoummunity {
height: 40px;
text-align: center;
}
&.addActions {
cursor: pointer;
&:hover {
background-color: #f5f7fb;
}
}
}
}
}
.activeCommunity {
position: relative;
&::after {
display: block;
position: absolute;
top: 10px;
right: -30px;
transform: rotateZ(45deg);
content: '当前小区';
width: 100px;
height: 20px;
line-height: 20px;
font-size: 12px;
color: white;
text-align: center;
background-color: green;
}
}
</style>