|
@@ -1,29 +1,27 @@
|
|
|
<template>
|
|
|
- <div class="screen-box" :class="modeType == 2 ? 'active' : ''">
|
|
|
+ <div class="screen-box active">
|
|
|
<div class="top">
|
|
|
- <img
|
|
|
- :src="
|
|
|
- parseImgUrl(
|
|
|
- 'taiguv1/envmonitor',
|
|
|
- modeType == 2 ? 'active/screen_cast.svg' : 'screen_cast.svg'
|
|
|
- )
|
|
|
- "
|
|
|
- alt=""
|
|
|
- />
|
|
|
+ <img :src="parseImgUrl('taiguv1/envmonitor', 'active/screen_cast.svg')" alt="" />
|
|
|
<div class="top-right">
|
|
|
<div class="title">投屏</div>
|
|
|
<div class="status">关闭</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="bottom">
|
|
|
- <div class="btn">有线投屏</div>
|
|
|
- <div class="btn">无线投屏</div>
|
|
|
- <div class="btn">Team Room</div>
|
|
|
+ <div class="btn" :class="type == 1 ? 'btn-active' : ''" @click="checkMode(1)">
|
|
|
+ 有线投屏
|
|
|
+ </div>
|
|
|
+ <div class="btn" :class="type == 2 ? 'btn-active' : ''" @click="checkMode(2)">
|
|
|
+ 无线投屏
|
|
|
+ </div>
|
|
|
+ <div class="btn" :class="type == 3 ? 'btn-active' : ''" @click="checkMode(3)">
|
|
|
+ Team Room
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
-<script lang="ts">
|
|
|
+<script>
|
|
|
import {
|
|
|
defineComponent,
|
|
|
onMounted,
|
|
@@ -37,7 +35,6 @@ import {
|
|
|
} from "vue";
|
|
|
import { Switch, Dialog, Loading, Toast } from "vant";
|
|
|
import { parseImgUrl } from "@/utils";
|
|
|
-import any = jasmine.any;
|
|
|
|
|
|
export default defineComponent({
|
|
|
components: {
|
|
@@ -54,6 +51,10 @@ export default defineComponent({
|
|
|
setup(props, contx) {
|
|
|
const proxyData = reactive({
|
|
|
parseImgUrl: parseImgUrl,
|
|
|
+ type: 1,
|
|
|
+ checkMode(type) {
|
|
|
+ proxyData.type = type;
|
|
|
+ },
|
|
|
});
|
|
|
onBeforeUnmount(() => {});
|
|
|
onMounted(() => {});
|
|
@@ -111,16 +112,19 @@ export default defineComponent({
|
|
|
width: 128px;
|
|
|
border-radius: 60px;
|
|
|
height: 40px;
|
|
|
- background: rgba(255, 255, 255, 0.2);
|
|
|
- backdrop-filter: blur(20px);
|
|
|
text-align: center;
|
|
|
- //styleName: Chi/Body Small;
|
|
|
font-family: PingFang SC;
|
|
|
font-size: 12px;
|
|
|
line-height: 40px;
|
|
|
font-weight: 400;
|
|
|
letter-spacing: 0.02em;
|
|
|
- color: rgba(255, 255, 255, 0.6);
|
|
|
+ color: rgba(116, 128, 141, 1);
|
|
|
+ background: rgba(255, 255, 255, 0.4);
|
|
|
+ }
|
|
|
+ .btn-active {
|
|
|
+ background: rgba(255, 255, 255, 0.8);
|
|
|
+ color: rgba(0, 20, 40, 1);
|
|
|
+ backdrop-filter: blur(20px);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -138,11 +142,5 @@ export default defineComponent({
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .bottom {
|
|
|
- .btn {
|
|
|
- background: rgba(255, 255, 255, 0.8);
|
|
|
- color: rgba(0, 20, 40, 1);
|
|
|
- }
|
|
|
- }
|
|
|
}
|
|
|
</style>
|