98 lines
1.8 KiB
Vue
98 lines
1.8 KiB
Vue
<template>
|
||
<view class="data">
|
||
<view class="row">
|
||
<view class="topLeft">{{ item.topLeft || '暂无数据' }}</view>
|
||
<view>{{ item.topRight || '暂无数据' }}</view>
|
||
</view>
|
||
<view class="row">
|
||
<view class="subRow">
|
||
<view>{{ item.bottomLeft || '暂无数据' }}</view>
|
||
<view>{{ item.bottomRight || '暂无数据' }}</view>
|
||
</view>
|
||
<view>
|
||
<view class="bottomRight" @click="onViewDetail">查看详细</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'InstitutionalItem',
|
||
props: {
|
||
// 数据项
|
||
item: {
|
||
type: Object,
|
||
required: true,
|
||
default: () => ({
|
||
topLeft: '',
|
||
topRight: '',
|
||
bottomLeft: '',
|
||
bottomRight: ''
|
||
})
|
||
},
|
||
// 数据索引
|
||
index: {
|
||
type: Number,
|
||
default: 0
|
||
}
|
||
},
|
||
methods: {
|
||
// 查看详细
|
||
onViewDetail() {
|
||
// 触发父组件的事件
|
||
this.$emit('view-detail', {
|
||
item: this.item,
|
||
index: this.index
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.data {
|
||
background-color: #FFFBF5;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
width: 720rpx; /* 固定宽度，适配父容器的padding */
|
||
box-sizing: border-box;
|
||
height: 180rpx;
|
||
border-radius: 11px;
|
||
border: 1px solid #C7A26D;
|
||
margin: 15rpx auto; /* 使用 auto 实现水平居中 */
|
||
}
|
||
|
||
.row {
|
||
flex: 1;
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 0 20rpx;
|
||
}
|
||
|
||
.subRow {
|
||
display: flex;
|
||
}
|
||
|
||
.subRow view {
|
||
padding-right: 20px;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.topLeft {
|
||
font-size: 21px;
|
||
font-weight: 1000;
|
||
color: #522510;
|
||
}
|
||
|
||
.bottomRight {
|
||
font-size: 16px;
|
||
font-weight: 1000;
|
||
color: #522510;
|
||
cursor: pointer;
|
||
}
|
||
</style> |