zhaoyang/sunProduct
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

161
src/views/community/AddCommunity.vue Normal file
View File

@@ -0,0 +1,161 @@
<template>
<div class="container AddBuildingBox">
<PageHeader title="新建小区"></PageHeader>
<el-form inline class="formBody" ref="formRef" :model="form" :rules="rules" label-width="100px">
<div class="AddBuildingBody">
<div class="title">基本信息</div>
<div class="addBuildingFormBody">
<el-form-item label="小区名称" prop="buildingName">
<el-input v-model="form.buildingName" placeholder="请输入小区名称" />
</el-form-item>
<el-form-item label="小区编号" prop="buildingCode">
<el-input v-model="form.buildingCode" placeholder="请输入小区编号" />
</el-form-item>
<el-form-item label="所在城市" prop="buildingType">
<el-input v-model="form.buildingType" placeholder="请输入楼高(m)" />
</el-form-item>
<el-form-item label="详细地址" prop="buildingArea">
<el-input v-model="form.buildingArea" placeholder="请输入楼栋结构" />
</el-form-item>
<el-form-item label="建成时间" prop="buildingArea">
<el-date-picker v-model="builtTime" type="date" placeholder="选择建成时间" />
</el-form-item>
<el-form-item label="房屋用途" prop="buildingArea">
<el-input v-model="form.buildingArea" placeholder="请输入楼栋结构" />
</el-form-item>
<el-form-item label="小区面积" prop="buildingArea">
<el-input v-model="form.buildingArea" placeholder="请输入小区面积"><template #append>㎡</template> </el-input>
</el-form-item>
<el-form-item label="小区楼栋" prop="buildingArea">
<el-input v-model="form.buildingArea" placeholder="请输入小区楼栋"><template #append>栋</template> </el-input>
</el-form-item>
<el-form-item label="小区房屋" prop="buildingArea">
<el-input v-model="form.buildingArea" placeholder="请输入小区房屋"><template #append>间</template> </el-input>
</el-form-item>
<el-form-item label="小区面积" prop="buildingArea">
<el-input v-model="form.buildingArea" placeholder="请输入小区面积"><template #append>㎡</template> </el-input>
</el-form-item>
<el-form-item label="车位数量" prop="buildingArea">
<el-input v-model="form.buildingArea" placeholder="请输入车位数量">
<template #append>个</template>
</el-input>
</el-form-item>
<el-form-item style="width: 100%" label="小区图片" prop="buildingArea">
<el-input v-model="form.buildingArea" placeholder="请输入楼栋结构" />
</el-form-item>
<el-form-item style="width: 100%" label="小区简介" prop="buildingArea">
<el-input v-model="form.textarea" :rows="5" type="textarea" placeholder="小区简介" />
</el-form-item>
</div>
</div>
<div class="AddBuildingBody">
<div class="title">负责人信息</div>
<div class="addBuildingFormBody addBuildingForm_User_Body">
<el-form-item label="姓名" prop="buildingName">
<el-input v-model="form.buildingName" placeholder="请输入姓名" />
</el-form-item>
<el-form-item label="电话" prop="buildingCode">
<el-input v-model="form.buildingCode" placeholder="请输入电话" />
</el-form-item>
<el-form-item label="微信" prop="buildingArea">
<el-input v-model="form.buildingArea" placeholder="请输入微信"> </el-input>
</el-form-item>
<el-form-item label="QQ" prop="buildingArea">
<el-input v-model="form.buildingArea" placeholder="请输入QQ"> </el-input>
</el-form-item>
<el-form-item label="邮箱" prop="buildingArea">
<el-input v-model="form.buildingArea" placeholder="请输入邮箱"> </el-input>
</el-form-item>
<div class="pl-100px">
<el-button type="primary" @click="submitForm">提交</el-button>
<el-button @click="cancelForm">取消</el-button>
</div>
</div>
</div>
</el-form>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import PageHeader from '@/components/Pageheader/index.vue';
const formRef = ref();
const form = ref({
buildingName: '',
buildingCode: '',
buildingType: '',
buildingArea: '',
buildingAddress: null,
buildingDescription: null,
textarea: ''
});
const builtTime = ref(null);
const rules = ref({
buildingName: [{ required: true, message: '请输入楼栋名称', trigger: 'blur' }],
buildingAddress: [{ required: true, message: '请输入单元数', trigger: 'blur' }],
buildingDescription: [{ required: true, message: '请输入楼层', trigger: 'blur' }]
});
const submitForm = () => {
formRef.value?.validate(async (valid: boolean) => {
if (valid) {
console.log(form.value);
}
});
};
const cancelForm = () => {
console.log('取消');
};
</script>
<style scoped lang="scss">
.AddBuildingBox {
padding: 15px;
height: 100%;
width: 100%;
}
.AddBuildingBody {
margin-top: 20px;
display: flex;
flex-direction: column;
justify-content: center;
background-color: white;
padding: 15px;
.title {
height: 40px;
line-height: 40px;
padding-left: 20px;
background-color: rgba(255, 255, 255, 1);
color: rgba(16, 16, 16, 1);
border-bottom: 1px solid #bbbbbb;
margin-bottom: 60px;
}
.addBuildingFormBody {
width: 900px;
margin: 0 auto;
padding-bottom: 40px;
.el-form-item {
width: 46%;
margin-bottom: 20px;
&:deep(.el-input, .el-date-editor.el-input) {
width: 300px;
}
}
.el-button {
width: 80px;
height: 35px;
margin-right: 20px;
}
}
}
.addBuildingForm_User_Body {
width: 900px;
margin: 0 auto;
.el-button {
width: 80px;
height: 35px;
line-height: 35px;
}
}
</style>

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>