refactor: move individual css into global css for sharing use

This commit is contained in:
2026-07-08 11:12:36 +08:00
parent b1b42ab2fb
commit 91317c9eb7
4 changed files with 52 additions and 67 deletions
@@ -49,55 +49,35 @@ const cancelUpdateItem = () => {
</script>
<template>
<div class="item card">
<div class="item-words">
<div class="paperbox-item card">
<div class="paperbox-item-words">
<p v-show="!isEditing">{{ name }}</p>
<div v-show="isEditing" class="control">
<input v-model="editingName" class="input" type="text"></input>
</div>
</div>
<div class="item-icon control" v-show="!isEditing" @click="editItem">
<div class="paperbox-item-icon control" v-show="!isEditing" @click="editItem">
<a class="button"><span class="icon is-small"><font-awesome-icon icon="fas fa-pen"></font-awesome-icon></span></a>
</div>
<div class="item-icon control" v-show="!isEditing" @click="shareItem">
<div class="paperbox-item-icon control" v-show="!isEditing" @click="shareItem">
<a class="button"><span class="icon is-small"><font-awesome-icon
icon="fas fa-share"></font-awesome-icon></span></a>
</div>
<div class="item-icon control" v-show="!isEditing" @click="deleteItem">
<div class="paperbox-item-icon control" v-show="!isEditing" @click="deleteItem">
<a class="button"><span class="icon is-small"><font-awesome-icon
icon="fas fa-trash"></font-awesome-icon></span></a>
</div>
<div class="item-icon control" v-show="isEditing" @click="updateItem">
<div class="paperbox-item-icon control" v-show="isEditing" @click="updateItem">
<button class="button"><span class="icon is-small"><font-awesome-icon
icon="fas fa-check"></font-awesome-icon></span></button>
</div>
<div class="item-icon control" v-show="isEditing" @click="cancelUpdateItem">
<div class="paperbox-item-icon control" v-show="isEditing" @click="cancelUpdateItem">
<button class="button"><span class="icon is-small"><font-awesome-icon
icon="fas fa-times"></font-awesome-icon></span></button>
</div>
</div>
</template>
<style scoped>
div.item {
display: flex;
flex-flow: row;
align-items: flex-start;
padding: 1.25rem;
margin-bottom: 1.25rem;
}
div.item-words {
flex-grow: 1;
flex-basis: 0;
word-break: break-all;
}
div.item-icon {
margin-left: 0.75rem;
}
</style>
<style scoped></style>