创建项目

.hbuilderx/launch.json

@@ -0,0 +1,11 @@
+{ // launch.json 配置了启动调试时相关设置，configurations下节点名称可为 app-plus/h5/mp-weixin/mp-baidu/mp-alipay/mp-qq/mp-toutiao/mp-360/
+  // launchtype项可配置值为local或remote, local代表前端连本地云函数，remote代表前端连云端云函数
+    "version": "0.0",
+    "configurations": [{
+            "type": "uniCloud",
+            "default": {
+                "launchtype": "remote"
+            }
+        }
+    ]
+}

App.vue

@@ -0,0 +1,26 @@
+<template>
+	<div>
+		<!-- <router-view></router-view> -->
+		<Home></Home>
+	</div>
+</template>
+<script>
+	import Home from './pages/home.vue'
+	export default {
+		data() {
+			return {}
+		},
+		components: {
+			Home
+		},
+		onLaunch: function() {
+			console.log('App Launch')
+		},
+		onShow: function() {
+			console.log('App Show')
+		},
+		onHide: function() {
+			console.log('App Hide')
+		}
+	}
+</script>

assets/icon/demo.css

@@ -0,0 +1,539 @@
+/* Logo 字体 */
+@font-face {
+  font-family: "iconfont logo";
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
+}
+
+.logo {
+  font-family: "iconfont logo";
+  font-size: 160px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* tabs */
+.nav-tabs {
+  position: relative;
+}
+
+.nav-tabs .nav-more {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  height: 42px;
+  line-height: 42px;
+  color: #666;
+}
+
+#tabs {
+  border-bottom: 1px solid #eee;
+}
+
+#tabs li {
+  cursor: pointer;
+  width: 100px;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  font-size: 16px;
+  border-bottom: 2px solid transparent;
+  position: relative;
+  z-index: 1;
+  margin-bottom: -1px;
+  color: #666;
+}
+
+
+#tabs .active {
+  border-bottom-color: #f00;
+  color: #222;
+}
+
+.tab-container .content {
+  display: none;
+}
+
+/* 页面布局 */
+.main {
+  padding: 30px 100px;
+  width: 960px;
+  margin: 0 auto;
+}
+
+.main .logo {
+  color: #333;
+  text-align: left;
+  margin-bottom: 30px;
+  line-height: 1;
+  height: 110px;
+  margin-top: -50px;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.main .logo a {
+  font-size: 160px;
+  color: #333;
+}
+
+.helps {
+  margin-top: 40px;
+}
+
+.helps pre {
+  padding: 20px;
+  margin: 10px 0;
+  border: solid 1px #e7e1cd;
+  background-color: #fffdef;
+  overflow: auto;
+}
+
+.icon_lists {
+  width: 100% !important;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.icon_lists li {
+  width: 100px;
+  margin-bottom: 10px;
+  margin-right: 20px;
+  text-align: center;
+  list-style: none !important;
+  cursor: default;
+}
+
+.icon_lists li .code-name {
+  line-height: 1.2;
+}
+
+.icon_lists .icon {
+  display: block;
+  height: 100px;
+  line-height: 100px;
+  font-size: 42px;
+  margin: 10px auto;
+  color: #333;
+  -webkit-transition: font-size 0.25s linear, width 0.25s linear;
+  -moz-transition: font-size 0.25s linear, width 0.25s linear;
+  transition: font-size 0.25s linear, width 0.25s linear;
+}
+
+.icon_lists .icon:hover {
+  font-size: 100px;
+}
+
+.icon_lists .svg-icon {
+  /* 通过设置 font-size 来改变图标大小 */
+  width: 1em;
+  /* 图标和文字相邻时，垂直对齐 */
+  vertical-align: -0.15em;
+  /* 通过设置 color 来改变 SVG 的颜色/fill */
+  fill: currentColor;
+  /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
+      normalize.css 中也包含这行 */
+  overflow: hidden;
+}
+
+.icon_lists li .name,
+.icon_lists li .code-name {
+  color: #666;
+}
+
+/* markdown 样式 */
+.markdown {
+  color: #666;
+  font-size: 14px;
+  line-height: 1.8;
+}
+
+.highlight {
+  line-height: 1.5;
+}
+
+.markdown img {
+  vertical-align: middle;
+  max-width: 100%;
+}
+
+.markdown h1 {
+  color: #404040;
+  font-weight: 500;
+  line-height: 40px;
+  margin-bottom: 24px;
+}
+
+.markdown h2,
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+  color: #404040;
+  margin: 1.6em 0 0.6em 0;
+  font-weight: 500;
+  clear: both;
+}
+
+.markdown h1 {
+  font-size: 28px;
+}
+
+.markdown h2 {
+  font-size: 22px;
+}
+
+.markdown h3 {
+  font-size: 16px;
+}
+
+.markdown h4 {
+  font-size: 14px;
+}
+
+.markdown h5 {
+  font-size: 12px;
+}
+
+.markdown h6 {
+  font-size: 12px;
+}
+
+.markdown hr {
+  height: 1px;
+  border: 0;
+  background: #e9e9e9;
+  margin: 16px 0;
+  clear: both;
+}
+
+.markdown p {
+  margin: 1em 0;
+}
+
+.markdown>p,
+.markdown>blockquote,
+.markdown>.highlight,
+.markdown>ol,
+.markdown>ul {
+  width: 80%;
+}
+
+.markdown ul>li {
+  list-style: circle;
+}
+
+.markdown>ul li,
+.markdown blockquote ul>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown>ul li p,
+.markdown>ol li p {
+  margin: 0.6em 0;
+}
+
+.markdown ol>li {
+  list-style: decimal;
+}
+
+.markdown>ol li,
+.markdown blockquote ol>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown code {
+  margin: 0 3px;
+  padding: 0 5px;
+  background: #eee;
+  border-radius: 3px;
+}
+
+.markdown strong,
+.markdown b {
+  font-weight: 600;
+}
+
+.markdown>table {
+  border-collapse: collapse;
+  border-spacing: 0px;
+  empty-cells: show;
+  border: 1px solid #e9e9e9;
+  width: 95%;
+  margin-bottom: 24px;
+}
+
+.markdown>table th {
+  white-space: nowrap;
+  color: #333;
+  font-weight: 600;
+}
+
+.markdown>table th,
+.markdown>table td {
+  border: 1px solid #e9e9e9;
+  padding: 8px 16px;
+  text-align: left;
+}
+
+.markdown>table th {
+  background: #F7F7F7;
+}
+
+.markdown blockquote {
+  font-size: 90%;
+  color: #999;
+  border-left: 4px solid #e9e9e9;
+  padding-left: 0.8em;
+  margin: 1em 0;
+}
+
+.markdown blockquote p {
+  margin: 0;
+}
+
+.markdown .anchor {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  margin-left: 8px;
+}
+
+.markdown .waiting {
+  color: #ccc;
+}
+
+.markdown h1:hover .anchor,
+.markdown h2:hover .anchor,
+.markdown h3:hover .anchor,
+.markdown h4:hover .anchor,
+.markdown h5:hover .anchor,
+.markdown h6:hover .anchor {
+  opacity: 1;
+  display: inline-block;
+}
+
+.markdown>br,
+.markdown>p>br {
+  clear: both;
+}
+
+
+.hljs {
+  display: block;
+  background: white;
+  padding: 0.5em;
+  color: #333333;
+  overflow-x: auto;
+}
+
+.hljs-comment,
+.hljs-meta {
+  color: #969896;
+}
+
+.hljs-string,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-strong,
+.hljs-emphasis,
+.hljs-quote {
+  color: #df5000;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-type {
+  color: #a71d5d;
+}
+
+.hljs-literal,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-attribute {
+  color: #0086b3;
+}
+
+.hljs-section,
+.hljs-name {
+  color: #63a35c;
+}
+
+.hljs-tag {
+  color: #333333;
+}
+
+.hljs-title,
+.hljs-attr,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #795da3;
+}
+
+.hljs-addition {
+  color: #55a532;
+  background-color: #eaffea;
+}
+
+.hljs-deletion {
+  color: #bd2c00;
+  background-color: #ffecec;
+}
+
+.hljs-link {
+  text-decoration: underline;
+}
+
+/* 代码高亮 */
+/* PrismJS 1.15.0
+https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+code[class*="language-"],
+pre[class*="language-"] {
+  color: black;
+  background: none;
+  text-shadow: 0 1px white;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+@media print {
+
+  code[class*="language-"],
+  pre[class*="language-"] {
+    text-shadow: none;
+  }
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: .5em 0;
+  overflow: auto;
+}
+
+:not(pre)>code[class*="language-"],
+pre[class*="language-"] {
+  background: #f5f2f0;
+}
+
+/* Inline code */
+:not(pre)>code[class*="language-"] {
+  padding: .1em;
+  border-radius: .3em;
+  white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: slategray;
+}
+
+.token.punctuation {
+  color: #999;
+}
+
+.namespace {
+  opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #9a6e3a;
+  background: hsla(0, 0%, 100%, .5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #07a;
+}
+
+.token.function,
+.token.class-name {
+  color: #DD4A68;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+  color: #e90;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}

assets/icon/demo_index.html

@@ -0,0 +1,239 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <title>IconFont Demo</title>
+  <link rel="shortcut icon" href="https://img.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/>
+  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
+  <link rel="stylesheet" href="demo.css">
+  <link rel="stylesheet" href="iconfont.css">
+  <script src="iconfont.js"></script>
+  <!-- jQuery -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
+  <!-- 代码高亮 -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
+</head>
+<body>
+  <div class="main">
+    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">&#xe86b;</a></h1>
+    <div class="nav-tabs">
+      <ul id="tabs" class="dib-box">
+        <li class="dib active"><span>Unicode</span></li>
+        <li class="dib"><span>Font class</span></li>
+        <li class="dib"><span>Symbol</span></li>
+      </ul>
+      
+      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=1978670" target="_blank" class="nav-more">查看项目</a>
+      
+    </div>
+    <div class="tab-container">
+      <div class="content unicode" style="display: block;">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+              <span class="icon font_family">&#xe626;</span>
+                <div class="name">形状 2</div>
+                <div class="code-name">&amp;#xe626;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon font_family">&#xe622;</span>
+                <div class="name">编组</div>
+                <div class="code-name">&amp;#xe622;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon font_family">&#xe623;</span>
+                <div class="name">编组备份 20</div>
+                <div class="code-name">&amp;#xe623;</div>
+              </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="unicode-">Unicode 引用</h2>
+          <hr>
+
+          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
+          <ul>
+            <li>兼容性最好，支持 IE6+，及所有现代浏览器。</li>
+            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
+            <li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
+          </ul>
+          <blockquote>
+            <p>注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式</p>
+          </blockquote>
+          <p>Unicode 使用步骤如下：</p>
+          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
+<pre><code class="language-css"
+>@font-face {
+  font-family: 'font_family';
+  src: url('iconfont.eot');
+  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
+      url('iconfont.woff2') format('woff2'),
+      url('iconfont.woff') format('woff'),
+      url('iconfont.ttf') format('truetype'),
+      url('iconfont.svg#font_family') format('svg');
+}
+</code></pre>
+          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
+<pre><code class="language-css"
+>.font_family {
+  font-family: "font_family" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+</code></pre>
+          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
+<pre>
+<code class="language-html"
+>&lt;span class="font_family"&gt;&amp;#x33;&lt;/span&gt;
+</code></pre>
+          <blockquote>
+            <p>"font_family" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+          </blockquote>
+          </div>
+      </div>
+      <div class="content font-class">
+        <ul class="icon_lists dib-box">
+          
+          <li class="dib">
+            <span class="icon font_family icon-xingzhuang21"></span>
+            <div class="name">
+              形状 2
+            </div>
+            <div class="code-name">.icon-xingzhuang21
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon font_family icon-bianzu"></span>
+            <div class="name">
+              编组
+            </div>
+            <div class="code-name">.icon-bianzu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon font_family icon-bianzubeifen20"></span>
+            <div class="name">
+              编组备份 20
+            </div>
+            <div class="code-name">.icon-bianzubeifen20
+            </div>
+          </li>
+          
+        </ul>
+        <div class="article markdown">
+        <h2 id="font-class-">font-class 引用</h2>
+        <hr>
+
+        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
+        <p>与 Unicode 使用方式相比，具有如下特点：</p>
+        <ul>
+          <li>兼容性良好，支持 IE8+，及所有现代浏览器。</li>
+          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
+          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
+          <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
+        </ul>
+        <p>使用步骤如下：</p>
+        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
+<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
+</code></pre>
+        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="language-html">&lt;span class="font_family icon-xxx"&gt;&lt;/span&gt;
+</code></pre>
+        <blockquote>
+          <p>"
+            font_family" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+        </blockquote>
+      </div>
+      </div>
+      <div class="content symbol">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-xingzhuang21"></use>
+                </svg>
+                <div class="name">形状 2</div>
+                <div class="code-name">#icon-xingzhuang21</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-bianzu"></use>
+                </svg>
+                <div class="name">编组</div>
+                <div class="code-name">#icon-bianzu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-bianzubeifen20"></use>
+                </svg>
+                <div class="name">编组备份 20</div>
+                <div class="code-name">#icon-bianzubeifen20</div>
+            </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="symbol-">Symbol 引用</h2>
+          <hr>
+
+          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
+            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
+          <ul>
+            <li>支持多色图标了，不再受单色限制。</li>
+            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
+            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
+            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
+          </ul>
+          <p>使用步骤如下：</p>
+          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
+<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
+</code></pre>
+          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
+<pre><code class="language-html">&lt;style&gt;
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+&lt;/style&gt;
+</code></pre>
+          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
+  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
+&lt;/svg&gt;
+</code></pre>
+          </div>
+      </div>
+
+    </div>
+  </div>
+  <script>
+  $(document).ready(function () {
+      $('.tab-container .content:first').show()
+
+      $('#tabs li').click(function (e) {
+        var tabContent = $('.tab-container .content')
+        var index = $(this).index()
+
+        if ($(this).hasClass('active')) {
+          return
+        } else {
+          $('#tabs li').removeClass('active')
+          $(this).addClass('active')
+
+          tabContent.hide().eq(index).fadeIn()
+        }
+      })
+    })
+  </script>
+</body>
+</html>

assets/icon/iconfont.css

@@ -0,0 +1,29 @@
+@font-face {font-family: "font_family";
+  src: url('@/assets/icon/iconfont.eot?t=1614763101431'); /* IE9 */
+  src: url('@/assets/icon/iconfont.eot?t=1614763101431#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAO8AAsAAAAAB/wAAANtAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDFAqDFIJqATYCJAMQCwoABCAFhREHUBsABxEVnK3IfiTYuMXFivkoyc0gb4KH6q983b8HWpnxygHIw1HCLZUJgK1N0V1CRyiW5Dz4LstMnvTnhdA1/8dMl5gC3wYA2UkzHlBEY+vAdtfPk/0e4q0dYjeXQwBmAohDtGpTXo8RhdlOAGLwgH49MGbEqJpYgRGBHhmq/MRydBjlAnkFWBa8vPhMijCCRKdhdq3u27o3Re9C3kVo0+3T6exBoIynBPhRoAFxgALRHVV3RIvccWiY1fkUCYAehUC+C30XYbczJikQwzo9RkD2+ucJPWa0FYA0YGlnRXHwkPAulIxxIoB68tEKAGNv7wjgiCBxw2QpS6CcbIHBSvczeSs1CauYdOamv9p8I83p7K0A3bbbmROclHNHbM+G+samhqahF9KbbQ3WhRdP7oqddPduw5079ffuNd6/HxLTBGA0AbnZPFZha+y26IJ3wwakWTgpG9bRDp7h27TpkqUFs+hY79iYkuTS406P2NdDt881DTDN3X5geZC8PGd5zwMDDnzsXXEDcrqfKC7892P9yqLCpvpLJ3c1rb/2RpvVs+Wd7+XuPd18VvWfJY8ckFPltCP7Z2kztaP7I0Kmy9EDMxs7iQljRbNomTAGiMJ9jZEtsnnCWFKCC58+e/q8pGTwkNBuIYMGtZ3le/Bc1fZVHrrO133bL+m8pHuqfrz7zOr95y75/l/W5U8Xc2rOpF95k+gOgP24GqlND3DTtQ9/IQAB126d7tDNMe+v0aIAeNJnTBcisU9vH4ERCTzlF+WpEWC3KxFopkspoIYcUNtbUMSmgpCA2dKDnepdeDYG1111gsCSofBAYiAIaFiIhCpkClSHzIfqke2AmVjqRltwZSoaQpmAGFYQIPDgEpA4cBNoePAcqpB/ITqUsED1yGBgplFkTmkhQiwxe0oFR8UFph/wHAPZIj24n+xp9Ox+VzS7G6VQGD/6RNk4BqgSkhBfhwFlvB7b29SqBCTRQ9tgNXQuQpL4wlnzVTU1RWJfTJDPcITsQKngqLjA9AOeYyCPqQYtgvZfzejZ/a5odjdKfQVI+hNl45raQJWX7aAdO7QtucZZtrepVQlIiNdDO0ojdC5Cwhu9cNZ87eFMTWFVo7bsfPdc/8yZQAXmNEpIoQkldFjHczD/dR+9JnWl78lj+O8Xrs6ETBjqkgwAAAA=') format('woff2'),
+  url('@/assets/icon/iconfont.woff?t=1614763101431') format('woff'),
+  url('@/assets/icon/iconfont.ttf?t=1614763101431') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
+  url('@/assets/icon/iconfont.svg?t=1614763101431#font_family') format('svg'); /* iOS 4.1- */
+}
+
+.font_family {
+  font-family: "font_family" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-xingzhuang21:before {
+  content: "\e626";
+}
+
+.icon-bianzu:before {
+  content: "\e622";
+}
+
+.icon-bianzubeifen20:before {
+  content: "\e623";
+}
+

assets/icon/iconfont.json

@@ -0,0 +1,30 @@
+{
+  "id": "1978670",
+  "name": "测试",
+  "font_family": "font_family",
+  "css_prefix_text": "icon-",
+  "description": "",
+  "glyphs": [
+    {
+      "icon_id": "20162100",
+      "name": "形状 2",
+      "font_class": "xingzhuang21",
+      "unicode": "e626",
+      "unicode_decimal": 58918
+    },
+    {
+      "icon_id": "20161464",
+      "name": "编组",
+      "font_class": "bianzu",
+      "unicode": "e622",
+      "unicode_decimal": 58914
+    },
+    {
+      "icon_id": "20161466",
+      "name": "编组备份 20",
+      "font_class": "bianzubeifen20",
+      "unicode": "e623",
+      "unicode_decimal": 58915
+    }
+  ]
+}

assets/icon/iconfont.svg

@@ -0,0 +1,35 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<!--
+2013-9-30: Created.
+-->
+<svg>
+<metadata>
+Created by iconfont
+</metadata>
+<defs>
+
+<font id="font_family" horiz-adv-x="1024" >
+  <font-face
+    font-family="font_family"
+    font-weight="500"
+    font-stretch="normal"
+    units-per-em="1024"
+    ascent="896"
+    descent="-128"
+  />
+    <missing-glyph />
+    
+    <glyph glyph-name="xingzhuang21" unicode="&#58918;" d="M803.157333 18.261333v-97.507555H334.620444v97.507555h468.536889zM1037.368889 896C1092.835556 896 1137.777778 852.309333 1137.777778 798.492444v-617.642666c0-53.873778-44.942222-97.564444-100.408889-97.564445H100.408889C44.942222 83.285333 0 126.976 0 180.906667V798.492444C0 852.309333 44.942222 896 100.408889 896h936.96z m0-97.507556H100.408889v-617.642666h936.96V798.492444z m-234.211556-260.096V440.888889H334.620444V538.396444h468.536889z"  horiz-adv-x="1137" />
+
+    
+    <glyph glyph-name="bianzu" unicode="&#58914;" d="M934.496061 177.493333L999.641966 113.322667 747.250347-128l-153.014857 146.529524 65.194666 64.121905 87.868953-84.21181 187.245714 179.053714zM259.289966 264.582095a405.26019 405.26019 0 0 1 87.186285-39.69219l-229.278476-259.657143h386.681905l99.132952-90.063238H117.197775c-36.230095 0-69.144381 20.48-84.309333 52.419047-15.11619 31.98781-9.752381 69.583238 13.848381 96.256l212.553143 240.737524zM472.184442 896c170.812952 0 309.296762-134.436571 309.296762-300.227048s-138.48381-300.27581-309.296762-300.275809S162.88768 429.933714 162.88768 595.772952C162.88768 761.563429 301.37149 896 472.184442 896z m0-90.063238c-119.56419 0-216.502857-94.110476-216.502857-210.16381s96.938667-210.16381 216.502857-210.163809c119.56419 0 216.502857 94.110476 216.502857 210.163809s-96.938667 210.16381-216.502857 210.16381z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="bianzubeifen20" unicode="&#58915;" d="M801.8944 319.0784L1024 95.5392 801.8944-128l-66.56 67.072 108.9024 109.6704h-291.6352v94.8736h290.4064l-107.6736 108.3904 66.56 67.072zM807.0144 896c34.7648 0 66.56-19.7632 82.0736-51.0464l80.0768-161.1776c6.4-12.8512 9.728-26.9824 9.728-41.3184v-261.7344h-91.8016v207.36H91.7504V3.072H489.472v-92.416H91.7504C41.0624-89.344 0-47.9744 0 3.072V634.88c0 13.9776 3.1232 27.648 9.1648 40.2432L90.112 843.776C105.472 875.7248 137.5232 896 172.7488 896h634.2656zM428.2368 495.7184v-92.3648h-244.736V495.7184h244.736z m-255.488 307.9168L113.6128 680.448h754.6368l-61.2352 123.1872H172.7488z"  horiz-adv-x="1024" />
+
+    
+
+
+  </font>
+</defs></svg>

components/introductionToTheExperiment/introductionToTheExperiment.vue

@@ -0,0 +1,64 @@
+<template>
+	<!-- 实验简介 -->
+	<view class="df jcc aic myComRoot">
+		<view class="df content-box jcsb">
+			<view v-for="(item,i) in btn1List" :key="i" class="df jcc aic fdc btn1-box" @click="onClick_Btn1(i)">
+				<view class="btn1-icon">
+					<img :src="item.src"></img>
+				</view>
+				<view class="btn1-text">{{item.text}}</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import TopMenu from '../../components/topMenu.vue'
+	export default {
+		components: {
+			TopMenu,
+		},
+		onLoad() {
+
+		},
+		data() {
+			return {
+				btn1List: [{
+						"src": require("../../assets/topMenu/preludePreparation.png"),
+						"text": "评审账号"
+					},
+					{
+						"src": require("../../assets/topMenu/learningAndExperiment.png"),
+						"text": "快速进入实验"
+					},
+					{
+						"src": require("../../assets/topMenu/testAndResult.png"),
+						"text": "实验概述"
+					},
+					{
+						"src": require("../../assets/topMenu/testAndResult.png"),
+						"text": "使用环境/技术架构"
+					},
+					{
+						"src": require("../../assets/topMenu/testAndResult.png"),
+						"text": "实验简介视频"
+					},
+				],
+			}
+		},
+		methods: {
+			onClick_Btn1(index){
+				this.$emit("onClick_Btn1",index);
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	$btnN:5;
+
+	.content-box {
+		width: px2vw(312*$btnN+34*(($btnN)-1));
+		height: px2vw(367);
+	}
+</style>

components/introductionToTheExperiment/syjj_second.vue

@@ -0,0 +1,114 @@
+<template>
+	<!-- 实验简介二级 -->
+	<view class="myComRoot df jcc syjj-root">
+		<view class="syjj-body" v-for="(page,pageI) in data_SYJJ" v-show="checkedIndex_second==pageI">
+			<!-- 标题 -->
+			<view class="titleBox df fdr jcc" v-show="data_SYJJ[checkedIndex_second].page.length>1">
+				<view v-for="(item,i) in data_SYJJ[checkedIndex_second].page" :key="i" @click="onTitleClick(i)" class="df fdc aic jcc title-item"
+				 :style="{color:checkedIndex_bodyTitle==i?checkedColor:unCheckedColor_text,
+			 borderColor:checkedIndex_bodyTitle==i?checkedColor:unCheckedColor_border,
+			 borderLeftStyle:checkedIndex_bodyTitle==i-1?'none':((i!=0&&checkedIndex_bodyTitle!=i)?'none':'solid'),
+			 borderRightStyle:checkedIndex_bodyTitle==i+1?'none':'solid'}">
+					{{item.title}}
+				</view>
+			</view>
+			<!-- 内容 -->
+			<view class="df fdc">
+				<view class="syjj-content" v-for="(content,contentI) in data_SYJJ[checkedIndex_second].page[checkedIndex_bodyTitle].content" :key="contentI">
+					<!-- 文字 -->
+					<view v-show="content.type=='text'">
+						<text v-for="(text,textI) in content.textList" :key="textI" :class="'syjj-text-'+text.textType">
+							{{text.text}}
+						</text>
+					</view>
+					<!-- 图片 -->
+					<view class="syjj-pic" v-show="content.type=='pic'">
+						<img :src="content.src"></img>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	// import '../../assets/myData/mydata_SYJJ.js';
+	export default {
+		data() {
+			return {
+				checkedIndex_second: 0, //二级页面选择、外部调用：如，评审账号、快速进入实验等
+				checkedIndex_bodyTitle: 0, //正文小标题选择
+
+
+				//以下为静态
+				data_SYJJ: [
+					myData_SYJJ_PSZH, //评审账号
+					myData_SYJJ_KSJRSY, //快速进入实验
+					myData_SYJJ_SYGS, //实验概述
+					myData_SYJJ_SYHJYJSGJ, //使用环境与技术构架
+					myData_SYJJ_XMJJSP //项目简介视频
+				],
+				checkedColor: "#EA252C",
+				unCheckedColor_text: "#0E0E0E",
+				unCheckedColor_border: "#C4C4C4",
+			}
+		},
+		methods: {
+			// initData(){
+			// 	this.checkedIndex_second=0;
+			// 	this.checkedIndex_bodyTitle=0;
+			// },
+			onTitleClick(index) {
+				this.checkedIndex_bodyTitle = index
+				// console.log("***", this.data_SYJJ[this.checkedIndex_second][this.checkedIndex_bodyTitle].content.src.type);
+			},
+			showPage(pageIndex) {
+				// console.log("切换页面", pageIndex);
+				this.checkedIndex_second = pageIndex;
+				this.checkedIndex_bodyTitle = 0;
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.syjj-root{
+		background: #FFFFFF;
+		box-shadow: 3px 0px 6px 0px rgba(0, 0, 0, 0.1);
+	}
+	.syjj-body {
+		width: px2vw(1789);
+		margin-bottom: px2vw(63);
+	}
+
+	.titleBox {
+		margin-top: px2vw(63);
+		margin-bottom: px2vw(63);
+	}
+
+	.title-item {
+		font-size: px2vw(20);
+		padding: px2vw(15) px2vw(56) px2vw(15) px2vw(56);
+		border: 1px solid;
+	}
+	.syjj-content{
+		margin-top: px2vw(34);
+	}
+	.syjj-content text{
+		font-size: px2vw(22);
+		line-height: px2vw(46);
+	}
+
+	.syjj-text-nor{
+		color: #020202;
+	}
+	.syjj-text-dif{
+		color: #EA252C;
+	}
+	.syjj-text-link{
+		color: #EA252C;
+	}
+	.syjj-pic img {
+		max-width: 100%;
+	}
+</style>

components/learningProcess/learningProcess.vue

@@ -0,0 +1,62 @@
+<template>
+	<!-- 学习流程 -->
+	<view class="df jcc aic myComRoot">
+		<view class="df content-box jcsb">
+			<view v-for="(item,i) in btn1List" :key="i" class="df jcc aic fdc btn1-box">
+				<view class="btn1-icon">
+					<img :src="item.src"></img>
+				</view>
+				<view class="btn1-text">{{item.text}}</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import TopMenu from '../../components/topMenu.vue'
+	export default {
+		components: {
+			TopMenu,
+		},
+		onLoad() {
+
+		},
+		data() {
+			return {
+				btn1List: [{
+						"src": require("../../assets/topMenu/preludePreparation.png"),
+						"text": "原理认知"
+					},
+					{
+						"src": require("../../assets/topMenu/learningAndExperiment.png"),
+						"text": "实景勘察"
+					},
+					{
+						"src": require("../../assets/topMenu/testAndResult.png"),
+						"text": "虚拟技术搭建"
+					},
+					{
+						"src": require("../../assets/topMenu/testAndResult.png"),
+						"text": "虚拟艺术创作"
+					},
+					{
+						"src": require("../../assets/topMenu/testAndResult.png"),
+						"text": "虚拟资源库建设"
+					},
+				],
+			}
+		},
+		methods: {
+
+		}
+	}
+</script>
+
+<style lang="scss">
+	$btnN:5;
+
+	.content-box {
+		width: px2vw(312*$btnN+34*(($btnN)-1));
+		height: px2vw(367);
+	}
+</style>

components/leftMenu.vue

@@ -0,0 +1,174 @@
+<template>
+	<view class="leftMenuRoot df fdr" v-show="isShow">
+		<!-- 左边导航栏 -->
+		<view class="leftBox">
+			<view class="leftMenu-topIcon df aic" @click="hide">
+				<img src="../assets/leftMenu/icon_leftUp.png"></img>
+			</view>
+			<view class="df fdc" v-for="(menu1,i) in btnList" :key="i" @click="onLeftBtn1Click(i)">
+				<view class="leftMenu-btn1 df fdr aic">
+					<view class="leftMenu-btn1-icon df ">
+						<img :src="checkedIndex1==i?menu1.icon_btn1_checked:menu1.icon_btn1_unchecked"></img>
+					</view>
+					<view class="leftMenu-btn1-text" :style="{color:checkedIndex1==i?color_checked:color_unchecked}">{{menu1.text}}</view>
+				</view>
+				<view class="leftMenu-line"></view>
+				<view class="leftMenu-btn2-box1 df fdc" v-show="checkedIndex1==i" v-for="(menu2,m) in menu1.list" :key="m" @click="onLeftBtn2Click(m)">
+					<view class="leftMenu-btn2-box2 df fdr aic">
+						<view class="leftMenu-btn2-icon df">
+							<img :src="checkedIndex2==m?icon_btn2_checked:icon_btn2_unchecked"></img>
+						</view>
+						<view class="leftMenu-btn2-text" :style="{color:checkedIndex2==m?color_checked:color_unchecked}">{{menu2}}</view>
+					</view>
+				</view>
+			</view>
+		</view>
+		<!-- 右边半透明 -->
+		<view class="rightBox" @click="hide"></view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				isShow: false,
+				checkedIndex1: 3,
+				checkedIndex2: 0,
+
+				// ------以下为静态
+				btnList: [{
+						"text": '首页',
+						"icon_btn1_checked": require('../assets/leftMenu/icon_sy_02.png'),
+						"icon_btn1_unchecked": require('../assets/leftMenu/icon_sy_01.png'),
+						"list": []
+					},
+					{
+						"text": '实验简介',
+						"icon_btn1_checked": require('../assets/leftMenu/icon_syjj_02.png'),
+						"icon_btn1_unchecked": require('../assets/leftMenu/icon_syjj_01.png'),
+						"list": ['评审账号', '快速进入实验', '实验概述', '实验使用环境与技术架构', '实验简介视频']
+					},
+					{
+						"text": '学习流程',
+						"icon_btn1_checked": require('../assets/leftMenu/icon_xxlc_02.png'),
+						"icon_btn1_unchecked": require('../assets/leftMenu/icon_xxlc_01.png'),
+						"list": ['原理认知', '实景勘察', '虚拟技术搭建', '虚拟艺术创作', '虚拟资源库建设']
+					},
+					{
+						"text": '开始学习',
+						"icon_btn1_checked": require('../assets/leftMenu/icon_ksxx_02.png'),
+						"icon_btn1_unchecked": require('../assets/leftMenu/icon_ksxx_01.png'),
+						"list": ['前序准备', '学习与实验', '测试与结果']
+					},
+					{
+						"text": '后台',
+						"icon_btn1_checked": require('../assets/leftMenu/icon_ksxx_02.png'),
+						"icon_btn1_unchecked": require('../assets/leftMenu/icon_ksxx_01.png'),
+						"list": []
+					}
+				],
+				icon_btn2_checked: require('../assets/leftMenu/icon_btn2_02.png'),
+				icon_btn2_unchecked: require('../assets/leftMenu/icon_btn2_01.png'),
+				color_checked: '#EA252C',
+				color_unchecked: '#020202'
+			}
+		},
+		methods: {
+			initData() {
+				this.checkedIndex1 = -1;
+				this.checkedIndex2 = -1;
+			},
+			hide() {
+				this.isShow = false;
+			},
+			show(indexArr) {
+				this.isShow = true;
+				console.log("左侧导航展示",indexArr);
+				this.checkedIndex1 = indexArr[0];
+				this.checkedIndex2 = indexArr[1];
+			},
+			onLeftBtn1Click(index) {
+				this.checkedIndex2 = -1;
+				if (this.btnList[index].list.length > 0) {
+					// 收起
+					if (index == this.checkedIndex1) {
+						this.checkedIndex1 = -1;
+					}
+					// 展开
+					else {
+						this.checkedIndex1 = index;
+					}
+				} else {
+					this.hide();
+					this.$emit("onLeftMenuClick", [index,-1])
+				}
+			},
+			onLeftBtn2Click(index) {
+				this.checkedIndex2 = index;
+				this.hide();
+				this.$emit("onLeftMenuClick", [this.checkedIndex1,index])
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.leftMenuRoot {
+		position: fixed;
+		width: 100%;
+		height: 100%;
+	}
+
+	.leftBox {
+		width: px2vw(226);
+		background: #FFFFFF;
+	}
+
+	.rightBox {
+		flex: 1;
+		background: #000000;
+		opacity: 0.24;
+	}
+
+	.leftMenu-topIcon {
+		background: #EA252C;
+		height: 6.2vw;
+	}
+
+	.leftMenu-topIcon img {
+		margin-left: px2vw(41);
+	}
+
+	.leftMenu-btn1-icon {
+		margin-left: px2vw(21);
+		margin-top: px2vw(32);
+		margin-bottom: px2vw(32);
+	}
+
+	.leftMenu-btn1-text {
+		margin-left: px2vw(14);
+		font-size: px2vw(22);
+	}
+
+	.leftMenu-line {
+		height: 2px;
+		background: #F2F2F2;
+	}
+
+	.leftMenu-btn2-box1 {
+		background: #F2F2F2;
+	}
+
+	.leftMenu-btn2-box2 {
+		margin-left: px2vw(48);
+		margin-right: px2vw(45);
+		margin-top: px2vw(25);
+		margin-bottom: px2vw(25);
+	}
+
+	.leftMenu-btn2-text {
+		margin-left: px2vw(14);
+		font-size: px2vw(20);
+	}
+</style>

components/login/chooseRole.vue

@@ -0,0 +1,64 @@
+<template>
+	<view class="df jcc fdc">
+		<view class="login-righttitle">请选择角色</view>
+		<view class="df jcc aic chooseBox">
+			<view class="df aic fdc">
+				<view>
+					<img src="../../assets/login/loginPic2.png" />
+				</view>
+				<view class="chooseRole-btn-checked chooseRole-btn" @click="onChooseTClick">我是老师</view>
+			</view>
+			<view class="df aic fdc role-stu-box">
+				<view>
+					<img src="../../assets/login/loginPic3.png" />
+				</view>
+				<view class="chooseRole-btn-checked chooseRole-btn" @click="onChooseSClick">我是学生</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		methods: {
+			onChooseTClick() {
+				this.$emit("onChoose", "T")
+			},
+			onChooseSClick() {
+				this.$emit("onChoose", "S")
+			}
+		}
+	}
+</script>
+
+<style>
+	.chooseBox {
+		margin-top: 8vw;
+	}
+
+	.role-stu-box {
+		margin-left: 5.2vw;
+	}
+	.chooseRole-btn{
+		width: 12vw;
+		height: 3.12vw;
+		border-radius: 10px;
+		font-size: 1.15vw;
+		font-family: MicrosoftYaHei;
+		line-height: 1.5vw;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		margin-top: 3.43vw;
+	}
+
+	.chooseRole-btn-unchecked {
+		background: #F4F4F4;
+		color: #626262;
+	}
+
+	.chooseRole-btn-checked {
+		background: #EA252C;
+		color: #FFFFFF;
+	}
+</style>

components/login/login.vue

@@ -0,0 +1,115 @@
+<template>
+	<view class="df jcc aic myComRoot">
+		<view class="df aic login-center">
+			<view>
+				<view class="login-lefttitle1">虚拟仿真实验网站首页</view>
+				<view class="login-lefttitle2">记录产品分享设计</view>
+				<view class="login-leftpic">
+					<img src="../../assets/login/loginPic1.png" />
+				</view>
+			</view>
+			<!-- 中间竖线 -->
+			<view class="login-middleline"></view>
+			<ChooseRole v-show="visibleChooseRole" v-on:onChoose="onChoose"></ChooseRole>
+			<LoginByPWD class="showborder" v-show="visibleLoginByPWD" v-on:onLogin="onLogin" v-on:onForget="onForget"></LoginByPWD>
+			<ResetPWD v-show="visibleResetPWD" v-on:onLogin="onLogin"></ResetPWD>
+		</view>
+	</view>
+</template>
+
+<script>
+	import ChooseRole from './chooseRole.vue'
+	import LoginByPWD from './loginByPWD.vue'
+	import ResetPWD from './resetPWD.vue'
+	export default {
+		components: {
+			ChooseRole,
+			LoginByPWD,
+			ResetPWD
+		},
+		data() {
+			return {
+				visibleChooseRole: true,
+				visibleLoginByPWD: false,
+				visibleResetPWD: false,
+				//当前登录类型T教师S学生
+				roleType: '',
+			}
+		},
+		methods: {
+			onLogin: function() {
+				console.log("登录成功login");
+				this.$emit("onLogin");
+				this.visibleChooseRole = false;
+				this.visibleLoginByPWD = false;
+				this.visibleResetPWD = false;
+			},
+			onChoose(type) {
+				console.log("onChoose", type)
+				this.roleType = type;
+				this.visibleChooseRole = false;
+				this.visibleLoginByPWD = true;
+			},
+			onForget() {
+				this.visibleLoginByPWD = false;
+				this.visibleResetPWD = true;
+			}
+		}
+	}
+</script>
+
+<style>
+	.login-center {
+		/* width: 1431px;
+		height: 752px; */
+		width: 74.5vw;
+		height: 39.1vw;
+		background: #FFFFFF;
+		box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.1);
+		border-radius: 10px;
+		/* margin-top: 86px; */
+		justify-content: space-evenly;
+	}
+
+	.login-lefttitle1 {
+		/* font-size: 26px; */
+		font-size: 1.4vw;
+		font-family: MicrosoftYaHei;
+		color: #020202;
+		/* line-height: 35px; */
+		line-height: 1.8vw;
+		/* letter-spacing: 2px; */
+		letter-spacing: 0.02vw;
+	}
+
+	.login-lefttitle2 {
+		/* font-size: 20px; */
+		font-size: 1.041vw;
+		font-family: MicrosoftYaHei;
+		color: #6C6F6E;
+		/* line-height: 26px;
+		letter-spacing: 1px;
+		margin-top: 16px; */
+		line-height: 1.4vw;
+		letter-spacing: 1px;
+		margin-top: 0.8vw;
+	}
+
+	.login-leftpic {
+		/* margin-top: 79px;
+		margin-left: 15px; */
+		margin-top: 4.114vw;
+		margin-left: 0.07vw;
+	}
+
+	.login-leftpic img {
+		width: 17.552vw;
+	}
+
+	.login-middleline {
+		width: 0.1vw;
+		height: 29vw;
+		background-color: #979797;
+		opacity: 0.2;
+	}
+</style>

components/login/loginByPWD.vue

@@ -0,0 +1,232 @@
+<template>
+	<view class="df jcc fdc">
+		<view class="login-righttitle">密码登录</view>
+		<view class="fdc df jcc loginByPWD-listbox">
+			<!-- 账号 -->
+			<view class="df loginByPWD-inputbox aic">
+				<view class="loginByPWD-inputbox-icon">
+					<img class="df" src="../../assets/login/loginIcon2.png" />
+				</view>
+				<input @focus="inputFocus" class="loginByPWD-inputbox-input" type="text" placeholder="账号" @input="onAccountInput" />
+			</view>
+			<!-- 横线 -->
+			<view class="loginByPWD-line"></view>
+			<!-- 密码 -->
+			<view class="df loginByPWD-inputbox aic">
+				<view class="loginByPWD-inputbox-icon">
+					<img class="df" src="../../assets/login/loginIcon1.png" />
+				</view>
+				<input @focus="inputFocus" class="loginByPWD-inputbox-input" type="password" placeholder="密码" @input="onPWDInput" />
+			</view>
+			<!-- 横线 -->
+			<view class="loginByPWD-line"></view>
+			<!-- 支持使用实验空间账号登录 -->
+			<view class="df aic loginByPWD-tip1box">
+				<view class="loginByPWD-tip1box-checkbox df aic">
+					<img src="../../assets/login/loginIcon5.png" />
+				</view>
+				<view class="loginByPWD-tip1box-tip">支持使用实验空间账号登录</view>
+			</view>
+			<!-- 评审账号和密码 -->
+			<view class="df loginByPWD-tip2box">
+				<view class="loginByPWD-tip2box-account">评审账号：teststudent01</view>
+				<view class="loginByPWD-tip2box-pwd">密码：qgsTest002</view>
+			</view>
+			<!-- 登录按钮 -->
+			<view class="loginByPWD-loginbtn df jcc aic btn-hover" @click="onLogin">登录</view>
+			<!-- 注册账号忘记密码 -->
+			<view class="df fdr loginByPWD-registerOrForgetBox">
+				<a :href="regURL" class="loginByPWD-register">注册实验空间账号</a>
+				<view class="loginByPWD-forget" @click="onForget">忘记密码</view>
+			</view>
+			<view :style="{'opacity': isShowTip}" class="loginByPWD-failTip df jcc">登录失败！请查看账号及密码是否正确！</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				account: '',
+				password: '',
+				regURL: 'http://www.ilab-x.com/register',
+				//是否显示登录失败的提示 1显示0隐藏（即：透明度归零）
+				isShowTip: 0,
+			}
+		},
+		methods: {
+			onAccountInput: function(event) {
+				this.account = event.target.value
+			},
+			onPWDInput: function(event) {
+				this.password = event.target.value
+			},
+			inputFocus() {
+				this.isShowTip = 0;
+			},
+			onLogin() {
+				console.log("账号密码", this.account, this.password);
+				let url = "http://39.105.166.141:8085/user/loginin";
+				// let url = "http://39.105.166.141:8085/user/getallstudent";
+				uni.request({
+					header: {
+						// 'Content-Type': 'application/x-www-form-urlencoded'
+						'Content-Type': 'application/json;charset=UTF-8'
+					},
+					url: url,
+					method: 'POST',
+					data: {
+						// "IlabAccount": "teststudent01",
+						// "Password": "qgsTest002"
+						// "IlabAccount": "13790516503",
+						// "Password": "qwerty123..."
+						"IlabAccount": this.account,
+						"Password": this.password
+					},
+					dataType: 'json',
+					success: (res) => {
+						let data = res.data;
+						//登录成功
+						if (data.Code == 100) {
+							console.log("登陆成功");
+							this.$emit("onLogin")
+						}
+						//密码错误
+						else {
+							this.isShowTip=1;
+						}
+						console.log("success+++**+*", res.data.Code)
+					},
+					fail: (res) => {
+						console.log("fail+**+*", res)
+					}
+				});
+			},
+			// onLogin: function(type) {
+			// 	this.$emit("onLogin", "onLogin")
+			// },
+			onForget() {
+				this.$emit("onForget", "onForget")
+			}
+			// test() {
+			// 	this.$emit("pChangeType","哈哈哈")
+			// 	let url = "http://121.4.59.141:1986/hello";
+			// 	uni.request({
+			// 		header: {
+			// 			// 'Content-Type': 'application/x-www-form-urlencoded'
+			// 			// 'Content-Type': 'application/json',
+			// 			'Content-Type': 'application/json'
+			// 		},
+			// 		url: url,
+			// 		method: 'POST',
+			// 		data: {
+			// 			// "IlabAccount": "teststudent01",
+			// 			// "Password": "qgsTest002"
+			// 			"name": "13790516503",
+			// 			"message": "qwerty123..."
+			// 			// "IlabAccount": this.account,
+			// 			// "Password": this.password
+			// 		},
+			// 		dataType: 'json',
+			// 		success: (res) => {
+			// 			// var result = JSON.parse(res);
+			// 			console.log("success+**+*", res)
+			// 		},
+			// 		fail: (res) => {
+			// 			console.log("fail+**+*", res)
+			// 		}
+			// 	});
+			// }
+		}
+	}
+</script>
+
+<style>
+	.loginByPWD-listbox {
+		margin-top: 2.vw;
+	}
+
+	.loginByPWD-inputbox {
+		margin-top: 2.5vw;
+	}
+
+	.loginByPWD-inputbox-icon {
+		margin-left: 0.46875vw;
+	}
+
+	.loginByPWD-inputbox-input {
+		font-size: 1.04vw;
+		border: none;
+		margin-left: 1.25vw;
+		flex-grow: 1;
+	}
+
+	.loginByPWD-line {
+		margin-top: 0.729vw;
+		width: 23.54vw;
+		height: 0.104vw;
+		background-color: #E6E6E6;
+	}
+
+	.loginByPWD-tip1box {
+		margin-top: 1.354vw;
+	}
+
+	.loginByPWD-tip1box-checkbox {
+		margin-left: 0.46875vw;
+	}
+
+	.loginByPWD-tip1box-tip {
+		font-size: 0.781vw;
+		margin-left: 1.146vw;
+		color: #333333;
+	}
+
+	.loginByPWD-tip2box {
+		font-size: 0.781vw;
+		font-family: MicrosoftYaHei;
+		color: #333333;
+		line-height: 1.041vw;
+		margin-top: 2.656vw;
+	}
+
+	.loginByPWD-tip2box-account {
+		margin-left: 0.104vw;
+	}
+
+	.loginByPWD-tip2box-pwd {
+		margin-left: 2.031vw;
+	}
+
+	.loginByPWD-loginbtn {
+		height: 3.125vw;
+		font-size: 0.989vw;
+		font-family: MicrosoftYaHei;
+		line-height: 1.302vw;
+		margin-top: 2.083vw;
+		border-radius: 8px;
+	}
+
+	.loginByPWD-registerOrForgetBox {
+		margin-top: 1.562vw;
+		font-size: 0.781vw;
+		font-family: MicrosoftYaHei;
+		color: #EA252C;
+		line-height: 1.041vw;
+	}
+
+	.loginByPWD-register {
+		margin-left: 0.104vw;
+	}
+
+	.loginByPWD-forget {
+		margin-left: 13.906vw;
+	}
+
+	.loginByPWD-failTip {
+		color: #EA252C;
+		font-size: 0.989vw;
+		margin-top: 1vw;
+	}
+</style>

components/login/resetPWD.vue

@@ -0,0 +1,188 @@
+<template>
+	<view class="df jcc fdc">
+		<view class="login-righttitle">重置密码</view>
+		<view class="fdc df jcc resetPWD-listbox">
+			<!-- 手机号 -->
+			<view class="df resetPWD-inputbox aic">
+				<view class="resetPWD-inputbox-icon">
+					<img class="df" src="../../assets/login/loginIcon4.png" />
+				</view>
+				<input @input="onPhoneNumInput" class="resetPWD-inputbox-input" type="text" placeholder="手机号" />
+			</view>
+			<!-- 横线 -->
+			<view class="resetPWD-line"></view>
+			<!-- 验证码 -->
+			<view class="df resetPWD-inputbox aic">
+				<view class="resetPWD-inputbox-icon">
+					<img class="df" src="../../assets/login/loginIcon6.png" />
+				</view>
+				<input @input="onCodeInput" class="resetPWD-inputbox-input" type="text" placeholder="验证码" />
+				<view class="resetPWD-sendcodebtn df jcc aic">获取验证码</view>
+			</view>
+			<!-- 横线 -->
+			<view class="resetPWD-line"></view>
+			<!-- 新密码 -->
+			<view class="df resetPWD-inputbox aic">
+				<view class="resetPWD-inputbox-icon">
+					<img class="df" src="../../assets/login/loginIcon1.png" />
+				</view>
+				<input @input="onNewPWDInput" class="resetPWD-inputbox-input" type="password" placeholder="新密码：6-16位字符，包含字母和数字" />
+			</view>
+			<!-- 横线 -->
+			<view class="resetPWD-line"></view>
+			<!-- 登录按钮 -->
+			<view class="resetPWD-loginbtn df jcc aic btn-hover" @click="onLogin">登录</view>
+			<!-- 注册账号 -->
+			<view class="df fdr resetPWD-registerOrForgetBox  jcc aic">
+				<a :href="regURL" class="loginByPWD-register">注册实验空间账号</a>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				phoneNum: '',
+				code:'',
+				newPassword: '',
+				regURL: 'http://www.ilab-x.com/register',
+			}
+		},
+		methods: {
+			onPhoneNumInput: function(event) {
+				this.phoneNum = event.target.value
+			},
+			onCodeInput: function(event) {
+				this.code = event.target.value
+			},
+			onNewPWDInput: function(event) {
+				this.newPassword = event.target.value
+			},
+			onLogin: function(type) {
+				// this.$emit("onLogin", "onLogin")
+				this.findUser();
+				
+				// let url = "http://39.105.166.141:8085/user/addusers";
+				// uni.request({
+				// 	header: {
+				// 		'Content-Type': 'application/json;charset=UTF-8'
+				// 	},
+				// 	url: url,
+				// 	method: 'POST',
+				// 	data: {
+				// 		"IlabAccount": this.account,
+				// 		"Password": this.password
+				// 	},
+				// 	dataType: 'json',
+				// 	success: (res) => {
+				// 		// let data = res.data;
+				// 		// //登录成功
+				// 		// if (data.Code == 100) {
+				// 		// 	this.$emit("onLogin")
+				// 		// }
+				// 		// //密码错误
+				// 		// else {
+				// 		// 	this.isShowTip=1;
+				// 		// }
+				// 		console.log("success+++**+*", res)
+				// 	},
+				// 	fail: (res) => {
+				// 		console.log("fail+**+*", res)
+				// 	}
+				// });
+			},
+			findUser(){
+				console.log(this.phoneNum);
+				let url = "http://39.105.166.141:8085/user/finduser";
+				uni.request({
+					header: {
+						'Content-Type': 'application/json;charset=UTF-8'
+					},
+					url: url,
+					method: 'POST',
+					data: {
+						"IlabAccount": this.phoneNum,
+					},
+					dataType: 'json',
+					success: (res) => {
+						let data = res.data;
+						if (data.Code == 100) {
+							// this.$emit("onLogin")
+							console.log("userinfo",data);
+						}
+						else {
+							// this.isShowTip=1;
+							console.log("用户未注册");
+						}
+						console.log("success+++**+*", res)
+					},
+					fail: (res) => {
+						console.log("fail+**+*", res)
+					}
+				});
+			}
+		}
+	}
+</script>
+
+<style>
+	.resetPWD-listbox {
+		margin-top: 2.19vw;
+	}
+
+	.resetPWD-inputbox {
+		margin-top: 2.5vw;
+	}
+
+	.resetPWD-inputbox-icon {
+		margin-left: 0.47vw;
+	}
+
+	.resetPWD-inputbox-input {
+		font-size: 1.04vw;
+		border: none;
+		margin-left: 1.25vw;
+		flex-grow: 1;
+	}
+
+	.resetPWD-line {
+		margin-top: 0.73vw;
+		width: 23.54vw;
+		height: 0.104vw;
+		background-color: #E6E6E6;
+	}
+
+	.resetPWD-sendcodebtn {
+		width: 5.26vw;
+		height: 1.979vw;
+		background: #F4F4F4;
+		border-radius: 7px;
+		font-size: 0.729vw;
+		font-family: MicrosoftYaHei;
+		color: #999999;
+		line-height: 0.989vw;
+	}
+
+	.resetPWD-loginbtn {
+		height: 3.125vw;
+		font-size: 0.989vw;
+		font-family: MicrosoftYaHei;
+		line-height: 1.302vw;
+		margin-top: 2.083vw;
+		border-radius: 8px;
+	}
+
+	.resetPWD-registerOrForgetBox {
+		margin-top: 1.56vw;
+		font-size: 0.78vw;
+		font-family: MicrosoftYaHei;
+		color: #EA252C;
+		line-height: 1.04vw;
+	}
+
+	.resetPWD-register {
+		margin-left: 2px;
+	}
+</style>

components/manager/Index.vue

@@ -0,0 +1,383 @@
+<template>
+	<view class="m_container">
+		<view class="m_left">
+			<view class="m_hander">
+				<view class="m_teacher">
+					<image src="../../assets/login/loginPic2.png" class="m_head_portrait"></image>
+					<view class="m_teacher_name" v-text="name"></view>
+					<view class="m_teacher_position" v-text="position"></view>
+				</view>
+			</view>
+			<view class="m_menu">
+				<view class="m_menu-item " :class="item.select?'m_act_font':''" v-for="(item,index) in menu" :key="index" @click="checkMenu(item)">
+					<view :class="item.select?'m_act':''">
+
+					</view>
+					<view class="m_menu_item_icon">
+						<icon type="" class="font_family" :class="item.select?(item.icon+' m_act1'):item.icon"></icon>
+					</view>
+					<view class="m_menu_item_name" v-text="item.title"></view>
+				</view>
+			</view>
+		</view>
+		<!-- 	<view class="m_right">
+
+				<view class="m_right_hander">
+				<button size="mini" class="m_btn_red">添加用户</button>
+			</view>
+			<view class="m_right_container">
+				<table style="width: 100%;border: 1px solid #DDDDDD;border-collapse: collapse">
+					<thead class="m-table-hander">
+						<tr>
+							<th>用户名</th>
+							<th>班级</th>
+							<th>学号</th>
+							<th>电话</th>
+							<th>ilab账户</th>
+							<th>注册时间</th>
+							<th>分数</th>
+							<th>修改信息</th>
+							<th>删除</th>
+						</tr>
+					</thead>
+					<tbody>
+						<tr>
+							<th style="color: #EA252C;">张小旭</th>
+							<th>26</th>
+							<th>CMII09</th>
+							<th>26</th>
+							<th>15038728747</th>
+							<th>2021-01-01</th>
+							<th>90</th>
+							<th style="position: relative;"><button type="default" size="mini" class="m_edit">修改</button></th>
+							<th style="position: relative;"><button type="default" size="mini" class="m_delete">删除</button></th>
+						</tr>
+						<tr>
+							<th style="color: #EA252C;">张小旭</th>
+							<th>26</th>
+							<th>CMII09</th>
+							<th>26</th>
+							<th>15038728747</th>
+							<th>2021-01-01</th>
+							<th>90</th>
+							<th style="position: relative;"><button type="default" size="mini" class="m_edit">修改</button></th>
+							<th style="position: relative;"><button type="default" size="mini" class="m_delete">删除</button></th>
+						</tr>
+						<tr>
+							<th style="color: #EA252C;">张小旭</th>
+							<th>26</th>
+							<th>CMII09</th>
+							<th>26</th>
+							<th>15038728747</th>
+							<th>2021-01-01</th>
+							<th>90</th>
+							<th style="position: relative;"><button type="default" size="mini" class="m_edit">修改</button></th>
+							<th style="position: relative;"><button type="default" size="mini" class="m_delete">删除</button></th>
+						</tr>
+						<tr>
+							<th style="color: #EA252C;">张小旭</th>
+							<th>26</th>
+							<th>CMII09</th>
+							<th>26</th>
+							<th>15038728747</th>
+							<th>2021-01-01</th>
+							<th>90</th>
+							<th style="position: relative;"><button type="default" size="mini" class="m_edit">修改</button></th>
+							<th style="position: relative;"><button type="default" size="mini" class="m_delete">删除</button></th>
+						</tr>
+						<tr>
+							<th style="color: #EA252C;">张小旭</th>
+							<th>26</th>
+							<th>CMII09</th>
+							<th>26</th>
+							<th>15038728747</th>
+							<th>2021-01-01</th>
+							<th>90</th>
+							<th style="position: relative;"><button type="default" size="mini" class="m_edit">修改</button></th>
+							<th style="position: relative;"><button type="default" size="mini" class="m_delete">删除</button></th>
+						</tr>
+						<tr>
+							<th style="color: #EA252C;">张小旭</th>
+							<th>26</th>
+							<th>CMII09</th>
+							<th>26</th>
+							<th>15038728747</th>
+							<th>2021-01-01</th>
+							<th>90</th>
+							<th style="position: relative;"><button type="default" size="mini" class="m_edit">修改</button></th>
+							<th style="position: relative;"><button type="default" size="mini" class="m_delete">删除</button></th>
+						</tr>
+						<tr>
+							<th style="color: #EA252C;">张小旭</th>
+							<th>26</th>
+							<th>CMII09</th>
+							<th>26</th>
+							<th>15038728747</th>
+							<th>2021-01-01</th>
+							<th>90</th>
+							<th style="position: relative;"><button type="default" size="mini" class="m_edit">修改</button></th>
+							<th style="position: relative;"><button type="default" size="mini" class="m_delete">删除</button></th>
+						</tr>
+					</tbody>
+				</table>
+			</view>
+			<view class="m_right_footer">
+				<view class="m_paging">
+					<text class="m_paging_item m_paging_upper">上一页</text>
+					<text class="m_paging_item" v-for="i in 8" @click="paging(i)" :class="i==index?'p_act':''">
+						{{i}}
+					</text>
+					<text class="m_paging_item m_paging_lower">下一页</text>
+				</view>
+			</view>
+ 
+			
+		</view>-->
+		<user ref="user" v-if="routerIndex==1"></user>
+		<zc ref="zc" v-if="routerIndex==2"></zc>
+	</view>
+</template>
+
+<script>
+	import user from "./user.vue"
+	import zc from "./zc.vue"
+	export default {
+		name: "manager",
+		props: [],
+		data() {
+			return {
+				routerIndex: 1,
+				name: '张林老师',
+				position: '计算机系',
+				menu: [{
+					id: 1,
+					icon: "icon-bianzu",
+					select: true,
+					title: '用户'
+				}, {
+					id: 2,
+					icon: "icon-xingzhuang21",
+					select: false,
+					title: '资产'
+				}, {
+					id: 3,
+					icon: "icon-bianzubeifen20",
+					select: false,
+					title: '项目'
+				}]
+			}
+		},
+		components: {
+			user,
+			zc
+		},
+		created() {
+
+		},
+		methods: {
+			checkMenu(obj) {
+				this.menu.forEach(p => p.select = false);
+				obj.select = true;
+				this.routerIndex = obj.id;
+			},
+
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	@import '../../assets/icon/iconfont.css';
+
+	.m_container {
+		display: flex;
+		justify-content: space-between;
+		width: 100%;
+		height: 100%;
+
+		.m_left {
+			width: 500rpx;
+			background-color: #fff;
+			border-right: 10rpx solid #ECECEC;
+			border-top: 5rpx solid #ECECEC;
+			box-shadow: 3px 0px 6px 0px rgba(0, 0, 0, 0.1);
+
+			.m_hander {
+				text-align: center;
+				background-color: #fff;
+				height: 600rpx;
+				position: relative;
+				// margin: 5rpx 10rpx 10rpx 0;
+				border-bottom: 8rpx solid #ECECEC;
+
+				.m_teacher {
+					position: absolute;
+					top: 50%;
+					left: 50%;
+					transform: translate(-50%, -50%);
+				}
+
+				.m_teacher_name {
+					font-size: 1.1rem;
+					font-weight: 600;
+					padding: 30rpx 0;
+					font-family: MicrosoftYaHei;
+				}
+
+				.m_head_portrait {
+					width: 250rpx;
+					height: 250rpx;
+					color: #555555;
+				}
+			}
+		}
+
+		// .m_right {
+		// 	width: 100%;
+		// 	margin-top: 5rpx;
+		// 	padding: 0 150rpx;
+		// 	background-color: #fff;
+		// 	box-shadow: 3px 0px 6px 0px rgba(0, 0, 0, 0.1);
+
+		// 	.m_right_hander {
+		// 		text-align: right;
+		// 		height: 250rpx;
+		// 		position: relative;
+
+		// 		.m_btn_red {
+		// 			position: absolute;
+		// 			height: 80rpx;
+		// 			line-height: 80rpx;
+		// 			padding: 0 40rpx;
+		// 			right: 0;
+		// 			top: 50%;
+		// 			transform: translateY(-50%);
+		// 			background: #EA252C;
+		// 			color: #fff;
+		// 		}
+		// 	}
+
+		// }
+
+		.m_menu-icon {
+			width: 24rpx;
+			height: 24rpx;
+		}
+
+		.m_menu {
+			background-color: #fff;
+
+			.m_menu-item {
+				position: relative;
+				display: flex;
+				padding: 20rpx 0;
+				line-height: 90rpx;
+				font-weight: 500;
+				border-bottom: 1px solid #DDDDDD;
+
+				.m_menu_item_icon {
+					width: 100rpx;
+					text-align: right;
+					margin-right: 15rpx;
+				}
+
+				.m_menu_item_name {
+					margin-left: 10rpx;
+					font-weight: 600;
+				}
+
+				.m_act {
+					background: #FF0019;
+					width: 8rpx;
+					border-radius: 0px 200rpx 200rpx 0px;
+					position: absolute;
+					height: 90rpx;
+					top: 20rpx;
+					left: 0;
+				}
+
+			}
+		}
+
+		.m_act_font .m_menu_item_name {
+			color: #FF0019;
+		}
+	}
+
+
+
+	// tbody tr {
+	// 	border-top: 2rpx solid #DDDDDD !important;
+
+	// }
+
+	// tbody tr th {
+	// 	font-weight: 400 !important;
+	// 	height: 140rpx;
+	// 	line-height: 140rpx;
+	// }
+
+	// tbody tr:hover {
+	// 	// color: #fff;
+	// 	background: #FDEBEC;
+	// 	// opacity: 0.08;
+	// }
+
+	// .m-table-hander {
+	// 	background-color: #FFF8F7;
+	// 	height: 140rpx;
+	// 	line-height: 140rpx;
+	// 	font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
+	// 	font-weight: bold;
+	// }
+
+	// .m_edit {
+	// 	position: absolute;
+	// 	top: 50%;
+	// 	left: 50%;
+	// 	transform: translate(-50%, -50%);
+	// 	background: rgb(67, 127, 250);
+	// 	color: rgb(255, 255, 255);
+	// 	min-width: 130rpx;
+	// }
+
+	// .m_delete {
+	// 	position: absolute;
+	// 	top: 50%;
+	// 	left: 50%;
+	// 	min-width: 130rpx;
+	// 	transform: translate(-50%, -50%);
+	// 	background: rgb(234, 37, 44);
+	// 	color: rgb(255, 255, 255);
+	// }
+
+	// .m_right_footer {
+	// 	margin-top: 80rpx;
+	// }
+
+	// .m_paging {
+	// 	text-align: right;
+
+	// 	.m_paging_item {
+	// 		padding: 10rpx 18rpx;
+	// 		border: 1rpx solid #DDDDDD;
+	// 		border-radius: 8rpx;
+	// 		margin-right: 10rpx;
+	// 	}
+
+	// 	.p_act {
+	// 		background: #EA252C;
+	// 		color: #fff;
+	// 		border: inherit;
+	// 	}
+	// }
+
+	// .m_paging_item:hover {
+	// 	background: #EA252C;
+	// 	color: #fff;
+	// 	border: inherit;
+	// }
+
+	.m_act1 {
+		color: #FF0019;
+	}
+</style>

components/manager/user.vue

@@ -0,0 +1,232 @@
+<template>
+	<view class="m_right">
+		<view class="m_right_hander">
+			<button size="mini" class="m_btn_red">添加用户</button>
+		</view>
+		<view class="m_right_container">
+			<table style="width: 100%;border: 1px solid #DDDDDD;border-collapse: collapse">
+				<thead class="m-table-hander">
+					<tr>
+						<th>用户名</th>
+						<th>班级</th>
+						<th>学号</th>
+						<th>电话</th>
+						<th>ilab账户</th>
+						<th>注册时间</th>
+						<th>分数</th>
+						<th>修改信息</th>
+						<th>删除</th>
+					</tr>
+				</thead>
+				<tbody>
+					<tr>
+						<th style="color: #EA252C;">张小旭</th>
+						<th>26</th>
+						<th>CMII09</th>
+						<th>26</th>
+						<th>15038728747</th>
+						<th>2021-01-01</th>
+						<th>90</th>
+						<th style="position: relative;"><button type="default" size="mini" class="m_edit">修改</button></th>
+						<th style="position: relative;"><button type="default" size="mini" class="m_delete">删除</button></th>
+					</tr>
+					<tr>
+						<th style="color: #EA252C;">张小旭</th>
+						<th>26</th>
+						<th>CMII09</th>
+						<th>26</th>
+						<th>15038728747</th>
+						<th>2021-01-01</th>
+						<th>90</th>
+						<th style="position: relative;"><button type="default" size="mini" class="m_edit">修改</button></th>
+						<th style="position: relative;"><button type="default" size="mini" class="m_delete">删除</button></th>
+					</tr>
+					<tr>
+						<th style="color: #EA252C;">张小旭</th>
+						<th>26</th>
+						<th>CMII09</th>
+						<th>26</th>
+						<th>15038728747</th>
+						<th>2021-01-01</th>
+						<th>90</th>
+						<th style="position: relative;"><button type="default" size="mini" class="m_edit">修改</button></th>
+						<th style="position: relative;"><button type="default" size="mini" class="m_delete">删除</button></th>
+					</tr>
+					<tr>
+						<th style="color: #EA252C;">张小旭</th>
+						<th>26</th>
+						<th>CMII09</th>
+						<th>26</th>
+						<th>15038728747</th>
+						<th>2021-01-01</th>
+						<th>90</th>
+						<th style="position: relative;"><button type="default" size="mini" class="m_edit">修改</button></th>
+						<th style="position: relative;"><button type="default" size="mini" class="m_delete">删除</button></th>
+					</tr>
+					<tr>
+						<th style="color: #EA252C;">张小旭</th>
+						<th>26</th>
+						<th>CMII09</th>
+						<th>26</th>
+						<th>15038728747</th>
+						<th>2021-01-01</th>
+						<th>90</th>
+						<th style="position: relative;"><button type="default" size="mini" class="m_edit">修改</button></th>
+						<th style="position: relative;"><button type="default" size="mini" class="m_delete">删除</button></th>
+					</tr>
+					<tr>
+						<th style="color: #EA252C;">张小旭</th>
+						<th>26</th>
+						<th>CMII09</th>
+						<th>26</th>
+						<th>15038728747</th>
+						<th>2021-01-01</th>
+						<th>90</th>
+						<th style="position: relative;"><button type="default" size="mini" class="m_edit">修改</button></th>
+						<th style="position: relative;"><button type="default" size="mini" class="m_delete">删除</button></th>
+					</tr>
+					<tr>
+						<th style="color: #EA252C;">张小旭</th>
+						<th>26</th>
+						<th>CMII09</th>
+						<th>26</th>
+						<th>15038728747</th>
+						<th>2021-01-01</th>
+						<th>90</th>
+						<th style="position: relative;"><button type="default" size="mini" class="m_edit">修改</button></th>
+						<th style="position: relative;"><button type="default" size="mini" class="m_delete">删除</button></th>
+					</tr>
+				</tbody>
+			</table>
+		</view>
+		<view class="m_right_footer">
+			<view class="m_paging">
+				<text class="m_paging_item m_paging_upper">上一页</text>
+				<text class="m_paging_item" v-for="i in 8" @click="paging(i)" :class="i==index?'p_act':''">
+					{{i}}
+				</text>
+				<text class="m_paging_item m_paging_lower">下一页</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "manager_user",
+		data() {
+			return {
+				index: 1,
+			}
+		},
+		methods: {
+			paging(obj) {
+				this.index = obj;
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.m_right {
+		width: 100%;
+		margin-top: 5rpx;
+		padding: 0 150rpx;
+		background-color: #fff;
+		box-shadow: 3px 0px 6px 0px rgba(0, 0, 0, 0.1);
+	
+		.m_right_hander {
+			text-align: right;
+			height: 250rpx;
+			position: relative;
+	
+			.m_btn_red {
+				position: absolute;
+				height: 80rpx;
+				line-height: 80rpx;
+				padding: 0 40rpx;
+				right: 0;
+				top: 50%;
+				transform: translateY(-50%);
+				background: #EA252C;
+				color: #fff;
+			}
+		}
+	
+	}
+	tbody tr {
+		border-top: 2rpx solid #DDDDDD !important;
+	
+	}
+	
+	tbody tr th {
+		font-weight: 400 !important;
+		height: 140rpx;
+		line-height: 140rpx;
+	}
+	
+	tbody tr:hover {
+		// color: #fff;
+		background: #FDEBEC;
+		// opacity: 0.08;
+	}
+	
+	.m-table-hander {
+		background-color: #FFF8F7;
+		height: 140rpx;
+		line-height: 140rpx;
+		font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
+		font-weight: bold;
+	}
+	
+	.m_edit {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		background: rgb(67, 127, 250);
+		color: rgb(255, 255, 255);
+		min-width: 130rpx;
+	}
+	
+	.m_delete {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		min-width: 130rpx;
+		transform: translate(-50%, -50%);
+		background: rgb(234, 37, 44);
+		color: rgb(255, 255, 255);
+	}
+	
+	.m_right_footer {
+		margin-top: 80rpx;
+	}
+	
+	.m_paging {
+		text-align: right;
+	
+		.m_paging_item {
+			padding: 10rpx 18rpx;
+			border: 1rpx solid #DDDDDD;
+			border-radius: 8rpx;
+			margin-right: 10rpx;
+		}
+	
+		.p_act {
+			background: #EA252C;
+			color: #fff;
+			border: inherit;
+		}
+	}
+	
+	.m_paging_item:hover {
+		background: #EA252C;
+		color: #fff;
+		border: inherit;
+	}
+	
+	.m_act1 {
+		color: #FF0019;
+	}
+</style>

components/manager/zc.vue

@@ -0,0 +1,232 @@
+<template>
+	<view class="m_right">
+		<view class="m_right_hander">
+			<button size="mini" class="m_btn_red">添加资产</button>
+		</view>
+		<view class="m_right_container">
+			<table style="width: 100%;border: 1px solid #DDDDDD;border-collapse: collapse">
+				<thead class="m-table-hander">
+					<tr>
+						<th>用户名</th>
+						<th>班级</th>
+						<th>学号</th>
+						<th>电话</th>
+						<th>ilab账户</th>
+						<th>注册时间</th>
+						<th>分数</th>
+						<th>修改信息</th>
+						<th>删除</th>
+					</tr>
+				</thead>
+				<tbody>
+					<tr>
+						<th style="color: #EA252C;">张小旭</th>
+						<th>26</th>
+						<th>CMII09</th>
+						<th>26</th>
+						<th>15038728747</th>
+						<th>2021-01-01</th>
+						<th>90</th>
+						<th style="position: relative;"><button type="default" size="mini" class="m_edit">修改</button></th>
+						<th style="position: relative;"><button type="default" size="mini" class="m_delete">删除</button></th>
+					</tr>
+					<tr>
+						<th style="color: #EA252C;">张小旭</th>
+						<th>26</th>
+						<th>CMII09</th>
+						<th>26</th>
+						<th>15038728747</th>
+						<th>2021-01-01</th>
+						<th>90</th>
+						<th style="position: relative;"><button type="default" size="mini" class="m_edit">修改</button></th>
+						<th style="position: relative;"><button type="default" size="mini" class="m_delete">删除</button></th>
+					</tr>
+					<tr>
+						<th style="color: #EA252C;">张小旭</th>
+						<th>26</th>
+						<th>CMII09</th>
+						<th>26</th>
+						<th>15038728747</th>
+						<th>2021-01-01</th>
+						<th>90</th>
+						<th style="position: relative;"><button type="default" size="mini" class="m_edit">修改</button></th>
+						<th style="position: relative;"><button type="default" size="mini" class="m_delete">删除</button></th>
+					</tr>
+					<tr>
+						<th style="color: #EA252C;">张小旭</th>
+						<th>26</th>
+						<th>CMII09</th>
+						<th>26</th>
+						<th>15038728747</th>
+						<th>2021-01-01</th>
+						<th>90</th>
+						<th style="position: relative;"><button type="default" size="mini" class="m_edit">修改</button></th>
+						<th style="position: relative;"><button type="default" size="mini" class="m_delete">删除</button></th>
+					</tr>
+					<tr>
+						<th style="color: #EA252C;">张小旭</th>
+						<th>26</th>
+						<th>CMII09</th>
+						<th>26</th>
+						<th>15038728747</th>
+						<th>2021-01-01</th>
+						<th>90</th>
+						<th style="position: relative;"><button type="default" size="mini" class="m_edit">修改</button></th>
+						<th style="position: relative;"><button type="default" size="mini" class="m_delete">删除</button></th>
+					</tr>
+					<tr>
+						<th style="color: #EA252C;">张小旭</th>
+						<th>26</th>
+						<th>CMII09</th>
+						<th>26</th>
+						<th>15038728747</th>
+						<th>2021-01-01</th>
+						<th>90</th>
+						<th style="position: relative;"><button type="default" size="mini" class="m_edit">修改</button></th>
+						<th style="position: relative;"><button type="default" size="mini" class="m_delete">删除</button></th>
+					</tr>
+					<tr>
+						<th style="color: #EA252C;">张小旭</th>
+						<th>26</th>
+						<th>CMII09</th>
+						<th>26</th>
+						<th>15038728747</th>
+						<th>2021-01-01</th>
+						<th>90</th>
+						<th style="position: relative;"><button type="default" size="mini" class="m_edit">修改</button></th>
+						<th style="position: relative;"><button type="default" size="mini" class="m_delete">删除</button></th>
+					</tr>
+				</tbody>
+			</table>
+		</view>
+		<view class="m_right_footer">
+			<view class="m_paging">
+				<text class="m_paging_item m_paging_upper">上一页</text>
+				<text class="m_paging_item" v-for="i in 8" @click="paging(i)" :class="i==index?'p_act':''">
+					{{i}}
+				</text>
+				<text class="m_paging_item m_paging_lower">下一页</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "manager_zc",
+		data() {
+			return {
+				index: 1,
+			}
+		},
+		methods: {
+			paging(obj) {
+				this.index = obj;
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.m_right {
+		width: 100%;
+		margin-top: 5rpx;
+		padding: 0 150rpx;
+		background-color: #fff;
+		box-shadow: 3px 0px 6px 0px rgba(0, 0, 0, 0.1);
+	
+		.m_right_hander {
+			text-align: right;
+			height: 250rpx;
+			position: relative;
+	
+			.m_btn_red {
+				position: absolute;
+				height: 80rpx;
+				line-height: 80rpx;
+				padding: 0 40rpx;
+				right: 0;
+				top: 50%;
+				transform: translateY(-50%);
+				background: #EA252C;
+				color: #fff;
+			}
+		}
+	
+	}
+	tbody tr {
+		border-top: 2rpx solid #DDDDDD !important;
+	
+	}
+	
+	tbody tr th {
+		font-weight: 400 !important;
+		height: 140rpx;
+		line-height: 140rpx;
+	}
+	
+	tbody tr:hover {
+		// color: #fff;
+		background: #FDEBEC;
+		// opacity: 0.08;
+	}
+	
+	.m-table-hander {
+		background-color: #FFF8F7;
+		height: 140rpx;
+		line-height: 140rpx;
+		font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
+		font-weight: bold;
+	}
+	
+	.m_edit {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		background: rgb(67, 127, 250);
+		color: rgb(255, 255, 255);
+		min-width: 130rpx;
+	}
+	
+	.m_delete {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		min-width: 130rpx;
+		transform: translate(-50%, -50%);
+		background: rgb(234, 37, 44);
+		color: rgb(255, 255, 255);
+	}
+	
+	.m_right_footer {
+		margin-top: 80rpx;
+	}
+	
+	.m_paging {
+		text-align: right;
+	
+		.m_paging_item {
+			padding: 10rpx 18rpx;
+			border: 1rpx solid #DDDDDD;
+			border-radius: 8rpx;
+			margin-right: 10rpx;
+		}
+	
+		.p_act {
+			background: #EA252C;
+			color: #fff;
+			border: inherit;
+		}
+	}
+	
+	.m_paging_item:hover {
+		background: #EA252C;
+		color: #fff;
+		border: inherit;
+	}
+	
+	.m_act1 {
+		color: #FF0019;
+	}
+</style>

components/startLearning/learningAndExperiment/ksxx_xxysy_ylrz/ksxx_xxysy_ylrz.vue

@@ -0,0 +1,243 @@
+<template>
+	<!-- 原理认知 -->
+	<view class="myComRoot ylrz-box df fdr">
+		<!-- 左边导航栏 -->
+		<view class="leftBox">
+			<view class="df fdc leftMenu" v-for="(menu1,i) in btnList" :key="i">
+				<view class="leftMenu-btn1 df fdr aic jcsb" @click="onLeftBtn1Click(i)">
+					<view class=" df fdr aic ">
+						<view class="leftMenu-btn1-icon df">
+							<img :src="menu1.icon_btn1_unchecked"></img>
+						</view>
+						<view class="leftMenu-btn1-text" :style="{color:color_unchecked_01}">{{menu1.text}}</view>
+					</view>
+					<view class="leftMenu-btn1-arrow df">
+						<img :src="arrowSrc"></img>
+					</view>
+				</view>
+				<view class="leftMenu-btn2-box2 df fdr aic" v-for="(menu2,m) in menu1.list" :key="m" @click="onLeftBtn2Click(i,m)">
+					<view class="leftMenu-btn2-icon df">
+						<img :src="(checkedIndex1==i&& checkedIndex2==m)?icon_btn2_checked:icon_btn2_unchecked"></img>
+					</view>
+					<view class="leftMenu-btn2-text" :style="{color:(checkedIndex1==i&& checkedIndex2==m)?color_checked:color_unchecked_02}">{{menu2}}</view>
+				</view>
+			</view>
+		</view>
+		<!-- 右边详情页 -->
+		<view class="rightBox">
+			<!-- 学习知识点 -->
+			<view class="right-content df fdc" v-show="checkedIndex1==0">
+				<view v-for="(content,n) in myData_YLRZ_ZSD[checkedIndex2].content" :key="n">
+					<view class="right-title df aic" v-show="content.type=='title'">
+						<view class="right-title-line"></view>
+						<view class="right-title-text">{{content.details}}</view>
+					</view>
+					<view class="right-text" v-show="content.type=='text'">{{content.details}}</view>
+					<view class="right-pic df" v-show="content.type=='pic'">
+						<img :src="content.src"></img>
+					</view>
+					<view class="right-space" v-show="content.type=='space'"></view>
+				</view>
+				<view class="df jcc">
+					<view class="right-btn-next df aic jcc" @click="onClick_next">下一步</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				isShow: false,
+				checkedIndex1: 0,
+				checkedIndex2: 0,
+
+				// ------以下为静态
+				arrowSrc: require('../../../../assets/learning/icon_ylrz_arrow.png'),
+				btnList: [{
+						"text": '学习知识点',
+						"icon_btn1_checked": require('../../../../assets/learning/icon_ylrz_menu_02.png'),
+						"icon_btn1_unchecked": require('../../../../assets/learning/icon_ylrz_menu_01.png'),
+						"list": ['课程地图及知识点位置', '知识点：虚拟纸片流程：', '知识点：虚拟引擎', '知识点：影视现场实时特效']
+					},
+					{
+						"text": '测验（完成获得10分）',
+						"icon_btn1_checked": require('../../../../assets/learning/icon_ylrz_menu_02.png'),
+						"icon_btn1_unchecked": require('../../../../assets/learning/icon_ylrz_menu_01.png'),
+						"list": ['测验']
+					},
+					{
+						"text": '结论',
+						"icon_btn1_checked": require('../../../../assets/learning/icon_ylrz_menu_02.png'),
+						"icon_btn1_unchecked": require('../../../../assets/learning/icon_ylrz_menu_01.png'),
+						"list": ['结论']
+					}
+				],
+				icon_btn2_checked: require('../../../../assets/learning/icon_ylrz_menu_02.png'),
+				icon_btn2_unchecked: require('../../../../assets/learning/icon_ylrz_menu_01.png'),
+				color_checked: '#EA252C',
+				color_unchecked_01: '#070707', //1级菜单
+				color_unchecked_02: '#555555', //2级菜单
+				myData_YLRZ_ZSD: [
+					YLRZ_ZSD_01,
+					YLRZ_ZSD_02,
+					YLRZ_ZSD_03,
+					YLRZ_ZSD_04
+				]
+			}
+		},
+		methods: {
+			initData() {
+				// this.checkedIndex1 = 0;
+				// this.checkedIndex2 = 0;
+			},
+			onLeftBtn1Click(index) {
+				if (index != this.checkedIndex1) {
+					this.checkedIndex2 = 0;
+					this.checkedIndex1 = index;
+				}
+			},
+			onLeftBtn2Click(index1, index2) {
+				this.checkedIndex1 = index1;
+				this.checkedIndex2 = index2;
+			},
+			onClick_next() {
+				if (this.checkedIndex2 < this.btnList[this.checkedIndex1].list.length - 1) {
+					this.checkedIndex2 += 1;
+				} else {
+					if (this.checkedIndex1 + 1 < this.btnList.length) {
+						this.checkedIndex1 += 1;
+						this.checkedIndex2 = 0;
+					} else {
+						// 先空着
+					}
+				}
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.ylrz-box {
+		background: #F4F4F4;
+	}
+
+	.leftBox {
+		background-color: #FFFFFF;
+		width: px2vw(374);
+		height: 100%;
+		box-shadow: px2vw(3) 0px px2vw(6) 0px rgba(0, 0, 0, 0.1);
+		margin-top: px2vw(11);
+	}
+
+	.rightBox {
+		flex: 1;
+		height: 100%;
+		background: #FFFFFF;
+		box-shadow: px2vw(3) 0px px2vw(6) 0px rgba(0, 0, 0, 0.1);
+		margin-top: px2vw(11);
+		margin-left: px2vw(11);
+	}
+
+	.leftMenu-btn1 {
+		width: 100%;
+		height: px2vw(70);
+		background: #F2F2F2;
+	}
+
+	.leftMenu-btn1-icon {
+		margin-left: px2vw(38);
+	}
+
+	.leftMenu-btn1-icon img {
+		width: px2vw(18);
+	}
+
+	.leftMenu-btn1-text {
+		margin-left: px2vw(14);
+		font-size: px2vw(20);
+	}
+
+	.leftMenu-btn2-box1 {
+		margin-top: px2vw(30);
+		margin-bottom: px2vw(30);
+	}
+
+	.leftMenu-btn2-box2 {
+		margin-left: px2vw(48);
+		margin-top: px2vw(25);
+	}
+
+	.leftMenu-btn2-text {
+		margin-left: px2vw(14);
+		font-size: px2vw(20);
+	}
+
+	.leftMenu-btn2-icon img {
+		width: px2vw(16);
+	}
+
+	.leftMenu-btn1-arrow {
+		margin-right: px2vw(38);
+	}
+
+	.leftMenu-btn1-arrow img {
+		width: px2vw(15);
+	}
+
+	.leftMenu {
+		margin-bottom: px2vw(25);
+	}
+
+	.right-content {
+		margin-top: px2vw(40);
+		margin-left: px2vw(50);
+		margin-bottom: px2vw(40);
+		margin-right: px2vw(50);
+	}
+
+	.right-title {}
+
+	.right-title-line {
+		width: px2vw(8);
+		height: px2vw(24);
+		background: #EA252C;
+	}
+
+	.right-title-text {
+		font-size: px2vw(24);
+		margin-left: px2vw(23);
+		color: #070707;
+	}
+
+	.right-text {
+		font-size: px2vw(22);
+		color: #020202;
+		line-height: px2vw(46);
+		margin-top: px2vw(40);
+	}
+
+	.right-space {
+		margin-top: px2vw(50);
+	}
+
+	.right-pic {
+		margin-top: px2vw(40);
+	}
+
+	.right-pic img {
+		max-width: px2vw(1397);
+	}
+
+	.right-btn-next {
+		width: px2vw(200);
+		height: px2vw(58);
+		background: #EA252C;
+		border-radius: px2vw(8);
+		margin-top: px2vw(60);
+		font-size: px2vw(24);
+		color: #FFFFFF;
+	}
+</style>

components/startLearning/learningAndExperiment/learningAndExperiment.vue

@@ -0,0 +1,103 @@
+<template>
+	<!-- 学习与实验 -->
+	<view class="myComRoot df jcc bgclF8">
+		<view class="df fdc contentBox">
+			<!-- 换行的段落文字 -->
+			<view class="df content-paragraph" v-for="(paragraph,i) in data_XXYSY[checkedIndex_topTitle].content.paragraphList"
+			 :key="i">
+				<!-- 不换行文字 -->
+				<view class="contentText">
+					<text v-for="(text,m) in paragraph" :key="m" :style="{color:text.color,fontWeight:text.fontWeight}">
+						{{text.text}}
+					</text>
+				</view>
+			</view>
+			<!-- 媒体文件 -->
+			<view class="contentMedia df jcc">
+				<view v-for="(media,n) in data_XXYSY[checkedIndex_topTitle].content.src.list" :key="n">
+					<img v-show='data_XXYSY[checkedIndex_topTitle].content.src.type=== "image"' :src="media"></img>
+				</view>
+			</view>
+			<!-- 按钮 -->
+			<view class="df jcc">
+				<view class="df aic jcc btn-xxysy" v-show='checkedIndex_topTitle==0' @click="onClick_KSRZ">开始认知</view>
+				<view class="df aic jcc btn-xxysy" v-show='checkedIndex_topTitle==1'>开始勘察</view>
+				<view class="df aic jcc btn-xxysy" v-show='checkedIndex_topTitle==2'>下载客户端</view>
+				<view class="df aic jcc btn-xxysy" v-show='checkedIndex_topTitle==3'>下载客户端</view>
+			</view>
+		</view>
+
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				checkedIndex_topTitle: 0, //顶部标题选择
+
+
+				//以下为静态
+				myData_QXZB_SYQY: myData_QXZB_SYQY,
+				data_XXYSY: [
+					myData_XXYSY_YLRZ, //原理认知
+					myData_XXYSY_SJKC, //实景勘察
+					myData_XXYSY_XNJSDJ, //虚拟技术搭建
+					myData_XXYSY_XNYSZZ, //虚拟艺术创作
+					myData_XXYSY_XNZYKJS, //虚拟资源库建设
+				],
+				checkedColor: "#EA252C",
+				unCheckedColor_text: "#0E0E0E",
+				unCheckedColor_border: "#C4C4C4",
+			}
+		},
+		methods: {
+			onTopXXYSYClick(index) {
+				this.checkedIndex_topTitle = index;
+				// console.log("2级点击", index, this.data_XXYSY[index].content);
+				// console.log("***",this.myData_QXZB_SYQY);
+			},
+			onClick_KSRZ(){
+				this.$emit("onClick_KSRZ")
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.contentBox {
+		width: px2vw(1789);
+		margin-top: px2vw(66);
+	}
+
+	.content-paragraph {}
+
+	.contentText {
+		// width: px2vw(1789);
+		font-size: px2vw(22);
+		line-height: px2vw(46);
+	}
+
+	.contentMedia {
+		margin-top: px2vw(66);
+	}
+
+	.contentMedia img {
+		width: px2vw(780);
+		margin-bottom: px2vw(63);
+	}
+
+	// .contentMedia video {
+	// 	width: px2vw(1306);
+	// }
+	.btn-xxysy {
+		width: px2vw(200);
+		height: px2vw(58);
+		background: #EA252C;
+		border-radius: px2vw(8);
+		font-size: px2vw(24);
+		color: #FFFFFF;
+		line-height: px2vw(31);
+		margin-bottom: px2vw(63);
+	}
+</style>

components/startLearning/preludePreparation/preludePreparation.vue

@@ -0,0 +1,116 @@
+<template>
+	<!-- 前序准备df fdc -->
+	<view class="myComRoot df fdc bgclF8">
+		<!-- 标题 -->
+		<view class="titleBox df fdr jcc" v-show="data_QXZB[checkedIndex_topTitle].length>1">
+			<view v-for="(item,i) in data_QXZB[checkedIndex_topTitle]" :key="i" @click="onTitleClick(i)" class="df fdc aic jcc title-item"
+			 :style="{color:checkedIndex_bodyTitle==i?checkedColor:unCheckedColor_text,
+			 borderColor:checkedIndex_bodyTitle==i?checkedColor:unCheckedColor_border,
+			 borderLeftStyle:checkedIndex_bodyTitle==i-1?'none':((i!=0&&checkedIndex_bodyTitle!=i)?'none':'solid'),
+			 borderRightStyle:checkedIndex_bodyTitle==i+1?'none':'solid'}">
+				{{item.text}}
+			</view>
+		</view>
+		<!-- 内容 -->
+		<view class="df aic fdc">
+			<!-- 文字 -->
+			<view class="contentText">
+				<text v-for="(item,i) in data_QXZB[checkedIndex_topTitle][checkedIndex_bodyTitle].content.text" :key="i+1" :style="{color:item.color}">
+					{{item.text}}
+				</text>
+			</view>
+			<!-- 媒体文件 -->
+			<view class="contentMedia">
+				<!-- <img v-show='data_QXZB[checkedIndex_topTitle][checkedIndex_bodyTitle].content.src.type=== "image"' v-for="(item,i) in data_QXZB[checkedIndex_topTitle][checkedIndex_bodyTitle].content.src.list"
+				 :key="i+2" :src="item"></img> -->
+				<!-- <video id="myVideo" src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4"
+				  enable-danmu danmu-btn controls></video> -->
+				<!-- <video v-show='data_QXZB[checkedIndex_topTitle][checkedIndex_bodyTitle].content.src.type=== "video"' v-for="(item,i) in data_QXZB[checkedIndex_topTitle][checkedIndex_bodyTitle].content.src.list"
+				 :key="i+2" :src="item"></video> -->
+				<view v-for="(item,i) in data_QXZB[checkedIndex_topTitle][checkedIndex_bodyTitle].content.src.list" :key="i+2">
+					<img v-show='data_QXZB[checkedIndex_topTitle][checkedIndex_bodyTitle].content.src.type=== "image"' :src="item"></img>
+					<!-- <video v-show='data_QXZB[checkedIndex_topTitle][checkedIndex_bodyTitle].content.src.type=== "video"' :src="item" id="myVideo" ></video> -->
+				</view>
+			</view>
+		</view>
+
+	</view>
+</template>
+
+<script>
+	// import '../../assets/myData/myData_QXZB.js';
+	export default {
+		data() {
+			return {
+				checkedIndex_topTitle: 0, //顶部标题选择
+				checkedIndex_bodyTitle: 0, //正文小标题选择
+
+
+				//以下为静态
+				// myData_QXZB_SYQY: myData_QXZB_SYQY,
+				data_QXZB: [
+					myData_QXZB_SYQY, //实验前言
+					myData_QXZB_SYLCBZ, //实验流程步骤
+					myData_QXZB_JXYDSP, //教学引导视频
+					myData_QXZB_JCZS, //基础知识
+				],
+				checkedColor: "#EA252C",
+				unCheckedColor_text: "#0E0E0E",
+				unCheckedColor_border: "#C4C4C4",
+
+				scrollTop: 0,
+				old: {
+					scrollTop: 0
+				}
+			}
+		},
+		methods: {
+			// initData(){
+			// 	this.checkedIndex_topTitle=0;
+			// 	this.checkedIndex_bodyTitle=0;
+			// },
+			onTitleClick(index) {
+				this.checkedIndex_bodyTitle = index
+				// console.log("***", this.data_QXZB[this.checkedIndex_topTitle][this.checkedIndex_bodyTitle].content.src.type);
+			},
+			onTopQXZBClick(index) {
+				// console.log("顶部点击",index);
+				this.checkedIndex_topTitle = index;
+				this.checkedIndex_bodyTitle = 0;
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	.titleBox {
+		margin-top: px2vw(63);
+		margin-bottom: px2vw(63);
+	}
+
+	.title-item {
+		font-size: px2vw(20);
+		padding: px2vw(15) px2vw(56) px2vw(15) px2vw(56);
+		border: 1px solid;
+	}
+
+	.contentText {
+		width: px2vw(1789);
+		font-size: px2vw(22);
+		line-height: px2vw(46);
+
+	}
+
+	.contentMedia {
+		margin-top: px2vw(66);
+	}
+
+	.contentMedia img {
+		width: px2vw(780);
+		margin-bottom: px2vw(63);
+	}
+
+	// .contentMedia video {
+	// 	width: px2vw(1306);
+	// }
+</style>

components/startLearning/startLearning.vue

@@ -0,0 +1,133 @@
+<template>
+	<!-- 开始学习 -->
+	<view class="myComRoot df fdc  bgclF8">
+		<view class="df jcc aic fdc firstTitleBox">
+			<view class="df content-box jcsb">
+				<view v-for="(item,i) in btn1List" :key="i" class="df jcc aic fdc btn1-box" @click="onClickBtn1(i)" :style=" {borderColor: current===i?btn1CheckedColor:btn1UncheckedColor, borderWidth: current===i?btn1CheckedPX:btn1UncheckedPX}">
+					<view class="btn1-icon">
+						<img :src="item.src"></img>
+					</view>
+					<view class="btn1-text">{{item.text}}</view>
+				</view>
+			</view>
+		</view>
+		<view class="secondTitleBox df" v-show="current ===0||current ===1">
+			<!-- 前序准备二级QXZB -->
+			<view class="df fdr secondTitleBox2" v-show="current === 0">
+				<view v-for="(item,i) in btn1List[0].list" :key="i"  class="secondTitleBox-item" @click="onQXZB2Click(i)">
+					<view class="secondTitleBox-itemIndex">0{{i+1}}</view>
+					<view class="secondTitleBox-itemText">{{item}}</view>
+				</view>
+			</view>
+			<!-- 学习与实验二级XXYSY -->
+			<view class="df fdr secondTitleBox2" v-show="current === 1">
+				<view v-for="(item,i) in btn1List[1].list" :key="i"  class="secondTitleBox-item" @click="onXXYSY2Click(i)">
+					<view class="secondTitleBox-itemIndex">0{{i+1}}</view>
+					<view class="secondTitleBox-itemText">{{item}}</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import TopMenu from '../../components/topMenu.vue'
+	export default {
+		components: {
+			TopMenu,
+		},
+		onLoad() {
+
+		},
+		data() {
+			return {
+				//0前序准备1学习与实验
+				current: -1,
+				
+				//以下为静态
+				btn1CheckedColor: "#EA252C",
+				btn1CheckedPX: "2px",
+				btn1UncheckedColor: "#C2C2C2",
+				btn1UncheckedPX: "1px",
+
+				btn1List: [{
+						"src": require("../../assets/topMenu/preludePreparation.png"),
+						"text": "前序准备",
+						"list": ["实验前言", "实验流程步骤", "教学引导视频", "基础知识"]
+					},
+					{
+						"src": require("../../assets/topMenu/learningAndExperiment.png"),
+						"text": "学习与实验",
+						"list": ["原理认知", "实景勘察", "虚拟技术搭建", "虚拟艺术创作", "虚拟资源库建设"]
+					},
+					{
+						"src": require("../../assets/topMenu/testAndResult.png"),
+						"text": "测试与结果",
+						"list": []
+					},
+				],
+			}
+		},
+		methods: {
+			initData(){
+				this.current=-1
+			},
+			//大标题
+			onClickBtn1(index) {
+				this.current = index
+			},
+			//前序准备二级
+			onQXZB2Click(index){
+				this.$emit("on2thTitleClick","QXZB-"+index)
+			},
+			//学习与实验二级
+			onXXYSY2Click(index){
+				this.$emit("on2thTitleClick","XXYSY-"+index)
+			},
+			//切换二级选择页，如：切换为“学习与实验”的展开页
+			switchSecondTitle(index){
+				this.current=index;
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	$btnN:3;
+
+	.content-box {
+		width: px2vw(312*$btnN+67*(($btnN)-1));
+		height: px2vw(367);
+	}
+	.firstTitleBox{
+		flex: 1;
+	}
+
+	.secondTitleBox {
+		width: 100%;
+		height: 37%;
+		background: #FFFFFF;
+		box-shadow: 3px 0px 6px 0px rgba(0, 0, 0, 0.1);
+		// margin-top: px2vw(120);
+	}
+
+	.secondTitleBox2 {
+		margin-left: px2vw(395);
+		margin-top: px2vw(92);
+	}
+
+	.secondTitleBox-item {
+		margin-right: px2vw(92);
+	}
+
+	.secondTitleBox-itemIndex {
+		font-size: px2vw(28);
+		color: #B4B4B4;
+	}
+
+	.secondTitleBox-itemText {
+		font-size: px2vw(26);
+		color: #323232;
+		margin-top: px2vw(17);
+	}
+</style>

components/topMenu.vue

@@ -0,0 +1,369 @@
+<template>
+	<!-- 顶部导航栏 -->
+	<view class="topMenuBox df jcsb">
+		<view class="df fdr">
+			<!-- 左侧导航icon -->
+			<view class="df aic jcc topMenu-lefticon" @click="onTopMenuIconClick">
+				<img src="../assets/topMenu/leftUpIcon.png" />
+			</view>
+			<!-- 左上角标题 -->
+			<view class="df aic topMenu-lefttitle-box">
+				<view v-show="middleShowIndex==0">影视现场实时特效虚拟仿真实验</view>
+				<view v-show="middleShowIndex==1" class="df fdr aic">
+					<img src="../assets/learning/icon_ksxx_qxzb.png"></img>
+					<view>前序准备</view>
+					<view class="topMenu-lefttitle-line"></view>
+				</view>
+				<view v-show="middleShowIndex==2" class="df fdr aic">
+					<img src="../assets/learning/icon_ksxx_xxysy.png"></img>
+					<view>学习与实验</view>
+					<view class="topMenu-lefttitle-line"></view>
+				</view>
+				<view v-show="middleShowIndex==3" class="df fdr aic">
+					<img src="../assets/learning/icon_ksxx_qxzb.png"></img>
+					<view>原理认知</view>
+					<view class="topMenu-lefttitle-line"></view>
+				</view>
+				<view v-show="middleShowIndex==4" class="df fdr aic">
+					<img src="../assets/learning/icon_ksxx_qxzb.png"></img>
+					<view v-for="(syjjTitle,syjjTitleI) in titleSYJJ" :key="syjjTitleI" v-show="syjjTitleI==checkedIndexSYJJ">
+						{{syjjTitle}}
+					</view>
+					<view class="topMenu-lefttitle-line"></view>
+				</view>
+				<view v-show="middleShowIndex==9">虚拟仿真实验后台</view>
+			</view>
+		</view>
+
+		<!-- 中间几个导航标题 -->
+		<!-- 首页开始学习那几个 -->
+		<view class="df aic topMenu-middleMenu" v-show="middleShowIndex==0">
+			<view v-for="(item,i) in titleText" :key="i" @click="onTitleClick_SY(i)" class="df fdr aic jcc topMenu-middleMenu-item">
+				<view>
+					<img :src="curTitleSrc[i]"></img>
+				</view>
+				<view class="topMenu-middleMenu-item-text" :style="{color:curTitleColor[i]}">{{item}}</view>
+			</view>
+		</view>
+		<!-- 前序准备 -->
+		<view class="df aic topMenu-middleMenu" v-show="middleShowIndex==1">
+			<view v-for="(item,i) in titleQXZB" :key="i" @click="onTitleClick_QXZB(i)" class="df fdc aic jcc top2thTitle-item">
+				<view class="top2thTitle-item-text df aic" :style="{color:checkedIndexQXZB==i?titleColorChecked:titleColorUnchecked}">{{item}}</view>
+				<view class="top2thTitle-item-line" :style="{opacity: checkedIndexQXZB==i?1:0}"></view>
+			</view>
+		</view>
+		<!-- 学习与实验 -->
+		<view class="df aic topMenu-middleMenu" v-show="middleShowIndex==2">
+			<view v-for="(item,i) in titleXXYSY" :key="i" @click="onTitleClick_XXYSY(i)" class="df fdc aic jcc top2thTitle-item">
+				<view class="top2thTitle-item-text df aic" :style="{color:checkedIndexXXYSY==i?titleColorChecked:titleColorUnchecked}">{{item}}</view>
+				<view class="top2thTitle-item-line" :style="{opacity: checkedIndexXXYSY==i?1:0}"></view>
+			</view>
+		</view>
+
+		<!-- 右侧登录或个人头像名字等 -->
+		<view class="df jcc aic topMenu-rightbox">
+			<!-- 原理认知页面-返回上一层 -->
+			<view class="ylrz-return df aic fdr" v-show="returnShowIndex==1" @click="onClick_return">
+				<view class="df">
+					<img src="../assets/topMenu/icon_return.png" />
+				</view>
+				<view class="ylrz-return-text">返回上一层</view>
+			</view>
+			<!-- 登录按钮 -->
+			<view v-show="loginShowIndex==0" class="df jcc aic btnLogin" id="btnLogin" @click="onLoginClick">登录</view>
+			<!-- 头像名字 -->
+			<view v-show="loginShowIndex==1" class="df aic">
+				<view>
+					<img src="../assets/topMenu/introductionToTheExperimentChecked.png" />
+				</view>
+				<view class="topMenu-rightbox-text">学生</view>
+				<view>
+					<img src="../assets/topMenu/arrowDown.png" />
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				//中间导航状态 0首页1前序准备2学习与实验3原理认知
+				middleShowIndex: 0,
+
+				// //右侧显示信息0登录按钮1个人头像信息2返回上一层
+				// rightShowIndex: 0,
+				//0登录按钮1个人头像信息
+				loginShowIndex: 0,
+				//返回上一层 0不显示1显示
+				returnShowIndex: 0,
+				// visibleLogin: true,
+				// visibleInfo: false,
+				visibleMiddle: true,
+
+				curTitleSrc: [
+					require("../assets/topMenu/introductionToTheExperimentUnchecked.png"),
+					require("../assets/topMenu/learningProcessUnchecked.png"),
+					require("../assets/topMenu/startLearningUnchecked.png")
+				],
+				curTitleColor: [
+					"#020202",
+					"#020202",
+					"#020202"
+				],
+
+				checkedIndexQXZB: 0, //选中的前序准备的菜单
+				checkedIndexXXYSY: 0, //选中的学习与实验的菜单
+				checkedIndexSYJJ: 0, //选中的实验简介的菜单
+
+				//////////////////////以下皆为静态
+				titleText: ["实验简介", "学习流程", "开始学习"],
+				//首页-中间标题选中时icon
+				titleSrcChecked: [
+					require("../assets/topMenu/introductionToTheExperimentChecked.png"),
+					require("../assets/topMenu/learningProcessChecked.png"),
+					require("../assets/topMenu/startLearningChecked.png")
+				],
+				//首页-中间标题未选中时icon
+				titleSrcUnchecked: [
+					require("../assets/topMenu/introductionToTheExperimentUnchecked.png"),
+					require("../assets/topMenu/learningProcessUnchecked.png"),
+					require("../assets/topMenu/startLearningUnchecked.png")
+				],
+				//首页-中间标题选中时颜色
+				titleColorChecked: "#EA252C",
+				//首页-中间标题未选中时颜色
+				titleColorUnchecked: "#020202",
+				//前序准备
+				titleQXZB: ["实验前言", "实验流程步骤", "教学引导视频", "基础知识"],
+				//学习与实验
+				titleXXYSY: ["原理认知", "实景勘察", "虚拟技术搭建", "虚拟艺术创作", "虚拟资源库建设"],
+				//实验简介
+				titleSYJJ: ['评审账号', '快速进入实验', '实验概述', '使用环境与技术构架', '项目简介视频'],
+				titleManager: ["虚拟仿真实验后台"]
+			}
+		},
+		methods: {
+			//初始化数据
+			initData() {
+				this.curTitleSrc = this.titleSrcUnchecked;
+				this.curTitleColor = this.titleColorUnchecked;
+			},
+			onLoginClick() {
+				this.$emit("onLoginClick");
+			},
+			//首页标题点击
+			onTitleClick_SY(index) {
+				// console.log("点击了", index);
+				this.$emit("onTopSYClick", index);
+				this.$forceUpdate();
+				//改变颜色
+				for (let i = 0; i < 3; i++) {
+					if (i == index) {
+						this.curTitleSrc[i] = this.titleSrcChecked[i];
+						this.curTitleColor[i] = this.titleColorChecked;
+					} else {
+						this.curTitleSrc[i] = this.titleSrcUnchecked[i];
+						this.curTitleColor[i] = this.titleColorUnchecked;
+					}
+				}
+			},
+			//切换右侧状态
+			// switchRightState(index) {
+			// 	this.rightShowIndex = index;
+			// },
+			//切换登录状态
+			switchLoginState(isLogged) {
+				if (isLogged) {
+					// this.visibleLogin = false;
+					// this.visibleInfo = true;
+					// this.switchRightState(1);
+					this.loginShowIndex = 1;
+				} else {
+					// this.visibleLogin = true;
+					// this.visibleInfo = false;
+					// this.switchRightState(0);
+					this.loginShowIndex = 0;
+				}
+			},
+			//切换中间导航状态
+			switchMiddleState(state) {
+				switch (state) {
+					case topMenuS.SY:
+						this.middleShowIndex = 0;
+						// this.switchRightState(0);
+						this.returnShowIndex = 0;
+						this.loginShowIndex = 0;
+						break;
+					case topMenuS.QXZB:
+						this.middleShowIndex = 1
+						// this.switchRightState(0);
+						this.returnShowIndex = 0;
+						this.loginShowIndex = 0;
+						break;
+					case topMenuS.XXYSY:
+						this.middleShowIndex = 2
+						// this.switchRightState(0);
+						this.returnShowIndex = 0;
+						this.loginShowIndex = 0;
+						break;
+					case topMenuS.YLRZ:
+						this.middleShowIndex = 3
+						// this.switchRightState(2);
+						this.returnShowIndex = 1;
+						this.loginShowIndex = -1;
+						break;
+					case topMenuS.SYJJ:
+						this.middleShowIndex = 4
+						// this.switchRightState(2);
+						this.returnShowIndex = 1;
+						this.loginShowIndex = 0;
+						break;
+					case topMenuS.manager:
+						this.middleShowIndex = 9;
+						this.returnShowIndex = 2;
+						this.loginShowIndex = -1;
+						break;
+					default:
+						console.log("切换中间导航状态", state);
+				}
+			},
+			//前序准备标题点击
+			onTitleClick_QXZB(index) {
+				// console.log("前序准备标题点击",index);
+				this.checkedIndexQXZB = index;
+				this.$emit("onTopQXZBClick", index);
+				// this.$forceUpdate();
+			},
+			onTitleClick_XXYSY(index) {
+				this.checkedIndexXXYSY = index;
+				this.$emit("onTopXXYSYClick", index);
+				// console.log("学习与实验topmenu",index);
+			},
+			onTopMenuIconClick() {
+				this.$emit("onTopMenuIconClick");
+				console.log("顶部icon点击");
+			},
+			//原理认知-返回上一层:返回到开始学习-学习与实验的展开页 type-3
+			//实验简介-返回上一层：返回到实验简介的展开页 type-4
+			onClick_return() {
+				let type = this.middleShowIndex;
+				this.$emit("onClick_return", type);
+
+				this.switchMiddleState(topMenuS.SY);
+			},
+			switchState_syjj(index) {
+				this.checkedIndexSYJJ = index;
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.topMenuBox {
+		width: 100%;
+		// height: px2vw(119);
+		// height: 11%;
+		background: #FFFFFF;
+		box-shadow: 3px 0px 6px 0px rgba(0, 0, 0, 0.1);
+		position: fixed;
+	}
+
+	.topMenu-lefticon {
+		width: 6.2vw;
+		height: 6.2vw;
+		background: #EA252C;
+	}
+
+	.topMenu-lefttitle-box {
+		margin-left: 2.4vw;
+		font-size: 1.5vw;
+		font-family: MicrosoftYaHei;
+		color: #323232;
+		margin-right: 2.4vw;
+	}
+
+	.topMenu-lefttitle-box img {
+		width: px2vw(50);
+		margin-right: px2vw(18);
+	}
+
+	.topMenu-lefttitle-line {
+		width: px2vw(2);
+		// width: 1px;
+		height: px2vw(53);
+		background: #D5D5D5;
+		margin-left: px2vw(32);
+	}
+
+	.topMenu-middleMenu {
+		/* display: none; */
+		flex-grow: 1;
+		/* justify-content: center; */
+		justify-content: space-evenly;
+	}
+
+	/* 	.topMenu-middleMenu-item {
+		margin-left: 71px;
+	} */
+	.topMenu-middleMenu-item-text {
+		margin-left: px2vw(20);
+	}
+
+	.topMenu-rightbox {
+		margin-right: px2vw(58);
+		margin-left: px2vw(58);
+	}
+
+	.btnLogin {
+		width: 6.2vw;
+		height: 3vw;
+		background: #EA252C;
+		border-radius: 8px;
+		font-size: 1.14vw;
+		font-family: MicrosoftYaHei;
+		color: #FFFFFF;
+		line-height: 1.5vw;
+		letter-spacing: 1px;
+	}
+
+	.topMenu-rightbox-text {
+		margin-left: px2vw(18);
+		margin-right: px2vw(23);
+	}
+
+	.top2thTitle-item {
+		height: 100%;
+	}
+
+	// 二级目录标题字
+	.top2thTitle-item-text {
+		flex: 1;
+		font-size: px2vw(24);
+		color: #323232;
+	}
+
+	// 二级目录标题红线
+	.top2thTitle-item-line {
+		width: px2vw(110);
+		height: px2vw(6);
+		background: #EA252C;
+		border-radius: px2vw(5);
+	}
+
+	//返回上一层
+	.ylrz-return {
+		margin-right: px2vw(43);
+	}
+
+	.ylrz-return img {
+		width: px2vw(23);
+	}
+
+	.ylrz-return-text {
+		font-size: px2vw(24);
+		color: #EA252C;
+		margin-left: px2vw(14);
+	}
+</style>

main.js

@@ -0,0 +1,24 @@
+import Vue from 'vue'
+import App from './App'
+// 引入路由
+import router from "./router.js"    // import router 的router 一定要小写， 不要写成Router, 否则报 can't match的报错
+
+Vue.config.productionTip = false
+
+App.mpType = 'app'
+
+const app = new Vue({
+    ...App,
+	// el: '#app',
+	router,  // 注入到根实例中
+})
+app.$mount()
+
+import './public.css';
+import './uni.scss';
+
+import './myData.js';
+import './myData/myData_QXZB.js';
+import './myData/myData_XXYSY.js';
+import './myData/myData_XXYSY_YLRZ.js';
+import './myData/myData_SYJJ.js';

manifest.json

@@ -0,0 +1,89 @@
+{
+    "name" : "ZhongChuang",
+    "appid" : "",
+    "description" : "",
+    "versionName" : "1.0.0",
+    "versionCode" : "100",
+    "transformPx" : false,
+    /* 5+App特有相关 */
+    "app-plus" : {
+        "usingComponents" : true,
+        "nvueCompiler" : "uni-app",
+        "compilerVersion" : 3,
+        "splashscreen" : {
+            "alwaysShowBeforeRender" : true,
+            "waiting" : true,
+            "autoclose" : true,
+            "delay" : 0
+        },
+        /* 模块配置 */
+        "modules" : {},
+        /* 应用发布信息 */
+        "distribute" : {
+            /* android打包配置 */
+            "android" : {
+                "permissions" : [
+                    "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
+                    "<uses-permission android:name=\"android.permission.READ_CONTACTS\"/>",
+                    "<uses-permission android:name=\"android.permission.VIBRATE\"/>",
+                    "<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
+                    "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
+                    "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
+                    "<uses-permission android:name=\"android.permission.WRITE_CONTACTS\"/>",
+                    "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.CAMERA\"/>",
+                    "<uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>",
+                    "<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
+                    "<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>",
+                    "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
+                    "<uses-permission android:name=\"android.permission.CALL_PHONE\"/>",
+                    "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
+                    "<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>",
+                    "<uses-feature android:name=\"android.hardware.camera\"/>",
+                    "<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>",
+                    "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
+                ]
+            },
+            /* ios打包配置 */
+            "ios" : {},
+            /* SDK配置 */
+            "sdkConfigs" : {}
+        }
+    },
+    /* 快应用特有相关 */
+    "quickapp" : {},
+    /* 小程序特有相关 */
+    "mp-weixin" : {
+        "appid" : "",
+        "setting" : {
+            "urlCheck" : false
+        },
+        "usingComponents" : true
+    },
+    "mp-alipay" : {
+        "usingComponents" : true
+    },
+    "mp-baidu" : {
+        "usingComponents" : true
+    },
+    "mp-toutiao" : {
+        "usingComponents" : true
+    },
+    "uniStatistics" : {
+        "enable" : false
+    },
+    "h5" : {
+        "title" : "ZhongChuan",
+        "router" : {
+            "mode" : "history",
+            "base" : "./"
+        },
+        "devServer" : {
+            "port" : 9902
+        },
+        "domain" : "www.yuyekeji.cn"
+    }
+}

myData.js

@@ -0,0 +1,9 @@
+//顶部导航状态
+topMenuS = {
+	"SY": "首页",
+	"QXZB": "前序准备",
+	"XXYSY": "学习与实验",
+	"YLRZ": "原理认知",
+	"SYJJ":"实验简介",
+	"manager":"虚拟仿真实验后台"
+}

myData/myData_SYJJ.js

@@ -0,0 +1,492 @@
+// 开始学习-实验简介
+// 标题title，文字text（普通文字nor，特殊文字dif，链接link），图片pic，视频video，按钮btn
+// 每个content为一个段落
+myData_SYJJ_PSZH={
+	"text":'评审账号',
+	"page":[
+		{
+			"title":'',
+			"content":[
+				{
+					"type":'text',
+					"textList":[
+						{
+							"textType":'dif',
+							"text":'访问实验模块需登录，评审账号:teststudent01 密码:teststudent01'
+						}
+					]
+				},
+				{
+					"type":'text',
+					"textList":[
+						{
+							"textType":'nor',
+							"text":'实验已完成与实验空间的技术接口对接，也可使用实验空间账号密码登 录本实验。 '
+						}
+					]
+				},
+				{
+					"type":'text',
+					"textList":[
+						{
+							"textType":'nor',
+							"text":'通过点击上方导航栏的'
+						},
+						{
+							"textType":'dif',
+							"text":'"开始学习"'
+						},
+						{
+							"textType":'nor',
+							"text":'，访问实验的"'
+						},
+						{
+							"textType":'dif',
+							"text":'原理认知、实景考察、虚拟实验'
+						},
+						{
+							"textType":'nor',
+							"text":'"三个模块，其中原理认知、实景考察为网页端学习，虚拟实验为 客户端学习，需下载后学习，客户端已完成与网页端的技术接口对接， 也可使用实验空间账号与密码登录本实验，可先行下载实验客户端，在 完成网页端原理学习后即可在客户端立即实验。点击'
+						},
+						{
+							"textType":'dif',
+							"text":'"学习流程"'
+						},
+						{
+							"textType":'nor',
+							"text":'，访问各模块的操作引导与学习流程指南。'
+						}
+					]
+				},
+				{
+					"type":'text',
+					"textList":[
+						{
+							"textType":'dif',
+							"text":'浏览器要求'
+						},
+						{
+							"textType":'nor',
+							"text":':浏览器使用Google Chrome 64位版本，以获得最佳体验效果 (76.0.3809.132正式版本64 位)，'
+						},
+						{
+							"textType":'link',
+							"text":'下载Chrome。 ',
+							"link":''
+						}
+					]
+				}
+			]
+		}
+	]
+}
+myData_SYJJ_KSJRSY={
+	"text":'快速进入实验',
+	"page":[
+		{
+			"title":'',
+			"content":[
+				{
+					"type":'text',
+					"textList":[
+						{
+							"textType":'nor',
+							"text":'快速进入实验'
+						}
+					]
+				}
+			]
+		}
+	]
+}
+myData_SYJJ_SYGS={
+	"text":'实验概述',
+	"page":[
+		{
+			"title":'项目背景',
+			"content":[
+				{
+					"type":'text',
+					"textList":[
+						{
+							"textType":'nor',
+							"text":'传统工业级影视创作流程分为前期设计、现场拍摄、后期制作三大阶段。三阶段虽然彼此前后承接，但各环节创作彼此独立，是一种“串联式”制作。影视实时特效是当下最新的影视创作流程与技术规范，它颠覆了电影100年以来的传统创作流程，将前期设计、后期合成调色等环节直接并入现场拍摄，是一种“并联式”制作。影视实时特效是当下影视行业的最前沿科技，其特点是：1、有效节省时间与资金；2、实现各部门实时互动，提升协作力；3、现场所见即所得，有效避免后期风险。影视实时特效的核心是实时渲染技术。该技术从游戏行业起家，并逐渐渗透到各个工业领域，并于2019年开始正式介入影视行业，世界顶尖特效公司工业光魔首先将该技术用于《曼达洛人》创作，随后掀起一场影视实时特效的热潮，极大促进了影游融合的发展及电影工业美学升级，为影视艺术带来新的生命力。'
+						}
+					]
+				},
+				{
+					"type":'text',
+					"textList":[
+						{
+							"textType":'nor',
+							"text":'中国传媒大学戏剧影视学院是戏剧影视学双一流学科的建设单位，下设文编、导演、摄影、灯光美术5个本科专业方向。影视特效教学内容是当下影视专业课程体系中极为重要的部分，虽然开设在美术专业的《视觉特效》课程中，但实际在各专业的多门课程中均有交叉，因此既是影视专业课程体系的重要基础，亦是影视各专业交叉融合的一座浮桥。综上所述，《影视特效》对于影视专业的学习至关重要，影视实时特效作为最前沿的科技与创作流程，成为影视专业本科生必修的基础性、前沿性专业知识。'
+						}
+					]
+				}
+			]
+		},
+		{
+			"title":'实验目的',
+			"content":[
+				{
+					"type":'text',
+					"textList":[
+						{
+							"textType":'nor',
+							"text":'影视实时特效教学的主要内容分为五个部分：原理认知教学、拍摄现场实地考察、技术搭建教学、艺术创作教学、虚拟艺术教学。这些教学内容围绕学校、影视公司、拍摄基地三个空间展开，设计了相对应的5个学习模块：'
+						}
+					]
+				},
+				{
+					"type":'pic',
+					"src":require("../assets/learning/pic_syjj_01.png")
+				},
+				{
+					"type":'pic',
+					"src":require("../assets/learning/pic_syjj_02.png")
+				},
+				{
+					"type":'text',
+					"textList":[
+						{
+							"textType":'nor',
+							"text":'1、'
+						},
+						{
+							"textType":'dif',
+							"text":'原理认知模块'
+						},
+						{
+							"textType":'nor',
+							"text":'：该模块为理论模块。进行基本原理学习。'
+						}
+					]
+				},
+				{
+					"type":'text',
+					"textList":[
+						{
+							"textType":'nor',
+							"text":'2、'
+						},
+						{
+							"textType":'dif',
+							"text":'实地勘察模块'
+						},
+						{
+							"textType":'nor',
+							"text":'：该模块为社会考察模块。用虚拟仿真的方式，使学生沉浸式考察远在异地的真实摄影棚，岁摄影棚、影视设备进行直观认知。'
+						}
+					]
+				},
+				{
+					"type":'text',
+					"textList":[
+						{
+							"textType":'nor',
+							"text":'3、'
+						},
+						{
+							"textType":'dif',
+							"text":'虚拟技术搭建模块'
+						},
+						{
+							"textType":'nor',
+							"text":'：该模块为技术实践模块，将世界顶尖特效公司工业光魔的实时特效摄影棚及棚内拍摄器材进行了仿真还原。学生通过此模块学习，动手实践影视实时特效的技术搭建过程，从而掌握相关的技术实操能力。'
+						}
+					]
+				},
+				{
+					"type":'text',
+					"textList":[
+						{
+							"textType":'nor',
+							"text":'4、'
+						},
+						{
+							"textType":'dif',
+							"text":'虚拟艺术创作模块'
+						},
+						{
+							"textType":'nor',
+							"text":'：该模块为艺术实践模块，是该项目的核心实验模块。在技术搭建的基础上，学生可以按照实验步骤，在老师的影视虚拟项目中进行艺术创作实践。学生通过此模块学习，动手实践影视实时特效的艺术创作，从而切实提升艺术创作能力，并将三维制作、摄影、灯光、剧本、服装、场景、人物等专业课程融合其中，实现知识体系的融会贯通。'
+						}
+					]
+				},
+				{
+					"type":'pic',
+					"src":require("../assets/learning/pic_syjj_03.png")
+				},
+				{
+					"type":'text',
+					"textList":[
+						{
+							"textType":'nor',
+							"text":'5、'
+						},
+						{
+							"textType":'dif',
+							"text":'虚拟资产库模块'
+						},
+						{
+							"textType":'nor',
+							"text":'：该模块为持续学习模块，是该项目的拓展与延续。在第4模块的艺术创作中，学生在个步骤中，需要进行数字场景、数字道具、数字人物等虚拟资产的创作，创作的资产会集中在虚拟资源库网站中，供师生使用学习，虚拟资产越丰富，对后续学生的虚拟艺术创作将提供极大的帮助。学生在学习实验的同时，也成为实验的建设者。'
+						}
+					]
+				},
+				{
+					"type":'text',
+					"textList":[
+						{
+							"textType":'nor',
+							"text":'本实验的教学目的是：'
+						}
+					]
+				},
+				{
+					"type":'text',
+					"textList":[
+						{
+							"textType":'nor',
+							"text":'1、掌握影视实时特效的知识原理；'
+						}
+					]
+				},
+				{
+					"type":'text',
+					"textList":[
+						{
+							"textType":'nor',
+							"text":'2、掌握影视实时特效的创作流程；'
+						}
+					]
+				},
+				{
+					"type":'text',
+					"textList":[
+						{
+							"textType":'nor',
+							"text":'3、熟悉影视实时特效的器材、搭建技术；'
+						}
+					]
+				},
+				{
+					"type":'text',
+					"textList":[
+						{
+							"textType":'nor',
+							"text":'4、提升虚拟艺术创作的审美能力及实践能力；'
+						}
+					]
+				},
+				{
+					"type":'text',
+					"textList":[
+						{
+							"textType":'nor',
+							"text":'5、通过主动参与建设，促进学生的实践学习积极性；'
+						}
+					]
+				},
+				{
+					"type":'text',
+					"textList":[
+						{
+							"textType":'nor',
+							"text":'6、实现各专业交叉融合，促进各专业师生的学习与实践交流。'
+						}
+					]
+				}
+			]
+		},
+		{
+			"title":'内容概述',
+			"content":[
+				{
+					"type":'text',
+					"textList":[
+						{
+							"textType":'nor',
+							"text":'为达成以上目的，本实验设置'
+						},
+						{
+							"textType":'dif',
+							"text":'5个模块实验内容'
+						},
+						{
+							"textType":'nor',
+							"text":'：'
+						}
+					]
+				},
+				{
+					"type":'text',
+					"textList":[
+						{
+							"textType":'nor',
+							"text":'模块一：原理认知'
+						}
+					]
+				},
+				{
+					"type":'text',
+					"textList":[
+						{
+							"textType":'nor',
+							"text":'模块二：实景勘察'
+						}
+					]
+				},
+				{
+					"type":'text',
+					"textList":[
+						{
+							"textType":'nor',
+							"text":'模块三：虚拟技术搭建'
+						}
+					]
+				},
+				{
+					"type":'text',
+					"textList":[
+						{
+							"textType":'nor',
+							"text":'模块四：虚拟艺术创作'
+						}
+					]
+				},
+				{
+					"type":'text',
+					"textList":[
+						{
+							"textType":'nor',
+							"text":'模块五：虚拟资产库'
+						}
+					]
+				}
+			]
+		},
+		{
+			"title":'实验与课程关系',
+			"content":[
+				{
+					"type":'text',
+					"textList":[
+						{
+							"textType":'nor',
+							"text":'（1）实验所属课程学时：《视觉特效》（64学时）'
+						}
+					]
+				},
+				{
+					"type":'text',
+					"textList":[
+						{
+							"textType":'nor',
+							"text":'（2）该实验项目所占课时：4学时'
+						}
+					]
+				},
+				{
+					"type":'pic',
+					"src":require("../assets/learning/pic_syjj_04.png")
+				},
+				{
+					"type":'text',
+					"textList":[
+						{
+							"textType":'nor',
+							"text":'（3）实验在课程大纲中的位置'
+						}
+					]
+				},
+				{
+					"type":'pic',
+					"src":require("../assets/learning/pic_syjj_05.png")
+				},
+				{
+					"type":'text',
+					"textList":[
+						{
+							"textType":'nor',
+							"text":'（4）实验课程所在专业方向：戏剧影视美术设计专业 场景设计方向'
+						}
+					]
+				},
+				{
+					"type":'text',
+					"textList":[
+						{
+							"textType":'nor',
+							"text":'（5）实验课程在课程体系中的位置'
+						}
+					]
+				},
+				{
+					"type":'pic',
+					"src":require("../assets/learning/pic_syjj_06.png")
+				},
+				{
+					"type":'text',
+					"textList":[
+						{
+							"textType":'nor',
+							"text":'（6）先导及后续课程：'
+						}
+					]
+				},
+				{
+					"type":'pic',
+					"src":require("../assets/learning/pic_syjj_07.png")
+				}
+			]
+		}
+	]
+}
+myData_SYJJ_SYHJYJSGJ={
+	"text":'使用环境与技术构架',
+	"page":[
+		{
+			"title":' 使用环境',
+			"content":[
+				{
+					"type":'text',
+					"textList":[
+						{
+							"textType":'nor',
+							"text":'使用硬件要求:'
+						}
+					]
+				},
+			]
+		},
+		{
+			"title":' 技术构架',
+			"content":[
+				{
+					"type":'text',
+					"textList":[
+						{
+							"textType":'nor',
+							"text":'前端、后端、数据库:、虚拟搭建软件'
+						}
+					]
+				},
+			]
+		}
+	]
+}
+myData_SYJJ_XMJJSP={
+	"text":'项目简介视频',
+	"page":[
+		{
+			"title":'',
+			"content":[
+				{
+					"type":'video',
+					"src":''
+				},
+			]
+		}
+	]
+}

myData/myData_XXYSY.js

@@ -0,0 +1,207 @@
+//type对应关系：image对应图片；video对应视频
+//学习与实验-原理认知
+myData_XXYSY_YLRZ = {
+	"text": "原理认知",
+	"content": {
+		"paragraphList":[
+			[
+				{
+					"text": '【模块介绍】',
+					"color": '#020202',
+					"fontWeight":'bold'
+				}
+			],
+			[
+				{
+					"text": '原理认知是“影视现场实时特效”的理论学习部分，该部分包括知识点学习、模块测验两个部分的内容。',
+					"color": '#020202',
+					"fontWeight":'normal'
+				}
+			],
+			[
+				{
+					"text": '【测验与得分】',
+					"color": '#020202',
+					"fontWeight":'bold'
+				}
+			],
+			[
+				{
+					"text": '该部分共20分，设有10道选择题，每道题2分。完成该部分测试后可在“测试与结果”中查看成绩，完成测试后可进入下一模块实验学习。',
+					"color": '#020202',
+					"fontWeight":'normal'
+				}
+			]
+		],
+		"src": {
+			"type":"image",
+			"list":[]
+		}
+	}
+}
+//学习与实验-实景勘察
+myData_XXYSY_SJKC = {
+	"text": "实景勘察",
+	"content": {
+		"paragraphList":[
+			[
+				{
+					"text": '【模块介绍】',
+					"color": '#020202',
+					"fontWeight":'bold'
+				}
+			],
+			[
+				{
+					"text": '实景勘察是“影视现场实时特效”的实景学习部分，该部分用360度影像将真实的影视现场实时特效摄影棚进行复现。同学们可以在其中进行环境感知、设备认知、模块测验3个部分的内容。',
+					"color": '#020202',
+					"fontWeight":'normal'
+				}
+			],
+			[
+				{
+					"text": '【测验与得分】',
+					"color": '#020202',
+					"fontWeight":'bold'
+				}
+			],
+			[
+				{
+					"text": '该部分共10分，设有5道选择题，每道题2分。完成该部分测试后可在“测试与结果”中查看成绩，完成测试后可进入下一模块实验学习。',
+					"color": '#020202',
+					"fontWeight":'normal'
+				}
+			]
+		],
+		"src": {
+			"type":"image",
+			"list":[
+				require("../assets/learning/pic_ksxx_xxysy_sjzc_01.jpg")
+			]
+		}
+	}
+}
+//学习与实验-虚拟技术搭建
+myData_XXYSY_XNJSDJ = {
+	"text": "虚拟技术搭建",
+	"content": {
+		"paragraphList":[
+			[
+				{
+					"text": '【模块介绍】',
+					"color": '#020202',
+					"fontWeight":'bold'
+				}
+			],
+			[
+				{
+					"text": '虚拟技术搭建是“影视现场实时特效”的虚拟实验部分，该部分主要解决“影视现场实时特效”的技术问题，包括影视现场实时特效系统的搭建、设备认知、设备连接3个部分的内容。',
+					"color": '#020202',
+					"fontWeight":'normal'
+				}
+			],
+			[
+				{
+					"text": '【使用方法】',
+					"color": '#020202',
+					"fontWeight":'bold'
+				}
+			],
+			[
+				{
+					"text": '该部分实验使用了UE虚幻引擎，目前需要下载客户端后运行使用。请在windows系统中运行，按照提示进行操作。',
+					"color": '#020202',
+					"fontWeight":'normal'
+				}
+			]
+			[
+				{
+					"text": '【步骤与得分】',
+					"color": '#020202',
+					"fontWeight":'bold'
+				}
+			],
+			[
+				{
+					"text": '该部分共20分，设有10个实验步骤，每个步骤2分。完成该部分实验后可在“实验结果”中查看成绩，完成后可进入下一模块实验学习。',
+					"color": '#020202',
+					"fontWeight":'normal'
+				}
+			]
+		],
+		"src": {
+			"type":"image",
+			"list":[
+				require("../assets/learning/pic_ksxx_xxysy_xnjsdj_01.jpg")
+			]
+		}
+	}
+}
+//学习与实验-虚拟艺术创作
+myData_XXYSY_XNYSZZ = {
+	"text": "虚拟艺术创作",
+	"content": {
+		"paragraphList":[
+			[
+				{
+					"text": '【模块介绍】',
+					"color": '#020202',
+					"fontWeight":'bold'
+				}
+			],
+			[
+				{
+					"text": '虚拟艺术创作是“影视现场实时特效”的虚拟实验部分，该部分主要解决“影视现场实时特效”的艺术实践问题。该部分以项目为核心，各专业以职务为角色，通过高保真模拟影视剧组的创作流程，使同学们沉浸式“进组”实践。',
+					"color": '#020202',
+					"fontWeight":'normal'
+				}
+			],
+			[
+				{
+					"text": '【使用方法】',
+					"color": '#020202',
+					"fontWeight":'bold'
+				}
+			],
+			[
+				{
+					"text": '该部分实验使用了UE虚幻引擎，目前需要下载客户端后运行使用。请在windows系统中运行，按照提示进行操作。',
+					"color": '#020202',
+					"fontWeight":'normal'
+				}
+			]
+			[
+				{
+					"text": '【步骤与得分】',
+					"color": '#020202',
+					"fontWeight":'bold'
+				}
+			],
+			[
+				{
+					"text": '该部分共30分，设有15个实验步骤，每个步骤2分。完成该部分实验后可在“实验结果”中查看成绩，完成后可进入下一模块实验学习。',
+					"color": '#020202',
+					"fontWeight":'normal'
+				}
+			]
+		],
+		"src": {
+			"type":"image",
+			"list":[
+				require("../assets/learning/pic_ksxx_xxysy_xnyszz_01.jpg")
+			]
+		}
+	}
+}
+//学习与实验-虚拟资源库建设
+myData_XXYSY_XNZYKJS = {
+	"text": "虚拟资源库建设",
+	"content": {
+		"paragraphList":[],
+		"src": {
+			"type":"image",
+			"list":[]
+		}
+	}
+}
+

myData/myData_XXYSY_YLRZ.js

@@ -0,0 +1,115 @@
+// 原理认知-知识点 
+YLRZ_ZSD_01={
+	"text":'课程地图及知识点位置',
+	"content":[
+		{
+			"type":'title',
+			"details":'课程地图及知识点位置'
+		},
+		{
+			"type":'pic',
+			"src":require("../assets/learning/pic_ksxx_xxysy_ylrz_zsd_01.png")
+		}
+	]
+}
+YLRZ_ZSD_02={
+	"text":'知识点：虚拟纸片流程',
+	"content":[
+		{
+			"type":'title',
+			"details":'虚拟纸片流程'
+		},
+		{
+			"type":'text',
+			"details":'(英语:Unreal Engine)是一款由Epic Games开发的渲染引擎。其最初用 于游戏领域。伴随虚拟引擎在实时渲染质量上逐渐接近影视级艺术质 量，虚拟引擎已经开始运用于影视领域，并在虚拟制片这一虚拟化创作 流程中产生核心作用。'
+		},
+		{
+			"type":'pic',
+			"src":require("../assets/learning/pic_ksxx_xxysy_ylrz_zsd_02.png")
+		},
+		{
+			"type":'space'
+		},
+		{
+			"type":'title',
+			"details":'虚拟制片与传统制片比较'
+		},
+		{
+			"type":'text',
+			"details":'从对比中可见: 前、中、后期的时间成本和资金成本占比不同。 虚拟创作与现实创作的占比不同。 适用影片类型不同。'
+		},
+		{
+			"type":'pic',
+			"src":require("../assets/learning/pic_ksxx_xxysy_ylrz_zsd_03.png")
+		},
+		{
+			"type":'pic',
+			"src":require("../assets/learning/pic_ksxx_xxysy_ylrz_zsd_04.png")
+		},
+		{
+			"type":'space'
+		},
+		{
+			"type":'title',
+			"details":'虚拟制片类型'
+		},
+	]
+}
+YLRZ_ZSD_03={
+	"text":'知识点：虚拟引擎',
+	"content":[
+		{
+			"type":'title',
+			"details":'什么是虚幻引擎？'
+		},
+		{
+			"type":'text',
+			"details":'（英语：Unreal Engine）是一款由Epic Games开发的渲染引擎。其最初用于游戏领域。伴随虚拟引擎在实时渲染质量上逐渐接近影视级艺术质量，虚拟引擎已经开始运用于影视领域，并在虚拟制片这一虚拟化创作流程中产生核心作用。'
+		},
+		{
+			"type":'space'
+		},
+		{
+			"type":'title',
+			"details":'应用领域'
+		},
+	]
+}
+YLRZ_ZSD_04={
+	"text":'知识点：影视现场实时特效',
+	"content":[
+		{
+			"type":'title',
+			"details":'概念'
+		},
+		{
+			"type":'text',
+			"details":'影视现场实时特效是虚拟制片的一种影视创作流程与创作技术，处于虚 拟制片前、中、后期中的中期现场创作环节，与虚拟制片的前期艺术设 计、虚拟制作联系尤为密切。影视现场实时特效的核心是通过实时渲 染、数据跟踪、CG制作等核心技术，在影视拍摄现场实现虚拟创作与现 实创作的实时同步与实时协作，并在现场呈现影像最终效果。除现场摄 制以外，影视现场实时特效还包括前期虚拟艺术(数字制景、数字道 具、数字角色)的再创作和后期处理(合成、调色)的现场创作。'
+		},
+		{
+			"type":'space'
+		},
+		{
+			"type":'title',
+			"details":'技术优势'
+		},
+		{
+			"type":'text',
+			"details":'使原有非现场部门与现场部门共同在现场创作，实现实时创作 使原有前、中、后期相对割裂的创作共处于同一时空中，有效提升协作 创新 解决了在传统绿幕现场中导演、表演无法沉浸感受场景气氛，摄影、美 术无法现场取景构图，前期资产创作浪费与后期制作周期等问题'
+		},
+		{
+			"type":'space'
+		},
+		{
+			"type":'title',
+			"details":'系统构成'
+		},
+		{
+			"type":'space'
+		},
+		{
+			"type":'title',
+			"details":'工作原理'
+		},
+	]
+}

package-lock.json

@@ -0,0 +1,1660 @@
+{
+  "requires": true,
+  "lockfileVersion": 1,
+  "dependencies": {
+    "abbrev": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
+      "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
+      "dev": true
+    },
+    "ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dev": true,
+      "requires": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      }
+    },
+    "amdefine": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npm.taobao.org/amdefine/download/amdefine-1.0.1.tgz",
+      "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=",
+      "dev": true
+    },
+    "ansi-regex": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npm.taobao.org/ansi-regex/download/ansi-regex-2.1.1.tgz",
+      "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
+      "dev": true
+    },
+    "ansi-styles": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npm.taobao.org/ansi-styles/download/ansi-styles-2.2.1.tgz?cache=0&sync_timestamp=1611326384145&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fansi-styles%2Fdownload%2Fansi-styles-2.2.1.tgz",
+      "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
+      "dev": true
+    },
+    "aproba": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz",
+      "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==",
+      "dev": true
+    },
+    "are-we-there-yet": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz",
+      "integrity": "sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==",
+      "dev": true,
+      "requires": {
+        "delegates": "^1.0.0",
+        "readable-stream": "^2.0.6"
+      }
+    },
+    "array-find-index": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npm.taobao.org/array-find-index/download/array-find-index-1.0.2.tgz",
+      "integrity": "sha1-3wEKoSh+Fku9pvlyOwqWoexBh6E=",
+      "dev": true
+    },
+    "asn1": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.4.tgz",
+      "integrity": "sha512-jxwzQpLQjSmWXgwaCZE9Nz+glAG01yF1QnWgbhGwHI5A6FRIEY6IVqtHhIepHqI7/kyEyQEagBC5mBEFlIYvdg==",
+      "dev": true,
+      "requires": {
+        "safer-buffer": "~2.1.0"
+      }
+    },
+    "assert-plus": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npm.taobao.org/assert-plus/download/assert-plus-1.0.0.tgz",
+      "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=",
+      "dev": true
+    },
+    "async-foreach": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npm.taobao.org/async-foreach/download/async-foreach-0.1.3.tgz",
+      "integrity": "sha1-NhIfhFwFeBct5Bmpfb6x0W7DRUI=",
+      "dev": true
+    },
+    "asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npm.taobao.org/asynckit/download/asynckit-0.4.0.tgz",
+      "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=",
+      "dev": true
+    },
+    "aws-sign2": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npm.taobao.org/aws-sign2/download/aws-sign2-0.7.0.tgz",
+      "integrity": "sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg=",
+      "dev": true
+    },
+    "aws4": {
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.11.0.tgz",
+      "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==",
+      "dev": true
+    },
+    "balanced-match": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npm.taobao.org/balanced-match/download/balanced-match-1.0.0.tgz",
+      "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
+      "dev": true
+    },
+    "bcrypt-pbkdf": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npm.taobao.org/bcrypt-pbkdf/download/bcrypt-pbkdf-1.0.2.tgz",
+      "integrity": "sha1-pDAdOJtqQ/m2f/PKEaP2Y342Dp4=",
+      "dev": true,
+      "requires": {
+        "tweetnacl": "^0.14.3"
+      }
+    },
+    "brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
+      "requires": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "camelcase": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npm.taobao.org/camelcase/download/camelcase-2.1.1.tgz",
+      "integrity": "sha1-fB0W1nmhu+WcoCys7PsBHiAfWh8=",
+      "dev": true
+    },
+    "camelcase-keys": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npm.taobao.org/camelcase-keys/download/camelcase-keys-2.1.0.tgz",
+      "integrity": "sha1-MIvur/3ygRkFHvodkyITyRuPkuc=",
+      "dev": true,
+      "requires": {
+        "camelcase": "^2.0.0",
+        "map-obj": "^1.0.0"
+      }
+    },
+    "caseless": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npm.taobao.org/caseless/download/caseless-0.12.0.tgz",
+      "integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=",
+      "dev": true
+    },
+    "chalk": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npm.taobao.org/chalk/download/chalk-1.1.3.tgz?cache=0&sync_timestamp=1591687042638&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fchalk%2Fdownload%2Fchalk-1.1.3.tgz",
+      "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
+      "dev": true,
+      "requires": {
+        "ansi-styles": "^2.2.1",
+        "escape-string-regexp": "^1.0.2",
+        "has-ansi": "^2.0.0",
+        "strip-ansi": "^3.0.0",
+        "supports-color": "^2.0.0"
+      }
+    },
+    "chownr": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
+      "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==",
+      "dev": true
+    },
+    "cliui": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz",
+      "integrity": "sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==",
+      "dev": true,
+      "requires": {
+        "string-width": "^3.1.0",
+        "strip-ansi": "^5.2.0",
+        "wrap-ansi": "^5.1.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
+          "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
+          "dev": true
+        },
+        "is-fullwidth-code-point": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npm.taobao.org/is-fullwidth-code-point/download/is-fullwidth-code-point-2.0.0.tgz",
+          "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
+          "dev": true
+        },
+        "string-width": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
+          "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
+          "dev": true,
+          "requires": {
+            "emoji-regex": "^7.0.1",
+            "is-fullwidth-code-point": "^2.0.0",
+            "strip-ansi": "^5.1.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+          "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^4.1.0"
+          }
+        }
+      }
+    },
+    "code-point-at": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npm.taobao.org/code-point-at/download/code-point-at-1.1.0.tgz",
+      "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
+      "dev": true
+    },
+    "color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "dev": true,
+      "requires": {
+        "color-name": "1.1.3"
+      }
+    },
+    "color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npm.taobao.org/color-name/download/color-name-1.1.3.tgz",
+      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
+      "dev": true
+    },
+    "combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dev": true,
+      "requires": {
+        "delayed-stream": "~1.0.0"
+      }
+    },
+    "concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npm.taobao.org/concat-map/download/concat-map-0.0.1.tgz",
+      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
+      "dev": true
+    },
+    "console-control-strings": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npm.taobao.org/console-control-strings/download/console-control-strings-1.1.0.tgz",
+      "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
+      "dev": true
+    },
+    "core-util-is": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npm.taobao.org/core-util-is/download/core-util-is-1.0.2.tgz",
+      "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
+      "dev": true
+    },
+    "cross-spawn": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+      "dev": true,
+      "requires": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      }
+    },
+    "currently-unhandled": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npm.taobao.org/currently-unhandled/download/currently-unhandled-0.4.1.tgz",
+      "integrity": "sha1-mI3zP+qxke95mmE2nddsF635V+o=",
+      "dev": true,
+      "requires": {
+        "array-find-index": "^1.0.1"
+      }
+    },
+    "dashdash": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npm.taobao.org/dashdash/download/dashdash-1.14.1.tgz",
+      "integrity": "sha1-hTz6D3y+L+1d4gMmuN1YEDX24vA=",
+      "dev": true,
+      "requires": {
+        "assert-plus": "^1.0.0"
+      }
+    },
+    "decamelize": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npm.taobao.org/decamelize/download/decamelize-1.2.0.tgz?cache=0&sync_timestamp=1610348654744&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdecamelize%2Fdownload%2Fdecamelize-1.2.0.tgz",
+      "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=",
+      "dev": true
+    },
+    "delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npm.taobao.org/delayed-stream/download/delayed-stream-1.0.0.tgz",
+      "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=",
+      "dev": true
+    },
+    "delegates": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npm.taobao.org/delegates/download/delegates-1.0.0.tgz",
+      "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=",
+      "dev": true
+    },
+    "ecc-jsbn": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npm.taobao.org/ecc-jsbn/download/ecc-jsbn-0.1.2.tgz",
+      "integrity": "sha1-OoOpBOVDUyh4dMVkt1SThoSamMk=",
+      "dev": true,
+      "requires": {
+        "jsbn": "~0.1.0",
+        "safer-buffer": "^2.1.0"
+      }
+    },
+    "emoji-regex": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz",
+      "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==",
+      "dev": true
+    },
+    "env-paths": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.0.tgz",
+      "integrity": "sha512-6u0VYSCo/OW6IoD5WCLLy9JUGARbamfSavcNXry/eu8aHVFei6CD3Sw+VGX5alea1i9pgPHW0mbu6Xj0uBh7gA==",
+      "dev": true
+    },
+    "error-ex": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
+      "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
+      "dev": true,
+      "requires": {
+        "is-arrayish": "^0.2.1"
+      }
+    },
+    "escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npm.taobao.org/escape-string-regexp/download/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
+      "dev": true
+    },
+    "extend": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
+      "dev": true
+    },
+    "extsprintf": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npm.taobao.org/extsprintf/download/extsprintf-1.3.0.tgz",
+      "integrity": "sha1-lpGEQOMEGnpBT4xS48V06zw+HgU=",
+      "dev": true
+    },
+    "fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "dev": true
+    },
+    "fast-json-stable-stringify": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
+      "dev": true
+    },
+    "find-up": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npm.taobao.org/find-up/download/find-up-1.1.2.tgz",
+      "integrity": "sha1-ay6YIrGizgpgq2TWEOzK1TyyTQ8=",
+      "dev": true,
+      "requires": {
+        "path-exists": "^2.0.0",
+        "pinkie-promise": "^2.0.0"
+      }
+    },
+    "forever-agent": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npm.taobao.org/forever-agent/download/forever-agent-0.6.1.tgz",
+      "integrity": "sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=",
+      "dev": true
+    },
+    "form-data": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.3.tgz",
+      "integrity": "sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==",
+      "dev": true,
+      "requires": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.6",
+        "mime-types": "^2.1.12"
+      }
+    },
+    "fs-minipass": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz",
+      "integrity": "sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==",
+      "dev": true,
+      "requires": {
+        "minipass": "^3.0.0"
+      }
+    },
+    "fs.realpath": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npm.taobao.org/fs.realpath/download/fs.realpath-1.0.0.tgz",
+      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
+      "dev": true
+    },
+    "function-bind": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
+      "dev": true
+    },
+    "gauge": {
+      "version": "2.7.4",
+      "resolved": "https://registry.npm.taobao.org/gauge/download/gauge-2.7.4.tgz",
+      "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=",
+      "dev": true,
+      "requires": {
+        "aproba": "^1.0.3",
+        "console-control-strings": "^1.0.0",
+        "has-unicode": "^2.0.0",
+        "object-assign": "^4.1.0",
+        "signal-exit": "^3.0.0",
+        "string-width": "^1.0.1",
+        "strip-ansi": "^3.0.1",
+        "wide-align": "^1.1.0"
+      }
+    },
+    "gaze": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/gaze/-/gaze-1.1.3.tgz",
+      "integrity": "sha512-BRdNm8hbWzFzWHERTrejLqwHDfS4GibPoq5wjTPIoJHoBtKGPg3xAFfxmM+9ztbXelxcf2hwQcaz1PtmFeue8g==",
+      "dev": true,
+      "requires": {
+        "globule": "^1.0.0"
+      }
+    },
+    "get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "dev": true
+    },
+    "get-stdin": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npm.taobao.org/get-stdin/download/get-stdin-4.0.1.tgz",
+      "integrity": "sha1-uWjGsKBDhDJJAui/Gl3zJXmkUP4=",
+      "dev": true
+    },
+    "getpass": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npm.taobao.org/getpass/download/getpass-0.1.7.tgz",
+      "integrity": "sha1-Xv+OPmhNVprkyysSgmBOi6YhSfo=",
+      "dev": true,
+      "requires": {
+        "assert-plus": "^1.0.0"
+      }
+    },
+    "glob": {
+      "version": "7.1.6",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
+      "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==",
+      "dev": true,
+      "requires": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.0.4",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      }
+    },
+    "globule": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/globule/-/globule-1.3.2.tgz",
+      "integrity": "sha512-7IDTQTIu2xzXkT+6mlluidnWo+BypnbSoEVVQCGfzqnl5Ik8d3e1d4wycb8Rj9tWW+Z39uPWsdlquqiqPCd/pA==",
+      "dev": true,
+      "requires": {
+        "glob": "~7.1.1",
+        "lodash": "~4.17.10",
+        "minimatch": "~3.0.2"
+      }
+    },
+    "graceful-fs": {
+      "version": "4.2.6",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.6.tgz",
+      "integrity": "sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ==",
+      "dev": true
+    },
+    "har-schema": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npm.taobao.org/har-schema/download/har-schema-2.0.0.tgz",
+      "integrity": "sha1-qUwiJOvKwEeCoNkDVSHyRzW37JI=",
+      "dev": true
+    },
+    "har-validator": {
+      "version": "5.1.5",
+      "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-5.1.5.tgz",
+      "integrity": "sha512-nmT2T0lljbxdQZfspsno9hgrG3Uir6Ks5afism62poxqBM6sDnMEuPmzTq8XN0OEwqKLLdh1jQI3qyE66Nzb3w==",
+      "dev": true,
+      "requires": {
+        "ajv": "^6.12.3",
+        "har-schema": "^2.0.0"
+      }
+    },
+    "has": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
+      "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
+      "dev": true,
+      "requires": {
+        "function-bind": "^1.1.1"
+      }
+    },
+    "has-ansi": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npm.taobao.org/has-ansi/download/has-ansi-2.0.0.tgz",
+      "integrity": "sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=",
+      "dev": true,
+      "requires": {
+        "ansi-regex": "^2.0.0"
+      }
+    },
+    "has-unicode": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npm.taobao.org/has-unicode/download/has-unicode-2.0.1.tgz",
+      "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=",
+      "dev": true
+    },
+    "hosted-git-info": {
+      "version": "2.8.8",
+      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.8.tgz",
+      "integrity": "sha512-f/wzC2QaWBs7t9IYqB4T3sR1xviIViXJRJTWBlx2Gf3g0Xi5vI7Yy4koXQ1c9OYDGHN9sBy1DQ2AB8fqZBWhUg==",
+      "dev": true
+    },
+    "http-signature": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npm.taobao.org/http-signature/download/http-signature-1.2.0.tgz?cache=0&sync_timestamp=1600868483922&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fhttp-signature%2Fdownload%2Fhttp-signature-1.2.0.tgz",
+      "integrity": "sha1-muzZJRFHcvPZW2WmCruPfBj7rOE=",
+      "dev": true,
+      "requires": {
+        "assert-plus": "^1.0.0",
+        "jsprim": "^1.2.2",
+        "sshpk": "^1.7.0"
+      }
+    },
+    "indent-string": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npm.taobao.org/indent-string/download/indent-string-2.1.0.tgz",
+      "integrity": "sha1-ji1INIdCEhtKghi3oTfppSBJ3IA=",
+      "dev": true,
+      "requires": {
+        "repeating": "^2.0.0"
+      }
+    },
+    "inflight": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npm.taobao.org/inflight/download/inflight-1.0.6.tgz",
+      "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
+      "dev": true,
+      "requires": {
+        "once": "^1.3.0",
+        "wrappy": "1"
+      }
+    },
+    "inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "dev": true
+    },
+    "is-arrayish": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npm.taobao.org/is-arrayish/download/is-arrayish-0.2.1.tgz",
+      "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=",
+      "dev": true
+    },
+    "is-core-module": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.2.0.tgz",
+      "integrity": "sha512-XRAfAdyyY5F5cOXn7hYQDqh2Xmii+DEfIcQGxK/uNwMHhIkPWO0g8msXcbzLe+MpGoR951MlqM/2iIlU4vKDdQ==",
+      "dev": true,
+      "requires": {
+        "has": "^1.0.3"
+      }
+    },
+    "is-finite": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-finite/-/is-finite-1.1.0.tgz",
+      "integrity": "sha512-cdyMtqX/BOqqNBBiKlIVkytNHm49MtMlYyn1zxzvJKWmFMlGzm+ry5BBfYyeY9YmNKbRSo/o7OX9w9ale0wg3w==",
+      "dev": true
+    },
+    "is-fullwidth-code-point": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npm.taobao.org/is-fullwidth-code-point/download/is-fullwidth-code-point-1.0.0.tgz",
+      "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
+      "dev": true,
+      "requires": {
+        "number-is-nan": "^1.0.0"
+      }
+    },
+    "is-typedarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npm.taobao.org/is-typedarray/download/is-typedarray-1.0.0.tgz",
+      "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=",
+      "dev": true
+    },
+    "is-utf8": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npm.taobao.org/is-utf8/download/is-utf8-0.2.1.tgz",
+      "integrity": "sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI=",
+      "dev": true
+    },
+    "isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npm.taobao.org/isarray/download/isarray-1.0.0.tgz",
+      "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
+      "dev": true
+    },
+    "isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npm.taobao.org/isexe/download/isexe-2.0.0.tgz",
+      "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=",
+      "dev": true
+    },
+    "isstream": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npm.taobao.org/isstream/download/isstream-0.1.2.tgz",
+      "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=",
+      "dev": true
+    },
+    "js-base64": {
+      "version": "2.6.4",
+      "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.6.4.tgz",
+      "integrity": "sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ==",
+      "dev": true
+    },
+    "jsbn": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npm.taobao.org/jsbn/download/jsbn-0.1.1.tgz",
+      "integrity": "sha1-peZUwuWi3rXyAdls77yoDA7y9RM=",
+      "dev": true
+    },
+    "json-schema": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npm.taobao.org/json-schema/download/json-schema-0.2.3.tgz",
+      "integrity": "sha1-tIDIkuWaLwWVTOcnvT8qTogvnhM=",
+      "dev": true
+    },
+    "json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "dev": true
+    },
+    "json-stringify-safe": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npm.taobao.org/json-stringify-safe/download/json-stringify-safe-5.0.1.tgz",
+      "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=",
+      "dev": true
+    },
+    "jsprim": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npm.taobao.org/jsprim/download/jsprim-1.4.1.tgz",
+      "integrity": "sha1-MT5mvB5cwG5Di8G3SZwuXFastqI=",
+      "dev": true,
+      "requires": {
+        "assert-plus": "1.0.0",
+        "extsprintf": "1.3.0",
+        "json-schema": "0.2.3",
+        "verror": "1.10.0"
+      }
+    },
+    "klona": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/klona/-/klona-2.0.4.tgz",
+      "integrity": "sha512-ZRbnvdg/NxqzC7L9Uyqzf4psi1OM4Cuc+sJAkQPjO6XkQIJTNbfK2Rsmbw8fx1p2mkZdp2FZYo2+LwXYY/uwIA==",
+      "dev": true
+    },
+    "load-json-file": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npm.taobao.org/load-json-file/download/load-json-file-1.1.0.tgz",
+      "integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=",
+      "dev": true,
+      "requires": {
+        "graceful-fs": "^4.1.2",
+        "parse-json": "^2.2.0",
+        "pify": "^2.0.0",
+        "pinkie-promise": "^2.0.0",
+        "strip-bom": "^2.0.0"
+      }
+    },
+    "locate-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
+      "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
+      "dev": true,
+      "requires": {
+        "p-locate": "^3.0.0",
+        "path-exists": "^3.0.0"
+      },
+      "dependencies": {
+        "path-exists": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npm.taobao.org/path-exists/download/path-exists-3.0.0.tgz",
+          "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=",
+          "dev": true
+        }
+      }
+    },
+    "lodash": {
+      "version": "4.17.20",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz",
+      "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==",
+      "dev": true
+    },
+    "loud-rejection": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npm.taobao.org/loud-rejection/download/loud-rejection-1.6.0.tgz",
+      "integrity": "sha1-W0b4AUft7leIcPCG0Eghz5mOVR8=",
+      "dev": true,
+      "requires": {
+        "currently-unhandled": "^0.4.1",
+        "signal-exit": "^3.0.0"
+      }
+    },
+    "lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "dev": true,
+      "requires": {
+        "yallist": "^4.0.0"
+      }
+    },
+    "map-obj": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npm.taobao.org/map-obj/download/map-obj-1.0.1.tgz",
+      "integrity": "sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0=",
+      "dev": true
+    },
+    "meow": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npm.taobao.org/meow/download/meow-3.7.0.tgz?cache=0&sync_timestamp=1610076688698&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fmeow%2Fdownload%2Fmeow-3.7.0.tgz",
+      "integrity": "sha1-cstmi0JSKCkKu/qFaJJYcwioAfs=",
+      "dev": true,
+      "requires": {
+        "camelcase-keys": "^2.0.0",
+        "decamelize": "^1.1.2",
+        "loud-rejection": "^1.0.0",
+        "map-obj": "^1.0.1",
+        "minimist": "^1.1.3",
+        "normalize-package-data": "^2.3.4",
+        "object-assign": "^4.0.1",
+        "read-pkg-up": "^1.0.1",
+        "redent": "^1.0.0",
+        "trim-newlines": "^1.0.0"
+      }
+    },
+    "mime-db": {
+      "version": "1.45.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.45.0.tgz",
+      "integrity": "sha512-CkqLUxUk15hofLoLyljJSrukZi8mAtgd+yE5uO4tqRZsdsAJKv0O+rFMhVDRJgozy+yG6md5KwuXhD4ocIoP+w==",
+      "dev": true
+    },
+    "mime-types": {
+      "version": "2.1.28",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.28.tgz",
+      "integrity": "sha512-0TO2yJ5YHYr7M2zzT7gDU1tbwHxEUWBCLt0lscSNpcdAfFyJOVEpRYNS7EXVcTLNj/25QO8gulHC5JtTzSE2UQ==",
+      "dev": true,
+      "requires": {
+        "mime-db": "1.45.0"
+      }
+    },
+    "minimatch": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
+      "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
+      "dev": true,
+      "requires": {
+        "brace-expansion": "^1.1.7"
+      }
+    },
+    "minimist": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
+      "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
+      "dev": true
+    },
+    "minipass": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.1.3.tgz",
+      "integrity": "sha512-Mgd2GdMVzY+x3IJ+oHnVM+KG3lA5c8tnabyJKmHSaG2kAGpudxuOf8ToDkhumF7UzME7DecbQE9uOZhNm7PuJg==",
+      "dev": true,
+      "requires": {
+        "yallist": "^4.0.0"
+      }
+    },
+    "minizlib": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-2.1.2.tgz",
+      "integrity": "sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==",
+      "dev": true,
+      "requires": {
+        "minipass": "^3.0.0",
+        "yallist": "^4.0.0"
+      }
+    },
+    "mkdirp": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz",
+      "integrity": "sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==",
+      "dev": true,
+      "requires": {
+        "minimist": "^1.2.5"
+      }
+    },
+    "nan": {
+      "version": "2.14.2",
+      "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.2.tgz",
+      "integrity": "sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ==",
+      "dev": true
+    },
+    "neo-async": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
+      "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
+      "dev": true
+    },
+    "node-gyp": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-7.1.2.tgz",
+      "integrity": "sha512-CbpcIo7C3eMu3dL1c3d0xw449fHIGALIJsRP4DDPHpyiW8vcriNY7ubh9TE4zEKfSxscY7PjeFnshE7h75ynjQ==",
+      "dev": true,
+      "requires": {
+        "env-paths": "^2.2.0",
+        "glob": "^7.1.4",
+        "graceful-fs": "^4.2.3",
+        "nopt": "^5.0.0",
+        "npmlog": "^4.1.2",
+        "request": "^2.88.2",
+        "rimraf": "^3.0.2",
+        "semver": "^7.3.2",
+        "tar": "^6.0.2",
+        "which": "^2.0.2"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "7.3.4",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.4.tgz",
+          "integrity": "sha512-tCfb2WLjqFAtXn4KEdxIhalnRtoKFN7nAwj0B3ZXCbQloV2tq5eDbcTmT68JJD3nRJq24/XgxtQKFIpQdtvmVw==",
+          "dev": true,
+          "requires": {
+            "lru-cache": "^6.0.0"
+          }
+        }
+      }
+    },
+    "node-sass": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-5.0.0.tgz",
+      "integrity": "sha512-opNgmlu83ZCF792U281Ry7tak9IbVC+AKnXGovcQ8LG8wFaJv6cLnRlc6DIHlmNxWEexB5bZxi9SZ9JyUuOYjw==",
+      "dev": true,
+      "requires": {
+        "async-foreach": "^0.1.3",
+        "chalk": "^1.1.1",
+        "cross-spawn": "^7.0.3",
+        "gaze": "^1.0.0",
+        "get-stdin": "^4.0.1",
+        "glob": "^7.0.3",
+        "lodash": "^4.17.15",
+        "meow": "^3.7.0",
+        "mkdirp": "^0.5.1",
+        "nan": "^2.13.2",
+        "node-gyp": "^7.1.0",
+        "npmlog": "^4.0.0",
+        "request": "^2.88.0",
+        "sass-graph": "2.2.5",
+        "stdout-stream": "^1.4.0",
+        "true-case-path": "^1.0.2"
+      }
+    },
+    "nopt": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/nopt/-/nopt-5.0.0.tgz",
+      "integrity": "sha512-Tbj67rffqceeLpcRXrT7vKAN8CwfPeIBgM7E6iBkmKLV7bEMwpGgYLGv0jACUsECaa/vuxP0IjEont6umdMgtQ==",
+      "dev": true,
+      "requires": {
+        "abbrev": "1"
+      }
+    },
+    "normalize-package-data": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz",
+      "integrity": "sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==",
+      "dev": true,
+      "requires": {
+        "hosted-git-info": "^2.1.4",
+        "resolve": "^1.10.0",
+        "semver": "2 || 3 || 4 || 5",
+        "validate-npm-package-license": "^3.0.1"
+      }
+    },
+    "npmlog": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz",
+      "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==",
+      "dev": true,
+      "requires": {
+        "are-we-there-yet": "~1.1.2",
+        "console-control-strings": "~1.1.0",
+        "gauge": "~2.7.3",
+        "set-blocking": "~2.0.0"
+      }
+    },
+    "number-is-nan": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npm.taobao.org/number-is-nan/download/number-is-nan-1.0.1.tgz",
+      "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
+      "dev": true
+    },
+    "oauth-sign": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.9.0.tgz",
+      "integrity": "sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==",
+      "dev": true
+    },
+    "object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npm.taobao.org/object-assign/download/object-assign-4.1.1.tgz",
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
+      "dev": true
+    },
+    "once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npm.taobao.org/once/download/once-1.4.0.tgz",
+      "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
+      "dev": true,
+      "requires": {
+        "wrappy": "1"
+      }
+    },
+    "p-limit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "dev": true,
+      "requires": {
+        "p-try": "^2.0.0"
+      }
+    },
+    "p-locate": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
+      "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
+      "dev": true,
+      "requires": {
+        "p-limit": "^2.0.0"
+      }
+    },
+    "p-try": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+      "dev": true
+    },
+    "parse-json": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npm.taobao.org/parse-json/download/parse-json-2.2.0.tgz?cache=0&sync_timestamp=1610966642419&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fparse-json%2Fdownload%2Fparse-json-2.2.0.tgz",
+      "integrity": "sha1-9ID0BDTvgHQfhGkJn43qGPVaTck=",
+      "dev": true,
+      "requires": {
+        "error-ex": "^1.2.0"
+      }
+    },
+    "path-exists": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npm.taobao.org/path-exists/download/path-exists-2.1.0.tgz",
+      "integrity": "sha1-D+tsZPD8UY2adU3V77YscCJ2H0s=",
+      "dev": true,
+      "requires": {
+        "pinkie-promise": "^2.0.0"
+      }
+    },
+    "path-is-absolute": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npm.taobao.org/path-is-absolute/download/path-is-absolute-1.0.1.tgz",
+      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
+      "dev": true
+    },
+    "path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "dev": true
+    },
+    "path-parse": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz",
+      "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==",
+      "dev": true
+    },
+    "path-type": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npm.taobao.org/path-type/download/path-type-1.1.0.tgz",
+      "integrity": "sha1-WcRPfuSR2nBNpBXaWkBwuk+P5EE=",
+      "dev": true,
+      "requires": {
+        "graceful-fs": "^4.1.2",
+        "pify": "^2.0.0",
+        "pinkie-promise": "^2.0.0"
+      }
+    },
+    "performance-now": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npm.taobao.org/performance-now/download/performance-now-2.1.0.tgz",
+      "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=",
+      "dev": true
+    },
+    "pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npm.taobao.org/pify/download/pify-2.3.0.tgz",
+      "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
+      "dev": true
+    },
+    "pinkie": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npm.taobao.org/pinkie/download/pinkie-2.0.4.tgz",
+      "integrity": "sha1-clVrgM+g1IqXToDnckjoDtT3+HA=",
+      "dev": true
+    },
+    "pinkie-promise": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npm.taobao.org/pinkie-promise/download/pinkie-promise-2.0.1.tgz",
+      "integrity": "sha1-ITXW36ejWMBprJsXh3YogihFD/o=",
+      "dev": true,
+      "requires": {
+        "pinkie": "^2.0.0"
+      }
+    },
+    "process-nextick-args": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
+      "dev": true
+    },
+    "psl": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/psl/-/psl-1.8.0.tgz",
+      "integrity": "sha512-RIdOzyoavK+hA18OGGWDqUTsCLhtA7IcZ/6NCs4fFJaHBDab+pDDmDIByWFRQJq2Cd7r1OoQxBGKOaztq+hjIQ==",
+      "dev": true
+    },
+    "punycode": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
+      "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
+      "dev": true
+    },
+    "qs": {
+      "version": "6.5.2",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",
+      "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==",
+      "dev": true
+    },
+    "read-pkg": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npm.taobao.org/read-pkg/download/read-pkg-1.1.0.tgz",
+      "integrity": "sha1-9f+qXs0pyzHAR0vKfXVra7KePyg=",
+      "dev": true,
+      "requires": {
+        "load-json-file": "^1.0.0",
+        "normalize-package-data": "^2.3.2",
+        "path-type": "^1.0.0"
+      }
+    },
+    "read-pkg-up": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npm.taobao.org/read-pkg-up/download/read-pkg-up-1.0.1.tgz",
+      "integrity": "sha1-nWPBMnbAZZGNV/ACpX9AobZD+wI=",
+      "dev": true,
+      "requires": {
+        "find-up": "^1.0.0",
+        "read-pkg": "^1.0.0"
+      }
+    },
+    "readable-stream": {
+      "version": "2.3.7",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
+      "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
+      "dev": true,
+      "requires": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "redent": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npm.taobao.org/redent/download/redent-1.0.0.tgz",
+      "integrity": "sha1-z5Fqsf1fHxbfsggi3W7H9zDCr94=",
+      "dev": true,
+      "requires": {
+        "indent-string": "^2.1.0",
+        "strip-indent": "^1.0.1"
+      }
+    },
+    "repeating": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npm.taobao.org/repeating/download/repeating-2.0.1.tgz",
+      "integrity": "sha1-UhTFOpJtNVJwdSf7q0FdvAjQbdo=",
+      "dev": true,
+      "requires": {
+        "is-finite": "^1.0.0"
+      }
+    },
+    "request": {
+      "version": "2.88.2",
+      "resolved": "https://registry.npmjs.org/request/-/request-2.88.2.tgz",
+      "integrity": "sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==",
+      "dev": true,
+      "requires": {
+        "aws-sign2": "~0.7.0",
+        "aws4": "^1.8.0",
+        "caseless": "~0.12.0",
+        "combined-stream": "~1.0.6",
+        "extend": "~3.0.2",
+        "forever-agent": "~0.6.1",
+        "form-data": "~2.3.2",
+        "har-validator": "~5.1.3",
+        "http-signature": "~1.2.0",
+        "is-typedarray": "~1.0.0",
+        "isstream": "~0.1.2",
+        "json-stringify-safe": "~5.0.1",
+        "mime-types": "~2.1.19",
+        "oauth-sign": "~0.9.0",
+        "performance-now": "^2.1.0",
+        "qs": "~6.5.2",
+        "safe-buffer": "^5.1.2",
+        "tough-cookie": "~2.5.0",
+        "tunnel-agent": "^0.6.0",
+        "uuid": "^3.3.2"
+      }
+    },
+    "require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npm.taobao.org/require-directory/download/require-directory-2.1.1.tgz",
+      "integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I=",
+      "dev": true
+    },
+    "require-main-filename": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
+      "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==",
+      "dev": true
+    },
+    "resolve": {
+      "version": "1.20.0",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
+      "integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==",
+      "dev": true,
+      "requires": {
+        "is-core-module": "^2.2.0",
+        "path-parse": "^1.0.6"
+      }
+    },
+    "rimraf": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
+      "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+      "dev": true,
+      "requires": {
+        "glob": "^7.1.3"
+      }
+    },
+    "safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "dev": true
+    },
+    "safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "dev": true
+    },
+    "sass-graph": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/sass-graph/-/sass-graph-2.2.5.tgz",
+      "integrity": "sha512-VFWDAHOe6mRuT4mZRd4eKE+d8Uedrk6Xnh7Sh9b4NGufQLQjOrvf/MQoOdx+0s92L89FeyUUNfU597j/3uNpag==",
+      "dev": true,
+      "requires": {
+        "glob": "^7.0.0",
+        "lodash": "^4.0.0",
+        "scss-tokenizer": "^0.2.3",
+        "yargs": "^13.3.2"
+      }
+    },
+    "sass-loader": {
+      "version": "11.0.1",
+      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-11.0.1.tgz",
+      "integrity": "sha512-Vp1LcP4slTsTNLEiDkTcm8zGN/XYYrZz2BZybQbliWA8eXveqA/AxsEjllQTpJbg2MzCsx/qNO48sHdZtOaxTw==",
+      "dev": true,
+      "requires": {
+        "klona": "^2.0.4",
+        "neo-async": "^2.6.2"
+      }
+    },
+    "scss-tokenizer": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npm.taobao.org/scss-tokenizer/download/scss-tokenizer-0.2.3.tgz",
+      "integrity": "sha1-jrBtualyMzOCTT9VMGQRSYR85dE=",
+      "dev": true,
+      "requires": {
+        "js-base64": "^2.1.8",
+        "source-map": "^0.4.2"
+      }
+    },
+    "semver": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+      "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+      "dev": true
+    },
+    "set-blocking": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npm.taobao.org/set-blocking/download/set-blocking-2.0.0.tgz",
+      "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=",
+      "dev": true
+    },
+    "shebang-command": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "dev": true,
+      "requires": {
+        "shebang-regex": "^3.0.0"
+      }
+    },
+    "shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "dev": true
+    },
+    "signal-exit": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.3.tgz",
+      "integrity": "sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA==",
+      "dev": true
+    },
+    "source-map": {
+      "version": "0.4.4",
+      "resolved": "https://registry.npm.taobao.org/source-map/download/source-map-0.4.4.tgz?cache=0&sync_timestamp=1604409581245&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsource-map%2Fdownload%2Fsource-map-0.4.4.tgz",
+      "integrity": "sha1-66T12pwNyZneaAMti092FzZSA2s=",
+      "dev": true,
+      "requires": {
+        "amdefine": ">=0.0.4"
+      }
+    },
+    "spdx-correct": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.1.1.tgz",
+      "integrity": "sha512-cOYcUWwhCuHCXi49RhFRCyJEK3iPj1Ziz9DpViV3tbZOwXD49QzIN3MpOLJNxh2qwq2lJJZaKMVw9qNi4jTC0w==",
+      "dev": true,
+      "requires": {
+        "spdx-expression-parse": "^3.0.0",
+        "spdx-license-ids": "^3.0.0"
+      }
+    },
+    "spdx-exceptions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.3.0.tgz",
+      "integrity": "sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A==",
+      "dev": true
+    },
+    "spdx-expression-parse": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz",
+      "integrity": "sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==",
+      "dev": true,
+      "requires": {
+        "spdx-exceptions": "^2.1.0",
+        "spdx-license-ids": "^3.0.0"
+      }
+    },
+    "spdx-license-ids": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.7.tgz",
+      "integrity": "sha512-U+MTEOO0AiDzxwFvoa4JVnMV6mZlJKk2sBLt90s7G0Gd0Mlknc7kxEn3nuDPNZRta7O2uy8oLcZLVT+4sqNZHQ==",
+      "dev": true
+    },
+    "sshpk": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.16.1.tgz",
+      "integrity": "sha512-HXXqVUq7+pcKeLqqZj6mHFUMvXtOJt1uoUx09pFW6011inTMxqI8BA8PM95myrIyyKwdnzjdFjLiE6KBPVtJIg==",
+      "dev": true,
+      "requires": {
+        "asn1": "~0.2.3",
+        "assert-plus": "^1.0.0",
+        "bcrypt-pbkdf": "^1.0.0",
+        "dashdash": "^1.12.0",
+        "ecc-jsbn": "~0.1.1",
+        "getpass": "^0.1.1",
+        "jsbn": "~0.1.0",
+        "safer-buffer": "^2.0.2",
+        "tweetnacl": "~0.14.0"
+      }
+    },
+    "stdout-stream": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/stdout-stream/-/stdout-stream-1.4.1.tgz",
+      "integrity": "sha512-j4emi03KXqJWcIeF8eIXkjMFN1Cmb8gUlDYGeBALLPo5qdyTfA9bOtl8m33lRoC+vFMkP3gl0WsDr6+gzxbbTA==",
+      "dev": true,
+      "requires": {
+        "readable-stream": "^2.0.1"
+      }
+    },
+    "string-width": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npm.taobao.org/string-width/download/string-width-1.0.2.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fstring-width%2Fdownload%2Fstring-width-1.0.2.tgz",
+      "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
+      "dev": true,
+      "requires": {
+        "code-point-at": "^1.0.0",
+        "is-fullwidth-code-point": "^1.0.0",
+        "strip-ansi": "^3.0.0"
+      }
+    },
+    "string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "dev": true,
+      "requires": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
+    "strip-ansi": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npm.taobao.org/strip-ansi/download/strip-ansi-3.0.1.tgz",
+      "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
+      "dev": true,
+      "requires": {
+        "ansi-regex": "^2.0.0"
+      }
+    },
+    "strip-bom": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npm.taobao.org/strip-bom/download/strip-bom-2.0.0.tgz",
+      "integrity": "sha1-YhmoVhZSBJHzV4i9vxRHqZx+aw4=",
+      "dev": true,
+      "requires": {
+        "is-utf8": "^0.2.0"
+      }
+    },
+    "strip-indent": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npm.taobao.org/strip-indent/download/strip-indent-1.0.1.tgz",
+      "integrity": "sha1-DHlipq3vp7vUrDZkYKY4VSrhoKI=",
+      "dev": true,
+      "requires": {
+        "get-stdin": "^4.0.1"
+      }
+    },
+    "supports-color": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npm.taobao.org/supports-color/download/supports-color-2.0.0.tgz?cache=0&sync_timestamp=1611394404603&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsupports-color%2Fdownload%2Fsupports-color-2.0.0.tgz",
+      "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
+      "dev": true
+    },
+    "tar": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-6.1.0.tgz",
+      "integrity": "sha512-DUCttfhsnLCjwoDoFcI+B2iJgYa93vBnDUATYEeRx6sntCTdN01VnqsIuTlALXla/LWooNg0yEGeB+Y8WdFxGA==",
+      "dev": true,
+      "requires": {
+        "chownr": "^2.0.0",
+        "fs-minipass": "^2.0.0",
+        "minipass": "^3.0.0",
+        "minizlib": "^2.1.1",
+        "mkdirp": "^1.0.3",
+        "yallist": "^4.0.0"
+      },
+      "dependencies": {
+        "mkdirp": {
+          "version": "1.0.4",
+          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
+          "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
+          "dev": true
+        }
+      }
+    },
+    "tough-cookie": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
+      "integrity": "sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==",
+      "dev": true,
+      "requires": {
+        "psl": "^1.1.28",
+        "punycode": "^2.1.1"
+      }
+    },
+    "trim-newlines": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npm.taobao.org/trim-newlines/download/trim-newlines-1.0.0.tgz",
+      "integrity": "sha1-WIeWa7WCpFA6QetST301ARgVphM=",
+      "dev": true
+    },
+    "true-case-path": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/true-case-path/-/true-case-path-1.0.3.tgz",
+      "integrity": "sha512-m6s2OdQe5wgpFMC+pAJ+q9djG82O2jcHPOI6RNg1yy9rCYR+WD6Nbpl32fDpfC56nirdRy+opFa/Vk7HYhqaew==",
+      "dev": true,
+      "requires": {
+        "glob": "^7.1.2"
+      }
+    },
+    "tunnel-agent": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npm.taobao.org/tunnel-agent/download/tunnel-agent-0.6.0.tgz",
+      "integrity": "sha1-J6XeoGs2sEoKmWZ3SykIaPD8QP0=",
+      "dev": true,
+      "requires": {
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "tweetnacl": {
+      "version": "0.14.5",
+      "resolved": "https://registry.npm.taobao.org/tweetnacl/download/tweetnacl-0.14.5.tgz",
+      "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=",
+      "dev": true
+    },
+    "uri-js": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
+      "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+      "dev": true,
+      "requires": {
+        "punycode": "^2.1.0"
+      }
+    },
+    "util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npm.taobao.org/util-deprecate/download/util-deprecate-1.0.2.tgz",
+      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
+      "dev": true
+    },
+    "uuid": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
+      "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
+      "dev": true
+    },
+    "validate-npm-package-license": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
+      "integrity": "sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==",
+      "dev": true,
+      "requires": {
+        "spdx-correct": "^3.0.0",
+        "spdx-expression-parse": "^3.0.0"
+      }
+    },
+    "verror": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npm.taobao.org/verror/download/verror-1.10.0.tgz",
+      "integrity": "sha1-OhBcoXBTr1XW4nDB+CiGguGNpAA=",
+      "dev": true,
+      "requires": {
+        "assert-plus": "^1.0.0",
+        "core-util-is": "1.0.2",
+        "extsprintf": "^1.2.0"
+      }
+    },
+    "which": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "dev": true,
+      "requires": {
+        "isexe": "^2.0.0"
+      }
+    },
+    "which-module": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npm.taobao.org/which-module/download/which-module-2.0.0.tgz",
+      "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=",
+      "dev": true
+    },
+    "wide-align": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz",
+      "integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==",
+      "dev": true,
+      "requires": {
+        "string-width": "^1.0.2 || 2"
+      }
+    },
+    "wrap-ansi": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-5.1.0.tgz",
+      "integrity": "sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==",
+      "dev": true,
+      "requires": {
+        "ansi-styles": "^3.2.0",
+        "string-width": "^3.0.0",
+        "strip-ansi": "^5.0.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
+          "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
+          "dev": true
+        },
+        "ansi-styles": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^1.9.0"
+          }
+        },
+        "is-fullwidth-code-point": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npm.taobao.org/is-fullwidth-code-point/download/is-fullwidth-code-point-2.0.0.tgz",
+          "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
+          "dev": true
+        },
+        "string-width": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
+          "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
+          "dev": true,
+          "requires": {
+            "emoji-regex": "^7.0.1",
+            "is-fullwidth-code-point": "^2.0.0",
+            "strip-ansi": "^5.1.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+          "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^4.1.0"
+          }
+        }
+      }
+    },
+    "wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npm.taobao.org/wrappy/download/wrappy-1.0.2.tgz",
+      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
+      "dev": true
+    },
+    "y18n": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.1.tgz",
+      "integrity": "sha512-wNcy4NvjMYL8gogWWYAO7ZFWFfHcbdbE57tZO8e4cbpj8tfUcwrwqSl3ad8HxpYWCdXcJUCeKKZS62Av1affwQ==",
+      "dev": true
+    },
+    "yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "dev": true
+    },
+    "yargs": {
+      "version": "13.3.2",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-13.3.2.tgz",
+      "integrity": "sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw==",
+      "dev": true,
+      "requires": {
+        "cliui": "^5.0.0",
+        "find-up": "^3.0.0",
+        "get-caller-file": "^2.0.1",
+        "require-directory": "^2.1.1",
+        "require-main-filename": "^2.0.0",
+        "set-blocking": "^2.0.0",
+        "string-width": "^3.0.0",
+        "which-module": "^2.0.0",
+        "y18n": "^4.0.0",
+        "yargs-parser": "^13.1.2"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
+          "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
+          "dev": true
+        },
+        "find-up": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
+          "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
+          "dev": true,
+          "requires": {
+            "locate-path": "^3.0.0"
+          }
+        },
+        "is-fullwidth-code-point": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npm.taobao.org/is-fullwidth-code-point/download/is-fullwidth-code-point-2.0.0.tgz",
+          "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
+          "dev": true
+        },
+        "string-width": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
+          "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
+          "dev": true,
+          "requires": {
+            "emoji-regex": "^7.0.1",
+            "is-fullwidth-code-point": "^2.0.0",
+            "strip-ansi": "^5.1.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+          "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^4.1.0"
+          }
+        }
+      }
+    },
+    "yargs-parser": {
+      "version": "13.1.2",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-13.1.2.tgz",
+      "integrity": "sha512-3lbsNRf/j+A4QuSZfDRA7HRSfWrzO0YjqTJd5kjAq37Zep1CEgaYmrH9Q3GwPiB9cHyd1Y1UwggGhJGoxipbzg==",
+      "dev": true,
+      "requires": {
+        "camelcase": "^5.0.0",
+        "decamelize": "^1.2.0"
+      },
+      "dependencies": {
+        "camelcase": {
+          "version": "5.3.1",
+          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+          "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+          "dev": true
+        }
+      }
+    }
+  }
+}

package.json

@@ -0,0 +1,7 @@
+{
+  "dependencies": {},
+  "devDependencies": {
+    "node-sass": "^5.0.0",
+    "sass-loader": "^11.0.1"
+  }
+}

pages.json

@@ -0,0 +1,78 @@
+{
+	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
+		// {
+		// 	"path": "pages/test/test6",
+		// 	"style": {
+		// 		"app-plus": {
+		// 			"titleNView": false
+		// 		}
+		// 	}
+		// },
+		// {
+		// 	"path": "pages/home",
+		// 	"style": {
+		// 		"app-plus": {
+		// 			"titleNView": false
+		// 		}
+		// 	}
+		// },
+		{
+			"path": "pages/startLearning/startLearning",
+			"style": {
+				"app-plus": {
+					"titleNView": false
+				}
+			}
+		},
+		{
+			"path": "pages/login/login",
+			"style": {
+				"app-plus": {
+					"titleNView": false
+				}
+			}
+		},
+		{
+			"path": "pages/index/index",
+			"style": {
+				"navigationBarTitleText": "uni-app"
+			}
+		},
+		{
+			"path": "pages/test/test",
+			"style": {
+				"navigationBarTitleText": "test"
+			}
+		},
+		{
+			"path": "pages/test/test2",
+			"style": {
+				"app-plus": {
+					"titleNView": false
+				}
+			}
+		},
+		{
+			"path": "pages/test/test3",
+			"style": {
+				"app-plus": {
+					"titleNView": false
+				}
+			}
+		},
+		{
+			"path": "pages/test/test4",
+			"style": {
+				"app-plus": {
+					"titleNView": false
+				}
+			}
+		}
+	],
+	"globalStyle": {
+		"navigationBarTextStyle": "black",
+		"navigationBarTitleText": "uni-app",
+		"navigationBarBackgroundColor": "#F8F8F8",
+		"backgroundColor": "#F8F8F8"
+	}
+}

pages/home.vue

@@ -0,0 +1,272 @@
+<template>
+	<view class="mybody bgclF8 df fdc">
+		<TopMenu ref="TopMenu" v-on:onTopSYClick="onTopSYClick" v-on:onTopQXZBClick="onTopQXZBClick" v-on:onLoginClick="showPage(0)"
+		 v-on:onTopXXYSYClick="onTopXXYSYClick" v-on:onTopMenuIconClick="onTopMenuIconClick" v-on:onClick_return="onClick_return"></TopMenu>
+		<view class="content homeContent">
+			<Login ref="Login" v-show="bShow[0]" v-on:onLogin="onLogin"></Login>
+			<SYJJ ref="SYJJ" v-show="bShow[1]" v-on:onClick_Btn1="onClick_SYJJ_btn1"></SYJJ>
+			<XXLC ref="XXLC" v-show="bShow[2]"></XXLC>
+			<KSXX ref="KSXX" v-show="bShow[3]" v-on:on2thTitleClick="on2thKSXXClick"></KSXX>
+			<image v-show="bShow[4]" class="homeBG" mode="aspectFill" src="../assets/home/homeBG.png"></image>
+			<QXZB ref="QXZB" v-show="bShow[5]"></QXZB>
+			<XXYSY ref="XXYSY" v-show="bShow[6]" v-on:onClick_KSRZ="onClick_KSRZ"></XXYSY>
+			<YLRZ ref="YLRZ" v-show="bShow[7]"></YLRZ>
+			<SYJJ2 ref="SYJJ2" v-show="bShow[8]"></SYJJ2>
+			<manager res="manager" v-show="bShow[9]"></manager>
+		</view>
+		<!-- 左侧导航栏永远保持在最上层 -->
+		<LeftMenu ref="LeftMenu" v-on:onLeftMenuClick="onLeftMenuClick"></LeftMenu>
+	</view>
+</template>
+
+<script>
+	import LeftMenu from '../components/leftMenu.vue'
+	import TopMenu from '../components/topMenu.vue'
+	import Login from '../components/login/login.vue'
+	import manager from '../components/manager/Index.vue'
+
+	//一级页面
+	import KSXX from '../components/startLearning/startLearning.vue' //开始学习
+	import SYJJ from '../components/introductionToTheExperiment/introductionToTheExperiment.vue' //实验简介
+	import XXLC from '../components/learningProcess/learningProcess.vue' //学习流程
+
+	//二级页面
+	//开始学习
+	import QXZB from '../components/startLearning/preludePreparation/preludePreparation.vue' //前序准备
+	import XXYSY from '../components/startLearning/learningAndExperiment/learningAndExperiment.vue' //学习与实验
+	import YLRZ from '../components/startLearning/learningAndExperiment/ksxx_xxysy_ylrz/ksxx_xxysy_ylrz.vue' //原理认知
+	//实验简介的详情页
+	import SYJJ2 from '../components/introductionToTheExperiment/syjj_second.vue' //实验简介的详情页
+
+	export default {
+		components: {
+			LeftMenu,
+			TopMenu,
+			Login,
+			SYJJ,
+			XXLC,
+			KSXX,
+			QXZB,
+			XXYSY,
+			YLRZ,
+			SYJJ2,
+			manager
+		},
+		data() {
+			return {
+				curShowPage: 4,
+				//这里记录当前需要显示哪个页面。每新添加一个页面，都需要在这里注册。
+				bShow: [
+					false, //0登录
+					false, //1实验简介一级页面
+					false, //2学习流程一级页面
+					false, //3开始学习一级页面
+					true, //4首页
+					false, //5开始学习-前序准备
+					false, //6开始学习-学习与实验
+					false, //7开始学习-学习与实验-原理认知
+					false, //8实验简介的详情页
+					false,
+				],
+				// bShowLogin: true, //登录
+				// bShowSYJJ: false, //实验简介一级页面
+				// bShowXXLC: false, //学习流程一级页面
+				// bShowSL: false, //开始学习一级页面
+				checkedIndex_SYJJ: 0, //实验简介选中标题索引值
+			}
+		},
+		methods: {
+			onTopSYClick(index) {
+
+				console.log("点击了首页标题", index, myData_QXZB_SYQY.length);
+				let pageIndex = -1;
+				switch (index) {
+					case 0: //实验简介
+						pageIndex = 1;
+						// this.$refs.SYJJ.initData();
+						break;
+					case 1: //学习流程
+						pageIndex = 2;
+						// this.$refs.XXLC.initData();
+						break;
+					case 2: //开始学习
+						pageIndex = 3;
+						this.$refs.KSXX.initData();
+						break;
+					case 4:
+
+						break;
+					default:
+						console.log("选中状态为home：", state);
+				}
+				this.showPage(pageIndex);
+			},
+			onLogin: function() {
+				console.log("登陆成功home");
+				this.$refs.TopMenu.switchLoginState(true);
+				this.showPage(4);
+			},
+			showPage(index) {
+				this.curShowPage = index;
+				for (let i = 0; i < this.bShow.length; i++) {
+					if (i == index) {
+						this.bShow[i] = true;
+					} else {
+						this.bShow[i] = false;
+					}
+				}
+				// console.log("显示页面", index, this.bShow, this.bShow.length);
+				this.$forceUpdate();
+			},
+			//2级开始学习标题点击事件
+			on2thKSXXClick(data) {
+				// console.log("2级点击",data);
+				let lineIndex = data.indexOf("-");
+				let type = data.substr(0, lineIndex)
+				let index = data.substr(lineIndex + 1, data.length - 1)
+				console.log("2级点击home---", type, index);
+				//前序准备
+				if (type == "QXZB") {
+					this.showPage(5)
+					this.$refs.TopMenu.switchMiddleState(topMenuS.QXZB);
+					this.$refs.QXZB.onTopQXZBClick(index);
+					this.$refs.TopMenu.checkedIndexQXZB = index;
+				}
+				//学习与实验
+				else if (type == "XXYSY") {
+					this.showPage(6)
+					this.$refs.TopMenu.switchMiddleState(topMenuS.XXYSY);
+					this.$refs.XXYSY.onTopXXYSYClick(index);
+					this.$refs.TopMenu.checkedIndexXXYSY = index;
+				} else {
+					console.log("2级点击---", lineIndex, type, index);
+				}
+			},
+			//顶部前序准备小标题点击事件
+			onTopQXZBClick(index) {
+				// console.log("顶部点击home",index);
+				this.$refs.QXZB.onTopQXZBClick(index);
+			},
+			//顶部学习与实验小标题点击事件
+			onTopXXYSYClick(index) {
+				// console.log("顶部点击home",index);
+				this.$refs.XXYSY.onTopXXYSYClick(index);
+			},
+			//左侧导航点击事件
+			onLeftMenuClick(indexArr) {
+				let targetPage = -1;
+				let topMiddleState = '';
+				switch (indexArr[0]) {
+					case 0: //首页
+						targetPage = 4;
+						topMiddleState = topMenuS.SY;
+						break;
+					case 1: //实验简介
+						targetPage = 8;
+						topMiddleState = topMenuS.SYJJ;
+						this.$refs.SYJJ2.showPage(indexArr[1]);
+						this.$refs.TopMenu.switchState_syjj(indexArr[1]);
+						// this.$forceUpdate();
+						break;
+					case 2: //学习流程
+
+						break;
+					case 3: //开始学习
+						if (indexArr[1] == 0) {
+							targetPage = 5;
+							topMiddleState = topMenuS.QXZB;
+						} else if (indexArr[1] == 1) {
+							targetPage = 6;
+							topMiddleState = topMenuS.XXYSY;
+						}
+						break;
+					case 4:
+						targetPage = 9;
+						topMiddleState = topMenuS.manager;
+						break;
+					default:
+						console.log("展示页面home：", this.curShowPage);
+				}
+				this.showPage(targetPage);
+				this.$refs.TopMenu.switchMiddleState(topMiddleState);
+				console.log("左侧导航点击home", indexArr);
+			},
+			//顶部导航左上角icon点击事件
+			onTopMenuIconClick() {
+				let indexArr = [];
+				switch (this.curShowPage) {
+					case 0: //登录
+						indexArr = [-1, -1];
+						break;
+					case 1: //实验简介1级
+						indexArr = [1, -1];
+						break;
+					case 2: //学习流程1级
+						indexArr = [2, -1];
+						break;
+					case 3: //开始学习1级
+						indexArr = [3, -1];
+						break;
+					case 4: //首页
+						indexArr = [0, -1];
+						break;
+					case 5: //开始学习-前序准备
+						indexArr = [3, 0];
+						break;
+					case 6: //开始学习-学习与实验
+						indexArr = [3, 1];
+						break;
+					case 7: //开始学习-学习与实验-原理认知
+						indexArr = [3, 1];
+						break;
+					case 8: //实验简介2级
+						indexArr = [1, this.checkedIndex_SYJJ];
+						break;
+					default:
+						console.log("展示页面home：", this.curShowPage);
+				}
+				this.$refs.LeftMenu.show(indexArr);
+			},
+			//开始学习-学习与实验-开始认知按钮
+			onClick_KSRZ() {
+				this.showPage(7);
+				this.$refs.TopMenu.switchMiddleState(topMenuS.YLRZ);
+				// this.$refs.TopMenu.switchRightState(2);
+			},
+			//原理认知-返回上一层:返回到开始学习-学习与实验的展开页
+			onClick_return(type) {
+				switch (type) {
+					case 3: //原理认知-返回上一层:返回到开始学习-学习与实验的展开页 
+						this.showPage(3);
+						this.$refs.KSXX.switchSecondTitle(1);
+						break;
+					case 4: //实验简介-返回上一层：返回到实验简介的展开页
+						this.showPage(1);
+						break;
+					default:
+						console.log("返回类型", type);
+				}
+			},
+			//实验简介按钮点击
+			onClick_SYJJ_btn1(index) {
+				this.showPage(8);
+				this.checkedIndex_SYJJ = index;
+				this.$refs.SYJJ2.showPage(index);
+				this.$refs.TopMenu.switchMiddleState(topMenuS.SYJJ);
+				this.$refs.TopMenu.switchState_syjj(index);
+				this.$forceUpdate();
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.homeBG {
+		width: 100%;
+		height: 100%;
+	}
+
+	.homeContent {
+		margin-top: px2vw(120);
+	}
+</style>

pages/index/index.vue

@@ -0,0 +1,148 @@
+<template>
+	<view class="content">
+		<image class="logo" src="/static/logo.png"></image>
+		<view class="text-area">
+			<text class="title">{{title}}</text>
+		</view>
+		<view>
+			<input id="myInput" type="text" v-model="funName" placeholder="请输入方法名" />
+			<button id="btnCheck" @click="funCheck">验证</button>
+		</view>
+		<button @click="btnTestClick">toTest</button>
+		<view id="iframeView">
+			<iframe :src="iframeSRC" id="myIframe">该浏览器不支持 iframe 标签</iframe>
+		</view>
+		<view id="routerTest">
+			<view>
+				<router-link to="../test/test2">test2</router-link>
+			</view>
+			<view>
+				<router-view></router-view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		components: {
+		},
+		data() {
+			return {
+				title: 'Hello',
+				funName: '',
+				myHost: 'http://39.105.166.141:8085',
+				webviewStyles: {
+					progress: {
+						color: '#FF3333'
+					}
+				},
+				iframeSRC: '#pages/test/test2'
+			}
+		},
+		onLoad() {
+			// uni.redirectTo({
+			// 	url:"../test/StartLearning"
+			// })
+		},
+		mounted() {
+			window.addEventListener('message', event => {
+				let data = event.data;
+				console.log(data);
+				if (data.cmd === 'jump') {
+					console.log("-----------jump111");
+					// this.iframeSRC = '#pages/test/test3';
+					// this.iframeSRC = '#pages/index/index';
+					this.iframeSRC = 'https://www.baidu.com';
+				} else if (data.cmd === 'jump2') {
+					console.log("-----------jump222");
+					this.iframeSRC = '#pages/test/test2';
+					// this.iframeSRC = 'https://www.baidu.com';
+				} else {
+					console.log("***********notjump");
+				}
+			})
+		},
+		methods: {
+			funCheck() {
+				console.log(this.funName)
+				this.testPOST();
+			},
+			testPOST() {
+				let url = "http://39.105.166.141:8085/user/loginin";
+				uni.request({
+					header: {
+						// 'Content-Type': 'application/x-www-form-urlencoded'
+						'Content-Type': 'application/json'
+					},
+					url: url,
+					method: 'POST',
+					data: {
+						"IlabAccount": "teststudent01",
+						"Password": "qgsTest002"
+					},
+					dataType: 'json',
+					success: (res) => {
+						// var result = JSON.parse(res);
+						console.log("success***", res)
+					},
+					fail: (res) => {
+						console.log("fail***", res)
+					}
+				});
+			},
+			btnTestClick() {
+				uni.navigateTo({
+					url: '/pages/test/test',
+				});
+			},
+		}
+	}
+</script>
+
+<style>
+	.content {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.logo {
+		height: 200rpx;
+		width: 200rpx;
+		margin-top: 200rpx;
+		margin-left: auto;
+		margin-right: auto;
+		margin-bottom: 50rpx;
+	}
+
+	.text-area {
+		display: flex;
+		justify-content: center;
+	}
+
+	.title {
+		font-size: 36rpx;
+		color: #8f8f94;
+	}
+
+	#myInput {
+		border: #007AFF 1rpx solid;
+	}
+
+	#iframeView {
+		margin-top: 20rpx;
+	}
+
+	#myIframe {
+		border: none;
+	}
+
+	#routerTest {
+		width: 500rpx;
+		height: 200rpx;
+		border: #aa00ff 1rpx solid;
+		flex-direction: row;
+	}
+</style>

pages/login/login.vue

@@ -0,0 +1,125 @@
+<template>
+	<!-- <view class="mybody df fdc aic"> -->
+	<view class="mybody bgclF8 df fdc">
+		<TopMenu ref="TopMenu"></TopMenu>
+		<!-- 中间那块登录输入密码之类的 -->
+		<view v-show="visibleLogin" class="df jcc aic content">
+			<view class="df aic login-center">
+				<view>
+					<view class="login-lefttitle1">虚拟仿真实验网站首页</view>
+					<view class="login-lefttitle2">记录产品分享设计</view>
+					<view class="login-leftpic">
+						<img src="../../assets/login/loginPic1.png" />
+					</view>
+				</view>
+				<!-- 中间竖线 -->
+				<view class="login-middleline"></view>
+				<ChooseRole v-show="visibleChooseRole" v-on:onChoose="onChoose"></ChooseRole>
+				<LoginByPWD class="showborder" v-show="visibleLoginByPWD" v-on:onLogin="onLogin" v-on:onForget="onForget"></LoginByPWD>
+				<ResetPWD v-show="visibleResetPWD" v-on:onLogin="onLogin"></ResetPWD>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import TopMenu from '../../components/topMenu.vue'
+	import ChooseRole from '../../components/login/chooseRole.vue'
+	import LoginByPWD from '../../components/login/loginByPWD.vue'
+	import ResetPWD from '../../components/login/resetPWD.vue'
+	export default {
+		components: {
+			TopMenu,
+			ChooseRole,
+			LoginByPWD,
+			ResetPWD
+		},
+		data() {
+			return {
+				visibleLogin:true,
+				visibleChooseRole: true,
+				visibleLoginByPWD: false,
+				visibleResetPWD: false,
+				//当前登录类型T教师S学生
+				roleType: '',
+			}
+		},
+		methods: {
+			onLogin: function() {
+				console.log("登录成功", this.roleType, this.$refs.TopMenu.str);
+				console.log("登陆成功2",topMenuS.ksxx);
+				this.$refs.TopMenu.switchState(topMenuS.syjj);
+				this.visibleChooseRole = false;
+				this.visibleLoginByPWD = false;
+				this.visibleResetPWD = false;
+				this.visibleLogin = false;
+			},
+			onChoose(type) {
+				console.log("onChoose", type)
+				this.roleType = type;
+				this.visibleChooseRole = false;
+				this.visibleLoginByPWD = true;
+			},
+			onForget() {
+				this.visibleLoginByPWD = false;
+				this.visibleResetPWD = true;
+			}
+		}
+	}
+</script>
+
+<style>
+	.login-center {
+		/* width: 1431px;
+		height: 752px; */
+		width: 74.5vw;
+		height: 39.1vw;
+		background: #FFFFFF;
+		box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.1);
+		border-radius: 10px;
+		/* margin-top: 86px; */
+		justify-content: space-evenly;
+	}
+
+	.login-lefttitle1 {
+		/* font-size: 26px; */
+		font-size: 1.4vw;
+		font-family: MicrosoftYaHei;
+		color: #020202;
+		/* line-height: 35px; */
+		line-height: 1.8vw;
+		/* letter-spacing: 2px; */
+		letter-spacing: 0.02vw;
+	}
+
+	.login-lefttitle2 {
+		/* font-size: 20px; */
+		font-size: 1.041vw;
+		font-family: MicrosoftYaHei;
+		color: #6C6F6E;
+		/* line-height: 26px;
+		letter-spacing: 1px;
+		margin-top: 16px; */
+		line-height: 1.4vw;
+		letter-spacing: 1px;
+		margin-top: 0.8vw;
+	}
+
+	.login-leftpic {
+		/* margin-top: 79px;
+		margin-left: 15px; */
+		margin-top: 4.114vw;
+		margin-left: 0.07vw;
+	}
+
+	.login-leftpic img {
+		width: 17.552vw;
+	}
+
+	.login-middleline {
+		width: 0.1vw;
+		height: 29vw;
+		background-color: #979797;
+		opacity: 0.2;
+	}
+</style>

pages/startLearning/startLearning.vue

@@ -0,0 +1,56 @@
+<template>
+	<view class="mybody bgclF8 df fdc">
+		<TopMenu ref="TopMenu"></TopMenu>
+		<view class="df jcc aic content">
+			<view class="df content-box jcsb">
+				<view v-for="(item,i) in btn1List" :key="i" class="df jcc aic fdc btn1-box">
+					<view class="btn1-icon">
+						<img :src="item.src"></img>
+					</view>
+					<view class="btn1-text">{{item.text}}</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import TopMenu from '../../components/topMenu.vue'
+	export default {
+		components: {
+			TopMenu,
+		},
+		onLoad() {
+
+		},
+		data() {
+			return {
+				btn1List: [{
+						"src": require("../../assets/topMenu/preludePreparation.png"),
+						"text": "前序准备"
+					},
+					{
+						"src": require("../../assets/topMenu/learningAndExperiment.png"),
+						"text": "学习与实验"
+					},
+					{
+						"src": require("../../assets/topMenu/testAndResult.png"),
+						"text": "测试与结果"
+					},
+				],
+			}
+		},
+		methods: {
+
+		}
+	}
+</script>
+
+<style lang="scss">
+	$btnN:3;
+
+	.content-box {
+		width: px2vw(312*$btnN+67*(($btnN)-1));
+		height: px2vw(367);
+	}
+</style>

pages/test/test.vue

@@ -0,0 +1,172 @@
+<template>
+	<view class="list_box">
+		<view class="left">
+			<scroll-view scroll-y="true" :style="{ 'height':scrollHeight }">
+				<view class="item" v-for="(item,index) in leftArray" :key="index" :class="{ 'active':index==leftIndex }"
+				 :data-index="index" @tap="leftTap">{{item}}</view>
+			</scroll-view>
+		</view>
+		<view class="main">
+			<swiper class="swiper" :style="{ 'height':scrollHeight }" :current="leftIndex" @change="swiperChange" vertical="true"
+			 duration="300">
+				<swiper-item v-for="(item,index) in mainArray" :key="index">
+					<scroll-view scroll-y="true" :style="{ 'height':scrollHeight }">
+						<view class="item">
+							<view class="title">
+								<view>
+									<a :href="item.url">{{item.title}}</a>
+								</view>
+								<image :src="item.thumbnail_pic_s" style="width: 250rpx; height: 250rpx;margin-left: 6rpx;" mode=""></image>
+								<image :src="item.thumbnail_pic_s02" style="width: 250rpx; height: 250rpx;margin-left: 6rpx;" mode=""></image>
+							</view>
+						</view>
+					</scroll-view>
+				</swiper-item>
+			</swiper>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				scrollHeight: '500px',
+				leftArray: ['生活', '娱乐', '社会'],
+				mainArray: [{
+					"uniquekey": "6c4caa0c3ba6e05e2a272892af43c00e",
+					"title": "杨幂的发际线再也回不去了么？网友吐槽像半秃",
+					"date": "2017-01-05 11:03",
+					"category": "yule",
+					"author_name": "腾讯娱乐",
+					"url": "http://mini.eastday.com/mobile/170105110355287.html?qid=juheshuju",
+					"thumbnail_pic_s": "http://03.imgmini.eastday.com/mobile/20170105/20170105110355_806f4ed3fe71d04fa452783d6736a02b_1_mwpm_03200403.jpeg",
+					"thumbnail_pic_s02": "http://03.imgmini.eastday.com/mobile/20170105/20170105110355_806f4ed3fe71d04fa452783d6736a02b_2_mwpm_03200403.jpeg",
+					"thumbnail_pic_s03": "http://03.imgmini.eastday.com/mobile/20170105/20170105110355_806f4ed3fe71d04fa452783d6736a02b_3_mwpm_03200403.jpeg"
+				}],
+				leftIndex: 0
+			}
+		},
+		onLoad() {
+			/* 设置当前滚动容器的高，若非窗口的高度，请自行修改 */
+			uni.getSystemInfo({
+				success: (res) => {
+					this.scrollHeight = `${res.windowHeight}px`;
+				}
+			});
+		},
+		methods: {
+			/* 左侧导航点击 */
+			leftTap(e) {
+				let index = e.currentTarget.dataset.index;
+				this.leftIndex = Number(index);
+			},
+			/* 轮播图切换 */
+			swiperChange(e) {
+				let index = e.detail.current;
+				this.leftIndex = Number(index);
+			}
+		}
+	}
+</script>
+
+<style >
+	.list_box {
+		display: flex;
+		flex-direction: row;
+		flex-wrap: nowrap;
+		justify-content: flex-start;
+		align-items: flex-start;
+		align-content: flex-start;
+		font-size: 28rpx;
+
+		.left {
+			width: 200rpx;
+			background-color: #f6f6f6;
+			line-height: 80rpx;
+			box-sizing: border-box;
+			font-size: 32rpx;
+
+			.item {
+				padding-left: 20rpx;
+				position: relative;
+
+				&:not(:first-child) {
+					margin-top: 1px;
+
+					&::after {
+						content: '';
+						display: block;
+						height: 0;
+						border-top: #d6d6d6 solid 1px;
+						width: 620upx;
+						position: absolute;
+						top: -1px;
+						right: 0;
+						transform: scaleY(0.5);
+						/* 1px像素 */
+					}
+				}
+
+				&.active,
+				&:active {
+					color: #42b983;
+					background-color: #fff;
+				}
+			}
+		}
+
+		.main {
+			background-color: #fff;
+			padding-left: 20rpx;
+			width: 0;
+			flex-grow: 1;
+			box-sizing: border-box;
+
+			.swiper {
+				height: 500px;
+			}
+
+			.title {
+				line-height: 64rpx;
+				font-size: 24rpx;
+				font-weight: bold;
+				color: #666;
+				background-color: #fff;
+				position: sticky;
+				top: 0;
+				z-index: 999;
+			}
+
+			.item {
+				padding-bottom: 10rpx;
+			}
+
+			.goods {
+				display: flex;
+				flex-direction: row;
+				flex-wrap: nowrap;
+				justify-content: flex-start;
+				align-items: center;
+				align-content: center;
+				margin-bottom: 10rpx;
+
+				&>image {
+					width: 120rpx;
+					height: 120rpx;
+					margin-right: 16rpx;
+				}
+
+				.describe {
+					font-size: 24rpx;
+					color: #999;
+				}
+
+				.money {
+					font-size: 24rpx;
+					color: #efba21;
+				}
+			}
+		}
+	}
+</style>

pages/test/test2.vue

@@ -0,0 +1,39 @@
+<template>
+	<view id="test2">
+		<button @click="postMessage">发送</button>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				str: 'hahaha'
+			}
+		},
+		onLoad() {
+
+		},
+		methods: {
+			postMessage() {
+				window.parent.postMessage({
+					cmd: 'jump',
+					params: {
+						val: 1
+					}
+				},'*')
+			},
+		},
+	}
+</script>
+
+<style>
+	#test2 {
+		width: 300rpx;
+		height: 100rpx;
+		background-color: #4CD964;
+	}
+	#test2 button{
+		color: red;
+	}
+</style>