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>
|