|
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100 |
- it <template>
- <div class="about-pane dialog" v-if="visible">
- <div class="dialog-content">
- <button title="fermer" class="close-btn" v-on:click="collapse()">
- <svg viewPort="0 0 42 42" version="1.1"
- xmlns="http://www.w3.org/2000/svg">
- <line x1="0" y1="42"
- x2="42" y2="0"
- stroke="black"
- stroke-width="2"/>
- <line x1="0" y1="0"
- x2="42" y2="42"
- stroke="black"
- stroke-width="2"/>
- </svg>
-
- </button>
- <div class="about-content">
- <h2>DEDITOR</h2>
- <h3>DEDE EDITOR</h3>
- </div>
- </div>
- </div>
- <div v-else class="about-pane-button" v-on:click="expand"> ... </div>
- </template>
-
-
- <script>
-
-
- export default {
- components: {},
- data() {
- return {
- visible : false
- }
- },
- beforeDestroy() {
-
- },
-
- mounted() {
-
- },
-
- methods: {
-
- expand : function(){
- this.visible = true;
- this.$forceUpdate();
- console.log(this.visible);
-
- },
- collapse : function(){
- this.visible = false;
- },
-
- }
- }
- </script>
-
- <style lang="scss" scoped>
- @import '../assets/_dialog';
-
- .dialog-content{
- border: 2px solid black;
- display: flex;
- flex-direction: column;
- justify-content: center;
- }
- .about-pane-button{
- position: fixed;
- bottom : 5px;
- right: 5px;
- z-index: 55;
- cursor: pointer;
- font-weight: bold;
- }
-
- .about-content{
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- color : #aaa;
-
- h2, h3{
- margin : 0;
- padding: 0;
- }
-
- h2{
- font-size: 5rem;
- }
- h3{
- font-size: 2rem;
- }
- }
-
- </style>
|