90 lines
1.8 KiB
Vue
90 lines
1.8 KiB
Vue
<script setup>
|
||
const props = defineProps({
|
||
list: {
|
||
type: Array,
|
||
required: true,
|
||
default: () => []
|
||
},
|
||
showReceive: {
|
||
type: Boolean,
|
||
default: true
|
||
}
|
||
})
|
||
|
||
const emits = defineEmits(["click", "claim"]);
|
||
|
||
const handleClockInPage = (item) => {
|
||
emits("click", item);
|
||
}
|
||
|
||
const handleClaim = (item) => {
|
||
emits("claim", item);
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div class="item-wrapper">
|
||
<template v-for="(item, index) in list" :key="index">
|
||
<div class="card" @click="handleClockInPage(item)">
|
||
<div class="title">*************任务</div>
|
||
<div class="row">
|
||
<div class="col">方格编号：{{ item?.fgId || '04' }}</div>
|
||
<div class="col right">任务日期：{{ item?.rwRq }}</div>
|
||
</div>
|
||
<div class="btn" v-if="showReceive" @click.stop="handleClaim(item)">领取</div>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped lang="scss">
|
||
.item-wrapper {
|
||
padding: 3vw;
|
||
|
||
.card {
|
||
background: #fff;
|
||
border-radius: 3.73vw;
|
||
padding: 4vw;
|
||
margin-bottom: 3vw;
|
||
box-shadow: 0 1.6vw 4vw rgba(0, 0, 0, 0.04);
|
||
|
||
.title {
|
||
font-size: 4vw;
|
||
font-weight: bold;
|
||
color: #333;
|
||
margin-bottom: 3vw;
|
||
}
|
||
|
||
.row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 4vw;
|
||
font-size: 3.4vw;
|
||
color: #999;
|
||
|
||
.col {
|
||
&.right {
|
||
text-align: right;
|
||
}
|
||
}
|
||
}
|
||
|
||
.btn {
|
||
height: 11vw;
|
||
line-height: 11vw;
|
||
text-align: center;
|
||
border-radius: 6vw;
|
||
color: #ffffff;
|
||
background: linear-gradient(90deg, #28A5FF 0%, #3E6EE8 100%);
|
||
font-size: 4vw;
|
||
box-shadow: 0 2vw 4vw rgba(62, 110, 232, 0.3);
|
||
|
||
&.disabled {
|
||
background: #ccc;
|
||
box-shadow: none;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|