import{M as l}from"./chunks/Mockup.5c49fc9b.js";import{s as a}from"./chunks/screen.fc899083.js";import{o as p,c as o,a as s,b as e,u as n,f as t,d as c}from"./app.06d4fed4.js";const r=s("h1",{id:"multiple-mockups",tabindex:"-1"},[t("Multiple mockups "),s("a",{class:"header-anchor",href:"#multiple-mockups","aria-hidden":"true"},"#")],-1),F=c(`<h2 id="code-example" tabindex="-1">Code example <a class="header-anchor" href="#code-example" aria-hidden="true">#</a></h2><div class="language-vue"><span class="copy"></span><pre><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">Mockup</span><span style="color:#89DDFF;"> </span></span>
<span class="line"><span style="color:#89DDFF;">    :</span><span style="color:#C792EA;">screen</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">[</span><span style="color:#A6ACCD;">screenImage</span><span style="color:#89DDFF;">, </span><span style="color:#A6ACCD;">screenImage</span><span style="color:#89DDFF;">]</span><span style="color:#89DDFF;">&quot;</span></span>
<span class="line"><span style="color:#89DDFF;">    :</span><span style="color:#C792EA;">position</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">[</span></span>
<span class="line"><span style="color:#89DDFF;">      {</span></span>
<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#F07178;">x</span><span style="color:#89DDFF;">: -</span><span style="color:#F78C6C;">50</span></span>
<span class="line"><span style="color:#89DDFF;">      },</span></span>
<span class="line"><span style="color:#89DDFF;">      {</span></span>
<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#F07178;">x</span><span style="color:#89DDFF;">: </span><span style="color:#F78C6C;">50</span></span>
<span class="line"><span style="color:#89DDFF;">      },</span></span>
<span class="line"><span style="color:#89DDFF;">    ]</span><span style="color:#89DDFF;">&quot;</span></span>
<span class="line"><span style="color:#89DDFF;">    :</span><span style="color:#C792EA;">rotation</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">[{}, {</span></span>
<span class="line"><span style="color:#89DDFF;">      </span><span style="color:#F07178;">y</span><span style="color:#89DDFF;">: -</span><span style="color:#F78C6C;">0.3</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#89DDFF;">      </span><span style="color:#F07178;">z</span><span style="color:#89DDFF;">: -</span><span style="color:#F78C6C;">0.06</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#89DDFF;">    }]</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
<span class="line"><span style="color:#89DDFF;">  /&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">script</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">setup</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> Mockup </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">vue-three-d-mockup</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> screenImage </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">./assets/screen.png</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span></code></pre></div>`,2),_=JSON.parse('{"title":"Multiple mockups","description":"","frontmatter":{},"headers":[{"level":2,"title":"Code example","slug":"code-example"}],"relativePath":"guide/multiple-mockups.md","lastUpdated":1676667111000}'),D={name:"guide/multiple-mockups.md"},A=Object.assign(D,{setup(y){return(i,u)=>(p(),o("div",null,[r,s("p",null,[e(l,{style:{width:"100%",height:"400px"},screen:[n(a),n(a)],position:[{x:-50},{x:50}],rotation:[{},{y:-.3,z:-.06}]},null,8,["screen","rotation"])]),F]))}});export{_ as __pageData,A as default};
