rotate 全屏进度50%

2022-06-06 17:32:42 +08:00
parent b4deb0e053
commit 03a0dcf84b
12 changed files with 1230 additions and 180 deletions
--- a/src/App.vue
+++ b/src/App.vue
@ -8,7 +8,12 @@ body {
  margin: 0;
  padding: 0;
 }
-/* .el-message {
-  width: 80%;
-} */
+
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
 </style>
--- a/src/assets/fonts/demo.css
+++ b/src/assets/fonts/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;
+}
--- a/src/assets/fonts/demo_index.html
+++ b/src/assets/fonts/demo_index.html
@ -0,0 +1,211 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <title>iconfont Demo</title>
+  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i2/O1CN01ZyAlrn1MwaMhqz36G_!!6000000001499-73-tps-64-64.ico" type="image/x-icon"/>
+  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01EYTRnJ297D6vehehJ_!!6000000008020-55-tps-64-64.svg"/>
+  <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>
+  <style>
+    .main .logo {
+      margin-top: 0;
+      height: auto;
+    }
+
+    .main .logo a {
+      display: flex;
+      align-items: center;
+    }
+
+    .main .logo .sub-title {
+      margin-left: 0.5em;
+      font-size: 22px;
+      color: #fff;
+      background: linear-gradient(-45deg, #3967FF, #B500FE);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+  </style>
+</head>
+<body>
+  <div class="main">
+    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
+      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
+      
+    </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=3446052" 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 iconfont">&#xe63d;</span>
+                <div class="name">横屏</div>
+                <div class="code-name">&amp;#xe63d;</div>
+              </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="unicode-">Unicode 引用</h2>
+          <hr>
+
+          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
+          <ul>
+            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
+            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
+          </ul>
+          <blockquote>
+            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
+          </blockquote>
+          <p>Unicode 使用步骤如下：</p>
+          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
+<pre><code class="language-css"
+>@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.woff2?t=1654150368956') format('woff2'),
+       url('iconfont.woff?t=1654150368956') format('woff'),
+       url('iconfont.ttf?t=1654150368956') format('truetype');
+}
+</code></pre>
+          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
+<pre><code class="language-css"
+>.iconfont {
+  font-family: "iconfont" !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="iconfont"&gt;&amp;#x33;&lt;/span&gt;
+</code></pre>
+          <blockquote>
+            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+          </blockquote>
+          </div>
+      </div>
+      <div class="content font-class">
+        <ul class="icon_lists dib-box">
+          
+          <li class="dib">
+            <span class="icon iconfont icon-hengping"></span>
+            <div class="name">
+              横屏
+            </div>
+            <div class="code-name">.icon-hengping
+            </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>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
+          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</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="iconfont icon-xxx"&gt;&lt;/span&gt;
+</code></pre>
+        <blockquote>
+          <p>"
+            iconfont" 是你项目下的 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-hengping"></use>
+                </svg>
+                <div class="name">横屏</div>
+                <div class="code-name">#icon-hengping</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>
--- a/src/assets/fonts/iconfont.css
+++ b/src/assets/fonts/iconfont.css
@ -0,0 +1,19 @@
+@font-face {
+  font-family: "iconfont"; /* Project id 3446052 */
+  src: url('iconfont.woff2?t=1654150368956') format('woff2'),
+       url('iconfont.woff?t=1654150368956') format('woff'),
+       url('iconfont.ttf?t=1654150368956') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-hengping:before {
+  content: "\e63d";
+}
+
--- a/src/assets/fonts/iconfont.js
+++ b/src/assets/fonts/iconfont.js
@ -0,0 +1 @@
+!function(e){var t,n,c,o,i,d='<svg><symbol id="icon-hengping" viewBox="0 0 1024 1024"><path d="M924.23621932 877.12193043H535.08765856c-53.6870912-0.02761681-97.21119393-43.48267751-97.22500236-97.10072668V99.88805635c0.01380842-53.61804916 43.53791115-97.08691826 97.22500236-97.10072666h389.02428509c53.70089962 0 97.23881076 43.46886912 97.25261916 97.10072666V780.02120375a96.8784113 96.8784113 0 0 1-28.40389573 68.68302254 97.11867762 97.11867762 0 0 1-68.75206459 28.41770414h0.02761683z m24.27518166-752.86203354c0-26.85735402-21.78966818-48.61940537-48.67463901-48.61940537H559.48711591c-26.88497083 0-48.67463902 21.76205138-48.67463901 48.61940537v461.40796103h437.69892408V124.25989689z m0 534.27493126H510.8124769v97.10072667c0 26.85735402 21.78966818 48.61940537 48.67463901 48.61940537h340.47392174c26.85735402 0 48.6470222-21.76205138 48.64702219-48.61940537v-97.10072667h-0.09665886z m-218.84946205 121.4725672a48.6470222 48.6470222 0 0 1-42.14326192-24.26137327 48.56555259 48.56555259 0 0 1-0.04142522-48.59178857 48.66497312 48.66497312 0 0 1 42.1156451-24.31660688c26.87116241-0.02761681 48.6608306 21.72062615 48.67463901 48.55036333 0.02761681 26.8435456-21.73443455 48.60559698-48.60559697 48.61940539zM140.42954293 274.55061207c16.21107126-27.98964348 40.01676705-63.28393491 71.38947055-94.58759639 64.48526643-64.45764962 150.34594882-107.04278061 150.34594881-107.0427806 13.40796438-14.38836139 13.00752055-36.79940794-0.91135494-50.6906666-13.9188755-13.89125869-36.35753887-14.27789411-50.75970865-0.86992973-14.38836139 13.40796438-82.72617371 45.44347149-147.36333263 109.95635474-35.91566981 35.92947822-65.89372406 77.36851132-85.61213105 107.27752354l-60.28751033-34.3829365v194.33953745l194.57428038-83.23708482-71.36185374-40.73480427-0.0138084-0.02761682z m-43.01319164 165.39711378h243.12464372c13.03513737 0 25.07606935 6.94562933 31.59363802 18.21329047 6.51756868 11.26766112 6.51756868 25.1589198 0 36.4265809s-18.55850066 18.21329046-31.59363802 18.21329045H121.69153296c-26.85735402 0-48.6470222 21.76205138-48.64702221 48.6194054v340.05966948c0 26.82973718 21.74824297 48.59178857 48.64702221 48.59178856h656.54838613c13.46319803 0 24.30279849-10.93625932 24.30279849-24.24756486 0-13.00752055 6.94562933-25.03464412 18.24090727-31.5522128a36.54533323 36.54533323 0 0 1 36.48181454 0 36.39758325 36.39758325 0 0 1 18.24090728 31.5522128c-0.02761681 53.63185757-43.55171956 97.11453508-97.25261917 97.11453508H97.38873447c-53.6870912-0.02761681-97.19738554-43.48267751-97.22500235-97.11453508V537.04845253c0.01380842-53.61804916 43.53791115-97.08691826 97.22500235-97.10072668h0.02761682z m0 0" fill="#2c2c2c" ></path></symbol></svg>',l=(l=document.getElementsByTagName("script"))[l.length-1].getAttribute("data-injectcss"),a=function(e,t){t.parentNode.insertBefore(e,t)};if(l&&!e.__iconfont__svg__cssinject__){e.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(e){console&&console.log(e)}}function s(){i||(i=!0,c())}function r(){try{o.documentElement.doScroll("left")}catch(e){return void setTimeout(r,50)}s()}t=function(){var e,t=document.createElement("div");t.innerHTML=d,d=null,(t=t.getElementsByTagName("svg")[0])&&(t.setAttribute("aria-hidden","true"),t.style.position="absolute",t.style.width=0,t.style.height=0,t.style.overflow="hidden",t=t,(e=document.body).firstChild?a(t,e.firstChild):e.appendChild(t))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(t,0):(n=function(){document.removeEventListener("DOMContentLoaded",n,!1),t()},document.addEventListener("DOMContentLoaded",n,!1)):document.attachEvent&&(c=t,o=e.document,i=!1,r(),o.onreadystatechange=function(){"complete"==o.readyState&&(o.onreadystatechange=null,s())})}(window);
--- a/src/assets/fonts/iconfont.json
+++ b/src/assets/fonts/iconfont.json
@ -0,0 +1,16 @@
+{
+  "id": "3446052",
+  "name": "meeting",
+  "font_family": "iconfont",
+  "css_prefix_text": "icon-",
+  "description": "",
+  "glyphs": [
+    {
+      "icon_id": "14472203",
+      "name": "横屏",
+      "font_class": "hengping",
+      "unicode": "e63d",
+      "unicode_decimal": 58941
+    }
+  ]
+}
--- a/src/assets/fonts/iconfont.ttf
+++ b/src/assets/fonts/iconfont.ttf
--- a/src/assets/fonts/iconfont.woff
+++ b/src/assets/fonts/iconfont.woff
--- a/src/assets/fonts/iconfont.woff2
+++ b/src/assets/fonts/iconfont.woff2
--- a/src/components/chat.vue
+++ b/src/components/chat.vue
@ -39,7 +39,9 @@
        v-model="editingMessage"
        class="message-input"
      ></el-input>
-      <el-button @click="sendMessage">发送</el-button>
+      <el-button @click="sendMessage" :disabled="editingMessage.length === 0"
+        >发送</el-button
+      >
    </div>

    <el-dialog title="富文本输入框" v-model="showRichEditor">
@ -117,7 +119,7 @@ const sendMessage = () => {
  height: 100%;
  display: flex;
  flex-direction: column;
-  justify-content: space-between;
+  justify-content: space-around;
  .message-list {
    background-color: #f5f5f5;
    padding: 20px;
@ -168,7 +170,7 @@ const sendMessage = () => {
  }
  .input-bar {
    display: flex;
-    margin: 10px 0;
+    // margin: 10px 0;
    .message-input {
      margin-right: 5px;
    }
--- a/src/main.js
+++ b/src/main.js
@ -6,6 +6,7 @@ import locale from "element-plus/lib/locale/lang/zh-cn"; // 中文语言
 import "element-plus/dist/index.css";
 import router from "@/router";
 import store from "@/store";
+import "@/assets/fonts/iconfont";
 createApp(App)
  .use(router)
  .use(store)
--- a/src/views/meeting.vue
+++ b/src/views/meeting.vue
@ -2,17 +2,33 @@
  <div id="app-container" ref="appContainerRef">
    <!-- zoom 会议组件 -->
    <div id="meeting-chat-row">
-      <div
-        id="meeting-container"
-        ref="meetingContainerRef"
-        :class="{ fullscreen: isFullScreen }"
-      >
+      <div class="fullscreen-wrap" ref="fullscreenWrapRef">
        <div
-          id="video-element"
-          :class="`layout-template-${templateId}`"
-          ref="videoElementRef"
-        ></div>
-        <el-button :icon="FullScreen" circle @click="setFullScreen"></el-button>
+          id="meeting-container"
+          ref="meetingContainerRef"
+          :class="{
+            fullscreen: isFullScreen && !isVerticalFullScreen,
+            verticalFullScreen: isVerticalFullScreen,
+          }"
+        >
+          <div
+            id="video-element"
+            :class="`layout-template-${templateId}`"
+            ref="videoElementRef"
+          ></div>
+          <el-button
+            v-if="!isFullScreen"
+            :icon="FullScreen"
+            circle
+            @click="setFullScreen"
+          ></el-button>
+          <el-button
+            v-else
+            :icon="CloseBold"
+            circle
+            @click="quitFullScreen"
+          ></el-button>
+        </div>
      </div>
      <div id="right-chat">
        <Chat
@ -64,6 +80,62 @@
        </span>
      </template>
    </el-dialog>
+
+    <el-dialog
+      custom-class="check-media"
+      v-model="showCheckMediaVideo"
+      :close-on-click-modal="false"
+      title="摄像头和麦克风"
+      :fullscreen="screenWidth < 900"
+      width="60%"
+    >
+      <el-alert
+        v-if="isVideoAvailable === undefined || isAudioAvailable === undefined"
+        >检测中。</el-alert
+      >
+      <el-alert
+        v-else-if="isVideoAvailable === true && isAudioAvailable === true"
+        type="success"
+        >摄像头工作正常，麦克风工作正常。</el-alert
+      >
+      <el-alert
+        v-else-if="isVideoAvailable === true && isAudioAvailable === false"
+        type="warning"
+        >摄像头工作正常，麦克风无法正常工作。</el-alert
+      >
+      <el-alert
+        v-else-if="isVideoAvailable === false && isAudioAvailable === true"
+        type="warning"
+        >摄像头无法正常工作，麦克风工作正常。</el-alert
+      >
+      <el-alert v-else type="error"
+        >摄像头无法正常工作，麦克风无法正常工作。</el-alert
+      >
+      <!-- <div id="row"> -->
+      <div id="check-media-wrap" ref="checkMediaWrapRef">
+        <video id="check-media-video" ref="checkMediaVideoRef"></video>
+        <!-- <el-icon class="microphone-icon" :size="50"> -->
+        <Microphone
+          v-if="isAudioAvailable === undefined"
+          class="microphone-loading"
+        />
+        <Microphone
+          v-else-if="isAudioAvailable === true"
+          class="microphone-on"
+        />
+        <Mute v-else class="microphone-off" />
+        <!-- </el-icon> -->
+      </div>
+      <!-- </div> -->
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button type="primary" @click="showCheckMediaVideo = false"
+            >关闭</el-button
+          >
+        </span>
+      </template>
+    </el-dialog>
+
    <questions
      mode="1"
      @stage="getStageExamAnswer"
@ -79,6 +151,15 @@
      :showDialog="showQuestionnaireDialog"
      @close="showQuestionnaireDialog = $event"
    ></questions>
+    <el-dialog v-model="showHorizontalScreen" fullscreen :show-close="false">
+      <el-result icon="warning" title="无法全屏" sub-title="请先将手机横过来">
+        <template #icon>
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-hengping"></use>
+          </svg>
+        </template>
+      </el-result>
+    </el-dialog>
  </div>
 </template>

@ -100,7 +181,12 @@ import { uniqueId } from "lodash";
 import ZoomMtgEmbedded from "@zoomus/websdk/embedded";
 import ReconnectingWebSocket from "reconnecting-websocket";
 import { ElMessage, ElMessageBox } from "element-plus";
-import { FullScreen } from "@element-plus/icons-vue";
+import {
+  FullScreen,
+  CloseBold,
+  Microphone,
+  Mute,
+} from "@element-plus/icons-vue";
 import { signMeeting, generateSignature } from "@/api/meeting";
 import Chat from "@/components/chat";
 import questions from "@/components/questions";
@ -198,7 +284,7 @@ const startMeeting = async () => {
    console.log(meetingConfig.client.getAttendeeslist());
    document.querySelector("#suspension-view-tab-thumbnail-gallery").click();

-    // 自动点击允许共享屏幕
+    // 自动点击允许共享屏幕 //TODO:自动点击按钮
    if (route.name === "Host") {
      const safeButton = document.querySelector('button[title="安全"]');
      if (safeButton) {
@ -216,59 +302,63 @@ const startMeeting = async () => {
    isMeetingLoading.value = false;
  }
 };
+
+const setSize = () => {
+  meetingWidth.value = meetingContainerRef.value.offsetWidth * 0.9;
+  meetingHeight.value = (meetingWidth.value * 9) / 16;
+
+  videoElementRef.value.style.width = `${meetingWidth.value}px`;
+  videoElementRef.value.style.height = `${meetingHeight.value + 42}px`;
+
+  document.querySelector(
+    "#video-element> div> .zmwebsdk-MuiPaper-root> .zmwebsdk-MuiPaper-root:nth-child(1)"
+  ).style.width = `${meetingWidth.value}px`;
+
+  document
+    .querySelectorAll(
+      'div[id*="suspension-view-tabpanel"] > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root'
+    )
+    .forEach((el) => {
+      el.style.height = `${meetingHeight.value}px`;
+    });
+};
+
 window.client = meetingConfig.client;
 window.startMeeting = startMeeting;

-// 使摄像头窗口显示在右上角，当切换布局或resize、横屏时执行
-const makeVideoTop = () => {
-  const screenShareEl = document.querySelector(
-    'div[id*="suspension-view-tabpanel"]>div.zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root>div[class*="inSharing"]>div'
-  );
-  if (screenShareEl) console.log(screenShareEl.offsetTop);
-};
-// 根据id设置布局
-// const setLayout = (templateId) => {
-// videoElementRef.value.className = `layout-template-${templateId}`;
-// if (templateId === "1") {
-// } else if (templateId === "2") {
-// } else if (templateId === "3") {
-// }
-// };
-// const setLayout = (templateId) => {
-//   console.log(templateId);
-//   const videoScreenWrapEl = document.querySelectorAll(
-//     ".zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root"
-//   )[2]; // 包含视频和课件的容器
-//   videoScreenWrapEl.style.flexDirection = "";
-//   const videoWrapEl = videoScreenWrapEl.lastChild;
-
-//   if (!inSharing.value) return;
-//   const screenWrapEl = document.querySelector(
-//     `div[class*="zmwebsdk-makeStyles-inSharing"]`
-//   );
-//   if (templateId === "1") {
-//     // 课件|视频 对半分
-//     videoWrapEl.style.width = `${meetingWidth.value / 2 - 2}px`;
-//   } else if (templateId === "2") {
-//     // 视频|课件 对半分
-//     videoWrapEl.style.width = `${meetingWidth.value / 2 - 2}px`;
-//     videoScreenWrapEl.style.flexDirection = "row-reverse";
-//   } else if (templateId === "3") {
-//     // 课件|视频 左4/5 | 右边1/5
-//     videoWrapEl.style.width = `${(meetingWidth.value - 4) / 5}px`;
-//   } else if (templateId === "4") {
-//     // 视频|课件 左1/4 | 右边3/4
-//     videoWrapEl.style.width = `${(meetingWidth.value - 4) / 5}px`;
-//     videoScreenWrapEl.style.flexDirection = "row-reverse";
-//   } else if (templateId === "5") {
-//     // 只显示课件
-//     videoWrapEl.style.display = `none`;
-//   } else if (templateId === "6") {
-//     // 只显示视频
-//     screenWrapEl.style.display = "none";
-//     videoWrapEl.style.width = `${meetingWidth.value - 4}px`;
-//   }
-// };
+const checkMediaVideoRef = ref(null);
+const checkMediaWrapRef = ref(null);
+const showCheckMediaVideo = ref(true);
+const isVideoAvailable = ref(undefined);
+const isAudioAvailable = ref(undefined);
+onMounted(() => {
+  nextTick(() => {
+    const videoWidth = checkMediaWrapRef.value.offsetWidth;
+    const videoHeight = checkMediaWrapRef.value.offsetHeight;
+    console.log(checkMediaVideoRef.value);
+    navigator.mediaDevices
+      .getUserMedia({ video: { width: videoWidth, height: videoHeight } })
+      .then((stream) => {
+        checkMediaVideoRef.value.srcObject = stream;
+        checkMediaVideoRef.value.play();
+        isVideoAvailable.value = true;
+      })
+      .catch((err) => {
+        console.log(err);
+        isVideoAvailable.value = false;
+      });
+  });
+  navigator.mediaDevices
+    .getUserMedia({ audio: true })
+    .then((stream) => {
+      console.log(stream);
+      isAudioAvailable.value = true;
+    })
+    .catch((err) => {
+      console.log(err);
+      isAudioAvailable.value = false;
+    });
+});

 // 设置文本标签
 const setTextLabel = () => {
@ -361,11 +451,15 @@ setInterval(() => {
  }
  // ------

+  // TODO:
  // 检测是否存在"同意被设为嘉宾按钮",存在则自动点击
  const isSetAsGuest = document.querySelector(
    ".zmwebsdk-MuiButtonBase-root.zmwebsdk-MuiButton-root.zmwebsdk-MuiButton-contained.zmwebsdk-MuiButton-containedPrimary.zmwebsdk-MuiButton-containedSizeSmall.zmwebsdk-MuiButton-sizeSmall.zmwebsdk-MuiButton-disableElevation"
  );
-  if (isSetAsGuest) {
+  const setAsGuestLabel = document.querySelector(
+    ".zmwebsdk-MuiButtonBase-root.zmwebsdk-MuiButton-root.zmwebsdk-MuiButton-contained.zmwebsdk-MuiButton-containedPrimary.zmwebsdk-MuiButton-containedSizeSmall.zmwebsdk-MuiButton-sizeSmall.zmwebsdk-MuiButton-disableElevation>span"
+  );
+  if (isSetAsGuest && setAsGuestLabel.innerHTML === "以嘉宾身份加入") {
    isSetAsGuest.click();
  }
  // -------
@ -376,15 +470,19 @@ setInterval(() => {
    .join("$");

  // 检测共享屏幕canvas距离父元素顶部距离
-  // const shareScreenWrapEl =
  const shareScreenCanvasEl = document.querySelector(
    'div[id*="suspension-view-tabpanel"]>.zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root>div[class*="inSharing"]>div:first-child'
  );
-  // console.log(shareScreenCanvasEl);
  if (shareScreenCanvasEl) {
-    document.querySelector(
-      `div[id*="suspension-view-tabpanel"] > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root > div[class*="inSharing"] + div`
-    ).style.top = `${shareScreenCanvasEl.offsetTop}px`;
+    if (templateId.value == 3 || templateId.value == 4 || screen.width < 900) {
+      document.querySelector(
+        `div[id*="suspension-view-tabpanel"] > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root > div[class*="inSharing"] + div`
+      ).style.top = `${shareScreenCanvasEl.offsetTop}px`;
+    } else {
+      document.querySelector(
+        `div[id*="suspension-view-tabpanel"] > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root > div[class*="inSharing"] + div`
+      ).style.top = "";
+    }
  }
 }, 500);

@ -402,6 +500,7 @@ watch(inSharing, (val) => {
  }
 });

+// 监听参会人员videoOn状态变化，自动切换到已开启摄像头的用户
 watch(attendeeslist, (val) => {
  console.log(val);
  if (inSharing.value) {
@ -410,19 +509,63 @@ watch(attendeeslist, (val) => {
 });

 // 点击进入全屏模式
+const fullscreenWrapRef = ref(null);
+const isVerticalFullScreen = ref(false);
+const showHorizontalScreen = ref(false);
 const setFullScreen = async () => {
-  meetingContainerRef.value.requestFullscreen();
+  // if (window.orientation === 0) {
+  //   // ElMessageBox.prompt("请将手机横过来");
+  //   showHorizontalScreen.value = true;
+  //   setTimeout(() => {
+  //     showHorizontalScreen.value = false;
+  //   }, 1500);
+  //   return;
+  // }
+  document.querySelector(".fullscreen-wrap").requestFullscreen();
+  // meetingContainerRef.value.requestFullscreen();
  isFullScreen.value = true;
-  document
-    .querySelectorAll(
-      "div[id*=suspension-view-tabpanel]>.zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root"
-    )
-    .forEach((el) => {
-      el.setAttribute(
-        `style`,
-        `height: ${screen.height - screen.width * 0.08}px !important`
-      );
-    });
+  nextTick(() => {
+    meetingWidth.value = meetingContainerRef.value.offsetWidth * 0.9;
+    meetingHeight.value = (meetingWidth.value * 9) / 16;
+    if (window.orientation === 0) {
+      // const height = innerHeight;
+      isVerticalFullScreen.value = true;
+      nextTick(() => {
+        videoElementRef.value.setAttribute(
+          "style",
+          `width: ${innerHeight * 0.9}px !important; height: ${
+            (innerHeight * 0.9 * 9) / 16
+          }px !important`
+        );
+        document
+          .querySelectorAll(
+            'div[id*="suspension-view-tabpanel"] > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root'
+          )
+          .forEach((el) => {
+            el.setAttribute("style", `height: ${92}vw !important`);
+          });
+      });
+    }
+    videoElementRef.value.setAttribute(
+      `style`,
+      `width: ${meetingWidth.value}px !important; height: ${
+        screen.height - screen.width * 0.08
+      }px !important`
+    );
+    document
+      .querySelectorAll(
+        "div[id*=suspension-view-tabpanel]>.zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root"
+      )
+      .forEach((el) => {
+        el.setAttribute(
+          `style`,
+          `height: ${screen.height - screen.width * 0.08}px !important`
+        );
+      });
+  });
+};
+const quitFullScreen = () => {
+  document.exitFullscreen();
 };
 // 是否显示考试和问卷弹窗
 const showExamDialog = ref(false);
@ -518,19 +661,19 @@ const initWebSocket = () => {
      });
    }
    // 开始签到时
-    else if (data.type === "isStartSign" && route.name !== "Host") {
+    else if (data.type === "isStartSign" && route.name === "Meeting") {
      showSignDialog.value = true;
    }
    // 签到结束时
-    else if (data.type === "isEndSign" && route.name !== "Host") {
+    else if (data.type === "isEndSign" && route.name === "Meeting") {
      showSignDialog.value = false;
    }
    // 开始考试时
-    else if (data.type === "isStartExam" && route.name !== "Host") {
+    else if (data.type === "isStartExam" && route.name === "Meeting") {
      showExamDialog.value = true;
    }
    // 开始问卷时
-    else if (data.type === "isStartQuestionnaire" && route.name !== "Host") {
+    else if (data.type === "isStartQuestionnaire" && route.name === "Meeting") {
      showQuestionnaireDialog.value = true;
    }
    // 会议结束时
@ -590,7 +733,6 @@ const getStageQuestionnaireAnswer = (val) => {
 };

 const isFullScreen = ref(false);
-
 onMounted(() => {
  meetingContainerRef.value.style.background = ` url(${store.getters.templateBackgroundPic}) 0% 0% / cover no-repeat`;
  meetingWidth.value = meetingContainerRef.value.offsetWidth * 0.9;
@ -598,12 +740,13 @@ onMounted(() => {
  videoElementRef.value.style.width = `${meetingWidth.value}px`;
  videoElementRef.value.style.height = `${meetingHeight.value + 42}px`;

-  // 当退出全屏模式时
-  meetingContainerRef.value.addEventListener("fullscreenchange", () => {
+  // 当全屏状态改变时
+  fullscreenWrapRef.value.addEventListener("fullscreenchange", () => {
    if (document.fullscreenElement) {
      isFullScreen.value = true;
    } else {
      isFullScreen.value = false;
+      isVerticalFullScreen.value = false;
      nextTick(() => {
        meetingWidth.value = meetingContainerRef.value.offsetWidth * 0.9;
        meetingHeight.value = (meetingWidth.value * 9) / 16;
@ -614,6 +757,7 @@ onMounted(() => {
            "div[id*=suspension-view-tabpanel]>.zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root"
          )
          .forEach((el) => {
+            console.log(`${meetingHeight.value}px`);
            el.style.height = `${meetingHeight.value}px`;
          });
      });
@ -622,15 +766,26 @@ onMounted(() => {
  setTextLabel();
  startMeeting();
 });
-window.addEventListener(
-  "resize",
-  _.throttle(() => {
-    meetingWidth.value = meetingContainerRef.value.offsetWidth * 0.9;
-    meetingHeight.value = (meetingWidth.value * 9) / 16;
-    videoElementRef.value.style.width = `${meetingWidth.value}px`;
-    videoElementRef.value.style.height = `${meetingHeight.value + 42}px`;
-  }, 500)
-);
+window.addEventListener("resize", (e) => {
+  console.log(e);
+  meetingWidth.value = meetingContainerRef.value.offsetWidth * 0.9;
+  meetingHeight.value = (meetingWidth.value * 9) / 16;
+  videoElementRef.value.style.width = `${meetingWidth.value}px`;
+  videoElementRef.value.style.height = `${meetingHeight.value + 42}px`;
+  document
+    .querySelectorAll(
+      "div[id*=suspension-view-tabpanel]>.zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root"
+    )
+    .forEach((el) => {
+      console.log(`${meetingHeight.value}px`);
+      el.style.height = `${meetingHeight.value}px`;
+    });
+});
+window.addEventListener("orientationchange", function () {
+  console.log(
+    "the orientation of the device is now " + screen.orientation.angle
+  );
+});
 window.getCurrentUser = meetingConfig.client.getCurrentUser;
 window.getAttendeeslist = meetingConfig.client.getAttendeeslist;
 window.getCurrentMeetingInfo = meetingConfig.client.getCurrentMeetingInfo;
@ -645,13 +800,16 @@ onUnmounted(() => {
 </script>

 <style lang="scss" scoped>
-// $videoELementWidth: 80vw * 0.9;
-// $videoElementHeight: $videoELementWidth * 9 / 16 + 42px;
-// $videoWidth: 470px;
-// $videoHeight: $videoWidth * 9 / 16;
+$videoELementWidth: 80vw * 0.9;
+$videoElementHeight: $videoELementWidth * 9 / 16 + 1.5vw;
 $meetingComponentWitdh: 80vw * 0.9;
 $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;

+:deep(#right-chat .chat-container .message-list) {
+  height: $meetingComponentWitdh * 9 / 16;
+  overflow-y: scroll;
+}
+
 #app-container {
  #meeting-chat-row {
    display: flex;
@ -664,8 +822,8 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
      position: relative;
      .el-button {
        position: absolute;
-        right: 0;
-        bottom: 0;
+        right: 1vw;
+        bottom: 1vw;
      }
      :deep(.text-tag) {
        position: absolute;
@ -691,6 +849,8 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
      > div[class*="inSharing"]
      + div) {
    width: $meetingComponentWitdh * 0.5;
+    height: $meetingComponentWitdh * 0.5 * 9 / 16;
+    align-self: center;
  }
 }
 .layout-template-2 {
@ -699,6 +859,8 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
      > div[class*="inSharing"]
      + div) {
    width: $meetingComponentWitdh * 0.5;
+    height: $meetingComponentWitdh * 0.5 * 9 / 16;
+    align-self: center;
  }
  :deep(#suspension-view-tabpanel-ribbon
      > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root),
@ -754,6 +916,7 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
    > .zmwebsdk-MuiPaper-root
    > .zmwebsdk-MuiPaper-root:nth-child(2)) {
  width: 270px;
+  // height: 1.5vw;
  background: #ccc;
 }
 :deep(div[id*="suspension-view-tabpanel"]
@ -765,7 +928,44 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
  background: transparent;
  box-shadow: 0 0;
 }
-
+// 隐藏共享屏幕上方提示
+:deep(div[id*="suspension-view-tabpanel"]
+    div[class*="inSharing"]
+    > .zmwebsdk-MuiBox-root) {
+  display: none;
+}
+:deep(.check-media) {
+  .el-dialog__body {
+    text-align: center;
+    #check-media-wrap {
+      display: inline-block;
+      margin: 1vw auto;
+      // text-align: center;
+      border-radius: 1vw;
+      overflow: hidden;
+      width: 36vw;
+      height: 24vw;
+      background-color: #000;
+      position: relative;
+      svg {
+        position: absolute;
+        left: 1vw;
+        bottom: 1vw;
+        width: 3vw;
+        height: 3vw;
+      }
+      .microphone-loading {
+        color: #fff;
+      }
+      .microphone-on {
+        color: springgreen;
+      }
+      .microphone-off {
+        color: indianred;
+      }
+    }
+  }
+}
 // 适配移动端 屏幕宽度小于 900px
@media screen and (max-width: 900px) {
  $meetingComponentWitdh: 100vw * 0.9;
@ -782,19 +982,20 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
      > .zmwebsdk-MuiPaper-root:nth-child(1)) {
    width: $meetingComponentWitdh !important;
  }
-  :deep(div[id="suspension-view-tabpanel"]
-      > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root) {
-    height: calc(100vw * 0.9 * 9 / 16) !important;
-  }
+  // :deep(div[id*="suspension-view-tabpanel"]
+  //     > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root) {
+  //   height: calc(100vw * 0.9 * 9 / 16) !important;
+  // }

  .layout-template-1 {
    :deep(div[id*="suspension-view-tabpanel"]
        > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
        > div[class*="inSharing"]
        + div) {
-      width: $meetingComponentWitdh * 0.5;
-      height: $meetingComponentWitdh * 0.5 * 9 / 14;
-      align-self: center;
+      width: $meetingComponentWitdh * 0.2;
+      height: $meetingComponentWitdh * 0.2 * 9 / 14.5;
+      position: relative;
+      align-self: initial;
    }
  }
  .layout-template-2 {
@ -802,9 +1003,10 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
        > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
        > div[class*="inSharing"]
        + div) {
-      width: $meetingComponentWitdh * 0.5;
-      height: $meetingComponentWitdh * 0.5 * 9 / 14;
-      align-self: center;
+      width: $meetingComponentWitdh * 0.2;
+      height: $meetingComponentWitdh * 0.2 * 9 / 14.5;
+      position: relative;
+      align-self: initial;
    }
  }
  .layout-template-3 {
@ -813,7 +1015,7 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
        > div[class*="inSharing"]
        + div) {
      width: $meetingComponentWitdh * 0.2;
-      height: $meetingComponentWitdh * 0.2 * 9 / 14;
+      height: $meetingComponentWitdh * 0.2 * 9 / 14.5;
      position: relative;
      // align-self: center;
    }
@ -824,74 +1026,128 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
        > div[class*="inSharing"]
        + div) {
      width: $meetingComponentWitdh * 0.2;
-      height: $meetingComponentWitdh * 0.2 * 9 / 14;
+      height: $meetingComponentWitdh * 0.2 * 9 / 14.5;
      position: relative;
      // align-self: center;
    }
  }
-}
-
-// 全屏样式
-#meeting-container.fullscreen {
-  $meetingComponentWitdh: 100vw * 0.9;
-  $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
-  padding-top: calc(100vw * 0.08) !important;
-  width: 100vw !important;
-
-  .layout-template-1 {
-    :deep(div[id*="suspension-view-tabpanel"]
-        > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
-        > div[class*="inSharing"]
-        + div) {
-      width: $meetingComponentWitdh * 0.5;
-    }
-  }
-  .layout-template-2 {
-    :deep(div[id*="suspension-view-tabpanel"]
-        > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
-        > div[class*="inSharing"]
-        + div) {
-      width: $meetingComponentWitdh * 0.5;
-    }
-  }
-  .layout-template-3 {
-    :deep(div[id*="suspension-view-tabpanel"]
-        > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
-        > div[class*="inSharing"]
-        + div) {
-      width: $meetingComponentWitdh * 0.2;
-      height: $meetingComponentWitdh * 0.2 * 9 / 16;
-      position: relative;
-      // align-self: center;
-    }
-  }
-  .layout-template-4 {
-    :deep(div[id*="suspension-view-tabpanel"]
-        > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
-        > div[class*="inSharing"]
-        + div) {
-      width: $meetingComponentWitdh * 0.2;
-      height: $meetingComponentWitdh * 0.2 * 9 / 16;
-      position: relative;
-      // align-self: center;
-    }
-  }
-
-  :deep(#video-element
-      > div
-      > .zmwebsdk-MuiPaper-root
-      > .zmwebsdk-MuiPaper-root:nth-child(1)) {
-    width: calc(100vw * 0.9);
-  }
-  :deep(#video-element
-      > div
-      > .zmwebsdk-MuiPaper-root
-      > .zmwebsdk-MuiPaper-root:nth-child(2)) {
-    display: none;
-  }
  :deep(div[id*="suspension-view-tabpanel"]
      > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root) {
    height: calc(100vw * 0.9 * 9 / 16);
  }
+  :deep(.check-media) {
+    #check-media-wrap {
+      margin: 2vw auto !important;
+      width: 80vw !important;
+      height: 54vw !important;
+      svg {
+        width: 6vw !important;
+        height: 6vw !important;
+      }
+    }
+  }
+}
+
+// 全屏样式
+.fullscreen-wrap {
+  width: 100%;
+  height: 100%;
+  #meeting-container.fullscreen {
+    $meetingComponentWitdh: 100vw * 0.9;
+    $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
+    padding-top: calc(100vw * 0.08) !important;
+    width: 100vw !important;
+    #video-element {
+      // width: calc(100vw * 0.9) !important;
+      // height: calc(100vw * 0.9 * 9 / 16 + 1.5vw) !important;
+    }
+    .layout-template-1 {
+      :deep(div[id*="suspension-view-tabpanel"]
+          > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
+          > div[class*="inSharing"]
+          + div) {
+        width: $meetingComponentWitdh * 0.5;
+        height: $meetingComponentWitdh * 0.5 * 9 / 16;
+        position: relative;
+        // align-self: initial;
+      }
+    }
+    .layout-template-2 {
+      :deep(div[id*="suspension-view-tabpanel"]
+          > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
+          > div[class*="inSharing"]
+          + div) {
+        width: $meetingComponentWitdh * 0.5;
+        height: $meetingComponentWitdh * 0.5 * 9 / 16;
+        position: relative;
+        // align-self: initial;
+      }
+    }
+    .layout-template-3 {
+      :deep(div[id*="suspension-view-tabpanel"]
+          > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
+          > div[class*="inSharing"]
+          + div) {
+        width: $meetingComponentWitdh * 0.2;
+        height: $meetingComponentWitdh * 0.2 * 9 / 16;
+        position: relative;
+        // align-self: center;
+      }
+    }
+    .layout-template-4 {
+      :deep(div[id*="suspension-view-tabpanel"]
+          > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
+          > div[class*="inSharing"]
+          + div) {
+        width: $meetingComponentWitdh * 0.2;
+        height: $meetingComponentWitdh * 0.2 * 9 / 16;
+        position: relative;
+        // align-self: center;
+      }
+    }
+
+    :deep(#video-element
+        > div
+        > .zmwebsdk-MuiPaper-root
+        > .zmwebsdk-MuiPaper-root:nth-child(1)) {
+      width: calc(100vw * 0.9);
+    }
+    :deep(#video-element
+        > div
+        > .zmwebsdk-MuiPaper-root
+        > .zmwebsdk-MuiPaper-root:nth-child(2)) {
+      display: none;
+    }
+    :deep(div[id*="suspension-view-tabpanel"]
+        > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root) {
+      height: calc(100vw * 0.9 * 9 / 16) !important;
+    }
+  }
+
+  #meeting-container.verticalFullScreen {
+    position: absolute;
+    transform-origin: 0% 0%;
+    transform: rotate(90deg);
+    top: 0;
+    left: 100vw;
+    width: 100vh !important;
+    height: calc(92vw);
+    :deep(#video-element
+        > div
+        > .zmwebsdk-MuiPaper-root
+        > .zmwebsdk-MuiPaper-root:nth-child(1)) {
+      width: calc(100vh * 0.9) !important;
+    }
+    :deep(#video-element
+        > div
+        > .zmwebsdk-MuiPaper-root
+        > .zmwebsdk-MuiPaper-root:nth-child(2)) {
+      display: none;
+    }
+    // :deep(div[id*="suspension-view-tabpanel"]
+    //     > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root) {
+    //   height: calc(100vh * 0.9 * 9 / 16) !important;
+    // }
+  }
 }
 </style>
				`@ -0,0 +1 @@`
				!function(e){var t,n,c,o,i,d='<svg><symbol id="icon-hengping" viewBox="0 0 1024 1024"><path d="M924.23621932 877.12193043H535.08765856c-53.6870912-0.02761681-97.21119393-43.48267751-97.22500236-97.10072668V99.88805635c0.01380842-53.61804916 43.53791115-97.08691826 97.22500236-97.10072666h389.02428509c53.70089962 0 97.23881076 43.46886912 97.25261916 97.10072666V780.02120375a96.8784113 96.8784113 0 0 1-28.40389573 68.68302254 97.11867762 97.11867762 0 0 1-68.75206459 28.41770414h0.02761683z m24.27518166-752.86203354c0-26.85735402-21.78966818-48.61940537-48.67463901-48.61940537H559.48711591c-26.88497083 0-48.67463902 21.76205138-48.67463901 48.61940537v461.40796103h437.69892408V124.25989689z m0 534.27493126H510.8124769v97.10072667c0 26.85735402 21.78966818 48.61940537 48.67463901 48.61940537h340.47392174c26.85735402 0 48.6470222-21.76205138 48.64702219-48.61940537v-97.10072667h-0.09665886z m-218.84946205 121.4725672a48.6470222 48.6470222 0 0 1-42.14326192-24.26137327 48.56555259 48.56555259 0 0 1-0.04142522-48.59178857 48.66497312 48.66497312 0 0 1 42.1156451-24.31660688c26.87116241-0.02761681 48.6608306 21.72062615 48.67463901 48.55036333 0.02761681 26.8435456-21.73443455 48.60559698-48.60559697 48.61940539zM140.42954293 274.55061207c16.21107126-27.98964348 40.01676705-63.28393491 71.38947055-94.58759639 64.48526643-64.45764962 150.34594882-107.04278061 150.34594881-107.0427806 13.40796438-14.38836139 13.00752055-36.79940794-0.91135494-50.6906666-13.9188755-13.89125869-36.35753887-14.27789411-50.75970865-0.86992973-14.38836139 13.40796438-82.72617371 45.44347149-147.36333263 109.95635474-35.91566981 35.92947822-65.89372406 77.36851132-85.61213105 107.27752354l-60.28751033-34.3829365v194.33953745l194.57428038-83.23708482-71.36185374-40.73480427-0.0138084-0.02761682z m-43.01319164 165.39711378h243.12464372c13.03513737 0 25.07606935 6.94562933 31.59363802 18.21329047 6.51756868 11.26766112 6.51756868 25.1589198 0 36.4265809s-18.55850066 18.21329046-31.59363802 18.21329045H121.69153296c-26.85735402 0-48.6470222 21.76205138-48.64702221 48.6194054v340.05966948c0 26.82973718 21.74824297 48.59178857 48.64702221 48.59178856h656.54838613c13.46319803 0 24.30279849-10.93625932 24.30279849-24.24756486 0-13.00752055 6.94562933-25.03464412 18.24090727-31.5522128a36.54533323 36.54533323 0 0 1 36.48181454 0 36.39758325 36.39758325 0 0 1 18.24090728 31.5522128c-0.02761681 53.63185757-43.55171956 97.11453508-97.25261917 97.11453508H97.38873447c-53.6870912-0.02761681-97.19738554-43.48267751-97.22500235-97.11453508V537.04845253c0.01380842-53.61804916 43.53791115-97.08691826 97.22500235-97.10072668h0.02761682z m0 0" fill="#2c2c2c" ></path></symbol></svg>',l=(l=document.getElementsByTagName("script"))[l.length-1].getAttribute("data-injectcss"),a=function(e,t){t.parentNode.insertBefore(e,t)};if(l&&!e.__iconfont__svg__cssinject__){e.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(e){console&&console.log(e)}}function s(){i\|\|(i=!0,c())}function r(){try{o.documentElement.doScroll("left")}catch(e){return void setTimeout(r,50)}s()}t=function(){var e,t=document.createElement("div");t.innerHTML=d,d=null,(t=t.getElementsByTagName("svg")[0])&&(t.setAttribute("aria-hidden","true"),t.style.position="absolute",t.style.width=0,t.style.height=0,t.style.overflow="hidden",t=t,(e=document.body).firstChild?a(t,e.firstChild):e.appendChild(t))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(t,0):(n=function(){document.removeEventListener("DOMContentLoaded",n,!1),t()},document.addEventListener("DOMContentLoaded",n,!1)):document.attachEvent&&(c=t,o=e.document,i=!1,r(),o.onreadystatechange=function(){"complete"==o.readyState&&(o.onreadystatechange=null,s())})}(window);