1 | <template>
|
2 | <div class="iphone" v-show="visible" @click="close">
|
3 | <div class="box flex" @click.stop="f=>f">
|
4 | <div class="contents">
|
5 | <div class="container">
|
6 | <slot></slot>
|
7 | </div>
|
8 | </div>
|
9 | </div>
|
10 | </div>
|
11 | </template>
|
12 | <script>
|
13 | export default {
|
14 | props: ["visible"],
|
15 | methods: {
|
16 | close() {
|
17 | this.$emit("update:visible", false);
|
18 | }
|
19 | }
|
20 | };
|
21 | </script>
|
22 | <style lang="scss" scoped>
|
23 | ::-webkit-scrollbar {
|
24 | display: none;
|
25 | }
|
26 | .iphone {
|
27 | position: fixed;
|
28 | top: 0;
|
29 | left: 0;
|
30 | width: 100%;
|
31 | height: 100%;
|
32 | background: rgba(49, 49, 49, 0.678);
|
33 | z-index: 10000;
|
34 | .box {
|
35 | justify-content: center;
|
36 | position: absolute;
|
37 | height: 722px;
|
38 | width: 360px;
|
39 | top: 0;
|
40 | bottom: 0;
|
41 | left: 0;
|
42 | right: 0;
|
43 | margin: auto;
|
44 | box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.212);
|
45 | border-radius: 4px;
|
46 | overflow: auto;
|
47 | background: white url("../assets/images/iphone.png") no-repeat;
|
48 | border-radius: 56px;
|
49 | }
|
50 | }
|
51 | .contents {
|
52 | height: 647px;
|
53 | width: 310px;
|
54 | position: relative;
|
55 | top: 53px;
|
56 | border-radius: 0 0 30px 30px;
|
57 | overflow: auto;
|
58 | }
|
59 | </style>
|