forked from nayarahilton/vue-pwa-profil
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
b0c2e46
commit ffe71df
Showing
7 changed files
with
194 additions
and
4 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,78 @@ | ||
| <template> | ||
| <div class="slider"> | ||
| <ul class="list"> | ||
| <li class="list-item" v-for="item in items"> | ||
| <div class="img-holder"> | ||
| <img class="img" src="nada" /> | ||
| </div> | ||
| <p class="text">{{item.text}}</p> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| export default { | ||
| data() { | ||
| return { | ||
| items: [ | ||
| { text: '@nayarahilton' }, | ||
| { text: '@prisantos' }, | ||
| { text: '@lucasilva' }, | ||
| { text: '@lilisantos' }, | ||
| { text: '@vinicuisbueno' }, | ||
| { text: '@gabriellopes' }, | ||
| { text: '@rachelaquino' }, | ||
| { text: 'Outro' }, | ||
| { text: 'Outro' }, | ||
| ], | ||
| }; | ||
| }, | ||
| }; | ||
| </script> | ||
|
|
||
| <style lang="stylus" scoped> | ||
| @import '../assets/styles/*' | ||
| .slider | ||
| padding 20px 0 | ||
| box-sizing border-box | ||
| background #eee | ||
| .list | ||
| list-style none | ||
| white-space nowrap | ||
| margin 0 auto | ||
| padding 0 | ||
| display flex | ||
| overflow-x scroll | ||
| max-width 500px | ||
| .list-item | ||
| display inline-flex | ||
| flex-direction column | ||
| white-space normal | ||
| text-align center | ||
| margin-left 20px | ||
| min-width 60px | ||
| max-width 100px | ||
| overflow hidden | ||
| &:last-child | ||
| padding-right 20px | ||
| .text | ||
| margin-bottom 0 | ||
| margin-top 0px | ||
| font-size 12px | ||
| .img-holder | ||
| width 50px | ||
| height 50px | ||
| border-radius 50% | ||
| border 3px solid $blue | ||
| background #fff | ||
| </style> | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,92 @@ | ||
| <template> | ||
| <div class="profile"> | ||
|
|
||
| </profile-resume> | ||
| <div class="follows"> | ||
| <span class="followers">100 seguidores</span> <span class="following">53 seguindo</span> | ||
| </div> | ||
| <div class="card"> | ||
| <div class="card-picture"> | ||
| <img :src="'https://image.freepik.com/free-vector/triangle-cat-design_23-2147495379.jpg'" /> | ||
| </div> | ||
| <div class="card-info"> | ||
| <div class="Texto"> | ||
| <span>Texto</span> | ||
| </div> | ||
| <div class="card-info"> | ||
| <post-reactions></post-reactions> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| import ProfileResume from '../components/ProfileResume'; | ||
| import PostReactions from '../components/PostReactions'; | ||
| export default { | ||
| data() { | ||
| return { | ||
| cat: null, | ||
| }; | ||
| }, | ||
| components: { | ||
| 'profile-resume': ProfileResume, | ||
| 'post-reactions': PostReactions, | ||
| }, | ||
| }; | ||
| </script> | ||
|
|
||
| <style lang="stylus" scoped> | ||
| @import '../assets/styles/_colors' | ||
| .profile | ||
| background #fff | ||
| padding 20px | ||
| .add-picture-button | ||
| position fixed | ||
| right 24px | ||
| bottom 24px | ||
| z-index 998 | ||
| color $primary-color | ||
| height 50px | ||
| width 50px | ||
| border-radius 20px 20px 20px 0 | ||
| background #fff | ||
| display flex | ||
| align-items center | ||
| justify-content center | ||
| box-shadow -3px 0px 4px 1px rgba(0,0,0,0.3) | ||
| span | ||
| font-size 40px | ||
| line-height 40px | ||
| height 45px | ||
| .card | ||
| padding-bottom 10px | ||
| border-bottom 1px solid #eee | ||
| margin-bottom 40px | ||
| background #fff | ||
| max-width 500px | ||
| margin-left auto | ||
| margin-right auto | ||
| .card-picture > img | ||
| width 100% | ||
| .card-info | ||
| padding 5px 15px | ||
| display flex | ||
| justify-content space-between | ||
| .card-comment | ||
| padding 0 20px | ||
| > span | ||
| color #222 | ||
| font-size 15px | ||
| </style> |