|
@@ -1,6 +1,6 @@
|
|
|
<template>
|
|
|
<view class="garden-card" >
|
|
|
- <view class="garden-list-item" v-for="item in districtGardenData" :key="item.id">
|
|
|
+ <view class="garden-list-item" v-for="(item, index) in listData" :key="item.id">
|
|
|
<view class="garden-list-item-time">
|
|
|
开园时间: {{item.createTime}}
|
|
|
</view>
|
|
@@ -32,21 +32,16 @@
|
|
|
手机:{{item.phone}}
|
|
|
</view>
|
|
|
</view>
|
|
|
-
|
|
|
- <!-- <van-grid column-num="2" :border="false" class="grid" :center="false">
|
|
|
- <van-grid-item use-slot >
|
|
|
- 班级数量: {{item.classCount}}
|
|
|
- </van-grid-item>
|
|
|
- <van-grid-item use-slot >
|
|
|
- 教职工数量:{{item.teachUserCount}}
|
|
|
- </van-grid-item>
|
|
|
- <van-grid-item use-slot >
|
|
|
- 学生数量:{{item.studentCount}}
|
|
|
- </van-grid-item>
|
|
|
- <van-grid-item use-slot >
|
|
|
- 手机:{{item.phone}}
|
|
|
- </van-grid-item>
|
|
|
- </van-grid> -->
|
|
|
+ <view class="garden-product">
|
|
|
+ <view class="garden-product-label">使用产品:</view>
|
|
|
+ <view :class="item.isExpand ? 'garden-product-content-true': 'garden-product-content-false'" v-if="item.courseNames && item.courseNames.length !== 0">
|
|
|
+ <view class="garden-product-content-item" v-for="i in item.courseNames" :key="i.catId">
|
|
|
+ {{ i.catName }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view v-else class="garden-product-content-false">无</view>
|
|
|
+ <view class="garden-product-expand" v-if="item.courseNames && item.courseNames.length !== 0 && item.courseNames.length > 1" @click="handleExpand(index)">{{item.isExpand ? '收起更多': '展开更多'}}</view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
@@ -60,6 +55,21 @@ export default {
|
|
|
type: Array,
|
|
|
default: () => []
|
|
|
}
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ listData() {
|
|
|
+ return this.districtGardenData
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 展开与收起
|
|
|
+ handleExpand(i) {
|
|
|
+ if(this.listData[i].isExpand === true) {
|
|
|
+ this.$set(this.listData[i],'isExpand', false)
|
|
|
+ } else {
|
|
|
+ this.$set(this.listData[i],'isExpand', true)
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
@@ -84,6 +94,7 @@ export default {
|
|
|
box-shadow: 0rpx 6rpx 20rpx 0rpx rgba(235, 235, 235, 0.5);
|
|
|
border-radius: 20rpx;
|
|
|
position: relative;
|
|
|
+ overflow: hidden;
|
|
|
&-top {
|
|
|
padding: 32rpx 0rpx 32rpx 24rpx;
|
|
|
&-label {
|
|
@@ -135,7 +146,7 @@ export default {
|
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
|
font-weight: 400;
|
|
|
color: #42516C;
|
|
|
- padding: 32rpx 24rpx;
|
|
|
+ padding: 32rpx 24rpx 24rpx;
|
|
|
box-sizing: border-box;
|
|
|
.garden-info-item {
|
|
|
flex: 50%;
|
|
@@ -155,6 +166,84 @@ export default {
|
|
|
// }
|
|
|
// }
|
|
|
}
|
|
|
+ .garden-product {
|
|
|
+ display: flex;
|
|
|
+ position: relative;
|
|
|
+ margin-bottom: 32rpx;
|
|
|
+ &-label {
|
|
|
+ margin-left: 24rpx;
|
|
|
+ width: 140rpx;
|
|
|
+ height: 42rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #42516C;
|
|
|
+ line-height: 42rpx;
|
|
|
+ }
|
|
|
+ // 未展开
|
|
|
+ &-content-false {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ width: 388rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #42516C;
|
|
|
+ line-height: 42rpx;
|
|
|
+ .garden-product-content-item {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .garden-product-content-item:first-child {
|
|
|
+ display: block;
|
|
|
+ width: 388rpx;
|
|
|
+ height: 42rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow:ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 已展开
|
|
|
+ &-content-true {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ width: 388rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #42516C;
|
|
|
+ line-height: 42rpx;
|
|
|
+ .garden-product-content-item {
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+ width: 388rpx;
|
|
|
+ }
|
|
|
+ .garden-product-content-item:first-child {
|
|
|
+ display: block;
|
|
|
+ width: 388rpx;
|
|
|
+ }
|
|
|
+ .garden-product-content-item:last-child {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &-ellipsis {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 180rpx;
|
|
|
+ height: 42rpx;
|
|
|
+ line-height: 42rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ }
|
|
|
+ &-expand {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 24rpx;
|
|
|
+ height: 42rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #1677FF;
|
|
|
+ line-height: 42rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
&-item:last-child {
|
|
|
padding-bottom: 200rpx;
|