rotate 全屏 进度50%
This commit is contained in:
11
src/App.vue
11
src/App.vue
@ -8,7 +8,12 @@ body {
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
/* .el-message {
|
|
||||||
width: 80%;
|
.icon {
|
||||||
} */
|
width: 1em;
|
||||||
|
height: 1em;
|
||||||
|
vertical-align: -0.15em;
|
||||||
|
fill: currentColor;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
539
src/assets/fonts/demo.css
Normal file
539
src/assets/fonts/demo.css
Normal file
@ -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;
|
||||||
|
}
|
||||||
211
src/assets/fonts/demo_index.html
Normal file
211
src/assets/fonts/demo_index.html
Normal file
@ -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"></span>
|
||||||
|
<div class="name">横屏</div>
|
||||||
|
<div class="code-name">&#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"
|
||||||
|
><span class="iconfont">&#x33;</span>
|
||||||
|
</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"><link rel="stylesheet" href="./iconfont.css">
|
||||||
|
</code></pre>
|
||||||
|
<h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
|
||||||
|
<pre><code class="language-html"><span class="iconfont icon-xxx"></span>
|
||||||
|
</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"><script src="./iconfont.js"></script>
|
||||||
|
</code></pre>
|
||||||
|
<h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
|
||||||
|
<pre><code class="language-html"><style>
|
||||||
|
.icon {
|
||||||
|
width: 1em;
|
||||||
|
height: 1em;
|
||||||
|
vertical-align: -0.15em;
|
||||||
|
fill: currentColor;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</code></pre>
|
||||||
|
<h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
|
||||||
|
<pre><code class="language-html"><svg class="icon" aria-hidden="true">
|
||||||
|
<use xlink:href="#icon-xxx"></use>
|
||||||
|
</svg>
|
||||||
|
</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>
|
||||||
19
src/assets/fonts/iconfont.css
Normal file
19
src/assets/fonts/iconfont.css
Normal file
@ -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";
|
||||||
|
}
|
||||||
|
|
||||||
1
src/assets/fonts/iconfont.js
Normal file
1
src/assets/fonts/iconfont.js
Normal file
@ -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);
|
||||||
16
src/assets/fonts/iconfont.json
Normal file
16
src/assets/fonts/iconfont.json
Normal file
@ -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
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
BIN
src/assets/fonts/iconfont.ttf
Normal file
BIN
src/assets/fonts/iconfont.ttf
Normal file
Binary file not shown.
BIN
src/assets/fonts/iconfont.woff
Normal file
BIN
src/assets/fonts/iconfont.woff
Normal file
Binary file not shown.
BIN
src/assets/fonts/iconfont.woff2
Normal file
BIN
src/assets/fonts/iconfont.woff2
Normal file
Binary file not shown.
@ -39,7 +39,9 @@
|
|||||||
v-model="editingMessage"
|
v-model="editingMessage"
|
||||||
class="message-input"
|
class="message-input"
|
||||||
></el-input>
|
></el-input>
|
||||||
<el-button @click="sendMessage">发送</el-button>
|
<el-button @click="sendMessage" :disabled="editingMessage.length === 0"
|
||||||
|
>发送</el-button
|
||||||
|
>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<el-dialog title="富文本输入框" v-model="showRichEditor">
|
<el-dialog title="富文本输入框" v-model="showRichEditor">
|
||||||
@ -117,7 +119,7 @@ const sendMessage = () => {
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: space-between;
|
justify-content: space-around;
|
||||||
.message-list {
|
.message-list {
|
||||||
background-color: #f5f5f5;
|
background-color: #f5f5f5;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
@ -168,7 +170,7 @@ const sendMessage = () => {
|
|||||||
}
|
}
|
||||||
.input-bar {
|
.input-bar {
|
||||||
display: flex;
|
display: flex;
|
||||||
margin: 10px 0;
|
// margin: 10px 0;
|
||||||
.message-input {
|
.message-input {
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -6,6 +6,7 @@ import locale from "element-plus/lib/locale/lang/zh-cn"; // 中文语言
|
|||||||
import "element-plus/dist/index.css";
|
import "element-plus/dist/index.css";
|
||||||
import router from "@/router";
|
import router from "@/router";
|
||||||
import store from "@/store";
|
import store from "@/store";
|
||||||
|
import "@/assets/fonts/iconfont";
|
||||||
createApp(App)
|
createApp(App)
|
||||||
.use(router)
|
.use(router)
|
||||||
.use(store)
|
.use(store)
|
||||||
|
|||||||
@ -2,17 +2,33 @@
|
|||||||
<div id="app-container" ref="appContainerRef">
|
<div id="app-container" ref="appContainerRef">
|
||||||
<!-- zoom 会议组件 -->
|
<!-- zoom 会议组件 -->
|
||||||
<div id="meeting-chat-row">
|
<div id="meeting-chat-row">
|
||||||
|
<div class="fullscreen-wrap" ref="fullscreenWrapRef">
|
||||||
<div
|
<div
|
||||||
id="meeting-container"
|
id="meeting-container"
|
||||||
ref="meetingContainerRef"
|
ref="meetingContainerRef"
|
||||||
:class="{ fullscreen: isFullScreen }"
|
:class="{
|
||||||
|
fullscreen: isFullScreen && !isVerticalFullScreen,
|
||||||
|
verticalFullScreen: isVerticalFullScreen,
|
||||||
|
}"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
id="video-element"
|
id="video-element"
|
||||||
:class="`layout-template-${templateId}`"
|
:class="`layout-template-${templateId}`"
|
||||||
ref="videoElementRef"
|
ref="videoElementRef"
|
||||||
></div>
|
></div>
|
||||||
<el-button :icon="FullScreen" circle @click="setFullScreen"></el-button>
|
<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>
|
||||||
<div id="right-chat">
|
<div id="right-chat">
|
||||||
<Chat
|
<Chat
|
||||||
@ -64,6 +80,62 @@
|
|||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
</el-dialog>
|
</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
|
<questions
|
||||||
mode="1"
|
mode="1"
|
||||||
@stage="getStageExamAnswer"
|
@stage="getStageExamAnswer"
|
||||||
@ -79,6 +151,15 @@
|
|||||||
:showDialog="showQuestionnaireDialog"
|
:showDialog="showQuestionnaireDialog"
|
||||||
@close="showQuestionnaireDialog = $event"
|
@close="showQuestionnaireDialog = $event"
|
||||||
></questions>
|
></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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -100,7 +181,12 @@ import { uniqueId } from "lodash";
|
|||||||
import ZoomMtgEmbedded from "@zoomus/websdk/embedded";
|
import ZoomMtgEmbedded from "@zoomus/websdk/embedded";
|
||||||
import ReconnectingWebSocket from "reconnecting-websocket";
|
import ReconnectingWebSocket from "reconnecting-websocket";
|
||||||
import { ElMessage, ElMessageBox } from "element-plus";
|
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 { signMeeting, generateSignature } from "@/api/meeting";
|
||||||
import Chat from "@/components/chat";
|
import Chat from "@/components/chat";
|
||||||
import questions from "@/components/questions";
|
import questions from "@/components/questions";
|
||||||
@ -198,7 +284,7 @@ const startMeeting = async () => {
|
|||||||
console.log(meetingConfig.client.getAttendeeslist());
|
console.log(meetingConfig.client.getAttendeeslist());
|
||||||
document.querySelector("#suspension-view-tab-thumbnail-gallery").click();
|
document.querySelector("#suspension-view-tab-thumbnail-gallery").click();
|
||||||
|
|
||||||
// 自动点击允许共享屏幕
|
// 自动点击允许共享屏幕 //TODO:自动点击按钮
|
||||||
if (route.name === "Host") {
|
if (route.name === "Host") {
|
||||||
const safeButton = document.querySelector('button[title="安全"]');
|
const safeButton = document.querySelector('button[title="安全"]');
|
||||||
if (safeButton) {
|
if (safeButton) {
|
||||||
@ -216,59 +302,63 @@ const startMeeting = async () => {
|
|||||||
isMeetingLoading.value = false;
|
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.client = meetingConfig.client;
|
||||||
window.startMeeting = startMeeting;
|
window.startMeeting = startMeeting;
|
||||||
|
|
||||||
// 使摄像头窗口显示在右上角，当切换布局或resize、横屏时执行
|
const checkMediaVideoRef = ref(null);
|
||||||
const makeVideoTop = () => {
|
const checkMediaWrapRef = ref(null);
|
||||||
const screenShareEl = document.querySelector(
|
const showCheckMediaVideo = ref(true);
|
||||||
'div[id*="suspension-view-tabpanel"]>div.zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root>div[class*="inSharing"]>div'
|
const isVideoAvailable = ref(undefined);
|
||||||
);
|
const isAudioAvailable = ref(undefined);
|
||||||
if (screenShareEl) console.log(screenShareEl.offsetTop);
|
onMounted(() => {
|
||||||
};
|
nextTick(() => {
|
||||||
// 根据id设置布局
|
const videoWidth = checkMediaWrapRef.value.offsetWidth;
|
||||||
// const setLayout = (templateId) => {
|
const videoHeight = checkMediaWrapRef.value.offsetHeight;
|
||||||
// videoElementRef.value.className = `layout-template-${templateId}`;
|
console.log(checkMediaVideoRef.value);
|
||||||
// if (templateId === "1") {
|
navigator.mediaDevices
|
||||||
// } else if (templateId === "2") {
|
.getUserMedia({ video: { width: videoWidth, height: videoHeight } })
|
||||||
// } else if (templateId === "3") {
|
.then((stream) => {
|
||||||
// }
|
checkMediaVideoRef.value.srcObject = stream;
|
||||||
// };
|
checkMediaVideoRef.value.play();
|
||||||
// const setLayout = (templateId) => {
|
isVideoAvailable.value = true;
|
||||||
// console.log(templateId);
|
})
|
||||||
// const videoScreenWrapEl = document.querySelectorAll(
|
.catch((err) => {
|
||||||
// ".zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root"
|
console.log(err);
|
||||||
// )[2]; // 包含视频和课件的容器
|
isVideoAvailable.value = false;
|
||||||
// videoScreenWrapEl.style.flexDirection = "";
|
});
|
||||||
// const videoWrapEl = videoScreenWrapEl.lastChild;
|
});
|
||||||
|
navigator.mediaDevices
|
||||||
// if (!inSharing.value) return;
|
.getUserMedia({ audio: true })
|
||||||
// const screenWrapEl = document.querySelector(
|
.then((stream) => {
|
||||||
// `div[class*="zmwebsdk-makeStyles-inSharing"]`
|
console.log(stream);
|
||||||
// );
|
isAudioAvailable.value = true;
|
||||||
// if (templateId === "1") {
|
})
|
||||||
// // 课件|视频 对半分
|
.catch((err) => {
|
||||||
// videoWrapEl.style.width = `${meetingWidth.value / 2 - 2}px`;
|
console.log(err);
|
||||||
// } else if (templateId === "2") {
|
isAudioAvailable.value = false;
|
||||||
// // 视频|课件 对半分
|
});
|
||||||
// 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 setTextLabel = () => {
|
const setTextLabel = () => {
|
||||||
@ -361,11 +451,15 @@ setInterval(() => {
|
|||||||
}
|
}
|
||||||
// ------
|
// ------
|
||||||
|
|
||||||
|
// TODO:
|
||||||
// 检测是否存在"同意被设为嘉宾按钮",存在则自动点击
|
// 检测是否存在"同意被设为嘉宾按钮",存在则自动点击
|
||||||
const isSetAsGuest = document.querySelector(
|
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"
|
".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();
|
isSetAsGuest.click();
|
||||||
}
|
}
|
||||||
// -------
|
// -------
|
||||||
@ -376,15 +470,19 @@ setInterval(() => {
|
|||||||
.join("$");
|
.join("$");
|
||||||
|
|
||||||
// 检测共享屏幕canvas距离父元素顶部距离
|
// 检测共享屏幕canvas距离父元素顶部距离
|
||||||
// const shareScreenWrapEl =
|
|
||||||
const shareScreenCanvasEl = document.querySelector(
|
const shareScreenCanvasEl = document.querySelector(
|
||||||
'div[id*="suspension-view-tabpanel"]>.zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root>div[class*="inSharing"]>div:first-child'
|
'div[id*="suspension-view-tabpanel"]>.zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root>div[class*="inSharing"]>div:first-child'
|
||||||
);
|
);
|
||||||
// console.log(shareScreenCanvasEl);
|
|
||||||
if (shareScreenCanvasEl) {
|
if (shareScreenCanvasEl) {
|
||||||
|
if (templateId.value == 3 || templateId.value == 4 || screen.width < 900) {
|
||||||
document.querySelector(
|
document.querySelector(
|
||||||
`div[id*="suspension-view-tabpanel"] > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root > div[class*="inSharing"] + div`
|
`div[id*="suspension-view-tabpanel"] > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root > div[class*="inSharing"] + div`
|
||||||
).style.top = `${shareScreenCanvasEl.offsetTop}px`;
|
).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);
|
}, 500);
|
||||||
|
|
||||||
@ -402,6 +500,7 @@ watch(inSharing, (val) => {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 监听参会人员videoOn状态变化，自动切换到已开启摄像头的用户
|
||||||
watch(attendeeslist, (val) => {
|
watch(attendeeslist, (val) => {
|
||||||
console.log(val);
|
console.log(val);
|
||||||
if (inSharing.value) {
|
if (inSharing.value) {
|
||||||
@ -410,9 +509,49 @@ watch(attendeeslist, (val) => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
// 点击进入全屏模式
|
// 点击进入全屏模式
|
||||||
|
const fullscreenWrapRef = ref(null);
|
||||||
|
const isVerticalFullScreen = ref(false);
|
||||||
|
const showHorizontalScreen = ref(false);
|
||||||
const setFullScreen = async () => {
|
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;
|
isFullScreen.value = true;
|
||||||
|
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
|
document
|
||||||
.querySelectorAll(
|
.querySelectorAll(
|
||||||
"div[id*=suspension-view-tabpanel]>.zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root"
|
"div[id*=suspension-view-tabpanel]>.zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root"
|
||||||
@ -423,6 +562,10 @@ const setFullScreen = async () => {
|
|||||||
`height: ${screen.height - screen.width * 0.08}px !important`
|
`height: ${screen.height - screen.width * 0.08}px !important`
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
const quitFullScreen = () => {
|
||||||
|
document.exitFullscreen();
|
||||||
};
|
};
|
||||||
// 是否显示考试和问卷弹窗
|
// 是否显示考试和问卷弹窗
|
||||||
const showExamDialog = ref(false);
|
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;
|
showSignDialog.value = true;
|
||||||
}
|
}
|
||||||
// 签到结束时
|
// 签到结束时
|
||||||
else if (data.type === "isEndSign" && route.name !== "Host") {
|
else if (data.type === "isEndSign" && route.name === "Meeting") {
|
||||||
showSignDialog.value = false;
|
showSignDialog.value = false;
|
||||||
}
|
}
|
||||||
// 开始考试时
|
// 开始考试时
|
||||||
else if (data.type === "isStartExam" && route.name !== "Host") {
|
else if (data.type === "isStartExam" && route.name === "Meeting") {
|
||||||
showExamDialog.value = true;
|
showExamDialog.value = true;
|
||||||
}
|
}
|
||||||
// 开始问卷时
|
// 开始问卷时
|
||||||
else if (data.type === "isStartQuestionnaire" && route.name !== "Host") {
|
else if (data.type === "isStartQuestionnaire" && route.name === "Meeting") {
|
||||||
showQuestionnaireDialog.value = true;
|
showQuestionnaireDialog.value = true;
|
||||||
}
|
}
|
||||||
// 会议结束时
|
// 会议结束时
|
||||||
@ -590,7 +733,6 @@ const getStageQuestionnaireAnswer = (val) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const isFullScreen = ref(false);
|
const isFullScreen = ref(false);
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
meetingContainerRef.value.style.background = ` url(${store.getters.templateBackgroundPic}) 0% 0% / cover no-repeat`;
|
meetingContainerRef.value.style.background = ` url(${store.getters.templateBackgroundPic}) 0% 0% / cover no-repeat`;
|
||||||
meetingWidth.value = meetingContainerRef.value.offsetWidth * 0.9;
|
meetingWidth.value = meetingContainerRef.value.offsetWidth * 0.9;
|
||||||
@ -598,12 +740,13 @@ onMounted(() => {
|
|||||||
videoElementRef.value.style.width = `${meetingWidth.value}px`;
|
videoElementRef.value.style.width = `${meetingWidth.value}px`;
|
||||||
videoElementRef.value.style.height = `${meetingHeight.value + 42}px`;
|
videoElementRef.value.style.height = `${meetingHeight.value + 42}px`;
|
||||||
|
|
||||||
// 当退出全屏模式时
|
// 当全屏状态改变时
|
||||||
meetingContainerRef.value.addEventListener("fullscreenchange", () => {
|
fullscreenWrapRef.value.addEventListener("fullscreenchange", () => {
|
||||||
if (document.fullscreenElement) {
|
if (document.fullscreenElement) {
|
||||||
isFullScreen.value = true;
|
isFullScreen.value = true;
|
||||||
} else {
|
} else {
|
||||||
isFullScreen.value = false;
|
isFullScreen.value = false;
|
||||||
|
isVerticalFullScreen.value = false;
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
meetingWidth.value = meetingContainerRef.value.offsetWidth * 0.9;
|
meetingWidth.value = meetingContainerRef.value.offsetWidth * 0.9;
|
||||||
meetingHeight.value = (meetingWidth.value * 9) / 16;
|
meetingHeight.value = (meetingWidth.value * 9) / 16;
|
||||||
@ -614,6 +757,7 @@ onMounted(() => {
|
|||||||
"div[id*=suspension-view-tabpanel]>.zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root"
|
"div[id*=suspension-view-tabpanel]>.zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root"
|
||||||
)
|
)
|
||||||
.forEach((el) => {
|
.forEach((el) => {
|
||||||
|
console.log(`${meetingHeight.value}px`);
|
||||||
el.style.height = `${meetingHeight.value}px`;
|
el.style.height = `${meetingHeight.value}px`;
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
@ -622,15 +766,26 @@ onMounted(() => {
|
|||||||
setTextLabel();
|
setTextLabel();
|
||||||
startMeeting();
|
startMeeting();
|
||||||
});
|
});
|
||||||
window.addEventListener(
|
window.addEventListener("resize", (e) => {
|
||||||
"resize",
|
console.log(e);
|
||||||
_.throttle(() => {
|
|
||||||
meetingWidth.value = meetingContainerRef.value.offsetWidth * 0.9;
|
meetingWidth.value = meetingContainerRef.value.offsetWidth * 0.9;
|
||||||
meetingHeight.value = (meetingWidth.value * 9) / 16;
|
meetingHeight.value = (meetingWidth.value * 9) / 16;
|
||||||
videoElementRef.value.style.width = `${meetingWidth.value}px`;
|
videoElementRef.value.style.width = `${meetingWidth.value}px`;
|
||||||
videoElementRef.value.style.height = `${meetingHeight.value + 42}px`;
|
videoElementRef.value.style.height = `${meetingHeight.value + 42}px`;
|
||||||
}, 500)
|
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.getCurrentUser = meetingConfig.client.getCurrentUser;
|
||||||
window.getAttendeeslist = meetingConfig.client.getAttendeeslist;
|
window.getAttendeeslist = meetingConfig.client.getAttendeeslist;
|
||||||
window.getCurrentMeetingInfo = meetingConfig.client.getCurrentMeetingInfo;
|
window.getCurrentMeetingInfo = meetingConfig.client.getCurrentMeetingInfo;
|
||||||
@ -645,13 +800,16 @@ onUnmounted(() => {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
// $videoELementWidth: 80vw * 0.9;
|
$videoELementWidth: 80vw * 0.9;
|
||||||
// $videoElementHeight: $videoELementWidth * 9 / 16 + 42px;
|
$videoElementHeight: $videoELementWidth * 9 / 16 + 1.5vw;
|
||||||
// $videoWidth: 470px;
|
|
||||||
// $videoHeight: $videoWidth * 9 / 16;
|
|
||||||
$meetingComponentWitdh: 80vw * 0.9;
|
$meetingComponentWitdh: 80vw * 0.9;
|
||||||
$meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
|
$meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
|
||||||
|
|
||||||
|
:deep(#right-chat .chat-container .message-list) {
|
||||||
|
height: $meetingComponentWitdh * 9 / 16;
|
||||||
|
overflow-y: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
#app-container {
|
#app-container {
|
||||||
#meeting-chat-row {
|
#meeting-chat-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -664,8 +822,8 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
|
|||||||
position: relative;
|
position: relative;
|
||||||
.el-button {
|
.el-button {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0;
|
right: 1vw;
|
||||||
bottom: 0;
|
bottom: 1vw;
|
||||||
}
|
}
|
||||||
:deep(.text-tag) {
|
:deep(.text-tag) {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@ -691,6 +849,8 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
|
|||||||
> div[class*="inSharing"]
|
> div[class*="inSharing"]
|
||||||
+ div) {
|
+ div) {
|
||||||
width: $meetingComponentWitdh * 0.5;
|
width: $meetingComponentWitdh * 0.5;
|
||||||
|
height: $meetingComponentWitdh * 0.5 * 9 / 16;
|
||||||
|
align-self: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.layout-template-2 {
|
.layout-template-2 {
|
||||||
@ -699,6 +859,8 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
|
|||||||
> div[class*="inSharing"]
|
> div[class*="inSharing"]
|
||||||
+ div) {
|
+ div) {
|
||||||
width: $meetingComponentWitdh * 0.5;
|
width: $meetingComponentWitdh * 0.5;
|
||||||
|
height: $meetingComponentWitdh * 0.5 * 9 / 16;
|
||||||
|
align-self: center;
|
||||||
}
|
}
|
||||||
:deep(#suspension-view-tabpanel-ribbon
|
:deep(#suspension-view-tabpanel-ribbon
|
||||||
> .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root),
|
> .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root),
|
||||||
@ -754,6 +916,7 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
|
|||||||
> .zmwebsdk-MuiPaper-root
|
> .zmwebsdk-MuiPaper-root
|
||||||
> .zmwebsdk-MuiPaper-root:nth-child(2)) {
|
> .zmwebsdk-MuiPaper-root:nth-child(2)) {
|
||||||
width: 270px;
|
width: 270px;
|
||||||
|
// height: 1.5vw;
|
||||||
background: #ccc;
|
background: #ccc;
|
||||||
}
|
}
|
||||||
:deep(div[id*="suspension-view-tabpanel"]
|
:deep(div[id*="suspension-view-tabpanel"]
|
||||||
@ -765,7 +928,44 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
|
|||||||
background: transparent;
|
background: transparent;
|
||||||
box-shadow: 0 0;
|
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
|
// 适配移动端 屏幕宽度小于 900px
|
||||||
@media screen and (max-width: 900px) {
|
@media screen and (max-width: 900px) {
|
||||||
$meetingComponentWitdh: 100vw * 0.9;
|
$meetingComponentWitdh: 100vw * 0.9;
|
||||||
@ -782,19 +982,20 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
|
|||||||
> .zmwebsdk-MuiPaper-root:nth-child(1)) {
|
> .zmwebsdk-MuiPaper-root:nth-child(1)) {
|
||||||
width: $meetingComponentWitdh !important;
|
width: $meetingComponentWitdh !important;
|
||||||
}
|
}
|
||||||
:deep(div[id="suspension-view-tabpanel"]
|
// :deep(div[id*="suspension-view-tabpanel"]
|
||||||
> .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root) {
|
// > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root) {
|
||||||
height: calc(100vw * 0.9 * 9 / 16) !important;
|
// height: calc(100vw * 0.9 * 9 / 16) !important;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.layout-template-1 {
|
.layout-template-1 {
|
||||||
:deep(div[id*="suspension-view-tabpanel"]
|
:deep(div[id*="suspension-view-tabpanel"]
|
||||||
> .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
|
> .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
|
||||||
> div[class*="inSharing"]
|
> div[class*="inSharing"]
|
||||||
+ div) {
|
+ div) {
|
||||||
width: $meetingComponentWitdh * 0.5;
|
width: $meetingComponentWitdh * 0.2;
|
||||||
height: $meetingComponentWitdh * 0.5 * 9 / 14;
|
height: $meetingComponentWitdh * 0.2 * 9 / 14.5;
|
||||||
align-self: center;
|
position: relative;
|
||||||
|
align-self: initial;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.layout-template-2 {
|
.layout-template-2 {
|
||||||
@ -802,9 +1003,10 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
|
|||||||
> .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
|
> .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
|
||||||
> div[class*="inSharing"]
|
> div[class*="inSharing"]
|
||||||
+ div) {
|
+ div) {
|
||||||
width: $meetingComponentWitdh * 0.5;
|
width: $meetingComponentWitdh * 0.2;
|
||||||
height: $meetingComponentWitdh * 0.5 * 9 / 14;
|
height: $meetingComponentWitdh * 0.2 * 9 / 14.5;
|
||||||
align-self: center;
|
position: relative;
|
||||||
|
align-self: initial;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.layout-template-3 {
|
.layout-template-3 {
|
||||||
@ -813,7 +1015,7 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
|
|||||||
> div[class*="inSharing"]
|
> div[class*="inSharing"]
|
||||||
+ div) {
|
+ div) {
|
||||||
width: $meetingComponentWitdh * 0.2;
|
width: $meetingComponentWitdh * 0.2;
|
||||||
height: $meetingComponentWitdh * 0.2 * 9 / 14;
|
height: $meetingComponentWitdh * 0.2 * 9 / 14.5;
|
||||||
position: relative;
|
position: relative;
|
||||||
// align-self: center;
|
// align-self: center;
|
||||||
}
|
}
|
||||||
@ -824,26 +1026,50 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
|
|||||||
> div[class*="inSharing"]
|
> div[class*="inSharing"]
|
||||||
+ div) {
|
+ div) {
|
||||||
width: $meetingComponentWitdh * 0.2;
|
width: $meetingComponentWitdh * 0.2;
|
||||||
height: $meetingComponentWitdh * 0.2 * 9 / 14;
|
height: $meetingComponentWitdh * 0.2 * 9 / 14.5;
|
||||||
position: relative;
|
position: relative;
|
||||||
// align-self: center;
|
// align-self: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
: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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 全屏样式
|
// 全屏样式
|
||||||
#meeting-container.fullscreen {
|
.fullscreen-wrap {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
#meeting-container.fullscreen {
|
||||||
$meetingComponentWitdh: 100vw * 0.9;
|
$meetingComponentWitdh: 100vw * 0.9;
|
||||||
$meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
|
$meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
|
||||||
padding-top: calc(100vw * 0.08) !important;
|
padding-top: calc(100vw * 0.08) !important;
|
||||||
width: 100vw !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 {
|
.layout-template-1 {
|
||||||
:deep(div[id*="suspension-view-tabpanel"]
|
:deep(div[id*="suspension-view-tabpanel"]
|
||||||
> .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
|
> .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
|
||||||
> div[class*="inSharing"]
|
> div[class*="inSharing"]
|
||||||
+ div) {
|
+ div) {
|
||||||
width: $meetingComponentWitdh * 0.5;
|
width: $meetingComponentWitdh * 0.5;
|
||||||
|
height: $meetingComponentWitdh * 0.5 * 9 / 16;
|
||||||
|
position: relative;
|
||||||
|
// align-self: initial;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.layout-template-2 {
|
.layout-template-2 {
|
||||||
@ -852,6 +1078,9 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
|
|||||||
> div[class*="inSharing"]
|
> div[class*="inSharing"]
|
||||||
+ div) {
|
+ div) {
|
||||||
width: $meetingComponentWitdh * 0.5;
|
width: $meetingComponentWitdh * 0.5;
|
||||||
|
height: $meetingComponentWitdh * 0.5 * 9 / 16;
|
||||||
|
position: relative;
|
||||||
|
// align-self: initial;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.layout-template-3 {
|
.layout-template-3 {
|
||||||
@ -891,7 +1120,34 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
|
|||||||
}
|
}
|
||||||
:deep(div[id*="suspension-view-tabpanel"]
|
:deep(div[id*="suspension-view-tabpanel"]
|
||||||
> .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root) {
|
> .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root) {
|
||||||
height: calc(100vw * 0.9 * 9 / 16);
|
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>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user