[EASY] Help for embedding a CodePen, Easy integration CSS |
[EASY] Help for embedding a CodePen, Easy integration CSS |
Laryssa |
May 17 2019, 03:54 PM
Post
#1
|
Group: Members Posts: 1 Joined: 17-May 19 Member No.: 26,894 |
Hello,
The solution to my problem is surely extremely simple and it is all the more annoying. I'm just trying to put a CodePen (small template) in a container but it is capricious and does not appear. One of the comments (CSS) of the code specifies that it is necessary to attribute a size and a height to the object under pain of not seeing it appearing and in spite of that I do not see the error. CodePen : https://codepen.io/fabianmossberg/pen/yZMxzP my container : CODE body{ margin:0; padding: 0; } .container-wrap{ width: 100vw; height:100vh; margin:0 auto; position: relative; background: url("../res/img/map_01.2.png") no-repeat center center; background-size: cover; overflow: hidden; } And here is the CSS that I have to adapt to make the whole thing work: (With translated comments ^^) CODE /* This style can only be applied to this demo, For reference only, Customizable by design or preference */ html,body{ height: 100%; } body { background: #20262E; overflow: hidden; } #app{ overflow-x:hidden; } /* Direct script reference suggestions are added, otherwise it would cause flickering, a single file component does not need */ [v-cloak] { display: none; } /* Warning! The width and height of the component must be defined, otherwise it will not come out!!! */ #app .vue-tinder { position: absolute; z-index: 1; left: 0; right: 0; top: 23px; margin: auto; width: calc(100% - 20px); height: calc(100% - 23px - 18%); min-width: 300px; max-width: 355px; } /* The position of the three status indicators on the map, the transparency will be automatically adjusted by the component */ .nope-pointer { right: 10px; } .like-pointer { left: 10px; } .nope-pointer, .like-pointer { position: absolute; z-index: 1; top: 20px; width: 64px; height: 64px; } .super-pointer { position: absolute; z-index: 1; bottom: 80px; left: 0; right: 0; margin: auto; width: 112px; height: 78px; } /* Style d'image de fente */ .pic { width: 100%; height: 100%; background-size: cover; } /* Style de bouton */ .btns { position: absolute; left: 0; right: 0; bottom: 0; margin: auto; height: 18%; display: flex; align-items: center; justify-content: center; min-width: 300px; max-width: 355px; } .btns img{ width: 80px; } I also add HTML and JS in case : HTML CODE <div id="app" v-cloak> <tinder ref="tinder" :queue.sync="queue" @submit="submit"> <template slot-scope="{data}"> <div class="pic" :style="`background-image:url(https://picsum.photos/710/1152/?random=${data.key})`"> </div> </template> <img class="like-pointer" slot="like" src="https://johnnydan.oss-cn-beijing.aliyuncs.com/vue-tinder/like-txt.png"> <img class="nope-pointer" slot="nope" src="https://johnnydan.oss-cn-beijing.aliyuncs.com/vue-tinder/nope-txt.png"> <img class="super-pointer" slot="super" src="https://johnnydan.oss-cn-beijing.aliyuncs.com/vue-tinder/super-txt.png"> </tinder> <div class="btns"> <img src="https://johnnydan.oss-cn-beijing.aliyuncs.com/vue-tinder/nope.png" @click="decide('nope')"> <img src="https://johnnydan.oss-cn-beijing.aliyuncs.com/vue-tinder/super-like.png" @click="decide('super')"> <img src="https://johnnydan.oss-cn-beijing.aliyuncs.com/vue-tinder/like.png" @click="decide('like')"> </div> </div> JS CODE new Vue({ el: "#app", data: { queue: [] }, created () { this.getData() }, methods: { /** * 用于产生demo用的数据 * @method getData */ getData () { const list = [] for (let i = 0; i < 5; i++) { list.push({ key: Math.random() }) } this.queue = this.queue.concat(list) }, /** * 点击按钮所绑定的方法,此方法为调用vue-tinder组件内方法的示例,仅供参考 * @method submit * @param {String} choice */ decide (choice) { this.$refs.tinder.decide(choice) }, /** * 自定义事件submit绑定的方法,移除卡片的回调 * @method submit * @param {Object} choice {type,key} */ submit (choice) { switch (choice) { case 'nope': // 左滑 break; case 'like': // 右滑 break; case 'super': // 上滑 break; } if (this.queue.length < 2) { this.getData() } } } }) This post has been edited by Laryssa: May 17 2019, 03:56 PM |
Lo-Fi Version | Time is now: 3rd June 2024 - 03:38 PM |