101 lines
2.3 KiB
Vue
101 lines
2.3 KiB
Vue
<template>
|
|
<Card title="党员风采">
|
|
<div class="bottom-center">
|
|
<div class="party-member">
|
|
<div class="member-content" v-for="item in list" :key="item.id">
|
|
<div class="name">
|
|
<i>{{ item.name }}</i>
|
|
</div>
|
|
<div class="photo">
|
|
<img :src="driverPhoto" alt="" />
|
|
</div>
|
|
<div class="introduce">{{ item.introduce }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import Card from "@/components/card.vue";
|
|
import driverPhoto from "@/assets/images/comprehensiveManage/project3.png";
|
|
import { onMounted, reactive, ref, onBeforeUnmount } from "vue";
|
|
const list = reactive([
|
|
{
|
|
id: 1,
|
|
name: "宋小秋",
|
|
introduce: "遵纪守法，与时俱进。 做一名对社会有贡献的人"
|
|
},
|
|
{
|
|
id: 2,
|
|
name: "黄磊",
|
|
introduce: "遵纪守法，与时俱进。 做一名对社会有贡献的人"
|
|
},
|
|
{
|
|
id: 3,
|
|
name: "郭莎莎",
|
|
introduce: "遵纪守法，与时俱进。 做一名对社会有贡献的人"
|
|
},
|
|
{
|
|
id: 4,
|
|
name: "方洪鑫",
|
|
introduce: "遵纪守法，与时俱进。 做一名对社会有贡献的人"
|
|
},
|
|
{
|
|
id: 5,
|
|
name: "郑欣敏",
|
|
introduce: "遵纪守法，与时俱进。 做一名对社会有贡献的人"
|
|
}
|
|
]);
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.bottom-center {
|
|
width: 100%;
|
|
height: 100%;
|
|
.party-member {
|
|
height: 100%;
|
|
padding: 0 4%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
.member-content {
|
|
width: 17%;
|
|
height: 100%;
|
|
margin-top: 5%;
|
|
.name {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 70%;
|
|
height: 12%;
|
|
font-family: OPPOSans-Regular, OPPOSans;
|
|
margin: auto;
|
|
background: url("@/assets/images/smartPartyBuilding/nameBg.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
font-size: 14px;
|
|
color: #ffffff;
|
|
}
|
|
.photo {
|
|
width: 70%;
|
|
height: 50%;
|
|
margin: auto;
|
|
margin-top: 3%;
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.introduce {
|
|
width: 100%;
|
|
margin-top: 8%;
|
|
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
|
background: url("@/assets/images/smartPartyBuilding/textBg.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
font-size: 1px;
|
|
color: #a0b8e5;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|