zhouchijian
/
fe-drone-ci
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

refactor

This commit is contained in:
Pan 2019-04-25 16:11:26 +08:00
parent 9b1c3c5f31
commit 3389c6c2dc
5 changed files with 448 additions and 322 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/views/profile/components/Account.vue Normal file
View File

@ -0,0 +1,38 @@
<template>
<el-form>
<el-form-item label="Name">
<el-input v-model.trim="user.name" />
</el-form-item>
<el-form-item label="Email">
<el-input v-model.trim="user.email" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submit">Update</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
props: {
user: {
type: Object,
default: () => {
return {
name: '',
email: ''
}
}
}
},
methods: {
submit() {
this.$message({
message: 'User information has been updated successfully',
type: 'success',
duration: 5 * 1000
})
}
}
}
</script>

213
src/views/profile/components/Activity.vue Normal file
View File

@ -0,0 +1,213 @@
<template>
<div class="user-activity">
<div class="post">
<div class="user-block">
<img
class="img-circle"
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRDkaQO69Fro8SZLTVZQ75JH2R0T-sn5yIA_lKGwvvgQ0R0BoQtUQ"
alt="user image"
>
<span class="username text-muted">
<span>Iron Man</span>
<span class="pull-right btn-box-tool"><i class="fa fa-times" /></span>
</span>
<span class="description">Shared publicly - 7:30 PM today</span>
</div>
<p>
Lorem ipsum represents a long-held tradition for designers,
typographers and the like. Some people hate it and argue for
its demise, but others ignore the hate as they create awesome
tools to help create filler text for everyone from bacon lovers
to Charlie Sheen fans.
</p>
<ul class="list-inline">
<li>
<span class="link-black text-sm">
<i class="el-icon-share" />
Share
</span>
</li>
<li>
<span class="link-black text-sm">
<svg-icon icon-class="like" />
Like
</span>
</li>
</ul>
</div>
<div class="post">
<div class="user-block">
<img
class="img-circle"
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQMMN-8f9CQQ3MKJpboBJIqaiJ2Wus2Tf4w_vx9STtalxrY3qGJ"
alt="user image"
>
<span class="username text-muted">
<span>Captain American</span>
<span class="pull-right btn-box-tool"><i class="fa fa-times" /></span>
</span>
<span class="description">Sent you a message - yesterday</span>
</div>
<p>
Lorem ipsum represents a long-held tradition for designers,
typographers and the like. Some people hate it and argue for
its demise, but others ignore the hate as they create awesome
tools to help create filler text for everyone from bacon lovers
to Charlie Sheen fans.
</p>
</div>
<div class="post">
<div class="user-block">
<img
class="img-circle img-bordered-sm"
src="https://cdn3.iconfinder.com/data/icons/movies-3/32/daredevil-superhero-marvel-comics-mutant-avatar-512.png"
alt="User Image"
>
<span class="username">
<span>Daredevil</span>
<span class="pull-right btn-box-tool"><i class="fa fa-times" /></span>
</span>
<span class="description">Posted 4 photos - 2 days ago</span>
</div>
<div class="user-images">
<el-carousel :interval="6000" type="card" height="200px">
<el-carousel-item v-for="item in carouselImages" :key="item">
<img :src="item" class="image">
</el-carousel-item>
</el-carousel>
</div>
<ul class="list-inline">
<li><span class="link-black text-sm"><i class="el-icon-share" /> Share</span></li>
<li>
<span class="link-black text-sm">
<svg-icon icon-class="like" /> Like</span>
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
data() {
return {
carouselImages: [
'https://cdn.laravue.dev/photo1.jpg',
'https://cdn.laravue.dev/photo2.jpg',
'https://cdn.laravue.dev/photo3.jpg',
'https://cdn.laravue.dev/photo4.jpg'
]
}
},
methods: {
submit() {
this.$message({
message: 'Update',
type: 'success'
})
}
}
}
</script>
<style lang="scss" scoped>
.user-activity {
.user-block {
.username,
.description {
display: block;
margin-left: 50px;
padding: 2px 0;
}
img {
width: 40px;
height: 40px;
float: left;
}
:after {
clear: both;
}
.img-circle {
border-radius: 50%;
border: 2px solid #d2d6de;
padding: 2px;
}
span {
font-weight: 500;
font-size: 12px;
}
}
.post {
font-size: 14px;
border-bottom: 1px solid #d2d6de;
margin-bottom: 15px;
padding-bottom: 15px;
color: #666;
.image {
width: 100%;
}
.user-images {
padding-top: 20px;
}
}
.list-inline {
padding-left: 0;
margin-left: -5px;
list-style: none;
li {
display: inline-block;
padding-right: 5px;
padding-left: 5px;
font-size: 13px;
}
.link-black {
&:hover,
&:focus {
color: #999;
}
}
}
.el-carousel__item h3 {
color: #475669;
font-size: 14px;
opacity: 0.75;
line-height: 200px;
margin: 0;
}
.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n+1) {
background-color: #d3dce6;
}
}
.box-center {
margin: 0 auto;
display: table;
}
.text-muted {
color: #777;
}
.pull-right {
float: right !important;
}
</style>

43
src/views/profile/components/Timeline.vue Normal file
View File

@ -0,0 +1,43 @@
<template>
<div class="block">
<el-timeline>
<el-timeline-item v-for="(item,index) of timeline" :key="index" :timestamp="item.timestamp" placement="top">
<el-card>
<h4>{{ item.title }}</h4>
<p>{{ item.content }}</p>
</el-card>
</el-timeline-item>
</el-timeline>
</div>
</template>
<script>
export default {
data() {
return {
timeline: [
{
timestamp: '2019/4/20',
title: 'Update Github template',
content: 'PanJiaChen committed 2019/4/20 20:46'
},
{
timestamp: '2019/4/21',
title: 'Update Github template',
content: 'PanJiaChen committed 2019/4/21 20:46'
},
{
timestamp: '2019/4/22',
title: 'Build Template',
content: 'PanJiaChen committed 2019/4/22 20:46'
},
{
timestamp: '2019/4/23',
title: 'Release New Version',
content: 'PanJiaChen committed 2019/4/23 20:46'
}
]
}
}
}
</script>

132
src/views/profile/components/UserCard.vue Normal file
View File

@ -0,0 +1,132 @@
<template>
<el-card>
<div slot="header" class="clearfix">
<span>About me</span>
</div>
<div class="user-profile">
<div class="box-center">
<pan-thumb :image="user.avatar" :height="'100px'" :width="'100px'" :hoverable="false">
<div>Hello</div>
{{ user.role }}
</pan-thumb>
</div>
<div class="box-center">
<div class="user-name text-center">{{ user.name }}</div>
<div class="user-role text-center text-muted">{{ user.role | uppercaseFirst }}</div>
</div>
</div>
<div class="user-bio">
<div class="user-education user-bio-section">
<div class="user-bio-section-header"><svg-icon icon-class="education" /><span>Education</span></div>
<div class="user-bio-section-body">
<div class="text-muted">
B.S. in Computer Science from the University of Technology
</div>
</div>
</div>
<div class="user-skills user-bio-section">
<div class="user-bio-section-header"><svg-icon icon-class="skill" /><span>Skills</span></div>
<div class="user-bio-section-body">
<div class="progress-item">
<span>Vue</span>
<el-progress :percentage="70" />
</div>
<div class="progress-item">
<span>JavaScript</span>
<el-progress :percentage="18" />
</div>
<div class="progress-item">
<span>Css</span>
<el-progress :percentage="12" />
</div>
<div class="progress-item">
<span>ESLint</span>
<el-progress :percentage="100" status="success" />
</div>
</div>
</div>
</div>
</el-card>
</template>
<script>
import PanThumb from '@/components/PanThumb'
export default {
components: { PanThumb },
props: {
user: {
type: Object,
default: () => {
return {
name: '',
email: '',
avatar: '',
roles: ''
}
}
}
}
}
</script>
<style lang="scss" scoped>
.box-center {
margin: 0 auto;
display: table;
}
.text-muted {
color: #777;
}
.user-profile {
.user-name {
font-weight: bold;
}
.box-center {
padding-top: 10px;
}
.user-role {
padding-top: 10px;
font-weight: 400;
font-size: 14px;
}
.box-social {
padding-top: 30px;
.el-table {
border-top: 1px solid #dfe6ec;
}
}
.user-follow {
padding-top: 20px;
}
}
.user-bio {
margin-top: 20px;
color: #606266;
span {
padding-left: 4px;
}
.user-bio-section {
font-size: 14px;
padding: 15px 0;
.user-bio-section-header {
border-bottom: 1px solid #dfe6ec;
padding-bottom: 10px;
margin-bottom: 10px;
font-weight: bold;
}
}
}
</style>

344
src/views/profile/index.vue
View File

@ -1,201 +1,45 @@
<template>
<div class="app-container">
<el-form v-if="user" :model="user">
<div v-if="user">
<el-row :gutter="20">
<el-col :span="6">
<el-card>
<div class="user-profile">
<div class="user-avatar box-center">
<pan-thumb :image="user.avatar" :height="'100px'" :width="'100px'" :hoverable="false" />
</div>
<div class="box-center">
<div class="user-name text-center">{{ user.name }}</div>
<div class="user-role text-center text-muted">{{ user.role | uppercaseFirst }}</div>
</div>
<div class="box-social">
<el-table :data="social" :show-header="false">
<el-table-column
prop="name"
label="Name"
/>
<el-table-column label="Count" align="left" width="100">
<template slot-scope="scope">
{{ scope.row.count | toThousandFilter }}
</template>
</el-table-column>
</el-table>
</div>
<div class="user-follow">
<el-button type="primary" style="width: 100%;">Follow</el-button>
</div>
</div>
</el-card>
<el-card class="box-card user-bio">
<div slot="header" class="clearfix">
<span>About me</span>
</div>
<div class="user-education user-bio-section">
<div class="user-bio-section-header"><svg-icon icon-class="education" /><span>Education</span></div>
<div class="user-bio-section-body">
<div class="text-muted">
B.S. in Computer Science from the University of Technology
</div>
</div>
</div>
<div class="user-skills user-bio-section">
<div class="user-bio-section-header"><svg-icon icon-class="skill" /><span>Skills</span></div>
<div class="user-bio-section-body">
<div class="progress-item">
<span>Vue</span>
<el-progress :percentage="70" />
</div>
<div class="progress-item">
<span>JavaScript</span>
<el-progress :percentage="18" />
</div>
<div class="progress-item">
<span>Css</span>
<el-progress :percentage="12" />
</div>
<div class="progress-item">
<span>ESLint</span>
<el-progress :percentage="100" status="success" />
</div>
</div>
</div>
</el-card>
<user-card :user="user" />
</el-col>
<el-col :span="18">
<el-card>
<el-tabs v-model="activeActivity" @tab-click="handleClick">
<el-tab-pane label="Activity" name="first">
<div class="user-activity">
<div class="post">
<div class="user-block">
<img class="img-circle" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRDkaQO69Fro8SZLTVZQ75JH2R0T-sn5yIA_lKGwvvgQ0R0BoQtUQ" alt="user image">
<span class="username text-muted">
<a href="#">Iron Man</a>
<a href="#" class="pull-right btn-box-tool"><i class="fa fa-times" /></a>
</span>
<span class="description">Shared publicly - 7:30 PM today</span>
</div>
<p>
Lorem ipsum represents a long-held tradition for designers,
typographers and the like. Some people hate it and argue for
its demise, but others ignore the hate as they create awesome
tools to help create filler text for everyone from bacon lovers
to Charlie Sheen fans.
</p>
<ul class="list-inline">
<li><a href="#" class="link-black text-sm"><i class="el-icon-share" /> Share</a></li>
<li><a href="#" class="link-black text-sm"><svg-icon icon-class="like" /> Like</a></li>
<li class="pull-right">
<a href="#" class="link-black text-sm"><svg-icon icon-class="comment" /> Comments
(5)</a></li>
</ul>
<el-input v-model="input.comment1" placeholder="Type a comment" />
</div>
<div class="post">
<div class="user-block">
<img class="img-circle" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQMMN-8f9CQQ3MKJpboBJIqaiJ2Wus2Tf4w_vx9STtalxrY3qGJ" alt="user image">
<span class="username text-muted">
<a href="#">Captain American</a>
<a href="#" class="pull-right btn-box-tool"><i class="fa fa-times" /></a>
</span>
<span class="description">Sent you a message - yesterday</span>
</div>
<p>
Lorem ipsum represents a long-held tradition for designers,
typographers and the like. Some people hate it and argue for
its demise, but others ignore the hate as they create awesome
tools to help create filler text for everyone from bacon lovers
to Charlie Sheen fans.
</p>
<el-input v-model="input.reply" placeholder="Response">
<el-button slot="append">Send</el-button>
</el-input>
</div>
<div class="post">
<div class="user-block">
<img class="img-circle img-bordered-sm" src="https://cdn3.iconfinder.com/data/icons/movies-3/32/daredevil-superhero-marvel-comics-mutant-avatar-512.png" alt="User Image">
<span class="username">
<a href="#">Daredevil</a>
<a href="#" class="pull-right btn-box-tool"><i class="fa fa-times" /></a>
</span>
<span class="description">Posted 4 photos - 2 days ago</span>
</div>
<div class="user-images">
<el-carousel :interval="6000" type="card" height="200px">
<el-carousel-item v-for="item in carouselImages" :key="item">
<img :src="item" class="image">
</el-carousel-item>
</el-carousel>
</div>
<ul class="list-inline">
<li><a href="#" class="link-black text-sm"><i class="el-icon-share" /> Share</a></li>
<li><a href="#" class="link-black text-sm"><svg-icon icon-class="like" /> Like</a></li>
<li class="pull-right">
<a href="#" class="link-black text-sm"><svg-icon icon-class="comment" /> Comments
(5)</a></li>
</ul>
<el-input v-model="input.comment2" placeholder="Type a comment" />
</div>
</div>
<el-tabs v-model="activeTab">
<el-tab-pane label="Activity" name="activity">
<activity />
</el-tab-pane>
<el-tab-pane label="Timeline" name="second">
<div class="block">
<el-timeline>
<el-timeline-item timestamp="2019/4/20" placement="top">
<el-card>
<h4>Update Github template</h4>
<p>PanJiaChen committed 2019/4/20 20:46</p>
</el-card>
</el-timeline-item>
<el-timeline-item timestamp="2019/4/21" placement="top">
<el-card>
<h4>Update Github template</h4>
<p>PanJiaChen committed 2019/4/21 20:46</p>
</el-card>
<el-card>
<h4>Update Github template</h4>
<p>PanJiaChen committed 2019/4/21 21:16</p>
</el-card>
</el-timeline-item>
<el-timeline-item timestamp="2019/4/22" placement="top">
<el-card>
<h4>Deploy <a href="https://Panjiachen.github.io/vue-element-admin/" target="_blank">vue-template-admin</a></h4>
<p>PanJiaChen deployed 2019/4/22 10:23</p>
</el-card>
</el-timeline-item>
</el-timeline>
</div>
<el-tab-pane label="Timeline" name="timeline">
<timeline />
</el-tab-pane>
<el-tab-pane v-loading="updating" label="Account" name="third">
<el-form-item label="Name">
<el-input v-model="user.name" />
</el-form-item>
<el-form-item label="Email">
<el-input v-model="user.email" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">Update</el-button>
</el-form-item>
<el-tab-pane label="Account" name="account">
<account :user="user" />
</el-tab-pane>
</el-tabs>
</el-card>
</el-col>
</el-row>
</el-form>
</div>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import PanThumb from '@/components/PanThumb'
import UserCard from './components/UserCard'
import Activity from './components/Activity'
import Timeline from './components/Timeline'
import Account from './components/Account'
export default {
name: 'EditUser',
components: { PanThumb },
name: 'Profile',
components: { UserCard, Activity, Timeline, Account },
data() {
return {
user: null,
@ -213,14 +57,7 @@ export default {
'count': 7242
}
],
activeActivity: 'first',
carouselImages: [
'https://cdn.laravue.dev/photo1.jpg',
'https://cdn.laravue.dev/photo2.jpg',
'https://cdn.laravue.dev/photo3.jpg',
'https://cdn.laravue.dev/photo4.jpg'
],
updating: false,
activeTab: 'activity',
input: {
comment1: '',
comment2: '',
@ -246,144 +83,7 @@ export default {
email: 'admin@test.com',
avatar: this.avatar
}
},
handleClick(tab, event) {
console.log('Switching tab ', tab, event)
},
onSubmit() {
this.updating = true
setTimeout(() => {
this.$message({
message: 'User information has been updated successfully',
type: 'success',
duration: 5 * 1000
})
this.updating = false
}, 1000)
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.user-profile {
.user-name {
font-weight: bold;
}
.box-center {
padding-top: 10px;
}
.user-role {
padding-top: 10px;
font-weight: 400;
font-size: 14px;
}
.box-social {
padding-top: 30px;
.el-table {
border-top: 1px solid #dfe6ec;
}
}
.user-follow {
padding-top: 20px;
}
}
.user-bio {
margin-top: 20px;
color: #606266;
span {
padding-left: 4px;
}
.user-bio-section {
font-size: 14px;
padding: 15px 0;
.user-bio-section-header {
border-bottom: 1px solid #dfe6ec;
padding-bottom: 10px;
margin-bottom: 10px;
font-weight: bold;
}
}
}
.user-activity {
.user-block {
.username, .description {
display: block;
margin-left: 50px;
padding: 2px 0;
}
img {
width: 40px;
height: 40px;
float: left;
}
:after {
clear: both;
}
.img-circle {
border-radius: 50%;
border: 2px solid #d2d6de;
padding: 2px;
}
span {
font-weight: 500;
font-size: 12px;
}
}
.post {
font-size: 14px;
border-bottom: 1px solid #d2d6de;
margin-bottom: 15px;
padding-bottom: 15px;
color: #666;
.image {
width: 100%;
}
.user-images {
padding-top: 20px;
}
}
.list-inline {
padding-left: 0;
margin-left: -5px;
list-style: none;
li {
display: inline-block;
padding-right: 5px;
padding-left: 5px;
font-size: 13px;
}
.link-black {
&:hover, &:focus {
color: #999;
}
}
}
.el-carousel__item h3 {
color: #475669;
font-size: 14px;
opacity: 0.75;
line-height: 200px;
margin: 0;
}
.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n+1) {
background-color: #d3dce6;
}
}
.box-center {
margin: 0 auto;
display: table;
}
.text-muted {
color: #777;
}
.pull-right {
float: right !important;
}
</style>