|
@@ -140,9 +140,9 @@
|
|
|
>
|
|
|
<div
|
|
|
class="box"
|
|
|
+ v-if="screenEquipList?.length"
|
|
|
>
|
|
|
<Screen
|
|
|
- v-if="screenEquipList?.length"
|
|
|
:roomInfo="roomInfo"
|
|
|
:screenStatus="screenStatus"
|
|
|
:equipList="screenEquipList"
|
|
@@ -151,9 +151,9 @@
|
|
|
<!--设备-->
|
|
|
<div
|
|
|
class="box"
|
|
|
+ v-if="audioEquipList?.length"
|
|
|
>
|
|
|
<Volumn
|
|
|
- v-if="audioEquipList?.length"
|
|
|
:audioStatus="audioStatus"
|
|
|
:equipList="audioEquipList"
|
|
|
></Volumn>
|
|
@@ -240,13 +240,13 @@ import { ENV_CONFIG, FORUMArr, lanageArr, roomSourceData } from './const'
|
|
|
const boxLine = require('@/assets/taiguv1/svg/box_line.png')
|
|
|
// import "vue3-video-play/dist/style.css";
|
|
|
import {
|
|
|
- findForServe,
|
|
|
- httpGetByMeetingId,
|
|
|
- HttpGetSpaceInfo,
|
|
|
- queryAirStatus,
|
|
|
- queryAudioStatus,
|
|
|
- queryLampStatus,
|
|
|
- queryScreenCastingStatus
|
|
|
+findForServe,
|
|
|
+httpGetByMeetingId,
|
|
|
+HttpGetSpaceInfo,
|
|
|
+queryAirStatus,
|
|
|
+queryAudioStatus,
|
|
|
+queryLampStatus,
|
|
|
+queryScreenCastingStatus
|
|
|
} from '@/apis/taiguv1'
|
|
|
import useDeviceControl from '@/hooks/useDeviceControl'
|
|
|
import { useStore } from '@/store'
|
|
@@ -758,284 +758,339 @@ onUnmounted(() => {
|
|
|
</script>
|
|
|
<style lang="scss">
|
|
|
.main {
|
|
|
- position: relative;
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ // width: 900px;
|
|
|
+ // height: 600px;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ // mask-image: linear-gradient(
|
|
|
+ // 113.73deg,
|
|
|
+ // rgba(47, 36, 28, 0.4) 17.26%,
|
|
|
+ // rgba(47, 36, 28, 0.8) 55.71%
|
|
|
+ // );
|
|
|
+
|
|
|
+ .video-image {
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 0px;
|
|
|
+ transform: translateX(-50%);
|
|
|
+
|
|
|
+ //height: 120%;
|
|
|
+ object-fit: cover;
|
|
|
+ width: 110%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ .video-model {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
- overflow: hidden;
|
|
|
- // width: 900px;
|
|
|
- // height: 600px;
|
|
|
- background-size: 100% 100%;
|
|
|
- // mask-image: linear-gradient(
|
|
|
- // 113.73deg,
|
|
|
- // rgba(47, 36, 28, 0.4) 17.26%,
|
|
|
- // rgba(47, 36, 28, 0.8) 55.71%
|
|
|
- // );
|
|
|
-
|
|
|
- .video-image {
|
|
|
- position: absolute;
|
|
|
- left: 50%;
|
|
|
- top: 0px;
|
|
|
- transform: translateX(-50%);
|
|
|
-
|
|
|
- //height: 120%;
|
|
|
- object-fit: cover;
|
|
|
- width: 110%;
|
|
|
- height: 100%;
|
|
|
+ background: linear-gradient(113.73deg, rgba(47, 36, 28, 0.4) 17.26%, rgba(47, 36, 28, 0.8) 55.71%);
|
|
|
+ }
|
|
|
+ .content {
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .metting-info {
|
|
|
+ padding-left: 40px;
|
|
|
+ padding-top: 6vh;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .logo {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ margin-right: 9px;
|
|
|
}
|
|
|
- .video-model {
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
- right: 0;
|
|
|
- bottom: 0;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- background: linear-gradient(
|
|
|
- 113.73deg,
|
|
|
- rgba(47, 36, 28, 0.4) 17.26%,
|
|
|
- rgba(47, 36, 28, 0.8) 55.71%
|
|
|
- );
|
|
|
+ .name {
|
|
|
+ font-family: Jost;
|
|
|
+ font-size: 40px;
|
|
|
+ font-weight: 300;
|
|
|
+ line-height: 57.8px;
|
|
|
+ letter-spacing: 0.02em;
|
|
|
+ color: #fff;
|
|
|
+ text-align: left;
|
|
|
+ margin-right: 8px;
|
|
|
+ //
|
|
|
+ user-select: none; // 防止长按时出现选择文本
|
|
|
+ -webkit-user-select: none;
|
|
|
+ -webkit-touch-callout: none;
|
|
|
}
|
|
|
- .content {
|
|
|
- position: relative;
|
|
|
+ .location {
|
|
|
+ //styleName: En/H3;
|
|
|
+ font-family: Jost;
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 300;
|
|
|
+ line-height: 29px;
|
|
|
+ color: #fff;
|
|
|
+ margin-top: 15px;
|
|
|
}
|
|
|
- .metting-info {
|
|
|
- padding-left: 40px;
|
|
|
- padding-top: 6vh;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- .logo {
|
|
|
- width: 40px;
|
|
|
- height: 40px;
|
|
|
- margin-right: 9px;
|
|
|
- }
|
|
|
- .name {
|
|
|
- font-family: Jost;
|
|
|
- font-size: 40px;
|
|
|
- font-weight: 300;
|
|
|
- line-height: 57.8px;
|
|
|
- letter-spacing: 0.02em;
|
|
|
- color: #fff;
|
|
|
- text-align: left;
|
|
|
- margin-right: 8px;
|
|
|
- //
|
|
|
- user-select: none; // 防止长按时出现选择文本
|
|
|
- -webkit-user-select: none;
|
|
|
- -webkit-touch-callout: none;
|
|
|
- }
|
|
|
- .location {
|
|
|
- //styleName: En/H3;
|
|
|
- font-family: Jost;
|
|
|
- font-size: 20px;
|
|
|
- font-weight: 300;
|
|
|
- line-height: 29px;
|
|
|
- color: #fff;
|
|
|
- margin-top: 15px;
|
|
|
- }
|
|
|
+ }
|
|
|
+ .language-box {
|
|
|
+ position: absolute;
|
|
|
+ z-index: 9;
|
|
|
+ top: 4.67vh;
|
|
|
+ right: 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 2px;
|
|
|
+ width: 68px;
|
|
|
+ height: 28px;
|
|
|
+ border-radius: 60px;
|
|
|
+ background: rgba(255, 255, 255, 0.2);
|
|
|
+ // -webkit-backdrop-filter: blur(40px);
|
|
|
+ // backdrop-filter: blur(40px);
|
|
|
+ &::before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ border-radius: 60px;
|
|
|
+ -webkit-backdrop-filter: blur(40px);
|
|
|
+ backdrop-filter: blur(40px);
|
|
|
+ z-index: -1;
|
|
|
}
|
|
|
- .language-box {
|
|
|
- position: absolute;
|
|
|
- z-index: 9;
|
|
|
- top: 4.67vh;
|
|
|
- right: 20px;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 2px;
|
|
|
- width: 68px;
|
|
|
- height: 28px;
|
|
|
- border-radius: 60px;
|
|
|
- -webkit-backdrop-filter: blur(40px);
|
|
|
- backdrop-filter: blur(40px);
|
|
|
- background: rgba(255, 255, 255, 0.2);
|
|
|
- .language-item {
|
|
|
- display: inline-block;
|
|
|
- vertical-align: middle;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-size: 11px;
|
|
|
- font-weight: 400;
|
|
|
- line-height: 15px;
|
|
|
- text-align: center;
|
|
|
- color: rgba(255, 255, 255, 0.6);
|
|
|
- width: 50%;
|
|
|
- height: 100%;
|
|
|
- line-height: 24px;
|
|
|
- text-align: center;
|
|
|
- &:nth-child(2) {
|
|
|
- font-family: Jost;
|
|
|
- }
|
|
|
- }
|
|
|
- .l-active {
|
|
|
- border-radius: 60px;
|
|
|
- color: rgba(0, 20, 40, 1);
|
|
|
- background: rgba(255, 255, 255, 1);
|
|
|
- }
|
|
|
+ .language-item {
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: middle;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-size: 11px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 15px;
|
|
|
+ text-align: center;
|
|
|
+ color: rgba(255, 255, 255, 0.6);
|
|
|
+ width: 50%;
|
|
|
+ height: 100%;
|
|
|
+ line-height: 24px;
|
|
|
+ text-align: center;
|
|
|
+ &:nth-child(2) {
|
|
|
+ font-family: Jost;
|
|
|
+ }
|
|
|
}
|
|
|
- .env-box {
|
|
|
- position: absolute;
|
|
|
- box-sizing: border-box;
|
|
|
- width: 360px;
|
|
|
- // height: 268px;
|
|
|
- bottom: 45vh;
|
|
|
- // top: 6vh;
|
|
|
- // left: 550px;
|
|
|
- right: 50px;
|
|
|
- padding: 8px 56px;
|
|
|
- border-radius: 24px 160px 24px 24px;
|
|
|
- background: rgba(255, 255, 255, 0.2);
|
|
|
- -webkit-backdrop-filter: blur(20px);
|
|
|
- backdrop-filter: blur(20px);
|
|
|
- box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.2);
|
|
|
- .box-line {
|
|
|
- position: absolute;
|
|
|
- top: -10px;
|
|
|
- left: -8px;
|
|
|
- width: 360px;
|
|
|
- height: 100%;
|
|
|
- // height: 268px;
|
|
|
- }
|
|
|
- .line {
|
|
|
- width: 244px;
|
|
|
- height: 1px;
|
|
|
- background: rgba(255, 255, 255, 0.2);
|
|
|
- }
|
|
|
- .env-info {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- padding: 14px 0;
|
|
|
- // border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
|
|
- .item {
|
|
|
- width: 120px;
|
|
|
- .title {
|
|
|
- //styleName: Chi/Body XS;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-size: 11px;
|
|
|
- font-weight: 400;
|
|
|
- line-height: 15px;
|
|
|
- letter-spacing: 0.02em;
|
|
|
- padding-bottom: 5px;
|
|
|
- color: rgba(228, 228, 228, 1);
|
|
|
- }
|
|
|
- .num-box {
|
|
|
- span {
|
|
|
- //styleName: En/H1;
|
|
|
- display: inline-block;
|
|
|
- padding-right: 4px;
|
|
|
- color: #fff;
|
|
|
- &:nth-child(1) {
|
|
|
- font-family: Jost;
|
|
|
- font-size: 36px;
|
|
|
- font-weight: 300;
|
|
|
- line-height: 36px;
|
|
|
- }
|
|
|
- &:nth-child(2) {
|
|
|
- font-family: Jost;
|
|
|
- font-size: 12px;
|
|
|
- font-weight: 400;
|
|
|
- // line-height: 17px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ .l-active {
|
|
|
+ border-radius: 60px;
|
|
|
+ color: rgba(0, 20, 40, 1);
|
|
|
+ background: rgba(255, 255, 255, 1);
|
|
|
}
|
|
|
- .mode-box {
|
|
|
- margin-left: 40px;
|
|
|
- margin-top: 162px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- .item {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- box-sizing: border-box;
|
|
|
- // width: 77px;
|
|
|
- height: 40px;
|
|
|
- padding: 8px 12px 8px 12px;
|
|
|
- border-radius: 60px;
|
|
|
- background: rgba(255, 255, 255, 0.2);
|
|
|
- -webkit-backdrop-filter: blur(20px);
|
|
|
- backdrop-filter: blur(20px);
|
|
|
- margin-right: 4px;
|
|
|
- img {
|
|
|
- widows: 24px;
|
|
|
- height: 24px;
|
|
|
- margin-right: 4px;
|
|
|
- }
|
|
|
- span {
|
|
|
- //styleName: Chi/Body Small;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-size: 12px;
|
|
|
- font-weight: 400;
|
|
|
- line-height: 16px;
|
|
|
- letter-spacing: 0.02em;
|
|
|
- color: rgba(255, 255, 255, 0.6);
|
|
|
- }
|
|
|
+ }
|
|
|
+ .env-box {
|
|
|
+ position: absolute;
|
|
|
+ z-index: 9;
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: 360px;
|
|
|
+ // height: 268px;
|
|
|
+ bottom: 45vh;
|
|
|
+ // top: 6vh;
|
|
|
+ // left: 550px;
|
|
|
+ right: 50px;
|
|
|
+ padding: 8px 56px;
|
|
|
+ border-radius: 24px 160px 24px 24px;
|
|
|
+ background: rgba(255, 255, 255, 0.2);
|
|
|
+ // -webkit-backdrop-filter: blur(20px);
|
|
|
+ // backdrop-filter: blur(20px);
|
|
|
+ box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.2);
|
|
|
+ &::before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ border-radius: 24px 160px 24px 24px;
|
|
|
+ -webkit-backdrop-filter: blur(20px);
|
|
|
+ backdrop-filter: blur(20px);
|
|
|
+ // background: rgba(255, 255, 255, 0.2);
|
|
|
+ z-index: -1;
|
|
|
+ }
|
|
|
+ .box-line {
|
|
|
+ position: absolute;
|
|
|
+ top: -10px;
|
|
|
+ left: -8px;
|
|
|
+ width: 360px;
|
|
|
+ height: 100%;
|
|
|
+ // height: 268px;
|
|
|
+ }
|
|
|
+ .line {
|
|
|
+ width: 244px;
|
|
|
+ height: 1px;
|
|
|
+ background: rgba(255, 255, 255, 0.2);
|
|
|
+ }
|
|
|
+ .env-info {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 14px 0;
|
|
|
+ // border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
|
|
+ .item {
|
|
|
+ width: 120px;
|
|
|
+ .title {
|
|
|
+ //styleName: Chi/Body XS;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-size: 11px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 15px;
|
|
|
+ letter-spacing: 0.02em;
|
|
|
+ padding-bottom: 5px;
|
|
|
+ color: rgba(228, 228, 228, 1);
|
|
|
}
|
|
|
- .active {
|
|
|
- background: rgba(255, 255, 255, 0.8);
|
|
|
- span {
|
|
|
- color: rgba(0, 20, 40, 1);
|
|
|
+ .num-box {
|
|
|
+ span {
|
|
|
+ //styleName: En/H1;
|
|
|
+ display: inline-block;
|
|
|
+ padding-right: 4px;
|
|
|
+ color: #fff;
|
|
|
+ &:nth-child(1) {
|
|
|
+ font-family: Jost;
|
|
|
+ font-size: 36px;
|
|
|
+ font-weight: 300;
|
|
|
+ line-height: 36px;
|
|
|
}
|
|
|
+ &:nth-child(2) {
|
|
|
+ font-family: Jost;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 400;
|
|
|
+ // line-height: 17px;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
- .fotter {
|
|
|
- position: fixed;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 16px;
|
|
|
- // height: 264px;
|
|
|
+ }
|
|
|
+ .mode-box {
|
|
|
+ margin-left: 40px;
|
|
|
+ margin-top: 162px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+ position: relative;
|
|
|
+ // width: 77px;
|
|
|
+ height: 40px;
|
|
|
+ padding: 8px 12px 8px 12px;
|
|
|
+ border-radius: 60px;
|
|
|
+ background: rgba(255, 255, 255, 0.2);
|
|
|
+ margin-right: 4px;
|
|
|
+ z-index: 9;
|
|
|
+ &::before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
left: 0;
|
|
|
- bottom: 0;
|
|
|
width: 100%;
|
|
|
- // overflow-x: scroll;
|
|
|
- border-radius: 24px;
|
|
|
+ height: 100%;
|
|
|
+ border-radius: 60px;
|
|
|
-webkit-backdrop-filter: blur(20px);
|
|
|
backdrop-filter: blur(20px);
|
|
|
- background: rgba(255, 255, 255, 0.1);
|
|
|
- box-shadow: 0px -10px 20px 0px rgba(0, 0, 0, 0.2);
|
|
|
- display: flex;
|
|
|
- gap: 12px;
|
|
|
- // justify-content: space-between;
|
|
|
- .box {
|
|
|
- display: inline-block;
|
|
|
- vertical-align: middle;
|
|
|
- // margin-right: 12px;
|
|
|
- width: 176px;
|
|
|
- // height: 232px;
|
|
|
- height: 38.7vh;
|
|
|
- max-height: 232px;
|
|
|
- // box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
|
|
|
- // backdrop-filter: blur(40px);
|
|
|
- // &:last-child {
|
|
|
- // margin-right: 0;
|
|
|
- // }
|
|
|
- }
|
|
|
+ z-index: -1;
|
|
|
+ }
|
|
|
+ img {
|
|
|
+ widows: 24px;
|
|
|
+ height: 24px;
|
|
|
+ margin-right: 4px;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ //styleName: Chi/Body Small;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 16px;
|
|
|
+ letter-spacing: 0.02em;
|
|
|
+ color: rgba(255, 255, 255, 0.6);
|
|
|
+ }
|
|
|
}
|
|
|
- .small {
|
|
|
- .box {
|
|
|
- width: 165px;
|
|
|
- }
|
|
|
- .air-box {
|
|
|
- width: 220px;
|
|
|
- }
|
|
|
+ .active {
|
|
|
+ background: rgba(255, 255, 255, 0.8);
|
|
|
+ span {
|
|
|
+ color: rgba(0, 20, 40, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .fotter {
|
|
|
+ position: fixed;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 16px;
|
|
|
+ // height: 264px;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ width: 100%;
|
|
|
+ // overflow-x: scroll;
|
|
|
+ border-radius: 24px;
|
|
|
+
|
|
|
+ background: rgba(255, 255, 255, 0.1);
|
|
|
+ box-shadow: 0px -10px 20px 0px rgba(0, 0, 0, 0.2);
|
|
|
+ display: flex;
|
|
|
+ z-index: 99;
|
|
|
+ gap: 12px;
|
|
|
+ &::before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ border-radius: 24px;
|
|
|
+ -webkit-backdrop-filter: blur(20px);
|
|
|
+ backdrop-filter: blur(20px);
|
|
|
+ z-index: -1;
|
|
|
+ }
|
|
|
+ // justify-content: space-between;
|
|
|
+ .box {
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: middle;
|
|
|
+ // margin-right: 12px;
|
|
|
+ width: 176px;
|
|
|
+ // height: 232px;
|
|
|
+ height: 38.7vh;
|
|
|
+ max-height: 232px;
|
|
|
+ // box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
|
|
|
+ // backdrop-filter: blur(40px);
|
|
|
+ // &:last-child {
|
|
|
+ // margin-right: 0;
|
|
|
+ // }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .small {
|
|
|
+ .box {
|
|
|
+ width: 165px;
|
|
|
+ }
|
|
|
+ .air-box {
|
|
|
+ width: 220px;
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
.taigu-popup {
|
|
|
- box-sizing: border-box;
|
|
|
- width: 480px;
|
|
|
- // height: 600px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: 480px;
|
|
|
+ // position: relative;
|
|
|
+ // height: 600px;
|
|
|
+ height: 100%;
|
|
|
+ border-radius: 24px 0px 0px 24px;
|
|
|
+ // -webkit-backdrop-filter: blur(30px);
|
|
|
+ // backdrop-filter: blur(30px);
|
|
|
+ background: rgba(255, 255, 255, 0.8);
|
|
|
+ padding: 40px 90px;
|
|
|
+ &::before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
height: 100%;
|
|
|
border-radius: 24px 0px 0px 24px;
|
|
|
- -webkit-backdrop-filter: blur(30px);
|
|
|
+ -webkit-backdrop-filter: blur(30px); // 兼容 WebKit 内核浏览器
|
|
|
backdrop-filter: blur(30px);
|
|
|
- background: rgba(255, 255, 255, 0.8);
|
|
|
- padding: 40px 90px;
|
|
|
+ z-index: -1;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
|
|
<style scoped>
|
|
|
.van-overlay {
|
|
|
- background: linear-gradient(
|
|
|
- 113.73deg,
|
|
|
- rgba(37, 21, 8, 0.4) 17.26%,
|
|
|
- rgba(37, 21, 8, 0.8) 55.71%
|
|
|
- );
|
|
|
+ background: linear-gradient(113.73deg, rgba(37, 21, 8, 0.4) 17.26%, rgba(37, 21, 8, 0.8) 55.71%);
|
|
|
}
|
|
|
</style>
|