|
- <template>
- <div :class="inPage ? 'page active' : 'page'">
- <div id="top"></div>
- <top />
- <video
- @play="videoPlayBtn = false"
- class="videoBox"
- id="video"
- v-if="loading"
- :src="videoUrl"
- ref="video"
- autoplay
- muted="muted"
- loop="loop"
- playsinline
- :style="'width:100%;height:' + screenHeight + 'px;'"
- ></video>
-
- <div class="controlBox" :style="'width:' + screenWidth + 'px;'">
- <div :class="isExpend ? 'chatBox' : 'chatBox expand'">
- <div class="item top">聊天记录</div>
- <div class="item left">我:{{ 123456 }}</div>
- <div class="item right">{{ 123456 }}:你</div>
- <div class="item left">我:{{ 123456 }}</div>
- <div class="item right">{{ 123456 }}:你</div>
- <div class="item left">我:{{ 123456 }}</div>
- <div class="item right">{{ 123456 }}:你</div>
- <div class="item left">我:{{ 123456 }}</div>
- <div class="item right">{{ 123456 }}:你</div>
- <div class="item left">我:{{ 123456 }}</div>
- <div class="item right">{{ 123456 }}:你</div>
- <div class="item left">我:{{ 123456 }}</div>
- <div class="item right">{{ 123456 }}:你</div>
- <div class="item center">已经到底啦</div>
- </div>
-
- <div class="itemBox left" @click="sendMessage">
- <img src="../../assets/icon/enter.png" alt="" />
- </div>
-
- <input
- v-model="inputText"
- class="inputInside"
- type="text"
- placeholder="输入文字聊天"
- />
-
- <img
- :class="isExpend ? 'arrow' : 'arrow active'"
- src="../../assets/icon/arrow-down-bold.png"
- @click="expendChatBox"
- />
-
- <div class="itemBox right" @click="setVoice">
- <img v-if="!isVoiceClose" src="../../assets/icon/voice.png" alt="" />
- <img
- v-if="isVoiceClose"
- src="../../assets/icon/voice_close.png"
- alt=""
- />
- </div>
- </div>
- </div>
- </template>
-
- <script>
- // 组件
- import Vue from "vue";
- import { Toast } from "vant";
- import { mapState, mapActions } from "vuex";
- import top from "../../components/common/top";
- // 工具
- import { scrollToID } from "../../utils";
- // import io from "socket.io";
-
- Vue.use(Toast);
- export default {
- components: {
- top,
- },
- data() {
- return {
- inPage: false,
- videoUrl: "",
- videoPlayBtn: true,
- loading: false, // 加载状态
- isVoiceClose: false,
- isExpend: true,
- inputText: "",
- screenWidth: document.documentElement.clientWidth,
- screenHeight: document.documentElement.clientHeight,
- };
- },
- computed: {
- ...mapState({
- characters: (state) => state.publicObj.characters,
- }),
- },
-
- methods: {
- ...mapActions(["setCharacters"]),
-
- go(url) {
- this.$router.push(url);
- },
-
- setVoice() {
- this.isVoiceClose = !this.isVoiceClose;
- Toast.success(this.isVoiceClose ? "麦克风已关闭" : "麦克风已开启");
- },
-
- sendMessage() {},
-
- expendChatBox() {
- this.isExpend = !this.isExpend;
- },
- },
- created() {},
- mounted() {
- this.inPage = true;
- scrollToID("top");
- this.videoUrl =
- "https://video.metavatar.cc/sv/d51a6f6-187fa2dff79/d51a6f6-187fa2dff79.mp4";
- this.loading = true;
- },
- };
- </script>
-
- <style lang="scss" scoped>
- .page {
- position: relative;
- transform: translateX(30%);
- opacity: 0;
- transition: all 0.5s; // global-transition
- &.active {
- opacity: 1;
- transform: translateX(0);
- }
- .videoBox {
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
- object-fit: fill;
- }
- .controlBox {
- position: absolute;
- bottom: -670px;
- height: 300px;
- .chatBox {
- position: relative;
- width: 100%;
- height: 160px;
- color: #ffffff;
- padding: 15px 30px 15px 30px;
- overflow: scroll;
- background-color: #00000054;
- opacity: 1;
- transition: all 0.3s;
- .item {
- margin-bottom: 8px;
-
- &.top {
- position: sticky;
- top: 0px;
- text-align: center;
- }
- &.left {
- text-align: left;
- }
- &.right {
- text-align: right;
- }
- &.center {
- text-align: center;
- }
- }
-
- &.expand {
- transform: translateY(100px);
- opacity: 0;
- z-index: -1;
- }
- }
- .itemBox {
- position: absolute;
- bottom: 50px;
- width: 60px;
- height: 60px;
- border: 3.5px solid #ffffff;
- border-radius: 50%;
- text-align: center;
- padding: 10px;
- transition: all 0.3s;
- cursor: pointer;
- &.left {
- left: 295px;
- }
- &.right {
- right: 295px;
- }
- img {
- width: 100%;
- height: 100%;
- }
- &.active {
- opacity: 0.8;
- }
- }
-
- .arrow {
- position: absolute;
- bottom: 100px;
- left: 50%;
- transform: translateX(-50%);
- width: 30px;
- height: 30px;
- transition: all 0.2s;
-
- &.active {
- transform: translateX(-50%) rotate(180deg);
- }
- }
-
- .inputInside {
- position: absolute;
- bottom: 60px;
- left: 50%;
- transform: translateX(-50%);
- width: 170px;
- height: 35px;
- border: 3.5px solid #ffffff;
- border-radius: 7px;
- padding-left: 10px;
- color: #ffffff;
- caret-color: #ffffff;
- &::-webkit-input-placeholder {
- color: #ffffffbb;
- }
- }
- }
- }
- </style>
|