1 | <template>
|
2 | <div
|
3 | class="vessel"
|
4 | ref="vessel"
|
5 | :class="{
|
6 | 'vessel--rotate': isBackface,
|
7 | 'vessel--isPc': isPC
|
8 | }"
|
9 | >
|
10 | <deformable-box
|
11 | v-if="isPC"
|
12 | :resizable="['right']"
|
13 | :initWidth="800"
|
14 | :maxWidth="1100"
|
15 | :minWidth="400"
|
16 | >
|
17 | <editor class="editor"></editor>
|
18 | </deformable-box>
|
19 | <editor v-else class="editor"></editor>
|
20 | <monitor class="monitor"></monitor>
|
21 | <div
|
22 | class="flipButton"
|
23 | @click="isBackface = !isBackface"
|
24 | @touchmove.stop="onFlipBtnDrag"
|
25 | :style="{ top: `${flipBtnTop}px` }"
|
26 | >
|
27 | <svg
|
28 | t="1562510307124"
|
29 | class="icon"
|
30 | viewBox="0 0 1024 1024"
|
31 | version="1.1"
|
32 | xmlns="http://www.w3.org/2000/svg"
|
33 | p-id="2037"
|
34 | xmlns:xlink="http://www.w3.org/1999/xlink"
|
35 | >
|
36 | <path
|
37 | d="M213.333333 259.84v512l-55.04-55.466667a42.666667 42.666667 0 0 0-60.586666 60.586667l128 128a42.666667 42.666667 0 0 0 60.586666 0l128-128a42.666667 42.666667 0 0 0 0-60.586667 42.666667 42.666667 0 0 0-60.586666 0L298.666667 771.84v-512A66.56 66.56 0 0 1 363.946667 192H469.333333a42.666667 42.666667 0 0 0 0-85.333333H363.946667A151.893333 151.893333 0 0 0 213.333333 259.84zM609.706667 247.04a42.666667 42.666667 0 0 0 60.586666 60.586667L725.333333 252.16v512a66.56 66.56 0 0 1-65.28 67.84H554.666667a42.666667 42.666667 0 0 0 0 85.333333h105.386666A151.893333 151.893333 0 0 0 810.666667 764.16v-512l55.04 55.466667a42.666667 42.666667 0 0 0 60.586666 0 42.666667 42.666667 0 0 0 0-60.586667l-128-128a42.666667 42.666667 0 0 0-60.586666 0z"
|
38 | p-id="2038"
|
39 | ></path>
|
40 | </svg>
|
41 | </div>
|
42 | </div>
|
43 | </template>
|
44 |
|
45 | <script>
|
46 | import Editor from '@/components/editor.vue';
|
47 | import Monitor from '@/components/monitor.vue';
|
48 | import DeformableBox from '@/components/deformableBox.vue';
|
49 | export default {
|
50 | name: 'vessel',
|
51 | data() {
|
52 | return {
|
53 | isBackface: false,
|
54 | flipBtnTop: 200
|
55 | };
|
56 | },
|
57 | components: {
|
58 | Editor,
|
59 | Monitor,
|
60 | DeformableBox
|
61 | },
|
62 | computed: {
|
63 | isPC() {
|
64 | var userAgentInfo = navigator.userAgent;
|
65 | var Agents = new Array(
|
66 | 'Android',
|
67 | 'iPhone',
|
68 | 'SymbianOS',
|
69 | 'Windows Phone',
|
70 | 'iPad',
|
71 | 'iPod'
|
72 | );
|
73 | var flag = true;
|
74 | for (var v = 0; v < Agents.length; v++) {
|
75 | if (userAgentInfo.indexOf(Agents[v]) > 0) {
|
76 | flag = false;
|
77 | break;
|
78 | }
|
79 | }
|
80 | return flag;
|
81 | }
|
82 | },
|
83 | methods: {
|
84 |
|
85 | onFlipBtnDrag(e) {
|
86 | let top = e.targetTouches[0].clientY;
|
87 | top = Math.min(window.screen.height - 40, Math.max(0, top));
|
88 | this.flipBtnTop = top;
|
89 | }
|
90 | }
|
91 | };
|
92 | </script>
|
93 |
|
94 | <style lang="scss">
|
95 | @import '@/css/index.scss';
|
96 | .vessel {
|
97 | display: grid;
|
98 | grid-template-columns: repeat(2, 1fr);
|
99 | grid-gap: 1px;
|
100 | & .editor {
|
101 | background: $c-bg;
|
102 | }
|
103 | & .monitor {
|
104 | background: $c-bg;
|
105 | }
|
106 | & .flipButton {
|
107 | display: none;
|
108 | }
|
109 | &--isPc {
|
110 | display: flex;
|
111 | & .editor {
|
112 | margin-right: 1px;
|
113 | }
|
114 | & .monitor {
|
115 | flex-grow: 1;
|
116 | }
|
117 | }
|
118 | }
|
119 |
|
120 | @media (max-width: $c-small-screen) {
|
121 | .vessel {
|
122 | position: relative;
|
123 | display: block;
|
124 | & .editor,
|
125 | .monitor {
|
126 | position: absolute;
|
127 | top: 0;
|
128 | left: 0;
|
129 | width: 100%;
|
130 | backface-visibility: hidden;
|
131 | -webkit-backface-visibility: hidden;
|
132 | transition: 1s all ease;
|
133 | border: 1px solid $c-gap;
|
134 | }
|
135 | & .monitor {
|
136 | height: 100%;
|
137 | transform: perspective(800px) rotateY(0deg);
|
138 | }
|
139 | & .editor {
|
140 | transform: perspective(800px) rotateY(180deg);
|
141 | }
|
142 | &--rotate {
|
143 | & .editor {
|
144 | transform: perspective(800px) rotateY(0deg);
|
145 | }
|
146 | & .monitor {
|
147 | transform: perspective(800px) rotateY(-180deg);
|
148 | & #monitor-iframe {
|
149 | opacity: 0;
|
150 | }
|
151 | }
|
152 | }
|
153 | & .flipButton {
|
154 | display: block;
|
155 | position: fixed;
|
156 | top: 50%;
|
157 | left: 0;
|
158 | border-radius: 0 50% 50% 0;
|
159 | width: 35px;
|
160 | height: 30px;
|
161 | display: flex;
|
162 | justify-content: flex-end;
|
163 | align-items: center;
|
164 | background: $c-flipbtn-bg;
|
165 | opacity: 0.4;
|
166 | transition: opacity 0.2s ease-out;
|
167 | & svg {
|
168 | width: 20px;
|
169 | height: 20px;
|
170 | margin-right: 5px;
|
171 | fill: $c-flipbtn-color;
|
172 | }
|
173 | &:active {
|
174 | opacity: 1;
|
175 | }
|
176 | }
|
177 | }
|
178 | }
|
179 | </style>
|