<template>
|
<div class="sign-card-wrapper">
|
<div class="sign-card-title">{{ '合同编号：0293848340' }}</div>
|
<div class="sign-card-content">
|
<div class="sign-card-content-name">{{ 'xxxx劳务公司合同' }}</div>
|
<div class="sign-card-content-icon">
|
<IconFont v-if="selected" name="check-checked" color="#3A71FF" size="16"></IconFont>
|
<IconFont v-else name="check-normal" size="16"></IconFont>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { IconFont } from '@nutui/icons-vue-taro';
|
import { computed } from 'vue';
|
|
defineOptions({
|
name: 'SignCard',
|
});
|
|
type Props = {
|
checkedId?: string;
|
id: string;
|
};
|
|
const props = withDefaults(defineProps<Props>(), {});
|
|
const emit = defineEmits<{
|
(e: 'update:checkedId', value: string): void;
|
}>();
|
|
const innerCheckedId = computed({
|
get() {
|
return props.checkedId;
|
},
|
set(val) {
|
emit('update:checkedId', val);
|
},
|
});
|
|
const selected = computed(() => innerCheckedId.value === props.id);
|
</script>
|
|
<style lang="scss">
|
@import '@/styles/common.scss';
|
|
.sign-card-wrapper {
|
padding: 24px 24px 20px 10px;
|
border-bottom: 2px solid #f6f6f6;
|
|
.sign-card-title {
|
font-size: 20px;
|
color: boleGetCssVar('text-color', 'secondary');
|
margin-bottom: 14px;
|
}
|
|
.sign-card-content {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
|
.sign-card-content-name {
|
font-size: 24px;
|
line-height: 32px;
|
color: boleGetCssVar('text-color', 'primary');
|
}
|
|
.sign-card-content-icon {
|
width: 32px;
|
height: 32px;
|
}
|
}
|
}
|
</style>
|
