tall小程序和时间轴结合在小程序中
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.
 
 
 
 

91 lines
2.2 KiB

<template>
<view class="m-2" v-if="globals && globals.length">
<u-card
@click="openCard"
:show-foot="false"
:show-head="false"
:style="{ 'max-height': isShrink ? '106rpx' : '340rpx' }"
border-radius="25"
margin="0"
>
<view slot="body">
<scroll-view :scrollY="true" :style="{ 'max-height': isShrink ? '50rpx' : '280rpx' }">
<skeleton :banner="false" :loading="!globals.length" :row="4" animate class="u-line-2 skeleton"></skeleton>
<view class="grid gap-2">
<template v-for="item in globals">
<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="[`row-span-${plugin.row}`, `col-span-${plugin.col}`]"
:task="item"
:key="plugin.pluginTaskId"
:plugin-task-id="plugin.pluginTaskId"
:plugin-id="plugin.pluginId"
:style-type="plugin.styleType || 0"
v-for="plugin in pluginArr"
/>
</template>
</template>
</template>
</template>
</view>
</scroll-view>
</view>
</u-card>
</view>
</template>
<script>
import { mapGetters, mapMutations, mapState } from 'vuex';
import Skeleton from '@/components/Skeleton/Skeleton';
export default {
name: 'Global',
components: { Skeleton },
data() {
return {
// loading: true,
task: null,
};
},
computed: {
...mapState('task', ['isShrink']),
...mapGetters('task', ['globals']),
},
methods: {
...mapMutations('task', ['setShrink']),
// 手动展开日常任务
openCard() {
if (this.isShrink) {
this.setShrink(false);
}
},
},
};
</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>