Update playground and dot.we (#467)
diff --git a/docs/.vuepress/components/Tool-Dotwe.vue b/docs/.vuepress/components/Tool-Dotwe.vue
new file mode 100644
index 0000000..18b2b5f
--- /dev/null
+++ b/docs/.vuepress/components/Tool-Dotwe.vue
@@ -0,0 +1,111 @@
+<template>
+ <div class="wrap">
+ <div class="warning">
+ <p class="warning-icon">WARNING</p>
+ <p>{{lang === 'en-US' ? 'Online Playground is a third party editor, and is not developed nor maintained by Apache Weex.' : 'Online Playground 是三方编辑器, 不由 Apache Weex 开发或维护。'}}</p>
+ </div>
+ <img class="editor hide" src="https://img.alicdn.com/tfs/TB1OFpuI4naK1RjSZFBXXcW7VXa-1936-1188.png" />
+ <div class="link">
+ <h3 class="title">{{lang === 'en-US' ? 'Online Editor' : '在线编辑器'}}</h3>
+ <div class="desc">{{lang === 'en-US' ? 'Weex Online Editor for developers. Developer don\'t need install anything. Also, it\'s convenient for talking about some developing issue.' : 'Weex 在线编辑器，无需安装任何环境，马上开始Weex代码开发。交流Weex代码的利器！'}}</div>
+ <a href="http://editor.weex.io" target="_blank" class="btn">{{lang === 'en-US' ? 'Open Editor' : '打开在线编辑器'}}</a>
+ </div>
+ </div>
+</template>
+
+<script>
+export default {
+ props: ['lang']
+}
+</script>
+
+<style scoped>
+.wrap {
+ position: relative;
+ display: flex;
+ height: calc(100vh - 3.6rem);
+ margin-top: 3.6rem !important;
+ padding-left: 11rem;
+ background: url(https://img.alicdn.com/tfs/TB1WrU8IQvoK1RjSZPfXXXPKFXa-2438-1420.png) 10rem 0 / cover no-repeat;
+}
+.warning {
+ position: absolute;
+ width: 100%;
+ border-color: #f63;
+ background-color: #fff2ee;
+ padding: .1rem 1rem;
+ border-left-width: .2rem;
+}
+.warning-icon {
+ padding-left: 21px;
+ color: #606273;
+ background: url(https://gw.alicdn.com/tfs/TB1mwIBAwHqK1RjSZJnXXbNLpXa-16-16.svg) 0 5px no-repeat;
+ font-weight: 600;
+ margin-bottom: -.4rem;
+}
+.warning-icon + p {
+ color: #4d0000;
+}
+.editor {
+ margin-top: 7.2rem;
+ height: calc(100vh - 3.6rem - 7.2rem);
+}
+.link {
+ margin-left: -140px;
+ width: 250px;
+}
+.title {
+ padding-top: 150px;
+ margin-top: 0;
+ margin-bottom: 6px;
+ line-height: 56px;
+ font-family: PingFangSC-Semibold;
+ font-size: 40px;
+ color: #373D41;
+}
+.desc {
+ line-height: 20px;
+ font-size: 14px;
+ color: #373D41;
+ margin-bottom: 32px;
+}
+.btn {
+ display: inline-block;
+ width: 176px;
+ height: 48px;
+ line-height: 48px;
+ color: #fff;
+ font-size: 16px;
+ background: #00B4FF;
+ border-radius: 2px;
+ margin-left: 4px;
+ margin-right: 4px;
+ text-align: center;
+}
+.btn:hover {
+ text-decoration: none !important;
+}
+
+@media (max-width: 1200px) {
+ .hide {
+ display: none;
+ }
+ .link {
+ margin-left: 0;
+ width: auto;
+ text-align: center;
+ padding-left: 15px;
+ padding-right: 15px;
+ }
+ .wrap {
+ display: block;
+ }
+}
+
+@media (max-width: 720px) {
+ .wrap {
+ padding-left: 0;
+ background-position-x: 0;
+ }
+}
+</style>
diff --git a/docs/.vuepress/components/Tool-Playground.vue b/docs/.vuepress/components/Tool-Playground.vue
new file mode 100644
index 0000000..a821a0f
--- /dev/null
+++ b/docs/.vuepress/components/Tool-Playground.vue
@@ -0,0 +1,94 @@
+<template>
+ <div class="wrap">
+ <img class="phone hide" src="https://img.alicdn.com/tfs/TB1mvFeI7voK1RjSZFwXXciCFXa-976-1420.png" />
+ <div class="download">
+ <h3 class="title">Weex Playground</h3>
+ <div class="desc">{{lang === 'en-US' ? 'Weex Native Runtime showcase & Weex vue file preview.' : 'Weex 示例App，可扫码预览Weex代码构建后的页面。'}}</div>
+ <img src="/tool-playground-qrcode.png" width="128" />
+ <div class="desc2">{{lang === 'en-US' ? 'scan the qrcode and download the app' : '扫二维码下载该APP'}}</div>
+ <div><a href="https://itunes.apple.com/cn/app/weex-playground/id1130862662?mt=8" target="_blank" class="btn"><img src="/tool-playground-apple-icon.png" width="12" />{{lang === 'en-US' ? 'iOS' : 'iOS版下载'}}</a><a href="http://appdownload.alicdn.com/publish/weex_playgroud/latest/weex_playgroud_10006024.apk" class="btn" ><img src="/tool-playground-android-icon.png" width="12"/>{{lang === 'en-US' ? 'Android' : 'Android版下载'}}</a></div>
+ </div>
+ </div>
+</template>
+
+<script>
+export default {
+ props: ['lang']
+}
+</script>
+
+
+<style scoped>
+.wrap {
+ display: flex;
+ height: calc(100vh - 3.6rem);
+ margin-top: 3.6rem !important;
+ padding-left: 11rem;
+ background: url(https://img.alicdn.com/tfs/TB1qzBXI7voK1RjSZFNXXcxMVXa-2438-1420.png) 10rem 0 / cover no-repeat;
+}
+.phone {
+ height: calc(100vh - 3.6rem);
+}
+.download {
+ margin-left: 130px;
+ text-align: center;
+}
+.title {
+ margin-top: 0;
+ padding-top: 140px;
+ margin-bottom: 6px;
+ line-height: 56px;
+ font-family: PingFangSC-Semibold;
+ font-size: 40px;
+ color: #373D41;
+}
+.desc {
+ line-height: 20px;
+ font-size: 14px;
+ color: #373D41;
+ margin-bottom: 38px;
+}
+.desc2 {
+ margin-top: 5px;
+ margin-bottom: 24px;
+ line-height: 22px;
+ font-size: 12px;
+ color: #373D41;
+}
+.btn {
+ display: inline-block;
+ width: 158px;
+ height: 48px;
+ line-height: 48px;
+ color: #fff;
+ font-size: 16px;
+ background: #00B4FF;
+ border-radius: 2px;
+ margin-left: 4px;
+ margin-right: 4px;
+ margin-bottom: 10px;
+}
+.btn:hover {
+ text-decoration: none !important;
+}
+.btn > img {
+ margin-right: 5px;
+}
+
+@media (max-width: 1050px) {
+ .hide {
+ display: none;
+ }
+}
+
+@media (max-width: 720px) {
+ .wrap {
+ display: block;
+ padding-left: 0;
+ background-position-x: 0;
+ }
+ .download {
+ margin-left: 0;
+ }
+}
+</style>
diff --git a/docs/tools/dotwe.md b/docs/tools/dotwe.md
new file mode 100644
index 0000000..224b3f4
--- /dev/null
+++ b/docs/tools/dotwe.md
@@ -0,0 +1,5 @@
+---
+pageClass: tool
+---
+
+<Tool-Dotwe lang="en-US" />
\ No newline at end of file
diff --git a/docs/tools/playground.md b/docs/tools/playground.md
index 6796501..0a5ba7f 100644
--- a/docs/tools/playground.md
+++ b/docs/tools/playground.md
@@ -1 +1,5 @@
-# Playground App
\ No newline at end of file
+---
+pageClass: tool
+---
+
+<Tool-Playground lang="en-US"/>
\ No newline at end of file
diff --git a/docs/zh/tools/dotwe.md b/docs/zh/tools/dotwe.md
new file mode 100644
index 0000000..a526877
--- /dev/null
+++ b/docs/zh/tools/dotwe.md
@@ -0,0 +1,5 @@
+---
+pageClass: tool
+---
+
+<Tool-Dotwe />
\ No newline at end of file
diff --git a/docs/zh/tools/playground.md b/docs/zh/tools/playground.md
index 6796501..022cedf 100644
--- a/docs/zh/tools/playground.md
+++ b/docs/zh/tools/playground.md
@@ -1 +1,5 @@
-# Playground App
\ No newline at end of file
+---
+pageClass: tool
+---
+
+<Tool-Playground />
\ No newline at end of file
