You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
75 lines
1.9 KiB
75 lines
1.9 KiB
<template>
|
|
<view class="m-2">
|
|
<u-card :show-foot="false" :show-head="false" :style="{ height: isShrink ? '106rpx' : '340rpx' }" border-radius="25" margin="0">
|
|
<view slot="body">
|
|
<scroll-view :scrollY="true" :style="{ height: isShrink ? '50rpx' : '280rpx' }">
|
|
<skeleton :banner="false" :loading="!tasks.length" :row="4" animate class="u-line-2 skeleton"></skeleton>
|
|
<view class="grid gap-2">
|
|
<template v-for="item in tasks">
|
|
<template v-if="item.plugins">
|
|
<template v-for="pluginArr in item.plugins">
|
|
<template class="p-0 u-col-between" v-if="pluginArr.length">
|
|
<Plugin
|
|
:class="getClass(plugin.col, plugin.row)"
|
|
:item="item"
|
|
:key="plugin.pluginTaskId"
|
|
:pluginId="plugin.pluginId"
|
|
:styleType="plugin.styleType || 0"
|
|
v-for="plugin in pluginArr"
|
|
/>
|
|
</template>
|
|
</template>
|
|
</template>
|
|
</template>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</u-card>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState } from 'vuex';
|
|
import Skeleton from '@/components/Skeleton/Skeleton';
|
|
|
|
export default {
|
|
name: 'Global',
|
|
components: { Skeleton },
|
|
props: { tasks: { type: Array, default: () => [] } },
|
|
data() {
|
|
return {
|
|
// loading: true,
|
|
task: null,
|
|
};
|
|
},
|
|
|
|
computed: mapState('task', ['isShrink']),
|
|
|
|
methods: {
|
|
getClass(col, row) {
|
|
return [`row-span-${row}`, `col-span-${col}`];
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.u-card-wrap {
|
|
background-color: $u-bg-color;
|
|
padding: 1px;
|
|
}
|
|
|
|
.u-body-item {
|
|
font-size: 32rpx;
|
|
color: #333;
|
|
padding: 20rpx 10rpx;
|
|
}
|
|
|
|
.u-body-item image {
|
|
width: 120rpx;
|
|
flex: 0 0 120rpx;
|
|
height: 120rpx;
|
|
border-radius: 8rpx;
|
|
margin-left: 12rpx;
|
|
}
|
|
</style>
|
|
|