parent
4d9b0c039b
commit
ac867291f6
After Width: | Height: | Size: 119 KiB |
After Width: | Height: | Size: 24 KiB |
@ -0,0 +1,152 @@
|
||||
<template>
|
||||
<div class="grid-item-main floor-item">
|
||||
<div class="corlor-grid" :class="size">
|
||||
<div class="left-color" :style="{ background: item.leftColor }"></div>
|
||||
<div class="rigth-color">
|
||||
<div :style="{ background: item.rightTopColor }"></div>
|
||||
</div>
|
||||
<div class="house-number">{{ item.name }}</div>
|
||||
<div class="item-type">
|
||||
<el-tooltip effect="dark" content="党员" placement="top">
|
||||
<img
|
||||
src="@/assets/images/ui/isd.png"
|
||||
alt=""
|
||||
class="typeis"
|
||||
v-show="item.is_d"
|
||||
/></el-tooltip>
|
||||
<el-tooltip effect="dark" content="退伍军人" placement="top">
|
||||
<img
|
||||
src="@/assets/images/ui/isj.png"
|
||||
class="typeis"
|
||||
v-show="item.is_j"
|
||||
/>
|
||||
</el-tooltip>
|
||||
<el-tooltip effect="dark" content="帮扶对象" placement="top">
|
||||
<img
|
||||
src="@/assets/images/ui/isk.png"
|
||||
alt=""
|
||||
class="typeis"
|
||||
v-show="item.is_k"
|
||||
/></el-tooltip>
|
||||
<el-tooltip effect="dark" content="重点人群" placement="top">
|
||||
<img
|
||||
src="@/assets/images/ui/isx.png"
|
||||
alt=""
|
||||
class="typeis"
|
||||
v-show="item.is_x"
|
||||
/></el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: "medium",
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.grid-item-main {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.medium {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.small {
|
||||
width: 35px;
|
||||
height: 15px;
|
||||
}
|
||||
.corlor-grid {
|
||||
position: relative;
|
||||
border: 1px solid white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
// overflow: hidden;
|
||||
.left-color {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
}
|
||||
.rigth-color {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-left: 1px solid white;
|
||||
& > div {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
}
|
||||
.rigth-bottom {
|
||||
background: red;
|
||||
border-top: 1px solid white;
|
||||
// border-left: 1px solid white;
|
||||
}
|
||||
}
|
||||
.house-number {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 18px;
|
||||
color: #000;
|
||||
text-shadow: #fff 1px 0 0, #fff 0 1px 0, #fff -1px 0 0, #fff 0 -1px 0;
|
||||
font-family: "DIN-Condensed-Bold-2.ttf";
|
||||
}
|
||||
.grid-islable {
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: 0;
|
||||
width: 120%;
|
||||
text-align: left;
|
||||
img {
|
||||
display: inline-block;
|
||||
width: 0.22rem;
|
||||
height: 0.22rem;
|
||||
}
|
||||
}
|
||||
.grid-point {
|
||||
position: absolute;
|
||||
right: -25%;
|
||||
height: 0.09rem;
|
||||
width: 0.09rem;
|
||||
border-radius: 50%;
|
||||
border: 0.03rem solid white;
|
||||
}
|
||||
|
||||
.item-type {
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: 0;
|
||||
.typeis {
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.grid-item-main:hover {
|
||||
border: 2px solid orange;
|
||||
transform: scale(1.2); /* 放大1.5倍 */
|
||||
}
|
||||
</style>
|
Loading…
Reference in new issue