90 lines
2.4 KiB
Vue
90 lines
2.4 KiB
Vue
<template lang="pug">
|
|
.account
|
|
.header
|
|
label.img_add(for="img_add")
|
|
img.avatar(:src="account.avatar" onerror="this.src='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'")
|
|
span.fa.fa-edit.avatar-edit
|
|
.name {{ account.name }}
|
|
input#img_add(type="file", accept="image/*", @change="upload($event)")
|
|
input#bg(type="file", accept="image/*", @change="upload_bg($event)")
|
|
.content.main-width
|
|
p account
|
|
NuxtLink.button(to="/account/setting") 账户设置
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
computed: {
|
|
account() {
|
|
return this.$store.state.account;
|
|
},
|
|
},
|
|
methods: {
|
|
upload(event) {
|
|
let data = new FormData();
|
|
let option = { headers: { "Content-Type": "multipart/form-data" } };
|
|
data.append("avatar", event.target.files[0]);
|
|
this.$axios.post("/api/account", data, option).then((res) => {
|
|
console.log(res.data);
|
|
});
|
|
},
|
|
upload_bg(event) {
|
|
let data = new FormData();
|
|
let option = { headers: { "Content-Type": "multipart/form-data" } };
|
|
data.append("background", event.target.files[0]);
|
|
this.$axios.post("/api/account", data, option).then((res) => {
|
|
console.log(res.data);
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="sass">
|
|
.account
|
|
>.header
|
|
background-color: rgba(0, 0, 0, .15)
|
|
background-image: linear-gradient(45deg, #ccc 25%, transparent 0, transparent 75%, #ccc 0),linear-gradient(45deg, #ccc 25%, transparent 0, transparent 75%, #ccc 0)
|
|
background-position: 0 0, 40px 40px
|
|
background-size: 90px 60px
|
|
text-align: center
|
|
height: 200px
|
|
padding: 4rem
|
|
.avatar
|
|
height: 64px
|
|
width: 64px
|
|
border: none
|
|
border-radius: 50%
|
|
overflow: hidden
|
|
background: rgba(0, 0, 0, .05)
|
|
.img_add
|
|
cursor: pointer
|
|
position: relative
|
|
display: block
|
|
margin: auto
|
|
.avatar-edit
|
|
display: none
|
|
color: #ffffff
|
|
position: absolute
|
|
top: calc( 50% - .5rem )
|
|
left: calc( 50% - .5rem )
|
|
.img_add:hover
|
|
.avatar
|
|
filter: brightness(40%)
|
|
.avatar-edit
|
|
display: block
|
|
#img_add
|
|
display: none
|
|
.name
|
|
font-size: 1.2rem
|
|
font-weight: 600
|
|
color: #ffffff
|
|
>.content
|
|
background: #ffffff
|
|
padding: 2rem
|
|
border-radius: .5rem
|
|
box-sizing: border-box
|
|
position: relative
|
|
top: -4rem
|
|
</style>
|