113 lines
2.4 KiB
Vue
113 lines
2.4 KiB
Vue
<template>
|
|
<div class="box">
|
|
<!-- <IntegrationServiceOrder ref="integrationServiceOrderDom" :orderArray="orderArray" :style="styleObj">
|
|
</IntegrationServiceOrder> -->
|
|
<div class="CanCase">
|
|
<div class="caseBox" v-for="(item, index) in caseList" :key="index" @click="toView(item)">
|
|
<a-image :preview="false" style="width:300px;height:200px" :src="
|
|
item.fuseAttrList.filter((val) => val.attrType == '服务图片')[0]
|
|
.attrValue
|
|
" />
|
|
<h3>{{ item.name }}</h3>
|
|
<p>发布时间 {{ item.createDate }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { ref, onMounted, onBeforeUnmount, watch, defineProps, defineEmits } from 'vue'
|
|
import IntegrationServiceOrder from './integrationServiceOrder.vue'
|
|
|
|
import { useRouter } from 'vue-router'
|
|
const router = useRouter()
|
|
const props = defineProps({
|
|
resourceList: {
|
|
type: Object,
|
|
default: () => { },
|
|
},
|
|
selectCardsname: {
|
|
type: String,
|
|
default: '组件服务',
|
|
},
|
|
})
|
|
|
|
const orderArray = ref([
|
|
{
|
|
value: 'create_date',
|
|
name: '发布时间',
|
|
orderType: 'DESC',
|
|
},
|
|
])
|
|
|
|
const styleObj = ref({
|
|
'justify-content': 'flex-end',
|
|
"padding": "0 20px"
|
|
})
|
|
const emits = defineEmits(['saveSearchCodition'])
|
|
|
|
const caseList = ref([])
|
|
|
|
onMounted(() => {
|
|
caseList.value = props.resourceList.data
|
|
console.log('caseList.value------------>', caseList.value);
|
|
})
|
|
onBeforeUnmount(() => { })
|
|
function toView(item) {
|
|
emits('saveSearchCodition', 1)
|
|
router.push({
|
|
path: '/integrationServicesDetails',
|
|
query: {
|
|
id: item.id,
|
|
type:'典型赋能场景'
|
|
},
|
|
})
|
|
}
|
|
|
|
watch(
|
|
() => props.resourceList.data,
|
|
(val) => {
|
|
if (val) {
|
|
caseList.value = val
|
|
}
|
|
}
|
|
)
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.box {
|
|
.CanCase {
|
|
margin-top: 0.2rem;
|
|
display: grid;
|
|
grid-template-columns: 33.33% 33.33% 33.33%;
|
|
align-items: center;
|
|
justify-items: center;
|
|
|
|
.caseBox {
|
|
width: 3.5rem;
|
|
height: 3rem;
|
|
box-shadow: 1px 1px 5px 5px rgba(222, 222, 222, 0.152);
|
|
background: #ffffff;
|
|
border-radius: 0.05rem;
|
|
padding: 0.2rem;
|
|
margin-bottom: 0.2rem;
|
|
cursor: pointer;
|
|
|
|
img {
|
|
width: 3rem;
|
|
height: 1.8rem;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 0.18rem;
|
|
font-weight: bold;
|
|
margin-top: 0.1rem;
|
|
}
|
|
|
|
p {
|
|
font-size: 0.16rem;
|
|
color: #797979;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|