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.
76 lines
2.4 KiB
76 lines
2.4 KiB
4 years ago
|
<template>
|
||
|
<v-row :class="`ma-0 mt-2 checklist`">
|
||
|
<v-col xl="12" class="pt-4 pb-0 pr-0"> <section-title theme="sm" title-fa="چک لیست" title-en="check list" /></v-col>
|
||
|
<v-col xl="12" class="task-item row ma-0 mt-1 pt-1 pb-1 section-bordered flex-justified-space-between" :class="(task_status) ? 'done' : ''">
|
||
|
<div class="flex-justified-right">
|
||
|
<div class="En Bold text--24 counter">1</div>
|
||
|
<v-switch :color="$_color('task')" inset class="mr-2" v-model="task_status" />
|
||
|
<div class="Fa pr-2 text"> چک کردن سئو وبسایت وردک </div>
|
||
|
</div>
|
||
|
<div class="flex-justified-left">
|
||
|
<v-btn fab x-small :color="$_color('task')" dark>
|
||
|
<v-icon dark>WMi-pencil</v-icon>
|
||
|
</v-btn>
|
||
|
<v-btn fab x-small color="red" dark>
|
||
|
<v-icon dark>WMi-minus</v-icon>
|
||
|
</v-btn>
|
||
|
</div>
|
||
|
</v-col>
|
||
|
<v-col xl="12" class="row ma-0 mt-1 pt-1 pb-1 section-bordered flex-justified-right">
|
||
|
<v-text-field
|
||
|
v-validate="'min:4'"
|
||
|
label=" متن آیتم را وارد کنید "
|
||
|
color="cyan"
|
||
|
prepend-icon="WMi-text"
|
||
|
></v-text-field>
|
||
|
<v-btn
|
||
|
fab
|
||
|
small
|
||
|
color="cyan"
|
||
|
dark
|
||
|
class="mr-3"
|
||
|
>
|
||
|
<v-icon dark>WMi-plus</v-icon>
|
||
|
</v-btn>
|
||
|
</v-col>
|
||
|
<!-- <div class="add-button-row flex-justified-center">-->
|
||
|
<!-- <v-icon>WMi-plus</v-icon>-->
|
||
|
<!-- </div>-->
|
||
|
</v-row>
|
||
|
</template>
|
||
|
|
||
|
<script>
|
||
|
export default {
|
||
|
props: {
|
||
|
|
||
|
},
|
||
|
data: function () {
|
||
|
return {
|
||
|
task_status: false,
|
||
|
};
|
||
|
},
|
||
|
|
||
|
};
|
||
|
</script>
|
||
|
<style lang="scss" scoped>
|
||
|
.checklist .counter {
|
||
|
width: 30px;
|
||
|
border-left: 1px solid #eeeeec;
|
||
|
}
|
||
|
.checklist .task-item {
|
||
|
transition: 0.2s;
|
||
|
border-radius: 5px;
|
||
|
}
|
||
|
.task-item.done {
|
||
|
border: 1px solid var(--color-purple);
|
||
|
background-color: var(--color-bg-purple);
|
||
|
}
|
||
|
.task-item .text {
|
||
|
transition: 2.0s;
|
||
|
}
|
||
|
.task-item.done .text {
|
||
|
text-decoration: line-through;
|
||
|
text-decoration-color: var(--color-purple);
|
||
|
}
|
||
|
</style>
|