邃芒官网、邃芒慧影、口播(H5) https://m.metavatar.cc
Nevar pievienot vairāk kā 25 tēmas Tēmai ir jāsākas ar burtu vai ciparu, tā var saturēt domu zīmes ('-') un var būt līdz 35 simboliem gara.
 
 
 
 

244 rindas
5.4 KiB

  1. <template>
  2. <div :class="inPage ? 'page active' : 'page'">
  3. <div id="top"></div>
  4. <top />
  5. <video
  6. @play="videoPlayBtn = false"
  7. class="videoBox"
  8. id="video"
  9. v-if="loading"
  10. :src="videoUrl"
  11. ref="video"
  12. autoplay
  13. muted="muted"
  14. loop="loop"
  15. playsinline
  16. :style="'width:100%;height:' + screenHeight + 'px;'"
  17. ></video>
  18. <div class="controlBox" :style="'width:' + screenWidth + 'px;'">
  19. <div :class="isExpend ? 'chatBox' : 'chatBox expand'">
  20. <div class="item top">聊天记录</div>
  21. <div class="item left">我:{{ 123456 }}</div>
  22. <div class="item right">{{ 123456 }}:你</div>
  23. <div class="item left">我:{{ 123456 }}</div>
  24. <div class="item right">{{ 123456 }}:你</div>
  25. <div class="item left">我:{{ 123456 }}</div>
  26. <div class="item right">{{ 123456 }}:你</div>
  27. <div class="item left">我:{{ 123456 }}</div>
  28. <div class="item right">{{ 123456 }}:你</div>
  29. <div class="item left">我:{{ 123456 }}</div>
  30. <div class="item right">{{ 123456 }}:你</div>
  31. <div class="item left">我:{{ 123456 }}</div>
  32. <div class="item right">{{ 123456 }}:你</div>
  33. <div class="item center">已经到底啦</div>
  34. </div>
  35. <div class="itemBox left" @click="sendMessage">
  36. <img src="../../assets/icon/enter.png" alt="" />
  37. </div>
  38. <input
  39. v-model="inputText"
  40. class="inputInside"
  41. type="text"
  42. placeholder="输入文字聊天"
  43. />
  44. <img
  45. :class="isExpend ? 'arrow' : 'arrow active'"
  46. src="../../assets/icon/arrow-down-bold.png"
  47. @click="expendChatBox"
  48. />
  49. <div class="itemBox right" @click="setVoice">
  50. <img v-if="!isVoiceClose" src="../../assets/icon/voice.png" alt="" />
  51. <img
  52. v-if="isVoiceClose"
  53. src="../../assets/icon/voice_close.png"
  54. alt=""
  55. />
  56. </div>
  57. </div>
  58. </div>
  59. </template>
  60. <script>
  61. // 组件
  62. import Vue from "vue";
  63. import { Toast } from "vant";
  64. import { mapState, mapActions } from "vuex";
  65. import top from "../../components/common/top";
  66. // 工具
  67. import { scrollToID } from "../../utils";
  68. // import io from "socket.io";
  69. Vue.use(Toast);
  70. export default {
  71. components: {
  72. top,
  73. },
  74. data() {
  75. return {
  76. inPage: false,
  77. videoUrl: "",
  78. videoPlayBtn: true,
  79. loading: false, // 加载状态
  80. isVoiceClose: false,
  81. isExpend: true,
  82. inputText: "",
  83. screenWidth: document.documentElement.clientWidth,
  84. screenHeight: document.documentElement.clientHeight,
  85. };
  86. },
  87. computed: {
  88. ...mapState({
  89. characters: (state) => state.publicObj.characters,
  90. }),
  91. },
  92. methods: {
  93. ...mapActions(["setCharacters"]),
  94. go(url) {
  95. this.$router.push(url);
  96. },
  97. setVoice() {
  98. this.isVoiceClose = !this.isVoiceClose;
  99. Toast.success(this.isVoiceClose ? "麦克风已关闭" : "麦克风已开启");
  100. },
  101. sendMessage() {},
  102. expendChatBox() {
  103. this.isExpend = !this.isExpend;
  104. },
  105. },
  106. created() {},
  107. mounted() {
  108. this.inPage = true;
  109. scrollToID("top");
  110. this.videoUrl =
  111. "https://video.metavatar.cc/sv/d51a6f6-187fa2dff79/d51a6f6-187fa2dff79.mp4";
  112. this.loading = true;
  113. },
  114. };
  115. </script>
  116. <style lang="scss" scoped>
  117. .page {
  118. position: relative;
  119. transform: translateX(30%);
  120. opacity: 0;
  121. transition: all 0.5s; // global-transition
  122. &.active {
  123. opacity: 1;
  124. transform: translateX(0);
  125. }
  126. .videoBox {
  127. position: absolute;
  128. top: 0;
  129. left: 0;
  130. z-index: -1;
  131. object-fit: fill;
  132. }
  133. .controlBox {
  134. position: absolute;
  135. bottom: -670px;
  136. height: 300px;
  137. .chatBox {
  138. position: relative;
  139. width: 100%;
  140. height: 160px;
  141. color: #ffffff;
  142. padding: 15px 30px 15px 30px;
  143. overflow: scroll;
  144. background-color: #00000054;
  145. opacity: 1;
  146. transition: all 0.3s;
  147. .item {
  148. margin-bottom: 8px;
  149. &.top {
  150. position: sticky;
  151. top: 0px;
  152. text-align: center;
  153. }
  154. &.left {
  155. text-align: left;
  156. }
  157. &.right {
  158. text-align: right;
  159. }
  160. &.center {
  161. text-align: center;
  162. }
  163. }
  164. &.expand {
  165. transform: translateY(100px);
  166. opacity: 0;
  167. z-index: -1;
  168. }
  169. }
  170. .itemBox {
  171. position: absolute;
  172. bottom: 50px;
  173. width: 60px;
  174. height: 60px;
  175. border: 3.5px solid #ffffff;
  176. border-radius: 50%;
  177. text-align: center;
  178. padding: 10px;
  179. transition: all 0.3s;
  180. cursor: pointer;
  181. &.left {
  182. left: 295px;
  183. }
  184. &.right {
  185. right: 295px;
  186. }
  187. img {
  188. width: 100%;
  189. height: 100%;
  190. }
  191. &.active {
  192. opacity: 0.8;
  193. }
  194. }
  195. .arrow {
  196. position: absolute;
  197. bottom: 100px;
  198. left: 50%;
  199. transform: translateX(-50%);
  200. width: 30px;
  201. height: 30px;
  202. transition: all 0.2s;
  203. &.active {
  204. transform: translateX(-50%) rotate(180deg);
  205. }
  206. }
  207. .inputInside {
  208. position: absolute;
  209. bottom: 60px;
  210. left: 50%;
  211. transform: translateX(-50%);
  212. width: 170px;
  213. height: 35px;
  214. border: 3.5px solid #ffffff;
  215. border-radius: 7px;
  216. padding-left: 10px;
  217. color: #ffffff;
  218. caret-color: #ffffff;
  219. &::-webkit-input-placeholder {
  220. color: #ffffffbb;
  221. }
  222. }
  223. }
  224. }
  225. </style>