|
@@ -1,11 +1,12 @@
|
|
|
<template>
|
|
|
<el-row :gutter="20">
|
|
|
- <el-col :span="8" v-for="item in applicationTypeList" :key="item.name" style="height: 160px;margin-bottom: 10px">
|
|
|
+ <el-col :span="8" v-for="item in applications" :key="item.name" style="height: 160px;margin-bottom: 10px">
|
|
|
<el-card class="test-card">
|
|
|
<div slot="header" class="clearfix test-card-header">
|
|
|
<span>{{ item && item.name }}</span>
|
|
|
+ <el-button style="float: right;line-height: 25px" type="text" @click="getMore()">more>></el-button>
|
|
|
</div>
|
|
|
- <div>
|
|
|
+ <div class="test-card-description">
|
|
|
<span>{{ item && item.introduction }}</span>
|
|
|
</div>
|
|
|
</el-card>
|
|
@@ -21,13 +22,18 @@ export default {
|
|
|
name: "TestCard",
|
|
|
props: ['applicationTypeList'],
|
|
|
data() {
|
|
|
- return {}
|
|
|
+ return {
|
|
|
+ applications:(this.applicationTypeList && this.applicationTypeList.length && this.applicationTypeList.length > 6) ?
|
|
|
+ this.applicationTypeList.slice(0,6) : this.applicationTypeList
|
|
|
+ }
|
|
|
},
|
|
|
- components: {
|
|
|
- // Waterfall,
|
|
|
- // WaterfallSlot
|
|
|
+ methods: {
|
|
|
+ getMore(){
|
|
|
+ this.$router.push({
|
|
|
+ path: '/application/detail',
|
|
|
+ });
|
|
|
+ },
|
|
|
},
|
|
|
- methods: {},
|
|
|
mounted() {
|
|
|
}
|
|
|
}
|
|
@@ -49,6 +55,15 @@ export default {
|
|
|
border-left: 5px solid $__color-primary;
|
|
|
padding-left: 5px;
|
|
|
}
|
|
|
+
|
|
|
+ .test-card-description {
|
|
|
+ height: 76px;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 3;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
</style>
|