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>
|