|
@@ -1,7 +1,12 @@
|
|
<template>
|
|
<template>
|
|
- <div class="header" @touchmove.prevent>
|
|
|
|
|
|
+ <div class="header">
|
|
<div class="left" :class="{ show: player.showVR }">
|
|
<div class="left" :class="{ show: player.showVR }">
|
|
- <div v-show="mode != 'panorama'" :class="{ disabled: flying }" class="back-pano" @click="onChangeMode">
|
|
|
|
|
|
+ <div
|
|
|
|
+ v-show="mode != 'panorama'"
|
|
|
|
+ :class="{ disabled: flying }"
|
|
|
|
+ class="back-pano"
|
|
|
|
+ @click="onChangeMode"
|
|
|
|
+ >
|
|
<ui-icon type="show_back"></ui-icon>
|
|
<ui-icon type="show_back"></ui-icon>
|
|
</div>
|
|
</div>
|
|
<div v-show="mode == 'panorama'" class="back" @click="onBack">
|
|
<div v-show="mode == 'panorama'" class="back" @click="onBack">
|
|
@@ -10,7 +15,11 @@
|
|
</div>
|
|
</div>
|
|
<div
|
|
<div
|
|
class="title"
|
|
class="title"
|
|
- :class="{ up: player.showDescription, drak: mode != 'panorama', empty: !description }"
|
|
|
|
|
|
+ :class="{
|
|
|
|
+ up: player.showDescription,
|
|
|
|
+ drak: mode != 'panorama',
|
|
|
|
+ empty: !description,
|
|
|
|
+ }"
|
|
@click="onShowDescription"
|
|
@click="onShowDescription"
|
|
v-show="player.showWidgets"
|
|
v-show="player.showWidgets"
|
|
>
|
|
>
|
|
@@ -21,16 +30,19 @@
|
|
<i class="iconfont icon-pull-down"></i>
|
|
<i class="iconfont icon-pull-down"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
- <div class="right">
|
|
|
|
-
|
|
|
|
- </div>
|
|
|
|
|
|
+ <div class="right"></div>
|
|
<transition
|
|
<transition
|
|
appear
|
|
appear
|
|
name="custom-classes-transition"
|
|
name="custom-classes-transition"
|
|
enter-active-class="animated fadeInUp short faster"
|
|
enter-active-class="animated fadeInUp short faster"
|
|
leave-active-class="animated fadeOutDown short faster"
|
|
leave-active-class="animated fadeOutDown short faster"
|
|
>
|
|
>
|
|
- <div class="content" :class="{ drak: mode != 'panorama' }" v-if="player.showDescription" @click="onShowDescription">
|
|
|
|
|
|
+ <div
|
|
|
|
+ class="content"
|
|
|
|
+ :class="{ drak: mode != 'panorama' }"
|
|
|
|
+ v-if="player.showDescription"
|
|
|
|
+ @click="onShowDescription"
|
|
|
|
+ >
|
|
<div>
|
|
<div>
|
|
<div v-html="description"></div>
|
|
<div v-html="description"></div>
|
|
</div>
|
|
</div>
|
|
@@ -46,7 +58,9 @@
|
|
<div class="url">{{ copyLink }}</div>
|
|
<div class="url">{{ copyLink }}</div>
|
|
<div class="btns">
|
|
<div class="btns">
|
|
<ui-button class="cancel" @click="showCopy = false">取消</ui-button>
|
|
<ui-button class="cancel" @click="showCopy = false">取消</ui-button>
|
|
- <ui-button class="primary" :data-clipboard-text="copyLink" ref="copy$">一键复制</ui-button>
|
|
|
|
|
|
+ <ui-button class="primary" :data-clipboard-text="copyLink" ref="copy$"
|
|
|
|
+ >一键复制</ui-button
|
|
|
|
+ >
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@@ -252,6 +266,7 @@ const onChangeMode = () => {
|
|
display: flex;
|
|
display: flex;
|
|
align-items: center;
|
|
align-items: center;
|
|
text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
|
|
text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
|
|
|
|
+ pointer-events: auto;
|
|
&.app {
|
|
&.app {
|
|
top: 1rem;
|
|
top: 1rem;
|
|
}
|
|
}
|
|
@@ -415,9 +430,11 @@ const onChangeMode = () => {
|
|
letter-spacing: 1px;
|
|
letter-spacing: 1px;
|
|
align-items: center;
|
|
align-items: center;
|
|
justify-content: center;
|
|
justify-content: center;
|
|
|
|
+ pointer-events: auto;
|
|
> div {
|
|
> div {
|
|
display: flex;
|
|
display: flex;
|
|
- transition: background 0.3s ease, min-width 0.3s ease, border-radius 0.3s ease;
|
|
|
|
|
|
+ transition: background 0.3s ease, min-width 0.3s ease,
|
|
|
|
+ border-radius 0.3s ease;
|
|
align-items: center;
|
|
align-items: center;
|
|
justify-content: center;
|
|
justify-content: center;
|
|
padding-right: 12px;
|
|
padding-right: 12px;
|
|
@@ -428,7 +445,12 @@ const onChangeMode = () => {
|
|
min-width: 100%;
|
|
min-width: 100%;
|
|
overflow: visible;
|
|
overflow: visible;
|
|
pointer-events: none;
|
|
pointer-events: none;
|
|
- background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.15) 50%, rgba(0, 0, 0, 0) 100%);
|
|
|
|
|
|
+ background: linear-gradient(
|
|
|
|
+ 90deg,
|
|
|
|
+ rgba(0, 0, 0, 0) 0%,
|
|
|
|
+ rgba(0, 0, 0, 0.15) 50%,
|
|
|
|
+ rgba(0, 0, 0, 0) 100%
|
|
|
|
+ );
|
|
}
|
|
}
|
|
span {
|
|
span {
|
|
display: inline-block;
|
|
display: inline-block;
|
|
@@ -472,7 +494,7 @@ const onChangeMode = () => {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.content {
|
|
.content {
|
|
- position: absolute;
|
|
|
|
|
|
+ position: fixed;
|
|
top: 1.6rem;
|
|
top: 1.6rem;
|
|
left: 0.92105rem;
|
|
left: 0.92105rem;
|
|
right: 0.92105rem;
|
|
right: 0.92105rem;
|
|
@@ -481,6 +503,17 @@ const onChangeMode = () => {
|
|
border-radius: 5px;
|
|
border-radius: 5px;
|
|
font-size: 0.36842rem;
|
|
font-size: 0.36842rem;
|
|
text-align: center;
|
|
text-align: center;
|
|
|
|
+ max-height: 80vh;
|
|
|
|
+ max-height: calc(var(--vh) * 80);
|
|
|
|
+ overflow: scroll;
|
|
|
|
+ -webkit-overflow-scrolling: touch;
|
|
|
|
+ // z-index: 10000;
|
|
|
|
+ pointer-events: auto;
|
|
|
|
+
|
|
|
|
+ * {
|
|
|
|
+ pointer-events: auto;
|
|
|
|
+ -webkit-overflow-scrolling: touch;
|
|
|
|
+ }
|
|
&.drak {
|
|
&.drak {
|
|
background: rgba(0, 0, 0, 0.8);
|
|
background: rgba(0, 0, 0, 0.8);
|
|
}
|
|
}
|
|
@@ -491,25 +524,6 @@ const onChangeMode = () => {
|
|
word-break: break-all;
|
|
word-break: break-all;
|
|
white-space: normal;
|
|
white-space: normal;
|
|
line-height: 1.5;
|
|
line-height: 1.5;
|
|
- // h4 {
|
|
|
|
- // margin: 0;
|
|
|
|
- // padding: 0;
|
|
|
|
- // margin-bottom: 0.28rem;
|
|
|
|
- // font-size: 0.43rem;
|
|
|
|
- // padding-left: 0.18789rem;
|
|
|
|
- // width: 100%;
|
|
|
|
- // position: relative;
|
|
|
|
- // &::before {
|
|
|
|
- // content: "";
|
|
|
|
- // position: absolute;
|
|
|
|
- // left: 0;
|
|
|
|
- // top: 50%;
|
|
|
|
- // height: 80%;
|
|
|
|
- // transform: translateY(-50%);
|
|
|
|
- // width: 2px;
|
|
|
|
- // background-color: var(--editor-main-color);
|
|
|
|
- // }
|
|
|
|
- // }
|
|
|
|
|
|
|
|
:deep(p) {
|
|
:deep(p) {
|
|
word-break: break-word;
|
|
word-break: break-word;
|
|
@@ -519,18 +533,6 @@ const onChangeMode = () => {
|
|
color: var(--editor-main-color);
|
|
color: var(--editor-main-color);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
- // &::after {
|
|
|
|
- // content: "";
|
|
|
|
- // position: absolute;
|
|
|
|
- // top: -6px;
|
|
|
|
- // left: 50%;
|
|
|
|
- // margin-left: -3px;
|
|
|
|
- // width: 0;
|
|
|
|
- // height: 0;
|
|
|
|
- // border-width: 0 7px 6px;
|
|
|
|
- // border-style: solid;
|
|
|
|
- // border-color: transparent transparent rgba(0, 0, 0, 0.5);
|
|
|
|
- // }
|
|
|
|
}
|
|
}
|
|
|
|
|
|
.url-share {
|
|
.url-share {
|