cansnow
541 lines
19 KiB
Vue
541 lines
19 KiB
Vue
<template>
|
|
<view>
|
|
<view class="container">
|
|
<image src="/static/images/about_logo.png" class="gif-image" style="margin-top: 40%;" mode="aspectFit"></image>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {mapGetters,mapActions} from "vuex";
|
|
import IMSDK, {IMMethods,MessageType,SessionType,} from "openim-uniapp-polyfill";
|
|
import config from "@/common/config";
|
|
import {getDbDir,toastWithCallback} from "@/util/common.js";
|
|
import {getConversationContent,conversationSort} from "@/util/imCommon";
|
|
import {PageEvents,UpdateMessageTypes} from "@/constant";
|
|
import {checkUpgrade} from "@/api/login.js"
|
|
export default {
|
|
data() {
|
|
return {
|
|
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters([
|
|
"storeConversationList",
|
|
"storeCurrentConversation",
|
|
"storeCurrentUserID",
|
|
"storeSelfInfo",
|
|
"storeRecvFriendApplications",
|
|
"storeRecvGroupApplications",
|
|
"storeHistoryMessageList",
|
|
"storeIsSyncing",
|
|
"storeGroupList",
|
|
"config",
|
|
]),
|
|
},
|
|
onReady() {
|
|
//console.log('onReady');
|
|
// #ifdef APP
|
|
this.checkUpdate();
|
|
this.tryLogin();
|
|
// #endif
|
|
// setTimeout(() => {
|
|
// uni.navigateTo({
|
|
// url: '/pages/index/index'
|
|
// }); // 替换为你的首页路径
|
|
// }, 4000); // 假设GIF加载完毕并显示3秒后跳转，根据GIF实际时间调整
|
|
},
|
|
created() {
|
|
//console.log('created');
|
|
},
|
|
methods: {
|
|
...mapActions("message", ["pushNewMessage", "updateOneMessage"]),
|
|
...mapActions("conversation", ["updateCurrentMemberInGroup"]),
|
|
...mapActions("circle", ["getFriendCircleInfo"]),
|
|
...mapActions("contact", [
|
|
"updateFriendInfo",
|
|
"pushNewFriend",
|
|
"updateBlackInfo",
|
|
"pushNewBlack",
|
|
"pushNewGroup",
|
|
"updateGroupInfo",
|
|
"pushNewRecvFriendApplition",
|
|
"updateRecvFriendApplition",
|
|
"pushNewSentFriendApplition",
|
|
"updateSentFriendApplition",
|
|
"pushNewRecvGroupApplition",
|
|
"updateRecvGroupApplition",
|
|
"pushNewSentGroupApplition",
|
|
"updateSentGroupApplition",
|
|
]),
|
|
setGlobalIMlistener() {
|
|
//console.log("setGlobalIMlistener");
|
|
// init
|
|
const kickHander = (message) => {
|
|
toastWithCallback(message, () => {
|
|
uni.removeStorage({
|
|
key: "IMToken",
|
|
});
|
|
uni.removeStorage({
|
|
key: "BusinessToken",
|
|
});
|
|
uni.$u.route("/pages/common/login/index");
|
|
});
|
|
};
|
|
//由于 APP 管理员强制用户下线，或由于登录策略导致用户被踢下线
|
|
IMSDK.subscribe(IMSDK.IMEvents.OnKickedOffline, (data) => {
|
|
kickHander("您的账号在其他设备登录，请重新登陆！");
|
|
});
|
|
//token无效回调。
|
|
IMSDK.subscribe(IMSDK.IMEvents.OnUserTokenExpired, (data) => {
|
|
kickHander("您的登录已过期，请重新登陆！");
|
|
});
|
|
IMSDK.subscribe(IMSDK.IMEvents.OnUserTokenInvalid, (data) => {
|
|
kickHander("您的登录已无效，请重新登陆！");
|
|
});
|
|
|
|
// sync
|
|
//向服务器同步会话开始时的回调。
|
|
const syncStartHandler = ({data}) => {
|
|
this.$store.commit("user/SET_IS_SYNCING", true);
|
|
this.$store.commit("user/SET_REINSTALL", data);
|
|
};
|
|
//同步中
|
|
const syncProgressHandler = ({data}) => {
|
|
this.$store.commit("user/SET_PROGRESS", data);
|
|
};
|
|
//向服务器同步会话成功时的回调。
|
|
const syncFinishHandler = () => {
|
|
uni.hideLoading();
|
|
this.$store.dispatch("conversation/getConversationList");
|
|
this.$store.dispatch("contact/getFriendList");
|
|
this.$store.dispatch("contact/getGrouplist");
|
|
this.$store.dispatch("conversation/getUnReadCount");
|
|
this.$store.commit("user/SET_IS_SYNCING", false);
|
|
};
|
|
//向服务器同步会话失败时的回调。
|
|
const syncFailedHandler = () => {
|
|
uni.hideLoading();
|
|
uni.$u.toast("同步消息失败");
|
|
this.$store.dispatch("conversation/getConversationList");
|
|
this.$store.dispatch("conversation/getUnReadCount");
|
|
this.$store.commit("user/SET_IS_SYNCING", false);
|
|
};
|
|
//向服务器同步会话开始时的回调。
|
|
IMSDK.subscribe(IMSDK.IMEvents.OnSyncServerStart, syncStartHandler);
|
|
//向服务器同步会话成功时的回调。
|
|
IMSDK.subscribe(IMSDK.IMEvents.OnSyncServerFinish, syncFinishHandler);
|
|
//向服务器同步会话失败时的回调。
|
|
IMSDK.subscribe(IMSDK.IMEvents.OnSyncServerFailed, syncFailedHandler);
|
|
//同步中
|
|
IMSDK.subscribe(IMSDK.IMEvents.OnSyncServerProgress, syncProgressHandler);
|
|
|
|
// 当前登录用户个人信息改变时会收到此回调。
|
|
|
|
IMSDK.subscribe(IMSDK.IMEvents.OnSelfInfoUpdated, ({data}) => {
|
|
this.$store.commit("user/SET_SELF_INFO", {
|
|
...this.storeSelfInfo,
|
|
...data,
|
|
});
|
|
});
|
|
|
|
// message
|
|
//接收到新消息时会收到此回调，回调中只会携带一条消息。
|
|
//设置了批量消息监听setBatchMsgListener时，此回调不会触发。
|
|
//IMSDK.subscribe(IMSDK.IMEvents.OnRecvNewMessage, ({data}) =>{});
|
|
IMSDK.subscribe(IMSDK.IMEvents.OnRecvNewMessages, ({data}) => {
|
|
if (this.storeIsSyncing) {
|
|
return;
|
|
}
|
|
console.log(data);
|
|
data.forEach(this.handleNewMessage);
|
|
});
|
|
|
|
//好友个人信息（包括备注）改变时会收到此回调。
|
|
IMSDK.subscribe(IMSDK.IMEvents.OnFriendInfoChanged,({data}) => {
|
|
console.log('friendInfoChangeHandler',data);
|
|
uni.$emit(IMSDK.IMEvents.OnFriendInfoChanged, {data});
|
|
this.updateFriendInfo({friendInfo: data,});
|
|
});
|
|
//两个用户成功建立好友关系后双方都会收到该回调。
|
|
IMSDK.subscribe(IMSDK.IMEvents.OnFriendAdded, ({data}) => {
|
|
this.pushNewFriend(data);
|
|
});
|
|
//某个用户的好友列表减少时会收到该回调。
|
|
IMSDK.subscribe(IMSDK.IMEvents.OnFriendDeleted, ({data}) => {
|
|
this.updateFriendInfo({
|
|
friendInfo: data,
|
|
isRemove: true,
|
|
});
|
|
});
|
|
|
|
// blacklist
|
|
//某个用户的黑名单列表增加时会收到该回调。
|
|
IMSDK.subscribe(IMSDK.IMEvents.OnBlackAdded, ({data}) => {
|
|
this.pushNewBlack(data);
|
|
});
|
|
//某个用户的黑名单列表减少时会收到该回调。
|
|
IMSDK.subscribe(IMSDK.IMEvents.OnBlackDeleted, ({data}) => {
|
|
this.updateBlackInfo({
|
|
blackInfo: data,
|
|
isRemove: true,
|
|
});
|
|
});
|
|
|
|
// group
|
|
const joinedGroupAddedHandler = ({data}) => {
|
|
this.pushNewGroup(data);
|
|
};
|
|
const joinedGroupDeletedHandler = ({data}) => {
|
|
this.updateGroupInfo({
|
|
groupInfo: data,
|
|
isRemove: true,
|
|
});
|
|
};
|
|
const groupInfoChangedHandler = ({data}) => {
|
|
this.updateGroupInfo({
|
|
groupInfo: data,
|
|
});
|
|
};
|
|
const groupMemberInfoChangedHandler = ({data}) => {
|
|
uni.$emit(IMSDK.IMEvents.OnGroupMemberInfoChanged, {data});
|
|
if (data.groupID === this.storeCurrentConversation?.groupID) {
|
|
this.updateCurrentMemberInGroup(data);
|
|
}
|
|
};
|
|
//用户所在群组的数量增加时（被邀请入群、入群申请被同意等），会收到此回调。
|
|
IMSDK.subscribe(IMSDK.IMEvents.OnJoinedGroupAdded,joinedGroupAddedHandler);
|
|
//用户所在群组的数量减少时（主动退群、群被解散等），会收到此回调。
|
|
IMSDK.subscribe(IMSDK.IMEvents.OnJoinedGroupDeleted,joinedGroupDeletedHandler);
|
|
//群组信息（头像、群名称等，也包括群主变化）改变时，该群所有群成员会收到此回调。
|
|
IMSDK.subscribe(IMSDK.IMEvents.OnGroupInfoChanged,groupInfoChangedHandler);
|
|
//群成员信息改变（群昵称、头像等）后回调，该群所有群成员会收到此回调。
|
|
IMSDK.subscribe(IMSDK.IMEvents.OnGroupMemberInfoChanged,groupMemberInfoChangedHandler);
|
|
|
|
// application
|
|
const friendApplicationNumHandler = ({data}) => {
|
|
const isRecv = data.toUserID === this.storeCurrentUserID;
|
|
if (isRecv) {
|
|
this.pushNewRecvFriendApplition(data);
|
|
} else {
|
|
this.pushNewSentFriendApplition(data);
|
|
}
|
|
};
|
|
const friendApplicationAccessHandler = ({data}) => {
|
|
const isRecv = data.toUserID === this.storeCurrentUserID;
|
|
if (isRecv) {
|
|
this.updateRecvFriendApplition({
|
|
application: data,
|
|
});
|
|
} else {
|
|
this.updateSentFriendApplition({
|
|
application: data,
|
|
});
|
|
}
|
|
};
|
|
const groupApplicationNumHandler = ({data}) => {
|
|
const isRecv = data.userID !== this.storeCurrentUserID;
|
|
if (isRecv) {
|
|
this.pushNewRecvGroupApplition(data);
|
|
} else {
|
|
this.pushNewSentGroupApplition(data);
|
|
}
|
|
};
|
|
const groupApplicationAccessHandler = ({data}) => {
|
|
const isRecv = data.userID !== this.storeCurrentUserID;
|
|
if (isRecv) {
|
|
this.updateRecvGroupApplition({
|
|
application: data,
|
|
});
|
|
} else {
|
|
this.updateSentGroupApplition({
|
|
application: data,
|
|
});
|
|
}
|
|
};
|
|
//用户发起好友申请后，申请发起者和接收者都会收到此回调，接收者可以选择同意或拒绝好友申请。
|
|
IMSDK.subscribe(IMSDK.IMEvents.OnFriendApplicationAdded,friendApplicationNumHandler);
|
|
//好友申请被同意时，申请发起方和接收方都会收到该回调，双方成功建立好友关系。
|
|
IMSDK.subscribe(IMSDK.IMEvents.OnFriendApplicationAccepted,friendApplicationAccessHandler);
|
|
//好友申请被拒绝时，申请发起方和接收方都会收到该回调。
|
|
IMSDK.subscribe(IMSDK.IMEvents.OnFriendApplicationRejected,friendApplicationAccessHandler);
|
|
//用户发起好友申请后，申请发起者和接收者都会收到此回调，接收者可以选择同意或拒绝好友申请。
|
|
IMSDK.subscribe(IMSDK.IMEvents.OnGroupApplicationAdded,groupApplicationNumHandler);
|
|
//好友申请被同意时，申请发起方和接收方都会收到该回调，双方成功建立好友关系。
|
|
IMSDK.subscribe(IMSDK.IMEvents.OnGroupApplicationAccepted,groupApplicationAccessHandler);
|
|
//好友申请被拒绝时，申请发起方和接收方都会收到该回调。
|
|
IMSDK.subscribe(IMSDK.IMEvents.OnGroupApplicationRejected,groupApplicationAccessHandler);
|
|
//群组被解散时，该群所有群成员会收到此回调。
|
|
//IMSDK.subscribe(IMSDK.IMEvents.OnGroupDismissed,({ data })=>{});
|
|
//群成员增加（如用户被邀请进群），其他群成员会收到此回调。
|
|
//IMSDK.subscribe(IMSDK.IMEvents.onGroupMemberAdded,({ data })=>{});
|
|
//群成员增加（如用户被邀请进群），群成员减少（如群成员退群）， 其他群成员会收到此回调。。
|
|
//IMSDK.subscribe(IMSDK.IMEvents.onGroupMemberDeleted,({ data })=>{});
|
|
//收到的消息被撤回或自己发出的消息被撤回时，会收到此回调。
|
|
//IMSDK.subscribe(IMSDK.IMEvents.onNewRecvMessageRevoked,({ data })=>{});
|
|
//自己发出的单聊消息被对方标记为已读后，消息发送者会收到此回调。
|
|
//IMSDK.subscribe(IMSDK.IMEvents.onRecvC2CReadReceipt,({ data })=>{});
|
|
//自己发出的群聊消息被群成员标记为已读后，消息发送者和标记者均会收到此回调。
|
|
//IMSDK.subscribe(IMSDK.IMEvents.onRecvGroupReadReceipt,({ data })=>{});
|
|
//当应用在后台运行，接收到新消息时，会收到该回调，回调中只会携带一条消息。
|
|
//设置了批量消息监听setBatchMsgListener时，此回调不会触发。
|
|
//IMSDK.subscribe(IMSDK.IMEvents.onRecvOfflineNewMessage,({ data })=>{});
|
|
//当应用在后台运行，接收到新消息时，会收到该回调，回调中可能会携带多条消息。
|
|
IMSDK.subscribe(IMSDK.IMEvents.OnRecvOfflineNewMessages,(res)=>{
|
|
console.log(res);
|
|
});
|
|
//已订阅用户的在线状态发生变化时，会触发此回调。
|
|
//IMSDK.subscribe(IMSDK.IMEvents.onUserStatusChanged,({ data })=>{});
|
|
//建立WebSocket连接失败返回后，触发此回调
|
|
//IMSDK.subscribe(IMSDK.IMEvents.onConnectFailed,({ data })=>{});
|
|
//建立WebSocket连接成功返回后，触发此回调
|
|
//IMSDK.subscribe(IMSDK.IMEvents.onConnectSuccess,({ data })=>{});
|
|
//建立WebSocket连接中，触发此回调
|
|
//IMSDK.subscribe(IMSDK.IMEvents.onConnecting,({ data })=>{});
|
|
//正在输入状态回调。
|
|
//IMSDK.subscribe(IMSDK.IMEvents.onInputStatusChanged,({ data })=>{});
|
|
// conversation
|
|
const totalUnreadCountChangedHandler = ({data}) => {
|
|
if (this.storeIsSyncing) {
|
|
return;
|
|
}
|
|
this.$store.commit("conversation/SET_UNREAD_COUNT", data);
|
|
};
|
|
const newConversationHandler = ({data}) => {
|
|
if (this.storeIsSyncing) {
|
|
return;
|
|
}
|
|
const result = [...data, ...this.storeConversationList];
|
|
this.$store.commit(
|
|
"conversation/SET_CONVERSATION_LIST",
|
|
conversationSort(result)
|
|
);
|
|
};
|
|
const conversationChangedHandler = ({data}) => {
|
|
//console.log('conversationChangedHandler',data);
|
|
if (this.storeIsSyncing) {
|
|
return;
|
|
}
|
|
let filterArr = [];
|
|
//console.log(data);
|
|
const chids = data.map((ch) => ch.conversationID);
|
|
filterArr = this.storeConversationList.filter((tc) => !chids.includes(tc.conversationID));
|
|
const idx = data.findIndex((c) =>c.conversationID === this.storeCurrentConversation.conversationID);
|
|
if (idx !== -1){
|
|
this.$store.commit("conversation/SET_CURRENT_CONVERSATION",data[idx]);
|
|
}
|
|
const result = [...data, ...filterArr];
|
|
this.$store.commit("conversation/SET_CONVERSATION_LIST",conversationSort(result));
|
|
};
|
|
//会话总未读发生变化时的回调。
|
|
IMSDK.subscribe(IMSDK.IMEvents.OnTotalUnreadMessageCountChanged,totalUnreadCountChangedHandler);
|
|
//有新会话产生时，会收到此回调。
|
|
IMSDK.subscribe(IMSDK.IMEvents.OnNewConversation, newConversationHandler);
|
|
//某些会话的关键信息发生变化时，会触发该回调，例如会话的未读数发生变化，会话的最后一条消息发生变化等。
|
|
IMSDK.subscribe(IMSDK.IMEvents.OnConversationChanged,conversationChangedHandler);
|
|
|
|
},
|
|
|
|
async tryLogin() {
|
|
const _this = this;
|
|
const IMToken = uni.getStorageSync("IMToken");
|
|
const IMUserID = uni.getStorageSync("IMUserID")+'';
|
|
//console.log('IMToken:',IMToken);
|
|
//console.log('IMUserID:',IMUserID);
|
|
if (IMToken && IMUserID) {
|
|
//un1i.create1PushMessage({content:"水水水水水水，请重新登陆！"})
|
|
const path = await getDbDir();
|
|
//console.log('path:',path);
|
|
const IMConfig = {
|
|
systemType: "uni-app",
|
|
apiAddr: config.getApiUrl(), // SDK的API接口地址。如：http://xxx:10002
|
|
wsAddr: config.getWsUrl(), // SDK的websocket地址。如： ws://xxx:10001
|
|
dataDir: path, // 数据存储路径
|
|
logLevel: 6,
|
|
logFilePath: path,
|
|
isLogStandardOutput: true,
|
|
isExternalExtensions: false,
|
|
};
|
|
//console.log('IMConfig:',IMConfig);
|
|
const flag = await IMSDK.asyncApi(IMMethods.InitSDK, IMSDK.uuid(), IMConfig);
|
|
//console.log('flag:',flag);
|
|
if (!flag) {
|
|
plus.navigator.closeSplashscreen();
|
|
console.log('初始化IMSDK失败！');
|
|
uni.$u.toast("初始化IMSDK失败！");
|
|
return;
|
|
}
|
|
|
|
_this.setGlobalIMlistener();
|
|
// setTimeout(()=>{
|
|
|
|
// },1000);
|
|
let status;
|
|
do{
|
|
status = await IMSDK.asyncApi(IMSDK.IMMethods.GetLoginStatus,IMSDK.uuid());
|
|
//console.log(status);
|
|
}while(status == -1001);
|
|
if (status === 3) {
|
|
console.log('初始化status === 3失败！');
|
|
_this.initStore();
|
|
return;
|
|
}
|
|
if (status === 1) {
|
|
IMSDK.asyncApi(IMSDK.IMMethods.Login, IMSDK.uuid(), {
|
|
userID: IMUserID,
|
|
token: IMToken,
|
|
})
|
|
.then(_this.initStore)
|
|
.catch((err) => {
|
|
console.log(err);
|
|
uni.removeStorage({
|
|
key: "IMToken",
|
|
});
|
|
uni.removeStorage({
|
|
key: "BusinessToken",
|
|
});
|
|
plus.navigator.closeSplashscreen();
|
|
});
|
|
}
|
|
}else{
|
|
plus.navigator.closeSplashscreen();
|
|
uni.$u.route("/pages/common/login/index");
|
|
}
|
|
},
|
|
|
|
handleNewMessage(newServerMsg) {
|
|
if (this.inCurrentConversation(newServerMsg)) {
|
|
if (
|
|
newServerMsg.contentType !== MessageType.TypingMessage &&
|
|
newServerMsg.contentType !== MessageType.RevokeMessage
|
|
) {
|
|
newServerMsg.isAppend = true;
|
|
this.pushNewMessage(newServerMsg);
|
|
setTimeout(() => uni.$emit(PageEvents.ScrollToBottom, true));
|
|
uni.$u.debounce(this.markConversationAsRead, 2000);
|
|
}
|
|
}else{
|
|
console.log(newServerMsg);
|
|
|
|
console.log( getConversationContent(newServerMsg));
|
|
uni.createPushMessage({
|
|
title:"您的朋友发来新的消息",
|
|
content:getConversationContent(newServerMsg),
|
|
payload:newServerMsg,
|
|
//icon:'',
|
|
//sound:'',
|
|
//cover:'false',
|
|
//delay:0,
|
|
//when:0,//消息上显示的提示时间
|
|
//channelId:"",
|
|
//category:"",
|
|
success(res){
|
|
console.log(res);
|
|
},
|
|
fail(res){
|
|
console.log(res);
|
|
},
|
|
complete(res){
|
|
console.log(res);
|
|
}
|
|
});
|
|
}
|
|
},
|
|
|
|
inCurrentConversation(newServerMsg) {
|
|
switch (newServerMsg.sessionType) {
|
|
case SessionType.Single:
|
|
return (
|
|
newServerMsg.sendID === this.storeCurrentConversation.userID ||
|
|
(newServerMsg.sendID === this.storeCurrentUserID &&
|
|
newServerMsg.recvID === this.storeCurrentConversation.userID)
|
|
);
|
|
case SessionType.WorkingGroup:
|
|
return newServerMsg.groupID === this.storeCurrentConversation.groupID;
|
|
case SessionType.Notification:
|
|
return newServerMsg.sendID === this.storeCurrentConversation.userID;
|
|
default:
|
|
return false;
|
|
}
|
|
},
|
|
|
|
markConversationAsRead() {
|
|
IMSDK.asyncApi(
|
|
IMSDK.IMMethods.MarkConversationMessageAsRead,
|
|
IMSDK.uuid(),
|
|
this.storeCurrentConversation.conversationID
|
|
);
|
|
},
|
|
|
|
initStore() {
|
|
const _this = this;
|
|
this.$store.dispatch("user/getSelfInfo");
|
|
this.$store.dispatch("conversation/getConversationList");
|
|
this.$store.dispatch("conversation/getUnReadCount");
|
|
this.$store.dispatch("contact/getBlacklist");
|
|
this.$store.dispatch("contact/getRecvFriendApplications");
|
|
this.$store.dispatch("contact/getSentFriendApplications");
|
|
this.$store.dispatch("contact/getRecvGroupApplications");
|
|
this.$store.dispatch("contact/getSentGroupApplications");
|
|
this.$store.dispatch("contact/getFriendList");
|
|
this.$store.dispatch("circle/getFriendCircleInfo");
|
|
uni.switchTab({
|
|
url: "/pages/conversation/conversationList/index?isRedirect=true",
|
|
complete() {
|
|
_this.keppAlive();
|
|
plus.navigator.closeSplashscreen();
|
|
},
|
|
fail(e){
|
|
console.log(e);
|
|
}
|
|
});
|
|
},
|
|
|
|
// 验证是否升级
|
|
checkUpdate() {
|
|
let system = uni.getSystemInfoSync()
|
|
plus.runtime.getProperty(plus.runtime.appid, function(inf) {
|
|
checkUpgrade({version:system.appVersion,platform:system.platform,version_wgt:inf.versionCode}).then(res=>{
|
|
let skip_version = uni.getStorageSync('skip_version')
|
|
if(res && res.version!=skip_version){
|
|
uni.$emit('closeWebview')
|
|
this.setShow(this.current, false)
|
|
router('/pages/common/upgrade?model=' + JSON.stringify(res), '', 'fade-in')
|
|
}
|
|
})
|
|
})
|
|
},
|
|
|
|
keppAlive(){
|
|
// #ifdef APP-NVUE
|
|
uni.requestPermissions(['android.permission.RECEIVE_BOOT_COMPLETED'], (result) => {
|
|
if (result.granted) {
|
|
console.log('权限已获得');
|
|
} else {
|
|
console.log('权限被拒绝');
|
|
uni.showModal({
|
|
title: '权限申请',
|
|
content: '您需要授权后台运行权限才能正常使用该功能',
|
|
showCancel: false
|
|
});
|
|
}
|
|
});
|
|
// #endif
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.container {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100%;
|
|
}
|
|
|
|
.gif-image {
|
|
width: 50%;
|
|
}
|
|
</style> |