<!-- -->
|
<template>
|
<div class='buildingTable'>
|
<div class="buildingTable-title" @click="exportClick">
|
<div>
|
<img src="../../../../public/img/icon/business.png" alt="" srcset="">
|
</div>
|
<div style="margin-left: 5px;">
|
<div class="buildingTable-title-text">
|
<span>楼盘表</span>
|
</div>
|
<div class="buildingTable-title-text-botom"></div>
|
</div>
|
</div>
|
<div v-if="buildingTableShow" class="list">
|
<div class="buildingTable-item" v-for="(item, index) in 60" :key="index">
|
<!-- <div class="buildingTable-item-text">
|
{{ index }}
|
</div> -->
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
//import引入的组件需要注入到对象中才能使用
|
components: {},
|
data() {
|
//这里存放数据
|
return {
|
buildingTableShow: false,
|
};
|
},
|
//监听属性 类似于data概念
|
computed: {},
|
//监控data中的数据变化
|
watch: {},
|
//方法集合
|
methods: {
|
exportClick() {
|
console.log('点击了');
|
this.buildingTableShow = !this.buildingTableShow;
|
},
|
|
},
|
//生命周期 - 创建完成（可以访问当前this实例）
|
created() {
|
|
},
|
//生命周期 - 挂载完成（可以访问DOM元素）
|
mounted() {
|
|
},
|
beforeCreate() { }, //生命周期 - 创建之前
|
beforeMount() { }, //生命周期 - 挂载之前
|
beforeUpdate() { }, //生命周期 - 更新之前
|
updated() { }, //生命周期 - 更新之后
|
beforeDestroy() { }, //生命周期 - 销毁之前
|
destroyed() { }, //生命周期 - 销毁完成
|
activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
|
}
|
</script>
|
<style lang='scss' scoped>
|
//@import url(); 引入公共css类
|
|
.buildingTable {
|
margin-top: 10px;
|
overflow: hidden;
|
overflow-y: auto;
|
}
|
|
.buildingTable-title {
|
display: flex;
|
|
img {
|
width: 30px;
|
height: 30px;
|
}
|
}
|
|
.buildingTable-title-text {
|
display: flex;
|
font-size: 16px;
|
line-height: 24px;
|
width: 90px;
|
}
|
|
.buildingTable-title-text:after {
|
content: "";
|
width: 0;
|
height: 0;
|
margin-left: 13px;
|
border-top: solid 6px transparent;
|
border-left: solid 6px #ffff;
|
border-bottom: solid 6px transparent;
|
margin-top: 6px;
|
}
|
|
.buildingTable-title-text-botom {
|
height: 4px;
|
background: linear-gradient(to right, #4c90ff, #c0d2f1);
|
}
|
|
.list {
|
display: flex;
|
flex-wrap: wrap;
|
}
|
|
.buildingTable-item-text {
|
background-color: #f1f1f1;
|
margin: 10px;
|
color: black;
|
text-align: center;
|
font-size: 16px;
|
}
|
</style>
|
