1 | <template>
|
2 | <div class="demo-box-container">
|
3 | <div class="demo-instance">
|
4 | <slot name="instance" />
|
5 | </div>
|
6 | <div class="demo-content">
|
7 | <slot name="code-box" />
|
8 | </div>
|
9 | </div>
|
10 | </template>
|
11 |
|
12 | <style lang='scss'>
|
13 | @mixin demo-box-hover {
|
14 | &:hover {
|
15 | box-shadow: 0 0 10px #ccc;
|
16 | }
|
17 | }
|
18 |
|
19 | @mixin demo-box {
|
20 | @include demo-box-hover;
|
21 | padding: 14px 20px;
|
22 | border: 1px solid #ebedf0;
|
23 | border-radius: 2px;
|
24 | width: 100%;
|
25 | position: relative;
|
26 | margin: 0 0 16px;
|
27 | transition: all 0.2s;
|
28 | }
|
29 | .demo-box-container {
|
30 | height: auto;
|
31 | .clipboard-btn {
|
32 | font-size: 20px;
|
33 | position: absolute;
|
34 | right: 20px;
|
35 | @include hover-pointer;
|
36 | }
|
37 | .demo-box-hover {
|
38 | &:hover {
|
39 | box-shadow: 0 0 10px #ccc;
|
40 | }
|
41 | }
|
42 | .demo-instance {
|
43 | @include demo-box;
|
44 | }
|
45 | .demo-content {
|
46 | @include demo-box;
|
47 | }
|
48 | }
|
49 | </style>
|
50 |
|
51 | <script>
|
52 | export default {
|
53 | name: "DemoBox",
|
54 | components: {},
|
55 | props: {},
|
56 | data() {
|
57 | return {};
|
58 | },
|
59 | computed: {},
|
60 | watch: {},
|
61 | created() {},
|
62 | mounted() {},
|
63 | methods: {},
|
64 | };
|
65 | </script> |
\ | No newline at end of file |