126 lines
3.3 KiB
Vue
126 lines
3.3 KiB
Vue
<!--
|
||
* @Author: Light
|
||
* @Date: 2022-11-16 16:46:16
|
||
* @LastEditors: Light
|
||
* @LastEditTime: 2022-11-18 15:35:25
|
||
* @Description: 政务云资源列表
|
||
-->
|
||
<template>
|
||
<div class="top">
|
||
<div>检索结果：{{ props.governmentCloud.total }}项</div>
|
||
<div>
|
||
使用声明:
|
||
附加增值服务，委办局单位可以根据自身需求，按需采购，由采购单位付费。
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="bottom"
|
||
v-for="(item, index) in props.governmentCloud.data"
|
||
:key="item.service_item_tier1 + index"
|
||
>
|
||
<div class="left"></div>
|
||
<div class="right">
|
||
<div class="title">
|
||
<div>
|
||
<div class="name">{{ item.service_item_tier1 }}</div>
|
||
<div class="type">{{ item.service_type }}</div>
|
||
</div>
|
||
<div>年份：{{ item.year }}</div>
|
||
</div>
|
||
<div class="text">{{ item.service_description }}</div>
|
||
<div class="info">
|
||
<div>一级条目：{{ item.service_item_tier2 }}</div>
|
||
<div>规格：{{ item.specification }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<a-pagination
|
||
v-model:current="current"
|
||
:pageSize="5"
|
||
:total="props.governmentCloud.total"
|
||
:showSizeChanger="false"
|
||
@change="changeCurrent"
|
||
show-less-items
|
||
/>
|
||
</template>
|
||
<script setup>
|
||
import { ref, defineProps, defineEmits } from 'vue'
|
||
const props = defineProps({
|
||
governmentCloud: { type: Object, default: null },
|
||
})
|
||
const emit = defineEmits(['getGovernmentCloud'])
|
||
const current = ref(props.governmentCloud.current)
|
||
const changeCurrent = (current) => {
|
||
console.log(current)
|
||
emit('getGovernmentCloud', current)
|
||
}
|
||
</script>
|
||
<style lang="less" scoped>
|
||
.top {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
color: #333;
|
||
padding-bottom: 10px;
|
||
border-bottom: 1px #ccc solid;
|
||
}
|
||
.bottom {
|
||
margin-top: 20px;
|
||
padding-bottom: 20px;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
border-bottom: 1px #ccc solid;
|
||
.left {
|
||
width: 110px;
|
||
height: 110px;
|
||
background: url('~@/assets/home/znsf_square.png') no-repeat;
|
||
background-size: 100%;
|
||
}
|
||
.right {
|
||
flex: 1;
|
||
margin-left: 20px;
|
||
.title {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
div:nth-of-type(1) {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
.name {
|
||
max-width: 400px;
|
||
height: 22px;
|
||
line-height: 24px;
|
||
overflow: hidden; //超出的文本隐藏
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 1; // 超出多少行
|
||
-webkit-box-orient: vertical;
|
||
font-size: 20px;
|
||
font-weight: 600;
|
||
}
|
||
.type {
|
||
margin-left: 10px;
|
||
padding: 1px 5px;
|
||
color: rgba(0, 88, 225, 0.8);
|
||
background-color: rgba(0, 135, 225, 0.1);
|
||
border-radius: 15px;
|
||
}
|
||
}
|
||
}
|
||
.text {
|
||
height: 50px;
|
||
overflow: hidden; //超出的文本隐藏
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2; // 超出多少行
|
||
-webkit-box-orient: vertical;
|
||
}
|
||
.info {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
div:nth-of-type(1) {
|
||
margin-right: 50px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|