first

.gitignore

@@ -0,0 +1,16 @@
+.DS_Store
+node_modules/
+/dist/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+
+unpackage

App.vue

@@ -0,0 +1,227 @@
+<script>
+  // APP 和 小程序平台
+  // #ifdef  APP-PLUS || MP-WEIXIN   
+	import TIM from 'tim-wx-sdk';
+	import COS from 'cos-wx-sdk-v5';
+  // #endif
+	
+	// #ifdef H5
+	import TIM from 'tim-js-sdk';
+	import TIMUploadPlugin from 'tim-upload-plugin'
+	// #endif
+	
+  // #ifdef APP-PLUS
+	import Aegis from 'aegis-weex-sdk';
+	// #endif
+	
+	// #ifdef MP-WEIXIN
+	import Aegis from 'aegis-mp-sdk';
+	// #endif
+	
+	// #ifdef H5
+	import Aegis from 'aegis-web-sdk';
+	// #endif
+	
+	import logger from './utils/logger'; // app.js
+	import {
+		genTestUserSig
+	} from './debug/GenerateTestUserSig.js';
+	import { getLang, setTabBar } from '@/utils/util'
+
+	import animationMixin from '@/pages/mixins/animation'
+	const aegis = new Aegis({
+		id: 'iHWefAYqKznuxWjLnr', // 项目key
+		reportApiSpeed: true, // 接口测速
+	});
+	uni.$aegis = aegis
+	// 首先需要通过 uni.requireNativePlugin("ModuleName") 获取 module
+	// #ifdef APP-PLUS
+	const TUICalling = uni.requireNativePlugin('TUICallingUniPlugin-TUICallingModule');
+	if(typeof(TUICalling) == 'undefined') {
+		logger.error('如果需要音视频功能，请集成原生插件，使用真机运行并且自定义基座调试哦～ 插件地址：https://ext.dcloud.net.cn/plugin?id=7097 , 调试地址：https://nativesupport.dcloud.net.cn/NativePlugin/use/use');
+	}
+	// #endif
+	export default {
+		onLaunch() {
+			var obj = this.$route.query;
+			if (obj.adgroup_id) {
+				localStorage.setItem('adgroup_id', JSON.stringify(obj.adgroup_id))
+			}
+			if (obj.agency_id) {
+				localStorage.setItem('agency_id', JSON.stringify(obj.agency_id))
+			}
+			if (obj.code) {
+				localStorage.setItem('agency_code', JSON.stringify(obj.code))
+			}
+			const SDKAppID = genTestUserSig('').sdkAppID;
+			uni.$aegis.reportEvent({
+					name: 'onLaunch',
+					ext1: 'onLaunch-success',
+					ext2: 'uniTuikitExternal',
+					ext3: `${SDKAppID}`,
+			})
+			uni.setStorageSync(`TIM_${SDKAppID}_isTUIKit`, true);
+			// 重点注意： 为了 uni-app 更好地接入使用 tim，快速定位和解决问题，请勿修改 uni.$TUIKit 命名。
+			// 如果您已经接入 tim ，请将 uni.tim 修改为 uni.$TUIKit。
+			uni.$TUIKit = TIM.create({
+				SDKAppID: SDKAppID
+			});
+			// #ifndef H5
+			uni.$TUIKit.registerPlugin({
+				'cos-wx-sdk': COS
+			});
+			// #endif
+			
+			// #ifdef H5
+			uni.$TUIKit.registerPlugin({ 'tim-upload-plugin':TIMUploadPlugin })
+			// #endif
+			// 将原生插件挂载在 uni 上
+			// #ifdef APP-PLUS
+			uni.$TUICalling = TUICalling;
+			// #endif
+			// 如果您已创建了 tim，请将 tim 实例挂载在 wx 上，且不可以修改 wx.$TIM（修改变量可能导致 TUICalling 组件无法正常使用）, 完成 TUICalling 初始化，
+			// 如果您没有创建，可以不传
+			// #ifdef MP-WEIXIN
+			wx.$TIM = uni.$TUIKit;
+			// #endif
+			uni.$TUIKitTIM = TIM;
+			uni.$TUIKitEvent = TIM.EVENT;
+			uni.$TUIKitVersion = TIM.VERSION;
+			uni.$TUIKitTypes = TIM.TYPES; // 监听系统级事件
+			uni.$resetLoginData = this.resetLoginData();
+			uni.$TUIKit.on(uni.$TUIKitEvent.SDK_READY, this.onSDKReady);
+			uni.$TUIKit.on(uni.$TUIKitEvent.SDK_NOT_READY, this.onSdkNotReady);
+			uni.$TUIKit.on(uni.$TUIKitEvent.KICKED_OUT, this.onKickedOut);
+			uni.$TUIKit.on(uni.$TUIKitEvent.ERROR, this.onTIMError);
+			uni.$TUIKit.on(uni.$TUIKitEvent.NET_STATE_CHANGE, this.onNetStateChange);
+			uni.$TUIKit.on(uni.$TUIKitEvent.SDK_RELOAD, this.onSDKReload);
+			this.getSystem()
+			
+			
+			let time = new Date();
+			let timeZone = time.toLocaleTimeString('en-us',{timeZoneName:'short'});  //'1:12:38 PM GMT+8'
+			let timeZoneId = Intl.DateTimeFormat().resolvedOptions().timeZone; //'Asia/Shanghai'
+			this.$store.state.timeZone = timeZoneId;
+			this.$i18n.locale = getLang()
+
+			setTabBar(this)
+		},
+		watch: {
+			'$route'() {
+      	this.$store.state.loginShowSign = false
+			}
+		},
+  	mixins: [animationMixin],
+		globalData: {
+			// userInfo: userID userSig token phone
+			userInfo: null,
+			// 个人信息
+			userProfile: null,
+			isTUIKit: true,
+			headerHeight: 0,
+			statusBarHeight: 0,
+			SDKAppID: genTestUserSig('').sdkAppID
+		},
+		mounted() {
+    	this.$(window).scroll(this.scrollFun);
+		},
+		methods: {
+			// 获取系统配置
+			getSystem() {
+				let _this = this
+				uni.$u.http.get('/api/universal/getHot', {}).then(res => {
+					// this.$db.set('system'.res.data)
+					// res.announcement1 = []
+					// res.announcement1.push(res.announcement)
+					_this.$store.state.system = res;
+					localStorage.setItem('system',JSON.stringify(res))
+				})
+				// 判断是否登录，没有登录需要获取游客im
+				let information = this.$common.get('information') || {}
+				this.getQiNiu()
+				// setInterval(res=>{
+				// 	this.getQiNiu()
+				// },60000)
+				/* 判断用户是否登录 */
+				if(JSON.stringify(information) !== '{}'){
+					uni.$u.http.get('api/Member/info').then(res => {
+						_this.$store.state.info = res
+					})
+				}else {
+					_this.$store.state.isLogin = 2;
+				}
+			},
+			
+			getQiNiu(status) {
+				if(this.$store.state.isLogin == 2) return
+				this.$store.dispatch('getQiNiu')
+			},
+			
+			// TODO:
+			resetLoginData() {
+				this.globalData.expiresIn = '';
+				this.globalData.sessionID = '';
+				this.globalData.userInfo = {
+					userID: '',
+					userSig: '',
+					token: '',
+					phone: ''
+				};
+				this.globalData.userProfile = null;
+				logger.log(`| app |  resetLoginData | globalData: ${this.globalData}`);
+			},
+			onTIMError() {},
+			onSDKReady({name}) {
+				  const isSDKReady = name === uni.$TUIKitEvent.SDK_READY ? true : false
+					uni.$emit('isSDKReady', {
+						isSDKReady: true
+					});
+			},
+			onNetStateChange() {},
+			onSDKReload() {},
+			onSdkNotReady() {},
+			onKickedOut() {
+				uni.showToast({
+					title: 'You are being kicked offline',
+					icon: 'error'
+				});
+				this.$common.del('information');
+				this.$common.del('imTouristAccount');
+				this.$store.state.isLogin = 2;
+				this.$store.state.info={};
+				// console.log('您被踢下线');
+				// uni.navigateTo({
+				// 	url: './pages/TUI-Login/login'
+				// });
+			}
+		}
+	};
+</script>
+
+<style lang="scss">
+	/*每个页面公共css */
+	@import "uview-ui/index.scss";
+	@import "@/static/css/common.scss";
+	@import "@/static/css/animation.scss";
+	@import "@/static/css/style.css";
+	.uni-tabbar__label {
+		margin-top: 0 !important;
+	}
+	body {
+		// font-family: CWC, "Noto Sans Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
+	}
+	.uni-app--showtabbar uni-page-wrapper::after {
+		height: 0 !important;
+	}
+	.u-toast__content {
+		position: relative;
+		z-index: 9999;
+	}
+	.calendar .u-popup__content {
+		border-top-left-radius: 20rpx;
+  	border-top-right-radius: 20rpx;
+	}
+	uni-tabbar .uni-tabbar__icon {
+		margin-bottom: 3px;
+	}
+</style>

README.md

@@ -0,0 +1,67 @@
+
+
+## 简介
+
+**使用uniapp+uview2.x**
+
+## 前序准备
+下载最新版本HbuilderX；
+请求地址目录：/config/request.js;
+多语言单独文件： /static/locales/en.js;
+腾讯IM更换sdkappid:/debug/GenerateTestUserSig.js;
+
+## 功能
+
+```
+┌─components              组件目录
+│  ├─comment-community    评论组件
+│  │  └─
+│  ├─mote-lines-divide    展开更多
+│  │  └─
+│  └─ //....              更多组件文件
+├─pages                   业务页面文件存放的目录
+│  ├─home
+│  │  └─home.vue         home我的
+│  ├─Live
+│  │  └─Live.vue         Live首页
+│  ├─News
+│  │  └─News.vue         News话题
+│  ├─Tips
+│  │  └─Tips.vue         Tips微视频
+│  ├─Match
+│  │  └─Match.vue         Match赛程
+├─static                  静态资源文件
+├─static                  腾讯云IM相关配置
+├─config                  配置文件
+│  ├─common.js			  公共方法  
+│  ├─emojiMap.js		  处理聊天室表情包
+│  ├─request.js		   	  接口请求
+├─main.js                 Vue初始化入口文件
+├─App.vue                 应用配置，用来配置App全局样式以及监听 应用生命周期
+├─manifest.json           配置应用名称、appid、logo、版本等打包信息，详见
+└─pages.json              配置页
+```
+
+## 开发
+
+```bash
+# 将项目拉入hbuilderx
+
+
+# 进入项目目录
+点击运行-运行到浏览器-对应浏览器
+
+```
+
+浏览器访问 http://localhost
+
+## 发布
+
+```bash
+# 点击发行-网站PC
+
+```
+
+852  56213805
+
+123456

components/comment-community/comment-community.vue

@@ -0,0 +1,200 @@
+<template>
+	<view class="comment-eg">
+		<!-- 确认删除 -->
+		<hb-comment ref="hbComment" @add="add" @del="del" @like="like" @focusOn="focusOn" :deleteTip="$t('common.delete1')"
+			:cmData="commentData" v-if="commentData"></hb-comment>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'comment-eg',
+		props: {
+			articleId: {
+				type: String,
+				default: () => {
+					return null;
+				}
+			}
+		},
+		watch: {
+			articleId: {
+				handler: function(newVal, oldVal) {
+					if (newVal) {
+						this.getComment(newVal);
+					}
+				},
+				immediate: true
+			}
+		},
+		data() {
+			return {
+				"commentData": null,
+				"reqFlag": false // 请求标志，防止重复操作，true表示请求中
+
+			}
+		},
+		methods: {
+			
+			showCom() {
+				this.$refs.hbComment.commentInput()
+			},
+			// 登录校验
+			checkLogin() {
+				// TODO 此处填写登录校验逻辑
+				if (true) {
+					return true;
+				} else {
+					uni.showModal({
+						title: '提示',
+						content: '请先登录',
+						confirmText: '前往登录',
+						success: function(res) {
+							if (res.confirm) {
+								uni.redirectTo({
+									url: '/pages/login/login'
+								});
+							}
+						}
+					});
+					return false;
+				}
+			},
+			// 输入框聚焦
+			focusOn() {
+				if (this.$store.state.isLogin != 1) {
+					this.$toUrl('/pages/login/login')
+					return
+				}
+			},
+			// 获取评论
+			getComment(articleId) {
+				console.log('--=');
+				// TODO 接入真实接口
+				// this.$u.api.commentList(articleId).then(res => {
+				// this.commentData = {
+				// 	"readNumer": res.readNumer,
+				// 	"commentSize": res.commentList.length,
+				// 	"comment": this.getTree(res.commentList)
+				// };
+				// }).catch(res => {})
+				
+				uni.$u.http.get('/api/circle/info', {params:{id:articleId}}).then(res => {
+					 this.commentData = {
+						"readNumer": 0,
+						"commentSize": res.list.total,
+						"comment": this.getTree(res.list.data)
+					};
+				})
+			},
+			// 新增评论
+			add(req) {
+				if (this.$store.state.isLogin != 1) {
+					this.$toUrl('/pages/login/login')
+					return
+				}
+				if (this.reqFlag) {
+					uni.showToast({
+						title: this.$t('common.frequent'),
+						duration: 1000
+					});
+					return
+				}
+				this.reqFlag = true;
+				console.log(req);
+				// TODO 接入真实接口
+				let params = {
+					"id": this.articleId,
+					"cid": req.pId,
+					"content": req.content
+				}
+				uni.$u.http.post('api/Circleuser/comment', params).then(res => {
+					this.getComment(this.articleId);
+					this.$refs.hbComment.addComplete();
+					this.reqFlag = false;
+				}).catch(res=>{
+					this.reqFlag = false;
+				})
+				
+			},
+			// 点赞评论
+			like(commentId) {
+				if (this.$store.state.isLogin != 1) {
+					this.$toUrl('/pages/login/login')
+					return
+				}
+				if (this.reqFlag) {
+					uni.showToast({
+						title: this.$t('common.frequent'),
+						duration: 1000
+					});
+					return
+				}
+				this.reqFlag = true;
+				uni.$u.http.post('api/Circleuser/commentLikes', {id:commentId}).then(res => {
+					this.$refs.hbComment.likeComplete(commentId);
+					this.reqFlag = false;
+				}).catch(res=>{
+					this.reqFlag = false;
+				})
+				
+				
+				// TODO 接入真实接口
+				// this.$u.api.commentLike(commentId).then(res => {
+				// 	this.$refs.hbComment.likeComplete(commentId);
+				// 	this.reqFlag = false;
+				// }).catch(res => {
+				// 	this.reqFlag = false;
+				// })
+				// 下边假装请求成功
+				// this.reqFlag = false;
+				// this.$refs.hbComment.likeComplete(commentId);
+			},
+			// 删除评论
+			del(commentId) {
+				if (this.$store.state.isLogin != 1) {
+					this.$toUrl('/pages/login/login')
+					return
+				}
+				if (this.reqFlag) {
+					uni.showToast({
+						title: this.$t('common.frequent'),
+						duration: 1000
+					});
+					return
+				}
+				this.reqFlag = true;
+				// TODO 接入真实接口
+				// this.$u.api.commentDelete(commentId).then(res => {
+				// 	this.reqFlag = false;
+				// 	this.$refs.hbComment.deleteComplete(commentId);
+				// }).catch(res => {
+				// 	this.reqFlag = false;
+				// })
+				// 下边假装请求成功
+				this.reqFlag = false;
+				this.$refs.hbComment.deleteComplete(commentId);
+			},
+			// 列表按照父子转换成树
+			getTree(data) {
+				let result = [];
+				let map = {};
+				data.forEach(item => {
+					map[item.id] = item;
+				});
+				data.forEach(item => {
+					let parent = map[item.parentId];
+					if (parent) {
+						(parent.children || (parent.children = [])).push(item);
+					} else {
+						result.push(item);
+					}
+				});
+				return result;
+			}
+		}
+	};
+</script>
+
+<style>
+</style>

components/comment-eg/comment-eg.vue

@@ -0,0 +1,225 @@
+<template>
+	<view class="comment-eg">
+		<commentVideo ref="hbComment" @add="add" @del="del" @like="like" @focusOn="focusOn" :deleteTip="$t('common.delete1')"
+			:cmData="commentData" v-if="commentData" />
+	</view>
+</template>
+
+<script>
+import commentVideo from './comment-video.vue'
+	export default {
+		components: {
+			commentVideo
+		},
+		name: 'comment-eg',
+		props: {
+			articleId: {
+				type: String,
+				default: () => {
+					return null;
+				}
+			}
+		},
+		watch: {
+			articleId: {
+				handler: function(newVal, oldVal) {
+					if (newVal) {
+						this.getComment(newVal);
+					}
+				},
+				immediate: true
+			}
+		},
+		data() {
+			return {
+				"commentData": null,
+				"reqFlag": false, // 请求标志，防止重复操作，true表示请求中
+				page:1,
+				arr:[],
+				status:'more'
+			}
+		},
+		methods: {
+			onReachBottom1() {
+				console.log(this.status);
+				if(this.status == 'more') {
+					this.getComment(this.articleId)
+				}
+			},
+			showCom() {
+				this.$refs.hbComment.commentInput()
+			},
+			// 登录校验
+			checkLogin() {
+				// TODO 此处填写登录校验逻辑
+				if (true) {
+					return true;
+				} else {
+					uni.showModal({
+						title: '提示',
+						content: '请先登录',
+						confirmText: '前往登录',
+						success: function(res) {
+							if (res.confirm) {
+								uni.redirectTo({
+									url: '/pages/login/login'
+								});
+							}
+						}
+					});
+					return false;
+				}
+			},
+			// 输入框聚焦
+			focusOn() {
+				if (this.$store.state.isLogin != 1) {
+					this.$toUrl('/pages/login/login')
+					return
+				}
+			},
+			// 获取评论
+			getComment(articleId) {
+				console.log('--=');
+				// TODO 接入真实接口
+				// this.$u.api.commentList(articleId).then(res => {
+				// this.commentData = {
+				// 	"readNumer": res.readNumer,
+				// 	"commentSize": res.commentList.length,
+				// 	"comment": this.getTree(res.commentList)
+				// };
+				// }).catch(res => {})
+				this.status = 'loading'
+				uni.$u.http.get('/api/Headlines/getInfo', {params:{id:articleId,page:this.page}}).then(res => {
+					 if(this.page == 1) {
+						 this.arr = res.commentList.data
+					 }else {
+						 this.arr = [... this.arr,...res.commentList.data]
+					 }
+					 console.log(res.commentList.total,this.arr.length);
+					 if(res.commentList.total > this.arr.length) {
+						 this.page++
+						 this.status = 'more'
+					 }else {
+						 this.status = 'nomore'
+					 }
+					 
+					 this.commentData = {
+						"readNumer": 0,
+						"commentSize": res.commentList.total,
+						"comment": this.getTree(this.arr)
+					};
+				})
+			},
+			// 新增评论
+			add(req) {
+				if (this.$store.state.isLogin != 1) {
+					this.$toUrl('/pages/login/login')
+					return
+				}
+				if (this.reqFlag) {
+					// uni.showToast({
+					// 	title: this.$t('common.frequent'),
+					// 	duration: 1000
+					// });
+					return
+				}
+				this.reqFlag = true;
+				// TODO 接入真实接口
+				let params = {
+					"id": this.articleId,
+					"cid": req.pId,
+					"content": req.content
+				}
+				// console.log('新增评论');
+				uni.$u.http.post('api/Headlines_user/comment', params).then(res => {
+					 this.page = 1;
+					this.getComment(this.articleId);
+					this.$refs.hbComment.addComplete();
+					this.reqFlag = false;
+					
+				}).catch(res=>{
+					this.reqFlag = false;
+				})
+				
+			},
+			// 点赞评论
+			like(commentId) {
+				if (this.$store.state.isLogin != 1) {
+					this.$toUrl('/pages/login/login')
+					return
+				}
+				if (this.reqFlag) {
+					uni.showToast({
+						title: this.$t('common.frequent'),
+						duration: 1000
+					});
+					return
+				}
+				this.reqFlag = true;
+				uni.$u.http.post('api/Headlines_user/commentLikes', {id:commentId}).then(res => {
+					this.$refs.hbComment.likeComplete(commentId);
+					this.reqFlag = false;
+				}).catch(res=>{
+					this.reqFlag = false;
+				})
+				
+				
+				// TODO 接入真实接口
+				// this.$u.api.commentLike(commentId).then(res => {
+				// 	this.$refs.hbComment.likeComplete(commentId);
+				// 	this.reqFlag = false;
+				// }).catch(res => {
+				// 	this.reqFlag = false;
+				// })
+				// 下边假装请求成功
+				// this.reqFlag = false;
+				// this.$refs.hbComment.likeComplete(commentId);
+			},
+			// 删除评论
+			del(commentId) {
+				if (this.$store.state.isLogin != 1) {
+					this.$toUrl('/pages/login/login')
+					return
+				}
+				if (this.reqFlag) {
+					uni.showToast({
+						title: this.$t('common.frequent'),
+						duration: 1000
+					});
+					return
+				}
+				this.reqFlag = true;
+				// TODO 接入真实接口
+				// this.$u.api.commentDelete(commentId).then(res => {
+				// 	this.reqFlag = false;
+				// 	this.$refs.hbComment.deleteComplete(commentId);
+				// }).catch(res => {
+				// 	this.reqFlag = false;
+				// })
+				// 下边假装请求成功
+				this.reqFlag = false;
+				this.$refs.hbComment.deleteComplete(commentId);
+			},
+			// 列表按照父子转换成树
+			getTree(data) {
+				let result = [];
+				let map = {};
+				data.forEach(item => {
+					map[item.id] = item;
+				});
+				data.forEach(item => {
+					let parent = map[item.parentId];
+					if (parent) {
+						(parent.children || (parent.children = [])).push(item);
+					} else {
+						result.push(item);
+					}
+				});
+				return result;
+			}
+		}
+	};
+</script>
+
+<style>
+</style>

components/comment-eg/comment-video.vue

@@ -0,0 +1,551 @@
+<template>
+	<view class="hb-comment">
+		<!-- 阅读数-start -->
+		<!-- <view>
+			<img style="width: 14px; height: 14px;"
+				src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAA0tJREFUWEftVk2IHUUQ/qp311NOksRT8JBDkARCfrxEDyLK+pe/DQkmJpBlZ7ofDwQ15iRocjYSSWAzU/OWd4hCMJiQH43xBz2YXCRivIgHQQ8SRPGUU/btfNLPnuU5O7OZlWz2kobh8aq/qvq6qrq6BEu8ZIn94wGBBUWg3W6v6vV62wFsILlGRNYA6AH4AcCPJH8mebPT6dxomtpGBJxz4wD2kny2oWHN81ybEJmXQKvVWpfn+VsAXi45vgPgj/D5rUfC91AJ54m83el0PLZy1RKw1u4GkAB4OGj+LSJXRORMkiSXq6xFUfSUiHi93SKyImB+BeBU9fMqnUoCcRy/IiIfFAoicp7kYVX9pUkKrLWrReRdkjsLvNfPsuxYWX8OAWvtOwCODACPqOrRJo7LmApbe1T17CDuPwSccy2SpwZYj2VZdr7K+fj4+IqRkZFVIjJD8ndV/asKdzcSswTiON4iIlcBLPOGROTFNE0/rTHqQ3motHdWVffU1YYx5utizxjzXJIk3te/nbDdbi/r9XpesCWAasNureV86VDVurqKRUSD7k8zMzPPT01N/dYHW2uPA3gtnDxL09TWnPwjX+F+j+Q1EfkCwC0ALwHYGnTeU9U3q/Sdc0oyDnvnVHWXOOdeIPlJEN4E8ExVPq21ywH8GXCXVHXboJM4jr8VkSe8bHp6emW32y2ws7Bg40sA68NhD3gCXZIHA2q07r4659aT9C3XL3+vi3D2BaVi26Sq31dFIY7jgyLSDXs3xFp7rci9MebJJEn8/zlrMQj00+ic20/ydAjJhTRNd9Tk/56ngOT2ogg/BjAWHB9X1TfuQxG+r6qv9wlMTEw8OjQ0dAXAY8HxYl/D68PDw6OTk5O3Z+9sq9UazfP8s+Lki9iIbpMczbLsej/tg6F2zr1K8kQhI3n/WnHhdDEfI5L7syz7cPDQlW2zHIl78RwDqCzu2oEkiqKnjTFfDbD9vwOJb9vHsiw7XHWz5h3JoijaZIzxz/PjJeVGIxnJb4wxJ9M0PVflfE4R1oGcc2Mk9wHYVYcpyS8BuKiqnbvhG03FhRHn3GaSG0muM8as9b8AjB/HRcR/35G8oKr+hWy0FkSgkcUFgh4QWPII/ANy0cUvD9WbkgAAAABJRU5ErkJggg==" />
+			<span class="top-read">{{commentData.readNumer}}</span>
+		</view> -->
+		<!-- 阅读数-end -->
+		<!-- 阅读数下边那条线-start -->
+		<!-- <view class="seg_line_box">
+			<view class="seg_line"></view>
+			<view class="seg_dot"></view>
+			<view class="seg_line"></view>
+		</view> -->
+		<!-- 阅读数下边那条线-end -->
+		<!-- 评论主体-start -->
+		<view class="comment-list" v-if="commentData.comment.length != 0">
+			<!-- 评论主体-顶部数量及发表评论按钮-start -->
+			<view class="comment-num">
+				<view>{{ $t('common.allComments') }} ({{commentData.commentSize}})</view>
+				<!-- <view class="add-btn">
+					<button type="primary" size="mini" @click="commentInput">发表评论</button>
+				</view> -->
+			</view>
+			<!-- 评论主体-顶部数量及发表评论按钮-end -->
+			<!-- 评论列表-start -->
+			<view class="comment-box" v-for="(item, index) in commentData.comment" :key="index">
+				<view class="comment-box-item">
+					<view>
+						<image :src="item.avatar || emptyAvatar" mode="aspectFill" class="avatar"></image>
+					</view>
+					<view class="comment-main">
+						<!-- 父评论体-start -->
+						<view class="comment-main-top">
+							<view class="nick-name-box">
+								<!-- <view class="comLogo com1" v-if="index == 0">沙发</view>
+								<view class="comLogo com2" v-if="index == 1">板凳</view>
+								<view class="comLogo com3" v-if="index == 2">地板</view> -->
+								<!-- <view class="comLogo com4" v-if="index > 2">{{index + 1}}楼</view> -->
+								<view class="nick-name">{{item.user_nickname}}</view>
+							</view>
+							<view class="zan-box flex-center" @click="like(item.id)">
+								<span :class="item.is_likes == 1 ? 'isLike' : 'notLike'">{{item.like == 0 ? '' : item.like}}</span>
+								<img style="width: 48rpx; height: 48rpx;" v-if="item.is_likes == 0" src="/static/image/news/zan-false.png" />
+								<img style="width: 48rpx; height: 48rpx;" v-else src="/static/image/news/zan.png" />
+							</view>
+						</view>
+						<view class="comment-main-content">
+							{{item.content.length > 60 ? item.content.slice(0, 59) : item.content}}
+							<span v-if="item.content.length > 60">
+								{{item.hasShowMore ? item.content.slice(59) : '...'}}
+								<span class="foot-btn" @click="showMore(item.id)">
+									<!-- 收起 展开 -->
+									{{item.hasShowMore ? $t('common.retract') : $t('common.expand')}}
+								</span>
+							</span>
+						</view>
+						<view class="comment-main-foot">
+							<view class="foot-time">{{item.addtime}}</view>
+							<!-- <view class="foot-btn" @click="reply(item.user_nickname,item.user_nickname,item.id)">回复</view>
+							<view class="foot-btn" v-if="item.owner" @click="confirmDelete(item.id)">删除</view> -->
+						</view>
+						<!-- 父评论体-end -->
+						<!-- 子评论列表-start -->
+						<view class="comment-sub-box">
+							<view class="comment-sub-item" v-for="(each,index) in item.children" :key="index">
+								<view>
+									<image :src="each.avatar || emptyAvatar" mode="aspectFill" class="avatar">
+									</image>
+								</view>
+								<view class="comment-main">
+									<view class="sub-comment-main-top">
+										<view class="nick-name">{{each.user_nickname}}</view>
+										<view class="zan-box flex-center" @click="like(each.id)">
+											<span :class="each.is_likes == 1 ? 'isLike' : 'notLike'">{{each.like == 0 ? '' : each.like}}</span>
+											<img style="width: 48rpx; height: 48rpx;" v-if="each.is_likes == 0" src="/static/image/news/zan-false.png" />
+											<img style="width: 48rpx; height: 48rpx;" v-else src="/static/image/news/zan.png" />
+										</view>
+									</view>
+									<view class="comment-main-content">
+										{{each.content.length > 60 ? each.content.slice(0, 59) : each.content}}
+										<span v-if="each.content.length > 60">
+											{{each.hasShowMore ? each.content.slice(59) : '...'}}
+											<span class="foot-btn" @click="showMore(each.id)">
+												<!-- 收起 展开 -->
+												{{each.hasShowMore ? $t('common.retract') : $t('common.expand')}}
+											</span>
+										</span>
+									</view>
+									<view class="comment-main-foot">
+										<!-- <view class="foot-time">{{each.addtime}}</view> -->
+										<!-- <view class="foot-btn" @click="reply(item.user_nickname,each.user_nickname,item.id)">
+											回复</view> -->
+										<!-- <view class="foot-btn" v-if="each.owner" @click="confirmDelete(each.id)">删除
+										</view> -->
+									</view>
+								</view>
+							</view>
+						</view>
+						<!-- 子评论列表-end -->
+					</view>
+				</view>
+			</view>
+			<!-- 评论列表-end -->
+		</view>
+		<!-- 评论主体-end -->
+		<!-- 无评论-start -->
+		<view class="comment-none font24" v-else>
+			<!-- No comments,  Click on the comments-->
+			{{$t('common.noComments')}}，<span @click="commentInput" style="color: #DC3C23;">{{$t('common.COTComments')}}</span>
+		</view>
+		<!-- 无评论-end -->
+		<!-- 新增评论-start -->
+		<view class="comment-submit-box" v-if="submit" @click="closeInput">
+			<!-- 下边的click.stop.prevent用于让上边的click不传下去，以防点到下边的空白处触发closeInput方法 -->
+			<view class="comment-add" @click.stop.prevent="stopPrevent" :style="'bottom:' + KeyboardHeight + 'px'">
+				<view class="comment-submit">
+					<view class="btn-click cancel" @click="closeInput">{{$t('news.cancel')}}</view>
+					<view>
+						<view class="replayTag" v-show="showTag">
+							<!-- 回复在 {{pUser}} 的评论下 -->
+							<view>{{ $t('common.reUnder').replace('{params}', pUser) }}</view>
+							<view @click="tagClose" class="replyTagClose">×</view>
+						</view>
+					</view>
+					<view>
+						<view class="btn-click" @click="add">{{$t('news.confirm')}}</view>
+					</view>
+				</view>
+				<textarea class="textarea" v-model="commentReq.content" :placeholder="placeholder" :adjust-position="false" :show-confirm-bar="false"
+					@blur="blur" @focus="focusOn" :focus="focus" maxlength="800"></textarea>
+			</view>
+		</view>
+		<!-- 新增评论-end -->
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'hb-comment',
+		props: {
+			cmData: {
+				type: Object,
+				default: () => {
+					return null;
+				}
+			},
+			deleteTip: {
+				type: String,
+				default: () => {
+					// 操作不可逆，如果评论下有子评论，也将被一并删除，确认？
+					return this.$t('common.operationNot');
+				}
+			},
+		},
+		watch: {
+			cmData: {
+				handler: function(newVal, oldVal) {
+					this.init(newVal);
+				},
+				immediate: true
+			}
+		},
+		data() {
+			return {
+				"emptyAvatar": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAABF5JREFUWEfFl11oHFUUx//nbmKwxdJ9qFL7YPEhRJC2gljjF60WG0WsoNkWfSnZ7Jy7FVPF0AoKpmBFqyIG3Jk7G1iIQXHbBz+KbbGtRfBbMe2LseKjiVDoiqIhwZ0jV3fb3cnM7kQCuU+7M+ec/+9+nHPPEJZ50DLrY1EApVJp9fz8/BYRuZ2INgDYWJvAWRE5R0RnZmZmPh4ZGZlPOrFEAMVi8e4gCPYSUZ+IXGGFgiCYIaJpKyQi1yql1orIFgAXARxRSvm5XO67diBtAYwxRQCDAE4RUUkpdWxwcNCKLBiu665TSj0kIpqIbgTgMzO3gmgJYIz5CMB9AIaZ+bXGQMVi8RoRuZeI/lZKHc1ms3/U34+Pj6+cnZ3dC+AggGPMfH8cRCyAMUZqThlmPlwPUCgU0qlUyq7Kww1BrbjHzPsahYwx/QDK9hkzR2pFPjTGnAWwIexkjOkRkRIR3Rozo5Miskdr/VMIxE7mHDPXD+2l1wsA6nseBMHmfD7/dSjQOwB2tTlYC/bddd1blFJfARhj5lyjfxNA7bSfitpz3/d3iYgFaDuUUjeHM8AY8zSAV5VS9+RyudP1IE0Axpj3Aaxk5m1hFc/zPiWiO9uq/2dwiJn3h22NMScB/MnMOxYAjI6Orurq6rpgU0hrXYpw/hFAd0KAD5n5wbCt7/t7ROT1ubm5NUNDQ7/b95dWwHXd7Uqp452dnVcPDAxciACwDlclAbAFynGcdRGr2EtEnwdB0JfP5080ARhjDhLRbY7jbI0SMcZUAKxOAgDgN2ZOx8SxGfEiMz/bBOD7/lgQBCu01o/GOH4PYFNCgElmvinK1vf9X2xxchzHVtfLW2CMOQpgipmHYwBeBtBUaOJgRKSgtX48Js63AH5l5geaADzPe1cpddFxnHyM42YAXyZYAXt+epn557iVFJHzWuudYYDnlFJ9juPcESfi+35JRHa3gdjPzIfibIwxNtPe0Fq/EAZ4hIhcZl4T5+y67nql1CcA1kfZENFnrSZQ6ycqItKvtT4SBthIRJMdHR092WzW5nzk8H1/WEReiQHY4TjOB3G+nuf9qyEim7TW9r65fAjL5fKVlUrlPICXmPnNFquwWym1oFBZ+yAItubz+TMtAJ4gon3pdLo7k8nMNgHYP7ZeE5EWkbuYeaYx0NjY2HXValUDeApAV4zIJIADzPxe+H2hULg+lUp9U6sBl3qLprugXC6nKpXKF0R02nGcZ2wQ3/e3ichOEckQ0aoEWQDbsgF4a3p6eqLeH3qeN0FE3el0ujeTyVTrcaKuY1uIjIg8CaCfiLYnEW1hY4WPi8gEgMeY+e1G27iGxHYxtptZynGYmTPhgK1asqWEiBRfcAjDdMaYpYCIFW8LUMuM54nIsb3/YvbDXskiYtuzA6382n4X1CDWAnCSgNSFa98ETakcWbwWMytjzAoAPUEQ3JBKpXrs75r/VLVanVJK/VC7Uf9KGjfRCiQN9n/slh3gHz9i4jC+FVL5AAAAAElFTkSuQmCC",
+				"commentData": null,
+				"placeholder": this.$t('news.input'),
+				"commentReq": {
+					"pId": null, // 评论父id
+					"content": null // 评论内容
+				},
+				"pUser": null, // 标签-回复人
+				"showTag": false, // 标签展示与否
+				"focus": false, // 输入框自动聚焦
+				"submit": false, // 弹出评论
+				"KeyboardHeight": 0 // 键盘高度
+			};
+		},
+		mounted: function() {
+			uni.onKeyboardHeightChange(res => {
+				this.KeyboardHeight = res.height;
+			})
+		},
+		methods: {
+			// 初始化评论
+			init(cmData) {
+				// for (var i in cmData.comment) {
+				// 	cmData.comment[i].hasShowMore = false;
+				// 	for (var j in cmData.comment[i].children) {
+				// 		cmData.comment[i].children[j].hasShowMore = false;
+				// 	}
+				// }
+				this.commentData = cmData;
+			},
+			// 没用的方法，但不要删
+			stopPrevent() {},
+			// 回复评论
+			reply(pUser, reUser, pId) {
+				if (this.$store.state.isLogin != 1) {
+					this.$toUrl('/pages/login/login')
+					return
+				}
+				this.pUser = pUser;
+				this.commentReq.pId = pId;
+				if (reUser) {
+					this.commentReq.content = '@' + reUser + ' ';
+				} else {
+					this.commentReq.content = '';
+				}
+				this.showTag = true;
+				this.commentInput();
+			},
+			// 删除评论前确认
+			confirmDelete(commentId) {
+				var that = this;
+				uni.showModal({
+					// 警告
+					title: this.$t('common.warn'),
+					content: that.deleteTip,
+					confirmText: this.$t('common.delete1'),
+					success: function(res) {
+						if (res.confirm) {
+							that.$emit('del', commentId);
+						}
+					}
+				});
+			},
+			// 新增评论
+			add() {
+				if (this.$store.state.isLogin != 1) {
+					this.$toUrl('/pages/login/login')
+					return
+				}
+				if (this.commentReq.content == null || this.commentReq.content.length < 2) {
+					// Please enter content
+					this.$toast(this.$t('common.PEContent'))
+					return
+				}
+				this.$emit('add', this.commentReq);
+			},
+			// 点赞评论
+			like(commentId) {
+				if (this.$store.state.isLogin != 1) {
+					this.$toUrl('/pages/login/login')
+					return
+				}
+				this.$emit('like', commentId);
+			},
+			// 新增完成
+			addComplete() {
+				this.commentReq.content = null;
+				this.tagClose();
+				this.closeInput();
+			},
+			// 点赞完成-本地修改点赞结果
+			likeComplete(commentId) {
+				for (var i in this.commentData.comment) {
+					if (this.commentData.comment[i].id == commentId) {
+						this.commentData.comment[i].is_likes == 1 ? this.commentData.comment[i].like-- : this.commentData
+							.comment[i].like++;
+						this.commentData.comment[i].is_likes  == 1?this.commentData.comment[i].is_likes = 0 : this.commentData.comment[i].is_likes = 1;
+						return
+					}
+					for (var j in this.commentData.comment[i].children) {
+						if (this.commentData.comment[i].children[j].id == commentId) {
+							this.commentData.comment[i].children[j].is_likes  == 1 ? this.commentData.comment[i].children[j].like-- : this.commentData.comment[i].children[j].like++;
+							this.commentData.comment[i].children[j].is_likes  == 1 ? this.commentData.comment[i].children[j].is_likes = 0 : this.commentData.comment[i].children[j].is_likes= 1;
+							return
+						}
+					}
+				}
+			},
+			// 删除完成-本地删除评论
+			deleteComplete(commentId) {
+				for (var i in this.commentData.comment) {
+					for (var j in this.commentData.comment[i].children) {
+						if (this.commentData.comment[i].children[j].id == commentId) {
+							this.commentData.comment[i].children.splice(Number(j), 1);
+							return
+						}
+					}
+					if (this.commentData.comment[i].id == commentId) {
+						this.commentData.comment.splice(Number(i), 1);
+						return
+					}
+				}
+			},
+			// 展开评论
+			showMore(commentId) {
+				for (var i in this.commentData.comment) {
+					if (this.commentData.comment[i].id == commentId) {
+						this.commentData.comment[i].hasShowMore = !this.commentData.comment[i].hasShowMore;
+						this.$forceUpdate();
+						return
+					}
+					for (var j in this.commentData.comment[i].children) {
+						if (this.commentData.comment[i].children[j].id == commentId) {
+							this.commentData.comment[i].children[j].hasShowMore = !this.commentData.comment[i].children[j]
+								.hasShowMore;
+							this.$forceUpdate();
+							return
+						}
+					}
+				}
+			},
+			// 输入框失去焦点
+			blur() {
+				this.focus = false;
+			},
+			// 输入框聚焦
+			focusOn() {
+				this.$emit('focusOn');
+			},
+			// 标签关闭
+			tagClose() {
+				this.showTag = false;
+				this.pUser = null;
+				this.commentReq.pId = null;
+			},
+			// 输入评论
+			commentInput() {
+				// TODO 调起键盘方法
+				this.submit = true;
+				setTimeout(() => {
+					this.focus = true;
+				}, 50)
+			},
+			// 关闭输入评论
+			closeInput() {
+				this.focus = false;
+				this.submit = false;
+			}
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	.hb-comment {
+		padding: 24rpx;
+		height: 100%;
+		overflow-y:auto;
+		// border-top: 20rpx solid #F3F3F7;
+	}
+
+	.top-read {
+		font-size: 28rpx;
+		padding-left: 10rpx;
+		color: #999999;
+	}
+
+	.seg_line_box {
+		display: flex;
+		height: 5rpx;
+		justify-content: space-between;
+		margin: 5rpx 0;
+	}
+
+	.seg_line {
+		width: 45%;
+		border-bottom: 1rpx solid #e1e1e1;
+	}
+
+	.seg_dot {
+		width: 8%;
+		border-bottom: 5rpx dotted #dbdbdb;
+	}
+
+	.comment-num {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 20rpx 0;
+	}
+
+	.comment-box {
+		padding: 24rpx 0;
+		border-bottom: 2rpx solid #E9E9E9;
+	}
+
+	.comment-box-item {
+		display: flex;
+	}
+
+	.comment-main {
+		padding-left: 20rpx;
+	}
+
+	.comment-main-top {
+		width: 600rpx;
+		padding-top: 6rpx;
+		display: flex;
+		justify-content: space-between;
+	}
+
+	.sub-comment-main-top {
+		width: 510rpx;
+		padding-top: 6rpx;
+		display: flex;
+		justify-content: space-between;
+	}
+
+	.avatar {
+		width: 70rpx;
+		height: 70rpx;
+		border-radius: 50%;
+	}
+
+	.nick-name-box {
+		display: flex;
+		align-items: center;
+	}
+
+	.comLogo {
+		margin-right: 18rpx;
+		font-size: 22rpx;
+		border-radius: 10rpx;
+		padding: 5rpx 15rpx;
+		color: #FFFFFF;
+	}
+
+	.com1 {
+		background-color: #d218b1;
+	}
+
+	.com2 {
+		background-color: #f19c0b;
+	}
+
+	.com3 {
+		background-color: #c8da85;
+	}
+
+	.com4 {
+		background-color: #bfd0da;
+	}
+
+	.nick-name {
+		font-size: 32rpx;
+		color: #333;
+	}
+
+	.isLike {
+		font-size: 28rpx;
+		padding-right: 10rpx;
+		color: #DC3C23;
+	}
+
+	.notLike {
+		font-size: 28rpx;
+		padding-right: 10rpx;
+		color: #999999;
+	}
+
+	.comment-main-content {
+		font-size: 28rpx;
+		padding: 10rpx 10rpx 10rpx 0;
+	}
+
+	.comment-main-foot {
+		display: flex;
+		font-size: 22rpx;
+	}
+
+	.replayTag {
+		color: #909399;
+		margin-bottom: 5px;
+		border: 1px solid #c8c9cc;
+		background-color: #f4f4f5;
+		border-radius: 3px;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		font-size: 16rpx;
+		padding: 5px 10px;
+	}
+
+	.replyTagClose {
+		font-size: 20px;
+		line-height: 12px;
+		padding: 0 0 2px 5px;
+	}
+
+	.foot-btn {
+		padding-left: 10rpx;
+		color: #007AFF;
+	}
+
+	.comment-sub-box {
+		padding: 20rpx 0;
+	}
+
+	.comment-sub-item {
+		display: flex;
+	}
+
+	.comment-none {
+		padding: 20rpx;
+		width: 100%;
+		text-align: center;
+		color: #999999;
+	}
+
+	.comment-submit-box {
+		position: fixed;
+		display: flex;
+		align-items: flex-end;
+		z-index: 9900;
+		left: 0;
+		top: var(--window-top);
+		bottom: 0;
+		background-color: rgba($color: #000000, $alpha: 0.5);
+		width: 100%;
+	}
+
+	.comment-add {
+		position: fixed;
+		background-color: #FFFFFF;
+		width: 100%;
+		padding: 5rpx;
+		border: 1px solid #ddd;
+		transition: .3s;
+		-webkit-transition: .3s;
+	}
+
+	.btn-click {
+		color: $color2;
+		font-size: 28rpx;
+		padding: 10rpx;
+	}
+
+	.cancel {
+		color: #606266;
+	}
+
+	.textarea {
+		height: 100px;
+		padding: 16rpx;
+		width: 100%;
+	}
+
+	.comment-submit {
+		padding: 5rpx 20rpx 0 20rpx;
+		border-bottom: 1px dashed #ddd;
+		width: calc(100% - 40rpx);
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+	}
+</style>

components/header-logo/header-logo.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="top">
+    <img class="logo" src="/static/logo_big.png" alt="">
+  </div>
+</template>
+<script>
+export default {
+  data () {
+    return {
+      
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-top: 8rpx;
+  padding-bottom: 16rpx;
+  background-color: #10044A;
+  .logo {
+    height: 24px;
+  }
+}
+</style>

components/install/install.vue

@@ -0,0 +1,81 @@
+<template>
+	<view class="notice flex" v-show="isShow">
+		<image src="../../static/image/common/warn.png" mode="" class="cha" @click="closeClick"></image>
+		<image src="../../static/image/common/120.png" mode="" class="logo"></image>
+		<!-- Get On-Demand Highlights,Interactive<br/> Live Stats only on the App -->
+		<p class="font24" v-html="$t('common.installText')"></p>
+		<!-- INSTALL -->
+		<text @click="installClick" class="font28">{{ $t('common.install') }}</text>
+	</view>
+</template>
+
+<script>
+
+	export default {
+		name: "install",
+		data() {
+			return {
+				isShow: true
+			};
+		},
+		computed: {
+			system() {
+				return this.$store.state.system || {}
+			},
+		},
+		created() {
+			if (this.$route.meta.name == 'pages-Match-Match' && this.$route.query.flag == 'app') {
+				this.isShow = false
+				uni.hideTabBar()
+			}
+		},	
+		methods: {
+			installClick() {
+				this.$toUrl('/download/google')
+				// if (this.system.h5_mandatory_update_type == '0') {
+				// 	window.location.href = this.$store.state.system.android_download_google_url
+				// }
+				// if (this.system.h5_mandatory_update_type == '1') {
+				// 	window.location.href = this.$store.state.system.domain_h5_name
+				// }
+				// if (this.system.h5_mandatory_update_type == '2') {
+				// 	window.location.href = this.$store.state.system.androidDownloadUrl
+				// }
+				// gtag('event', 'install_app', {
+				// 	'install_app': '0'
+				// });
+			},
+			closeClick() {
+				this.isShow = false
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.notice {
+		padding: 20rpx 14rpx;
+		background: linear-gradient(222.28deg, #f8f8fa, #ebf2fa);
+
+		.cha {
+			min-width: 36rpx;
+			max-width: 36rpx;
+			height: 36rpx;
+		}
+
+		.logo {
+			min-width: 68rpx;
+			max-width: 68rpx;
+			height: 68rpx;
+		}
+
+		text {
+			text-decoration: none;
+			color: #fff;
+			background-color: rgba(91, 105, 150, 1);
+			padding: 10rpx 20rpx;
+			border-radius: 10rpx;
+			white-space: nowrap;
+		}
+	}
+</style>

components/lff-barrage/lff-barrage.vue

@@ -0,0 +1,291 @@
+<template>
+	<view style="overflow: hidden;position: absolute;width: 100%;height: 90%;pointer-events: none; top: 0;left:0;z-index: 9996;">
+		<view class="danmu-li" v-for="(item,index) in listData" :class="item.type" :style="item.style" :key="index">
+			<view class="danmu-inner">
+				<view class="user-box">
+					<!-- <view class="user-img">
+						<view class="img-box">
+							<image src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=317894666,3379114684&fm=26&gp=0.jpg"></image>
+						</view>
+					</view> -->
+					<!-- <view class="user-text cl1">
+						人名
+					</view> -->
+					<view class="user-status cl1" v-html="getText(item.item)">
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+<script>
+	import {
+		emojiName,
+		emojiUrl,
+		emojiMap
+	} from '@/config/emojiMap';
+	export default {
+		props: {
+			//rightToLeft leftToRight leftBottom
+			type: {
+				type: String,
+				default: 'rightToLeft'
+			},
+			list: {
+				type: Array,
+				default () {
+					return []
+				}
+			},
+			minTime: {
+				type: Number,
+				default: 4
+			},
+			maxTime: {
+				type: Number,
+				default: 9
+			},
+			minTop: {
+				type: Number,
+				default: 0
+			},
+			maxTop: {
+				type: Number,
+				default: 240
+			},
+			hrackH: { //轨道高度
+				type: Number,
+				default: 40
+			}
+		},
+		data() {
+			return {
+				listData: [],
+				emojiList: [],
+			}
+		},
+		mounted() {
+			//leftBottom 使用参数
+			if (this.type === 'leftBottom') {
+				this.hrackNum = Math.floor(this.maxTop / this.hrackH);
+			}
+			for (let i = 0; i < emojiName.length; i++) {
+				this.emojiList.push({
+					emojiName: emojiName[i],
+					url: emojiUrl + emojiMap[emojiName[i]]
+				});
+			}
+		},
+		methods: {
+			add(obj) {
+				let data = {
+					item: obj.item,
+					id:Date.parse(new Date()),
+					time: Math.ceil(Math.floor(Math.random() * (this.maxTime - this.minTime + 1) + this.minTime)),
+					type: this.type
+				}
+				if (this.type === 'leftBottom') {
+					let objData = {
+						item: data.item,
+						type: 'leftBottomEnter',
+						style: {
+							transition: `all 0.5s`,
+							animationDuration: `0.5s`,
+							transform: `translateX(0%)`,
+							bottom: `${this.minTop}px`
+						}
+					}
+					let listLen = this.listData.length;
+					let hrackNum = this.hrackNum;
+					for (let i in this.listData) {
+						if(this.listData[i].status === 'reuse'){ //重用
+							this.$set(this.listData,i,objData);
+						}else if(this.listData[i].status === 'reset'){ //重置
+							this.listData[i].style.transition = 'none';
+							this.listData[i].style.bottom = 0;
+							this.listData[i].status = 'reuse';
+						}else if(this.listData[i].status === 'recycle'){ //回收
+							this.listData[i].type = 'leftBottomExit';
+							this.listData[i].status = 'reset';
+						}else{
+							this.listData[i].style.bottom = parseInt(this.listData[i].style.bottom) + this.hrackH + 'px';
+						}
+						if(parseInt(this.listData[i].style.bottom) >= (this.maxTop - this.hrackH) && this.listData[i].status !== 'reset'){ //需要回收
+							this.listData[i].status = 'recycle';
+						}
+					}
+					if(listLen < hrackNum + 2){
+						this.listData.push(objData);
+					}
+				} else if (this.type === 'rightToLeft') {
+					
+					
+					let num = Math.ceil(Math.random() * (this.maxTop - this.minTop + 1) + this.minTop);
+					
+					let objData = {
+						item: data.item,
+						type: 'rightToLeft',
+						style: {
+							animationDuration: `${data.time}s`,
+							top: num > 196 ?'196px': `${num}px`
+						},
+						delTime: Date.parse(new Date()) + data.time * 1200
+					}
+					for (let i in this.listData) {
+						if (this.listData[i].delTime <= Date.parse(new Date())) {
+							this.repaint(i, objData.type);
+							objData.type = '';
+							this.$set(this.listData, i, objData);
+							return
+						}
+					}
+					this.listData.push(objData);
+				}
+			},
+			repaint(index, type) {
+				setTimeout(() => {
+					this.listData[index].type = type;
+				}, 100)
+			},
+			getText(str) {
+				// let str = 'jfkdsj[咒骂]dsjfkljsa[憨笑]哈哈哈，[惊恐]'
+				let exp = /\[(.*?)\]/g; //匹配[*] 大括号里面任意内容的正则
+				let arr = str.match(exp); //字符串匹配出来的数组
+				// console.log(arr);
+				if (!arr) return str;
+			
+				this.emojiList.forEach((item1, index) => {
+					arr.map(item => {
+						// console.log(item1);
+						if (item1.emojiName === item) {
+							str = str.replace(item,
+								`<img src='${item1.url}' style="width:20px;height:20px">`
+							);
+						}
+						// console.log(item);
+						// let key = `p${item.substr(1, item.length - 2)}`;  //记录大括号里的值 用作id 方便取值
+						// if (!this.salaryVars.hasOwnProperty(key)) this.$set(this.salaryVars, key, '');
+					}); //循环遍历
+				})
+				// let arrNum = 取出所有正则匹配值并转换为input
+			
+				// console.log(str);
+				return str;
+			}
+		}
+
+	}
+</script>
+<style>
+
+</style>
+<style lang="scss">
+	@keyframes leftBottomEnter {
+		0% {
+			transform: translateY(100%);
+			opacity: 0;
+		}
+
+		100% {
+			transform: translateY(0%);
+			opacity: 1;
+		}
+	}
+
+	@keyframes leftBottomExit {
+		0% {
+			transform: translateY(0%);
+			opacity: 1;
+		}
+		
+		100% {
+			transform: translateY(-200%);
+			opacity: 0;
+		}
+	}
+
+	@keyframes leftToRight {
+		0% {
+			transform: translateX(-100%);
+		}
+
+		100% {
+			transform: translateX(100%);
+		}
+	}
+
+	@keyframes rightToLeft {
+		0% {
+			transform: translateX(100%);
+		}
+
+		100% {
+			transform: translateX(-100%);
+		}
+	}
+
+	.danmu-li {
+		position: absolute;
+		width: 100%;
+		transform: translateX(100%);
+		animation-timing-function: linear;
+
+		&.leftBottomEnter {
+			animation-name: leftBottomEnter;
+		}
+		&.leftBottomExit{
+			animation-name: leftBottomExit;
+			animation-fill-mode: forwards;
+		}
+
+		&.rightToLeft {
+			animation-name: rightToLeft;
+		}
+
+		&.leftToRight {
+			animation-name: rightToLeft;
+		}
+
+		.danmu-inner {
+			display: inline-block;
+
+			.user-box {
+				display: flex;
+				padding: 3rpx 40rpx 3rpx 10rpx;
+				background: rgba(0, 0, 0, 0.3);
+				border-radius: 32rpx;
+				align-items: center;
+
+				.user-img {
+					.img-box {
+						display: flex;
+
+						image {
+							width: 58rpx;
+							height: 58rpx;
+							background: rgba(55, 55, 55, 1);
+							border-radius: 50%;
+						}
+					}
+				}
+
+				.user-status {
+					margin-left: 10rpx;
+					white-space: nowrap;
+					font-size: 28rpx;
+					font-weight: 400;
+					color: rgba(255, 255, 255, 1);
+				}
+
+				.user-text {
+					margin-left: 10rpx;
+					// white-space: nowrap;
+					font-size: 28rpx;
+					font-weight: 400;
+					width: 80rpx;
+					color: rgba(255, 255, 255, 1);
+				}
+			}
+		}
+	}
+</style>

components/lff-barrage/markdown.md

@@ -0,0 +1,15 @@
+#如何使用
+###js
+```javascript
+import lffBarrage from '@/components/lff-barrage/lff-barrage.vue'
+components:{lffBarrage},
+methods:{
+	colrdo(){ //插入一条弹幕
+		this.$refs.lffBarrage.add({item:'你好呀小伙子'});
+	}
+}
+```
+###HTML
+```html
+<lff-barrage ref="lffBarrage"></lff-barrage>
+```

components/mote-lines-divide/mote-lines-divide.vue

@@ -0,0 +1,139 @@
+<template>
+  <view>
+    <view style="position: relative" v-if="isHide">
+      <view class="dt-content" :style="'-webkit-line-clamp:'+line">
+        <text class="content">
+          <slot>{{ dt ? dt : '' }}</slot>
+        </text>
+      </view>
+      <view class="button-show" @click.stop="isHide = false" v-if="enableButton&&lines>line">
+        <text style="color: rgb(220, 60, 35)">{{ expandText }}</text>
+      </view>
+    </view>
+    <view v-else>
+      <view>
+        <text class="content">
+          <slot>{{ dt ? dt : '' }}</slot>
+        </text>
+      </view>
+      <view class="fold-hint" v-if="foldHint">
+        <view @click.stop="isHide = true">
+          {{ foldHint }}
+        </view>
+      </view>
+    </view>
+    <view>
+      <text class="placeholder">
+        {{ placeholder }}
+      </text>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      // 是否隐藏多余行。初始状态不隐藏
+      isHide: true,
+      // 全量所占文本高度
+      textHeight: 0,
+      // 单行文本所占高度
+      lineHeight: 1,
+      // 占位文本
+      placeholder: this.$t('common.seizeSeat')
+    };
+  },
+  props: {
+    // 展示多少行
+    line: {
+      type: [Number, String],
+      default: 1
+    },
+    // 文本
+    dt: {
+      type: [String],
+      default: ''
+    },
+    enableButton: {
+      type: Boolean,
+      default: true
+    },
+    // 自定义展开提示
+    expandText: {
+      type: String,
+      default: 'expand'
+    },
+    // 自定义收起提示
+    foldHint: {
+      type: String,
+      default: 'retract'
+    }
+  },
+
+  watch:{
+    dt(){
+      let that = this
+      setTimeout(() => {
+        let query = uni.createSelectorQuery().in(that);
+        // 获取所有文本在html中的高度
+        query.select('.content').boundingClientRect(data => {
+          that.textHeight = data.height
+        }).exec();
+      }, 100)
+    }
+  },
+
+  mounted() {
+    if (this.enableButton) {
+      let query = uni.createSelectorQuery().in(this);
+      // 获取所有文本在html中的高度
+      query.select('.content').boundingClientRect(data => {
+        this.textHeight = data.height
+      }).exec();
+
+      // 通过占位元素获取单行文本的高度
+      query.select('.placeholder').boundingClientRect(data => {
+        this.lineHeight = data.height
+      }).exec();
+    }
+    // 获取单行文本高度后，置空占位元素，使其释放占位
+    this.placeholder = ''
+  },
+  computed: {
+    // 全文本所占总行数
+    lines() {
+      if (!this.enableButton) {
+        return this.line
+      }
+      return Math.floor(this.textHeight > 0 && this.lineHeight > 0 ? this.textHeight / this.lineHeight : 0)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.dt-content {
+  overflow: hidden;
+  text-overflow: clip;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+}
+
+.button-show {
+  /* width: 120rpx; */
+ /* position: absolute;
+  right: 0;
+  bottom: 0;
+  z-index: 0;
+  text-align: right; */
+  background-image: linear-gradient(-180deg, rgba(233, 236, 239, 0) 50%, #FFF 80%);
+  padding-top: 1rem;
+}
+
+.fold-hint {
+  color: rgb(220, 60, 35);
+  padding-top: 1rem;
+  /* text-align: right */
+}
+</style>

config/common.js

@@ -0,0 +1,331 @@
+// 事件统计
+import store from '@/store/index.js'
+import {
+  emojiMap,
+  emojiUrl
+} from './emojiMap';
+
+//取值
+function get(key,sync = true) {
+    try {
+		if(sync){
+			return uni.getStorageSync(key);
+		}else{
+			let data = '';
+			uni.getStorage({
+				key:key,
+				success: function (res) {
+					data = res.data;
+				}
+			});
+			return data;
+		}
+    } catch (e) {
+        return false;
+    }
+}
+
+//赋值
+function set(key, value, sync = true) {
+    try {
+		// console.log(key)
+        if (sync) {
+            return uni.setStorageSync(key, value);
+        } else {
+            uni.setStorage({
+                key: key,
+                data: value
+            });
+        }
+    } catch (e) {
+
+    }
+}
+//移除
+function del(key, sync = true){
+    try {
+        if (sync) {
+            return uni.removeStorageSync(key);
+        } else {
+            uni.removeStorage({
+                key: key
+            });
+        }
+    } catch (e) {
+        return false;
+    }
+}
+// 时间戳转时间 年月日
+function timeStamp1(value) {
+	var date = new Date(value * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
+	var year = date.getFullYear();
+	var month = ("0" + (date.getMonth() + 1)).slice(-2);
+	var sdate = ("0" + date.getDate()).slice(-2);
+	var hour = ("0" + date.getHours()).slice(-2);
+	var minute = ("0" + date.getMinutes()).slice(-2);
+	var second = ("0" + date.getSeconds()).slice(-2);
+	// 拼接
+	var result = year + '-' + month + '-' + sdate + ' ' + hour + ":" + minute; //+ ":" + second;
+	// 返回
+	return result;
+}
+function chooseImage(num,sType) {
+	let { token,domain,uploadHost,httpsdomain } = store.state.qiuNiu;
+	
+	let _this = this;
+	let arr = [];
+	let sourceType = sType || ['album', 'camera'];
+	console.log(sourceType);
+	return new Promise((resolve, reject) => {
+		uni.chooseImage({
+			count: num || 9, //默认9
+			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
+			sourceType: sourceType, //从相册选择
+			success: function(imgRes) {
+				let imgArr = imgRes.tempFiles
+				uni.showLoading({
+					title: _this.$t('common.lab')
+				})
+				
+				imgArr.forEach(item => {
+					// console.log();
+					let type = item.name.slice(-4);
+					let key = new Date().getTime() + type;
+					uni.uploadFile({
+						url: 'https://' + uploadHost, //后台地址
+						filePath: item.path,
+						name: 'file',
+						header: {
+							'token': token
+						},
+						formData:{
+							'key': key,//key值
+							'token': token //七牛云token值
+						},
+						success: (uploadFileRes) => {
+							let data = JSON.parse(uploadFileRes.data)
+							if (num == undefined || num == 1) { //单张
+								resolve(httpsdomain + '/'+ data.key);
+							} else { //多张
+								arr.push(httpsdomain + '/'+ data.key)
+								if (arr.length === imgArr.length) {
+									resolve(arr);
+								}
+							}
+							uni.hideLoading()
+						},
+						fail(uploadFileRes) {
+							_this.$toast(uploadFileRes)
+						}
+					})
+				})
+			},
+			fail: function(res) {
+				console.log(res);
+			}
+		});
+	});
+}
+
+
+function parseText(message) {
+  const renderDom = [];
+  let temp = message.payload.data;
+  let left = -1;
+  let right = -1;
+
+  while (temp !== '') {
+    left = temp.indexOf('[');
+    right = temp.indexOf(']');
+
+    switch (left) {
+      case 0:
+        if (right === -1) {
+          renderDom.push({
+            name: 'span',
+            text: temp
+          });
+          temp = '';
+        } else {
+          const _emoji = temp.slice(0, right + 1);
+
+          if (emojiMap[_emoji]) {
+            renderDom.push({
+              name: 'img',
+              src: emojiUrl + emojiMap[_emoji]
+            });
+            temp = temp.substring(right + 1);
+          } else {
+            renderDom.push({
+              name: 'span',
+              text: '['
+            });
+            temp = temp.slice(1);
+          }
+        }
+
+        break;
+
+      case -1:
+        renderDom.push({
+          name: 'span',
+          text: temp
+        });
+        temp = '';
+        break;
+
+      default:
+        renderDom.push({
+          name: 'span',
+          text: temp.slice(0, left)
+        });
+        temp = temp.substring(left);
+        break;
+    }
+  }
+
+  return renderDom;
+} // 解析群系统消息
+
+//视频选择
+function chooseVideo() {
+	let _this = this
+	/* 
+	 num=5:视频上传
+	 */
+	return new Promise((resolve, reject) => {
+		uni.chooseVideo({
+			count: 1, //默认9
+			sourceType: ['album', 'camera'], //从相册选择
+			success: function(imgRes) {
+				let imgArr = imgRes.tempFilePath
+				console.log(imgArr);
+				// return
+				uni.showLoading({
+					title: 'loading'
+				})
+				uni.uploadFile({
+					url: apiUrl.VUE_APP_API_WS + '/app-api/file/upload', //后台地址
+					filePath: imgArr,
+					name: 'avatarFile',
+					header: {
+						'tenant-id': 1,
+						'Authorization': 'Bearer ' + uni.getStorageSync('token1')
+					},
+					success: (uploadFileRes) => {
+						let data = JSON.parse(uploadFileRes.data)
+						resolve(data);
+						uni.hideLoading()
+						// that.form.avatar = uploadFileRes.data
+					},
+					fail(uploadFileRes) {
+						uni.hideLoading()
+						console.log(uploadFileRes);
+						// _this.$u.toast(uploadFileRes)
+					}
+				})
+			},
+			fail: function(res) {
+				console.log(res);
+			}
+		});
+	});
+}
+
+function parseTime(time, cFormat) {
+  if (arguments.length === 0) {
+    return null
+  }
+  const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
+  let date
+  if (typeof time === 'object') {
+    date = time
+  } else {
+    if (('' + time).length === 10) time = parseInt(time) * 1000
+    date = new Date(time)
+  }
+  const formatObj = {
+    y: date.getFullYear(),
+    m: date.getMonth() + 1,
+    d: date.getDate(),
+    h: date.getHours(),
+    i: date.getMinutes(),
+    s: date.getSeconds(),
+    a: date.getDay()
+  }
+  const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
+    let value = formatObj[key]
+    // Note: getDay() returns 0 on Sunday
+    if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value ] }
+    if (result.length > 0 && value < 10) {
+      value = '0' + value
+    }
+    return value || 0
+  })
+  return time_str
+}
+function countdownFun(value) {
+	if (!value) {
+		return ''
+	}
+	var d = parseInt(value/(3600 * 24))
+	if (d > 0) {
+		var h = parseInt((value%(3600 * 24))/(3600));
+		// if (h < 10) {
+		// 	h = '0' + h
+		// }
+		return `${d}d ${h}h`
+	}
+	var h = parseInt(value/(3600));
+	var m = parseInt((value%(3600))/60);
+	var str ='';
+	if (h > 0) {
+		str += (h + 'h')
+		if (m < 10) {
+			m = '0' + m
+		}
+		str += (' ' + m + 'm')
+		return str
+	} else {
+		if (m > 0) {
+			if (m < 10) {
+				m = '0' + m
+			}
+			str += (m + 'm')
+		}
+	}
+	
+	var s = parseInt(value%(3600)%60)
+	if (s < 10) {
+		s = '0' + s
+	}
+	str += (' ' + s + 's')
+	return str
+}
+function handleDigits2(value) {
+  if (value === undefined || isNaN(value)) {
+    return '0.0'
+  }
+  let arr = value.toString().split('.')
+  let str = arr[1]
+  let z = ''
+  if (!str || str.length < 1) {
+    let length = str ? (1 - str.length) : 1
+    for (let i = 0; i < length; i++) {
+      z += '0'
+    }
+  }
+  return `${arr[0]}.${str || ''}${z}`
+}
+export default {
+	del,
+	get,
+	set,
+	countdownFun,
+	parseTime,
+	parseText,
+	timeStamp1,
+	chooseVideo,
+	chooseImage,
+	handleDigits2
+}

config/emojiMap.js

@@ -0,0 +1,146 @@
+export const emojiUrl = 'https://web.sdk.qcloud.com/im/assets/emoji/';
+export const emojiMap = {
+  '[NO]': '[email protected]',
+  '[OK]': '[email protected]',
+  '[下雨]': '[email protected]',
+  '[么么哒]': '[email protected]',
+  '[乒乓]': '[email protected]',
+  '[便便]': '[email protected]',
+  '[信封]': '[email protected]',
+  '[偷笑]': '[email protected]',
+  '[傲慢]': '[email protected]',
+  '[再见]': '[email protected]',
+  '[冷汗]': '[email protected]',
+  '[凋谢]': '[email protected]',
+  '[刀]': '[email protected]',
+  '[删除]': '[email protected]',
+  '[勾引]': '[email protected]',
+  '[发呆]': '[email protected]',
+  '[发抖]': '[email protected]',
+  '[可怜]': '[email protected]',
+  '[可爱]': '[email protected]',
+  '[右哼哼]': '[email protected]',
+  '[右太极]': '[email protected]',
+  '[右车头]': '[email protected]',
+  '[吐]': '[email protected]',
+  '[吓]': '[email protected]',
+  '[咒骂]': '[email protected]',
+  '[咖啡]': '[email protected]',
+  '[啤酒]': '[email protected]',
+  '[嘘]': '[email protected]',
+  '[回头]': '[email protected]',
+  '[困]': '[email protected]',
+  '[坏笑]': '[email protected]',
+  '[多云]': '[email protected]',
+  '[大兵]': '[email protected]',
+  '[大哭]': '[email protected]',
+  '[太阳]': '[email protected]',
+  '[奋斗]': '[email protected]',
+  '[奶瓶]': '[email protected]',
+  '[委屈]': '[email protected]',
+  '[害羞]': '[email protected]',
+  '[尴尬]': '[email protected]',
+  '[左哼哼]': '[email protected]',
+  '[左太极]': '[email protected]',
+  '[左车头]': '[email protected]',
+  '[差劲]': '[email protected]',
+  '[弱]': '[email protected]',
+  '[强]': '[email protected]',
+  '[彩带]': '[email protected]',
+  '[彩球]': '[email protected]',
+  '[得意]': '[email protected]',
+  '[微笑]': '[email protected]',
+  '[心碎了]': '[email protected]',
+  '[快哭了]': '[email protected]',
+  '[怄火]': '[email protected]',
+  '[怒]': '[email protected]',
+  '[惊恐]': '[email protected]',
+  '[惊讶]': '[email protected]',
+  '[憨笑]': '[email protected]',
+  '[手枪]': '[email protected]',
+  '[打哈欠]': '[email protected]',
+  '[抓狂]': '[email protected]',
+  '[折磨]': '[email protected]',
+  '[抠鼻]': '[email protected]',
+  '[抱抱]': '[email protected]',
+  '[抱拳]': '[email protected]',
+  '[拳头]': '[email protected]',
+  '[挥手]': '[email protected]',
+  '[握手]': '[email protected]',
+  '[撇嘴]': '[email protected]',
+  '[擦汗]': '[email protected]',
+  '[敲打]': '[email protected]',
+  '[晕]': '[email protected]',
+  '[月亮]': '[email protected]',
+  '[棒棒糖]': '[email protected]',
+  '[汽车]': '[email protected]',
+  '[沙发]': '[email protected]',
+  '[流汗]': '[email protected]',
+  '[流泪]': '[email protected]',
+  '[激动]': '[email protected]',
+  '[灯泡]': '[email protected]',
+  '[炸弹]': '[email protected]',
+  '[熊猫]': '[email protected]',
+  '[爆筋]': '[email protected]',
+  '[爱你]': '[email protected]',
+  '[爱心]': '[email protected]',
+  '[爱情]': '[email protected]',
+  '[猪头]': '[email protected]',
+  '[猫咪]': '[email protected]',
+  '[献吻]': '[email protected]',
+  '[玫瑰]': '[email protected]',
+  '[瓢虫]': '[email protected]',
+  '[疑问]': '[email protected]',
+  '[白眼]': '[email protected]',
+  '[皮球]': '[email protected]',
+  '[睡觉]': '[email protected]',
+  '[磕头]': '[email protected]',
+  '[示爱]': '[email protected]',
+  '[礼品袋]': '[email protected]',
+  '[礼物]': '[email protected]',
+  '[篮球]': '[email protected]',
+  '[米饭]': '[email protected]',
+  '[糗大了]': '[email protected]',
+  '[红双喜]': '[email protected]',
+  '[红灯笼]': '[email protected]',
+  '[纸巾]': '[email protected]',
+  '[胜利]': '[email protected]',
+  '[色]': '[email protected]',
+  '[药]': '[email protected]',
+  '[菜刀]': '[email protected]',
+  '[蛋糕]': '[email protected]',
+  '[蜡烛]': '[email protected]',
+  '[街舞]': '[email protected]',
+  '[衰]': '[email protected]',
+  '[西瓜]': '[email protected]',
+  '[调皮]': '[email protected]',
+  '[象棋]': '[email protected]',
+  '[跳绳]': '[email protected]',
+  '[跳跳]': '[email protected]',
+  '[车厢]': '[email protected]',
+  '[转圈]': '[email protected]',
+  '[鄙视]': '[email protected]',
+  '[酷]': '[email protected]',
+  '[钞票]': '[email protected]',
+  '[钻戒]': '[email protected]',
+  '[闪电]': '[email protected]',
+  '[闭嘴]': '[email protected]',
+  '[闹钟]': '[email protected]',
+  '[阴险]': '[email protected]',
+  '[难过]': '[email protected]',
+  '[雨伞]': '[email protected]',
+  '[青蛙]': '[email protected]',
+  '[面条]': '[email protected]',
+  '[鞭炮]': '[email protected]',
+  '[风车]': '[email protected]',
+  '[飞吻]': '[email protected]',
+  '[飞机]': '[email protected]',
+  '[饥饿]': '[email protected]',
+  '[香蕉]': '[email protected]',
+  '[骷髅]': '[email protected]',
+  '[麦克风]': '[email protected]',
+  '[麻将]': '[email protected]',
+  '[鼓掌]': '[email protected]',
+  '[龇牙]': '[email protected]'
+};
+export const emojiName = ['[龇牙]', '[调皮]', '[流汗]', '[偷笑]', '[再见]', '[敲打]', '[擦汗]', '[猪头]', '[玫瑰]', '[流泪]', '[大哭]', '[嘘]', '[酷]', '[抓狂]', '[委屈]', '[便便]', '[炸弹]', '[菜刀]', '[可爱]', '[色]', '[害羞]', '[得意]', '[吐]', '[微笑]', '[怒]', '[尴尬]', '[惊恐]', '[冷汗]', '[爱心]', '[示爱]', '[白眼]', '[傲慢]', '[难过]', '[惊讶]', '[疑问]', '[困]', '[么么哒]', '[憨笑]', '[爱情]', '[衰]', '[撇嘴]', '[阴险]', '[奋斗]', '[发呆]', '[右哼哼]', '[抱抱]', '[坏笑]', '[飞吻]', '[鄙视]', '[晕]', '[大兵]', '[可怜]', '[强]', '[弱]', '[握手]', '[胜利]', '[抱拳]', '[凋谢]', '[米饭]', '[蛋糕]', '[西瓜]', '[啤酒]', '[瓢虫]', '[勾引]', '[OK]', '[爱你]', '[咖啡]', '[月亮]', '[刀]', '[发抖]', '[差劲]', '[拳头]', '[心碎了]', '[太阳]', '[礼物]', '[皮球]', '[骷髅]', '[挥手]', '[闪电]', '[饥饿]', '[困]', '[咒骂]', '[折磨]', '[抠鼻]', '[鼓掌]', '[糗大了]', '[左哼哼]', '[打哈欠]', '[快哭了]', '[吓]', '[篮球]', '[乒乓]', '[NO]', '[跳跳]', '[怄火]', '[转圈]', '[磕头]', '[回头]', '[跳绳]', '[激动]', '[街舞]', '[献吻]', '[左太极]', '[右太极]', '[闭嘴]', '[猫咪]', '[红双喜]', '[鞭炮]', '[红灯笼]', '[麻将]', '[麦克风]', '[礼品袋]', '[信封]', '[象棋]', '[彩带]', '[蜡烛]', '[爆筋]', '[棒棒糖]', '[奶瓶]', '[面条]', '[香蕉]', '[飞机]', '[左车头]', '[车厢]', '[右车头]', '[多云]', '[下雨]', '[钞票]', '[熊猫]', '[灯泡]', '[风车]', '[闹钟]', '[雨伞]', '[彩球]', '[钻戒]', '[沙发]', '[纸巾]', '[手枪]', '[青蛙]'];

config/request.js

@@ -0,0 +1,95 @@
+// 此vm参数为页面的实例，可以通过它引用vuex中的变量
+module.exports = (vm) => {
+    // 初始化请求配置
+    uni.$u.http.setConfig((config) => {
+        /* config 为默认全局配置*/
+        config.baseURL = 'https://api.onecric.tv';
+        // config.baseURL = 'http://testapi.onecric.tv/';
+        return config
+    })
+	
+	// 请求拦截
+	uni.$u.http.interceptors.request.use((config) => { // 可使用async await 做异步操作
+	    // 初始化请求拦截器时，会执行此方法，此时data为undefined，赋予默认{}
+	    // console.log(config);
+		config.data = config.data || {}
+		// 根据custom参数中配置的是否需要token，添加对应的请求头
+		// if(config?.custom?.auth) {
+			// 可以在此通过vm引用vuex中的变量，具体值在vm.$store.state中
+			// config.header.token = vm.$store.state.userInfo.token
+		// }
+		const information = uni.getStorage('information')
+		uni.getStorage({
+			key:'information',   // 储存在本地的变量名
+			success:res => {
+				// 成功后的回调
+				if(JSON.stringify(res.data) != '{}'){
+					vm.$store.state.isLogin = 1;
+					config.header.token = res.data.token;
+				}else {
+					vm.$store.state.isLogin = 2;
+				}
+			}
+		})
+		// 可以对某个url进行特别处理，此url参数为this.$u.get(url)中的url值
+		if(config.url == '/user/login') config.header.noToken = true;
+		
+	    return config 
+	}, config => { // 可使用async await 做异步操作
+	    return Promise.reject(config)
+	})
+	
+	// 响应拦截
+	uni.$u.http.interceptors.response.use((response) => { /* 对响应成功做点什么 可使用async await 做异步操作*/
+		const data = response.data;
+		const url = response.config.url;
+		// 自定义参数
+		const custom = response.config?.custom
+		let routes = getCurrentPages();
+		let curRoute = '';
+		if(routes[routes.length - 1] != undefined) {
+			curRoute = routes[routes.length - 1].route;
+		}
+		if (data.ActionStatus == 'OK') {
+			return data
+		}
+		if (data.code !== 0) { 
+			// 如果没有显式定义custom的toast参数为false的话，默认对报错进行toast弹出提示
+			if(data.code == 700 && url != '/api/Member/getQiniuToken' && curRoute != 'pages/login/index') {
+				vm.$store.state.isLogin = 2;
+				uni.$u.toast(data.msg)
+				localStorage.removeItem('information')
+				vm.$r.loginBox();
+				vm.$store.state.loginShowSign = true;
+				vm.$store.state.loginShowCloseSign = false;
+			}else if(data.code == 700 && url == '/api/Member/getQiniuToken'){
+			}else {
+				uni.$u.toast(data.msg)
+			}
+			// 如果需要catch返回，则进行reject
+			if (custom?.catch) {
+				return Promise.reject(data)
+			} else {
+				// 否则返回一个pending中的promise，请求不会进入catch中
+				return new Promise(() => { })
+			}
+			
+		}
+		return data.data === undefined ? {} : data.data
+	}, (response) => { 
+		// 对响应错误做点什么 （statusCode !== 200）
+		return Promise.reject(response)
+	})
+}
+
+/* 请求方式
+ *
+ *通过uni.$u.post发出请求，注意此处需要写上接口地址
+	uni.$u.http.post('/common/menu', { custom: { auth: true }}).then(() => {
+		
+	}).catch(() =>{
+		
+	})
+ *
+ *
+ */

debug/GenerateTestUserSig.js

@@ -0,0 +1,59 @@
+import LibGenerateTestUserSig from './lib-generate-test-usersig-es.min.js';
+/**
+ * 腾讯云 SDKAppId，需要替换为您自己账号下的 SDKAppId。
+ *
+ * 进入腾讯云实时音视频[控制台](https://console.cloud.tencent.com/rav ) 创建应用，即可看到 SDKAppId，
+ * 它是腾讯云用于区分客户的唯一标识。
+ */
+
+const SDKAPPID = 50000071;
+/**
+ * 签名过期时间，建议不要设置的过短
+ * <p>
+ * 时间单位：秒
+ * 默认时间：7 x 24 x 60 x 60 = 604800 = 7 天
+ */
+
+const EXPIRETIME = 604800;
+/**
+ * 计算签名用的加密密钥，获取步骤如下：
+ *
+ * step1. 进入腾讯云实时音视频[控制台](https://console.cloud.tencent.com/rav )，如果还没有应用就创建一个，
+ * step2. 单击“应用配置”进入基础配置页面，并进一步找到“帐号体系集成”部分。
+ * step3. 点击“查看密钥”按钮，就可以看到计算 UserSig 使用的加密的密钥了，请将其拷贝并复制到如下的变量中
+ *
+ * 注意：该方案仅适用于调试Demo，正式上线前请将 UserSig 计算代码和密钥迁移到您的后台服务器上，以避免加密密钥泄露导致的流量盗用。
+ * 文档：https://cloud.tencent.com/document/product/647/17275#Server
+ */
+
+const SECRETKEY = '0fe5dad07eed8542467c3d658577d1ad3ef88a6913c8bab16ded96ccb8f98db0';
+/*
+ * Module:   GenerateTestUserSig
+ *
+ * Function: 用于生成测试用的 UserSig，UserSig 是腾讯云为其云服务设计的一种安全保护签名。
+ *           其计算方法是对 SDKAppID、UserID 和 EXPIRETIME 进行加密，加密算法为 HMAC-SHA256。
+ *
+ * Attention: 请不要将如下代码发布到您的线上正式版本的 App 中，原因如下：
+ *
+ *            本文件中的代码虽然能够正确计算出 UserSig，但仅适合快速调通 SDK 的基本功能，不适合线上产品，
+ *            这是因为客户端代码中的 SECRETKEY 很容易被反编译逆向破解，尤其是 Web 端的代码被破解的难度几乎为零。
+ *            一旦您的密钥泄露，攻击者就可以计算出正确的 UserSig 来盗用您的腾讯云流量。
+ *
+ *            正确的做法是将 UserSig 的计算代码和加密密钥放在您的业务服务器上，然后由 App 按需向您的服务器获取实时算出的 UserSig。
+ *            由于破解服务器的成本要高于破解客户端 App，所以服务器计算的方案能够更好地保护您的加密密钥。
+ *
+ * Reference：https://cloud.tencent.com/document/product/647/17275#Server
+ */
+
+function genTestUserSig(userID) {
+  const generator = new LibGenerateTestUserSig(SDKAPPID, SECRETKEY, EXPIRETIME);
+  const userSig = generator.genTestUserSig(userID);
+  return {
+    sdkAppID: SDKAPPID,
+    userSig
+  };
+}
+
+module.exports = {
+  genTestUserSig
+};

download/google.vue

@@ -0,0 +1,635 @@
+<template>
+  <div class="container">
+    <div class="top">
+      <u-icon @click="back" name="arrow-leftward" size="32rpx" bold></u-icon>
+      <img class="img" src="/static/image/home-g.png" alt="">
+      <img class="img1" @click="go('/pages/Match/member/usermanger', true)" :src="info.avatar || '/static/image/match/[email protected]'" alt="">
+    </div>
+    <div class="box">
+      <img class="img" src="/static/logo.png" alt="">
+      <div class="title">
+        <!-- OneCric - Free,Fastest Cricket Live Streaming APP -->
+        {{ $t('download.lab1') }}
+      </div>
+      <div class="title1">
+        <!-- OneCric Tv Limited -->
+        {{ $t('download.lab2') }}
+      </div>
+      <div class="text">
+        <!-- NO AD Free -->
+        {{ $t('download.lab3') }}
+      </div>
+    </div>
+    <div class="box1">
+      <div class="item">
+        10M+
+        <div class="text">
+          <!-- Downloads -->
+        {{ $t('download.lab4') }}
+        </div>
+      </div>
+      <div class="line"></div>
+      <div class="item">
+        <div class="border">12+</div>
+        <div class="flex-start text">
+          <!-- Retad for 12+ -->
+        {{ $t('download.lab5') }}
+        </div>
+      </div>
+    </div>
+    <div style="padding: 0 40rpx">
+      <div class="box2 cursor" @click="installClick">
+        <!-- Install -->
+        {{ $t('download.lab6') }}
+      </div>
+      <div class="img-box">
+        <u-album :urls="urls2" :rowCount="9"></u-album>
+        <!-- <img class="img" src="/static/image/platform1.jpg.png" alt="">
+        <img class="img" src="/static/image/platform2.jpg.png" alt="">
+        <img class="img" src="/static/image/platform3.jpg.png" alt="">
+        <img class="img" src="/static/image/platform4.jpg.png" alt=""> -->
+      </div>
+      <div class="box3 flex cursor">
+        <!-- About this app -->
+        {{ $t('download.lab7') }}
+        <!-- <u-icon name="arrow-rightward" size="32rpx" bold></u-icon> -->
+      </div>
+      <div class="box4">
+        <!-- Watch live streaming of major international cricket leagues, such as IPL, ICC, T20 and more. Listen to exciting commentary from our in-house commentators, lightning-fast live scores, news from around the world. OneCric is dedicated to creating the best app for cricket enthusiasts. -->
+        {{ $t('download.lab8') }}
+      </div>
+      <div class="box5">
+        <!-- Updated on -->
+        {{ $t('download.lab9') }}
+      </div>
+      <div class="box6">Fed 26,2023</div>
+      <div class="flex">
+        <div class="box7">
+          <!-- Sports -->
+        {{ $t('download.lab10') }}
+        </div>
+      </div>
+      <div class="box3 flex cursor" @click="toTop">
+        <!-- Data safety -->
+        {{ $t('download.lab11') }}
+        <u-icon name="arrow-rightward" size="32rpx" bold></u-icon>
+      </div>
+      <div class="box8">
+        <!-- Safety starts with understanding how developers collect and share your data. Data privacy and security practices may vary based on your use, region, and age. The developer provided this information and may update it over time. -->
+        {{ $t('download.lab12') }}
+      </div>
+      <div class="box11">
+        <div class="item">
+          <u-icon name="share" size="32rpx"></u-icon>
+          <div>
+            <div>
+              <!-- This app may share these data types with third parties -->
+              {{ $t('download.lab13') }}
+            </div>
+            <div class="text">
+              <!-- Personal info,Financial info and 3 others -->
+              {{ $t('download.lab14') }}
+            </div>
+          </div>
+        </div>
+        <div class="item">
+          <img class="img" src="/static/image/upload.png" alt="">
+          <div>
+            <div>
+              <!-- No data collected -->
+              {{ $t('download.lab15') }}
+            </div>
+            <div class="text"><a href="https://support.google.com/googleplay/answer/11416267?hl=en&visit_id=638130649191362894-7966921&p=data-safety&rd=1" class="more cursor">Learn more</a>about how developers declare</div>
+          </div>
+        </div>
+        <div class="item">
+          <u-icon name="lock" size="32rpx"></u-icon>
+          <div>
+            <!-- Data is encrypted in transit -->
+            {{ $t('download.lab16') }}
+          </div>
+        </div>
+        <div class="item">
+          <img class="img" src="/static/image/delete.png" alt="">
+          <div>
+            <!-- You can request that data be deleted -->
+            {{ $t('download.lab17') }}
+          </div>
+        </div>
+        <div class="see cursor" @click="toTop">
+          <!-- See details -->
+        {{ $t('download.lab18') }}
+        </div>
+      </div>
+      <div class="box3 flex">
+        <!-- Ratings and reviews -->
+        {{ $t('download.lab19') }}
+        <!-- <u-icon name="arrow-rightward" size="32rpx" bold></u-icon> -->
+      </div>
+      <div class="box9">
+        <!-- Ratings and reviews are verified -->
+        {{ $t('download.lab20') }}
+      </div>
+      <div class="flex">
+        <div class="box10">
+          <div>4.8</div>
+          <u-rate active-color="#01875f" size="34rpx" :allowHalf="true" :count="count" v-model="rate" readonly></u-rate>
+          <div class="text">
+            <!-- 1.8M reviews -->
+            1.8M {{ $t('download.lab21') }}
+          </div>
+        </div>
+        <div class="box12">
+          <div class="flex">
+            <div class="text">5</div>
+            <u-line-progress :percentage="85" height="22rpx" :showText="false"></u-line-progress>
+          </div>
+          <div class="flex">
+            <div class="text">4</div>
+            <u-line-progress :percentage="15" height="22rpx" :showText="false"></u-line-progress>
+          </div>
+          <div class="flex">
+            <div class="text">3</div>
+            <u-line-progress :percentage="0" height="22rpx" :showText="false"></u-line-progress>
+          </div>
+          <div class="flex">
+            <div class="text">2</div>
+            <u-line-progress :percentage="0" height="22rpx" :showText="false"></u-line-progress>
+          </div>
+          <div class="flex">
+            <div class="text">1</div>
+            <u-line-progress :percentage="0" height="22rpx" :showText="false"></u-line-progress>
+          </div>
+        </div>
+      </div>
+      <div class="box15">
+        <div class="name">
+          <div class="bg">R</div>
+          <!-- Rishab Agarwal -->
+          {{ $t('download.lab22') }}
+        </div>
+        <div class="flex-start">
+          <u-rate active-color="#01875f" size="34rpx" :allowHalf="true" :count="count" v-model="rate1" readonly></u-rate>
+          November 12,2022
+        </div>
+        <div>
+          <!-- The great cricket HD live broadcast app has no advertisements, very fast, and the news and scores are very timely. Unfortunately, I only used it recently.Thank you very much for the development team. -->
+        {{ $t('download.lab23') }}
+        </div>
+      </div>
+      <div class="box3">
+        <!-- What's new -->
+        {{ $t('download.lab24') }}
+      </div>
+      <div class="box8">
+        {{ $t('download.lab25') }}<br/>
+        <!-- At the same time, the new version has greatly enhanced the real-time score data, score staistics, simulation animation and many other functions. If you are a loyal cricket enthusiast, onecric.tv is an indispenable app for you. -->
+        {{ $t('download.lab26') }}
+      </div>
+      <div class="box3">
+        <!-- Developer contact -->
+        {{ $t('download.lab27') }}
+      </div>
+      <div class="box13">
+        <div class="item">
+          <img class="img" src="/static/image/lang.png" alt="">
+          <div class="right">
+            <div class="text">
+              <!-- Website -->
+            {{ $t('download.lab28') }}
+            </div>
+            <div class="cursor" @click="toOtherUrl('https://www.onecric.tv/')">https://www.onecric.tv/</div>
+          </div>
+        </div>
+        <div class="item">
+          <u-icon name="email" size="42rpx"></u-icon>
+          <div class="right">
+            <div class="text">
+              <!-- Email -->
+            {{ $t('download.lab29') }}
+            </div>
+            <div>[email protected]</div>
+          </div>
+        </div>
+        <div class="item">
+          <img class="img" src="/static/image/agreement.png" alt="">
+          <div class="right">
+            <div class="text">
+              <!-- Privacy policy -->
+            {{ $t('download.lab30') }}
+            </div>
+            <div class="cursor" @click="toOtherUrl('https://www.onecric.tv/agreement.html')">https://www.onecric.tv/agreement.html</div>
+          </div>
+        </div>
+      </div>
+      <div class="box14">
+        <div class="title">
+          <!-- Google Play -->
+        {{ $t('download.lab31') }}
+        </div>
+        <div class="item" @click="toOtherUrl('https://play.google.com/about/play-pass/')">
+          <!-- Play Pass -->
+        {{ $t('download.lab32') }}
+        </div>
+        <div class="item" @click="toOtherUrl('https://play.google.com/store/points/enroll')">
+          <!-- Play Points -->
+            {{ $t('download.lab33') }}
+        </div>
+        <div class="item" @click="toOtherUrl('https://play.google.com/about/giftcards/')">
+          <!-- Gift cards -->
+            {{ $t('download.lab34') }}
+        </div>
+        <div class="item" @click="toOtherUrl('https://play.google.com/store/games?code')">
+          <!-- Redeem -->
+            {{ $t('download.lab35') }}
+        </div>
+        <div class="item" @click="toOtherUrl('https://support.google.com/googleplay/answer/2479637?visit_id=638130849211564753-4036027430&rd=1')">
+          <!-- Refund policy -->
+            {{ $t('download.lab36') }}
+        </div>
+        <div class="title">
+          <!-- Kids & family -->
+            {{ $t('download.lab37') }}
+        </div>
+        <div class="item" @click="toOtherUrl('https://support.google.com/googleplay/answer/6209547?visit_id=638130849212977776-2810442816&p=pff_parentguide&rd=1')">
+          <!-- Parent Guide -->
+            {{ $t('download.lab38') }}
+        </div>
+        <div class="item" @click="toOtherUrl('https://support.google.com/googleplay/answer/7007852')">
+          <!-- Family sharing -->
+            {{ $t('download.lab39') }}
+        </div>
+      </div>
+    </div>
+    <div class="footer">
+      <div class="item" @click="toOtherUrl('https://play.google.com/intl/zh_hk/about/play-terms/index.html')">
+        <!-- Terms of Service -->
+        {{ $t('download.lab40') }}
+      </div>
+      <div class="item" @click="toOtherUrl('https://policies.google.com/privacy')">
+        <!-- Privacy -->
+        {{ $t('download.lab41') }}
+      </div>
+      <div class="item" @click="toOtherUrl('https://support.google.com/googleplay/answer/6034670?visit_id=638130849212977776-2810442816&p=about_play&rd=1')">
+        <!-- About Google Play -->
+        {{ $t('download.lab42') }}
+      </div>
+    </div>
+    <u-back-top :scroll-top="scrollTop"></u-back-top>
+  </div>
+</template>
+
+<script>
+import { getIPs } from '@/utils/util'
+export default {
+  data () {
+    return {
+      scrollTop: 0,
+      rate: 4.8,
+      count: 5,
+      rate1: 5,
+      urls2: [
+        '/static/image/platform1.jpg.png',
+        '/static/image/platform2.jpg.png',
+        '/static/image/platform3.jpg.png',
+        '/static/image/platform4.jpg.png',
+      ]
+    }
+  },
+  computed: {
+    info() {
+      return this.$store.state.info;
+    },
+    isLogin() {
+      return this.$store.state.isLogin;
+    },
+  },
+  onPageScroll(e) {
+		this.scrollTop = e.scrollTop;
+	},
+  methods: {
+    go(url) {
+      if (this.isLogin == 2) {
+        this.$toUrl('/pages/login/login')
+        return
+      };
+      this.$toUrl(url)
+    },
+    installClick() {
+      var adgroup_id = localStorage.getItem('adgroup_id');
+      var agency_id = localStorage.getItem('agency_id');
+      var code = localStorage.getItem('agency_code');
+      adgroup_id && (adgroup_id = JSON.parse(adgroup_id));
+      agency_id && (agency_id = JSON.parse(agency_id));
+      code && (code = JSON.parse(code));
+      uni.$u.http
+        .post("/api/Nginx/apk_download_log", {
+          adgroup_id: adgroup_id,
+          agency_id: agency_id,
+          code: code,
+          // ip: ip || 1,
+          types: 'H5'
+        })
+        .then((res) => {
+          window.location.href = res
+          gtag('event', 'H5_install_app', {
+            'H5_install_app': '0'
+          });
+        })
+        .catch((res) => {});
+    },
+    toOtherUrl(url) {
+      window.location.href = url
+    },
+    back() {
+      history.back()
+    },
+    toTop() {
+      uni.pageScrollTo({
+        duration: 0,
+        scrollTop: 0,
+      });
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.container {
+  max-width: 950px;
+  margin: 0 auto;
+}
+.top {
+  position: sticky;
+  top: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10rpx 32rpx;
+  background-color: #fff;
+  z-index: 10;
+  .img {
+    height: 80rpx;
+  }
+  .img1 {
+    width: 50rpx;
+    height: 50rpx;
+    border-radius: 50%;
+    border: 1px solid #CC2900;
+  }
+}
+.box {
+  position: relative;
+  padding: 40rpx 32rpx 60rpx 172rpx;
+  .img {
+    position: absolute;
+    left: 32rpx;
+    top: 40rpx;
+    width: 100rpx;
+  }
+  .title {
+    font-size: 40rpx;
+    color: #000;
+  }
+  .title1 {
+    color: #0c23ea;
+    margin: 20rpx 0;
+  }
+  .text {
+    font-size: 26rpx;
+  }
+}
+.box1 {
+  padding: 40rpx;
+  display: flex;
+  align-items: center;
+  color: #000;
+  font-size: 30rpx;
+  font-weight: 600;
+  .text {
+    color: #8d9094;
+    font-size: 24rpx;
+    font-weight: 500;
+  }
+  .item {
+    padding: 10rpx 40rpx;
+    text-align: center;
+  }
+  .line {
+    height: 50rpx;
+    width: 1px;
+    background-color: rgba(141, 144, 148, .5);
+  }
+  .border {
+    padding: 1px;
+    border: 1px solid #000;
+    display: inline-block;
+    line-height: 1;
+  }
+}
+.box2 {
+  color: #fff;
+  background-color: #01875f;
+  line-height: 90rpx;
+  text-align: center;
+  border-radius: 16rpx;
+  margin-top: 20rpx;
+}
+.img-box {
+  
+  padding: 22rpx 0;
+  .img {
+    height: 600rpx;
+    border-radius: 16rpx;
+    &+.img {
+      margin-left: 20rpx;
+    }
+  }
+}
+/deep/ .img-box{
+  .u-album__row {
+    flex: 1;
+    display: flex;
+    align-items: start;
+    flex-wrap: nowrap;
+    overflow-x: auto;
+  }
+  .u-album__row__wrapper {
+    margin-right: 20rpx !important;
+  }
+  uni-image {
+    height: 600rpx !important;
+    width: auto !important;
+    border-radius: 16rpx;
+    img {
+      display: block !important;
+      height: 600rpx !important;
+      width: auto;
+      opacity: 1;
+      position: static;
+    }
+  }
+}
+.box3 {
+  font-size: 32rpx;
+  font-weight: 600;
+  line-height: 106rpx;
+}
+.box4 {
+  padding-bottom: 60rpx;
+}
+.box5 {
+  font-size: 44rpx;
+  margin-bottom: 16rpx;
+}
+.box6 {
+  font-size: 34rpx;
+  padding-bottom: 40rpx;
+}
+.box7 {
+  width: 160rpx;
+  line-height: 70rpx;
+  border: 1px solid rgba(141, 144, 148, .5);
+  border-radius: 36rpx;
+  text-align: center;
+}
+.box8 {
+  color: #8d9094;
+  padding-bottom: 60rpx;
+}
+.box11 {
+  padding: 32rpx 20rpx;
+  border: 1px solid rgba(141, 144, 148, .5);
+  border-radius: 16rpx;
+  .item {
+    position: relative;
+    font-size: 32rpx;
+    padding-left: 60rpx;
+    & + .item {
+      margin-top: 32rpx;
+    }
+    .more {
+      margin-right: 6px;
+      color: #8d9094;
+      text-decoration: underline;
+    }
+    .u-icon {
+      position: absolute;
+      top: 6rpx;
+      left: 0;
+    }
+  }
+  .img {
+    position: absolute;
+    top: 6rpx;
+    left: 0;
+    width: 32rpx;
+  }
+  .text {
+    font-size: 24rpx;
+    color: #8d9094;
+  }
+  .see {
+    color: #01875f;
+    margin-top: 32rpx;
+    font-weight: 600;
+  }
+}
+.box9 {
+  color: #8d9094;
+  font-size: 20rpx;
+  margin-bottom: 100rpx;
+}
+.box10 {
+  text-align: center;
+  font-size: 100rpx;
+  font-weight: 700;
+  .text {
+    font-size: 24rpx;
+    font-weight: 500;
+    color: #8d9094;
+  }
+}
+.box12 {
+  flex: 1;
+  padding-left: 20rpx;
+  .text {
+    padding-right: 32rpx;
+  }
+  .u-line-progress {
+    flex: 1;
+  }
+}
+.box13 {
+  .item {
+    display: flex;
+    align-items: baseline;
+    .img {
+      width: 42rpx;
+      transform: translateY(12rpx);
+    }
+    .right {
+      flex: 1;
+      padding-left: 32rpx;
+    }
+    .text {
+      line-height: 76rpx;
+      font-weight: 600;
+    }
+  }
+}
+.footer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24rpx;
+  padding: 40rpx 10rpx 10rpx;
+  .item {
+    margin: 20rpx;
+    cursor: pointer;
+  }
+}
+.box14 {
+  font-size: 28rpx;
+  padding-top: 30rpx;
+  .title {
+    padding: 50rpx 0 16rpx;
+    font-size: 32rpx;
+  }
+  .item {
+    padding: 12rpx 0;
+    cursor: pointer;
+  }
+}
+.box15 {
+  padding-top: 60rpx;
+  margin-bottom: 40rpx;
+  .name {
+    display: flex;
+    align-items: center;
+    margin-bottom: 20rpx;
+    .bg {
+      width: 80rpx;
+      line-height: 80rpx;
+      background-color: #8e6d63;
+      border-radius: 50%;
+      text-align: center;
+      color: #fff;
+      font-size: 32rpx;
+      font-weight: 600;
+      margin-right: 20rpx;
+    }
+  }
+  .flex-start {
+    margin-bottom: 16rpx;
+    color: #8d9094;
+  }
+}
+.cursor {
+  cursor: pointer;
+}
+/deep/ .u-rate__content__item__icon-wrap--half {
+  width: 60% !important;
+}
+
+</style>

index.html

@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<title>
+		<%= htmlWebpackPlugin.options.title %>
+	</title>
+	<meta name="twitter:title" content="OneCric">
+	<meta property="og:description"
+		content="OneCric is a free online live streaming platform for cricket videos and scores, where you can watch live streaming of major international cricket leagues, suchas IPL, ICC, T20 and more, without paying.In-depth information such as lightning real-timescores, schedules, big data match resultspredictions, real-time news, and big V viewsspecially created for cricket fans, dedicated tocreating the best products for cricket enthuslasts.">
+	<meta name="description"
+		content="OneCric is a free online live streaming platform for cricket videos and scores, where you can watch live streaming of major international cricket leagues, suchas IPL, ICC, T20 and more, without paying.In-depth information such as lightning real-timescores, schedules, big data match resultspredictions, real-time news, and big V viewsspecially created for cricket fans, dedicated tocreating the best products for cricket enthuslasts.">
+	<link rel=icon type=image/ico sizes=32x32 href="<%= BASE_URL %>static/favicon.ico" />
+	<!-- Open Graph data -->
+	<meta property="og:title" content="OneCric" />
+	<!-- <meta property="og:url" content="http://www.example.com/" /> -->
+	<!-- <meta property="og:image" content="http://example.com/image.jpg" /> -->
+	<!-- <meta property="og:description" content="Description Here" /> -->
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+	<!-- piwik可视化 -->
+	<!-- <script type="text/javascript">
+		(function(window, document, dataLayerName, id) {
+		window[dataLayerName]=window[dataLayerName]||[],window[dataLayerName].push({start:(new Date).getTime(),event:"stg.start"});var scripts=document.getElementsByTagName('script')[0],tags=document.createElement('script');
+		function stgCreateCookie(a,b,c){var d="";if(c){var e=new Date;e.setTime(e.getTime()+24*c*60*60*1e3),d="; expires="+e.toUTCString()}document.cookie=a+"="+b+d+"; path=/"}
+		var isStgDebug=(window.location.href.match("stg_debug")||document.cookie.match("stg_debug"))&&!window.location.href.match("stg_disable_debug");stgCreateCookie("stg_debug",isStgDebug?1:"",isStgDebug?14:-1);
+		var qP=[];dataLayerName!=="dataLayer"&&qP.push("data_layer_name="+dataLayerName),isStgDebug&&qP.push("stg_debug");var qPString=qP.length>0?("?"+qP.join("&")):"";
+		tags.async=!0,tags.src="https://onecric.containers.piwik.pro/"+id+".js"+qPString,scripts.parentNode.insertBefore(tags,scripts);
+		!function(a,n,i){a[n]=a[n]||{};for(var c=0;c<i.length;c++)!function(i){a[n][i]=a[n][i]||{},a[n][i].api=a[n][i].api||function(){var a=[].slice.call(arguments,0);"string"==typeof a[0]&&window[dataLayerName].push({event:n+"."+i+":"+a[0],parameters:[].slice.call(arguments,1)})}}(i[c])}(window,"ppms",["tm","cm"]);
+		})(window, document, 'dataLayer', 'fe5a55b8-bec8-4022-ab0c-b327e32cdf82');
+		</script> -->
+	<!-- <link href="https://unpkg.com/video.js/dist/video-js.min.css" rel="stylesheet"> -->
+	<!-- google可视化 -->
+	<!-- Google tag (gtag.js) -->
+	<script async src="https://www.googletagmanager.com/gtag/js?id=G-8WJHNPPQMZ"></script>
+	<script>
+		window.dataLayer = window.dataLayer || [];
+		function gtag(){dataLayer.push(arguments);}
+		gtag('js', new Date());
+
+		gtag('config', 'G-8WJHNPPQMZ');
+	</script>
+	<script src="https://accounts.google.com/gsi/client" async defer></script>
+	<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/castjs/5.2.0/cast.min.js"></script> -->
+	<link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" />
+	<link rel="stylesheet" href="/static/css/swiper-bundle.min.css" />
+	<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.13.2/skins/default/aliplayer-min.css" />
+	<script type="text/javascript" charset="utf-8"
+		src="https://g.alicdn.com/de/prismplayer/2.13.2/aliplayer-min.js"></script>
+  <script src="/static/js/swiper-bundle.min.js"></script>
+	<style>
+		@font-face {
+			font-family: 'Noto Sans Display';
+			font-display: swap;
+			font-style: normal;
+			font-weight: 400;
+			src: local('Noto Sans Display Regular'), local('NotoSansDisplay-Regular'), url(/static/css/NotoSansDisplay-Regular.woff2) format('woff2'), url(/static/css/NotoSansDisplay-Regular.ttf) format('truetype')
+		}
+
+		@font-face {
+			font-family: 'Noto Sans Display';
+			font-display: swap;
+			font-style: normal;
+			font-weight: 600;
+			src: local('Noto Sans Display Semi Bold'), local('NotoSansDisplay-Semibold'), url(/static/css/NotoSansDisplay-SemiBold.woff2) format('woff2'), url(/static/css/NotoSansDisplay-SemiBold.ttf) format('truetype')
+		}
+
+		@font-face {
+			font-family: 'Noto Sans Display';
+			font-display: swap;
+			font-style: normal;
+			font-weight: 700;
+			src: local('Noto Sans Display Bold'), local('NotoSansDisplay-Bold'), url(/static/css/NotoSansDisplay-Bold.woff2) format('woff2'), url(/static/css/NotoSansDisplay-Bold.ttf) format('truetype')
+		}
+
+		@font-face {
+			font-family: 'Noto Sans Display';
+			font-display: swap;
+			font-style: italic;
+			font-weight: 700;
+			src: local('Noto Sans Display Italic'), local('NotoSansDisplay-Italic'), url(/static/css/NotoSansDisplay-Italic.woff2) format('woff2'), url(/static/css/NotoSansDisplay-Italic.ttf) format('truetype')
+		}
+		body {
+			font-family: CWC, "Noto Sans Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
+		}
+	</style>
+</head>
+
+<body>
+
+	<!-- Google Tag Manager (noscript) -->
+	<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PHSFGQR" height="0" width="0"
+			style="display:none;visibility:hidden"></iframe></noscript>
+	<!-- End Google Tag Manager (noscript) -->
+
+	<noscript>
+		<strong>Please enable JavaScript to continue.</strong>
+	</noscript>
+	<!-- <link href="https://cdn.bootcss.com/video.js/6.3.3/video-js.min.css" rel="stylesheet"> -->
+	<!-- <script src="https://cdn.bootcss.com/video.js/6.3.3/video.min.js"></script> -->
+	<!-- <script src="https://cdn.bootcss.com/videojs-contrib-hls/5.11.0/videojs-contrib-hls.js"></script> -->
+	<!-- <script src="https://cdn.jsdelivr.net/npm/videojs-flash@2/dist/videojs-flash.min.js"></script> -->
+	<div id="app"></div>
+	<!-- built files will be auto injected -->
+	<div id="fb-root"></div>
+	<!-- <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v16.0" nonce="Oul5K86G"></script> -->
+</body>
+
+</html>

main.js

@@ -0,0 +1,113 @@
+import App from './App'
+
+import Vue from 'vue'
+import uView from 'uview-ui';
+import common from "@/config/common.js";
+import store from '@/store/index.js'
+import en from '@/static/locales/en.js';
+import hi from '@/static/locales/hi.js';
+// #ifndef VUE3
+// main.js，注意要在use方法之后执行
+import jquery from 'jquery'
+import Videojs from 'video.js'
+import 'video.js/dist/video-js.css'
+// import 'video.js/dist/video-js.min.css' 
+// import VueMatomo from 'vue-matomo'
+Vue.config.productionTip = false
+App.mpType = 'app';
+ 
+// import render from "@/pages/components/render";
+// Vue.prototype.$r = render;
+ 
+// ...
+// let routes = getCurrentPages()
+// Vue.use(VueMatomo, {
+//   host: 'https://onecric.piwik.pro', // 这里配置你自己的piwik服务器地址和网站ID
+//   siteId: 'fe5a55b8-bec8-4022-ab0c-b327e32cdf82',//siteId值
+//   // 注册名称 =>this.$matomo
+//   trackerFileName: 'matomo',
+//   // 根据router自动注册
+//   router: routes,
+//   // // 是否需要在发送追踪信息之前请求许可
+//   // // 默认false
+//   requireConsent: false,
+//   enableLinkTracking: true,
+//   // // 是否追踪初始页面
+//   // // 默认true
+//   trackInitialView: false,
+//   // // 最终的追踪js文件名
+//   // // 默认 'piwik'
+//   trackerFileName: 'piwik',
+//   debug: false
+// });
+
+
+// 引入并使用vue-i18n
+import VueI18n from 'vue-i18n'
+Vue.use(VueI18n)
+// Vue.use(uView)
+Vue.prototype.$store = store;
+Vue.prototype.$video = Videojs; //使用video.js时用$video
+Vue.prototype.$toUrl = function navigateTo(url){
+	uni.navigateTo({
+		url:url
+	})
+}
+
+Vue.prototype.$back = function back(num){
+	uni.navigateBack({
+		delta:num || 1
+	})
+}
+ 
+Vue.prototype.$toast = function toast(title){
+	uni.showToast({
+		title: title,
+		icon: 'error'
+	});
+}
+ 
+
+
+Vue.prototype.$ = jquery
+
+// 如此配置即可
+uni.$u.config.unit = 'rpx'
+// 构造i18n对象
+const i18n = new VueI18n({
+	// 默认语言，这里的local属性，对应message中的zh、en属性
+	locale: 'en',
+	// 引入语言文件
+	messages: {
+		// 这里的属性名是任意的，您也可以把zh设置为cn等，只是后续切换语言时
+		// 要标识这里的语言属性，如：this.$i18n.locale = zh|en|zh|xxx
+		//'zh': zh, // 这里为上面通过import引入的语言包
+		'en': en,
+		'hi': hi,
+	}
+})
+// 由于微信小程序的运行机制问题，需声明如下一行，H5和APP非必填
+Vue.prototype._i18n = i18n;
+Vue.prototype.$common = common;
+
+const app = new Vue({
+	i18n,
+    ...App
+})
+// 引入请求封装，将app参数传递到配置中
+require('./config/request.js')(app)
+app.$mount()
+// #endif
+
+
+
+
+// #ifdef VUE3
+import { createSSRApp } from 'vue'
+export function createApp() {
+  const app = createSSRApp(App)
+  return {
+    app
+  }
+}
+// #endif

manifest.json

@@ -0,0 +1,87 @@
+{
+    "name" : "OneCric",
+    "appid" : "__UNI__160C3E1",
+    "description" : "",
+    "versionName" : "1.0.0",
+    "versionCode" : "100",
+    "transformPx" : false,
+    /* 5+App特有相关 */
+    "app-plus" : {
+        "usingComponents" : true,
+        "nvueStyleCompiler" : "uni-app",
+        "compilerVersion" : 3,
+        "splashscreen" : {
+            "alwaysShowBeforeRender" : true,
+            "waiting" : true,
+            "autoclose" : true,
+            "delay" : 0
+        },
+        /* 模块配置 */
+        "modules" : {
+            "VideoPlayer" : {}
+        },
+        /* 应用发布信息 */
+        "distribute" : {
+            /* android打包配置 */
+            "android" : {
+                "permissions" : [
+                    "<uses-feature android:name=\"android.hardware.camera\"/>",
+                    "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
+                    "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.CAMERA\"/>",
+                    "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
+                    "<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
+                    "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
+                    "<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
+                    "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.VIBRATE\"/>",
+                    "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
+                    "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
+                ]
+            },
+            /* ios打包配置 */
+            "ios" : {},
+            /* SDK配置 */
+            "sdkConfigs" : {
+                "share" : {},
+                "payment" : {}
+            }
+        }
+    },
+    /* 快应用特有相关 */
+    "quickapp" : {},
+    /* 小程序特有相关 */
+    "mp-weixin" : {
+        "appid" : "",
+        "setting" : {
+            "urlCheck" : false
+        },
+        "usingComponents" : true
+    },
+    "mp-alipay" : {
+        "usingComponents" : true
+    },
+    "mp-baidu" : {
+        "usingComponents" : true
+    },
+    "mp-toutiao" : {
+        "usingComponents" : true
+    },
+    "uniStatistics" : {
+        "enable" : false
+    },
+    "vueVersion" : "2",
+    "h5" : {
+        "title" : "OneCric",
+        "template" : "index.html",
+        "router" : {
+            "mode" : "history"
+        },
+        "devServer" : {
+            "port" : 8089
+        }
+    }
+}

package-lock.json

@@ -0,0 +1,843 @@
+{
+	"name": "OneCric",
+	"version": "1.0.0",
+	"lockfileVersion": 2,
+	"requires": true,
+	"packages": {
+		"": {
+			"name": "OneCric",
+			"version": "1.0.0",
+			"license": "ISC",
+			"dependencies": {
+				"aegis-mp-sdk": "^1.24.55",
+				"aegis-web-sdk": "^1.35.23",
+				"aegis-weex-sdk": "^1.24.46",
+				"cos-wx-sdk-v5": "^0.7.11",
+				"jquery": "^3.7.0",
+				"nativeshare": "^2.1.5",
+				"sass-loader": "^13.2.0",
+				"tim-js-sdk": "^2.17.0",
+				"tim-upload-plugin": "^1.0.4",
+				"tim-wx-sdk": "^2.20.0",
+				"uview-ui": "^2.0.35",
+				"video.js": "^7.20.3",
+				"vue-country-intl": "^1.1.3",
+				"vue-i18n": "^9.2.2",
+				"vue-matomo": "^4.2.0"
+			}
+		},
+		"node_modules/@babel/runtime": {
+			"version": "7.19.0",
+			"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.19.0.tgz",
+			"integrity": "sha512-eR8Lo9hnDS7tqkO7NsV+mKvCmv5boaXFSZ70DnfhcgiEne8hv9oCEd36Klw74EtizEqLsy4YnW8UWwpBVolHZA==",
+			"dependencies": {
+				"regenerator-runtime": "^0.13.4"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@intlify/core-base": {
+			"version": "9.2.2",
+			"resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-9.2.2.tgz",
+			"integrity": "sha512-JjUpQtNfn+joMbrXvpR4hTF8iJQ2sEFzzK3KIESOx+f+uwIjgw20igOyaIdhfsVVBCds8ZM64MoeNSx+PHQMkA==",
+			"dependencies": {
+				"@intlify/devtools-if": "9.2.2",
+				"@intlify/message-compiler": "9.2.2",
+				"@intlify/shared": "9.2.2",
+				"@intlify/vue-devtools": "9.2.2"
+			},
+			"engines": {
+				"node": ">= 14"
+			}
+		},
+		"node_modules/@intlify/devtools-if": {
+			"version": "9.2.2",
+			"resolved": "https://registry.npmjs.org/@intlify/devtools-if/-/devtools-if-9.2.2.tgz",
+			"integrity": "sha512-4ttr/FNO29w+kBbU7HZ/U0Lzuh2cRDhP8UlWOtV9ERcjHzuyXVZmjyleESK6eVP60tGC9QtQW9yZE+JeRhDHkg==",
+			"dependencies": {
+				"@intlify/shared": "9.2.2"
+			},
+			"engines": {
+				"node": ">= 14"
+			}
+		},
+		"node_modules/@intlify/message-compiler": {
+			"version": "9.2.2",
+			"resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-9.2.2.tgz",
+			"integrity": "sha512-IUrQW7byAKN2fMBe8z6sK6riG1pue95e5jfokn8hA5Q3Bqy4MBJ5lJAofUsawQJYHeoPJ7svMDyBaVJ4d0GTtA==",
+			"dependencies": {
+				"@intlify/shared": "9.2.2",
+				"source-map": "0.6.1"
+			},
+			"engines": {
+				"node": ">= 14"
+			}
+		},
+		"node_modules/@intlify/shared": {
+			"version": "9.2.2",
+			"resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-9.2.2.tgz",
+			"integrity": "sha512-wRwTpsslgZS5HNyM7uDQYZtxnbI12aGiBZURX3BTR9RFIKKRWpllTsgzHWvj3HKm3Y2Sh5LPC1r0PDCKEhVn9Q==",
+			"engines": {
+				"node": ">= 14"
+			}
+		},
+		"node_modules/@intlify/vue-devtools": {
+			"version": "9.2.2",
+			"resolved": "https://registry.npmjs.org/@intlify/vue-devtools/-/vue-devtools-9.2.2.tgz",
+			"integrity": "sha512-+dUyqyCHWHb/UcvY1MlIpO87munedm3Gn6E9WWYdWrMuYLcoIoOEVDWSS8xSwtlPU+kA+MEQTP6Q1iI/ocusJg==",
+			"dependencies": {
+				"@intlify/core-base": "9.2.2",
+				"@intlify/shared": "9.2.2"
+			},
+			"engines": {
+				"node": ">= 14"
+			}
+		},
+		"node_modules/@videojs/http-streaming": {
+			"version": "2.14.3",
+			"resolved": "https://registry.npmjs.org/@videojs/http-streaming/-/http-streaming-2.14.3.tgz",
+			"integrity": "sha512-2tFwxCaNbcEZzQugWf8EERwNMyNtspfHnvxRGRABQs09W/5SqmkWFuGWfUAm4wQKlXGfdPyAJ1338ASl459xAA==",
+			"dependencies": {
+				"@babel/runtime": "^7.12.5",
+				"@videojs/vhs-utils": "3.0.5",
+				"aes-decrypter": "3.1.3",
+				"global": "^4.4.0",
+				"m3u8-parser": "4.7.1",
+				"mpd-parser": "0.21.1",
+				"mux.js": "6.0.1",
+				"video.js": "^6 || ^7"
+			},
+			"engines": {
+				"node": ">=8",
+				"npm": ">=5"
+			},
+			"peerDependencies": {
+				"video.js": "^6 || ^7"
+			}
+		},
+		"node_modules/@videojs/vhs-utils": {
+			"version": "3.0.5",
+			"resolved": "https://registry.npmjs.org/@videojs/vhs-utils/-/vhs-utils-3.0.5.tgz",
+			"integrity": "sha512-PKVgdo8/GReqdx512F+ombhS+Bzogiofy1LgAj4tN8PfdBx3HSS7V5WfJotKTqtOWGwVfSWsrYN/t09/DSryrw==",
+			"dependencies": {
+				"@babel/runtime": "^7.12.5",
+				"global": "^4.4.0",
+				"url-toolkit": "^2.2.1"
+			},
+			"engines": {
+				"node": ">=8",
+				"npm": ">=5"
+			}
+		},
+		"node_modules/@videojs/xhr": {
+			"version": "2.6.0",
+			"resolved": "https://registry.npmjs.org/@videojs/xhr/-/xhr-2.6.0.tgz",
+			"integrity": "sha512-7J361GiN1tXpm+gd0xz2QWr3xNWBE+rytvo8J3KuggFaLg+U37gZQ2BuPLcnkfGffy2e+ozY70RHC8jt7zjA6Q==",
+			"dependencies": {
+				"@babel/runtime": "^7.5.5",
+				"global": "~4.4.0",
+				"is-function": "^1.0.1"
+			}
+		},
+		"node_modules/@vue/devtools-api": {
+			"version": "6.2.1",
+			"resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.2.1.tgz",
+			"integrity": "sha512-OEgAMeQXvCoJ+1x8WyQuVZzFo0wcyCmUR3baRVLmKBo1LmYZWMlRiXlux5jd0fqVJu6PfDbOrZItVqUEzLobeQ=="
+		},
+		"node_modules/@xmldom/xmldom": {
+			"version": "0.7.5",
+			"resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.7.5.tgz",
+			"integrity": "sha512-V3BIhmY36fXZ1OtVcI9W+FxQqxVLsPKcNjWigIaa81dLC9IolJl5Mt4Cvhmr0flUnjSpTdrbMTSbXqYqV5dT6A==",
+			"engines": {
+				"node": ">=10.0.0"
+			}
+		},
+		"node_modules/aegis-mp-sdk": {
+			"version": "1.36.2",
+			"resolved": "https://registry.npmjs.org/aegis-mp-sdk/-/aegis-mp-sdk-1.36.2.tgz",
+			"integrity": "sha512-fTsm9kJH282DfFyNQW2NI2Ha4Z5anU9lnNiawHwWhfdbJI1jtTc25o5lflOVTf2Pm0p3fyBXX9d0e41xhdbJqg=="
+		},
+		"node_modules/aegis-web-sdk": {
+			"version": "1.36.2",
+			"resolved": "https://registry.npmjs.org/aegis-web-sdk/-/aegis-web-sdk-1.36.2.tgz",
+			"integrity": "sha512-QOkFCtJ013Rivs4nFWX3ZuXkLsZqH2oO+4u7DODYEC6RmvX7A1ZRZSeeMnthhRVegiMQO0nY7vbSPkpS/wn32g==",
+			"dependencies": {
+				"web-vitals": "^1.1.2"
+			}
+		},
+		"node_modules/aegis-weex-sdk": {
+			"version": "1.24.46",
+			"resolved": "https://registry.npmjs.org/aegis-weex-sdk/-/aegis-weex-sdk-1.24.46.tgz",
+			"integrity": "sha512-Wof6LLIg4fWP9mPy2WCTvfErhkqrL5ecMoXfcjWz0RyPsjxjy/U9RY+4wf/am/JQdr8bZUtFpH2bQ5IEwoaYiQ=="
+		},
+		"node_modules/aes-decrypter": {
+			"version": "3.1.3",
+			"resolved": "https://registry.npmjs.org/aes-decrypter/-/aes-decrypter-3.1.3.tgz",
+			"integrity": "sha512-VkG9g4BbhMBy+N5/XodDeV6F02chEk9IpgRTq/0bS80y4dzy79VH2Gtms02VXomf3HmyRe3yyJYkJ990ns+d6A==",
+			"dependencies": {
+				"@babel/runtime": "^7.12.5",
+				"@videojs/vhs-utils": "^3.0.5",
+				"global": "^4.4.0",
+				"pkcs7": "^1.0.4"
+			}
+		},
+		"node_modules/cos-wx-sdk-v5": {
+			"version": "0.7.11",
+			"resolved": "https://registry.npmjs.org/cos-wx-sdk-v5/-/cos-wx-sdk-v5-0.7.11.tgz",
+			"integrity": "sha512-pOJYs2fJz1QsCf0ogmARuon5K4cDmCXozqhfnpdc+WsqZbd4L8amMlu9Q43Uv7IKYq/DAsHQbrkObweIh2N3fg==",
+			"dependencies": {
+				"xmldom": "^0.1.27"
+			}
+		},
+		"node_modules/dom-walk": {
+			"version": "0.1.2",
+			"resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.2.tgz",
+			"integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w=="
+		},
+		"node_modules/global": {
+			"version": "4.4.0",
+			"resolved": "https://registry.npmjs.org/global/-/global-4.4.0.tgz",
+			"integrity": "sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==",
+			"dependencies": {
+				"min-document": "^2.19.0",
+				"process": "^0.11.10"
+			}
+		},
+		"node_modules/individual": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/individual/-/individual-2.0.0.tgz",
+			"integrity": "sha512-pWt8hBCqJsUWI/HtcfWod7+N9SgAqyPEaF7JQjwzjn5vGrpg6aQ5qeAFQ7dx//UH4J1O+7xqew+gCeeFt6xN/g=="
+		},
+		"node_modules/is-function": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/is-function/-/is-function-1.0.2.tgz",
+			"integrity": "sha512-lw7DUp0aWXYg+CBCN+JKkcE0Q2RayZnSvnZBlwgxHBQhqt5pZNVy4Ri7H9GmmXkdu7LUthszM+Tor1u/2iBcpQ=="
+		},
+		"node_modules/jquery": {
+			"version": "3.7.0",
+			"resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.0.tgz",
+			"integrity": "sha512-umpJ0/k8X0MvD1ds0P9SfowREz2LenHsQaxSohMZ5OMNEU2r0tf8pdeEFTHMFxWVxKNyU9rTtK3CWzUCTKJUeQ=="
+		},
+		"node_modules/keycode": {
+			"version": "2.2.1",
+			"resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.1.tgz",
+			"integrity": "sha512-Rdgz9Hl9Iv4QKi8b0OlCRQEzp4AgVxyCtz5S/+VIHezDmrDhkp2N2TqBWOLz0/gbeREXOOiI9/4b8BY9uw2vFg=="
+		},
+		"node_modules/klona": {
+			"version": "2.0.5",
+			"resolved": "https://registry.npmjs.org/klona/-/klona-2.0.5.tgz",
+			"integrity": "sha512-pJiBpiXMbt7dkzXe8Ghj/u4FfXOOa98fPW+bihOJ4SjnoijweJrNThJfd3ifXpXhREjpoF2mZVH1GfS9LV3kHQ==",
+			"engines": {
+				"node": ">= 8"
+			}
+		},
+		"node_modules/m3u8-parser": {
+			"version": "4.7.1",
+			"resolved": "https://registry.npmjs.org/m3u8-parser/-/m3u8-parser-4.7.1.tgz",
+			"integrity": "sha512-pbrQwiMiq+MmI9bl7UjtPT3AK603PV9bogNlr83uC+X9IoxqL5E4k7kU7fMQ0dpRgxgeSMygqUa0IMLQNXLBNA==",
+			"dependencies": {
+				"@babel/runtime": "^7.12.5",
+				"@videojs/vhs-utils": "^3.0.5",
+				"global": "^4.4.0"
+			}
+		},
+		"node_modules/min-document": {
+			"version": "2.19.0",
+			"resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz",
+			"integrity": "sha512-9Wy1B3m3f66bPPmU5hdA4DR4PB2OfDU/+GS3yAB7IQozE3tqXaVv2zOjgla7MEGSRv95+ILmOuvhLkOK6wJtCQ==",
+			"dependencies": {
+				"dom-walk": "^0.1.0"
+			}
+		},
+		"node_modules/mpd-parser": {
+			"version": "0.21.1",
+			"resolved": "https://registry.npmjs.org/mpd-parser/-/mpd-parser-0.21.1.tgz",
+			"integrity": "sha512-BxlSXWbKE1n7eyEPBnTEkrzhS3PdmkkKdM1pgKbPnPOH0WFZIc0sPOWi7m0Uo3Wd2a4Or8Qf4ZbS7+ASqQ49fw==",
+			"dependencies": {
+				"@babel/runtime": "^7.12.5",
+				"@videojs/vhs-utils": "^3.0.5",
+				"@xmldom/xmldom": "^0.7.2",
+				"global": "^4.4.0"
+			},
+			"bin": {
+				"mpd-to-m3u8-json": "bin/parse.js"
+			}
+		},
+		"node_modules/mux.js": {
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/mux.js/-/mux.js-6.0.1.tgz",
+			"integrity": "sha512-22CHb59rH8pWGcPGW5Og7JngJ9s+z4XuSlYvnxhLuc58cA1WqGDQPzuG8I+sPm1/p0CdgpzVTaKW408k5DNn8w==",
+			"dependencies": {
+				"@babel/runtime": "^7.11.2",
+				"global": "^4.4.0"
+			},
+			"bin": {
+				"muxjs-transmux": "bin/transmux.js"
+			},
+			"engines": {
+				"node": ">=8",
+				"npm": ">=5"
+			}
+		},
+		"node_modules/nativeshare": {
+			"version": "2.1.5",
+			"resolved": "https://registry.npmjs.org/nativeshare/-/nativeshare-2.1.5.tgz",
+			"integrity": "sha512-fuk7rjpWxAGXjbi8ROJDaf/+6N2WYGfAiZDT+f0pRnOsC3+ame+KvWguQmbNGj2826SgU3XJeNR3IAq1Td324A=="
+		},
+		"node_modules/neo-async": {
+			"version": "2.6.2",
+			"resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
+			"integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw=="
+		},
+		"node_modules/pkcs7": {
+			"version": "1.0.4",
+			"resolved": "https://registry.npmjs.org/pkcs7/-/pkcs7-1.0.4.tgz",
+			"integrity": "sha512-afRERtHn54AlwaF2/+LFszyAANTCggGilmcmILUzEjvs3XgFZT+xE6+QWQcAGmu4xajy+Xtj7acLOPdx5/eXWQ==",
+			"dependencies": {
+				"@babel/runtime": "^7.5.5"
+			},
+			"bin": {
+				"pkcs7": "bin/cli.js"
+			}
+		},
+		"node_modules/process": {
+			"version": "0.11.10",
+			"resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
+			"integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==",
+			"engines": {
+				"node": ">= 0.6.0"
+			}
+		},
+		"node_modules/regenerator-runtime": {
+			"version": "0.13.9",
+			"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
+			"integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
+		},
+		"node_modules/rust-result": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/rust-result/-/rust-result-1.0.0.tgz",
+			"integrity": "sha512-6cJzSBU+J/RJCF063onnQf0cDUOHs9uZI1oroSGnHOph+CQTIJ5Pp2hK5kEQq1+7yE/EEWfulSNXAQ2jikPthA==",
+			"dependencies": {
+				"individual": "^2.0.0"
+			}
+		},
+		"node_modules/safe-json-parse": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/safe-json-parse/-/safe-json-parse-4.0.0.tgz",
+			"integrity": "sha512-RjZPPHugjK0TOzFrLZ8inw44s9bKox99/0AZW9o/BEQVrJfhI+fIHMErnPyRa89/yRXUUr93q+tiN6zhoVV4wQ==",
+			"dependencies": {
+				"rust-result": "^1.0.0"
+			}
+		},
+		"node_modules/sass-loader": {
+			"version": "13.2.0",
+			"resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-13.2.0.tgz",
+			"integrity": "sha512-JWEp48djQA4nbZxmgC02/Wh0eroSUutulROUusYJO9P9zltRbNN80JCBHqRGzjd4cmZCa/r88xgfkjGD0TXsHg==",
+			"dependencies": {
+				"klona": "^2.0.4",
+				"neo-async": "^2.6.2"
+			},
+			"engines": {
+				"node": ">= 14.15.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/webpack"
+			},
+			"peerDependencies": {
+				"fibers": ">= 3.1.0",
+				"node-sass": "^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0",
+				"sass": "^1.3.0",
+				"sass-embedded": "*",
+				"webpack": "^5.0.0"
+			},
+			"peerDependenciesMeta": {
+				"fibers": {
+					"optional": true
+				},
+				"node-sass": {
+					"optional": true
+				},
+				"sass": {
+					"optional": true
+				},
+				"sass-embedded": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/source-map": {
+			"version": "0.6.1",
+			"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+			"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/tim-js-sdk": {
+			"version": "2.22.1",
+			"resolved": "https://registry.npmjs.org/tim-js-sdk/-/tim-js-sdk-2.22.1.tgz",
+			"integrity": "sha512-U/BnrwzB1/hYuqQc3yPtO7udNoy8GNE5r0ahEUp/NQueW4P6QDu2RUCI2j4sF+yopC8tNG4etFgmAgGXBT+2Ug=="
+		},
+		"node_modules/tim-upload-plugin": {
+			"version": "1.0.5",
+			"resolved": "https://registry.npmjs.org/tim-upload-plugin/-/tim-upload-plugin-1.0.5.tgz",
+			"integrity": "sha512-GFxo3l60Os/p8rlg1THMcdjIiee7/IyeOTUJ4cwMBgRMxFoxFUmXmKoIS2207+r5F8ai3HqyRZOfiNfcHYrbZw=="
+		},
+		"node_modules/tim-wx-sdk": {
+			"version": "2.22.1",
+			"resolved": "https://registry.npmjs.org/tim-wx-sdk/-/tim-wx-sdk-2.22.1.tgz",
+			"integrity": "sha512-KES+gLvAENLzeuzAxfb36g+Ftgvu5EdOHdAElcSv062SyADwd+mYP6K2Ewm0eKXS/cLDwKitXg/wMIdB1tHtlg=="
+		},
+		"node_modules/url-toolkit": {
+			"version": "2.2.5",
+			"resolved": "https://registry.npmjs.org/url-toolkit/-/url-toolkit-2.2.5.tgz",
+			"integrity": "sha512-mtN6xk+Nac+oyJ/PrI7tzfmomRVNFIWKUbG8jdYFt52hxbiReFAXIjYskvu64/dvuW71IcB7lV8l0HvZMac6Jg=="
+		},
+		"node_modules/uview-ui": {
+			"version": "2.0.35",
+			"resolved": "https://registry.npmjs.org/uview-ui/-/uview-ui-2.0.35.tgz",
+			"integrity": "sha512-OfMttN3XkHvQosXfd8bjz8ASTvypPoGzBWmQZBJ871bYMCA7t2bDFPlzjbxUj/5ykAjKnZ8zMUapSwSisVt99g==",
+			"engines": {
+				"HBuilderX": "^3.1.0"
+			}
+		},
+		"node_modules/video.js": {
+			"version": "7.20.3",
+			"resolved": "https://registry.npmjs.org/video.js/-/video.js-7.20.3.tgz",
+			"integrity": "sha512-JMspxaK74LdfWcv69XWhX4rILywz/eInOVPdKefpQiZJSMD5O8xXYueqACP2Q5yqKstycgmmEKlJzZ+kVmDciw==",
+			"dependencies": {
+				"@babel/runtime": "^7.12.5",
+				"@videojs/http-streaming": "2.14.3",
+				"@videojs/vhs-utils": "^3.0.4",
+				"@videojs/xhr": "2.6.0",
+				"aes-decrypter": "3.1.3",
+				"global": "^4.4.0",
+				"keycode": "^2.2.0",
+				"m3u8-parser": "4.7.1",
+				"mpd-parser": "0.21.1",
+				"mux.js": "6.0.1",
+				"safe-json-parse": "4.0.0",
+				"videojs-font": "3.2.0",
+				"videojs-vtt.js": "^0.15.4"
+			}
+		},
+		"node_modules/videojs-font": {
+			"version": "3.2.0",
+			"resolved": "https://registry.npmjs.org/videojs-font/-/videojs-font-3.2.0.tgz",
+			"integrity": "sha512-g8vHMKK2/JGorSfqAZQUmYYNnXmfec4MLhwtEFS+mMs2IDY398GLysy6BH6K+aS1KMNu/xWZ8Sue/X/mdQPliA=="
+		},
+		"node_modules/videojs-vtt.js": {
+			"version": "0.15.4",
+			"resolved": "https://registry.npmjs.org/videojs-vtt.js/-/videojs-vtt.js-0.15.4.tgz",
+			"integrity": "sha512-r6IhM325fcLb1D6pgsMkTQT1PpFdUdYZa1iqk7wJEu+QlibBwATPfPc9Bg8Jiym0GE5yP1AG2rMLu+QMVWkYtA==",
+			"dependencies": {
+				"global": "^4.3.1"
+			}
+		},
+		"node_modules/vue-country-intl": {
+			"version": "1.1.3",
+			"resolved": "https://registry.npmjs.org/vue-country-intl/-/vue-country-intl-1.1.3.tgz",
+			"integrity": "sha512-Us/HsAGzoCQ14CN3+2z03wRA7IjIM613bOk0NvGJdzCT50xa+nVq7ARlaN5f7MSuz8FsH0tUd7sgZFvbOgPM5g=="
+		},
+		"node_modules/vue-i18n": {
+			"version": "9.2.2",
+			"resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-9.2.2.tgz",
+			"integrity": "sha512-yswpwtj89rTBhegUAv9Mu37LNznyu3NpyLQmozF3i1hYOhwpG8RjcjIFIIfnu+2MDZJGSZPXaKWvnQA71Yv9TQ==",
+			"dependencies": {
+				"@intlify/core-base": "9.2.2",
+				"@intlify/shared": "9.2.2",
+				"@intlify/vue-devtools": "9.2.2",
+				"@vue/devtools-api": "^6.2.1"
+			},
+			"engines": {
+				"node": ">= 14"
+			},
+			"peerDependencies": {
+				"vue": "^3.0.0"
+			}
+		},
+		"node_modules/vue-matomo": {
+			"version": "4.2.0",
+			"resolved": "https://registry.npmjs.org/vue-matomo/-/vue-matomo-4.2.0.tgz",
+			"integrity": "sha512-m5hCw7LH3wPDcERaF4sp/ojR9sEx7Rl8TpOyH/4jjQxMF2DuY/q5pO+i9o5Dx+BXLSa9+IQ0qhAbWYRyESQXmA==",
+			"engines": {
+				"node": ">= 6.0.0",
+				"npm": ">= 3.0.0"
+			}
+		},
+		"node_modules/web-vitals": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-1.1.2.tgz",
+			"integrity": "sha512-PFMKIY+bRSXlMxVAQ+m2aw9c/ioUYfDgrYot0YUa+/xa0sakubWhSDyxAKwzymvXVdF4CZI71g06W+mqhzu6ig=="
+		},
+		"node_modules/xmldom": {
+			"version": "0.1.31",
+			"resolved": "https://registry.npmjs.org/xmldom/-/xmldom-0.1.31.tgz",
+			"integrity": "sha512-yS2uJflVQs6n+CyjHoaBmVSqIDevTAWrzMmjG1Gc7h1qQ7uVozNhEPJAwZXWyGQ/Gafo3fCwrcaokezLPupVyQ==",
+			"deprecated": "Deprecated due to CVE-2021-21366 resolved in 0.5.0",
+			"engines": {
+				"node": ">=0.1"
+			}
+		}
+	},
+	"dependencies": {
+		"@babel/runtime": {
+			"version": "7.19.0",
+			"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.19.0.tgz",
+			"integrity": "sha512-eR8Lo9hnDS7tqkO7NsV+mKvCmv5boaXFSZ70DnfhcgiEne8hv9oCEd36Klw74EtizEqLsy4YnW8UWwpBVolHZA==",
+			"requires": {
+				"regenerator-runtime": "^0.13.4"
+			}
+		},
+		"@intlify/core-base": {
+			"version": "9.2.2",
+			"resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-9.2.2.tgz",
+			"integrity": "sha512-JjUpQtNfn+joMbrXvpR4hTF8iJQ2sEFzzK3KIESOx+f+uwIjgw20igOyaIdhfsVVBCds8ZM64MoeNSx+PHQMkA==",
+			"requires": {
+				"@intlify/devtools-if": "9.2.2",
+				"@intlify/message-compiler": "9.2.2",
+				"@intlify/shared": "9.2.2",
+				"@intlify/vue-devtools": "9.2.2"
+			}
+		},
+		"@intlify/devtools-if": {
+			"version": "9.2.2",
+			"resolved": "https://registry.npmjs.org/@intlify/devtools-if/-/devtools-if-9.2.2.tgz",
+			"integrity": "sha512-4ttr/FNO29w+kBbU7HZ/U0Lzuh2cRDhP8UlWOtV9ERcjHzuyXVZmjyleESK6eVP60tGC9QtQW9yZE+JeRhDHkg==",
+			"requires": {
+				"@intlify/shared": "9.2.2"
+			}
+		},
+		"@intlify/message-compiler": {
+			"version": "9.2.2",
+			"resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-9.2.2.tgz",
+			"integrity": "sha512-IUrQW7byAKN2fMBe8z6sK6riG1pue95e5jfokn8hA5Q3Bqy4MBJ5lJAofUsawQJYHeoPJ7svMDyBaVJ4d0GTtA==",
+			"requires": {
+				"@intlify/shared": "9.2.2",
+				"source-map": "0.6.1"
+			}
+		},
+		"@intlify/shared": {
+			"version": "9.2.2",
+			"resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-9.2.2.tgz",
+			"integrity": "sha512-wRwTpsslgZS5HNyM7uDQYZtxnbI12aGiBZURX3BTR9RFIKKRWpllTsgzHWvj3HKm3Y2Sh5LPC1r0PDCKEhVn9Q=="
+		},
+		"@intlify/vue-devtools": {
+			"version": "9.2.2",
+			"resolved": "https://registry.npmjs.org/@intlify/vue-devtools/-/vue-devtools-9.2.2.tgz",
+			"integrity": "sha512-+dUyqyCHWHb/UcvY1MlIpO87munedm3Gn6E9WWYdWrMuYLcoIoOEVDWSS8xSwtlPU+kA+MEQTP6Q1iI/ocusJg==",
+			"requires": {
+				"@intlify/core-base": "9.2.2",
+				"@intlify/shared": "9.2.2"
+			}
+		},
+		"@videojs/http-streaming": {
+			"version": "2.14.3",
+			"resolved": "https://registry.npmjs.org/@videojs/http-streaming/-/http-streaming-2.14.3.tgz",
+			"integrity": "sha512-2tFwxCaNbcEZzQugWf8EERwNMyNtspfHnvxRGRABQs09W/5SqmkWFuGWfUAm4wQKlXGfdPyAJ1338ASl459xAA==",
+			"requires": {
+				"@babel/runtime": "^7.12.5",
+				"@videojs/vhs-utils": "3.0.5",
+				"aes-decrypter": "3.1.3",
+				"global": "^4.4.0",
+				"m3u8-parser": "4.7.1",
+				"mpd-parser": "0.21.1",
+				"mux.js": "6.0.1",
+				"video.js": "^6 || ^7"
+			}
+		},
+		"@videojs/vhs-utils": {
+			"version": "3.0.5",
+			"resolved": "https://registry.npmjs.org/@videojs/vhs-utils/-/vhs-utils-3.0.5.tgz",
+			"integrity": "sha512-PKVgdo8/GReqdx512F+ombhS+Bzogiofy1LgAj4tN8PfdBx3HSS7V5WfJotKTqtOWGwVfSWsrYN/t09/DSryrw==",
+			"requires": {
+				"@babel/runtime": "^7.12.5",
+				"global": "^4.4.0",
+				"url-toolkit": "^2.2.1"
+			}
+		},
+		"@videojs/xhr": {
+			"version": "2.6.0",
+			"resolved": "https://registry.npmjs.org/@videojs/xhr/-/xhr-2.6.0.tgz",
+			"integrity": "sha512-7J361GiN1tXpm+gd0xz2QWr3xNWBE+rytvo8J3KuggFaLg+U37gZQ2BuPLcnkfGffy2e+ozY70RHC8jt7zjA6Q==",
+			"requires": {
+				"@babel/runtime": "^7.5.5",
+				"global": "~4.4.0",
+				"is-function": "^1.0.1"
+			}
+		},
+		"@vue/devtools-api": {
+			"version": "6.2.1",
+			"resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.2.1.tgz",
+			"integrity": "sha512-OEgAMeQXvCoJ+1x8WyQuVZzFo0wcyCmUR3baRVLmKBo1LmYZWMlRiXlux5jd0fqVJu6PfDbOrZItVqUEzLobeQ=="
+		},
+		"@xmldom/xmldom": {
+			"version": "0.7.5",
+			"resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.7.5.tgz",
+			"integrity": "sha512-V3BIhmY36fXZ1OtVcI9W+FxQqxVLsPKcNjWigIaa81dLC9IolJl5Mt4Cvhmr0flUnjSpTdrbMTSbXqYqV5dT6A=="
+		},
+		"aegis-mp-sdk": {
+			"version": "1.36.2",
+			"resolved": "https://registry.npmjs.org/aegis-mp-sdk/-/aegis-mp-sdk-1.36.2.tgz",
+			"integrity": "sha512-fTsm9kJH282DfFyNQW2NI2Ha4Z5anU9lnNiawHwWhfdbJI1jtTc25o5lflOVTf2Pm0p3fyBXX9d0e41xhdbJqg=="
+		},
+		"aegis-web-sdk": {
+			"version": "1.36.2",
+			"resolved": "https://registry.npmjs.org/aegis-web-sdk/-/aegis-web-sdk-1.36.2.tgz",
+			"integrity": "sha512-QOkFCtJ013Rivs4nFWX3ZuXkLsZqH2oO+4u7DODYEC6RmvX7A1ZRZSeeMnthhRVegiMQO0nY7vbSPkpS/wn32g==",
+			"requires": {
+				"web-vitals": "^1.1.2"
+			}
+		},
+		"aegis-weex-sdk": {
+			"version": "1.24.46",
+			"resolved": "https://registry.npmjs.org/aegis-weex-sdk/-/aegis-weex-sdk-1.24.46.tgz",
+			"integrity": "sha512-Wof6LLIg4fWP9mPy2WCTvfErhkqrL5ecMoXfcjWz0RyPsjxjy/U9RY+4wf/am/JQdr8bZUtFpH2bQ5IEwoaYiQ=="
+		},
+		"aes-decrypter": {
+			"version": "3.1.3",
+			"resolved": "https://registry.npmjs.org/aes-decrypter/-/aes-decrypter-3.1.3.tgz",
+			"integrity": "sha512-VkG9g4BbhMBy+N5/XodDeV6F02chEk9IpgRTq/0bS80y4dzy79VH2Gtms02VXomf3HmyRe3yyJYkJ990ns+d6A==",
+			"requires": {
+				"@babel/runtime": "^7.12.5",
+				"@videojs/vhs-utils": "^3.0.5",
+				"global": "^4.4.0",
+				"pkcs7": "^1.0.4"
+			}
+		},
+		"cos-wx-sdk-v5": {
+			"version": "0.7.11",
+			"resolved": "https://registry.npmjs.org/cos-wx-sdk-v5/-/cos-wx-sdk-v5-0.7.11.tgz",
+			"integrity": "sha512-pOJYs2fJz1QsCf0ogmARuon5K4cDmCXozqhfnpdc+WsqZbd4L8amMlu9Q43Uv7IKYq/DAsHQbrkObweIh2N3fg==",
+			"requires": {
+				"xmldom": "^0.1.27"
+			}
+		},
+		"dom-walk": {
+			"version": "0.1.2",
+			"resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.2.tgz",
+			"integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w=="
+		},
+		"global": {
+			"version": "4.4.0",
+			"resolved": "https://registry.npmjs.org/global/-/global-4.4.0.tgz",
+			"integrity": "sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==",
+			"requires": {
+				"min-document": "^2.19.0",
+				"process": "^0.11.10"
+			}
+		},
+		"individual": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/individual/-/individual-2.0.0.tgz",
+			"integrity": "sha512-pWt8hBCqJsUWI/HtcfWod7+N9SgAqyPEaF7JQjwzjn5vGrpg6aQ5qeAFQ7dx//UH4J1O+7xqew+gCeeFt6xN/g=="
+		},
+		"is-function": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/is-function/-/is-function-1.0.2.tgz",
+			"integrity": "sha512-lw7DUp0aWXYg+CBCN+JKkcE0Q2RayZnSvnZBlwgxHBQhqt5pZNVy4Ri7H9GmmXkdu7LUthszM+Tor1u/2iBcpQ=="
+		},
+		"jquery": {
+			"version": "3.7.0",
+			"resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.0.tgz",
+			"integrity": "sha512-umpJ0/k8X0MvD1ds0P9SfowREz2LenHsQaxSohMZ5OMNEU2r0tf8pdeEFTHMFxWVxKNyU9rTtK3CWzUCTKJUeQ=="
+		},
+		"keycode": {
+			"version": "2.2.1",
+			"resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.1.tgz",
+			"integrity": "sha512-Rdgz9Hl9Iv4QKi8b0OlCRQEzp4AgVxyCtz5S/+VIHezDmrDhkp2N2TqBWOLz0/gbeREXOOiI9/4b8BY9uw2vFg=="
+		},
+		"klona": {
+			"version": "2.0.5",
+			"resolved": "https://registry.npmjs.org/klona/-/klona-2.0.5.tgz",
+			"integrity": "sha512-pJiBpiXMbt7dkzXe8Ghj/u4FfXOOa98fPW+bihOJ4SjnoijweJrNThJfd3ifXpXhREjpoF2mZVH1GfS9LV3kHQ=="
+		},
+		"m3u8-parser": {
+			"version": "4.7.1",
+			"resolved": "https://registry.npmjs.org/m3u8-parser/-/m3u8-parser-4.7.1.tgz",
+			"integrity": "sha512-pbrQwiMiq+MmI9bl7UjtPT3AK603PV9bogNlr83uC+X9IoxqL5E4k7kU7fMQ0dpRgxgeSMygqUa0IMLQNXLBNA==",
+			"requires": {
+				"@babel/runtime": "^7.12.5",
+				"@videojs/vhs-utils": "^3.0.5",
+				"global": "^4.4.0"
+			}
+		},
+		"min-document": {
+			"version": "2.19.0",
+			"resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz",
+			"integrity": "sha512-9Wy1B3m3f66bPPmU5hdA4DR4PB2OfDU/+GS3yAB7IQozE3tqXaVv2zOjgla7MEGSRv95+ILmOuvhLkOK6wJtCQ==",
+			"requires": {
+				"dom-walk": "^0.1.0"
+			}
+		},
+		"mpd-parser": {
+			"version": "0.21.1",
+			"resolved": "https://registry.npmjs.org/mpd-parser/-/mpd-parser-0.21.1.tgz",
+			"integrity": "sha512-BxlSXWbKE1n7eyEPBnTEkrzhS3PdmkkKdM1pgKbPnPOH0WFZIc0sPOWi7m0Uo3Wd2a4Or8Qf4ZbS7+ASqQ49fw==",
+			"requires": {
+				"@babel/runtime": "^7.12.5",
+				"@videojs/vhs-utils": "^3.0.5",
+				"@xmldom/xmldom": "^0.7.2",
+				"global": "^4.4.0"
+			}
+		},
+		"mux.js": {
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/mux.js/-/mux.js-6.0.1.tgz",
+			"integrity": "sha512-22CHb59rH8pWGcPGW5Og7JngJ9s+z4XuSlYvnxhLuc58cA1WqGDQPzuG8I+sPm1/p0CdgpzVTaKW408k5DNn8w==",
+			"requires": {
+				"@babel/runtime": "^7.11.2",
+				"global": "^4.4.0"
+			}
+		},
+		"nativeshare": {
+			"version": "2.1.5",
+			"resolved": "https://registry.npmjs.org/nativeshare/-/nativeshare-2.1.5.tgz",
+			"integrity": "sha512-fuk7rjpWxAGXjbi8ROJDaf/+6N2WYGfAiZDT+f0pRnOsC3+ame+KvWguQmbNGj2826SgU3XJeNR3IAq1Td324A=="
+		},
+		"neo-async": {
+			"version": "2.6.2",
+			"resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
+			"integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw=="
+		},
+		"pkcs7": {
+			"version": "1.0.4",
+			"resolved": "https://registry.npmjs.org/pkcs7/-/pkcs7-1.0.4.tgz",
+			"integrity": "sha512-afRERtHn54AlwaF2/+LFszyAANTCggGilmcmILUzEjvs3XgFZT+xE6+QWQcAGmu4xajy+Xtj7acLOPdx5/eXWQ==",
+			"requires": {
+				"@babel/runtime": "^7.5.5"
+			}
+		},
+		"process": {
+			"version": "0.11.10",
+			"resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
+			"integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A=="
+		},
+		"regenerator-runtime": {
+			"version": "0.13.9",
+			"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
+			"integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
+		},
+		"rust-result": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/rust-result/-/rust-result-1.0.0.tgz",
+			"integrity": "sha512-6cJzSBU+J/RJCF063onnQf0cDUOHs9uZI1oroSGnHOph+CQTIJ5Pp2hK5kEQq1+7yE/EEWfulSNXAQ2jikPthA==",
+			"requires": {
+				"individual": "^2.0.0"
+			}
+		},
+		"safe-json-parse": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/safe-json-parse/-/safe-json-parse-4.0.0.tgz",
+			"integrity": "sha512-RjZPPHugjK0TOzFrLZ8inw44s9bKox99/0AZW9o/BEQVrJfhI+fIHMErnPyRa89/yRXUUr93q+tiN6zhoVV4wQ==",
+			"requires": {
+				"rust-result": "^1.0.0"
+			}
+		},
+		"sass-loader": {
+			"version": "13.2.0",
+			"resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-13.2.0.tgz",
+			"integrity": "sha512-JWEp48djQA4nbZxmgC02/Wh0eroSUutulROUusYJO9P9zltRbNN80JCBHqRGzjd4cmZCa/r88xgfkjGD0TXsHg==",
+			"requires": {
+				"klona": "^2.0.4",
+				"neo-async": "^2.6.2"
+			}
+		},
+		"source-map": {
+			"version": "0.6.1",
+			"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+			"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+		},
+		"tim-js-sdk": {
+			"version": "2.22.1",
+			"resolved": "https://registry.npmjs.org/tim-js-sdk/-/tim-js-sdk-2.22.1.tgz",
+			"integrity": "sha512-U/BnrwzB1/hYuqQc3yPtO7udNoy8GNE5r0ahEUp/NQueW4P6QDu2RUCI2j4sF+yopC8tNG4etFgmAgGXBT+2Ug=="
+		},
+		"tim-upload-plugin": {
+			"version": "1.0.5",
+			"resolved": "https://registry.npmjs.org/tim-upload-plugin/-/tim-upload-plugin-1.0.5.tgz",
+			"integrity": "sha512-GFxo3l60Os/p8rlg1THMcdjIiee7/IyeOTUJ4cwMBgRMxFoxFUmXmKoIS2207+r5F8ai3HqyRZOfiNfcHYrbZw=="
+		},
+		"tim-wx-sdk": {
+			"version": "2.22.1",
+			"resolved": "https://registry.npmjs.org/tim-wx-sdk/-/tim-wx-sdk-2.22.1.tgz",
+			"integrity": "sha512-KES+gLvAENLzeuzAxfb36g+Ftgvu5EdOHdAElcSv062SyADwd+mYP6K2Ewm0eKXS/cLDwKitXg/wMIdB1tHtlg=="
+		},
+		"url-toolkit": {
+			"version": "2.2.5",
+			"resolved": "https://registry.npmjs.org/url-toolkit/-/url-toolkit-2.2.5.tgz",
+			"integrity": "sha512-mtN6xk+Nac+oyJ/PrI7tzfmomRVNFIWKUbG8jdYFt52hxbiReFAXIjYskvu64/dvuW71IcB7lV8l0HvZMac6Jg=="
+		},
+		"uview-ui": {
+			"version": "2.0.35",
+			"resolved": "https://registry.npmjs.org/uview-ui/-/uview-ui-2.0.35.tgz",
+			"integrity": "sha512-OfMttN3XkHvQosXfd8bjz8ASTvypPoGzBWmQZBJ871bYMCA7t2bDFPlzjbxUj/5ykAjKnZ8zMUapSwSisVt99g=="
+		},
+		"video.js": {
+			"version": "7.20.3",
+			"resolved": "https://registry.npmjs.org/video.js/-/video.js-7.20.3.tgz",
+			"integrity": "sha512-JMspxaK74LdfWcv69XWhX4rILywz/eInOVPdKefpQiZJSMD5O8xXYueqACP2Q5yqKstycgmmEKlJzZ+kVmDciw==",
+			"requires": {
+				"@babel/runtime": "^7.12.5",
+				"@videojs/http-streaming": "2.14.3",
+				"@videojs/vhs-utils": "^3.0.4",
+				"@videojs/xhr": "2.6.0",
+				"aes-decrypter": "3.1.3",
+				"global": "^4.4.0",
+				"keycode": "^2.2.0",
+				"m3u8-parser": "4.7.1",
+				"mpd-parser": "0.21.1",
+				"mux.js": "6.0.1",
+				"safe-json-parse": "4.0.0",
+				"videojs-font": "3.2.0",
+				"videojs-vtt.js": "^0.15.4"
+			}
+		},
+		"videojs-font": {
+			"version": "3.2.0",
+			"resolved": "https://registry.npmjs.org/videojs-font/-/videojs-font-3.2.0.tgz",
+			"integrity": "sha512-g8vHMKK2/JGorSfqAZQUmYYNnXmfec4MLhwtEFS+mMs2IDY398GLysy6BH6K+aS1KMNu/xWZ8Sue/X/mdQPliA=="
+		},
+		"videojs-vtt.js": {
+			"version": "0.15.4",
+			"resolved": "https://registry.npmjs.org/videojs-vtt.js/-/videojs-vtt.js-0.15.4.tgz",
+			"integrity": "sha512-r6IhM325fcLb1D6pgsMkTQT1PpFdUdYZa1iqk7wJEu+QlibBwATPfPc9Bg8Jiym0GE5yP1AG2rMLu+QMVWkYtA==",
+			"requires": {
+				"global": "^4.3.1"
+			}
+		},
+		"vue-country-intl": {
+			"version": "1.1.3",
+			"resolved": "https://registry.npmjs.org/vue-country-intl/-/vue-country-intl-1.1.3.tgz",
+			"integrity": "sha512-Us/HsAGzoCQ14CN3+2z03wRA7IjIM613bOk0NvGJdzCT50xa+nVq7ARlaN5f7MSuz8FsH0tUd7sgZFvbOgPM5g=="
+		},
+		"vue-i18n": {
+			"version": "9.2.2",
+			"resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-9.2.2.tgz",
+			"integrity": "sha512-yswpwtj89rTBhegUAv9Mu37LNznyu3NpyLQmozF3i1hYOhwpG8RjcjIFIIfnu+2MDZJGSZPXaKWvnQA71Yv9TQ==",
+			"requires": {
+				"@intlify/core-base": "9.2.2",
+				"@intlify/shared": "9.2.2",
+				"@intlify/vue-devtools": "9.2.2",
+				"@vue/devtools-api": "^6.2.1"
+			}
+		},
+		"vue-matomo": {
+			"version": "4.2.0",
+			"resolved": "https://registry.npmjs.org/vue-matomo/-/vue-matomo-4.2.0.tgz",
+			"integrity": "sha512-m5hCw7LH3wPDcERaF4sp/ojR9sEx7Rl8TpOyH/4jjQxMF2DuY/q5pO+i9o5Dx+BXLSa9+IQ0qhAbWYRyESQXmA=="
+		},
+		"web-vitals": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-1.1.2.tgz",
+			"integrity": "sha512-PFMKIY+bRSXlMxVAQ+m2aw9c/ioUYfDgrYot0YUa+/xa0sakubWhSDyxAKwzymvXVdF4CZI71g06W+mqhzu6ig=="
+		},
+		"xmldom": {
+			"version": "0.1.31",
+			"resolved": "https://registry.npmjs.org/xmldom/-/xmldom-0.1.31.tgz",
+			"integrity": "sha512-yS2uJflVQs6n+CyjHoaBmVSqIDevTAWrzMmjG1Gc7h1qQ7uVozNhEPJAwZXWyGQ/Gafo3fCwrcaokezLPupVyQ=="
+		}
+	}
+}

package.json

@@ -0,0 +1,29 @@
+{
+	"name": "OneCric",
+	"version": "1.0.0",
+	"description": "",
+	"main": "main.js",
+	"scripts": {
+		"test": "echo \"Error: no test specified\" && exit 1"
+	},
+	"keywords": [],
+	"author": "",
+	"license": "ISC",
+	"dependencies": {
+		"aegis-mp-sdk": "^1.24.55",
+		"aegis-web-sdk": "^1.35.23",
+		"aegis-weex-sdk": "^1.24.46",
+		"cos-wx-sdk-v5": "^0.7.11",
+		"jquery": "^3.7.0",
+		"nativeshare": "^2.1.5",
+		"sass-loader": "^13.2.0",
+		"tim-js-sdk": "^2.17.0",
+		"tim-upload-plugin": "^1.0.4",
+		"tim-wx-sdk": "^2.20.0",
+		"uview-ui": "^2.0.35",
+		"video.js": "^7.20.3",
+		"vue-country-intl": "^1.1.3",
+		"vue-i18n": "^9.2.2",
+		"vue-matomo": "^4.2.0"
+	}
+}

pages.json

@@ -0,0 +1,543 @@
+{
+    "easycom": {
+        "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
+    },
+    "pages": [
+        {
+            "path": "pages/Live/Live",
+            "style": {
+                "navigationBarTitleText": "Live",
+                "enablePullDownRefresh": false,
+                "navigationStyle": "custom"
+            }
+        },
+		
+		
+        {
+            "path": "pages/Match/Match",
+            "style": {
+                "navigationBarTitleText": "Match",
+                "enablePullDownRefresh": false,
+                "navigationStyle": "custom"
+            }
+        },
+		{
+		    "path": "pages/Game/index",
+		    "style": {
+		        "navigationBarTitleText": "Game",
+		        "enablePullDownRefresh": false,
+		        "navigationStyle": "custom"
+		    }
+		},
+        {
+            "path": "pages/more/index",
+            "style": {
+                "navigationBarTitleText": "More",
+                "enablePullDownRefresh": false,
+                "navigationStyle": "custom"
+            }
+        },
+		
+		{
+		    "path": "pages/Game/list",
+		    "style": {
+		        "navigationBarTitleText": "Game",
+		        "enablePullDownRefresh": false,
+		        "navigationStyle": "custom"
+		    }
+		},
+		{
+		    "path": "pages/Game/compontent/historyList",
+		    "style": {
+		        "navigationBarTitleText": "Game",
+		        "enablePullDownRefresh": false,
+		        "navigationStyle": "custom"
+		    }
+		},
+		{
+		    "path": "pages/Game/compontent/tournamentList",
+		    "style": {
+		        "navigationBarTitleText": "Game",
+		        "enablePullDownRefresh": false,
+		        "navigationStyle": "custom"
+		    }
+		},
+		{
+		    "path": "pages/Game/top-creators",
+		    "style": {
+		        "navigationBarTitleText": "Game",
+		        "enablePullDownRefresh": false,
+		        "navigationStyle": "custom"
+		    }
+		},
+        {
+            "path": "pages/News/news",
+            "style": {
+                "navigationBarTitleText": "News",
+                "enablePullDownRefresh": false,
+                "navigationStyle": "custom"
+            }
+        },
+        {
+            "path": "pages/News/list",
+            "style": {
+                "navigationBarTitleText": "News",
+                "enablePullDownRefresh": false,
+                "navigationStyle": "custom"
+            }
+        },
+        {
+            "path": "pages/News/community",
+            "style": {
+                "navigationBarTitleText": "News",
+                "enablePullDownRefresh": false,
+                "navigationStyle": "custom"
+            }
+        },
+        {
+            "path": "pages/News/community-detail",
+            "style": {
+                "navigationBarTitleText": "News",
+                "enablePullDownRefresh": false,
+                "navigationStyle": "custom"
+            }
+        },
+        {
+            "path": "pages/News/information",
+            "style": {
+                "navigationBarTitleText": "News",
+                "enablePullDownRefresh": false,
+                "navigationStyle": "custom"
+            }
+        },
+        {
+            "path": "pages/News/news-detail",
+            "style": {
+                "navigationBarTitleText": "News",
+                "enablePullDownRefresh": false,
+                "navigationStyle": "custom"
+            }
+        },
+        {
+            "path": "pages/News/news-list",
+            "style": {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false,
+                "navigationStyle": "custom"
+            }
+        },
+        {
+            "path": "pages/News/publish",
+            "style": {
+                "navigationBarTitleText": "News",
+                "enablePullDownRefresh": false,
+                "navigationStyle": "custom"
+            }
+        },
+        {
+            "path": "pages/Live/attention",
+            "style": {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false,
+                "navigationStyle": "custom"
+            }
+        },
+        {
+            "path": "pages/Live/live-detail",
+            "style": {
+                "navigationBarTitleText": "Live",
+                "enablePullDownRefresh": false,
+                "navigationStyle": "custom"
+            }
+        },
+        {
+            "path": "pages/Live/history-detail",
+            "style": {
+                "navigationBarTitleText": "Live",
+                "enablePullDownRefresh": false,
+                "navigationStyle": "custom"
+            }
+        },
+        {
+            "path": "pages/Live/search",
+            "style": {
+                "navigationBarTitleText": "search",
+                "enablePullDownRefresh": false,
+                "navigationStyle": "custom"
+            }
+        },
+        {
+            "path": "pages/Match/search",
+            "style": {
+                "navigationBarTitleText": "search",
+                "enablePullDownRefresh": false,
+                "navigationStyle": "custom"
+            }
+        },
+        {
+            "path": "pages/Live/list",
+            "style": {
+                "navigationBarTitleText": "list",
+                "enablePullDownRefresh": true,
+                "navigationStyle": "custom"
+            }
+        },
+        {
+            "path": "pages/Videos/index",
+            "style": {
+                "navigationBarTitleText": "videos",
+                "enablePullDownRefresh": true,
+                "navigationStyle": "custom"
+            }
+        },
+        {
+            "path": "pages/Videos/list",
+            "style": {
+                "navigationBarTitleText": "videos",
+                "enablePullDownRefresh": true,
+                "navigationStyle": "custom"
+            }
+        },
+        {
+            "path": "pages/Videos/live",
+            "style": {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false,
+                "navigationStyle": "custom"
+            }
+        },
+        {
+            "path": "pages/Videos/publish",
+            "style": {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false,
+                "navigationStyle": "custom"
+            }
+        },
+        {
+            "path": "pages/Match/match-list",
+            "style": {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": true,
+                "navigationStyle": "custom"
+            }
+        },
+        {
+            "path": "pages/Match/match-detail",
+            "style": {
+                "navigationBarTitleText": "Detail",
+                "enablePullDownRefresh": true,
+                "navigationStyle": "custom"
+            }
+        },
+        {
+            "path": "pages/login/login",
+            "style": {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false,
+                "navigationStyle": "custom"
+            }
+        },
+        {
+            "path": "pages/register/register",
+            "style": {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false,
+                "navigationStyle": "custom"
+            }
+        },
+        {
+            "path": "pages/forget/index",
+            "style": {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false,
+                "navigationStyle": "custom"
+            }
+        },
+        {
+            "path": "pages/login/agreement",
+            "style": {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false
+            }
+        },
+        {
+            "path": "pages/login/index",
+            "style": {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false,
+                "navigationStyle": "custom"
+            }
+        },
+        {
+            "path": "pages/Match/updates-detail",
+            "style": {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false,
+                "navigationStyle": "custom"
+            }
+        },
+        {
+            "path": "pages/Match/player-stats",
+            "style": {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false,
+                "navigationStyle": "custom"
+            }
+        },
+        {
+            "path": "pages/Match/expert-analysis",
+            "style": {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false,
+                "navigationStyle": "custom"
+            }
+        },
+        {
+            "path": "pages/Match/venue",
+            "style": {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false,
+                "navigationStyle": "custom"
+            }
+        },
+        {
+            "path": "pages/Match/team",
+            "style": {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false,
+                "navigationStyle": "custom"
+            }
+        },
+        {
+            "path": "pages/Match/stats-detail",
+            "style": {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false,
+                "navigationStyle": "custom"
+            }
+        },
+        {
+            "path": "pages/Match/teams/teams",
+            "style": {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false,
+                "navigationStyle": "custom"
+            }
+        },
+        {
+            "path": "pages/Match/teams/detail",
+            "style": {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false,
+                "navigationStyle": "custom"
+            }
+        },
+        {
+            "path": "pages/Match/member/author",
+            "style": {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false,
+                "navigationStyle": "custom"
+            }
+        },
+        {
+            "path": "pages/Match/member/infomation",
+            "style": {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false,
+                "navigationStyle": "custom"
+            }
+        },
+        {
+            "path": "pages/Match/member/usermanger",
+            "style": {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false,
+                "navigationStyle": "custom"
+            }
+        },
+        {
+            "path": "pages/Match/member/change-nickname",
+            "style": {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false,
+                "navigationStyle": "custom"
+            }
+        },
+        {
+            "path": "pages/Match/member/change-profile",
+            "style": {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false,
+                "navigationStyle": "custom"
+            }
+        },
+        {
+            "path": "pages/Match/member/change-mobile",
+            "style": {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false,
+                "navigationStyle": "custom"
+            }
+        },
+        {
+            "path": "pages/Match/setting/setting",
+            "style": {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false,
+                "navigationStyle": "custom"
+            }
+        },
+        {
+            "path": "pages/Match/setting/language",
+            "style": {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false,
+                "navigationStyle": "custom"
+            }
+        },
+        {
+            "path": "pages/Match/setting/about",
+            "style": {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false,
+                "navigationStyle": "custom"
+            }
+        },
+        {
+            "path": "pages/Match/setting/change-password",
+            "style": {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false,
+                "navigationStyle": "custom"
+            }
+        },
+        {
+            "path": "pages/Match/setting/cancel-account",
+            "style": {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false,
+                "navigationStyle": "custom"
+            }
+        },
+        {
+            "path": "pages/Match/message/message",
+            "style": {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false,
+                "navigationStyle": "custom"
+            }
+        },
+        {
+            "path": "pages/Match/message/detail",
+            "style": {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false,
+                "navigationStyle": "custom"
+            }
+        },
+        {
+            "path": "pages/login/selcetcode",
+            "style": {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false
+            }
+        },
+        {
+            "path": "download/google",
+            "style": {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false,
+                "navigationStyle": "custom"
+            }
+        },
+        {
+            "path": "pages/getApp/index",
+            "style": {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false,
+                "navigationStyle": "custom"
+            }
+        },
+        {
+            "path": "recruit/1",
+            "style": {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false,
+                "navigationStyle": "custom"
+            }
+        },
+        {
+            "path": "recruit/2",
+            "style": {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false,
+                "navigationStyle": "custom"
+            }
+        },
+        {
+            "path": "recruit/3",
+            "style": {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false,
+                "navigationStyle": "custom"
+            }
+        }
+    ],
+    "globalStyle": {
+        "navigationBarTextStyle": "black",
+        "navigationBarTitleText": "uni-app",
+        "navigationBarBackgroundColor": "#F8F8F8",
+        "backgroundColor": "#F8F8F8"
+    },
+    "tabBar": {
+        "borderStyle": "#ccc",
+        "backgroundColor": "#fff",
+        "iconWidth": "18px",
+        "color": "#4E4E4E",
+        "selectedColor": "#1444F5",
+        "list": [
+            {
+                "pagePath": "pages/Live/Live",
+                "iconPath": "static/image/tabBar/live.png",
+                "selectedIconPath": "static/image/tabBar/live-a.png",
+                "text": "Live"
+            },
+			
+            {
+                "pagePath": "pages/Match/Match",
+                "iconPath": "static/image/tabBar/match.png",
+                "selectedIconPath": "static/image/tabBar/match-a.png",
+                "text": "Schedule"
+            },
+			{
+			    "pagePath": "pages/Game/index",
+			    "iconPath": "static/image/tabBar/game.png",
+			    "selectedIconPath": "static/image/tabBar/game-a.png",
+			    "text": "Game"
+			},
+			{
+			    "pagePath": "pages/Videos/index",
+			    "iconPath": "static/image/tabBar/video.png",
+			    "selectedIconPath": "static/image/tabBar/video-a.png",
+			    "text": "Video"
+			},
+			{
+			    "pagePath": "pages/getApp/index",
+			    "iconPath": "static/image/tabBar/phone.png",
+			    "selectedIconPath": "static/image/tabBar/phone-a.png",
+			    "text": "Get APP"
+			},
+          
+            {
+                "pagePath": "pages/more/index",
+                "iconPath": "static/image/tabBar/more.png",
+                "selectedIconPath": "static/image/tabBar/more-a.png",
+                "text": "More"
+            }
+			
+        ]
+    },
+    "uniIdRouter": {}
+}

pages/Game/Match.vue

@@ -0,0 +1,307 @@
+<template>
+  <view class="live">
+    <view class="navBar">
+      <div class="top">
+        <img class="logo" src="/static/logo_big.png" alt="" />
+        <u--image
+          class="border"
+          :showLoading="true"
+          :src="info.avatar || '/static/image/match/[email protected]'"
+          @click="go('/pages/Match/member/usermanger', true)"
+          width="24px"
+          height="24px"
+          shape="circle"
+        ></u--image>
+      </div>
+    </view>
+    <div
+      class="list-swiper"
+      v-if="bannerList.length"
+      :class="{ fadeInBtm: animationLoaded }"
+    >
+      <swiper
+        class="swiper"
+        radius="24rpx"
+        bgColor="#ffffff"
+        circular
+        previous-margin="30rpx"
+        next-margin="30rpx"
+        :indicator-dots="false"
+        :autoplay="true"
+        :interval="2000"
+        :duration="500"
+      >
+        <swiper-item
+          class="swiper-item"
+          v-for="(item, index) in bannerList"
+          :key="index"
+          @click="swiperClick(item)"
+        >
+          <div class="top">
+            <img class="live-img" v-if="item.islive == 1" src="/static/image/game/live.png" alt="">
+            <div class="flex">
+              <img class="icon_view" src="/static/image/game/icon_view.png" alt="">
+              {{ numberToK(item.viewers) || 0 }}
+            </div>
+          </div>
+          <div class="img-box">
+            <u--image
+              mode="aspectFill"
+              :showLoading="true"
+              :src="item.thumb"
+              width="100%"
+              height="42.05vw"
+            >
+              <template v-slot:loading>
+                <image
+                  class="loading-banner-img"
+                  src="/static/image/common/video-banner-bg.png"
+                ></image>
+              </template>
+            </u--image>
+          </div>
+          <div class="bottom">
+            <u--image
+              class="avatar"
+              :src="item.avatar"
+              shape="circle"
+              width="78rpx"
+              height="78rpx"
+            ></u--image>
+            <div>
+              <div class="text-clamp">{{ item.title }}</div>
+              <div>{{ item.user_nickname }} ・ {{ getTimeAgo(item.addtime) }}</div>
+            </div>
+          </div>
+        </swiper-item>
+      </swiper>
+    </div>
+    <div class="ad-list">
+      <div
+        class="item"
+        v-for="item in adList"
+        :key="item.id"
+        @click="adClick(item)"
+      >
+        <img class="ad" :src="item.img" alt="" />
+      </div>
+    </div>
+    <tournamentList :list="userList"></tournamentList>
+    <historyList></historyList>
+  </view>
+</template>
+
+<script>
+import tournamentList from "./compontent/tournamentList.vue";
+import historyList from "./compontent/historyList.vue";
+import animationMixin from "@/pages/mixins/animation";
+import { numberToK, formatTime } from "@/utils/util";
+export default {
+  components: {
+    historyList,
+    tournamentList,
+  },
+  mixins: [animationMixin],
+  data() {
+    return {
+      bannerList: [],
+      adList: [],
+      list: [],
+      userList: [],
+      current: 0,
+      tokenIsLogin: "",
+      homeShow: false,
+      intervalTimer: null,
+    };
+  },
+  computed: {
+    info() {
+      return this.$store.state.info;
+    },
+    isLogin() {
+      return this.$store.state.isLogin;
+    },
+  },
+  onReachBottom() {
+  },
+  created() {
+    this.getBanner();
+    this.intervalTimer = setInterval(() => {
+      this.getBanner();
+    }, 10000);
+  },
+  activated() {
+    this.intervalTimer = setInterval(() => {
+      this.getBanner();
+    }, 10000);
+  },
+  deactivated() {
+    clearInterval(this.intervalTimer);
+    this.intervalTimer = null;
+  },
+  methods: {
+    getBanner() {
+      uni.$u.http
+        .get("/api/game/home", {
+          params: {
+          },
+        }).then((res) => {
+          this.adList = res.banner || [];
+          this.bannerList = res.list || [];
+          this.userList = res.users || [];
+        })
+        .catch((res) => {})
+        .finally(() => {
+          if (this.animationLoaded) {
+            return;
+          }
+          this.animationLoaded = true;
+          this.$nextTick(() => {
+            this.scrollFun();
+          });
+        });
+    },
+    go(url, login) {
+      if (this.isLogin == 2 && login) {
+        this.$toUrl("/pages/login/login");
+        return;
+      }
+      this.$toUrl(url);
+    },
+    adClick(item) {
+      if (item.url) {
+        uni.$u.http
+        .post("/api/live_streaming/click_adv", {
+          type: 8,
+          id: item.id,
+          url: item.url
+        })
+        .then((res) => {
+        }).finally(() => {
+        });
+        window.open(item.url);
+      }
+    },
+    swiperClick(item) {
+      if (item.url) {
+        window.open(item.url)
+        return
+      }
+      if (item.uid) {
+        uni.navigateTo({
+          url: `/pages/Live/live-detail?type=game&id=${item.uid}&ID=${item.id}`,
+        });
+        return;
+      }
+      if (item.param_id) {
+        uni.navigateTo({
+          url: "/pages/Match/match-detail?id=" + item.param_id,
+        });
+        return;
+      }
+    },
+    numberToK(v) {
+      return numberToK(v);
+    },
+    getTimeAgo(time) {
+      return formatTime(time, this)
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+page {
+  background-color: #f3f3f7;
+}
+.live {
+  padding-bottom: var(--window-bottom);
+}
+.navBar {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  background-color: #10044a;
+  .top {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8rpx 16px 16rpx;
+    .border {
+      border: 1px solid #cc2900;
+      border-radius: 50%;
+    }
+  }
+  .logo {
+    height: 24px;
+  }
+}
+
+.list-swiper {
+  padding: 20rpx 0;
+  .swiper {
+    height: 42.05vw;
+    color: #fff;
+  }
+  .swiper-item {
+    padding: 0 12rpx;
+    box-sizing: border-box;
+  }
+  .img-box {
+    border-radius: 24rpx;
+    overflow: hidden;
+    position: relative;
+  }
+  .top {
+    position: absolute;
+    left: 22rpx;
+    top: 20rpx;
+    z-index: 10;
+    display: flex;
+    align-items: center;
+    .flex {
+      background-color: rgba(0, 0, 0, 0.5);
+      border-radius: 3px;
+      height: 44rpx;
+      padding: 0 18rpx;
+      font-size: 26rpx;
+    }
+    .icon_view {
+      width: 27rpx;
+      margin-right: 6rpx;
+    }
+  }
+  .live-img {
+    width: 92rpx;
+    margin-right: 10rpx;
+  }
+  .bottom {
+    position: absolute;
+    bottom: 22rpx;
+    left: 20rpx;
+    right: 20rpx;
+    font-size: 28rpx;
+    display: flex;
+    align-items: center;
+    .avatar {
+      margin-right: 20rpx;
+    }
+  }
+}
+.ad-list {
+  padding: 0 14px;
+  .item {
+    padding-top: 10px;
+    .ad {
+      display: block;
+      width: 100%;
+      border-radius: 12rpx;
+    }
+  }
+}
+.news-install {
+  position: sticky;
+  bottom: var(--window-bottom);
+  z-index: 200;
+}
+</style>

pages/Game/compontent/historyList.vue

@@ -0,0 +1,356 @@
+<template>
+  <div class="tournament">
+    <div class="box" v-if="list.length">
+      <div class="title">
+        <!-- History -->
+        <div :class="{'fadeInRight': animationLoaded}">{{$t('live.title3')}}</div>
+        <div class="all" :class="{'fadeInLeft': animationLoaded}" @click="$toUrl('./list?type=2')">
+        <!-- See More -->
+        {{ $t('live.more1') }}
+        </div>
+      </div>
+      <div class="list-box" :class="{'fadeInTop': animationLoaded}">
+        <div class="item" v-for="item in list" :key="item.id">
+          <div class="top flex">
+            <div class="left flex">
+              <u--image
+                class="avatar"
+                :src="item.avatar"
+                shape="circle"
+                width="86rpx"
+                height="86rpx"
+              ></u--image>
+              <div>
+                <div class="name">{{ item.user_nickname }}</div>
+                <div class="time">{{ getTimeAgo(item.created_at) }}</div>
+              </div>
+            </div>
+            <div class="right">
+              <u-icon @click="attention(item)" v-if="item.is_attention != 1" color="#747474" name="plus-people-fill" size="50rpx"></u-icon>
+              <u-icon @click="attention(item)" v-if="item.is_attention == 1" color="#747474" name="minus-people-fill" size="50rpx"></u-icon>
+            </div>
+          </div>
+          <div class="title">{{ item.title }}</div>
+          <div class="body"  @click="toMatchLive(item)">
+            <img class="img" :src="item.thumb" alt="">
+            <div class="flex">
+              <!-- <img class="live1" src="/static/image/game/live1.png" alt=""> -->
+              <div class="view-box">
+                <img class="icon_view1" src="/static/image/game/icon_view.png" alt="">
+                {{ numberToK(item.viewers) || 0 }}
+              </div>
+            </div>
+          </div>
+          <div class="root">
+            <div class="flex">
+              <u-icon @click="isLike(item)" v-if="item.like != 1" color="#888888" name="heart" size="40rpx"></u-icon>
+              <u-icon @click="isLike(item)" v-if="item.like == 1" color="#e46d45" name="heart-fill" size="40rpx"></u-icon>
+              {{ numberToK(item.is_likes) || 0}}
+            </div>
+            <div class="flex">
+              <img class="icon" src="/static/image/game/icon_comment.png" alt="">
+              {{ numberToK(item.comment) || 0}}
+            </div>
+            <div class="flex">
+              <img class="icon" @click="copyText(item)" src="/static/image/game/icon_share.png" alt="">
+              <!-- Share -->
+              {{ $t('news.share') }}
+            </div>
+          </div>
+        </div>
+        <div class="no-data" v-if="list.length == 0">
+					<img class="load1" src="/static/image/live/load2.png" alt="">
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { numberToK, formatTime } from "@/utils/util";
+import animationMixin from '@/pages/mixins/animation'
+import NativeShare from 'nativeshare'
+export default {
+  mixins: [animationMixin],
+  data() {
+    return {
+      list: [],
+      activeInfo: {},
+      timer: null,
+      pageNumber: 1,
+    };
+  },
+  deactivated() {
+  },
+  created() {
+    this.getHistory()
+  },
+  activated() {
+    this.getHistory()
+  },
+  methods: {
+    getHistory() {
+      uni.$u.http.get('/api/game/history', {
+        params: {
+          page: this.pageNumber
+        }
+      }).then(res => {
+        if (this.pageNumber == 1) {
+          this.list = res.data || []
+        } else {
+          this.list = this.list.concat(res.data || [])
+        }
+        // this.status = this.liveList.length == res.total ? 'nomore' : 'loadmore'
+      }).finally(() => {
+        if (this.animationLoaded) {
+          return;
+        }
+        this.animationLoaded = true;
+        this.$nextTick(() => {
+          this.scrollFun();
+        });
+      })
+    },
+    toMatchLive(item) {
+      uni.navigateTo({
+        url:`/pages/Live/history-detail?type=game&ID=${item.live_id}&MediaUrl=${item.video}`
+      })
+    },
+    toUrlLive(item) {
+      gtag("event", "live_H5", {
+        live_H5: "0",
+      });
+      uni.navigateTo({
+        url: `/pages/Live/live-detail?id=${item.live_id}&ID=${item.live_id}`,
+      });
+    },
+    /* 喜欢 */
+    isLike(item) {
+      if (this.$store.state.isLogin != 1) {
+        this.$toUrl('/pages/login/login')
+        return
+      }
+      uni.showLoading({
+        title: this.$t('common.lab'),
+      });
+      uni.$u.http
+        .post("/api/Member/live_like", {
+          id: item.live_id,
+          type: item.like == 1 ? 0 : 1
+        })
+        .then((res) => {
+          this.getHistory()
+        }).finally(() => {
+          uni.hideLoading();
+        });
+    },
+    /* 关注 */
+    attention(item) {
+      if (this.$store.state.isLogin != 1) {
+        this.$toUrl('/pages/login/login')
+        return
+      }
+      uni.showLoading({
+        title: this.$t('common.lab'),
+      });
+      uni.$u.http
+        .post("/api/Member/attention", {
+          id: item.uid,
+        })
+        .then((res) => {
+          this.getHistory()
+        }).finally(() => {
+          uni.hideLoading();
+        });
+    },
+    copyText(item) {
+      if (this.$store.state.isLogin != 1) {
+        this.$toUrl('/pages/login/login')
+        return
+      }
+      this.nativeShare = new NativeShare()
+      var shareData = {
+          title: `${item.title}`,
+          desc: 'OneCric: Live',
+          // 如果是微信该link的域名必须要在微信后台配置的安全域名之内的。
+          link: window.location.origin + `/pages/Live/history-detail?type=game&ID=${item.live_id}&MediaUrl=${item.video}`,
+          icon: 'https://m.onecric.tv/static/logo.png',
+          // 不要过于依赖以下两个回调，很多浏览器是不支持的
+          // success: function() {
+          //     alert('success')
+          // },
+          // fail: function() {
+          //     alert('fail')
+          // }
+      }
+      this.nativeShare.setShareData(shareData)
+      try {
+        this.nativeShare.call()
+      } catch (err) {
+        let oInput = document.querySelector('#copy-input')
+        oInput.value = window.location.origin + `/pages/Live/history-detail?type=game&ID=${item.live_id}&MediaUrl=${item.video}`
+        oInput.select() // 选择对象;
+        document.execCommand('Copy') // 执行浏览器复制命令
+        uni.$u.toast('Copy succeeded');
+      }
+      uni.$u.http
+        .post("/api/Member/live_share", {
+          id: item.live_id
+        })
+        .then((res) => {
+          this.$emit('success')
+          this.getHistory()
+        }).finally(() => {
+        });
+    },
+    numberToK(v) {
+      return numberToK(v);
+    },
+    countdownFun(value) {
+      if (!value) {
+        return "";
+      }
+      var h = parseInt(value / 3600);
+      var m = parseInt((value % 3600) / 60);
+      var str = "";
+      if (h > 0) {
+        str += h + "hrs";
+        if (m < 10) {
+          m = "0" + m;
+        }
+        str += " " + m + "min";
+        return str;
+      } else {
+        if (m > 0) {
+          if (m < 10) {
+            m = "0" + m;
+          }
+          str += m + "min";
+        }
+      }
+
+      var s = parseInt((value % 3600) % 60);
+      if (s < 10) {
+        s = "0" + s;
+      }
+      str += " " + s + "s";
+      return str;
+    },
+    getTimeAgo(time) {
+      if (!time) {
+        return ''
+      }
+      let t = new Date(time).getTime()
+      return formatTime(t,this)
+    }
+  },
+};
+</script>
+<style lang="scss">
+.box {
+  padding-top: 30px;
+  padding-bottom: 6rpx;
+  .title {
+    font-size: 15px;
+    padding-right: 14px;
+    font-weight: bold;
+    color: #242424;
+    line-height: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-bottom: 20rpx;
+    padding-left: 29rpx;
+    .icon {
+      height: 4.08vw;
+      margin-right: 14rpx;
+    }
+    .all {
+        color: #FF3300;
+    }
+  }
+}
+.list-box {
+  .item {
+    padding-top: 20rpx;
+    padding-bottom: 30rpx;
+    border-bottom: 1px solid #e7e7e7;
+  }
+  .top {
+    justify-content: space-between;
+    padding: 0 14px 22rpx 16rpx;
+    .avatar {
+      margin-right: 28rpx;
+    }
+    .name {
+      font-size: 31rpx;
+      font-weight: bold;
+    }
+    .time {
+      font-size: 28rpx;
+      color: #888;
+    }
+  }
+  .title {
+    padding: 0 14px 30rpx 16rpx;
+    font-size: 31rpx;
+    font-weight: 400;
+  }
+  .icon_view {
+    width: 40rpx;
+  }
+  .body {
+    position: relative;
+    .flex {
+      position: absolute;
+      left: 40rpx;
+      bottom: 24rpx;
+      border-radius: 2rpx;
+    }
+    .live1 {
+      height: 44rpx;
+      margin-right: 34rpx;
+    }
+    .view-box {
+      display: flex;
+      align-items: center;
+      height: 44rpx;
+      padding: 0 12rpx;
+      color: #fff;
+      background-color: #000;
+      border-radius: 2rpx;
+      font-size: 25rpx;
+    }
+    .icon_view1 {
+      width: 27rpx;
+      margin-right: 6rpx;
+    }
+  }
+  .img {
+    display: block;
+    width: 100%;
+    margin-bottom: 27rpx;
+  }
+  .root {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    font-size: 28rpx;
+    color: #888888;
+    .u-icon {
+      margin-right: 20rpx;
+    }
+    .icon {
+      margin-right: 20rpx;
+      width: 40rpx;
+    }
+  }
+}
+.no-data {
+  padding: 5rpx;
+ .load1 {
+    width: 35.74vw;
+    display: block;
+  }
+}
+
+</style>

pages/Game/compontent/tournamentList.vue

@@ -0,0 +1,248 @@
+<template>
+  <div class="tournament">
+    <div class="box" v-if="list.length">
+      <div class="title">
+        <!-- Top Creators -->
+        <div class="fadeInRight">{{ $t("game.lab") }}</div>
+        <div class="all fadeInLeft" @click="$toUrl('./top-creators')">
+        <!-- See More -->
+        {{ $t('live.more1') }}
+        </div>
+      </div>
+      <div class="tag-box fadeInLeft">
+        <div class="list-box">
+          <div
+            class="item"
+            v-for="item in list"
+            :key="item.id"
+            @click="toUrlLive(item)"
+          >
+            <div class="img-box">
+              <u--image
+                class="avatar"
+                :src="item.avatar"
+                shape="circle"
+                width="104rpx"
+                height="104rpx"
+              ></u--image>
+						  <img v-if="item.islive == 1" class="img" src="/static/image/match/live-actives.png" alt="">
+              <img v-else class="img" src="/static/image/match/live.png" alt="">
+            </div>
+            <div class="name text-clamp">{{ item.user_nickname }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { numberToK } from "@/utils/util";
+import animationMixin from '@/pages/mixins/animation'
+export default {
+  props: ['list'],
+  mixins: [animationMixin],
+  data() {
+    return {
+      activeInfo: {},
+      timer: null,
+    };
+  },
+  deactivated() {
+  },
+  created() {
+  },
+  activated() {
+  },
+  methods: {
+    toUrlLive(item) {
+      uni.navigateTo({
+        url: `/pages/Match/member/usermanger?id=${item.id}`,
+      });
+    },
+    numberToK(v) {
+      return numberToK(v);
+    },
+    formaScore(v) {
+      if (!v) {
+        return "-";
+      }
+      if (v == "0/0（0）") {
+        return "Yet To Bat";
+      }
+      let s = v.replace("（", "(");
+      let index = v.indexOf("(");
+      return s.substring(index);
+    },
+    formaScore1(v) {
+      if (!v) {
+        return "";
+      }
+      let s = v.replace("（", "(");
+      let index = v.indexOf("(");
+      return s.substring(0, index);
+    },
+    watchLiveAt(value) {
+      if (!value) {
+        return "";
+      }
+      var date = new Date(value.replace(new RegExp(/-/gm), "/"));
+      var hours = date.getHours();
+      var minutes = date.getMinutes();
+      if (hours != 12) {
+        hours = hours % 12;
+      }
+      if (hours == 12 && minutes) {
+        hours = hours % 12;
+      }
+      minutes = minutes < 10 ? "0" + minutes : minutes;
+      hours = hours < 10 ? "0" + hours : hours;
+      var strTime = hours + ":" + minutes;
+      return strTime;
+    },
+    watchLiveAt1(value) {
+      if (!value) {
+        return "";
+      }
+      var date = new Date(value.replace(new RegExp(/-/gm), "/"));
+      var hours = date.getHours();
+      var minutes = date.getMinutes();
+      var ampm = hours >= 12 ? "PM" : "AM";
+      var strTime = ampm;
+      if (minutes && hours == 12) {
+        strTime = "PM";
+      }
+      return strTime;
+    },
+    countdownFun(value) {
+      if (!value) {
+        return "";
+      }
+      var h = parseInt(value / 3600);
+      var m = parseInt((value % 3600) / 60);
+      var str = "";
+      if (h > 0) {
+        str += h + "hrs";
+        if (m < 10) {
+          m = "0" + m;
+        }
+        str += " " + m + "min";
+        return str;
+      } else {
+        if (m > 0) {
+          if (m < 10) {
+            m = "0" + m;
+          }
+          str += m + "min";
+        }
+      }
+
+      var s = parseInt((value % 3600) % 60);
+      if (s < 10) {
+        s = "0" + s;
+      }
+      str += " " + s + "s";
+      return str;
+    },
+  },
+};
+</script>
+<style lang="scss">
+.box {
+  padding-top: 30px;
+  padding-bottom: 6rpx;
+  .title {
+    font-size: 15px;
+    padding-right: 14px;
+    font-weight: bold;
+    color: #242424;
+    line-height: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-bottom: 20rpx;
+    padding-left: 29rpx;
+    .icon {
+      height: 4.08vw;
+      margin-right: 14rpx;
+    }
+    .all {
+        color: #FF3300;
+    }
+  }
+}
+.tag-box {
+  width: 100%;
+  overflow: hidden;
+  position: relative;
+  .left-tag,
+  .right-tag {
+    position: absolute;
+    z-index: 5;
+    bottom: 0;
+    height: 19rpx;
+    width: 42rpx;
+    background-color: #f3f3f7;
+  }
+  .left-tag {
+    left: 0;
+  }
+  .right-tag {
+    right: 0;
+  }
+}
+.list-box {
+  padding-top: 13rpx;
+  padding-left: 17rpx;
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  .item {
+    min-width: 124rpx;
+    max-width: 124rpx;
+    position: relative;
+    padding-bottom: 19rpx;
+    overflow: hidden;
+  }
+  .img-box {
+    position: relative;
+    padding: 10rpx;
+    &.active {
+      background-image: url("/static/image/live/icon5.png");
+      background-size: contain;
+      background-repeat: no-repeat;
+    }
+    .img {
+      position: absolute;
+      bottom: 0;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 70%;
+    }
+    .avatar {
+      width: 104rpx;
+      height: 104rpx;
+    }
+  }
+  .name {
+    padding: 1.4vw 16rpx 0;
+    font-size: 3.27vw;
+    font-weight: 400;
+    color: #242424;
+    line-height: 1;
+    text-align: center;
+  }
+  .active-box {
+    position: absolute;
+    z-index: 2;
+    border: 2rpx solid #ff3300;
+    width: 10px;
+    height: 10px;
+    left: 50%;
+    transform: translateX(-50%);
+    bottom: -7px;
+    background-color: #fff;
+    transform: rotate(45deg);
+  }
+}
+</style>

pages/Game/index.vue

@@ -0,0 +1,307 @@
+<template>
+  <view class="live">
+    <view class="navBar">
+      <div class="top">
+        <img class="logo" src="/static/logo_big.png" alt="" />
+        <u--image
+          class="border"
+          :showLoading="true"
+          :src="info.avatar || '/static/image/match/[email protected]'"
+          @click="go('/pages/Match/member/usermanger', true)"
+          width="24px"
+          height="24px"
+          shape="circle"
+        ></u--image>
+      </div>
+    </view>
+    <div
+      class="list-swiper"
+      v-if="bannerList.length"
+      :class="{ fadeInBtm: animationLoaded }"
+    >
+      <swiper
+        class="swiper"
+        radius="24rpx"
+        bgColor="#ffffff"
+        circular
+        previous-margin="30rpx"
+        next-margin="30rpx"
+        :indicator-dots="false"
+        :autoplay="true"
+        :interval="2000"
+        :duration="500"
+      >
+        <swiper-item
+          class="swiper-item"
+          v-for="(item, index) in bannerList"
+          :key="index"
+          @click="swiperClick(item)"
+        >
+          <div class="top">
+            <img class="live-img" v-if="item.islive == 1" src="/static/image/game/live.png" alt="">
+            <div class="flex">
+              <img class="icon_view" src="/static/image/game/icon_view.png" alt="">
+              {{ numberToK(item.viewers) || 0 }}
+            </div>
+          </div>
+          <div class="img-box">
+            <u--image
+              mode="aspectFill"
+              :showLoading="true"
+              :src="item.thumb"
+              width="100%"
+              height="42.05vw"
+            >
+              <template v-slot:loading>
+                <image
+                  class="loading-banner-img"
+                  src="/static/image/common/video-banner-bg.png"
+                ></image>
+              </template>
+            </u--image>
+          </div>
+          <div class="bottom">
+            <u--image
+              class="avatar"
+              :src="item.avatar"
+              shape="circle"
+              width="78rpx"
+              height="78rpx"
+            ></u--image>
+            <div>
+              <div class="text-clamp">{{ item.title }}</div>
+              <div>{{ item.user_nickname }} ・ {{ getTimeAgo(item.addtime) }}</div>
+            </div>
+          </div>
+        </swiper-item>
+      </swiper>
+    </div>
+    <div class="ad-list">
+      <div
+        class="item"
+        v-for="item in adList"
+        :key="item.id"
+        @click="adClick(item)"
+      >
+        <img class="ad" :src="item.img" alt="" />
+      </div>
+    </div>
+    <tournamentList :list="userList"></tournamentList>
+    <historyList></historyList>
+  </view>
+</template>
+
+<script>
+import tournamentList from "./compontent/tournamentList.vue";
+import historyList from "./compontent/historyList.vue";
+import animationMixin from "@/pages/mixins/animation";
+import { numberToK, formatTime } from "@/utils/util";
+export default {
+  components: {
+    historyList,
+    tournamentList,
+  },
+  mixins: [animationMixin],
+  data() {
+    return {
+      bannerList: [],
+      adList: [],
+      list: [],
+      userList: [],
+      current: 0,
+      tokenIsLogin: "",
+      homeShow: false,
+      intervalTimer: null,
+    };
+  },
+  computed: {
+    info() {
+      return this.$store.state.info;
+    },
+    isLogin() {
+      return this.$store.state.isLogin;
+    },
+  },
+  onReachBottom() {
+  },
+  created() {
+    this.getBanner();
+    this.intervalTimer = setInterval(() => {
+      this.getBanner();
+    }, 10000);
+  },
+  activated() {
+    this.intervalTimer = setInterval(() => {
+      this.getBanner();
+    }, 10000);
+  },
+  deactivated() {
+    clearInterval(this.intervalTimer);
+    this.intervalTimer = null;
+  },
+  methods: {
+    getBanner() {
+      uni.$u.http
+        .get("/api/game/home", {
+          params: {
+          },
+        }).then((res) => {
+          this.adList = res.banner || [];
+          this.bannerList = res.list || [];
+          this.userList = res.users || [];
+        })
+        .catch((res) => {})
+        .finally(() => {
+          if (this.animationLoaded) {
+            return;
+          }
+          this.animationLoaded = true;
+          this.$nextTick(() => {
+            this.scrollFun();
+          });
+        });
+    },
+    go(url, login) {
+      if (this.isLogin == 2 && login) {
+        this.$toUrl("/pages/login/login");
+        return;
+      }
+      this.$toUrl(url);
+    },
+    adClick(item) {
+      if (item.url) {
+        uni.$u.http
+        .post("/api/live_streaming/click_adv", {
+          type: 8,
+          id: item.id,
+          url: item.url
+        })
+        .then((res) => {
+        }).finally(() => {
+        });
+        window.open(item.url);
+      }
+    },
+    swiperClick(item) {
+      if (item.url) {
+        window.open(item.url)
+        return
+      }
+      if (item.uid) {
+        uni.navigateTo({
+          url: `/pages/Live/live-detail?type=game&id=${item.uid}&ID=${item.id}`,
+        });
+        return;
+      }
+      if (item.param_id) {
+        uni.navigateTo({
+          url: "/pages/Match/match-detail?id=" + item.param_id,
+        });
+        return;
+      }
+    },
+    numberToK(v) {
+      return numberToK(v);
+    },
+    getTimeAgo(time) {
+      return formatTime(time, this)
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+page {
+  background-color: #f3f3f7;
+}
+.live {
+  padding-bottom: var(--window-bottom);
+}
+.navBar {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  background-color: #10044a;
+  .top {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8rpx 16px 16rpx;
+    .border {
+      border: 1px solid #cc2900;
+      border-radius: 50%;
+    }
+  }
+  .logo {
+    height: 24px;
+  }
+}
+
+.list-swiper {
+  padding: 20rpx 0;
+  .swiper {
+    height: 42.05vw;
+    color: #fff;
+  }
+  .swiper-item {
+    padding: 0 12rpx;
+    box-sizing: border-box;
+  }
+  .img-box {
+    border-radius: 24rpx;
+    overflow: hidden;
+    position: relative;
+  }
+  .top {
+    position: absolute;
+    left: 22rpx;
+    top: 20rpx;
+    z-index: 10;
+    display: flex;
+    align-items: center;
+    .flex {
+      background-color: rgba(0, 0, 0, 0.5);
+      border-radius: 3px;
+      height: 44rpx;
+      padding: 0 18rpx;
+      font-size: 26rpx;
+    }
+    .icon_view {
+      width: 27rpx;
+      margin-right: 6rpx;
+    }
+  }
+  .live-img {
+    width: 92rpx;
+    margin-right: 10rpx;
+  }
+  .bottom {
+    position: absolute;
+    bottom: 22rpx;
+    left: 20rpx;
+    right: 20rpx;
+    font-size: 28rpx;
+    display: flex;
+    align-items: center;
+    .avatar {
+      margin-right: 20rpx;
+    }
+  }
+}
+.ad-list {
+  padding: 0 14px;
+  .item {
+    padding-top: 10px;
+    .ad {
+      display: block;
+      width: 100%;
+      border-radius: 12rpx;
+    }
+  }
+}
+.news-install {
+  position: sticky;
+  bottom: var(--window-bottom);
+  z-index: 200;
+}
+</style>

pages/Game/list.vue

@@ -0,0 +1,265 @@
+<template>
+	<view class="">
+		<view class="header flex-start">
+			<image src="/static/image/common/grade-left.png" mode="" @click="$back()"></image>
+			{{type == 0?$t('live.title1'):type == 1?$t('live.title2'):$t('live.title3')}}
+		</view>
+		<view class="detail-video-list">
+			<view class="detail-video-li" v-for="(item,index) in liveList" :key="index" @click="toMatchLive(item)">
+				<div class="img-box">
+					<img class="bottom" :src="item.thumb" alt="">
+					<div class="box">
+						<div class="detail-box">
+							<div class="title">{{ item.title }}</div>
+							<div class="start_time">{{ formatDate(item.created_at) }}</div>
+							<img class="icon1" src="/static/image/live/play-icon.png" alt="" />
+						</div>
+					</div>
+				</div>
+			</view>
+		</view>
+		<u-loadmore 
+			:status="status"
+			fontSize="28"
+			:line="true"
+			:loading-text="statusType.loadingText" 
+			:loadmore-text="statusType.loadmoreText" 
+			:nomore-text="statusType.nomoreText" 
+		/>
+	</view>
+</template>
+
+<script>
+import { numberToK, parseTime } from '@/utils/util'
+	export default {
+		data() {
+			return {
+				type:0,
+				liveList: [],
+				statusType:{
+					loadingText: this.$t('common.lab'),
+					loadmoreText: this.$t('common.lab1'),
+					nomoreText: this.$t('common.lab2')
+				},
+				status:'loadmore',
+				pageNumber: 1
+			}
+		},
+		onLoad(option) {
+			this.type = option.type;
+			this.getList()
+		},
+		// 触底触发
+		onReachBottom() {
+			if(this.status == 'loadmore'){
+				this.pageNumber++;
+				this.getList();
+			}
+			
+		},
+		// 下拉刷新
+		onPullDownRefresh(){
+			// 正常情况下接口返回应该很会很快。故意延迟调用，让用户有在刷新的体验感
+			this.pageNumber = 1;
+			this.status = 'loadmore';
+			this.getList();
+			
+			setTimeout(res=>{
+				uni.stopPullDownRefresh()
+			},1500)
+		},
+		methods: {
+			getList() {
+				this.status= 'loading';
+				this.getHistory()
+			},
+			getHistory() {
+				uni.$u.http.get('/api/game/history', {
+					params: {
+						page: this.pageNumber
+					}
+				}).then(res => {
+					if (this.pageNumber == 1) {
+						this.liveList = res.data || []
+					} else {
+						this.liveList = this.liveList.concat(res.data || [])
+					}
+					this.status = this.liveList.length == res.total ? 'nomore' : 'loadmore'
+				})
+			},
+			toMatchLive(item) {
+				uni.navigateTo({
+					url:`/pages/Live/history-detail?type=game&ID=${item.live_id}&MediaUrl=${item.video}`
+				})
+			},
+			formatDate(value) {
+				var date = new Date(value.replace(new RegExp(/-/gm), "/"));
+				var weekNum = new Date().getDay()
+				let week = ""
+				switch (weekNum) {
+					case 0:
+						week = "Sun";
+						break;
+					case 1:
+						week = "Mon";
+						break;
+					case 2:
+						week = "Tue";
+						break;
+					case 3:
+						week = "Wed";
+						break;
+					case 4:
+						week = "Thu";
+						break;
+					case 5:
+						week = "Fri";
+						break;
+					case 6:
+						week = "Sat";
+						break;
+				}
+				var MonthNum = date.getMonth() + 1
+				let Month = ''
+				switch (MonthNum) {
+					case 1:
+						Month = "Jan";
+						break;
+					case 2:
+						Month = "Feb";
+						break;
+					case 3:
+						Month = "Mar";
+						break;
+					case 4:
+						Month = "Apr";
+						break;
+					case 5:
+						Month = "May";
+						break;
+					case 6:
+						Month = "Jun";
+						break;
+					case 7:
+						Month = "Jul";
+						break;
+					case 8:
+						Month = "Aug";
+						break;
+					case 9:
+						Month = "Sept";
+						break;
+					case 10:
+						Month = "Oct";
+						break;
+					case 11:
+						Month = "Nov";
+						break;
+					case 12:
+						Month = "Dec";
+						break;
+				}
+				let day = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate())
+				// this.week = week
+				// this.month = Month
+				// this.day = day
+				var hours = date.getHours();
+				var minutes = date.getMinutes();
+				var ampm = hours >= 12 ? 'PM' : 'AM';
+				if (hours != 12) {
+          hours = hours % 12;
+        }
+        if (hours == 12 && minutes) {
+          hours = hours % 12;
+          ampm = 'PM'
+        }
+        hours = hours < 10 ? "0" + hours : hours;
+				minutes = minutes < 10 ? '0' + minutes : minutes;
+				// var strTime = week + ',' + day + Month + '.' + 'Watch live in' + hours + ':' + minutes + ' ' + ampm;
+				var strTime =  `${hours}:${minutes} ${ampm},${day} ${Month} `;
+				return strTime;
+			},
+			numberToK(v) {
+				return numberToK(v)
+			},
+			parseTime(t) {
+				return parseTime(t, '{y}-{m}-{d} {h}:{i}')
+			}
+		},
+	}
+</script>
+
+<style lang="scss">
+	page {
+		background-color: #F3F3F7 !important;
+	}
+	.header {
+		color: #fff;
+		font-size: 34rpx;
+		padding: 18rpx 24rpx;
+		position: sticky;
+		top: 0;
+		z-index: 10;
+		background-color: #1D2550;
+		image {
+			width: 60rpx;
+			height: 60rpx;
+		}
+	}
+	.detail-video-list {
+		flex-wrap: wrap;
+		padding: 0 0 24rpx;
+	}
+	.detail-video-li {
+		overflow: hidden;
+		margin-top: 20rpx;
+		background-color: white;
+		.img-box {
+			position: relative;
+			min-height: 100rpx;
+		}
+		.box {
+			position: absolute;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			padding: 16px;
+			// background-color: rgba(27, 24, 67, 0.8);
+		}
+		.logo-box {
+			display: flex;
+			align-items: center;
+			justify-content: space-around;
+			margin-bottom: 16px;
+			.logo {
+				height: 70rpx;
+			}
+		}
+		.detail-box {
+			position: relative;
+			padding-right: 30px;
+			.title {
+				margin-bottom: 8px;
+				font-weight: 500;
+				font-size: 14px;
+				color: #fff;
+			}
+			.start_time {
+				font-weight: 400;
+				font-size: 12px;
+				color: #ACACAC;
+			}
+			.icon1 {
+				position: absolute;
+				right: 0;
+				top: 50%;
+				transform: translateY(-50%);
+				width: 28px;
+			}
+		}
+		.bottom {
+			display: block;
+			width: 100%;
+		}
+	}
+</style>

pages/Game/top-creators.vue

@@ -0,0 +1,281 @@
+<template>
+	<view class="contain">
+		<view class="header">
+			<image src="/static/image/common/grade-left.png" mode="" @click="$back()"></image>
+			<div class="tabbar">
+				<div class="tab" :class="{'active': tab == 1}" @click="changeTab(1)">
+					{{ $t("game.lab") }}
+					<div class="line"></div>
+				</div>
+				<div class="tab" :class="{'active': tab == 2}" @click="changeTab(2)">
+					{{ $t('member.tab1') }}
+					<div class="line"></div>
+				</div>
+			</div>
+		</view>
+		<div class="list">
+			<div class="item" v-for="(item, index) in list" :key="item.id">
+				<div class="img-box" @click="toUrlLive(item)">
+					<u--image
+						class="avatar"
+						:src="item.avatar"
+						shape="circle"
+						width="96rpx"
+						height="96rpx"
+					></u--image>
+					<img v-if="item.islive == 1" class="img" src="/static/image/match/live-actives.png" alt="">
+					<img v-else class="img" src="/static/image/match/live.png" alt="">
+				</div>
+				<div class="content">
+					<div class="left">
+						<div>{{ item.user_nickname }}</div>
+						<div class="num">{{ $t('member.lab2') }}: {{ numberToK(item.attention) }}</div>
+					</div>
+					<view class="paid size28" v-if="item.is_attention == 1" @click="attention(item, index)">
+						<!-- Followed -->
+						{{ $t('member.lab') }}
+					</view>
+					<view class="guanzhu-box" v-if="item.is_attention == 0" @click="attention(item, index)">
+						<image src="/static/image/match/guanzhu.png" mode="widthFix" class="guanzhu-icon mg-rt12"></image>
+						<text class="size28 cfff">{{ $t('member.lab1') }}</text>
+					</view>
+				</div>
+			</div>
+		</div>
+		<u-loadmore 
+			:status="status"
+			fontSize="28"
+			:line="true"
+			:loading-text="statusType.loadingText" 
+			:loadmore-text="statusType.loadmoreText" 
+			:nomore-text="statusType.nomoreText" 
+		/>
+	</view>
+</template>
+
+<script>
+import { numberToK, parseTime } from '@/utils/util'
+	export default {
+		data() {
+			return {
+				type:0,
+				list: [],
+				statusType:{
+					loadingText: this.$t('common.lab'),
+					loadmoreText: this.$t('common.lab1'),
+					nomoreText: this.$t('common.lab2')
+				},
+				status:'loadmore',
+				tab: 1,
+				pageNumber: 1
+			}
+		},
+		onLoad(option) {
+			this.type = option.type;
+			this.getList()
+		},
+		// 触底触发
+		onReachBottom() {
+			if(this.status == 'loadmore'){
+				this.pageNumber++;
+				this.getList();
+			}
+			
+		},
+		// 下拉刷新
+		onPullDownRefresh(){
+			// 正常情况下接口返回应该很会很快。故意延迟调用，让用户有在刷新的体验感
+			this.pageNumber = 1;
+			this.status = 'loadmore';
+			this.getList();
+			
+			setTimeout(res=>{
+				uni.stopPullDownRefresh()
+			},1500)
+		},
+		methods: {
+			getList() {
+				this.status= 'loading';
+				this.getHistory()
+			},
+			getHistory() {
+				let params = {
+					page: this.pageNumber
+				}
+				if (this.tab == 2) {
+					params.type = '2'
+				}
+				uni.$u.http.get('/api/game/users', {
+					params
+				}).then(res => {
+					if (this.pageNumber == 1) {
+						this.list = res.data || []
+					} else {
+						this.list = this.list.concat(res.data || [])
+					}
+					this.status = this.list.length == res.total ? 'nomore' : 'loadmore'
+				})
+			},
+			changeTab(item){
+				if (this.tab == item) {
+					return
+				}
+				if (this.$store.state.isLogin != 1) {
+					this.$toUrl('/pages/login/login')
+					return
+				}
+				this.tab = item
+				this.pageNumber = 1
+				this.getList()
+			},
+			 /* 关注 */
+			 attention(item, index) {
+				if (this.$store.state.isLogin != 1) {
+					this.$toUrl('/pages/login/login')
+					return
+				}
+				uni.showLoading({
+					title: this.$t('common.lab'),
+				});
+				uni.$u.http
+					.post("/api/Member/attention", {
+						id: item.id,
+					})
+					.then((res) => {
+						if (this.tab == 1) {
+							this.$set(this.list[index], 'attention', item.is_attention == 0 ? (item.attention + 1) : (item.attention - 1) )
+							this.$set(this.list[index], 'is_attention', item.is_attention == 0 ? 1 : 0 )
+						} else {
+							this.pageNumber = 1
+							this.getList()
+						}
+					}).finally(() => {
+						uni.hideLoading();
+					});
+			},
+			toUrlLive(item) {
+				uni.navigateTo({
+					url: `/pages/Match/member/usermanger?id=${item.id}`,
+				});
+			},
+			numberToK(v) {
+				return numberToK(v)
+			},
+			parseTime(t) {
+				return parseTime(t, '{y}-{m}-{d} {h}:{i}')
+			}
+		},
+	}
+</script>
+
+<style lang="scss" scoped>
+page {
+  background-color: #F3F3F7;
+}
+.header {
+  color: #fff;
+  font-size: 34rpx;
+  padding: 0 24rpx;
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  background-color: #1D2550;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+  image {
+		position: absolute;
+		left: 24rpx;
+		top: 50%;
+		transform: translateY(-50%);
+    width: 60rpx;
+    height: 60rpx;
+  }
+	.tabbar {
+		width: 260px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		.tab {
+			flex: 1;
+			line-height: 44px;
+			text-align: center;
+			position: relative;
+			&.active {
+				color: #DC3C23;
+				.line {
+					display: block;
+				}
+			}
+		}
+		.line {
+			position: absolute;
+			bottom: 3px;
+			left: 50%;
+			transform: translateX(-50%);
+			width: 126rpx;
+			background-color: #DC3C23;
+			display: none;
+			height: 2px;
+		}
+	}
+}
+.list {
+	padding: 24rpx 28rpx;
+  background-color: #F3F3F7;
+}
+.item {
+	margin-bottom: 24rpx;
+	padding: 28rpx 28rpx;
+	background-color: #fff;
+	border-radius: 12rpx;
+	display: flex;
+	font-size: 14px;
+	.num {
+		color: rgb(117, 117, 117);
+		margin-top: 8px;
+	}
+}
+.img-box {
+	margin-right: 20rpx;
+	position: relative;
+	.img {
+		position: absolute;
+		bottom: 0;
+		left: 50%;
+		transform: translateX(-50%);
+		width: 77%;
+	}
+}
+.content {
+	flex: 1;
+	min-width: 10%;
+	max-width: 100%;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	.left {
+		flex: 1;
+		min-width: 10%;
+		max-width: 100%;
+	}
+	.paid{
+		padding: 8rpx 20rpx;
+		border-radius: 12rpx;
+		background-color: #ccc;
+		color: #fff;
+	}
+	.guanzhu-box{
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		background: url(@/static/image/match/right-bg.png)center center/ 100% 100% no-repeat;
+		width: 180rpx;
+		height: 59.54rpx;
+		.guanzhu-icon{
+			width: 28.82rpx;
+			height: 25.39rpx;
+		}
+	}
+}
+</style>

pages/Live/Live.vue

@@ -0,0 +1,301 @@
+<!-- 底部-直播 -->
+<template>
+  <view class="live">
+    <view class="navBar">
+      <div class="top">
+        <img class="logo" src="/static/logo_big.png" alt="" />
+        <u--image
+          class="border"
+          :showLoading="true"
+          :src="info.avatar || '/static/image/match/[email protected]'"
+          @click="go('/pages/Match/member/usermanger', true)"
+          width="24px"
+          height="24px"
+          shape="circle"
+        ></u--image>
+      </div>
+    </view>
+    <div class="list-swiper" v-if="bannerList.length" :class="{'fadeInBtm': animationLoaded}">
+      <swiper
+        class="swiper"
+        radius="24rpx"
+        bgColor="#ffffff"
+        circular
+        previous-margin="30rpx"
+        next-margin="30rpx"
+        :indicator-dots="false"
+        :autoplay="true"
+        :interval="2000"
+        :duration="500"
+      >
+        <swiper-item
+          class="swiper-item"
+          v-for="(item, index) in bannerList"
+          :key="index"
+          @click="swiperClick(item)"
+        >
+          <div class="img-box">
+            <u--image
+              mode="aspectFill"
+              :showLoading="true"
+              :src="item.img"
+              width="100%"
+              height="42.05vw"
+            >
+              <template v-slot:loading>
+                <image
+                  class="loading-banner-img"
+                  src="/static/image/common/video-banner-bg.png"
+                ></image>
+              </template>
+            </u--image>
+          </div>
+        </swiper-item>
+      </swiper>
+    </div>
+    <tournamentList ref="tournamentList"></tournamentList>
+    <div class="ad-list">
+      <div class="item" v-for="item in adList" :key="item.id" @click="adClick(item)">
+        <img class="ad" :src="item.img" alt="">
+      </div>
+    </div>
+    <todayList ref="todayList"></todayList>
+    <historyMainList></historyMainList>
+    <div class="news-install">
+      <install></install>
+    </div>
+  </view>
+</template>
+
+<script>
+import todayList from "./compontent/todayList.vue";
+import tournamentList from "./compontent/tournamentList.vue";
+import historyMainList from "./compontent/historyMainList.vue";
+import install from "@/components/install/install.vue";
+import animationMixin from '@/pages/mixins/animation'
+export default {
+  components: {
+    todayList,
+    historyMainList,
+    tournamentList,
+    install,
+  },
+  mixins: [animationMixin],
+  data() {
+    return {
+      bannerList: [],
+      adList: [],
+      liveList: [],
+      current: 0,
+      tokenIsLogin: "",
+      homeShow: false,
+      intervalTimer: null,
+      homeList: [
+        "Streamer application",
+        this.$t("member.concerns"),
+        this.$t("member.message"),
+        this.$t("member.settings"),
+      ],
+    };
+  },
+  computed: {
+    info() {
+      return this.$store.state.info;
+    },
+    isLogin() {
+      return this.$store.state.isLogin;
+    },
+  },
+  onReachBottom() {
+    // if(this.current == 0){
+    // 	this.$refs['list'+this.current].getList(this.current)
+    // }
+  },
+  created() {
+    this.getBanner();
+    this.getAd()
+    this.intervalTimer = setInterval(() => {
+      this.getBanner()
+      this.$refs['tournamentList'].getList()
+      this.$refs['todayList'].getList()
+    }, 10000)
+  },
+  activated() {
+    this.intervalTimer = setInterval(() => {
+      this.getBanner()
+      this.$refs['tournamentList'].getList()
+      this.$refs['todayList'].getList()
+    }, 10000)
+  },
+  deactivated() {
+    clearInterval(this.intervalTimer)
+    this.intervalTimer = null
+  },
+  methods: {
+    getBanner() {
+      uni.$u.http
+        .get("/api/banner/getBannerList", {
+          params: {
+            banner_type: 1,
+            type: 1,
+          },
+        })
+        .then((res) => {
+          this.bannerList = res || [];
+        })
+        .catch((res) => {
+        }).finally(() => {
+          if (this.animationLoaded) {
+            return
+          }
+          this.animationLoaded = true
+          this.$nextTick(() => {
+            this.scrollFun()
+          })
+        })
+    },
+    getAd() {
+      uni.$u.http
+        .get("/api/banner/getBannerList", {
+          params: {
+            banner_type: 2,
+          },
+        })
+        .then((res) => {
+          this.adList = res || []
+        })
+        .catch((res) => {
+        }).finally(() => {
+        })
+    },
+    toUrl(url) {
+      if (this.isLogin == 2) {
+        this.$toUrl("/pages/login/login");
+      } else {
+        this.$toUrl(url);
+      }
+    },
+    getList3() {
+      let data = {
+        type: 2,
+      };
+      uni.$u.http
+        .get("/api/live_streaming/getLiveList", { params: data })
+        .then((res) => {
+          this.liveList = res.data || [];
+        });
+    },
+    // 跳转个人中心
+    userClick() {
+      uni.navigateTo({
+        url: "/pages/Match/member/infomation",
+      });
+    },
+    go(url, login) {
+      if (this.isLogin == 2 && login) {
+        this.$toUrl('/pages/login/login')
+        return
+      }
+      this.$toUrl(url)
+    },
+    adClick(item) {
+      if (item.url) {
+        uni.$u.http
+        .post("/api/live_streaming/click_adv", {
+          type: 2,
+          id: item.id,
+          url: item.url
+        })
+        .then((res) => {
+        }).finally(() => {
+        });
+        window.open(item.url)
+      }
+    },
+    swiperClick(item) {
+      if (item.url) {
+        uni.$u.http
+        .post("/api/live_streaming/click_adv", {
+          type: 1,
+          id: item.id,
+          url: item.url
+        })
+        .then((res) => {
+        }).finally(() => {
+        });
+        window.open(item.url)
+        return
+      }
+      if (item.anchor_id) {
+        uni.navigateTo({
+          url: `./live-detail?id=${item.anchor_id}&ID=${item.id}`,
+        });
+        return;
+      }
+      if (item.param_id) {
+        uni.navigateTo({
+          url: "/pages/Match/match-detail?id=" + item.param_id,
+        });
+        return;
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+page {
+  background-color: #f3f3f7;
+}
+.live {
+  padding-bottom: var(--window-bottom);
+}
+.navBar {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  background-color: #10044a;
+  .top {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8rpx 16px 16rpx;
+    .border {
+      border: 1px solid #cc2900;
+      border-radius: 50%;
+    }
+  }
+  .logo {
+    height: 24px;
+  }
+}
+
+.list-swiper {
+  padding: 20rpx 0;
+  .swiper {
+    height: 42.05vw;
+  }
+  .swiper-item {
+    padding: 0 12rpx;
+    box-sizing: border-box;
+  }
+  .img-box {
+    border-radius: 24rpx;
+    overflow: hidden;
+  }
+}
+.ad-list {
+  .item {
+    padding-top: 4.43vw;
+    .ad {
+      display: block;
+      width: 100%;
+    }
+  }
+}
+.news-install {
+  position: sticky;
+  bottom: var(--window-bottom);
+  z-index: 200;
+}
+</style>

pages/Live/attention.vue

@@ -0,0 +1,261 @@
+<template>
+	<view class="contain">
+		<view class="select-head">
+			<u-navbar bgColor="transparent" leftIconColor="#fff" :titleStyle="{color:'#fff'}" :fixed="false" leftIconSize="48" :autoBack="true">
+				<view slot="center" class="navbar-center" style="width: 700rpx;margin-left: 70rpx">
+					 <u-tabs 
+					 :list="list1" 
+					 lineWidth="126rpx"
+					 @click="changeTab" 
+					 lineHeight="0" 
+					 lineColor="#DC3C23" 
+					 :scrollable="false"   
+					 :activeStyle="{color:'#fff',fontSize:'34rpx'}" 
+					 :inactiveStyle="{color:'#fff',fontSize:'34rpx'}
+					 "></u-tabs>
+				</view>
+			</u-navbar>
+			<!-- <view class="match-head-tab" v-if="list1Index == 0">
+				 <u-tabs 
+				 :list="list2" 
+				 lineWidth="126rpx"
+				 @click="changeTab2" 
+				 lineHeight="2" 
+				 lineColor="#DC3C23" 
+				 :scrollable="false"   
+				 :activeStyle="{color:'#DC3C23',fontSize:'32rpx'}" 
+				 :inactiveStyle="{color:'#fff',fontSize:'32rpx'}
+				 "></u-tabs>
+			</view> -->
+		</view>
+		<view class="main">
+			<view>
+				<view class="list-item flex-start" v-for="(item,index) in list" :key="index">
+					<!-- actives:item!==2 -->
+					<div class="avatar-box">
+						<image :src="item.avatar || '/static/image/common/[email protected]'" mode="aspectFill" class="avatar"></image>
+						<img v-if="item.is_live == 0" class="img" src="/static/image/match/live.png" alt="">
+						<img v-if="item.is_live == 1" class="img" src="/static/image/match/live-actives.png" alt="">
+					</div>
+					<view class="list-item-content c9 size24">
+						<view class="mg-tp6">
+							<text>{{ $t('live.lab37') }}: {{item.attention}}</text>
+							<view class="size28 c3">{{item.user_nickname}}</view>
+						</view>
+						<view class="flexcenter flex-col align-start">
+						<!-- <view class="flexcenter flex-col align-start"> -->
+							<!-- <view class="paid size28" v-if="list1Index == 0 || item.is_attention == 0" @click="setAttention(1,item)">
+								Paid attention to
+							</view> -->
+							<!-- <text v-if="item.is_attention == 1">Number of fans: 44</text> -->
+							<!-- <view class="guanzhu-box" @click="setAttention(item)">
+								<image src="/static/image/match/guanzhu.png" mode="widthFix" class="guanzhu-icon mg-rt12"></image>
+								<text class="size28 cfff">follow</text>
+							</view> -->
+							<view class="Followed" @click="setAttention(item)">
+								<!-- Followed -->
+								{{ $t('live.lab38') }}
+							</view>
+						</view>
+					</view>
+				</view>
+				
+				<u-empty
+					v-if="list && list.length == 0"
+					mode="data"
+					width="474"
+					height="312"
+					textSize="28"
+					marginTop="100"
+					:text="$t('common.nodata')"
+					icon="/static/image/common/nodata.png"
+				>
+				</u-empty>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				list1Index:0,
+				list1:[
+					{
+						name: this.$t('live.title4'),
+					},
+					// {
+					// 	name: this.$t('live.title5'),
+					// },
+				],
+				type:2,
+				list:[]
+			};
+		},
+		onReady() {
+			this.getList()
+		},
+		computed:{
+			info() {
+				return this.$store.state.info
+			}
+		},
+		methods:{
+			changeTab(e) {
+				this.list1Index = e.index
+				return
+				if(e.index == 1) {
+					this.watchlistList()
+				}else {
+					this.getList()
+				}
+			},
+			changeTab2(e) {
+				this.type = e.index
+				this.getList()
+			},
+			getList() {
+				let index = this.list1Index;
+				uni.showLoading({
+					title:this.$t('common.lab')
+				})
+				uni.$u.http.get('api/User/attentionList',{params:{type: 0}}).then(res=>{
+					this.list = res.data || []
+					uni.hideLoading()
+				}).catch(res=>{})
+			},
+			watchlistList() {
+				let index = this.list1Index;
+				uni.showLoading({
+					title:this.$t('common.lab')
+				})
+				uni.$u.http.get('api/Live_streaming/getUserReserveLiveList',{params:{type:0,uid:this.info.id}}).then(res=>{
+					this.list = res.data || []
+					uni.hideLoading()
+				}).catch(res=>{})
+			},
+			/* type == 1取消 2关注 */
+			setAttention(item){
+				uni.showLoading({
+					title: this.$t('common.lab'),
+				});
+				uni.$u.http.post('/api/Member/attention',{id:item.followed_id}).then(res=>{
+          uni.hideLoading();
+					this.getList()
+				}).catch(res=>{})
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	page {
+		background-color: #F3F3F7;
+	}
+	
+	.contain{
+		min-height: 100vh;
+		background-color: #F3F3F7;
+	}
+	.navbar-center{
+		width: 520rpx;
+	}
+	.select-head {
+		position: sticky;
+		top: 0;
+		z-index: 99;
+		background-color: $color1;
+		.select-tab {
+			padding: 0 28rpx;
+			margin-top: 20rpx;
+		}
+	}
+	.match-head-tab {
+		padding: 0 52rpx;
+		// margin-top: 49rpx;
+	}
+	.main{
+		padding: 24rpx 28rpx;
+		.list-item{
+			margin-bottom: 24rpx;
+			padding: 24rpx 28rpx;
+			background-color: #fff;
+			border-radius: 12rpx;
+			.avatar-box {
+				position: relative;
+				margin-right: 20rpx;
+				width: 96rpx;
+				.img {
+					position: absolute;
+					bottom: 0;
+					left: 50%;
+					transform: translateX(-50%);
+					width: 77%;
+				}
+			}
+			.avatar{
+				display: block;
+				width: 96rpx;
+				height: 96rpx;
+				border-radius: 200rpx;
+			}
+			.live{
+				position: relative;
+				&:before{
+					content: url(@/static/image/match/live.png);
+					width: 74rpx;
+					height: 28rpx;
+					position: absolute;
+					bottom: -12rpx;
+					margin-left: -50%;
+					left: 50%;
+				}
+			}
+			.actives{
+				&:before{
+					content: url(@/static/image/match/live-actives.png);
+					width: 74rpx;
+					height: 28rpx;
+					position: absolute;
+					bottom: -12rpx;
+					margin-left: -50%;
+					left: 50%;
+				}
+			}
+			.list-item-content{
+				flex: 1;
+				display: flex;
+				justify-content: space-between;
+				.paid{
+					padding: 8rpx 15rpx;
+					border-radius: 12rpx;
+					border: 2rpx solid #ccc;
+				}
+				.guanzhu-box{
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					background: url(@/static/image/match/right-bg.png)center center/ 100% 100% no-repeat;
+					width: 180rpx;
+					height: 59.54rpx;
+					.guanzhu-icon{
+						width: 28.82rpx;
+						height: 25.39rpx;
+					}
+				}
+				.Followed {
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					width: 180rpx;
+					height: 59.54rpx;
+					color: #fff;
+					background-color: #ccc;
+					border-radius: 8rpx;
+				}
+			}
+		}
+		
+	}
+</style>

pages/Live/compontent/OtherTab.vue

@@ -0,0 +1,339 @@
+<!-- 足球 -->
+<template>
+	<view class="list">
+		<view class="list-head" v-if="hotList.length != 0">
+			<view class="list-title flex-start">
+				<text>{{$t('live.anchor')}}</text>
+			</view>
+			<view class="list-list flex-start">
+				<view class="list-list-li" v-for="(item,index) in hotList" :key="index">
+					<image :src="item.avatar" mode=""></image>
+					<view class="text-clamp">{{item.user_nickname}}</view>
+				</view>
+			</view>
+		</view>
+		<view class="detail-title flex-start">
+			<image src="/static/image/live/detail01.png" mode=""></image>
+			<text style="">{{$t('live.title')}}</text>
+		</view>
+		<view class="detail-video-list flex" style="flex-wrap: wrap;">
+			<view class="detail-video-li" v-for="(item,index) in liveList" :key="index" @click="$toUrl(`./live-detail?id=${item.live_id}&ID=${item.id}`)">
+				<div v-if="item.islive==0" class="zhezao">{{formatDate(item.starttime)}}</div>
+        <div class="img_box">
+					<u--image :showLoading="true" :src="(item.home_logo && item.away_logo) ? item.bottom : item.thumb" width="100%" height="176rpx">
+						<template v-slot:loading>
+							<image class="loading-list-img" src="/static/image/common/live-list-bg.png"></image>
+						</template>
+					</u--image>
+					<image v-if="item.home_logo && item.away_logo" class="home_logo" :src="item.home_logo" mode="aspectFill" alt=""></image>
+					<image v-if="item.home_logo && item.away_logo" class="away_logo" :src="item.away_logo" mode="aspectFill" alt=""></image>
+				</div>
+				<image v-if="item.islive==1" src="/static/image/live/live-icon.png" mode="" class="live-icon"></image>
+				<view class="detail-video-content ">
+					<view class="detail-video-title text-clamp2">
+						{{item.title}}
+					</view>
+					<view class="detail-video-right flex">
+						<image class="detail-video-content-logo" :src="item.avatar" mode="aspectFill"></image>
+						<view class="detail-video-info flex">
+							<text  class="text-clamp">{{item.user_nickname}}</text>
+							<u-icon color="#999" name="eye" size="30" v-if="item.viewers && item.islive==1"></u-icon>
+							<view v-if="item.islive==1">{{numberToK(item.viewers)}}</view>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+		<u-empty
+			v-if="liveList.length == 0"
+			mode="data"
+			width="474"
+			height="312"
+			textSize="28"
+			marginTop="100"
+			:text="$t('common.nodata')"
+			icon="/static/image/common/nodata.png"
+		>
+		</u-empty>
+		<!-- <u-empty text="暂无直播"  v-if="liveList.total == 0" src="/static/images/competition/none.png" icon-size="400" mode="list"></u-empty> -->
+	</view>
+</template>
+
+<script>
+import { numberToK } from '@/utils/util'
+	export default {
+		data() {
+			return {
+				liveList: []
+			}
+		},
+		computed: {
+			hotList() {
+				return this.liveList.filter(item => {
+					return item.ishot == 1
+				})
+			}
+		},
+		mounted() {
+		},
+		methods:{
+			getList(){
+				// 正在直播
+        //  type   1  无人直播 0 主播直播
+        // islive  1  正在直播 0 未开始
+        // ishot  1热门直播
+				let data = {
+          type: 1,
+				}
+				uni.$u.http.get('/api/live_streaming/getLiveListold', {params:data}).then(res => {
+					this.liveList = res.data || []
+				})
+			},
+			numberToK(v) {
+				return numberToK(v)
+			},
+			formatDate(value) {
+				var date1 = this.$common.parseTime(value * 1000, '{y}/{m}/{d} {h}:{i}:{s}')
+				var date = new Date(date1 + ' UTC+5:30');
+				var weekNum = new Date().getDay()
+				let week = ""
+				switch (weekNum) {
+					case 0:
+						week = "Sun";
+						break;
+					case 1:
+						week = "Mon";
+						break;
+					case 2:
+						week = "Tue";
+						break;
+					case 3:
+						week = "Wed";
+						break;
+					case 4:
+						week = "Thu";
+						break;
+					case 5:
+						week = "Fri";
+						break;
+					case 6:
+						week = "Sat";
+						break;
+				}
+				var MonthNum = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1)
+				let Month = ''
+				switch (MonthNum) {
+					case 1:
+						Month = "Jan";
+						break;
+					case 2:
+						Month = "Feb";
+						break;
+					case 3:
+						Month = "Mar";
+						break;
+					case 4:
+						Month = "Apr";
+						break;
+					case 5:
+						Month = "May";
+						break;
+					case 6:
+						Month = "Jun";
+						break;
+					case 7:
+						Month = "Jul";
+						break;
+					case 8:
+						Month = "Aug";
+						break;
+					case 9:
+						Month = "Sept";
+						break;
+					case 10:
+						Month = "Oct";
+						break;
+					case 11:
+						Month = "Nov";
+						break;
+					case 12:
+						Month = "Dec";
+						break;
+				}
+				let day = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate())
+				// this.week = week
+				// this.month = Month
+				// this.day = day
+				var hours = date.getHours();
+				var minutes = date.getMinutes();
+				var ampm = hours >= 12 ? 'PM' : 'AM';
+				if (hours != 12) {
+          hours = hours % 12;
+        }
+        if (hours == 12 && minutes) {
+          hours = hours % 12;
+          ampm = 'PM'
+        }
+        hours = hours < 10 ? "0" + hours : hours;
+				minutes = minutes < 10 ? '0' + minutes : minutes;
+				// var strTime = week + ',' + day + Month + '.' + 'Watch live in' + hours + ':' + minutes + ' ' + ampm;
+				var strTime = this.$t('match.lab92') + ' ' + hours + ':' + minutes + ' ' + ampm;
+				return strTime;
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+.zhezao {
+		background: rgba(0, 0, 0, 0.5);
+		position: absolute;
+		top: 0;
+		left: 0;
+		z-index: 2;
+		color: #fff;
+		text-align: center;
+		line-height: 1;
+		padding: 10rpx 6rpx;
+		border-radius: 6rpx;
+		font-size: 16rpx;
+		white-space: nowrap;
+	}
+	.live-icon {
+		position: absolute;
+		right: 10rpx;
+		bottom: 160rpx;
+		width: 60rpx;
+		height: 32rpx;
+	}
+	.list {
+		padding: 0 18rpx 140rpx;
+		// padding-top: 6vh;
+	}
+	.list-head {
+		overflow: hidden;
+		margin-top: 20rpx;
+		border-radius: 12rpx;
+		background-color: white;
+		.list-title {
+			padding: 16rpx 12rpx;
+			background: url(/static/image/news/hot-title.png)left top / 290rpx 100% no-repeat;
+			// image {
+			// 	width: 28rpx;
+			// 	height: 32rpx;
+			// 	margin-right: 12rpx;
+			// }
+			text {
+				color: #fff;
+				font-size: 28rpx;
+			}
+		}
+	}
+	.list-list-li{
+		margin-right: 20rpx;
+		image {
+			width: 72rpx;
+			height: 72rpx;
+			margin: 0 auto;
+			display: block;
+			border-radius: 50%;
+			margin-bottom: 10rpx;
+		}
+		view {
+			max-width: 99%;
+		}
+	}
+	.list-list {
+		padding: 0 8rpx;
+		margin-top: 24rpx;
+		margin-bottom: 24rpx;
+		width: 100%;
+		overflow: auto;
+	}
+	.detail-title {
+		margin-top: 32rpx;
+		font-weight: bold;
+		image {
+			width: 40rpx;
+			height: 40rpx;
+			margin-right: 16rpx;
+		}
+		text {
+			color: #333;
+			font-size: 32rpx;
+		}
+	}
+	.detail-video-li {
+		overflow: hidden;
+		margin-top: 20rpx;
+		position: relative;
+		width: calc(100% / 2 - 9rpx);
+		border-radius: 12rpx;
+		background-color: white;
+		.loading-list-img {
+			width: 100%;
+			height: 176rpx;
+			display: block;
+		}
+    .img_box {
+      position: relative;
+    }
+    .home_logo, .away_logo {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 90rpx;
+      height: 90rpx;
+      border-radius: 50%;
+    }
+    .home_logo {
+      left: 30rpx;
+    }
+    .away_logo {
+      right: 30rpx;
+    }
+		.detail-video-content {
+			padding: 16rpx;
+		
+			.detail-video-content-logo {
+				width: 40rpx;
+				height: 40rpx;
+				border-radius: 50%;
+				margin-right: 24rpx;
+			}
+		
+			.detail-video-title {
+				width: 99%;
+				height: 80rpx;
+				color: #333;
+				font-size: 28rpx;
+			}
+		}
+		
+		.detail-video-info {
+			font-size: 24rpx;
+			flex: 1;
+			image {
+				width: 24rpx;
+				height: 24rpx;
+				margin-right: 6rpx;
+			}
+		
+			text {
+				flex: 1;
+				width: 100rpx;
+				color: #9193B4;
+		
+			}
+		
+			view {
+				
+				color: #999;
+			}
+		}
+	}
+	.detail-video-right {
+		flex: 1;
+		min-width: 100px;
+	}
+</style>

pages/Live/compontent/comingList.vue

@@ -0,0 +1,172 @@
+<!-- 推荐 -->
+<template>
+	<view class="coming">
+		<u-collapse :value="todayListLength ? [] : ['Docs guide']">
+      <u-collapse-item
+				:border="false"
+        :title="$t('live.lab')"
+        name="Docs guide">
+				<div class="live-box">
+					<div class="item" @click="toUrlLive(item)" v-for="item in comingList" :key="item.id">
+						<div class="time">{{ (item.scheduled) }}<div class="text"></div></div>
+						<div class="section">
+							<div class="match-name" style="height: 32rpx">
+								<div class="text-clamp">{{ item.title }}</div>
+							</div>
+							<div class="match">
+								<div class="match-name">
+								<u--image :src="item.home_logo" shape="circle" width="36rpx" height="36rpx"></u--image>
+									<div class="text-clamp">{{ item.home_name }}</div>
+								</div>
+								<div class="score">-</div>
+							</div>
+							<div class="match">
+								<div class="match-name">
+									<u--image :src="item.away_logo" shape="circle" width="36rpx" height="36rpx"></u--image>
+									<div class="text-clamp">{{ item.away_name }}</div>
+								</div>
+								<div class="score">-</div>
+							</div>
+						</div>
+					</div>
+					<div class="right-box">
+						<u-icon name="arrow-right" @click="toMatch" color="#000" :bold="true"></u-icon>
+					</div>
+				</div>
+      </u-collapse-item>
+    </u-collapse>
+	</view>
+</template>
+<script>
+import { parseTime } from '@/utils/util'
+	export default {
+		props: {
+			comingList: {
+				default: []
+			},
+			todayListLength: {
+				default: 0
+			}
+		},
+		data() {
+			return {
+			}
+		},
+		methods: {
+			toMatch() {
+      	sessionStorage.setItem('matchTypeSign', 'upcoming')
+				uni.switchTab({
+					url: '/pages/Match/Match?type=1'
+				})
+			},
+			toUrlLive(item) {
+				uni.navigateTo({
+					url: '/pages/Match/match-detail?id=' + item.id
+				})
+			},
+			parseTime(t) {
+				return parseTime(t, '{m}-{d} {h}:{i}')
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+.coming {
+	background-color: #fff;
+}
+.live-box {
+	display: flex;
+	align-items: center;
+	flex-wrap: nowrap;
+	overflow-x: auto;
+	padding: 10rpx 0 22rpx;
+	background-color: #f3f3f7;
+	.time {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		font-size: 12rpx;
+		color: #999999;
+		padding: 11rpx 14rpx 7rpx 20rpx;
+		line-height: 28rpx;
+		box-shadow: 0px 2px 6px 1px rgba(51,51,51,0.06);
+		.text {
+			font-size: 22rpx;
+		}
+	}
+	.item {
+		white-space: nowrap;
+		word-break: keep-all;
+		width: 320rpx;
+		min-width: 320rpx;
+		border-radius: 6rpx;
+		background-color: #fff;
+		font-size: 20rpx;
+		color: #999999;
+		box-shadow: 0px 2px 6px 1px rgba(51, 51, 51, 0.10);
+    &+.item {
+      margin-left: 16rpx;
+    }
+	}
+	.section {
+		padding: 11rpx 17rpx;
+		background-color: #fff;
+	}
+	.match-name {
+		display: flex;
+		align-items: center;
+		.u-transition {
+			margin-right: 18rpx;
+		}
+	}
+	.match {
+		margin-top: 10rpx;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		.match-name {
+			font-size: 28rpx;
+			width: 80%;
+			color: rgba(51, 51, 51, 1);
+		}
+		.score {
+			color: #333333;
+			font-weight: bold;
+		}
+	}
+	.right-box {
+		height: 186rpx;
+    background-color: #fff;
+    border-radius: 6rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 50rpx;
+		margin-left: 16rpx;
+	}
+}
+/deep/ .u-cell__body {
+	padding: 20rpx 24rpx;
+	.u-cell__title-text {
+		color: #333;
+		font-size: 30rpx;
+		font-weight: bold;
+		line-height: 42rpx;
+	}
+  .u-icon--right {
+    .u-icon__icon {
+      font-size: 32rpx !important;
+    }
+  }
+	
+}
+/deep/ .u-line {
+	display: none;
+}
+/deep/ .u-collapse-item__content {
+	.u-collapse-item__content__text {
+		padding: 0;
+	}
+}
+</style>

pages/Live/compontent/cricketTab.vue

@@ -0,0 +1,339 @@
+<!-- 足球 -->
+<template>
+	<view class="list">
+		<view class="list-head" v-if="hotList.length != 0">
+			<view class="list-title flex-start">
+				<text>{{$t('live.anchor')}}</text>
+			</view>
+			<view class="list-list flex-start">
+				<view class="list-list-li" v-for="(item,index) in hotList" :key="index">
+					<image :src="item.avatar" mode=""></image>
+					<view class="text-clamp">{{item.user_nickname}}</view>
+				</view>
+			</view>
+		</view>
+		<view class="detail-title flex-start">
+			<image src="/static/image/live/detail01.png" mode=""></image>
+			<text style="">{{$t('live.title')}}</text>
+		</view>
+		<view class="detail-video-list flex" style="flex-wrap: wrap;">
+			<view class="detail-video-li" v-for="(item,index) in liveList" :key="index" @click="$toUrl(`./live-detail?id=${item.live_id}&ID=${item.id}`)">
+				<div v-if="item.islive==0" class="zhezao">{{formatDate(item.starttime)}}</div>
+        <div class="img_box">
+					<u--image :showLoading="true" :src="(item.home_logo && item.away_logo) ? item.bottom : item.thumb" width="100%" height="176rpx">
+						<template v-slot:loading>
+							<image class="loading-list-img" src="/static/image/common/live-list-bg.png"></image>
+						</template>
+					</u--image>
+					<image v-if="item.home_logo && item.away_logo" class="home_logo" :src="item.home_logo" mode="aspectFill" alt=""></image>
+					<image v-if="item.home_logo && item.away_logo" class="away_logo" :src="item.away_logo" mode="aspectFill" alt=""></image>
+				</div>
+				<image v-if="item.islive==1" src="/static/image/live/live-icon.png" mode="" class="live-icon"></image>
+				<view class="detail-video-content ">
+					<view class="detail-video-title text-clamp2">
+						{{item.title}}
+					</view>
+					<view class="detail-video-right flex">
+						<image class="detail-video-content-logo" :src="item.avatar" mode="aspectFill"></image>
+						<view class="detail-video-info flex">
+							<text  class="text-clamp">{{item.user_nickname}}</text>
+							<u-icon color="#999" name="eye" size="30" v-if="item.viewers && item.islive==1"></u-icon>
+							<view v-if="item.islive==1">{{numberToK(item.viewers)}}</view>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+		<u-empty
+			v-if="liveList.length == 0"
+			mode="data"
+			width="474"
+			height="312"
+			textSize="28"
+			marginTop="100"
+			:text="$t('common.nodata')"
+			icon="/static/image/common/nodata.png"
+		>
+		</u-empty>
+		<!-- <u-empty text="暂无直播"  v-if="liveList.total == 0" src="/static/images/competition/none.png" icon-size="400" mode="list"></u-empty> -->
+	</view>
+</template>
+
+<script>
+import { numberToK } from '@/utils/util'
+	export default {
+		data() {
+			return {
+				liveList: []
+			}
+		},
+		computed: {
+			hotList() {
+				return this.liveList.filter(item => {
+					return item.ishot == 1
+				})
+			}
+		},
+		mounted() {
+		},
+		methods:{
+			getList(){
+				// 正在直播
+        //  type   1  无人直播 0 主播直播
+        // islive  1  正在直播 0 未开始
+        // ishot  1热门直播
+				let data = {
+          type: 0,
+				}
+				uni.$u.http.get('/api/live_streaming/getLiveListold', {params:data}).then(res => {
+					this.liveList = res.data || []
+				})
+			},
+			numberToK(v) {
+				return numberToK(v)
+			},
+			formatDate(value) {
+				var date1 = this.$common.parseTime(value * 1000, '{y}/{m}/{d} {h}:{i}:{s}')
+				var date = new Date(date1 + ' UTC+5:30');
+				var weekNum = new Date().getDay()
+				let week = ""
+				switch (weekNum) {
+					case 0:
+						week = "Sun";
+						break;
+					case 1:
+						week = "Mon";
+						break;
+					case 2:
+						week = "Tue";
+						break;
+					case 3:
+						week = "Wed";
+						break;
+					case 4:
+						week = "Thu";
+						break;
+					case 5:
+						week = "Fri";
+						break;
+					case 6:
+						week = "Sat";
+						break;
+				}
+				var MonthNum = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1)
+				let Month = ''
+				switch (MonthNum) {
+					case 1:
+						Month = "Jan";
+						break;
+					case 2:
+						Month = "Feb";
+						break;
+					case 3:
+						Month = "Mar";
+						break;
+					case 4:
+						Month = "Apr";
+						break;
+					case 5:
+						Month = "May";
+						break;
+					case 6:
+						Month = "Jun";
+						break;
+					case 7:
+						Month = "Jul";
+						break;
+					case 8:
+						Month = "Aug";
+						break;
+					case 9:
+						Month = "Sept";
+						break;
+					case 10:
+						Month = "Oct";
+						break;
+					case 11:
+						Month = "Nov";
+						break;
+					case 12:
+						Month = "Dec";
+						break;
+				}
+				let day = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate())
+				// this.week = week
+				// this.month = Month
+				// this.day = day
+				var hours = date.getHours();
+				var minutes = date.getMinutes();
+				var ampm = hours >= 12 ? 'PM' : 'AM';
+				if (hours != 12) {
+          hours = hours % 12;
+        }
+        if (hours == 12 && minutes) {
+          hours = hours % 12;
+          ampm = 'PM'
+        }
+        hours = hours < 10 ? "0" + hours : hours;
+				minutes = minutes < 10 ? '0' + minutes : minutes;
+				// var strTime = week + ',' + day + Month + '.' + 'Watch live in' + hours + ':' + minutes + ' ' + ampm;
+				var strTime = this.$t('match.lab92') + ' ' + hours + ':' + minutes + ' ' + ampm;
+				return strTime;
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+.zhezao {
+		background: rgba(0, 0, 0, 0.5);
+		position: absolute;
+		top: 0;
+		left: 0;
+		z-index: 2;
+		color: #fff;
+		text-align: center;
+		line-height: 1;
+		padding: 10rpx 6rpx;
+		border-radius: 6rpx;
+		font-size: 16rpx;
+		white-space: nowrap;
+	}
+	.live-icon {
+		position: absolute;
+		right: 10rpx;
+		bottom: 160rpx;
+		width: 60rpx;
+		height: 32rpx;
+	}
+	.list {
+		padding: 0 18rpx 140rpx;
+		// padding-top: 6vh;
+	}
+	.list-head {
+		overflow: hidden;
+		margin-top: 20rpx;
+		border-radius: 12rpx;
+		background-color: white;
+		.list-title {
+			padding: 16rpx 12rpx;
+			background: url(/static/image/news/hot-title.png)left top / 290rpx 100% no-repeat;
+			// image {
+			// 	width: 28rpx;
+			// 	height: 32rpx;
+			// 	margin-right: 12rpx;
+			// }
+			text {
+				color: #fff;
+				font-size: 28rpx;
+			}
+		}
+	}
+	.list-list-li{
+		margin-right: 20rpx;
+		image {
+			width: 72rpx;
+			height: 72rpx;
+			margin: 0 auto;
+			display: block;
+			border-radius: 50%;
+			margin-bottom: 10rpx;
+		}
+		view {
+			max-width: 99%;
+		}
+	}
+	.list-list {
+		padding: 0 8rpx;
+		margin-top: 24rpx;
+		margin-bottom: 24rpx;
+		width: 100%;
+		overflow: auto;
+	}
+	.detail-title {
+		margin-top: 32rpx;
+		font-weight: bold;
+		image {
+			width: 40rpx;
+			height: 40rpx;
+			margin-right: 16rpx;
+		}
+		text {
+			color: #333;
+			font-size: 32rpx;
+		}
+	}
+	.detail-video-li {
+		overflow: hidden;
+		margin-top: 20rpx;
+		position: relative;
+		width: calc(100% / 2 - 9rpx);
+		border-radius: 12rpx;
+		background-color: white;
+		.loading-list-img {
+			width: 100%;
+			height: 176rpx;
+			display: block;
+		}
+    .img_box {
+      position: relative;
+    }
+    .home_logo, .away_logo {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 90rpx;
+      height: 90rpx;
+      border-radius: 50%;
+    }
+    .home_logo {
+      left: 30rpx;
+    }
+    .away_logo {
+      right: 30rpx;
+    }
+		.detail-video-content {
+			padding: 16rpx;
+		
+			.detail-video-content-logo {
+				width: 40rpx;
+				height: 40rpx;
+				border-radius: 50%;
+				margin-right: 24rpx;
+			}
+		
+			.detail-video-title {
+				width: 99%;
+				height: 80rpx;
+				color: #333;
+				font-size: 28rpx;
+			}
+		}
+		
+		.detail-video-info {
+			font-size: 24rpx;
+			flex: 1;
+			image {
+				width: 24rpx;
+				height: 24rpx;
+				margin-right: 6rpx;
+			}
+		
+			text {
+				flex: 1;
+				width: 100rpx;
+				color: #9193B4;
+		
+			}
+		
+			view {
+				
+				color: #999;
+			}
+		}
+	}
+	.detail-video-right {
+		flex: 1;
+		min-width: 100px;
+	}
+</style>

pages/Live/compontent/detail-animation.vue

@@ -0,0 +1,18 @@
+<template>
+  <div>
+    <view style="overflow: hidden;">
+      <iframe style="width: 100%;" height="306" :src="livePath" frameborder="0"></iframe>
+    </view>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    livePath: {
+      default: ''
+    }
+  },
+}
+</script>
+<style lang="scss">
+</style>

pages/Live/compontent/detail-chat.vue

@@ -0,0 +1,867 @@
+<!-- 聊天 -->
+<template>
+	<view class="detail">
+		<view class="detail-tips flex-start">
+			<u-notice-bar bgColor="#ffffff" color="#000000" fontSize="15px" style="width: 100%;" mode="horizontal"
+				:text="system.announcement || ''"></u-notice-bar>
+		</view>
+		<img class="ad" v-if="roomInfo.adver_img_two" @click="adClick(roomInfo)" :src="roomInfo.adver_img_two" alt="">
+		<view class="detail-room" :class="{'game':  liveType == 'game'}">
+			<scroll-view class="scroll-view" scroll-y="true" style="height: 100%;" :scroll-top="scrollTop">
+				<view class="messageList" id="message-scroll">
+					<view class="msgLi bg1">
+						<view style="color: rgb(220, 60, 35);">
+							{{system.live_notice}}
+						</view>
+					</view>
+					<div class="msgLi flex" v-if="roomInfo.prompt">
+						<div class="bg2 title"><a class="href" target="_target" :href="roomInfo.prompt">{{ roomInfo.prompt }}</a></div>
+					</div>
+					<div class="msgLi flex" v-if="roomInfo.title">
+						<div class="bg2 title">{{ roomInfo.title }}</div>
+					</div>
+					<!-- <view class="msgLi bg2" v-if="roomInfo.prompt">
+						<view style="color: #060137">
+							<u-notice-bar icon="" bgColor="transparent" color="#060137" fontSize="24" style="width: 100%;" mode="horizontal"
+							:text="roomInfo.prompt || ''"></u-notice-bar>
+						</view>
+					</view> -->
+					<view class="msgLi" v-for="(item,index) in messageList" :key="index" :id="`view${index}`">
+						<view class="msg-box" v-if="item.normal && item.type == 105">
+							<u--image
+								class="border"
+								:showLoading="true"
+								:src="getImg(item) || '/static/image/match/[email protected]'"
+								width="30px"
+								height="30px"
+								shape="circle"
+							></u--image>
+							<div>
+								<div class="nick">{{item.nick}}</div>
+								<div class="text" v-html="getText(item.normal.text)"></div>
+							</div>
+						</view>
+						<view v-if="item.normal && item.type == 102" style="color: rgb(220, 60, 35);">
+							<view class="f9ae3d">
+								{{item.nick}} {{item.normal.text}}
+							</view>
+							<!-- <view class="flex-start anchor" v-else>
+								<image src="/static/image/live/anchor.png" mode=""></image>
+								{{item.nick}}：{{item.normal.text}}
+							</view> -->
+						</view>
+
+					</view>
+				</view>
+			</scroll-view>
+		</view>
+		<div class="detail-input" v-if="!inputShow">
+			<div class="flex">
+				<div class="input-box" @click="inputShowFun">
+					{{ $t('live.enter') }}
+					<img class="live-6" src="/static/image/live/live-6.png" alt="">
+				</div>
+				<div class="img-box" @click="gotoLike">
+					<img class="live-8" src="/static/image/live/live-8.png" alt="">
+					<div class="like-box" v-for="(ite,ind) in imgData" :key="ind" v-html="ite"></div>
+					<div class="like-bg"></div>
+				</div>
+				<div class="img-box" @click="gotoLike1">
+					<img class="live-8" src="/static/image/live/live-9.png" alt="">
+					<div class="like-box" v-for="(ite,ind) in imgData1" :key="ind" v-html="ite"></div>
+					<div class="like-bg"></div>
+				</div>
+			</div>
+		</div>
+		<div class="bg" v-if="inputShow" @click.stop="inputHide">
+		</div>
+		<view class="detail-input" v-if="inputShow">
+			<view class="eyes flex-start" v-if="eyes" :class="{active:eyes1}"
+				@click="$store.state.eyes1 = !$store.state.eyes1">
+				<image :src="!eyes1? '/static/image/live/tou1.png' : '/static/image/live/tou2.png'" mode=""></image>
+				<!-- Block entry messages -->
+				{{ $t('live.lab52') }}
+			</view>
+			<view class="flex box1">
+				<image src="/static/image/live/live-7.png" style="width: 24px;height: 20px;margin-right: 5px;"
+					mode="" @click="eyes = !eyes"></image>
+					<view class="detail-input-i flex">
+						<input type="text" :focus="focusAuto" v-model="content" @focus="focus" value="" :placeholder="$t('live.enter')" />
+					</view>
+					<image class="emoji-btn" src="/static/image/live/live-6.png" mode="" @click="emoji = !emoji">
+					</image>
+					<image class="send" @click="setMessage" src="/static/image/send.svg" mode="">
+					</image>
+			</view>
+			<view class="TUI-Emoji" v-if="emoji">
+				<view v-for="(item, index) in emojiList" :key="index" class="TUI-emoji-image">
+					<image :data-name="item.emojiName" class="emoji-image" :src="item.url" @tap="handleEnterEmoji">
+					</image>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import {
+		emojiName,
+		emojiUrl,
+		emojiMap
+	} from '@/config/emojiMap';
+import bus from '@/utils/bus'
+	export default {
+		props: ['userInfo', 'giftList', 'roomInfo', 'liveType'],
+		data() {
+			return {
+				country_code: '',
+				searchname: '',
+				thumbnail: '',
+				region: false,
+				loginShow: false,
+				seconds: 60,
+				searchValue: '',
+				region: false,
+				isAgree: true,
+				eyes: false,
+				emoji: false,
+				show: false,
+				inputShow: false,
+				focusAuto: false,
+				tips: 'get code', //验证码倒计时
+				type: 1,
+				scrollTop: 0,
+				emojiList: [],
+				mask: {
+					background: 'rgba(0, 0, 0, 0.1)'
+				},
+				figtIndex: null,
+				content: '',
+				current: 0,
+				list: [{
+						cate_name: '礼物'
+					}
+					// , {
+					// 	cate_name: '礼包'
+					// }
+				],
+				messageList: [],
+				countryCode: [], //区号
+				tournamentList: [],
+				imgData: [],
+				imgData1: [],
+				imgDataTimer: null
+			}
+
+		},
+		beforeMount() {
+			for (let i = 0; i < emojiName.length; i++) {
+				this.emojiList.push({
+					emojiName: emojiName[i],
+					url: emojiUrl + emojiMap[emojiName[i]]
+				});
+			}
+		},
+		computed: {
+			system() {
+				return this.$store.state.system
+			},
+			isLogin() {
+				return this.$store.state.isLogin
+			},
+			infos() {
+				return this.$store.state.info
+			},
+			eyes1() {
+				return this.$store.state.eyes1
+			},
+			show1: {
+				get() {
+					return this.$store.state.show
+				},
+				set() {
+					// this.$store.state.info.midMask = !this.$store.state.info.midMask
+				}
+			}
+		},
+		watch: {},
+		mounted() {
+			let that = this;
+			uni.$TUIKit.on(uni.$TUIKitEvent.MESSAGE_RECEIVED, that.$onMessageReceived, that);
+			uni.$TUIKit.on(uni.$TUIKitEvent.MESSAGE_READ_BY_PEER, that.$onMessageReadByPeer, that);
+			bus.$on('onMessageReceived', this.$onMessageReceived)
+		},
+		destroyed() {
+			// 一定要解除相关的事件绑定
+			uni.$TUIKit.off(uni.$TUIKitEvent.MESSAGE_RECEIVED, this.$onMessageReceived);
+			bus.$off('onMessageReceived', this.$onMessageReceived)
+		},
+		methods: {
+			/* 输入框获取焦点 如果打开了表情框需关闭 */
+			focus() {
+				if (this.emoji) {
+					this.emoji = false
+				}
+			},
+
+			handleEnterEmoji(event) {
+				this.content += event.currentTarget.dataset.name;
+				// console.log(event.currentTarget.dataset.name);
+				// this.$emit('enterEmoji', {
+				// 	detail: {
+				// 		message: event.currentTarget.dataset.name
+				// 	}
+				// });
+			},
+			// 收到的消息
+			$onMessageReceived(value) {
+				// 若需修改消息，需将内存的消息复制一份，不能直接更改消息，防止修复内存消息，导致其他消息监听处发生消息错误
+				var event = value;
+				let that = this;
+				let list = [];
+				for (var i = 0; i < event.data.length; i++) {
+					let item = event.data[i];
+					if (item.conversationID === item.conversationType + that.roomInfo.id) {
+						var payload = JSON.parse(item.payload.data);
+						payload.nick = item.nick || item.from;
+
+						if (payload.type == 102 && !that.eyes1 && payload.nobel) {
+							payload.normal = {
+								text: '',
+								is_room: 0
+							};
+							payload.normal.is_room = payload.nobel.is_room;
+							payload.normal.text = 'enters the live room';
+						}
+						if (payload.type != 102) {
+							that.$emit('addMesg', payload.normal.text)
+						}
+						/* 判断进入房间 */
+						list.push(Object.assign(payload));
+					}
+				}
+				that.messageList = that.messageList.concat(list);
+				this.$emit('uodateMsg', that.messageList)
+				this.$nextTick(() => {
+					that.scrollToButtom();
+				})
+			},
+			scrollToButtom() {
+				let that = this;
+				const query = uni.createSelectorQuery().in(this);
+				let nodesRef = query.select('#message-scroll');
+				nodesRef.boundingClientRect(res => {
+						if (res) {
+							that.scrollTop = res.height;
+						}
+					})
+					.exec();
+			},
+			close() {
+				console.log('close')
+				this.region = false
+				// console.log('close');
+			},
+			// 消息已读更新
+			$onMessageReadByPeer() {
+				// this.setData({
+				// 	messageList: this.messageList
+				// });
+			},
+			// change(e) {
+			// 	// this.current = e
+			// },
+			// 发送消息
+			setMessage() {
+				if (!this.content.trim()) return
+				if (JSON.stringify(this.infos) == '{}') {
+					// return this.$toUrl('/pages/login/index')
+				}
+				let msg = {
+					type: 105,
+					normal: {
+						isXCBarrage: 0, //是否是气泡 barrageIndex
+						xcBarrageUrl: '', //气泡的图片路径
+						xcBarrageType: '', //图片路径
+						text: this.content,
+						exp_icon: this.infos.exp_icon,
+						is_guard: this.infos.is_guard,
+						is_room: this.infos.id == this.roomInfo.id ? 1 : 0,
+						guard_icon: this.infos.is_guard == 1 ? this.infos.guard.icon : ''
+					}
+				}
+				let to = JSON.stringify(this.roomInfo.id)
+				const message = uni.$TUIKit.createCustomMessage({
+					to,
+					conversationType: 'GROUP',
+					payload: {
+						data: JSON.stringify(msg)
+					}
+				});
+				this.$sendTIMMessage(message);
+			},
+			$sendTIMMessage(message) {
+				let that = this;
+				const SDKAppID = getApp().globalData.SDKAppID;
+				uni.$TUIKit.sendMessage(message).then((res) => {
+					// console.log(res);
+					// this.$emit('addMesg',that.content)
+					let arr = {
+						data: [res.data.message]
+					}
+					that.content = '';
+					this.$onMessageReceived(arr);
+					uni.$aegis.reportEvent({
+						name: 'sendMessage',
+						ext1: 'sendMessage-success',
+						ext2: 'uniTuikitExternal',
+						ext3: `${SDKAppID}`,
+					})
+				}).catch((error) => {
+					console.log(error);
+					uni.$aegis.reportEvent({
+						name: 'sendMessage',
+						ext1: `sendMessage-failed#error: ${error}`,
+						ext2: 'uniTuikitExternal',
+						ext3: `${SDKAppID}`,
+					})
+				})
+				// this.setData({
+				// 	displayFlag: ''
+				// });
+			},
+			getText(str) {
+				// let str = 'jfkdsj[咒骂]dsjfkljsa[憨笑]哈哈哈，[惊恐]'
+				let exp = /\[(.*?)\]/g; //匹配[*] 大括号里面任意内容的正则
+				let arr = str.match(exp); //字符串匹配出来的数组
+				// console.log(arr);
+				if (!arr) return str;
+
+				this.emojiList.forEach((item1, index) => {
+					arr.map(item => {
+						// console.log(item1);
+						if (item1.emojiName === item) {
+							str = str.replace(item,
+								`<img src='${item1.url}' style="width:20px;height:20px">`
+							);
+						}
+						// console.log(item);
+						// let key = `p${item.substr(1, item.length - 2)}`;  //记录大括号里的值 用作id 方便取值
+						// if (!this.salaryVars.hasOwnProperty(key)) this.$set(this.salaryVars, key, '');
+					}); //循环遍历
+				})
+				// let arrNum = 取出所有正则匹配值并转换为input
+
+				// console.log(str);
+				return str;
+			},
+			getCode(code) {
+				let mobile = (this.from.code1).slice(1) + '-' + this.from.mobile
+				if (!this.from.mobile) return uni.$u.toast('The cell phone number is empty');
+				if (this.$refs.uCode.canGetCode) {
+					uni.$u.http.get('/api/user/getCode', {
+						params: {
+							type: code,
+							mobile: mobile
+						}
+					}).then(res => {
+						uni.$u.toast(this.$t('login.lab13'));
+						this.$refs.uCode.start();
+
+					})
+				} else {
+					uni.$u.toast(this.$t('common.lab3'));
+				}
+			},
+			codeChange(text) {
+				this.tips = text;
+			},
+			change(e) {
+				this.current = e.index
+			},
+			getImg(item) {
+				if (this.isLogin) {
+					if (item.nick == this.infos.user_nickname) {
+						return this.infos.avatar
+					}
+				}
+				return ''
+			},
+			inputShowFun() {
+				if (this.isLogin != 1) {
+					this.$toUrl('/pages/login/login')
+					return
+				}
+				this.inputShow = true
+				this.imgData = []
+				this.imgData1 = []
+				this.$nextTick(() => {
+					this.focusAuto = true
+				})
+			},
+			inputHide() {
+				this.inputShow = false
+				this.eyes = false
+				this.emoji = false
+				this.content = ''
+			},
+			gotoLike() {
+				var num = Math.floor(Math.random() * 10);
+				var str = '<span class="parentImg parentImg' + num + '"><img src="/static/image/live/live-8.png"></span>';
+				this.imgData.push(str);
+				this.imgDataTimerFun()
+      },
+			gotoLike1() {
+				var num = Math.floor(Math.random() * 10);
+				var str = '<span class="parentImg parentImg' + num + '"><img src="/static/image/live/live-9.png"></span>';
+				this.imgData1.push(str);
+				this.imgDataTimerFun()
+      },
+			imgDataTimerFun() {
+				this.imgDataTimer && clearTimeout(this.imgDataTimer)
+				this.imgDataTimer = setTimeout(() => {
+					this.imgData = []
+					this.imgData1 = []
+				}, 3000)
+			},
+			adClick(info) {
+				if (info.adver_url_two) {
+					uni.$u.http
+        .post("/api/live_streaming/click_adv", {
+					type: this.liveType == 'game' ? 7 : 4,
+					id: info.id,
+          url: info.adver_url_two
+        })
+        .then((res) => {
+        }).finally(() => {
+        });
+					window.open(info.adver_url_two)
+				}
+			}
+		},
+	}
+</script>
+
+<style lang="scss">
+	body {
+		width: 100% !important;
+		height: 100% !important;
+		overflow: hidden !important;
+	}
+	.detail-room {
+		height: calc(100vh - 850rpx);
+		padding-bottom: 60px;
+	}
+	.game {
+		height: calc(100vh - 740rpx);
+	}
+	@media screen and (orientation: landscape) {
+		.detail-room {
+			height: 50vh;
+		}
+	}
+	.scroll-view {
+		// background-color: #fff;
+		// border-radius: 10px;
+	}
+	.msg-box {
+		display: flex;
+		align-items: center;
+		.border {
+			margin-right: 5px;
+      border: 1px solid #cc2900;
+      border-radius: 50%;
+		}
+		.nick {
+			font-size: 14px;
+			font-weight: 700;
+			color: #000000;
+		}
+		.text {
+			font-size: 13px;
+			font-weight: 400;
+			color: #000000;
+		}
+	}
+	.TUI-Emoji {
+		display: flex;
+		justify-content: flex-start;
+		flex-wrap: wrap;
+		width: 100%;
+		height: 480rpx;
+		overflow-y: scroll;
+	}
+
+	.TUI-emoji-image {
+		width: 9vw;
+		height: 9vw;
+		margin: 2vw;
+	}
+
+	.emoji-image {
+		width: 100%;
+		height: 100%;
+	}
+
+	.btn1 {
+		color: #fff;
+		height: 58rpx;
+		width: 160rpx;
+		line-height: 58rpx;
+		text-align: center;
+		border-radius: 100rpx;
+		background: #DC3C23;
+	}
+
+	.messageList {
+		padding: 0 20rpx;
+		.bg1 {
+			background-image: url('/static/image/live/bg1.png');
+			background-size: 100% 100%;
+			background-repeat: no-repeat;
+			padding: 5px 6px;
+		}
+		.bg2 {
+			background-image: url('/static/image/live/bg2.png');
+			background-size: 100% 100%;
+			background-repeat: no-repeat;
+			overflow: hidden;
+			&.title {
+				padding: 5px 6px;
+				.href {
+					color: rgb(0, 0, 238);
+					word-break: break-all;
+				}
+			}
+		}
+		.msgLi {
+			color: #333;
+			font-size: 28rpx;
+			margin-top: 12rpx;
+			line-height: 36rpx;
+
+			text {
+				color: #2C9CED;
+			}
+			.f9ae3d {
+				color: #f9ae3d;
+			}
+			.anchor {
+				image {
+					width: 64rpx;
+					height: 28rpx;
+				}
+			}
+
+		}
+	}
+
+	.detail {
+		overflow: hidden;
+		position: relative;
+	}
+
+	.detail-tips {
+		padding: 9px 15rpx 15rpx;
+	}
+	.bg {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 50px;
+		z-index: 9997;
+		background-color: transparent;
+	}
+	.detail-input {
+		position: fixed;
+		bottom: 0;
+		right: 0;
+		left: 0;
+		z-index: 9999;
+  	background-color: #fff;
+		padding: 5px 15px;
+		.live-8 {
+			cursor: pointer;
+			width: 40px;
+			height: 40px;
+			margin-left: 7px;
+			display: block;
+		}
+		.input-box {
+			flex: 1;
+			background-color: #D9D9D9;
+			border-radius: 5px;
+			padding-left: 14px;
+			padding-right: 7px;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			color: #7F7F7F;
+			font-size: 15px;
+			height: 40px;
+			cursor: pointer;
+			.live-6 {
+				width: 26px;
+				height: 26px;
+			}
+		}
+		.img-box {
+			position: relative;
+			.like-bg {
+				position: absolute;
+				left: 0;
+				bottom: 0;
+				right: 0;
+				top: 0;
+				background-color: transparent;
+				z-index: 2;
+				cursor: pointer;
+			}
+		}
+		.box1 {
+			background-color: #F1F1F1;
+			border-radius: 6px;
+			padding: 0 14px;
+		}
+		.eyes {
+			position: absolute;
+			top: -90rpx;
+			left: 0;
+			color: #999;
+			font-size: 12px;
+			padding: 14px 10px;
+			width: 242px;
+			background: url('/static/image/live/tou-bg.png')center top / 100% 123% no-repeat;
+			image {
+				width: 12px;
+				height: 12px;
+				padding: 0px 11px;
+			}
+		}
+
+		.detail-input-i {
+			flex: 1;
+			font-size: 14px;
+			height: 40px;
+			padding-left: 6px;
+			input {
+				flex: 1;
+				// margin-left: 32rpx;
+			}
+		}
+		.emoji-btn {
+			width: 27px;
+			height: 27px;
+			margin: 0 26rpx;
+		}
+		.send {
+			width: 25px;
+			height: 25px;
+		}
+		.active {
+			color: rgb(227, 172, 114);
+		}
+	}
+	.swiper-item {
+		border: 2rpx solid #fff;
+		margin-top: 24rpx;
+		// width: calc(100% / 4);
+		flex: 0 0 24%;
+		text-align: center;
+		border-radius: 8rpx;
+
+		image {
+			width: 90rpx;
+			height: 90rpx;
+			margin: 0 auto;
+			display: block;
+		}
+
+		view {
+			color: #333;
+			font-size: 24rpx;
+		}
+
+		text {
+			color: #959DB0;
+			font-size: 20rpx;
+		}
+	}
+
+	.swiperItem {
+		flex-direction: row;
+		align-content: flex-start;
+
+		&::after {
+			content: '';
+			// width: 25%;
+			flex: 1;
+		}
+	}
+
+	.gift-content {
+		border-top: 2rpx solid #F1F1F1;
+		border-bottom: 2rpx solid #F1F1F1;
+	}
+
+	.gift-bottom {
+		font-size: 28rpx;
+		padding: 16rpx 28rpx;
+
+		image {
+			width: 26rpx;
+			height: 28rpx;
+			margin-right: 16rpx;
+		}
+
+		text {
+			color: #76809C;
+
+		}
+
+		.gift-btn {
+			color: #87390E;
+			padding: 16rpx 24rpx;
+			border-radius: 14rpx;
+			background: linear-gradient(90deg, #FFDFAB 0%, #E3AC72 100%);
+		}
+	}
+
+	.gitActive {
+		border: 2rpx solid #E3AC72;
+	}
+
+	.header-box {
+		padding: 11rpx 33rpx;
+
+		.close-icon {
+			width: 44rpx;
+			height: 44rpx;
+		}
+	}
+
+	.index {
+		overflow: hidden;
+		padding: 0 48rpx;
+		min-height: 100vh;
+		// background: url(../../static/image/login/newbg.jpg)center top / 100% 100% no-repeat;
+
+		.index-back {
+			image {
+				width: 50rpx;
+				height: 50rpx;
+				margin: 40rpx;
+			}
+		}
+	}
+
+	.agree {
+		width: 100vw;
+		text-align: center;
+		margin: 56rpx 0;
+		font-size: 24rpx;
+
+		image {
+			width: 40rpx;
+			height: 40rpx;
+			margin-right: 10rpx;
+		}
+
+		text {
+
+			color: rgb(220, 60, 35);
+		}
+	}
+
+	.back {
+		width: 40rpx;
+		height: 40rpx;
+		margin-top: 16rpx;
+	}
+
+	.input {
+		padding: 28rpx 0;
+		margin-top: 48rpx;
+
+		.input-left {
+			color: #fff;
+			width: 130rpx;
+			border-right: 2rpx solid #fff;
+		}
+
+		input {
+			flex: 1;
+			color: #fff;
+			font-size: 30rpx;
+			margin-left: 32rpx;
+		}
+
+		text {
+			color: #DC3C23;
+			font-size: 28rpx;
+		}
+
+		border-bottom: 2rpx solid #FFF;
+	}
+
+	.btn {
+		color: #fff;
+		text-align: center;
+		font-size: 36rpx;
+		padding: 20rpx 0;
+		border-radius: 100rpx;
+		// opacity: 0.3;
+		margin-top: 56rpx;
+		background-color: rgba(255, 255, 255, 0.7);
+	}
+
+	.btn-tab {
+		color: #fff;
+		font-size: 30rpx;
+		margin-top: 66rpx;
+	}
+
+	.btn-active {
+		background: linear-gradient(90deg, #FFDFAB 0%, #DC3C23 100%);
+	}
+
+	.inputCss {
+		/deep/ .inp {
+			.u--input__input {
+				color: #fff !important; //颜色在这里
+			}
+
+			// .u--input__right-icon__item {
+			// 	margin-top: 16rpx;
+			// }
+		}
+	}
+
+	.login {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		margin-top: 20rpx;
+	}
+
+	.popup {
+		width: 560rpx;
+		height: 72rpx;
+		background: rgba(0, 0, 0, 0);
+		z-index: 99;
+		position: absolute;
+		top: 20rpx;
+		left: 84rpx;
+	}
+	/deep/ .detail-tips {
+		.uicon-volume {
+			font-size: 18px !important;
+		}
+	}
+.ad {
+  display: block;
+  width: 100%;
+	margin-top: 6px;
+}
+</style>

pages/Live/compontent/detail-download.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="dialog" @click.stop="">
+    <img class="logo" src="/static/logo_big.png" alt="" />
+    <div class="text">
+      <!-- Download the Onecric app for a better live streaming experience of matches. -->
+      {{ $t('live.lab55') }}
+    </div>
+    <div class="brns">
+      <div class="btn ltn" @click="installClick">
+        <!-- Download -->
+        {{ $t('live.lab56') }}
+      </div>
+      <div class="btn rtn" @click="cancel">
+        <!-- Cancel -->
+        {{ $t('video.lab13') }}
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data () {
+    return {
+      
+    }
+  },
+  methods: {
+    cancel() {
+      this.$emit('cancel')
+    },
+    installClick() {
+				this.$toUrl('/download/google')
+			},
+  }
+}
+</script>
+<style lang="scss" scoped>
+.dialog {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 9999;
+  width: 283px;
+  background: rgba(0, 0, 0, .6);
+  border: 2.5px solid rgba(255,255,255,0.19);
+  border-radius: 15px;
+  box-shadow: 0px 5px 9.5px 0px rgba(0, 0, 0, .6);
+  padding: 15px 28px 28px;
+  color: #fff;
+  box-sizing: border-box;
+}
+.logo {
+  height: 24px;
+  display: block;
+  margin: 0 auto 15px;
+}
+.text {
+  font-size: 13px;
+  line-height: 16px;
+  text-align: center;
+  margin-bottom: 19px;
+}
+.brns {
+  display: flex;
+  align-items: center;
+  .btn {
+    flex: 1;
+    line-height: 27px;
+    text-align: center;
+    cursor: pointer;
+  }
+  .ltn {
+    border: 1px solid #ffffff;
+    border-radius: 6px;
+    font-size: 11px;
+    font-weight: bold;
+  }
+  .rtn {
+    font-size: 13px;
+  }
+}
+</style>

pages/Live/compontent/detail-follow.vue

@@ -0,0 +1,207 @@
+<template>
+  <div class="component" @click.stop="">
+    <div class="user flex" :class="{'dis': infos.id == userInfo.uid}">
+      <image
+        class="img"
+        :src="userInfo.avatar || '/static/image/common/[email protected]'"
+        @click="toUrlLive(userInfo.uid)"
+        mode="aspectFill"
+      ></image>
+      <div>
+        <div class="name">{{userInfo.user_nickname}}</div>
+        <div class="text">{{ $t('live.lab38') }}: {{userInfo.attention}}</div>
+      </div>
+      <div class="col" v-if="infos.id != userInfo.uid" @click.stop="attention(userInfo.is_attention)">{{ userInfo.is_attention == 1 ? $t('match.la38') : $t('match.la34') }}</div>
+    </div>
+    <div class="box">
+      <div class="item">
+        <div>
+          <u-icon @click="isLike" v-if="roomInfo.is_like != 1" color="#ffffff" name="heart-fill" size="27px"></u-icon>
+          <u-icon @click="isLike" v-if="roomInfo.is_like == 1" color="#e46d45" name="heart-fill" size="27px"></u-icon>
+        </div>
+        <div>
+          {{ numberToK(roomInfo.like_num) }}
+        </div>
+      </div>
+      <div class="item">
+        <div>
+          <img class="img" @click="copyText" src="/static/image/live/share.png" alt="">
+        </div>
+        <div>
+          {{ numberToK(roomInfo.share_num) || 0 }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { numberToK } from '@/utils/util'
+import NativeShare from 'nativeshare'
+export default {
+  props: {
+    userInfo: {
+      default: {}
+    },
+    roomInfo: {
+      default: {}
+    },
+    matchDetail: {
+      default: {}
+    }
+  },
+  data () {
+    return {
+      
+    }
+  },
+  computed: {
+    infos() {
+      return this.$store.state.info;
+    },
+  },
+  methods: {
+    /* 喜欢 */
+    isLike() {
+      if (this.$store.state.isLogin != 1) {
+        this.$toUrl('/pages/login/login')
+        return
+      }
+      uni.showLoading({
+        title: this.$t('common.lab'),
+      });
+      uni.$u.http
+        .post("/api/Member/live_like", {
+          id: this.roomInfo.id,
+          type: this.roomInfo.is_like == 1 ? 0 : 1
+        })
+        .then((res) => {
+          this.$emit('success')
+        }).finally(() => {
+          uni.hideLoading();
+        });
+    },
+    /* 关注 */
+    attention() {
+      if (this.$store.state.isLogin != 1) {
+        this.$toUrl('/pages/login/login')
+        return
+      }
+      uni.showLoading({
+        title: this.$t('common.lab'),
+      });
+      uni.$u.http
+        .post("/api/Member/attention", {
+          id: this.userInfo.uid,
+        })
+        .then((res) => {
+          this.$emit('success')
+        }).finally(() => {
+          uni.hideLoading();
+        });
+    },
+    copyText() {
+      if (this.$store.state.isLogin != 1) {
+        this.$toUrl('/pages/login/login')
+        return
+      }
+      this.nativeShare = new NativeShare()
+      var shareData = {
+          title: `${this.roomInfo.title}${this.matchDetail.home_name ? `(${this.matchDetail.home_name} VS ${this.matchDetail.away_name})` : ''}`,
+          desc: 'OneCric: Live',
+          // 如果是微信该link的域名必须要在微信后台配置的安全域名之内的。
+          link: window.location.href,
+          icon: 'https://m.onecric.tv/static/logo.png',
+          // 不要过于依赖以下两个回调，很多浏览器是不支持的
+          // success: function() {
+          //     alert('success')
+          // },
+          // fail: function() {
+          //     alert('fail')
+          // }
+      }
+      this.nativeShare.setShareData(shareData)
+      try {
+        this.nativeShare.call()
+      } catch (err) {
+        let oInput = document.querySelector('#copy-input')
+        oInput.value = window.location.href
+        oInput.select() // 选择对象;
+        document.execCommand('Copy') // 执行浏览器复制命令
+        uni.$u.toast('Copy succeeded');
+      }
+      uni.$u.http
+        .post("/api/Member/live_share", {
+          id: this.roomInfo.id
+        })
+        .then((res) => {
+          this.$emit('success')
+        }).finally(() => {
+        });
+    },
+    toUrlLive(id) {
+      uni.navigateTo({
+        url: `/pages/Match/member/usermanger?id=${id}`,
+      });
+    },
+    numberToK(v) {
+      return numberToK(v)
+    },
+  }
+}
+</script>
+<style lang="scss" scoped>
+.user {
+  position: absolute;
+  top: 20rpx;
+  left: 17rpx;
+  z-index: 9990;
+  background-color: rgba(0, 0, 0, .5);
+  border-radius: 15px;
+  font-size: 10px;
+  color: #fff;
+  height: 30px;
+  &.dis {
+    padding-right: 20px;
+  }
+  .img {
+    width: 30px;
+    height: 30px;
+		border-radius: 50%;
+    margin-right: 4px;
+  }
+}
+.col {
+  border-radius: 15px;
+  background-color: #FF3300;
+  font-weight: 500;
+  margin-left: 12rpx;
+  line-height: 30px;
+  padding: 0 12px;
+  cursor: pointer;
+  &.follow {
+    background-color: #ccc;
+  }
+}
+.box {
+  position: absolute;
+  right: 16rpx;
+  bottom: 50px;
+  z-index: 9990;
+  font-size: 10px;
+  color: #fff;
+  text-align: center;
+  .item {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    &+.item {
+      margin-top: 27px;
+    }
+  }
+  .img {
+    display: block;
+    width: 20px;
+    margin-bottom: 5px;
+  }
+}
+</style>

pages/Live/compontent/detail-header.vue

@@ -0,0 +1,158 @@
+<template>
+  <div class="component">
+    <div class="left">
+      <div>{{ roomInfo.title || 'OneCric' }}</div>
+      <div>{{ roomInfo.tournament }} {{ roomInfo.tournament ? ' | ' : '' }} {{ formatDate1(roomInfo.starttime) }}</div>
+    </div>
+    <div class="right flex">
+      <div class="col flex">
+        <img class="viewer" src="/static/image/live/viewer.png" alt="">
+        {{ numberToK(roomInfo.viewers) }}
+      </div>
+      <img class="del" @click="$back()" src="/static/image/live/del.png" alt="">
+    </div>
+  </div>
+</template>
+<script>
+import { numberToK } from '@/utils/util'
+export default {
+  props: {
+    roomInfo: {
+      default: {}
+    }
+  },
+  data () {
+    return {
+      
+    }
+  },
+  methods: {
+    numberToK(v) {
+      return numberToK(v)
+    },
+    formatDate1(value) {
+      if (!value) {
+        return ''
+      }
+      var date1 = this.$common.parseTime(value * 1000, '{y}/{m}/{d} {h}:{i}:{s}')
+      var date = new Date(date1 + ' UTC+5:30');
+      var weekNum = new Date().getDay()
+      let week = ""
+      switch (weekNum) {
+        case 0:
+          week = "Sun";
+          break;
+        case 1:
+          week = "Mon";
+          break;
+        case 2:
+          week = "Tue";
+          break;
+        case 3:
+          week = "Wed";
+          break;
+        case 4:
+          week = "Thu";
+          break;
+        case 5:
+          week = "Fri";
+          break;
+        case 6:
+          week = "Sat";
+          break;
+      }
+      var MonthNum = date.getMonth() + 1
+      let Month = ''
+      switch (MonthNum) {
+        case 1:
+          Month = "Jan";
+          break;
+        case 2:
+          Month = "Feb";
+          break;
+        case 3:
+          Month = "Mar";
+          break;
+        case 4:
+          Month = "Apr";
+          break;
+        case 5:
+          Month = "May";
+          break;
+        case 6:
+          Month = "Jun";
+          break;
+        case 7:
+          Month = "Jul";
+          break;
+        case 8:
+          Month = "Aug";
+          break;
+        case 9:
+          Month = "Sept";
+          break;
+        case 10:
+          Month = "Oct";
+          break;
+        case 11:
+          Month = "Nov";
+          break;
+        case 12:
+          Month = "Dec";
+          break;
+      }
+      let day = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate())
+      // this.week = week
+      // this.month = Month
+      // this.day = day
+      var hours = date.getHours();
+      var minutes = date.getMinutes();
+      var ampm = hours >= 12 ? 'PM' : 'AM';
+      if (hours != 12) {
+        hours = hours % 12;
+      }
+      if (hours == 12 && minutes) {
+        hours = hours % 12;
+        ampm = 'PM'
+      }
+      hours = hours < 10 ? "0" + hours : hours;
+      minutes = minutes < 10 ? '0' + minutes : minutes;
+      var strTime = week + ',' + day + Month + '.' + 'Watch live in' + hours + ':' + minutes + ' ' + ampm;
+      var strTime = `${hours}:${minutes} ${ampm},${day} ${Month}`;
+      return strTime;
+    },
+  }
+}
+</script>
+<style lang="scss" scoped>
+.component {
+  background-color: #10054A;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding:10px 17px 10px 15px;
+  font-size: 10px;
+  font-weight: 400;
+  // line-height: 17.5rpx;
+}
+.left {
+  min-width: 10%;
+  max-width: 100%;
+  padding-right: 5px;
+}
+.col {
+  padding: 8rpx 10rpx;
+  background-color: rgba(0, 0, 0, 0.3);
+  border-radius: 11px;
+  margin-right: 14px;
+  .viewer {
+    width: 13px;
+    margin-right: 5px;
+  }
+}
+.del {
+  width: 12px;
+  cursor: pointer;
+}
+</style>

pages/Live/compontent/detail-info.vue

@@ -0,0 +1,504 @@
+<template>
+	<view class="Info">
+		<view class="selection">
+			<div class="title">
+				<!-- Tournament -->
+				{{ $t('live.lab2') }}
+			</div>
+			<view class="list">
+				<u-row justify="space-between" @click="$toUrl(`/pages/Match/match-list?id=${matchDetail.tournament_id}&title=${detail_info.tournament_name}&type=${detail_info.type}`)">
+					<view class="selection-info">
+						<view class="flex-start">
+							<text class="size28 c3 Bold">
+								{{detail_info.tournament_name}}
+							</text>
+						</view>
+					</view>
+					<image src="/static/image/match/[email protected]" mode="heightFix" class="detail-right"></image>
+				</u-row>
+			</view>
+		</view>
+		<view class="selection">
+			<text class="title">
+				<!-- Teams -->
+				{{ $t('live.lab1') }}
+			</text>
+			<view class="list">
+				<u-row justify="space-between" @click="$toUrl(`/pages/Match/teams/teams?id=${detail_info.home_id}&title=${detail_info.home_name}`)">
+					<view class="selection-info">
+						<image :src="detail_info.home_logo || '/static/image/common/team.png'" mode="aspectFit" class="mg-rt24"></image>
+						<view class="flex-start">
+							<text class="size28 c3 Bold">
+								{{detail_info.home_name}}
+							</text>
+							<view class="mg-tp8">
+								<!-- <text class="c6 size24 bgE5">TOSS</text> -->
+								<!-- <text class="size26 c4">
+									{{detail_info.home_member}}
+								</text> -->
+							</view>
+						</view>
+					</view>
+					<image src="/static/image/match/[email protected]" mode="heightFix" class="detail-right"></image>
+				</u-row>
+				<u-row justify="space-between" @click="$toUrl(`/pages/Match/teams/teams?id=${detail_info.away_id}&title=${detail_info.away_name}`)">
+					<view class="selection-info">
+						<image :src="detail_info.away_logo || '/static/image/common/team.png'" mode="aspectFit" class="mg-rt24"></image>
+						<view class="flex-start">
+							<text class="size28 c3 Bold">
+								{{detail_info.away_name}}
+							</text>
+							<view class="mg-tp8">
+								<!-- <text class="c6 size24 bgE5">TOSS</text> -->
+								<!-- <text class="size26 c4">
+									{{detail_info.away_member}}
+								</text> -->
+							</view>
+						</view>
+					</view>
+					<image src="/static/image/match/[email protected]"  mode="heightFix" class="detail-right"></image>
+				</u-row>
+			</view>
+		</view>
+		<view class="selection">
+			<text class="title">
+				<!-- Match Details -->
+				{{ $t('live.lab3') }}
+			</text>
+			<view class="list">
+				<view class="list-item">
+					<text class="label">
+						<!-- Match -->
+					{{ $t('live.lab4') }}
+					</text>
+					<view class="content">
+						{{detail_info.match}}
+					</view>
+				</view>
+				<view class="list-item">
+					<text class="label">
+						<!-- Match Start Time -->
+					{{ $t('live.lab5') }}
+					</text>
+					<view class="content">
+						{{detail_info.match_start_time}}
+					</view>
+				</view>
+				<view class="list-item" v-if="detail_info.venue_name">
+					<text class="label">
+						<!-- Stadium/Venue -->
+					{{ $t('live.lab6') }}
+					</text>
+					<view class="content cDE9">
+						{{detail_info.venue_name || '-'}}
+					</view>
+				</view>
+				<view class="list-item">
+					<text class="label">
+						<!-- Toss -->
+					{{ $t('live.lab57') }}
+					</text>
+					<view class="content">
+						{{detail_info.toss || '-'}}
+					</view>
+				</view>
+				<!-- <view class="list-item">
+					<text class="label">Match Officials</text>
+					<view class="content">
+						Hassan Adnan (On Field),Richard Kettleborough
+						(On Field),Wayne Noon (referee)
+					</view>
+				</view> -->
+			</view>
+		</view>
+		<view class="selection">
+			<text class="title">
+				<!-- Playing XI -->
+				{{ $t('live.lab7') }}
+			</text>
+			<view class="list">
+				<view class="list-item">
+					<text class="label">{{detail_info.home_name}}</text>
+					<view class="content1">
+						{{detail_info.home_member}}
+					</view>
+				</view>
+				<view class="list-item">
+					<text class="label">{{detail_info.away_name}}</text>
+					<view class="content1">
+						{{detail_info.away_member}}
+					</view>
+					<view class="full">
+						<!-- View Full Squad Info -->
+					{{ $t('live.lab8') }}
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="flex-end selection-table-title">
+			<text class="label">
+				<!-- Updated 12 hrs ago -->
+			{{ $t('live.lab9') }}
+			</text>
+		</view>
+		<view class="selection-table">
+			<view >
+				<!-- 表头行 -->
+				<u-row class="tr-header">
+					<view class="text-center">#</view>
+					<view class="text-center">
+						<!-- TEAM -->
+					{{ $t('live.lab25') }}
+					</view>
+					<view class="text-center">P</view>
+					<view class="text-center">W</view>
+					<view class="text-center">L</view>
+					<view class="text-center">NR</view>
+					<view class="text-center">NRR</view>
+					<view class="text-center">PTS</view>
+				</u-row>
+				
+				<!-- 表格数据行 -->
+				<view v-for="(item,index) in tournament_list" :key="index" :class="{actives:acIndex == index}">
+					<u-line color="#CCCCCC"></u-line>
+					<u-row @click="clickItem(index)">
+						<view class="trc6">{{index+1}}</view>
+						<view class="trc3">{{item.competitor || 0}}</view>
+						<view class="trc6">{{item.p || 0}}</view>
+						<view class="trc6">{{item.w || 0}}</view>
+						<view class="trc6">{{item.l || 0}}</view>
+						<view class="trc6">{{item.nr || 0}}</view>
+						<view class="trc6">{{item.nrr || 0}}</view>
+						<view>
+							<view class="flex pts">
+								<text class="trc3 size28 mg-rt30 Bold"> {{item.pts}} </text>
+								<image src="/static/image/match/expert_down_ico.png" mode="aspectFill"></image>
+							</view>
+						</view>
+					</u-row>
+					
+					<view class="table-item-content" :class="{'active': acIndex==index}">
+						<view class="table-item-content-th">
+							<text class="label">
+							{{ $t('live.lab10') }}
+							</text>
+							<text class="label">
+							{{ $t('live.lab11') }}
+							</text>
+							<text class="label">
+							{{ $t('live.lab12') }}
+							</text>
+							<text class="label">
+							{{ $t('live.lab13') }}
+							</text>
+						</view>
+						<view class="table-item-content-tr" v-for="(item1,index1) in item.match" :key="index1">
+							<text class="td">{{item1.competitor}}</text>
+							<text class="td1">{{item1.date}}</text>
+							<text class="td1">{{item1.venue_name}}</text>
+							<text class="td1 overflow1" :class="classFilter(item1.winner) == 1">{{item1.match_result}}</text>
+						</view>
+					</view>
+				</view>
+			</view>
+			<u-empty
+				v-if="tournament_list.length == 0"
+				mode="data"
+				width="474"
+				height="312"
+				textSize="28"
+				marginTop="100"
+				:text="$t('common.nodata')"
+				icon="/static/image/common/nodata.png"
+			>
+			</u-empty>
+		</view>
+		
+		<view class="selection" style="margin-top: 20rpx;">
+			<view class="title">
+				{{ $t('live.lab14') }}
+			</view>
+			<view class="li">
+				<text class="D4199">#:</text>
+				{{ $t('live.lab15') }}
+			</view>
+			<view class="li">
+				<text class="D4199">
+					{{ $t('live.lab16') }}:</text>
+				{{ $t('live.lab17') }}
+			</view>
+			<view class="li">
+				<text class="D4199">P:</text>
+				{{ $t('live.lab18') }}
+			</view>
+			<view class="li">
+				<text class="D4199">W:</text>
+				{{ $t('live.lab19') }}
+			</view>
+			<view class="li">
+				<text class="D4199">D:</text>
+				{{ $t('live.lab20') }}
+			</view>
+			<view class="li">
+				<text class="D4199">L:</text>
+				{{ $t('live.lab21') }}
+			</view>
+			<view class="li">
+				<text class="D4199">NR:</text>
+				{{ $t('live.lab22') }}
+			</view>
+			<view class="li">
+				<text class="D4199">NRR:</text>
+				{{ $t('live.lab23') }}
+			</view>
+			<view class="li">
+				<text class="D4199">PTS:</text>
+				{{ $t('live.lab24') }}
+			</view>
+			<!-- <view class="li">
+				<text class="cfff qqs">Q</text>:
+				{{ $t('live.lab24') }}
+			</view> -->
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+      matchDetail: {
+        default: {}
+      }
+    },
+		data() {
+			return {
+				acIndex:null,
+				detail_info:{},
+				tournament_list:[]
+			}
+		},
+    created() {
+      this.cricket_tournament_standings()
+      this.cricket_match_detail_info()
+    },
+		methods:{
+			clickItem(index){
+				console.log('index :>> ', index);
+				this.acIndex=(this.acIndex==index?null:index)
+				console.log(this.acIndex);
+			},
+			/* 积分	 */
+			cricket_tournament_standings() {
+				uni.$u.http.post('/api/Cricket/cricket_tournament_standings',{
+          tournament_id: this.matchDetail.tournament_id
+        }).then(res=>{
+					this.tournament_list = res;
+				}).catch(res=>{})
+			},
+			/* 详情 */
+			cricket_match_detail_info() {
+				let time = new Date();
+				let timeZone = time.toLocaleTimeString('en-us',{timeZoneName:'short'});  //'1:12:38 PM GMT+8'
+				let timeZoneId = Intl.DateTimeFormat().resolvedOptions().timeZone; //'Asia/Shanghai'
+				uni.$u.http.post('/api/Cricket/cricket_match_detail_info',{
+          match_id: this.matchDetail.match_id,
+          timezone: timeZoneId
+        }).then(res=>{
+					this.detail_info = res;
+				}).finally(() => {
+        })
+			},
+			classFilter(key) {
+				return key == 1 ? 'c430' : key == 2 ? 'cC23' : 'c666'
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.Info{
+		padding: 12px 15rpx;
+		.selection{
+			background-color: #fff;
+			margin-bottom: 10px;
+			border-radius: 5px;
+			overflow: hidden;
+			.title {
+				line-height: 33px;
+				background-color: rgba(16, 5, 74, .1);
+				padding: 0 28rpx;
+				font-size: 17px;
+				font-weight: 700;
+				color: #242424;
+				display: block;
+			}
+			.list{
+				padding: 0 28rpx;
+				.u-row{
+					padding: 36rpx 0;
+					border-bottom: 1rpx solid #ccc;
+					&:last-child{
+						border: none;
+					}
+					.selection-info{
+						display: flex;
+						image{
+							width: 80rpx;
+							height: auto;
+						}
+					}
+					.detail-right{
+						width: 48rpx;
+						height: 48rpx;
+					}
+				}
+				
+				.list-item{
+					padding: 24rpx 0;
+					&+.list-item {
+						border-top: 1rpx solid #d1d1d1;
+					}
+				}
+			}
+			.label {
+				font-size: 12px;
+				color: #939292;
+			}
+			.content {
+				font-size: 17px;
+				color: #242424;
+				&.cDE9 {
+					color: #0C52D2;
+				}
+			}
+			.content1 {
+				font-size: 15px;
+				color: #242424;
+			}
+			.full {
+				font-size: 15px;
+				font-weight: 700;
+				color: #ff3300;
+				text-align: center;
+				padding-top: 25px;
+				padding-bottom: 8px;
+			}
+		}
+		.selection-table-title{
+			padding: 36rpx 28rpx 36rpx 0;
+		}
+		.selection-table{
+			background-color: #fff;
+			border-radius: 5px;
+			overflow: hidden;
+			.tr-header{
+				background-color: rgba(16, 5, 74, .1);
+				color: #484A4D;
+				font-size: 12px;
+			}
+			.pts{
+				image{
+					width: 19rpx;
+					height: 19rpx;
+					transition: all 0.5s ease;
+				}
+			}
+			.u-row{
+				display: grid;
+				grid-template-columns: 10% 15% 10% 10% 10% 10% 20% 10%;
+				grid-template-rows:74rpx;
+				transition: all 0.5s ease;
+				font-size: 12px;
+			}
+			.trc6{
+				color: #666;
+				text-align: center;
+			}
+			.trc3{
+				color: #333;
+				text-align: center;
+			}
+			.table-item-content{
+				height: 0rpx;
+				overflow: hidden;
+				line-height: 66rpx;
+				transition: all 0.5s ease;
+				height: 0;
+				&.active {
+					height: 100%;
+					padding: 24rpx 28rpx 0;
+				}
+				.table-item-content-th{
+					height: 27px;
+					background: rgba(16, 5, 74, .1);
+					border-radius: 10rpx;
+					display: grid;
+					grid-template-columns: 15% 20% 25% 40%;
+					grid-template-rows:27px;
+					padding-left: 24rpx;
+					color: #505255;
+					align-items: center;
+					font-size: 12px;
+				}
+				.table-item-content-tr{
+					display: grid;
+					grid-template-columns: 15% 20% 25% 40%;
+					grid-template-rows:70rpx;
+					min-height: 70rpx;
+					padding-left: 24rpx;
+				}
+				.td {
+					font-size: 14px;
+					color: #282828;
+				}
+				.td1 {
+					font-size: 12px;
+					color: #5A5C5F;
+				}
+			}
+			.actives{
+				.u-row{
+					background-color: #1D2550;
+				}
+				.trc6{
+					color: #999;
+				}
+				.trc3{
+					color: #fff;
+				}
+				.pts{
+					image{
+						transform: rotateZ(180deg);
+					}
+				}
+				// .table-item-content{
+				// 	height: max-content;
+				// }
+			}
+		}
+		.li {
+			font-size: 14px;
+			font-weight: 400;
+			text-align: left;
+			color: #242424;
+			line-height: 1;
+			display: flex;
+			align-items: center;
+			height: 39px;
+			.D4199 {
+				color: #4D4199;
+				display: inline-block;
+				width: 50px;
+				text-align: right;
+				padding-right: 19px;
+			}
+		}
+		.qqs{
+			font-size: 28rpx;
+			background-color: #EEA831;
+			display: inline-block;
+			padding: 0 8rpx;
+			border-radius: 100rpx;
+		}
+	}
+</style>

pages/Live/compontent/detail-list-h.vue

@@ -0,0 +1,273 @@
+<!-- 相关视频 -->
+<template>
+	<view class="detail">
+		<view class="detail-title flex-start" style="">
+			<image src="/static/image/live/detail01.png" mode=""></image>
+			<text style="">{{$t('live.title3')}}</text>
+			<view class="more" v-if="robotLength > 6" @click="$toUrl('/pages/Live/list?type=2')">
+				{{$t('live.more')}}<u-icon name="arrow-right" color="#DC3C23" size="28rpx"></u-icon>
+			</view>
+		</view>
+		<view class="detail-video-list flex" style="flex-wrap: wrap;">
+			<view class="detail-video-li" v-for="(item,index) in liveList" :key="index" @click="toUrlLive(item)">
+				<div class="img_box">
+					<u--image :showLoading="true" :src="item.bottom" width="100%" height="176rpx">
+						<template v-slot:loading>
+							<image class="loading-list-img" src="/static/image/common/live-list-bg.png"></image>
+						</template>
+					</u--image>
+					<image class="home_logo" :src="item.home_logo" mode="aspectFill" alt=""></image>
+					<image class="away_logo" :src="item.away_logo" mode="aspectFill" alt=""></image>
+				</div>
+				<view class="detail-video-right flex">
+					<div class="flex" style="max-width: 50%">
+						<u--image shape="circle" :src="item.UserHead" width="40rpx" height="40rpx">
+						</u--image>
+						<text class="text-clamp">{{item.UserName}}</text>
+					</div>
+					<div class="flex">
+						<u-icon color="#eaeaec" name="eye-fill" size="15px" v-if="item.viewers"></u-icon>
+						<view>{{numberToK(item.viewers)}}</view>
+					</div>
+				</view>
+				<view class="detail-video-content">
+					<image class="hot" src="/static/image/live/detail-hot.png" mode=""></image>
+					<view class="detail-video-title text-clamp">
+						{{item.Name}}
+					</view>
+					<view class="detail-video-title">
+						{{parseTime(item.start_time)}}
+					</view>
+				</view>
+			</view>
+		</view>
+		<u-toast ref="uToast"></u-toast>
+		<!-- <u-empty text=" " src="/static/images/competition/none.png" icon-size="400" mode="list"></u-empty> -->
+	</view>
+</template>
+
+<script>
+import { numberToK, parseTime } from '@/utils/util'
+	export default {
+		props:['liveList', 'robotLength'],
+		data() {
+			return {
+			}
+		},
+		methods: {
+			formatDate(value) {
+				var date1 = this.$common.parseTime(value * 1000, '{y}/{m}/{d} {h}:{i}:{s}')
+				var date = new Date(date1 + ' UTC+5:30');
+			    var weekNum = new Date().getDay()
+			    let week = ""
+			    switch (weekNum) {
+			     case 0:
+			      week = "Sun";
+			      break;
+			     case 1:
+			      week = "Mon";
+			      break;
+			     case 2:
+			      week = "Tue";
+			      break;
+			     case 3:
+			      week = "Wed";
+			      break;
+			     case 4:
+			      week = "Thu";
+			      break;
+			     case 5:
+			      week = "Fri";
+			      break;
+			     case 6:
+			      week = "Sat";
+			      break;
+			    }
+			    var MonthNum = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1)
+			    let Month = ''
+			    switch (MonthNum) {
+			     case 1:
+			      Month = "Jan";
+			      break;
+			     case 2:
+			      Month = "Feb";
+			      break;
+			     case 3:
+			      Month = "Mar";
+			      break;
+			     case 4:
+			      Month = "Apr";
+			      break;
+			     case 5:
+			      Month = "May";
+			      break;
+			     case 6:
+			      Month = "Jun";
+			      break;
+			     case 7:
+			      Month = "Jul";
+			      break;
+			     case 8:
+			      Month = "Aug";
+			      break;
+			     case 9:
+			      Month = "Sept";
+			      break;
+			     case 10:
+			      Month = "Oct";
+			      break;
+			     case 11:
+			      Month = "Nov";
+			      break;
+			     case 12:
+			      Month = "Dec";
+			      break;
+			    }
+			    let day =  (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate())
+			    // this.week = week
+			    // this.month = Month
+			    // this.day = day
+			    var hours = date.getHours();
+			    var minutes = date.getMinutes();
+					var ampm = hours >= 12 ? 'PM' : 'AM';
+					if (hours != 12) {
+						hours = hours % 12;
+					}
+					if (hours == 12 && minutes) {
+						hours = hours % 12;
+						ampm = 'PM'
+					}
+					hours = hours < 10 ? "0" + hours : hours;
+			    minutes = minutes < 10 ? '0' + minutes : minutes;
+			    // var strTime = week+','+day+Month+'.'+'Watch live in'+hours + ':' + minutes + ' ' + ampm;
+					var strTime = this.$t('match.lab92') + ' ' + hours + ':' + minutes + ' ' + ampm;
+			    return strTime;
+			},
+			numberToK(v) {
+				return numberToK(v)
+			},
+			toUrlLive(item) {
+				uni.redirectTo({
+					url:`/pages/Live/history-detail?id=${item.Uid}&ID=${item.live_id}&MediaUrl=${item.MediaUrl}`
+				})
+			},
+			parseTime(t) {
+				return parseTime(t, '{y}-{m}-{d} {h}:{i}')
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.zhezao {
+		background: rgba(0, 0, 0, 0.5);
+		position: absolute;
+		top: 0;
+		left: 0;
+		z-index: 2;
+		color: #fff;
+		text-align: center;
+		line-height: 1;
+		padding: 10rpx 6rpx;
+		border-radius: 6rpx;
+		font-size: 16rpx;
+		white-space: nowrap;
+	}
+	.live-icon {
+		position: absolute;
+		left: 10px;
+		top: 10px;
+		width: 40px;
+		height: 16px;
+	}
+	.detail {
+		padding: 0 24rpx;
+		padding-bottom: 30rpx;
+	}
+	.detail-title {
+		font-weight: bold;
+		.more {
+			color: #DC3C23;
+			font-size: 28rpx;
+			flex: 1;
+			display: flex;
+			align-items: center;
+			justify-content: flex-end;
+		}
+		image {
+			width: 40rpx;
+			height: 40rpx;
+			margin-right: 16rpx;
+		}
+		text {
+			color: #333;
+			font-size: 32rpx;
+		}
+	}
+	.detail-video-li {
+		position: relative;
+		overflow: hidden;
+		margin-top: 10px;
+		width: calc(100% / 2 - 9rpx);
+		border-radius: 10px;
+		background-color: white;
+	
+		.loading-list-img {
+			width: 100%;
+			height: 176rpx;
+		}
+		.img_box {
+				position: relative;
+			}
+			.home_logo, .away_logo {
+				position: absolute;
+				top: 50%;
+				transform: translateY(-50%);
+				width: 80rpx;
+				height: 80rpx;
+				border-radius: 50%;
+			}
+			.home_logo {
+				left: 30rpx;
+			}
+			.away_logo {
+				right: 30rpx;
+			}
+		.detail-video-content {
+			padding: 0 10px 10px 40px;
+			position: relative;
+		
+			.detail-video-title {
+				width: 99%;
+				color: #333;
+				font-size: 28rpx;
+			}
+			.hot {
+				width: 15px;
+				height: 15px;
+				position: absolute;
+				left: 15px;
+				top: 3px;
+			}
+		}
+	}
+	.detail-video-right {
+		position: absolute;
+		right: 0;
+		left: 0;
+		top: 126rpx;
+		font-size: 10px;
+		color: rgb(234, 234, 236);
+		.text-clamp {
+			flex: 1;
+		}
+		.flex {
+			background-color: rgba(37, 40, 43, 0.1);
+			padding: 0 6px;
+			height: 40rpx;
+		}
+		.u-transition {
+			margin-right: 3px;
+		}
+	}
+</style>

pages/Live/compontent/detail-list.vue

@@ -0,0 +1,743 @@
+<!-- 推荐 -->
+<template>
+  <view class="today">
+    <div class="live-box">
+      <div class="today-box">
+        <div
+          class="item"
+          v-for="item in todayList"
+          :key="item.live_id"
+          @click="toUrlLive(item)"
+        >
+          <div class="thumb-box">
+            <u--image
+              class="thumb"
+              :src="item.thumb"
+              width="34.46vw"
+              height="19.62vw"
+              mode="aspectFill"
+            ></u--image>
+            <!-- <div class="down-box" v-if="item.starttime > 0 && item.status == 0">
+              <div>
+                <div>
+                  Match starts in
+                  {{ $t("match.lab76") }}
+                </div>
+                <div class="down">
+                  {{ countdownFun(item.starttime / 1000) }}
+                </div>
+              </div>
+            </div> -->
+          </div>
+          <div class="match-detail-box">
+            <div class="match1">
+              <div class="text-clamp">{{ item.tournament }}</div>
+              <img class="icon1" src="/static/image/live/icon1.png" alt="" />
+            </div>
+            <div class="detail-box">
+              <div class="detail-box1">
+                <div class="home">
+                  <div class="left">
+                    <u--image
+                      class="home_logo"
+                      :src="item.home_logo || '/static/image/common/team.png'"
+                      shape="circle"
+                      width="32rpx"
+                      mode="aspectFit"
+                      height="32rpx"
+                    ></u--image>
+                    <div class="text-clamp">{{ item.home_name }}</div>
+                  </div>
+                  <div class="right">
+                    {{ formaScore(item.home_display_score) }}
+                    <div
+                      class="value"
+                      :class="{
+                        value1:
+                          item.winner_id && item.winner_id == item.home_id,
+                      }"
+                    >
+                      {{ formaScore1(item.home_display_score) }}
+                    </div>
+                  </div>
+                  <img
+                    v-if="item.winner_id && item.winner_id == item.home_id"
+                    class="icon2"
+                    src="/static/image/live/icon2.png"
+                    alt=""
+                  />
+                </div>
+                <div class="home">
+                  <div class="left">
+                    <u--image
+                      class="home_logo"
+                      :src="item.away_logo || '/static/image/common/team.png'"
+                      mode="aspectFit"
+                      shape="circle"
+                      width="32rpx"
+                      height="32rpx"
+                    ></u--image>
+                    <div class="text-clamp">{{ item.away_name }}</div>
+                  </div>
+                  <div class="right">
+                    {{ formaScore(item.away_display_score) }}
+                    <div
+                      class="value"
+                      :class="{
+                        value1:
+                          item.winner_id && item.winner_id == item.away_id,
+                      }"
+                    >
+                      {{ formaScore1(item.away_display_score) }}
+                    </div>
+                  </div>
+                  <img
+                    v-if="item.winner_id && item.winner_id == item.away_id"
+                    class="icon2"
+                    src="/static/image/live/icon2.png"
+                    alt=""
+                  />
+                </div>
+              </div>
+              <div class="status-box">
+                <img
+                  v-if="item.status == 1"
+                  class="icon3"
+                  src="/static/image/live/icon3.png"
+                  alt=""
+                />
+                <div v-if="item.status == 0" class="text">
+                  <!-- Watch Live in -->
+                  {{ $t("match.lab92") }}
+                </div>
+                <div v-if="item.status == 2" class="text">
+                  {{ $t("match.lab90") }}
+                </div>
+                <div v-if="item.status == 0" class="text1">
+                  {{ watchLiveAt(item.scheduled) }}
+                  {{ watchLiveAt1(item.scheduled) }}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <img
+        class="load3"
+        v-if="!listOne"
+        src="/static/image/live/load3.png"
+        alt=""
+      />
+    </div>
+  </view>
+</template>
+<script>
+import animationMixin from '@/pages/mixins/animation'
+import { parseTime } from "@/utils/util";
+export default {
+  mixins: [animationMixin],
+  data() {
+    return {
+      todayList: [],
+      listOne: null,
+      loading: false,
+      showAll: false,
+      timer: null,
+      animationLoaded1: false,
+      listTimer: null
+    };
+  },
+  beforeDestroy () {
+    clearInterval(this.listTimer);
+    this.listTimer = null;
+  },
+  created() {
+    this.getList();
+  },
+  computed: {
+    todayList1() {
+      if (this.showAll) {
+        return this.todayList;
+      }
+      return this.todayList.filter((item, index) => index < 2);
+    },
+  },
+  methods: {
+    toUrlLive(item) {
+      gtag("event", "live_H5", {
+        live_H5: "0",
+      });
+      uni.navigateTo({
+        url: `./live-detail?id=${item.live_id}&ID=${item.live_id}`,
+      });
+    },
+    toMatchLive(item) {
+      uni.navigateTo({
+        url: "/pages/Match/match-detail?id=" + item.id,
+      });
+    },
+    toMatch(live) {
+      sessionStorage.setItem("match_live", JSON.stringify(live));
+      uni.switchTab({
+        url: "/pages/Match/Match",
+      });
+    },
+    getList() {
+      this.loading = true;
+      uni.$u.http
+        .get("/api/live_streaming/getPlayingCards", {
+          params: {
+            timezone: this.$store.state.timeZone,
+          },
+        })
+        .then((res) => {
+          let todayList = res || [];
+          todayList.forEach((item) => {
+            item.starttime =
+              new Date(
+                item.scheduled.replace(new RegExp(/-/gm), "/")
+              ).getTime() - new Date().getTime();
+          });
+          this.listOne = todayList[0];
+          this.todayList = todayList;
+          if (!this.listTimer) {
+            this.listTimer = setInterval(() => {
+              this.getList();
+            }, 10000);
+          }
+          // this.timerStart();
+        }).finally(() => {
+          if (this.animationLoaded) {
+            return
+          }
+          this.animationLoaded = true
+          this.$nextTick(() => {
+            this.scrollFun()
+          })
+        })
+    },
+    timerStart() {
+      if (this.listOne) {
+        if (!this.timer) {
+          this.timer = setInterval(() => {
+            this.cutDown();
+          }, 1000);
+        }
+      } else {
+        if (this.timer) {
+          clearInterval(this.timer);
+          this.timer = null;
+        }
+      }
+    },
+    cutDown() {
+      if (this.listOne) {
+        this.$set(
+          this.listOne,
+          "starttime",
+          new Date(
+            this.listOne.scheduled.replace(new RegExp(/-/gm), "/")
+          ).getTime() - new Date().getTime()
+        );
+        let todayList = this.todayList;
+        todayList.forEach((item, index) => {
+          this.$set(this.todayList[index], 'starttime',  new Date(item.scheduled.replace(new RegExp(/-/gm), "/")).getTime() - new Date().getTime())
+        })
+      }
+    },
+    parseTime(t) {
+      return parseTime(t, "{m}-{d} {h}:{i}");
+    },
+    formaScore(v) {
+      if (!v) {
+        return "";
+      }
+      if (v == "0/0（0）") {
+        return "Yet To Bat";
+      }
+      let s = v.replace("（", "(");
+      let index = v.indexOf("(");
+      return s.substring(index);
+    },
+    formaScore1(v) {
+      if (!v) {
+        return "";
+      }
+      let s = v.replace("（", "(");
+      let index = v.indexOf("(");
+      return s.substring(0, index);
+    },
+    watchLiveAt(value) {
+      if (!value) {
+        return "";
+      }
+      var date = new Date(value.replace(new RegExp(/-/gm), "/"));
+      var hours = date.getHours();
+      var minutes = date.getMinutes();
+      if (hours != 12) {
+        hours = hours % 12;
+      }
+      if (hours == 12 && minutes) {
+        hours = hours % 12;
+      }
+      minutes = minutes < 10 ? "0" + minutes : minutes;
+      hours = hours < 10 ? "0" + hours : hours;
+      var strTime = hours + ":" + minutes;
+      return strTime;
+    },
+    watchLiveAt1(value) {
+      if (!value) {
+        return "";
+      }
+      var date = new Date(value.replace(new RegExp(/-/gm), "/"));
+      var hours = date.getHours();
+      var minutes = date.getMinutes();
+      var ampm = hours >= 12 ? "PM" : "AM";
+      var strTime = ampm;
+      if (minutes && hours == 12) {
+        strTime = "PM";
+      }
+      return strTime;
+    },
+    countdownFun(value) {
+      if (!value) {
+        return "";
+      }
+      var h = parseInt(value / 3600);
+      var m = parseInt((value % 3600) / 60);
+      var str = "";
+      if (h > 0) {
+        str += h + "hrs";
+        if (m < 10) {
+          m = "0" + m;
+        }
+        str += " " + m + "min";
+        return str;
+      } else {
+        if (m > 0) {
+          if (m < 10) {
+            m = "0" + m;
+          }
+          str += m + "min";
+        }
+      }
+
+      var s = parseInt((value % 3600) % 60);
+      if (s < 10) {
+        s = "0" + s;
+      }
+      str += " " + s + "s";
+      return str;
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.today {
+}
+.live-box {
+  .title {
+    font-size: 3.5vw;
+    font-weight: bold;
+    color: #242424;
+    line-height: 1;
+    display: flex;
+    align-items: center;
+    padding-bottom: 24rpx;
+    .icon {
+      height: 4.08vw;
+      margin-right: 14rpx;
+    }
+  }
+  .load3 {
+    width: 100%;
+    display: block;
+  }
+  .today-box {
+    overflow-x: hidden;
+    padding-bottom: 30rpx;
+  }
+  .item-one {
+    .img-box {
+      position: relative;
+      min-height: 60rpx;
+      .down-box {
+        position: absolute;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        right: 0;
+        border-radius: 17rpx;
+        background-color: rgba(27, 24, 67, 0.8);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 26rpx;
+        font-weight: 400;
+        color: #d5d4e4;
+        line-height: 1;
+        text-align: center;
+        .down {
+          margin-top: 24rpx;
+          font-size: 36rpx;
+          font-weight: bold;
+          color: #ffffff;
+        }
+      }
+    }
+    .logo {
+      position: absolute;
+      top: 13rpx;
+      left: 18rpx;
+      height: 31rpx;
+    }
+    .live {
+      position: absolute;
+      top: 25rpx;
+      right: 25rpx;
+      height: 37rpx;
+    }
+    .thumb {
+      display: block;
+      width: 100%;
+    }
+    .body {
+      padding: 0 27rpx;
+    }
+    .content {
+      border-bottom: 1px solid #e5e5e5;
+      padding-bottom: 16rpx;
+    }
+    .match1 {
+      display: flex;
+      align-items: center;
+      font-size: 3.5vw;
+      font-weight: bold;
+      color: #131313;
+      padding: 18rpx 0;
+    }
+    .icon1 {
+      margin-left: 20rpx;
+      width: 11rpx;
+    }
+    .match-detail-box {
+      position: relative;
+      padding-right: 14.48vw;
+    }
+    .detail-box {
+      border-right: 1px solid #e5e5e5;
+      padding-right: 22rpx;
+    }
+    .home {
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      & + .home {
+        margin-top: 9rpx;
+      }
+      .icon2 {
+        position: absolute;
+        right: -22rpx;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 11rpx;
+      }
+    }
+    .left {
+      display: flex;
+      align-items: center;
+      font-size: 3.03vw;
+      font-weight: bold;
+      color: #131313;
+      line-height: 1;
+      max-width: 90%;
+      min-width: 20%;
+      .home_logo {
+        margin-right: 14rpx;
+      }
+    }
+    .right {
+      display: flex;
+      align-items: center;
+      font-size: 3.03vw;
+      font-weight: 400;
+      color: #888888;
+    }
+    .value {
+      font-weight: bold;
+      &.value1 {
+        color: #2c2c2c;
+      }
+    }
+    .status-box {
+      position: absolute;
+      top: 0;
+      right: -20rpx;
+      height: 100%;
+      width: 16.35vw;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      line-height: 1;
+      .icon3 {
+        display: block;
+        width: 11.09vw;
+      }
+      .text {
+        font-size: 2.33vw;
+        font-weight: 400;
+        color: #6e6e6e;
+        margin-bottom: 12rpx;
+        white-space: nowrap;
+      }
+      .text1 {
+        font-size: 2.8vw;
+        font-weight: bold;
+        color: #2c2c2c;
+      }
+    }
+  }
+  .item {
+    padding: 26rpx 27rpx 0;
+    display: flex;
+    align-items: center;
+    .thumb-box {
+      position: relative;
+      margin-right: 2.21vw;
+      .down-box {
+        position: absolute;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        right: 0;
+        border-radius: 10rpx;
+        background-color: rgba(27, 24, 67, 0.8);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 22rpx;
+        font-weight: 400;
+        color: #d5d4e4;
+        line-height: 1;
+        text-align: center;
+        .down {
+          margin-top: 24rpx;
+          font-size: 28rpx;
+          font-weight: bold;
+          color: #ffffff;
+        }
+      }
+    }
+    .thumb {
+      min-width: 34.46vw;
+      max-width: 34.46vw;
+      border-radius: 10rpx;
+      overflow: hidden;
+    }
+    .match-detail-box {
+      width: calc(100% - 36.67vw);
+    }
+    .match1 {
+      display: flex;
+      align-items: center;
+      font-size: 3.5vw;
+      font-weight: bold;
+      color: #131313;
+      padding-bottom: 3.27vw;
+    }
+    .icon1 {
+      margin-left: 20rpx;
+      width: 11rpx;
+    }
+    .detail-box {
+      position: relative;
+      padding-right: 14.48vw;
+    }
+    .detail-box1 {
+      border-right: 1px solid #e5e5e5;
+      padding-right: 22rpx;
+    }
+    .home {
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      & + .home {
+        margin-top: 9rpx;
+      }
+      .icon2 {
+        position: absolute;
+        right: -22rpx;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 11rpx;
+      }
+    }
+    .left {
+      display: flex;
+      align-items: center;
+      font-size: 3.03vw;
+      font-weight: bold;
+      color: #131313;
+      line-height: 1;
+      max-width: 90%;
+      min-width: 20%;
+      .home_logo {
+        margin-right: 14rpx;
+      }
+    }
+    .right {
+      display: flex;
+      align-items: center;
+      font-size: 3.03vw;
+      font-weight: 400;
+      color: #888888;
+      // white-space: nowrap;
+    }
+    .value {
+      font-weight: bold;
+      &.value1 {
+        color: #2c2c2c;
+      }
+    }
+    .status-box {
+      position: absolute;
+      top: 0;
+      right: -20rpx;
+      height: 100%;
+      width: 16.35vw;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      line-height: 1;
+      .icon3 {
+        display: block;
+        width: 11.09vw;
+      }
+      .text {
+        font-size: 2.33vw;
+        font-weight: 400;
+        color: #6e6e6e;
+        margin-bottom: 12rpx;
+        white-space: nowrap;
+      }
+      .text1 {
+        font-size: 2.8vw;
+        font-weight: bold;
+        color: #2c2c2c;
+      }
+    }
+  }
+}
+.show-all {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 3.5vw;
+  font-weight: bold;
+  color: #ff3300;
+  line-height: 1;
+  padding-top: 4.32vw;
+  .icon4 {
+    width: 15rpx;
+    margin-left: 1.75vw;
+  }
+}
+.box2 {
+  padding-left: 29rpx;
+  .title {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-weight: bold;
+    color: #242424;
+    font-size: 30rpx;
+    line-height: 1;
+    padding: 40rpx 29rpx 40rpx 0;
+  }
+  .all {
+    font-size: 28rpx;
+    color: #ff3300;
+  }
+}
+.list-box {
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  .item {
+    min-width: 42.17vw;
+    max-width: 42.17vw;
+    margin-right: 20rpx;
+  }
+  .body {
+    color: #fff;
+    border-radius: 92rpx;
+    padding: 0 5.1vw;
+    box-shadow: 0px 4px 10px 0px rgba(142, 142, 142, 0.33);
+  }
+  .body0 {
+    background-color: #2549d1;
+  }
+  .body1 {
+    background-color: #3e3e3e;
+  }
+  .body2 {
+    background-color: #be313e;
+  }
+  .time {
+    font-size: 22rpx;
+    font-weight: 400;
+    line-height: 1;
+    padding: 2.1vw 0;
+    text-align: center;
+  }
+  .match-box {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-bottom: 3.73vw;
+    font-size: 2.57vw;
+    font-weight: bold;
+    color: #fffefe;
+  }
+  .img-box {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .text-clamp {
+      width: 8.52vw;
+      text-align: center;
+    }
+  }
+  .home_logo {
+    height: 8.17vw;
+    display: block;
+    max-width: 100%;
+  }
+  .vs {
+    padding:0 2px 2.57vw;
+  }
+  .team {
+    font-size: 3.27vw;
+    font-weight: 400;
+    color: #333333;
+    text-align: center;
+    padding-top: 14rpx;
+  }
+  .soon {
+    font-size: 3.27vw;
+    font-weight: 400;
+    color: #333333;
+    text-align: center;
+  }
+  .load1 {
+    width: 100%;
+    display: block;
+  }
+}
+</style>

pages/Live/compontent/detail-live.vue

@@ -0,0 +1,315 @@
+<template>
+  <view class="live">
+    <scroll-view
+      class="scroll-view"
+      :scroll-y="true"
+      :refresher-enabled="true"
+      :refresher-triggered="triggered"
+      :refresher-threshold="100"
+      @refresherpulling="onPulling"
+      @refresherrefresh="onRefresh"
+      @scrolltolower="scrolltolower"
+      @refresherabort="onAbort"
+    >
+      <view
+        class="size28 c3 mg-bt24"
+        v-for="(item, index) in info"
+        :key="index"
+      >
+        <!-- 				<view class="size28 c3 mg-bt24">
+					<text class="size32 Bold mg-rt20">2.36am </text>
+					{{item.commentaries}}
+				</view> -->
+
+        <!-- <u-divider class="mg-bt24" lineColor="#E5E5E5"></u-divider> -->
+
+        <view>
+          <view class="li" style="display: flex" v-if="item.type === 1">
+            <view class="size32 c3 Bold live-item">
+              <text class="indexNumber">{{ item.display_overs }}</text>
+              <text
+                class="live-item-text"
+                :class="
+                  item.runs_scored == 'w'
+                    ? 'live-item-text-red'
+                    : item.runs_scored == '4'
+                    ? 'live-item-text-green'
+                    : item.runs_scored == '6'
+                    ? 'live-item-text-green'
+                    : item.runs_scored == '8'
+                    ? 'live-item-text-green'
+                    : 'live-item-text-block'
+                "
+                >{{ item.runs_scored }}</text
+              >
+            </view>
+            <view class="size28 c3 live-item">
+              <text>{{ item.commentaries }}</text>
+            </view>
+          </view>
+        </view>
+        <view class="green-card" v-if="item.type === 2">
+          <u-row>
+            <u-col span="8" class="flex">
+              <view class="flex-start">
+                <view class="over17 size28 c6">
+                  OVER <br />
+                  <text class="size32">{{ item.serial_number }}</text>
+                </view>
+                <view class="size24 c6">
+                  {{ item.head.sessions_number }} <br />
+                  <text class="size28 mg-tp16 c3 Bold">
+                    {{ item.head.sum }}Runs</text
+                  >
+                </view>
+              </view>
+            </u-col>
+            <u-col span="4">
+              <view
+                class="size24 c6 pd-lt21"
+                style="border-left: 1rpx solid #b1d9ff"
+              >
+                {{ item.head.country_code }}<br />
+                <text class="size28 mg-tp16 c3 Bold">{{
+                  item.head.display_score
+                }}</text>
+              </view>
+            </u-col>
+          </u-row>
+          <u-line color="#b1d9ff"></u-line>
+          <u-row>
+            <u-col span="6">
+              <view class="size24 c6">
+                {{ item.head.striker.name }}<br />
+                <text class="size28 mg-tp16 c3 Bold">{{
+                  item.head.striker.runs_scored_so_far
+                }}</text
+                >({{ item.head.striker.balls_faced_so_far }})
+              </view>
+            </u-col>
+            <u-col span="6">
+              <view class="size24 c6">
+                {{ item.head.non_striker.name }}<br />
+                <text class="size28 mg-tp16 c3 Bold">{{
+                  item.head.non_striker.runs_scored_so_far
+                }}</text
+                >({{ item.head.non_striker.balls_faced_so_far }})
+              </view>
+            </u-col>
+            <u-line direction="col" color="#219430"></u-line>
+          </u-row>
+        </view>
+      </view>
+
+      <u-empty
+        v-if="info.length == 0"
+        :show="loadingData"
+        mode="data"
+        width="474"
+        height="312"
+        textSize="28"
+        marginTop="100"
+        :text="$t('common.nodata')"
+        icon="/static/image/common/nodata.png"
+      >
+      </u-empty>
+      <u-loadmore
+        v-if="info.length != 0"
+        :status="status"
+        fontSize="28"
+        :line="true"
+        :loading-text="statusType.loadingText"
+        :loadmore-text="statusType.loadmoreText"
+        :nomore-text="statusType.nomoreText"
+      />
+    </scroll-view>
+  </view>
+</template>
+
+<script>
+export default {
+  props: {
+    matchDetail: {
+      default: {}
+    }
+  },
+  data() {
+    return {
+      info: [],
+      loadingData: false,
+      page: 1,
+      triggered: false,
+      _freshing: false,
+      statusType: {
+        loadingText: this.$t('common.lab'),
+        loadmoreText: this.$t('common.lab1'),
+        nomoreText: this.$t('common.lab2')
+      },
+      id: "",
+    };
+  },
+  created() {
+    uni.showLoading({
+      title: this.$t('common.lab'),
+    });
+    this.cricket_match_detail_live()
+    this._freshing = false;
+  },
+  methods: {
+    onPulling(e) {
+    },
+    onRefresh() {
+        if (this._freshing) return;
+        this.triggered = true
+        this._freshing = true;
+        this.page = 1
+        this.cricket_match_detail_live()
+    },
+    scrolltolower() {
+      console.log('scrolltolower')
+    },
+    onAbort() {
+    },
+    cricket_match_detail_live(id) {
+      this.status = "loading";
+      if (this.page == 1) {
+        this.triggered = true
+      }
+      this.loadingData = false
+      uni.$u.http
+        .post("/api/Cricket/cricket_match_detail_live_new", {
+          match_id: this.matchDetail.match_id,
+          page: this.page,
+        })
+        .then((res) => {
+          if (this.page == 1) {
+            this.info = res;
+          } else {
+            this.info = this.info.concat(res);
+          }
+          if (res.total > this.info.length) {
+            this.status = "loadmore";
+            this.page++;
+          } else {
+            this.status = "nomore";
+          }
+        })
+        .finally((res) => {
+          uni.hideLoading();
+          this.loadingData = true;
+          this.triggered = false;
+          this._freshing = false;
+        });
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.live {
+	padding: 12px 15rpx;
+  .scroll-view {
+    height: calc(100vh - 320px)
+  }
+  .li {
+    background-color: #fff;
+    padding: 16rpx;
+    border-radius: 5px;
+  }
+  .live-item {
+    display: flex;
+    flex-direction: column;
+    .live-item-text {
+      display: block;
+      border-radius: 100rpx;
+      color: #fff;
+      width: 36rpx;
+      height: 36rpx;
+      background-color: #219430;
+      text-align: center;
+      line-height: 36rpx;
+    }
+
+    .live-item-text-green {
+      background-color: green !important;
+    }
+
+    .live-item-text-red {
+      background-color: red !important;
+    }
+
+    .live-item-text-block {
+      background-color: #999999 !important;
+      opacity: 0.7;
+    }
+
+    text {
+      // flex: 1;
+    }
+
+    .indexNumber {
+      width: 76rpx;
+
+      text {
+        display: block;
+        border-radius: 100rpx;
+        color: #fff;
+        width: 36rpx;
+        height: 36rpx;
+        background-color: #219430;
+        text-align: center;
+        line-height: 36rpx;
+      }
+    }
+
+    .indexRed {
+      width: 76rpx;
+
+      text {
+        display: block;
+        border-radius: 100rpx;
+        color: #fff;
+        width: 36rpx;
+        height: 36rpx;
+        background-color: red;
+        text-align: center;
+        line-height: 36rpx;
+      }
+    }
+  }
+
+  .green-card {
+    background-color: #f3f8fe;
+    margin-bottom: 8px;
+    .u-row {
+      padding: 24rpx;
+
+      .over17 {
+        background: #d8ecff;
+        border-radius: 10rpx;
+        border: 1rpx solid #b1d9ff;
+        text-align: center;
+        width: 101rpx;
+        margin-right: 24rpx;
+      }
+
+      .u-col {
+        text {
+          display: inline-block;
+        }
+
+        &:last-child {
+          border-left: 1rpx solid #b1d9ff;
+        }
+      }
+    }
+  }
+}
+@media screen and (orientation: landscape) {
+  .live {
+    .scroll-view {
+      height: 50vh;
+    }
+  }
+}
+</style>

pages/Live/compontent/detail-scorecard.vue

@@ -0,0 +1,305 @@
+<template>
+	<view class="Scorecard">
+		<view class="list">
+			<view class="list-item" v-for="(item,i) in list" :key="i" :class="{actives:acIndex==i}">
+				<u-row justify="space-between" @click="clickItem(i, item)">
+					<view class="flex">
+						<img class="logo" :src="matchDetail.home_logo || '/static/image/common/team.png'" alt="">
+						<div class="name">{{ item.name }}</div>
+						<text>{{ item.order }}</text>
+					</view>
+					<view class="open-image">
+						<text>{{ formaScore1(item.score) }}</text>
+						<text class="trti">{{ formaScore(item.score) }}</text>
+						<image src="../../../static/image/match/expert_down_ico-black.png" mode="heightFix"></image>
+					</view>
+				</u-row>
+				<view class="list-item-content">
+					<view class="table-item-content-th">
+						<text class="size24 c9">
+							<!-- BATTER -->
+						{{ $t('live.lab26') }}
+						</text>
+						<text class="size24 c9">R</text>
+						<text class="size24 c9">B</text>
+						<text class="size24 c9">4s</text>
+						<text class="size24 c9">6s</text>
+						<text class="size24 c9" style="text-align: right; padding-right: 10px;">S/R</text>
+					</view>
+					<view class="table-item-content-tr" v-for="(item) in obj.batting_info" :key="item.id + 1">
+						<text class="size28 c52">{{item.name}}
+							<br>
+							<text class="size24 a6" style="color: #219430;" v-if="item.batting == 'true'">Batting</text>
+							<text class="size24 a6" v-else>{{item.type}}</text>
+						</text>
+						<text class="size24 c3">{{item.runs || '0'}}</text>
+						<text class="size24 a6">{{item.ball_number || '0'}}</text>
+						<text class="size24 a6 overflow1">{{item.fours || '0'}}</text>
+						<text class="size24 a6">{{item.sixes || '0'}}</text>
+						<text class="size24 a6 overflow1" style="text-align: right;; padding-right: 10px;">{{$common.handleDigits2(item.strike_rate)}}</text>
+					</view>
+					<view class="pd24 flex flex-between end-item">
+						<text class="size28">
+							<!-- EXTRAS -->
+						{{ $t('live.lab27') }}
+						</text>
+						<view>
+							<!-- <text class="size24 c3">8</text> -->
+							<text class="size24">{{obj.extras}}</text>
+						</view>
+					</view>
+					<view class="pd24 flex-start end-item">
+						<text class="size28">
+							<!-- DID NOT BAT -->
+						{{ $t('live.lab28') }}
+							<br> <text class="size28">{{obj.no_batting_name}}</text>
+						</text>
+					</view>
+
+
+					<view class="table-item-content-th th2">
+						<text class="size24 c9">
+							<!-- BOWLER -->
+						{{ $t('live.lab29') }}
+						</text>
+						<text class="size24 c9">O</text>
+						<text class="size24 c9">M</text>
+						<text class="size24 c9">R</text>
+						<text class="size24 c9">W</text>
+						<text class="size24 c9">ER</text>
+					</view>
+					<view class="table-item-content-tr tr2" v-for="(item) in obj.bowling_info" :key="item.id + 2">
+						<text class="size28 c52">{{item.name}}
+						</text>
+						<text class="size24 c6">{{item.overs_bowled || '0'}}</text>
+						<text class="size24 c6">{{item.maidens || '0'}}</text>
+						<text class="size24 a6 overflow1">{{item.runs_conceded || '0'}}</text>
+						<text class="size24 a6">{{item.wides || '0'}}</text>
+						<text class="size24 a6">{{$common.handleDigits2(item.economy_rate)}}</text>
+					</view>
+
+					<view class="table-item-content-th th3">
+						<text class="size24 c9">
+							<!-- FALL OF WICKETS -->
+						{{ $t('live.lab30') }}
+						</text>
+						<text class="size24 c9">
+							<!-- SCORE -->
+						{{ $t('live.lab31') }}
+						</text>
+						<text class="size24 c9">
+							<!-- OVER -->
+						{{ $t('live.lab32') }}
+						</text>
+					</view>
+					<view class="table-item-content-tr tr3" v-for="(item) in obj.partnerships" :key="item.id + 3">
+						<text class="size28 c430">{{item.name}}
+						</text>
+						<text class="size24 c6">{{item.score || '0'}}-{{ item.order }}</text>
+						<text class="size24 a6">{{$common.handleDigits2(item.over)}}</text>
+					</view>
+				</view>
+			</view>
+		</view>
+		<u-empty
+			v-if="list.length == 0"
+			mode="data"
+			width="474"
+			height="312"
+			textSize="28"
+			marginTop="100"
+			:text="$t('common.nodata')"
+			icon="/static/image/common/nodata.png"
+		></u-empty>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: ['matchDetail', 'list'],
+		data() {
+			return {
+				obj: {
+					batting_info: [],
+					partnerships: [],
+					bowling_info: [],
+					no_batting_name: '',
+					extras: '',
+					total: ''
+				},
+				acIndex: null,
+			}
+		},
+		mounted() {
+			if (this.list.length) {
+				this.clickItem(this.list.length - 1, this.list[this.list.length - 1])
+			}
+		},
+		methods: {
+			clickItem(index, item) {
+				// console.log('index :>> ', index);
+				this.acIndex = (this.acIndex == index ? null : index)
+				// console.log(this.acIndex);
+				if (this.acIndex != null) {
+					this.getList(item)
+				}
+
+			},
+			getList(item) {
+				uni.$u.http.post('/api/Cricket/cricket_match_detail_scorecard', {
+					team_id: item.id,
+					id: this.matchDetail.match_id
+				}).then(res => {
+					// console.log(res);
+					this.obj = res
+				}).catch(res => {})
+			},
+			formaScore(v) {
+				if (!v) {
+					return "";
+				}
+				let s = v.replace("）", ")");
+				let index = v.indexOf(")");
+				return s.substring(index+1);
+			},
+			formaScore1(v) {
+				if (!v) {
+					return "";
+				}
+				let s = v.replace("）", ")");
+				let index = v.indexOf(")");
+				return s.substring(0, index+1);
+			},
+		},
+		
+	}
+</script>
+
+<style lang="scss">
+	.Scorecard {
+		padding: 12px 15rpx;
+		.list {
+			background: #ffffff;
+			border-radius: 5px;
+			overflow: hidden;
+			.list-item {
+				&+.list-item {
+					border-top: 1rpx solid #d1d1d1;
+				}
+				.u-row {
+					height: 68px;
+					background: #fff;
+					line-height: 68px;
+					padding: 0 18px;
+					font-size: 13px;
+					color: #999999;
+					.logo {
+						margin-right: 11px;
+						width: 30px;
+					}
+					.name {
+						font-size: 15px;
+						font-weight: 700;
+						color: #242424;
+						margin-right: 7px;
+					}
+					.open-image {
+						display: flex;
+						align-items: center;
+
+						image {
+							transition: all 0.5s ease;
+							width: 19rpx;
+							height: 19rpx;
+							margin-left: 24rpx;
+						}
+					}
+					.trti {
+						color: #333;
+						font-weight: 600;
+					}
+				}
+
+				.list-item-content {
+					height: 0rpx;
+					overflow: hidden;
+					transition: all 0.5s ease;
+
+					.table-item-content-th {
+						height: 27px;
+						background: rgba(16, 5, 74, .1);
+						border-radius: 5px;
+						display: grid;
+						grid-template-columns: 40% 10% 10% 10% 10% 20%;
+						grid-template-rows: 27px;
+						align-items: center;
+						padding-left: 24rpx;
+						color: #505255;
+					}
+
+					.table-item-content-tr {
+						display: grid;
+						grid-template-columns: 40% 10% 10% 10% 10% 20%;
+						// grid-template-rows:121rpx;
+						padding: 24rpx 0 24rpx 24rpx;
+						&+.table-item-content-tr {
+							border-top: 1rpx solid #D1D1D1;
+						}
+						.c52 {
+							color: #0C52D2;
+						}
+						.a6 {
+							color: #A6A6A6;
+						}
+					}
+
+					.th2 {
+						grid-template-columns: 50% 10% 10% 10% 10% 10%;
+						margin-top: 24rpx;
+					}
+
+					.tr2 {
+						grid-template-columns: 50% 10% 10% 10% 10% 10%;
+					}
+
+					.th3 {
+						margin-top: 24rpx;
+						grid-template-columns: 70% 15% 15%;
+					}
+
+					.tr3 {
+						grid-template-columns: 70% 15% 15%;
+					}
+
+					.end-item {
+						&:first-child {
+							border-bottom: 0;
+						}
+
+						border-top:1rpx solid #ccc;
+					}
+				}
+			}
+
+			.actives {
+				.u-row {
+					background-color: #1D2550;
+					color: #fff;
+					.trti,.name {
+						color: #fff;
+					}
+				}
+
+				.open-image {
+					image {
+						transform: rotateZ(180deg);
+					}
+				}
+				.list-item-content {
+					height: inherit;
+					padding: 24rpx 28rpx 0;
+				}
+			}
+		}
+	}
+</style>

pages/Live/compontent/detail-squad.vue

@@ -0,0 +1,240 @@
+<template>
+	<view class="Squad">
+		<!-- <view class="text-center"> -->
+			<!-- Playing 11 for the Match -->
+			<!-- {{ $t('live.lab33') }} -->
+		<!-- </view> -->
+		<view class="list">
+			<u-row justify="space-between" align="top">
+				<u-col span="6" class="left-list" style="border-right: 2rpx solid #f3f3f3;">
+					<view class="top">
+						<image :src="matchDetail.home_logo || '/static/image/common/team.png'" mode="aspectFit" class="list-pic" style="border-radius: 0;"></image>
+						<view class="size32 c3 Bold" style="text-align: center;">{{matchDetail.home_name}}</view>
+					</view>
+				</u-col>
+				<u-col span="6" class="right-list">
+					<view class="top">
+						<image :src="matchDetail.away_logo || '/static/image/common/team.png'" mode="aspectFit" class="list-pic mg-lt16" style="border-radius: 0;"></image>
+						<view class="size32 c3 Bold" style="text-align: center;">{{matchDetail.away_name}}</view>
+					</view>
+				</u-col>
+			</u-row>
+		</view>
+		<div class="bench">
+			<!-- Starters -->
+			{{ $t('match.la39') }}
+		</div>
+		<view class="list">
+			<u-row justify="space-between" align="top">
+				<u-col span="6" class="left-list" style="border-right: 2rpx solid #f3f3f3;">
+					<view class="list-item" v-for="(item,index) in detail_squad[1]" :key="index" @click="$toUrl('./teams/detail?id=' + item.id)">
+						<image :src="item.player_logo || '/static/image/common/[email protected]'" mode="aspectFill" class="list-pic"></image>
+						<view class="content">
+							<view class="size24 c3 Bold overflow1">{{item.player_name}}</view>
+							<view class="size24 c9">{{item.type}}</view>	
+						</view>
+					</view>
+				</u-col>
+				<u-col span="6" class="right-list">
+					<view class="list-item" v-for="(item,index) in detail_squad[0]" :key="index" @click="$toUrl('./teams/detail?id=' + item.id)">
+						<view class="content">
+							<view class="size24 c3 Bold overflow1" style="text-align: right;">{{item.player_name}}</view>
+							<view class="size24 c9" style="text-align: right;">{{item.type}}</view>	
+						</view>
+						<image :src="item.player_logo || '/static/image/common/[email protected]'" mode="aspectFill" class="list-pic"></image>
+					</view>
+				</u-col>
+			</u-row>
+			<u-empty
+				v-if="detail_squad[0] && detail_squad[0].length == 0"
+				mode="data"
+				width="474"
+				height="312"
+				textSize="28"
+				marginTop="100"
+				:text="$t('common.nodata')"
+				icon="/static/image/common/nodata.png"
+			>
+			</u-empty>
+		</view>
+		<div class="bench">
+			<!-- Bench -->
+			{{ $t('match.la40') }}
+		</div>
+		<view class="list">
+			<u-row justify="space-between" align="top">
+				<u-col span="6" class="left-list" style="border-right: 2rpx solid #f3f3f3;">
+					<view class="list-item" v-for="(item,index) in detail_bench[1]" :key="index" @click="$toUrl('./teams/detail?id=' + item.id)">
+						<image :src="item.player_logo || '/static/image/common/[email protected]'" mode="aspectFill" class="list-pic"></image>
+						<view class="content">
+							<view class="size24 c3 Bold overflow1">{{item.player_name}}</view>
+							<view class="size24 c9">{{item.type}}</view>	
+						</view>
+					</view>
+				</u-col>
+				<u-col span="6" class="right-list">
+					<view class="list-item" v-for="(item,index) in detail_bench[0]" :key="index" @click="$toUrl('./teams/detail?id=' + item.id)">
+						<view class="content">
+							<view class="size24 c3 Bold overflow1" style="text-align: right;">{{item.player_name}}</view>
+							<view class="size24 c9" style="text-align: right;">{{item.type}}</view>	
+						</view>
+						<image :src="item.player_logo || '/static/image/common/[email protected]'" mode="aspectFill" class="list-pic"></image>
+					</view>
+				</u-col>
+			</u-row>
+			<u-empty
+				v-if="detail_bench[0] && detail_bench[0].length == 0"
+				mode="data"
+				width="474"
+				height="312"
+				textSize="28"
+				marginTop="100"
+				:text="$t('common.nodata')"
+				icon="/static/image/common/nodata.png"
+			>
+			</u-empty>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+      matchDetail: {
+        default: {}
+      }
+    },
+		data() {
+			return {
+				detail_squad: [],
+				detail_bench: [],
+			}
+		},
+    created() {
+      this.cricket_match_detail_squad()
+      this.cricket_match_detail_squad_bench()
+    },
+		methods: {
+			cricket_match_detail_squad() {
+				uni.$u.http.post('/api/Cricket/cricket_match_detail_squad',{
+          match_id: this.matchDetail.match_id,
+          tournament_id: this.matchDetail.tournament_id,
+          away_id: this.matchDetail.away_id,
+        }).then(res=>{
+					
+					// if(res.length == 0) return
+					let detail_squad = [
+						[],
+						[]
+					];
+					res.forEach(item=>{
+						let obj1 = {
+							player_logo:item.away_player_logo,
+							player_name:item.away_player_name,
+							type:item.away_type,
+							id:item.away_player_id
+						}
+						let obj2 = {
+							player_logo:item.home_player_logo,
+							player_name:item.home_player_name,
+							type:item.home_type,
+							id:item.home_player_id
+						}
+						
+						detail_squad[0].push(obj1)
+						detail_squad[1].push(obj2)
+					})
+					this.detail_squad = detail_squad
+				}).catch(res=>{})
+			},
+			cricket_match_detail_squad_bench() {
+				uni.$u.http.post('/api/Cricket/cricket_match_detail_squad_bench',{
+          match_id: this.matchDetail.match_id,
+          tournament_id: this.matchDetail.tournament_id,
+          away_id: this.matchDetail.away_id,
+        }).then(res=>{
+					
+					// if(res.length == 0) return
+					let detail_squad = [
+						[],
+						[]
+					];
+					res.forEach(item=>{
+						if (item.away_player_name) {
+							let obj1 = {
+								player_logo:item.away_player_logo,
+								player_name:item.away_player_name,
+								type:item.away_type,
+								id:item.away_player_id
+							}
+							detail_squad[0].push(obj1)
+						}
+						if (item.home_player_name) {
+							let obj2 = {
+								player_logo:item.home_player_logo,
+								player_name:item.home_player_name,
+								type:item.home_type,
+								id:item.home_player_id
+							}
+							
+							detail_squad[1].push(obj2)
+						}
+					})
+					this.detail_bench = detail_squad
+				}).catch(res=>{})
+			}
+		},
+	}
+</script>
+
+<style lang="scss">
+	.Squad {
+		padding: 19px 0 12px;
+		background-color: #fff;
+		>.text-center {
+			padding-bottom: 15px;
+			font-size: 18px;
+			font-weight: 700;
+		}
+	}
+	.list{
+		padding: 7px 7px 14px;
+		background-color: #fff;
+		border-radius: 5px;
+		.top {
+			display: flex;
+			align-items: center;
+			flex-direction: column;
+			margin-bottom: 36rpx;
+		}
+		.list-item{
+			margin-bottom: 36rpx;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			column-gap: 18rpx;
+		}
+		.content {
+			flex: 1;
+			min-width: 10%;
+			max-width: 100%;
+		}
+		.right-list{
+			text-align: right;
+		}
+		.list-pic{
+			width: 80rpx;
+			height: 80rpx;
+			border-radius: 50%;
+		}
+	}
+	.bench{
+		text-align: center;
+		line-height: 100rpx;
+		font-size: 32rpx;
+		color: #999;
+		font-weight: bold;
+  	background-color: rgb(251, 251, 252);
+		margin-bottom: 36rpx;
+	}
+</style>

pages/Live/compontent/historyList.vue

@@ -0,0 +1,229 @@
+<!-- 推荐 -->
+<template>
+  <view class="list">
+    <div>
+      <div><img src="/static/image/live/detail01.png" />
+        <!-- History -->
+			{{ $t('live.title3') }}
+      </div>
+      <div>
+        <!-- See More -->
+			{{ $t('live.more1') }}
+      </div>
+    </div>
+    <u-empty
+      v-if="robot.length == 0"
+      mode="data"
+      width="474"
+      height="312"
+      textSize="28"
+      marginTop="100"
+      :text="$t('common.nodata')"
+      icon="/static/image/common/nodata.png"
+    >
+    </u-empty>
+    <!-- History -->
+    <u-row>
+      <u-col span="6">
+        <view
+          class="detail-video-li"
+          style="position: relative"
+          v-for="(item, index) in robot"
+          :key="index"
+          @click="historyLive(item)"
+        >
+          <u--image
+            :showLoading="true"
+            :src="item.img"
+            width="100%"
+            height="176rpx"
+          >
+            <template v-slot:loading>
+              <image
+                class="loading-list-img"
+                src="/static/image/common/live-list-bg.png"
+              ></image>
+            </template>
+          </u--image>
+          <image
+            src="/static/image/live/live-history-icon.png"
+            mode=""
+            class="history-icon"
+          ></image>
+          <view class="detail-video-content">
+            <view class="detail-video-title text-clamp2">
+              {{ item.Name }}
+            </view>
+            <view class="detail-video-right flex">
+              <image
+                class="detail-video-content-logo"
+                :src="item.UserHead"
+                mode="aspectFill"
+              ></image>
+              <view class="detail-video-info flex">
+                <text class="text-clamp">{{ item.UserName }}</text>
+                <image src="/static/image/live/detail-hot.png" mode=""></image>
+                <!-- <view>{{item.Heat}}</view> -->
+              </view>
+            </view>
+          </view>
+        </view>
+      </u-col>
+      <u-col span="6">
+        <view
+          class="detail-video-li"
+          style="position: relative"
+          v-for="(item, index) in robot"
+          :key="index"
+          @click="historyLive(item)"
+        >
+          <u--image
+            :showLoading="true"
+            :src="item.img"
+            width="100%"
+            height="176rpx"
+          >
+            <template v-slot:loading>
+              <image
+                class="loading-list-img"
+                src="/static/image/common/live-list-bg.png"
+              ></image>
+            </template>
+          </u--image>
+          <image
+            src="/static/image/live/live-history-icon.png"
+            mode=""
+            class="history-icon"
+          ></image>
+          <view class="detail-video-content">
+            <view class="detail-video-title text-clamp2">
+              {{ item.Name }}
+            </view>
+            <view class="detail-video-right flex">
+              <image
+                class="detail-video-content-logo"
+                :src="item.UserHead"
+                mode="aspectFill"
+              ></image>
+              <view class="detail-video-info flex">
+                <text class="text-clamp">{{ item.UserName }}</text>
+                <image src="/static/image/live/detail-hot.png" mode=""></image>
+                <!-- <view>{{item.Heat}}</view> -->
+              </view>
+            </view>
+          </view>
+        </view>
+      </u-col>
+    </u-row>
+  </view>
+</template>
+
+<script>
+import { numberToK } from "@/utils/util";
+export default {
+  data() {
+    return {
+      robot: [],
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    // 点击history
+    historyLive(item) {
+      uni.navigateTo({
+				url:`/pages/Live/history-detail?id=${item.Uid}&ID=${item.live_id}&MediaUrl=${item.MediaUrl}`
+      });
+    },
+    toUrlLive(item) {
+      gtag("event", "live_H5", {
+        live_H5: "0",
+      });
+      if (item.islive == 0) {
+        uni.$u.toast(this.$t('live.lab35'));
+      } else {
+        uni.navigateTo({
+          url: `./live-detail?id=${item.live_id}&ID=${item.id}`,
+        });
+      }
+    },
+    getList() {
+      uni.$u.http
+        .get("/api/LivePlayBack/list", {})
+        .then((res) => {
+          this.robot = (res.list || []).slice(0, 6);
+        });
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.detail-video-li {
+  overflow: hidden;
+  margin-top: 20rpx;
+  border-radius: 12rpx;
+  background-color: white;
+  .loading-list-img {
+    width: 100%;
+    height: 176rpx;
+  }
+  .history-icon {
+    position: absolute;
+    right: 10rpx;
+    bottom: 170rpx;
+    width: 150rpx;
+    height: 42rpx;
+  }
+  .detail-video-li-logo {
+    width: 100%;
+    height: 176rpx;
+    display: block;
+  }
+
+  .detail-video-content {
+    padding: 16rpx;
+
+    .detail-video-content-logo {
+      width: 40rpx;
+      height: 40rpx;
+      border-radius: 50%;
+      margin-right: 24rpx;
+    }
+
+    .detail-video-title {
+      width: 99%;
+      height: 80rpx;
+      color: #333;
+      font-size: 28rpx;
+    }
+  }
+
+  .detail-video-info {
+    font-size: 24rpx;
+    flex: 1;
+
+    image {
+      width: 24rpx;
+      height: 24rpx;
+      margin-right: 6rpx;
+    }
+
+    text {
+      flex: 1;
+      width: 100rpx;
+      color: #9193b4;
+    }
+
+    view {
+      color: #999;
+    }
+  }
+}
+
+.detail-video-right {
+  flex: 1;
+  min-width: 100px;
+}
+</style>

pages/Live/compontent/historyMainList.vue

@@ -0,0 +1,246 @@
+<!-- 推荐 -->
+<template>
+	<view class="history">
+		<div class="box2">
+			<div class="title"><div :class="{'fadeInRight': animationLoaded}">{{$t('live.title3')}}</div> <div class="all" :class="{'fadeInLeft': animationLoaded}" @click="$toUrl('./list?type=2')">{{ $t('live.lab50') }}</div></div>
+			<div class="list-box" :class="{'fadeInTop': animationLoaded}">
+				<div class="item" @click="toMatchLive(item)" v-for="(item, index) in list" :key="item.id">
+          <img class="high" src="/static/image/live/high.png" alt="">
+          <div class="body" :class="'body' + (index%3)">
+            <div class="top">
+              <div class="time-box">
+                <div class="start_time">{{ parseTime(item.starttime) }}</div>
+              </div>
+              <div class="match-box">
+                <div class="img-box">
+                  <img class="home_logo" :src="item.home_logo || '/static/image/common/team.png'" alt="">
+                </div>
+                <div>
+									<img class="vs" src="/static/image/live/vs.png" alt="">
+								</div>
+                <div class="img-box">
+                  <img class="home_logo" :src="item.away_logo || '/static/image/common/team.png'" alt="">
+                </div>
+              </div>
+            </div>
+            <div class="bottom">
+              <div class="name">
+                <div class="left">{{ item.home_name }}</div>
+                <div class="score">{{ formaScore(item.home_display_score) }}{{ formaScore1(item.home_display_score) }}</div>
+              </div>
+              <div class="name">
+                <div class="left">{{ item.away_name }}</div>
+                <div class="score">{{ formaScore(item.away_display_score) }}{{ formaScore1(item.away_display_score) }}</div>
+              </div>
+              <view class="detail-video-info">
+                <u-icon color="#fff" name="eye" size="24rpx" v-if="item.viewers"></u-icon>
+                <view>{{numberToK(item.viewers)}}</view>
+              </view>
+            </div>
+          </div>
+				</div>
+				<div class="item" v-if="list.length == 0">
+					<img class="load1" src="/static/image/live/load2.png" alt="">
+				</div>
+			</div>
+		</div>
+	</view>
+</template>
+<script>
+import animationMixin from '@/pages/mixins/animation'
+import { numberToK, parseTime } from '@/utils/util'
+	export default {
+  	mixins: [animationMixin],
+		data() {
+			return {
+				list: [],
+				loading: false
+			}
+		},
+		created() {
+			this.getList()
+		},
+		methods: {
+			toMatchLive(item) {
+				uni.navigateTo({
+					url:`/pages/Live/history-detail?id=${item.Uid}&ID=${item.live_id}&MediaUrl=${item.mediaUrl}`
+				})
+			},
+			getList() {
+				this.loading = true
+				uni.$u.http.get('/api/live_streaming/get_history_live', {
+          params:{page: 1}
+        }).then(res => {
+          this.list = res.list || []
+				}).finally(() => {
+					this.loading = false
+					if (this.animationLoaded) {
+            return
+          }
+          this.animationLoaded = true
+          this.$nextTick(() => {
+            this.scrollFun()
+          })
+				})
+			},
+      parseTime(t) {
+				return parseTime(t, '{y}-{m}-{d} {h}:{i}')
+			},
+      numberToK(v) {
+				return numberToK(v)
+			},
+			formaScore(v){
+				if (!v) {
+					return ''
+				}
+				let s = v.replace("（", '(')
+				let index = v.indexOf('(')
+				return s.substring(index)
+			},
+			formaScore1(v){
+				if (!v) {
+					return ''
+				}
+				let s = v.replace("（", '(')
+				let index = v.indexOf('(')
+				return s.substring(0, index)
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+.history {
+  padding-bottom: 40rpx;
+}
+.box2 {
+	padding-left: 29rpx;
+	.title {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		font-weight: bold;
+		color: #242424;
+		font-size: 30rpx;
+		line-height: 1;
+		padding: 52rpx 29rpx 25rpx 0;
+	}
+	.all {
+		font-size: 28rpx;
+		color: #FF3300;
+	}
+}
+.list-box {
+	display: flex;
+	align-items: center;
+	flex-wrap: nowrap;
+	overflow-x: auto;
+	.item {
+    padding: 5rpx;
+    position: relative;
+		margin-right: 20rpx;
+		color: #fff;
+    margin-right: 13rpx;
+	}
+  .high {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 10.04vw;
+  }
+	.body {
+		min-width: 35.74vw;
+		max-width: 35.74vw;
+    border-radius: 24rpx;
+    overflow: hidden;
+    box-shadow: 0px 4px 10px 0px rgba(142,142,142,0.33);
+	}
+	.body0 {
+		background-color: #5A25D1;
+	}
+	.body1 {
+		background-color: #2549D1;
+	}
+	.body2 {
+		background-color: #484848;
+	}
+  .top {
+    background-color: rgba(255, 255, 255, 0.1);
+    padding: 18rpx 20rpx 13rpx;
+  }
+  .bottom {
+    padding: 24rpx 20rpx 30rpx;
+  }
+  .time-box {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 12rpx;
+  }
+  .start_time {
+    padding: 10rpx 3.03vw;
+    border-radius: 19rpx;
+    background-color: rgba(255, 255, 255, 0.15);
+    font-size: 3.03vw;
+    font-weight: 400;
+    line-height: 1;
+    white-space: nowrap;
+  }
+	.match-box {
+		display: flex;
+		align-items: center;
+    justify-content: space-around;
+	}
+	.img-box {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		.text-clamp {
+			width: 8.52vw;
+			text-align: center;
+		}
+	}
+	.home_logo {
+		height: 6.77vw;
+		display: block;
+	}
+	.vs {
+		width: 4.9vw;
+		display: block;
+	}
+	.name {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 3.03vw;
+    font-weight: bold;
+    line-height: 1;
+    &+.name {
+      margin-top: 2.1vw;
+    }
+		.left {
+			flex: 1;
+			min-width: 5%;
+			max-width: 100%;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+  }
+  .score {
+    font-weight: 400;
+  }
+  .detail-video-info {
+    display: flex;
+    align-items: center;
+    font-size: 24rpx;
+    color: #FFFFFF;
+    line-height: 1;
+    opacity: 0.5;
+    padding-top: 27rpx;
+  }
+	.load1 {
+		width: 35.74vw;
+		display: block;
+	}
+}
+</style>

pages/Live/compontent/list-1.vue

@@ -0,0 +1,252 @@
+<!-- 分类 -->
+<template>
+	<view class="list">
+		<view class="tabList">
+			<view class="">
+				<text :class="{'active':tabIndex == 0}" @click="setIndex(0)">足球</text>
+				<text :class="{'active':tabIndex == 1}" @click="setIndex(1)">篮球</text>
+			</view>
+			<view class="index-time-type flex">
+				<view class="index-time-type-i flex-center" :class="timeIndex==0?'index-time-type-li':''"
+					@click="getTimeIndex(0)">
+					<view>今日</view>
+				</view>
+				<view class="index-time-type-i flex-center" :class="index==timeIndex?'index-time-type-li':''"
+					@click="getTimeIndex(index)" v-for="(item,index) in dateTime" v-if="index!=0" :key="index">
+					<view>{{item.data}}</view>
+					<view>{{item.time}}</view>
+				</view>
+			</view>
+		</view>
+
+		<view class="list-li" v-for="(item,index) in list.data" :key="index"
+			@click="$navigateTo(tabIndex == 0?'../competition/detail?id=' + item.sourceid:'../competition/basketballDetail?id=' + item.sourceid)">
+			<view class="list-li-title">
+				{{item.competition}}
+				<text>{{item.match_time}}</text>
+			</view>
+			<view class="list-li-content flex-center">
+				<view class="list-li-content-i flex">
+					<text class="text-clamp">{{item.home_team_name}}</text>
+					<image :src="item.home_team_logo" mode=""></image>
+				</view>
+				<view class="list-li-content-VS">{{item.home_scores}}-{{item.away_scores}}</view>
+				<view class="list-li-content-i flex">
+					<image :src="item.away_team_logo" mode=""></image>
+					<text class="text-clamp">{{item.away_team_name}}</text>
+				</view>
+			</view>
+			<!-- 0 未开始 2 已结束 -->
+			<view class="list-status" :class="{'start':item.status_type == 0}">
+				{{item.status_type == 0?'预约':item.status_str}}
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				page: 1,
+				tabIndex: 0,
+				list: {},
+				dateTime: [],
+				timeIndex: 0,
+				liveList: []
+			}
+		},
+		mounted() {
+			this.get6Days()
+			this.getList(1)
+		},
+		methods: {
+			// 切换
+			setIndex(index) {
+				this.tabIndex = index
+				this.page = 1
+				this.getList(index + 1)
+				uni.pageScrollTo({
+					scrollTop: 0
+				})
+
+			},
+			getTimeIndex(i) {
+				this.timeIndex = i
+				this.page = 1
+				this.list = {}
+
+				this.getList(this.tabIndex)
+			},
+			/*  */
+			get6Days() { //type==1前,2后
+				//获取系统当前时间
+				var now = new Date();
+				var nowTime = now.getTime();
+				var oneDayTime = 24 * 60 * 60 * 1000;
+				let arr = []
+				for (var i = 0; i < 6; i++) {
+					//显示周一
+					var ShowTime = nowTime + i * oneDayTime;
+
+					//                    var ShowTime = nowTime + (i+1)*oneDayTime ; 
+					//初始化日期时间
+					var myDate = new Date(ShowTime);
+					var year = myDate.getFullYear();
+					var month = myDate.getMonth() + 1;
+					var date = myDate.getDate();
+					var str = "星期" + "日一二三四五六".charAt(myDate.getDay());
+					arr.push({
+						data: month + "/" + date.toString().padStart(2, '0'),
+						time: str,
+						day: year + '-' + month + '-' + date
+					})
+				}
+				this.dateTime = arr
+			},
+			getList(index) {
+				// 赛事/赛程
+				let data = {
+					page: this.page,
+					match_type: index,
+					date: this.dateTime[this.timeIndex].day
+				}
+				this.$u.post('/api/hot_match/schedule', data).then(res => {
+
+					if (this.page == 1) {
+						this.list = res
+					} else {
+						this.list.data = [...this.list.data, ...res.data]
+					}
+					console.log(res);
+					if (this.list.data.length < res.total) {
+						this.page++
+					}
+				})
+
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.index-time-type {
+		color: #999;
+		margin: 20rpx 0;
+		padding: 0 24rpx;
+		font-size: 24rpx;
+		text-align: center;
+
+		.index-time-type-li {
+			color: #87390E;
+			background-color: #FFF1E0;
+		}
+
+		.index-time-type-i {
+			width: 104rpx;
+			height: 86rpx;
+		}
+	}
+
+	.list {
+		// height: 40vh;
+		padding: 0 24rpx;
+		padding-bottom: 200rpx;
+		position: relative;
+		// margin-top: 22vh;
+		margin-top: 200rpx !important;
+	}
+
+	.list-li {
+		overflow: hidden;
+		padding: 0 24rpx;
+
+		margin-bottom: 20rpx;
+		text-align: center;
+		border-radius: 12rpx;
+		background-color: white;
+
+		.list-li-title {
+			color: #959DB0;
+			font-size: 24rpx;
+			position: relative;
+			padding: 16rpx 0 12rpx 0;
+
+			text {
+				position: absolute;
+				left: 0;
+
+			}
+		}
+
+		.list-li-content {
+			flex-wrap: nowrap;
+
+			image {
+				width: 44rpx;
+				height: 44rpx;
+				margin: 0 6rpx;
+			}
+		}
+
+		.list-li-content-i {
+
+			flex: 1;
+			color: #333;
+			font-size: 28rpx;
+
+			text {
+				max-width: 79px;
+			}
+		}
+
+		.list-li-content-VS {
+			color: #87390E;
+			padding: 0 48rpx;
+			font-size: 36rpx;
+			font-weight: bold;
+		}
+
+		.list-status {
+			color: #999;
+			width: 136rpx;
+			font-size: 24rpx;
+			margin: 12rpx auto;
+			padding: 8rpx 32rpx;
+			border-radius: 40rpx;
+			background-color: #F1F1F1;
+		}
+
+		.start {
+			color: #87390E;
+			background-color: #FFDFAB;
+		}
+	}
+
+	.tabList {
+		position: fixed;
+		top: 82rpx;
+		left: 0;
+		right: 0;
+		z-index: 99;
+		padding: 20rpx 0;
+		// margin: 10rpx 0;
+		text-align: center;
+		background-color: #F3F3F7;
+
+		text {
+			color: #666;
+			width: 100rpx;
+			height: 44rpx;
+			font-size: 28rpx;
+			padding: 8rpx 22rpx;
+			border-radius: 4rpx;
+
+		}
+
+		.active {
+			color: #FFF;
+			background: linear-gradient(90deg, #FFDFAB 0%, #E3AC72 100%);
+		}
+	}
+</style>

pages/Live/compontent/list-2.vue

@@ -0,0 +1,566 @@
+<!-- 推荐 -->
+<template>
+	<view class="list">
+		<view class="list-swiper">
+			<!-- <image src="" mode="scaleToFill"></image> -->
+			<view class=""
+				style="background: rgb(221, 221, 221);width: 100%;height: 60vw;border-radius: 20rpx;"
+				v-if="list.length == 0">
+
+			</view>
+			<swiper v-else class="swiper" circular :indicator-dots="false" @change="swiperChange" :autoplay="true" :interval="2000"
+					:duration="500">
+				<swiper-item v-for="(item, index) in list" :key="index" @click="swiperClick(item)">
+					<u--image
+						mode="scaleToFill"
+						:showLoading="true"
+						:src="item.img"
+						width="100%"
+						height="60vw"
+					>
+						<template v-slot:loading>
+							<image class="loading-banner-img" src="/static/image/common/video-banner-bg.png"></image>
+						</template>
+					</u--image>
+				</swiper-item>
+			</swiper>
+			<div v-if="list.length > 1" class="swiper__indicator">
+				<div class="line__bar" :style="{'width': lineWidth, 'transform': lineTransform}"></div>
+			</div>
+		</view>
+		<todayList v-if="todayList.length > 0" :todayList="todayList"></todayList>
+		<comingList v-if="comingList.length > 0" :comingList="comingList" :todayListLength="todayList.length"></comingList>
+		<view class="detail-title flex-start" v-if="live_commentary.length>0">
+			<image src="/static/image/live/detail01.png" mode=""></image>
+			<text>{{$t('live.title2')}}</text>
+			<!-- <view class="" v-if="item1.length != 0" @click="$toUrl('./list?type=' + i)">
+				{{$t('live.more')}}>
+			</view> -->
+		</view>
+		<view class="detail-video-list flex">
+			<view class="detail-video-li" style="position: relative;" v-for="(item,index) in live_commentary" :key="index"
+				@click="toUrlLive(item)">
+				<div v-if="item.islive==0" class="zhezao">{{formatDate(item.starttime)}}</div>
+				<div class="img_box">
+					<u--image :showLoading="true" :src="(item.home_logo && item.away_logo) ? item.bottom : item.thumb" width="100%" height="176rpx">
+						<template v-slot:loading>
+							<image class="loading-list-img" src="/static/image/common/live-list-bg.png"></image>
+						</template>
+					</u--image>
+					<image v-if="item.home_logo && item.away_logo" class="home_logo" :src="item.home_logo" mode="aspectFill" alt=""></image>
+					<image v-if="item.home_logo && item.away_logo" class="away_logo" :src="item.away_logo" mode="aspectFill" alt=""></image>
+				</div>
+				<image v-if="item.islive==1" src="/static/image/live/live-icon.png" mode="" class="live-icon"></image>
+				<view class="detail-video-content ">
+					<view class="detail-video-title text-clamp2">
+						{{item.title}}
+					</view>
+					<view class="detail-video-right flex">
+						<image class="detail-video-content-logo" :src="item.avatar" mode="aspectFill"></image>
+						<view class="detail-video-info flex">
+							<text class="text-clamp">{{item.user_nickname}}</text>
+							<u-icon color="#999" name="eye" size="30" v-if="item.viewers && item.islive==1"></u-icon>
+							<view v-if="item.islive==1">{{numberToK(item.viewers)}}</view>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="detail-title flex-start">
+			<image src="/static/image/live/detail01.png" mode=""></image>
+			<text>{{$t('live.title3')}}</text>
+			<view class="more" v-if="robotLength > 6" @click="$toUrl('./list?type=2')">
+				{{$t('live.more')}}<u-icon name="arrow-right" color="#DC3C23" size="28rpx"></u-icon>
+			</view>
+		</view>
+		<u-empty v-if="robot.length == 0" mode="data" width="474" height="312" textSize="28" marginTop="100"
+			:text="$t('common.nodata')" icon="/static/image/common/nodata.png">
+		</u-empty>
+		<!-- History -->
+		<view class="detail-video-list flex">
+			<view class="detail-video-li" style="position: relative;" v-for="(item,index) in robot" :key="index"
+				@click="historyLive(item)">
+				<div class="img_box">
+					<u--image :showLoading="true" :src="item.bottom" width="100%" height="176rpx">
+						<template v-slot:loading>
+							<image class="loading-list-img" src="/static/image/common/live-list-bg.png"></image>
+						</template>
+					</u--image>
+					<image class="home_logo" :src="item.home_logo" mode="aspectFill" alt=""></image>
+					<image class="away_logo" :src="item.away_logo" mode="aspectFill" alt=""></image>
+				</div>
+				<image src="/static/image/live/live-history-icon.png" mode="" class="history-icon"></image>
+				<view class="detail-video-content ">
+					<view class="detail-video-title1 text-clamp">
+						{{item.Name}}
+					</view>
+					<div class="start_time">{{ parseTime1(item.start_time) }}</div>
+					<view class="detail-video-right flex">
+						<image class="detail-video-content-logo" :src="item.UserHead" mode="aspectFill"></image>
+						<view class="detail-video-info flex">
+							<text class="text-clamp">{{item.UserName}}</text>
+							<u-icon color="#999" name="eye" size="30" v-if="item.viewers"></u-icon>
+							<view>{{numberToK(item.viewers)}}</view>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+		<u-toast ref="uToast"></u-toast>
+	</view>
+</template>
+
+<script>
+import todayList from "./todayList.vue";
+import comingList from "./comingList.vue";
+import { numberToK, parseTime } from '@/utils/util'
+	export default {
+		components: {
+			todayList,
+			comingList,
+		},
+		data() {
+			return {
+				// list: [{
+				// 		image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
+				// 		title: '昨夜星辰昨夜风，画楼西畔桂堂东'
+				// 	},
+				// 	{
+				// 		image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
+				// 		title: '身无彩凤双飞翼，心有灵犀一点通'
+				// 	},
+				// 	{
+				// 		image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
+				// 		title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
+				// 	}
+				// ],
+				liveList: {
+					live_commentary: {},
+					nolive_broadcast: {},
+					robot: {}
+				},
+				todayList: [],
+				comingList: [],
+				live_commentary: [],
+				nolive_broadcast: [],
+				robot: [],
+				bannerList: [],
+				robotLength: 0,
+				swiperCurrent: 0
+			}
+		},
+		props: {
+			list: {
+				type: Array,
+				default: []
+			}
+		},
+		computed: {
+			lineWidth() {
+				return (1/this.list.length) * 100 + '%'
+			},
+			lineTransform() {
+				return `translateX(${100 * this.swiperCurrent}%)`
+			}
+		},
+		mounted() {
+			this.getList()
+		},
+		methods: {
+			swiperClick(item) {
+				if (item.anchor_id) {
+					uni.navigateTo({
+						url: `./live-detail?id=${item.anchor_id}&ID=${item.id}`
+					})
+					return
+				}
+				if (item.param_id) {
+					uni.navigateTo({
+						url: '/pages/Match/match-detail?id=' + item.param_id
+					})
+					return
+				}
+			},
+			// 点击history
+			historyLive(item) {
+				// console.error(item)
+				// return
+				uni.navigateTo({
+					url:`/pages/Live/history-detail?id=${item.Uid}&ID=${item.live_id}&MediaUrl=${item.MediaUrl}`
+				})
+			},
+			/* 跳转 */
+			toUrl(item) {
+				console.log(item);
+				/* item.type == 1?'basketball':'football */
+				if (item.type == 1) {
+					uni.navigateTo({
+						url: '../competition/basketballDetail?id=' + item.id
+					})
+				} else {
+					uni.navigateTo({
+						url: '../competition/detail?id=' + item.sourceid
+					})
+				}
+			},
+			toUrlLive(item) {
+				gtag('event', 'live_H5', {
+					'live_H5': '0'
+				});
+				uni.navigateTo({
+					url: `./live-detail?id=${item.live_id}&ID=${item.id}`
+				})
+			},
+			getList() {
+				uni.$u.http.get('/api/live_streaming/getLiveList', {
+					params: 2
+				}).then(res => {
+					this.live_commentary = res.data || []
+				})
+				uni.$u.http.get('/api/live_streaming/getLiveListNew', {
+					params: {
+						timeZone: this.$store.state.timeZone
+					}
+				}).then(res => {
+					this.todayList = res.toay || [];
+					this.comingList = res.upcoming || [];
+				})
+				uni.$u.http.get('/api/LivePlayBack/list', {}).then(res => {
+					if (res.list) {
+						this.robotLength = res.list.length
+						this.robot = res.list.slice(0, 6)
+					} else {
+						this.robot = []
+					}
+				})
+			},
+			swiperChange(e) {
+				this.swiperCurrent = e.detail.current
+			},
+			numberToK(v) {
+				return numberToK(v)
+			},
+			formatDate(value) {
+				var date1 = this.$common.parseTime(value * 1000, '{y}/{m}/{d} {h}:{i}:{s}')
+				var date = new Date(date1 + ' UTC+5:30');
+				var weekNum = new Date().getDay()
+				let week = ""
+				switch (weekNum) {
+					case 0:
+						week = "Sun";
+						break;
+					case 1:
+						week = "Mon";
+						break;
+					case 2:
+						week = "Tue";
+						break;
+					case 3:
+						week = "Wed";
+						break;
+					case 4:
+						week = "Thu";
+						break;
+					case 5:
+						week = "Fri";
+						break;
+					case 6:
+						week = "Sat";
+						break;
+				}
+				var MonthNum = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1)
+				let Month = ''
+				switch (MonthNum) {
+					case 1:
+						Month = "Jan";
+						break;
+					case 2:
+						Month = "Feb";
+						break;
+					case 3:
+						Month = "Mar";
+						break;
+					case 4:
+						Month = "Apr";
+						break;
+					case 5:
+						Month = "May";
+						break;
+					case 6:
+						Month = "Jun";
+						break;
+					case 7:
+						Month = "Jul";
+						break;
+					case 8:
+						Month = "Aug";
+						break;
+					case 9:
+						Month = "Sept";
+						break;
+					case 10:
+						Month = "Oct";
+						break;
+					case 11:
+						Month = "Nov";
+						break;
+					case 12:
+						Month = "Dec";
+						break;
+				}
+				let day = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate())
+				// this.week = week
+				// this.month = Month
+				// this.day = day
+				var hours = date.getHours();
+				var minutes = date.getMinutes();
+				var ampm = hours >= 12 ? 'PM' : 'AM';
+				if (hours != 12) {
+          hours = hours % 12;
+        }
+        if (hours == 12 && minutes) {
+          hours = hours % 12;
+          ampm = 'PM'
+        }
+        hours = hours < 10 ? "0" + hours : hours;
+				minutes = minutes < 10 ? '0' + minutes : minutes;
+				// var strTime = week + ',' + day + Month + '.' + 'Watch live in' + hours + ':' + minutes + ' ' + ampm;
+				var strTime = this.$t('match.lab92') + ' ' + hours + ':' + minutes + ' ' + ampm;
+				return strTime;
+			},
+			parseTime(t) {
+				return parseTime(t, '{m}-{d} {h}:{i}')
+			},
+			parseTime1(t) {
+				return parseTime(t, '{y}-{m}-{d} {h}:{i}')
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.zhezao {
+		background: rgba(0, 0, 0, 0.5);
+		position: absolute;
+		top: 0;
+		left: 0;
+		z-index: 2;
+		color: #fff;
+		text-align: center;
+		line-height: 1;
+		padding: 10rpx 6rpx;
+		border-radius: 6rpx;
+		font-size: 16rpx;
+		white-space: nowrap;
+	}
+
+	.live-icon {
+		position: absolute;
+		right: 10rpx;
+		bottom: 160rpx;
+		width: 60rpx;
+		height: 32rpx;
+	}
+
+	.history-icon {
+		position: absolute;
+		right: 10rpx;
+		bottom: 160rpx;
+		width: 120rpx;
+		height: 34rpx;
+	}
+
+	.list {
+		padding-bottom: 140rpx;
+	}
+
+	.detail-video-list {
+		padding: 4rpx 18rpx;
+		flex-wrap: wrap;
+		.loading-list-img {
+			width: 100%;
+			height: 176rpx;
+		}
+	}
+	.img_box {
+		position: relative;
+	}
+	.home_logo, .away_logo {
+		position: absolute;
+		top: 50%;
+		transform: translateY(-50%);
+		width: 90rpx;
+		height: 90rpx;
+		border-radius: 50%;
+	}
+	.home_logo {
+		left: 30rpx;
+	}
+	.away_logo {
+		right: 30rpx;
+	}
+	.list-swiper {
+		padding: 0;
+		position: relative;
+		.swiper {
+			height: 60vw;
+		}
+		.loading-banner-img {
+			width: 100%;
+			height: 60vw;
+		}
+		.swiper__indicator {
+			position: absolute;
+			left: 50%;
+			transform: translateX(-50%);
+			bottom: 10rpx;
+			border-radius: 3rpx;
+			width: 110rpx;
+			background-color: rgba(255, 255, 255, 0.35);
+		}
+		.line__bar {
+			background-color: #fff;
+			height: 4rpx;
+			border-radius: 3rpx;
+			transition: transform 0.3s, -webkit-transform 0.3s;
+		}
+	}
+
+	.list-roll {
+		margin-top: 20rpx;
+	}
+
+	.list-roll-li {
+		padding: 16rpx;
+		min-width: 332rpx;
+		margin-right: 20rpx;
+		border-radius: 12rpx;
+		background-color: white;
+		box-shadow: 0px 4px 12px rgba(51, 51, 51, 0.06);
+
+		.list-roll-li-top {
+			margin-bottom: 26rpx;
+			font-size: 24rpx;
+
+			text {
+				color: #999;
+			}
+
+			view {
+				color: #87390E;
+				padding: 8rpx 26rpx;
+				background: linear-gradient(90deg, #FFDFAB 0%, #E3AC72 100%);
+			}
+		}
+
+		.list-roll-li-nav {
+			view {
+				font-size: 28rpx;
+
+				image {
+					width: 44rpx;
+					height: 44rpx;
+					margin-right: 6rpx;
+				}
+
+				view {
+					flex: 1;
+				}
+			}
+		}
+	}
+
+	.detail-title {
+		margin-top: 20rpx;
+		font-weight: bold;
+		padding: 0 18rpx;
+		image {
+			width: 40rpx;
+			height: 40rpx;
+			margin-right: 16rpx;
+		}
+		.more {
+			color: #DC3C23;
+			font-size: 28rpx;
+			flex: 1;
+			display: flex;
+			align-items: center;
+			justify-content: flex-end;
+		}
+		text {
+			color: #333;
+			font-size: 30rpx;
+		}
+	}
+
+	.detail-video-li {
+		overflow: hidden;
+		margin-top: 20rpx;
+		width: calc(100% / 2 - 9rpx);
+		border-radius: 12rpx;
+		background-color: white;
+
+		.detail-video-li-logo {
+			width: 100%;
+			height: 176rpx;
+			display: block;
+		}
+
+		.detail-video-content {
+			padding: 16rpx;
+
+			.detail-video-content-logo {
+				width: 40rpx;
+				height: 40rpx;
+				border-radius: 50%;
+				margin-right: 24rpx;
+			}
+
+			.detail-video-title {
+				width: 99%;
+				height: 80rpx;
+				color: #333;
+				font-size: 28rpx;
+			}
+			.detail-video-title1 {
+				width: 99%;
+				color: #333;
+				font-size: 28rpx;
+			}
+			.start_time {
+				color: #333;
+				font-size: 28rpx;
+			}
+		}
+
+		.detail-video-info {
+			font-size: 24rpx;
+			flex: 1;
+			.u-icon {
+				margin-right: 6rpx;
+			}
+			image {
+				width: 24rpx;
+				height: 24rpx;
+				margin-right: 6rpx;
+			}
+
+			text {
+				flex: 1;
+				width: 100rpx;
+				color: #9193B4;
+
+			}
+
+			view {
+
+				color: #999;
+			}
+		}
+	}
+
+	.detail-video-right {
+		flex: 1;
+		min-width: 100px;
+	}
+</style>

pages/Live/compontent/live-view.vue

@@ -0,0 +1,670 @@
+<!-- 推荐 -->
+<template>
+	<view class="list">
+		<view class="list-swiper">
+			<view class=""
+				style="background: rgb(221, 221, 221);width: 100%;height: 60vw;border-radius: 20rpx;"
+				v-if="list.length == 0">
+
+			</view>
+			<swiper v-else class="swiper" circular :indicator-dots="false" @change="swiperChange" :autoplay="true" :interval="2000"
+					:duration="500">
+				<swiper-item v-for="(item, index) in list" :key="index" @click="swiperClick(item)">
+					<div class="swiper-box">
+						<u--image
+							mode="scaleToFill"
+							:showLoading="true"
+							:src="item.img"
+							width="100%"
+							height="60vw"
+						>
+							<template v-slot:loading>
+								<image class="loading-banner-img" src="/static/image/common/video-banner-bg.png"></image>
+							</template>
+						</u--image>
+						<div class="info-box">
+							<div class="title text-clamp">1st T20I, India v New Zealand</div>
+							<div class="tip">2023 Men's T20I Series | JSCA International Stadium Complex, Ranchi</div>
+							<div class="btn-box">
+								<div class="btn">
+									<img class="img" src="/static/image/live/polygon.png" alt="">
+									Watch
+								</div>
+							</div>
+						</div>
+					</div>
+				</swiper-item>
+			</swiper>
+			<div v-if="list.length > 1" class="swiper__indicator">
+				<div class="line__bar">
+					<div class="dots" :class="{'active': index == swiperCurrent}" v-for="(i, index) in list" :key="index">
+					</div>
+				</div>
+			</div>
+		</view>
+		<div class="live-list-box" v-if="todayList.length > 0">
+			<div class="flex">
+				<div class="all flex" @click="toMatch">View all <img class="right" src="/static/image/live/right.png" alt=""></div>
+			</div>
+			<div class="mySwiper">
+        <div class="swiper-wrapper">
+          <div class="swiper-slide" v-for="(item, index) in todayList" :key="index">
+            <div class="today-box">
+							<div class="box1">
+								Match 5, South Africa Women 2023 Tri-Series | Buffalo Park, East London
+								<img class="right" src="/static/image/live/right.png" alt="">
+							</div>
+							<div class="box2">
+								at 28 January, 19:00 Local ( 22:00 PKT ) - Buffalo Park, East London, South Africa
+							</div>
+							<u-row>
+								<u-col span="6">
+									<view class="bg-purple">
+										<img class="logo" src="https://cdn.sportmonks.com/images/cricket/teams/24/1976.png" alt=""/>
+										<div class="text-clamp">{{ item.home_name }}</div>
+									</view>
+								</u-col>
+								<u-col span="6">
+									<view class="bg-purple bg-purple1 text-clamp">
+										<img class="logo" src="https://cdn.sportmonks.com/images/cricket/teams/24/1976.png" alt=""/>
+										<div class="text-clamp">{{ item.away_name }}</div>
+									</view>
+								</u-col>
+							</u-row>
+						</div>
+          </div>
+        </div>
+      </div>
+		</div>
+		<div class="anchor-list">
+			<div class="item">
+				<u--image
+					:showLoading="true"
+					:src="'/static/image/match/[email protected]'"
+					width="62px"
+					height="62px"
+					shape="circle"
+				></u--image>
+			</div>
+			<div class="item">
+				<u--image
+					:showLoading="true"
+					:src="'/static/image/match/[email protected]'"
+					width="62px"
+					height="62px"
+					shape="circle"
+				></u--image>
+			</div>
+			<div class="item">
+				<u--image
+					:showLoading="true"
+					:src="'/static/image/match/[email protected]'"
+					width="62px"
+					height="62px"
+					shape="circle"
+				></u--image>
+			</div>
+			<div class="item">
+				<u--image
+					:showLoading="true"
+					:src="'/static/image/match/[email protected]'"
+					width="62px"
+					height="62px"
+					shape="circle"
+				></u--image>
+			</div>
+			<div class="item">
+				<u--image
+					:showLoading="true"
+					:src="'/static/image/match/[email protected]'"
+					width="62px"
+					height="62px"
+					shape="circle"
+				></u--image>
+			</div>
+			<div class="item">
+				<u--image
+					:showLoading="true"
+					:src="'/static/image/match/[email protected]'"
+					width="62px"
+					height="62px"
+					shape="circle"
+				></u--image>
+			</div>
+		</div>
+		<div class="type-box">
+			<div class="type-item">
+				<div class="type" @click="toMatch">
+					<div>T20s</div>
+					<div class="see">See all</div>
+				</div>
+				<div class="list1">
+					<div class="item">
+						<div class="img-box">
+							<u--image :showLoading="true" src="https://api.onecric.tv/upload/WechatIMG443.jpg" width="100%" height="105px">
+								<template v-slot:loading>
+									<image class="loading-list-img" src="/static/image/common/live-list-bg.png"></image>
+								</template>
+							</u--image>
+							<img class="play" src="/static/image/live/play-icon.png" alt="">
+						</div>
+						<div class="body">
+							<div class="title text-clamp">India v New Zealand</div>
+							<div class="tip">2023 Men's T20I Series | 1st T20I</div>
+							<div class="flex">
+								<div class="live">Live</div>
+								<div>JSCA Stadium Complex</div>
+							</div>
+						</div>
+					</div>
+					<div class="item">
+						<div class="img-box">
+							<u--image :showLoading="true" src="https://qiniu.onecric.tv/moren.png" width="100%" height="105px">
+								<template v-slot:loading>
+									<image class="loading-list-img" src="/static/image/common/live-list-bg.png"></image>
+								</template>
+							</u--image>
+							<img class="play" src="/static/image/live/play-icon.png" alt="">
+						</div>
+						<div class="body">
+							<div class="title text-clamp">India v New Zealand</div>
+							<div class="tip">2023 Men's T20I Series | 1st T20I</div>
+							<div class="flex">
+								<div class="live">Live</div>
+								<div>JSCA Stadium Complex</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="type-item">
+				<div class="type">
+					<div>T20s</div>
+					<div class="see">See all</div>
+				</div>
+				<div class="list1">
+					<div class="item">
+						<div class="img-box">
+							<u--image :showLoading="true" src="https://api.onecric.tv/upload/WechatIMG443.jpg" width="100%" height="105px">
+								<template v-slot:loading>
+									<image class="loading-list-img" src="/static/image/common/live-list-bg.png"></image>
+								</template>
+							</u--image>
+							<img class="play" src="/static/image/live/play-icon.png" alt="">
+						</div>
+						<div class="body">
+							<div class="title text-clamp">India v New Zealand</div>
+							<div class="tip">2023 Men's T20I Series | 1st T20I</div>
+							<div class="flex">
+								<div class="live">Live</div>
+								<div>JSCA Stadium Complex</div>
+							</div>
+						</div>
+					</div>
+					<div class="item">
+						<div class="img-box">
+							<u--image :showLoading="true" src="https://api.onecric.tv/upload/WechatIMG443.jpg" width="100%" height="105px">
+								<template v-slot:loading>
+									<image class="loading-list-img" src="/static/image/common/live-list-bg.png"></image>
+								</template>
+							</u--image>
+							<img class="play" src="/static/image/live/play-icon.png" alt="">
+						</div>
+						<div class="body">
+							<div class="title text-clamp">India v New Zealand</div>
+							<div class="tip">2023 Men's T20I Series | 1st T20I</div>
+							<div class="flex">
+								<div class="live">Live</div>
+								<div>JSCA Stadium Complex</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<u-toast ref="uToast"></u-toast>
+	</view>
+</template>
+
+<script>
+import { numberToK, parseTime } from '@/utils/util'
+	export default {
+		components: {
+		},
+		data() {
+			return {
+				liveList: {
+					live_commentary: {},
+					nolive_broadcast: {},
+					robot: {}
+				},
+				todayList: [],
+				comingList: [],
+				live_commentary: [],
+				nolive_broadcast: [],
+				robot: [],
+				bannerList: [],
+				robotLength: 0,
+				swiperCurrent: 0,
+				swiper: null
+			}
+		},
+		props: {
+			list: {
+				type: Array,
+				default: []
+			}
+		},
+		mounted() {
+			this.getList()
+		},
+		methods: {
+			swiperClick(item) {
+				if (item.anchor_id) {
+					uni.navigateTo({
+						url: `./live-detail?id=${item.anchor_id}&ID=${item.id}`
+					})
+					return
+				}
+				if (item.param_id) {
+					uni.navigateTo({
+						url: '/pages/Match/match-detail?id=' + item.param_id
+					})
+					return
+				}
+			},
+			// 点击history
+			historyLive(item) {
+				// console.error(item)
+				// return
+				uni.navigateTo({
+					url:`/pages/Live/history-detail?id=${item.Uid}&ID=${item.live_id}&MediaUrl=${item.MediaUrl}`
+				})
+			},
+			/* 跳转 */
+			toUrl(item) {
+				console.log(item);
+				/* item.type == 1?'basketball':'football */
+				if (item.type == 1) {
+					uni.navigateTo({
+						url: '../competition/basketballDetail?id=' + item.id
+					})
+				} else {
+					uni.navigateTo({
+						url: '../competition/detail?id=' + item.sourceid
+					})
+				}
+			},
+			toUrlLive(item) {
+				gtag('event', 'live_H5', {
+					'live_H5': '0'
+				});
+				uni.navigateTo({
+					url: `./live-detail?id=${item.live_id}&ID=${item.id}`
+				})
+			},
+			getList() {
+				uni.$u.http.get('/api/live_streaming/getLiveList', {
+					params: 2
+				}).then(res => {
+					this.live_commentary = res.data || []
+				})
+				uni.$u.http.get('/api/live_streaming/getLiveListNew', {
+					params: {
+						timeZone: this.$store.state.timeZone
+					}
+				}).then(res => {
+					this.todayList = res.toay || [];
+					this.comingList = res.upcoming || [];
+					this.$nextTick(() => {
+            this.swiper && this.swiper.destroy();
+						this.swiper = new Swiper(".mySwiper", {
+							loop: true,
+							spaceBetween: 16,
+              autoplay: true,
+            });
+					})
+				})
+				uni.$u.http.get('/api/LivePlayBack/list', {}).then(res => {
+					if (res.list) {
+						this.robotLength = res.list.length
+						this.robot = res.list.slice(0, 6)
+					} else {
+						this.robot = []
+					}
+				})
+			},
+			toMatch() {
+      	sessionStorage.setItem('match_live', JSON.stringify(2))
+				uni.switchTab({
+					url: '/pages/Match/Match'
+				})
+			},
+			swiperChange(e) {
+				this.swiperCurrent = e.detail.current
+			},
+			numberToK(v) {
+				return numberToK(v)
+			},
+			formatDate(value) {
+				var date1 = this.$common.parseTime(value * 1000, '{y}/{m}/{d} {h}:{i}:{s}')
+				var date = new Date(date1 + ' UTC+5:30');
+				var weekNum = new Date().getDay()
+				let week = ""
+				switch (weekNum) {
+					case 0:
+						week = "Sun";
+						break;
+					case 1:
+						week = "Mon";
+						break;
+					case 2:
+						week = "Tue";
+						break;
+					case 3:
+						week = "Wed";
+						break;
+					case 4:
+						week = "Thu";
+						break;
+					case 5:
+						week = "Fri";
+						break;
+					case 6:
+						week = "Sat";
+						break;
+				}
+				var MonthNum = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1)
+				let Month = ''
+				switch (MonthNum) {
+					case 1:
+						Month = "Jan";
+						break;
+					case 2:
+						Month = "Feb";
+						break;
+					case 3:
+						Month = "Mar";
+						break;
+					case 4:
+						Month = "Apr";
+						break;
+					case 5:
+						Month = "May";
+						break;
+					case 6:
+						Month = "Jun";
+						break;
+					case 7:
+						Month = "Jul";
+						break;
+					case 8:
+						Month = "Aug";
+						break;
+					case 9:
+						Month = "Sept";
+						break;
+					case 10:
+						Month = "Oct";
+						break;
+					case 11:
+						Month = "Nov";
+						break;
+					case 12:
+						Month = "Dec";
+						break;
+				}
+				let day = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate())
+				// this.week = week
+				// this.month = Month
+				// this.day = day
+				var hours = date.getHours();
+				var minutes = date.getMinutes();
+				var ampm = hours >= 12 ? 'PM' : 'AM';
+				hours = hours % 12;
+				hours = hours ? hours : 12; // the hour '0' should be '12'
+				minutes = minutes < 10 ? '0' + minutes : minutes;
+				// var strTime = week + ',' + day + Month + '.' + 'Watch live in' + hours + ':' + minutes + ' ' + ampm;
+				var strTime = this.$t('match.lab92') + ' ' + hours + ':' + minutes + ' ' + ampm;
+				return strTime;
+			},
+			parseTime(t) {
+				return parseTime(t, '{m}-{d} {h}:{i}')
+			},
+			parseTime1(t) {
+				return parseTime(t, '{y}-{m}-{d} {h}:{i}')
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.list {
+		padding-bottom: 140rpx;
+	}
+	.list-swiper {
+		padding: 0;
+		position: relative;
+		.swiper {
+			height: 60vw;
+		}
+		.loading-banner-img {
+			width: 100%;
+			height: 60vw;
+		}
+		.swiper-box {
+			position: relative;
+		}
+		.info-box {
+			position: absolute;
+			top: 0;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			background: linear-gradient(180deg, rgba(16, 4, 74, 0) 0%, #080031 100%);
+			display: flex;
+			flex-direction: column;
+			justify-content: flex-end;
+			padding: 26rpx 16px;
+			.title {
+				color: #fff;
+				font-weight: 600;
+				font-size: 26px;
+				margin-bottom: 16px;
+			}
+			.tip {
+				font-weight: 500;
+				font-size: 16px;
+				color: #C7C7C7;
+				margin-bottom: 16px;
+			}
+			.btn-box {
+				height: 34px;
+				.btn {
+					height: 34px;
+					width: 92px;
+					background: linear-gradient(94.25deg, #FF3300 -3.08%, #D22A00 100%);
+					border-radius: 4px;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					color: #fff;
+					font-weight: 500;
+					font-size: 14px;
+				}
+				.img {
+					width: 14px;
+					margin-right: 6px;
+				}
+			}
+		}
+		.swiper__indicator {
+			position: absolute;
+			right: 16px;
+			bottom: 39rpx;
+			z-index: 2;
+			.line__bar {
+				display: flex;
+				align-items: center;
+			}
+			.dots {
+				width: 8px;
+				height: 8px;
+				border: 1px solid #D52B01;
+				border-radius: 50%;
+				& + .dots {
+					margin-left: 8px;
+				}
+				&.active {
+					background-color: #D52B01;
+				}
+			}
+		}
+	}
+	.live-list-box {
+		padding-top: 16px;
+		.all {
+			font-weight: 500;
+			font-size: 14px;
+			color: #242424;
+			padding: 0 16px;
+			.right {
+				margin-left: 8px;
+				width: 9px;
+			}
+		}
+		.mySwiper {
+			overflow: hidden;
+			padding: 12px 16px 16px;
+		}
+		.today-box {
+			background: #FFFFFF;
+			box-shadow: 0px 4px 26px -4px rgba(78, 78, 78, 0.25);
+			border-radius: 6px;
+			padding: 24px 24px 20px;
+			.box1 {
+				padding-right: 25px;
+				position: relative;
+				font-weight: 500;
+				font-size: 14px;
+				color: #242424;
+				margin-bottom: 16px;
+				.right {
+					width: 9px;
+					position: absolute;
+					right: 0;
+					top: 50%;
+					transform: translateY(-50%);
+				}
+			}
+			.box2 {
+				font-weight: 600;
+				font-size: 12px;
+				color: #4E4E4E;
+				margin-bottom: 16px;
+			}
+			.bg-purple {
+				font-weight: 600;
+				font-size: 18px;
+				color: #242424;
+				display: flex;
+				align-items: center;
+				.logo {
+					width: 30px;
+					margin-right: 16rpx;
+				}
+			}
+			.bg-purple1 {
+				padding-left: 10px;
+				justify-content: flex-end;
+			}
+		}
+	}
+	.anchor-list {
+		padding: 10px 0 10px 16px;
+		overflow: auto;
+		display: flex;
+		align-items: center;
+		flex-wrap: nowrap;
+		.item {
+			margin-right: 12px;
+			padding: 6px;
+			border-radius: 50%;
+			border: 2px solid #CC2900;
+		}
+	}
+	.type-box {
+		padding: 0 0 16px 8px;
+		.type-item {
+			margin-bottom: 10px;
+			.type {
+				padding: 16px 8px 10px 0;
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				font-weight: 600;
+				font-size: 18px;
+				line-height: 1;
+				color: #242424;
+				.see {
+					font-weight: 400;
+					font-size: 14px;
+					color: #4E4E4E;
+				}
+			}
+		}
+		.list1 {
+			display: flex;
+			flex-wrap: nowrap;
+			overflow: auto;
+			.item {
+				background: #FFFFFF;
+				box-shadow: 0px 4px 26px rgba(174, 174, 174, 0.16);
+				border-radius: 4px;
+				min-width: 214px;
+				max-width: 214px;
+				overflow: hidden;
+				margin-right: 16px;
+				.img-box {
+					position: relative;
+					.play {
+						position: absolute;
+						top: 50%;
+						left: 50%;
+						transform: translate(-50%, -50%);
+						width: 46px;
+					}
+				}
+				.loading-list-img {
+					width: 100%;
+					height: 105px;
+				}
+			}
+			.body {
+				padding: 12px 10px;
+				.title {
+					font-weight: 500;
+					font-size: 14px;
+					color: #242424;
+					margin-bottom: 8px;
+				}
+				.tip {
+					font-weight: 400;
+					font-size: 12px;
+					color: #4E4E4E;
+					margin-bottom: 26px;
+				}
+				.flex {
+					justify-content: space-between;
+					font-weight: 400;
+					font-size: 10px;
+					color: #4E4E4E;
+					.live {
+						font-weight: 500;
+						color: #FF3300;
+					}
+				}
+			}
+		}
+	}
+</style>

pages/Live/compontent/screen-chat.vue

@@ -0,0 +1,349 @@
+<!-- 聊天 -->
+<template>
+	<view class="chat" @click.stop="">
+		<div class="message-box">
+			<div class="flex">
+				<div class="msgLi bg2" v-if="roomInfo.title">
+					{{ roomInfo.title }}
+				</div>
+			</div>
+			<div class="flex">
+				<view class="msgLi" style="color: rgb(220, 60, 35);">
+					{{system.live_notice}}
+				</view>
+			</div>
+			<view class="flex" v-for="(item,index) in messageList1" :key="index" :id="`view${index}`">
+				<div class="msgLi">
+					<div class="flex">
+						{{item.nick}}：
+						<div class="msg" v-html="getText(item.normal.text)"></div>
+					</div>
+				</div>
+			</view>
+		</div>
+		<div class="detail-input" @click="inputShowFun">
+			<div class="box flex">
+				{{ $t('live.enter') }}
+				<image class="emoji-btn" src="/static/image/live/live-6.png" mode="">
+        </image>
+			</div>
+		</div>
+		<view class="detail-input fiexd" v-if="inputShow">
+			<view class="box flex">
+        <view class="detail-input-i flex">
+          <input type="text" :focus="focusAuto" v-model="content" @focus="focus" @keydown.enter="setMessage" value="" :placeholder="$t('live.enter')" />
+        </view>
+        <image class="emoji-btn" src="/static/image/live/live-6.png" mode="" @click="emoji = !emoji">
+        </image>
+				<image class="send" @click="setMessage" src="/static/image/send.svg" mode="">
+				</image>
+			</view>
+			<view class="TUI-Emoji" v-if="emoji">
+				<view v-for="(item, index) in emojiList" :key="index" class="TUI-emoji-image">
+					<image :data-name="item.emojiName" class="emoji-image" :src="item.url" @tap="handleEnterEmoji">
+					</image>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import {
+		emojiName,
+		emojiUrl,
+		emojiMap
+	} from '@/config/emojiMap';
+import bus from '@/utils/bus'
+	export default {
+		props: ['roomInfo', 'messageList'],
+		data() {
+			return {
+				eyes: false,
+				emoji: false,
+				show: false,
+				tips: 'get code', //验证码倒计时
+				type: 1,
+				scrollTop: 0,
+				emojiList: [],
+				mask: {
+					background: 'rgba(0, 0, 0, 0.1)'
+				},
+				figtIndex: null,
+				content: '',
+				current: 0,
+				list: [{
+						cate_name: '礼物'
+					}
+					// , {
+					// 	cate_name: '礼包'
+					// }
+				],
+				countryCode: [], //区号
+				tournamentList: [],
+				inputShow: false,
+				focusAuto: false
+			}
+
+		},
+		beforeMount() {
+			for (let i = 0; i < emojiName.length; i++) {
+				this.emojiList.push({
+					emojiName: emojiName[i],
+					url: emojiUrl + emojiMap[emojiName[i]]
+				});
+			}
+		},
+		computed: {
+			system() {
+				return this.$store.state.system
+			},
+			isLogin() {
+				return this.$store.state.isLogin
+			},
+			infos() {
+				return this.$store.state.info
+			},
+			eyes1() {
+				return this.$store.state.eyes1
+			},
+			messageList1() {
+				return this.messageList.filter(item => {
+					return item.type != 102
+				})
+			}
+		},
+		methods: {
+			/* 输入框获取焦点 如果打开了表情框需关闭 */
+			focus() {
+				if (this.emoji) {
+					this.emoji = false
+				}
+			},
+
+			handleEnterEmoji(event) {
+				this.content += event.currentTarget.dataset.name;
+				// console.log(event.currentTarget.dataset.name);
+				// this.$emit('enterEmoji', {
+				// 	detail: {
+				// 		message: event.currentTarget.dataset.name
+				// 	}
+				// });
+			},
+			// 收到的消息
+			scrollToButtom() {
+				let that = this;
+				const query = uni.createSelectorQuery().in(this);
+				let nodesRef = query.select('#message-scroll');
+				nodesRef.boundingClientRect(res => {
+						if (res) {
+							that.scrollTop = res.height;
+						}
+					})
+					.exec();
+			},
+			// 发送消息
+			setMessage() {
+				if (!this.content.trim()) return
+				if (JSON.stringify(this.infos) == '{}') {
+					// return this.$toUrl('/pages/login/index')
+				}
+				let msg = {
+					type: 105,
+					normal: {
+						isXCBarrage: 0, //是否是气泡 barrageIndex
+						xcBarrageUrl: '', //气泡的图片路径
+						xcBarrageType: '', //图片路径
+						text: this.content,
+						exp_icon: this.infos.exp_icon,
+						is_guard: this.infos.is_guard,
+						is_room: this.infos.id == this.roomInfo.id ? 1 : 0,
+						guard_icon: this.infos.is_guard == 1 ? this.infos.guard.icon : ''
+					}
+				}
+				let to = JSON.stringify(this.roomInfo.id)
+				const message = uni.$TUIKit.createCustomMessage({
+					to,
+					conversationType: 'GROUP',
+					payload: {
+						data: JSON.stringify(msg)
+					}
+				});
+				this.$sendTIMMessage(message);
+			},
+			$sendTIMMessage(message) {
+				let that = this;
+				const SDKAppID = getApp().globalData.SDKAppID;
+				uni.$TUIKit.sendMessage(message).then((res) => {
+					let arr = {
+						data: [res.data.message]
+					}
+					bus.$emit('onMessageReceived', arr)
+					that.content = '';
+					uni.$aegis.reportEvent({
+						name: 'sendMessage',
+						ext1: 'sendMessage-success',
+						ext2: 'uniTuikitExternal',
+						ext3: `${SDKAppID}`,
+					})
+				}).catch((error) => {
+					console.log(error);
+					uni.$aegis.reportEvent({
+						name: 'sendMessage',
+						ext1: `sendMessage-failed#error: ${error}`,
+						ext2: 'uniTuikitExternal',
+						ext3: `${SDKAppID}`,
+					})
+				})
+				// this.setData({
+				// 	displayFlag: ''
+				// });
+			},
+			getText(str) {
+				// let str = 'jfkdsj[咒骂]dsjfkljsa[憨笑]哈哈哈，[惊恐]'
+				let exp = /\[(.*?)\]/g; //匹配[*] 大括号里面任意内容的正则
+				let arr = str.match(exp); //字符串匹配出来的数组
+				// console.log(arr);
+				if (!arr) return str;
+
+				this.emojiList.forEach((item1, index) => {
+					arr.map(item => {
+						// console.log(item1);
+						if (item1.emojiName === item) {
+							str = str.replace(item,
+								`<img src='${item1.url}' style="width:20px;height:20px">`
+							);
+						}
+						// console.log(item);
+						// let key = `p${item.substr(1, item.length - 2)}`;  //记录大括号里的值 用作id 方便取值
+						// if (!this.salaryVars.hasOwnProperty(key)) this.$set(this.salaryVars, key, '');
+					}); //循环遍历
+				})
+				// let arrNum = 取出所有正则匹配值并转换为input
+
+				// console.log(str);
+				return str;
+			},
+			inputShowFun() {
+				if (this.$store.state.isLogin != 1) {
+					this.$toUrl('/pages/login/login')
+					return
+				}
+				this.inputShow = true
+				this.$nextTick(() => {
+					this.focusAuto = true
+				})
+			},
+		},
+
+	}
+</script>
+
+<style lang="scss" scoped>
+	.TUI-Emoji {
+  	background-color: #F5F5F5;
+		display: flex;
+		justify-content: flex-start;
+		flex-wrap: wrap;
+		height: 480rpx;
+		overflow-y: scroll;
+    border-radius: 10rpx;
+	}
+
+	.TUI-emoji-image {
+		width: 30px;
+		height: 30px;
+		margin: 10px;
+	}
+
+	.emoji-image {
+		width: 100%;
+		height: 100%;
+	}
+
+	.btn1 {
+		color: #fff;
+		height: 58rpx;
+		width: 160rpx;
+		line-height: 58rpx;
+		text-align: center;
+		border-radius: 100rpx;
+		background: #DC3C23;
+	}
+
+
+	.chat {
+    flex: 1;
+    min-width: 10%;
+    max-width: 80%;
+		position: relative;
+    margin-left: 26rpx;
+	}
+	.detail-input {
+    color: #000;
+    position: relative;
+		background-color: #F5F5F5;
+		padding: 0 12px;
+		border-radius: 20px;
+		.box {
+			justify-content: space-between;
+			flex: 1;
+			height: 34px;
+			font-size: 14px;
+			color: #999999;
+			
+		}
+		.detail-input-i {
+			flex: 1;
+			font-size: 14px;
+			input {
+				flex: 1;
+        height: 34px;
+			}
+		}
+		.emoji-btn {
+			width: 27px;
+			height: 27px;
+      margin-left: 26rpx;
+		}
+		.send {
+			width: 25px;
+			height: 25px;
+      margin-left: 26rpx;
+		}
+	}
+	.fiexd {
+		position: fixed !important;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		z-index: 9999;
+	}
+	.message-box {
+		position: fixed;
+		left: 0;
+		width: 90%;
+		max-width: 450px;
+		bottom: 40px;
+		max-height: 50vh;
+		overflow-y: auto;
+		.msgLi {
+			max-width: 100%;
+			color: #fff;
+			font-size: 12px;
+			margin-top: 4.5px;
+			line-height: 18px;
+			padding: 5px 11px;
+			border-radius: 14px;
+			background-color: rgba(0, 0, 0, .5);
+			&.bg2 {
+				background-color: rgba(0, 5, 70, 0.6);
+			}
+			.msg {
+				flex: 1;
+				min-width: 10%;
+				max-width: 100%;
+			}
+		}
+	}
+</style>

pages/Live/compontent/screen-match.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="screen" @click.stop="close">
+    <div class="box"  @click.stop="">
+      <div class="tab-bar">
+        <div class="bar" :class="{'active': type == 1}" @click="type = 1">
+          <!-- Scorecard -->
+          {{ $t('live.detailTab5') }}
+          <div class="line"></div>
+        </div>
+        <div class="bar" :class="{'active': type == 2}" @click="type = 2">
+          <!-- Live Animation -->
+          {{ $t('live.lab53') }}
+          <div class="line"></div>
+        </div>
+        <div class="bar" :class="{'active': type == 3}" @click="type = 3">
+          <!-- Squad -->
+          {{ $t('live.detailTab6') }}
+          <div class="line"></div>
+        </div>
+      </div>
+      <detailScorecard v-if="type == 1" :list="list" :matchDetail="matchDetail" />
+      <div class="section" v-if="type == 2">
+        <detailAnimation :livePath="livePath" />
+      </div>
+      <detailSquad v-if="type == 3" :dataList="list" :matchDetail="matchDetail" />
+    </div>
+  </div>
+</template>
+<script>
+import detailAnimation from './detail-animation.vue'
+import detailScorecard from './screen-scorecard.vue'
+import detailSquad from './screen-squad.vue'
+export default {
+  props: ['matchDetail', 'list', 'livePath'],
+  components: {
+    detailAnimation,
+    detailScorecard,
+    detailSquad
+  },
+  data () {
+    return {
+      type: 1  
+    }
+  },
+  methods: {
+    close() {
+      this.$emit('cancel')
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.screen {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%);
+}
+.box {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  overflow-y: auto;
+  width: 342px;
+  max-width: 80%;
+}
+.tab-bar {
+  display: flex;
+  .bar {
+    position: relative;
+    flex: 1;
+    height: 30px;
+    line-height: 30px;
+    text-align: center;
+    color: #fff;
+    font-size: 13px;
+    font-weight: bold;
+    background-color: rgba(51,51,51,0.4);
+    &.active {
+      .line {
+        background-color: #DC3C23;
+      }
+    }
+    .line {
+      position: absolute;
+      bottom: 0;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 53px;
+      height: 2px;
+      background-color: transparent;
+    }
+  }
+}
+.section {
+  max-height: calc(100vh - 40px);
+  overflow-y: auto;
+  margin-top: 10px;
+  border-radius: 8px;
+  padding: 5px 7px;
+  background-color: #fff;
+}
+</style>

pages/Live/compontent/screen-scorecard.vue

@@ -0,0 +1,279 @@
+<template>
+  <view class="Scorecard">
+    <view class="list" v-if="list.length">
+      <div class="tab-bar">
+        <div
+          class="tab overflow1"
+          v-for="item in list"
+          :key="item.id"
+          :class="{ actives: activeId == item.id }"
+          @click="clickItem(item.id)"
+        >
+          {{ item.name }} {{ item.order }} {{ item.score }}
+        </div>
+      </div>
+
+      <view class="list-item-content">
+        <view class="table-item-content-th">
+          <text>
+            <!-- BATTER -->
+            {{ $t("live.lab26") }}
+          </text>
+          <text>R</text>
+          <text>B</text>
+          <text>4s</text>
+          <text>6s</text>
+          <text>S/R</text>
+        </view>
+        <view
+          class="table-item-content-tr"
+          v-for="item in obj.batting_info"
+          :key="item.id"
+        >
+          <text class="name"
+            >{{ item.name }} <br />
+            <text>{{ item.type }}</text>
+          </text>
+          <text>{{ item.runs || 0 }}</text>
+          <text>{{ item.ball_number || 0 }}</text>
+          <text class="overflow1">{{ item.fours || 0 }}</text>
+          <text>{{ item.sixes || 0 }}</text>
+          <text class="overflow1">{{ item.strike_rate || 0 }}</text>
+        </view>
+        <view class="pd24 flex flex-between end-item">
+          <text>
+            <!-- EXTRAS -->
+            {{ $t("live.lab27") }}
+          </text>
+          <view>
+            <text>{{ obj.extras }}</text>
+          </view>
+        </view>
+        <view class="pd24 flex-start end-item">
+          <text>
+            <!-- DID NOT BAT -->
+            {{ $t("live.lab28") }}
+            <br />
+            <text>{{ obj.no_batting_name }}</text>
+          </text>
+        </view>
+
+        <view class="table-item-content-th th2">
+          <text>
+            <!-- BOWLER -->
+            {{ $t("live.lab29") }}
+          </text>
+          <text>O</text>
+          <text>R</text>
+          <text>W</text>
+        </view>
+        <view
+          class="table-item-content-tr tr2"
+          v-for="item in obj.bowling_info"
+          :key="item.id + 2"
+        >
+          <text class="name">{{ item.name }} </text>
+          <text>{{ item.overs_bowled || 0 }}</text>
+          <text class="overflow1">{{ item.runs_conceded || 0 }}</text>
+          <text>{{ item.wides || 0 }}</text>
+        </view>
+
+        <view class="table-item-content-th th3">
+          <text>
+            <!-- FALL OF WICKETS -->
+            {{ $t("live.lab30") }}
+          </text>
+          <text>
+            <!-- SCORE -->
+            {{ $t("live.lab31") }}
+          </text>
+          <text>
+            <!-- OVER -->
+            {{ $t("live.lab32") }}
+          </text>
+        </view>
+        <view
+          class="table-item-content-tr tr3"
+          v-for="item in obj.partnerships"
+          :key="item.id + 3"
+        >
+          <text class="name">{{ item.name }} </text>
+          <text>{{ item.score || 0 }}</text>
+          <text>{{ item.over || 0 }}</text>
+        </view>
+      </view>
+    </view>
+    <div class="empty" v-if="list.length == 0">
+      <u-empty
+        mode="data"
+        width="100%"
+        textSize="14px"
+        marginTop="0"
+        color="#fff"
+        :text="$t('common.nodata')"
+        icon="/static/image/common/nodata.png"
+      ></u-empty>
+    </div>
+    
+  </view>
+</template>
+
+<script>
+export default {
+  props: ["matchDetail", "list"],
+  data() {
+    return {
+      obj: {
+        batting_info: [],
+        partnerships: [],
+        bowling_info: [],
+        no_batting_name: "",
+        extras: "",
+        total: "",
+      },
+      activeId: null,
+    };
+  },
+  mounted() {
+    if (this.list.length) {
+      this.clickItem(this.list[0].id);
+    }
+  },
+  methods: {
+    clickItem(id) {
+      if (this.activeId == id) {
+        return;
+      }
+      this.activeId = id;
+      this.getList(id);
+    },
+    getList(id) {
+      uni.$u.http
+        .post("/api/Cricket/cricket_match_detail_scorecard", {
+          team_id: id,
+          id: this.matchDetail.match_id,
+        })
+        .then((res) => {
+          this.obj = res;
+        })
+        .catch((res) => {});
+    },
+    formaScore(v) {
+      if (!v) {
+        return "";
+      }
+      let s = v.replace("）", ")");
+      let index = v.indexOf(")");
+      return s.substring(index + 1);
+    },
+    formaScore1(v) {
+      if (!v) {
+        return "";
+      }
+      let s = v.replace("）", ")");
+      let index = v.indexOf(")");
+      return s.substring(0, index + 1);
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.Scorecard {
+  color: #fff;
+  padding: 15px 11px;
+  max-height: calc(100vh - 30px);
+  overflow-y: auto;
+}
+.empty {
+  background-color: rgba(51, 51, 51, 0.8);
+  padding: 11px 8px;
+	border-radius: 8px;
+  height: calc(100vh - 60px);
+  display: flex;
+  align-items: center;
+  .u-empty {
+    flex: 1;
+  }
+}
+.list-item-content {
+  background-color: rgba(51, 51, 51, 0.8);
+  padding: 11px 8px;
+	border-radius: 8px;
+	font-size: 12px;
+	font-weight: bold;
+  .table-item-content-th {
+    height: 31px;
+    background: rgba(0, 0, 0, 0.6);
+    border-radius: 9px;
+    display: grid;
+		align-items: center;
+		padding-left: 9px;
+    font-size: 12px;
+    grid-template-columns: 40% 10% 10% 10% 10% 20%;
+  }
+  .name {
+    color: #2c9de9;
+  }
+  .table-item-content-tr {
+    display: grid;
+    grid-template-columns: 40% 10% 10% 10% 10% 20%;
+    // grid-template-rows:121rpx;
+    padding: 24rpx 0 24rpx 24rpx;
+		&+.table-item-content-tr {
+			border-top: 1rpx solid #666;
+		}
+  }
+
+  .th2 {
+    grid-template-columns: 70% 10% 10% 10%;
+    margin-top: 24rpx;
+  }
+
+  .tr2 {
+    grid-template-columns: 70% 10% 10% 10%;
+  }
+
+  .th3 {
+    margin-top: 24rpx;
+    grid-template-columns: 70% 15% 15%;
+  }
+
+  .tr3 {
+    grid-template-columns: 70% 15% 15%;
+  }
+
+  .end-item {
+    border-top: 1rpx solid #666;
+  }
+}
+.tab-bar {
+  display: flex;
+  align-items: center;
+  column-gap: 4px;
+  margin-bottom: 16px;
+
+  .tab {
+    flex: 1;
+    text-align: center;
+    line-height: 26px;
+    font-size: 12px;
+    font-weight: bold;
+    text-align: center;
+    padding: 0 12px;
+    background-color: rgba(0, 0, 0, 0.6);
+    &.actives {
+      background-color: rgba(255, 255, 255, 0.7);
+      color: #333333;
+    }
+    &:first-child {
+      border-top-left-radius: 13px;
+      border-bottom-left-radius: 13px;
+    }
+    &:last-child {
+      border-top-right-radius: 13px;
+      border-bottom-right-radius: 13px;
+    }
+  }
+}
+</style>

pages/Live/compontent/screen-squad.vue

@@ -0,0 +1,399 @@
+<template>
+  <view class="Squad">
+		<div class="tab-bar" v-if="list.length">
+			<div
+				class="tab overflowt"
+				v-for="(item, index) in list"
+				:key="index"
+				:class="{ actives: activeId == index }"
+				@click="clickItem(index)"
+			>
+				{{ item.name }} {{ item.score }}
+			</div>
+		</div>
+		<div class="ul" v-for="(item, index) in activeInfo.list" :key="index">
+			<div class="title" v-if="item.list && item.list.length">{{ nameSplit(item.name) }}</div>
+			<div class="list" v-if="item.list && item.list.length">
+				<div class="li" v-for="li in item.list" :key="li.player_name">
+					<div class="top">
+						<u--image
+							class="logo"
+							:showLoading="true"
+							:src="li.player_logo || '/static/image/match/[email protected]'"
+							width="21px"
+							height="21px"
+							shape="circle"
+						></u--image>
+						{{ li.player_name }}
+					</div>
+					<div class="body">
+						<div class="th">
+							<div>4S</div>
+							<div>6S</div>
+							<div>S/R</div>
+							<u-icon name="arrow-right" color="#fff" size="10px"></u-icon>
+						</div>
+						<div class="td">
+							<div class="overflowt">{{ getData(li.player_name, 'fours') }}</div>
+							<div class="overflowt">{{ getData(li.player_name, 'sixes') }}</div>
+							<div class="overflowt">{{ getData(li.player_name, 'strike_rate') }}</div>
+							<div class="overflowt">
+								{{ activeInfo.score || '-' }}
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="ul" v-if="activeInfo.win.away_name">
+			<div class="title">
+				<!-- LIVE WIN PROBABILITY -->
+				{{ $t('live.lab54') }}
+			</div>
+			<div class="box">
+				<div class="name">
+					<div>{{ activeInfo.win.home_win_probabilities || 0 }}%</div>
+					<div>{{ activeInfo.win.away_win_probabilities || 0 }}%</div>
+				</div>
+				<div class="line">
+					<div class="fff" v-if="activeInfo.win.home_win_probabilities" :style="{width: activeInfo.win.home_win_probabilities + '%' }"></div>
+					<div class="DC3C23" :style="{width: (activeInfo.win.away_win_probabilities || 100) + '%' }"></div>
+				</div>
+				<div class="logo-box">
+					<div class="l-item">
+						{{ activeInfo.win.home_name }}
+						<u--image
+							class="logo"
+							:showLoading="true"
+							:src="activeInfo.win.home_logo"
+							width="19px"
+							height="19px"
+							shape="circle"
+						></u--image>
+					</div>
+					<div>VS</div>
+					<div class="r-item">
+						<u--image
+							class="logo"
+							:showLoading="true"
+							:src="activeInfo.win.away_logo"
+							width="19px"
+							height="19px"
+							shape="circle"
+						></u--image>
+						{{ activeInfo.win.away_name }}
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="empty" v-if="list.length == 0 && loading">
+      <u-empty
+        mode="data"
+        width="100%"
+        textSize="14px"
+        marginTop="0"
+        color="#fff"
+        :text="$t('common.nodata')"
+        icon="/static/image/common/nodata.png"
+      ></u-empty>
+    </div>
+	</view>
+</template>
+
+<script>
+export default {
+  props: {
+    matchDetail: {
+      default: {},
+    },
+		dataList: {
+			default: []
+		}
+  },
+  data() {
+    return {
+			list: [],
+			activeId: 0,
+			loading: false,
+			dataInfo: {
+
+			}
+    };
+  },
+	computed: {
+		activeInfo() {
+			return this.list[this.activeId] || {list: [], win: {}}
+		}
+	},
+  created() {
+    this.cricket_match_detail_squad();
+		if (this.dataList.length) {
+			this.dataList.forEach(item => {
+				this.getList(item.id)
+			})
+		}
+  },
+  methods: {
+		clickItem(id) {
+      if (this.activeId == id) {
+        return;
+      }
+      this.activeId = id;
+    },
+    cricket_match_detail_squad() {
+      uni.$u.http
+        .post("/api/Cricket/cricket_match_detail_squad_info", {
+          match_id: this.matchDetail.match_id,
+          tournament_id: this.matchDetail.tournament_id,
+          away_id: this.matchDetail.away_id,
+          home_id: this.matchDetail.home_id,
+        })
+        .then((res) => {
+					this.list = res || []
+        })
+        .catch((res) => {}).finally(() => {
+					this.loading = true
+				})
+    },
+		getList(id) {
+      uni.$u.http
+        .post("/api/Cricket/cricket_match_detail_scorecard", {
+          team_id: id,
+          id: this.matchDetail.match_id,
+        })
+        .then((res) => {
+					let dataInfo = this.dataInfo
+					if (res.batting_info) {
+						res.batting_info.forEach(item => {
+							if (item.name) {
+								if (dataInfo[item.name]) {
+									dataInfo[item.name] = {
+										...dataInfo[item.name],
+										...item
+									}
+								} else {
+									dataInfo[item.name] = item
+								}
+							}
+						})
+					}
+					if (res.bowling_info) {
+						res.bowling_info.forEach(item => {
+							if (item.name) {
+								if (dataInfo[item.name]) {
+									dataInfo[item.name] = {
+										...dataInfo[item.name],
+										...item
+									}
+								} else {
+									dataInfo[item.name] = item
+								}
+							}
+						})
+					}
+					if (res.bowling_info) {
+						res.bowling_info.forEach(item => {
+							if (item.name) {
+								if (dataInfo[item.name]) {
+									dataInfo[item.name] = {
+										...dataInfo[item.name],
+										...item
+									}
+								} else {
+									dataInfo[item.name] = item
+								}
+							}
+						})
+					}
+					this.dataInfo = dataInfo
+        })
+        .catch((res) => {});
+    },
+		getData(name, key) {
+			if (this.dataInfo[name] && (this.dataInfo[name][key])) {
+				return this.dataInfo[name][key]
+			}
+			return 0
+		},
+		nameSplit(name) {
+			if (name) {
+				return name.replace('_', ' ').toUpperCase()
+			}
+			return ''
+		}
+  },
+};
+</script>
+
+<style lang="scss">
+.Squad {
+  max-height: calc(100vh - 30px);
+  overflow-y: auto;
+  padding: 14px 0 14px 11px;
+}
+.empty {
+  background-color: rgba(51, 51, 51, 0.8);
+  padding: 11px 8px;
+	border-radius: 8px;
+  height: calc(100vh - 60px);
+  display: flex;
+  align-items: center;
+	margin-right: 11px;
+  .u-empty {
+    flex: 1;
+  }
+}
+.tab-bar {
+  display: flex;
+  align-items: center;
+  column-gap: 4px;
+  margin-bottom: 16px;
+
+  .tab {
+    flex: 1;
+    text-align: center;
+    line-height: 26px;
+    font-size: 12px;
+    font-weight: bold;
+    text-align: center;
+    padding: 0 6px;
+    background-color: rgba(0, 0, 0, 0.6);
+    &.actives {
+      background-color: rgba(255, 255, 255, 0.7);
+      color: #333333;
+    }
+    &:first-child {
+      border-top-left-radius: 13px;
+      border-bottom-left-radius: 13px;
+    }
+    &:last-child {
+      border-top-right-radius: 13px;
+      border-bottom-right-radius: 13px;
+    }
+  }
+}
+.ul {
+	&+.ul {
+		margin-top: 8px;
+	}
+	.title {
+	font-size: 12px;
+	margin-bottom: 4px;
+}
+}
+
+.list {
+	display: flex;
+	align-items: center;
+	flex-wrap: nowrap;
+	overflow-x: auto;
+	font-size: 10px;
+	font-weight: bold;
+	color: #fff;
+	column-gap: 5px;
+	
+	.li {
+		min-width: 134px;
+	}
+	.top {
+		background-color: rgba(0, 0, 0, 0.77);
+		border-top-left-radius: 8px;
+		border-top-right-radius: 8px;
+		height: 29px;
+		padding-left: 8px;
+		padding-right: 4px;
+		display: flex;
+		align-items: center;
+		.logo {
+			margin-right: 12px;
+		}
+	}
+	.body {
+		background-color: rgba(0, 0, 0, 0.5);
+		border-bottom-left-radius: 8px;
+		border-bottom-right-radius: 8px;
+		padding-left: 8px;
+		padding-right: 4px;
+	}
+	.th {
+		display: grid;
+    grid-template-columns: 20% 20% 20%;
+		align-items: center;
+		height: 18px;
+		font-size: 10px;
+		color: #2C9DE9;
+		font-weight: bold;
+		position: relative;
+	}
+	.u-icon {
+		position: absolute;
+		right: 4px;
+		top: 50%;
+		transform: translateY(-50%);
+	}
+	.td {
+		display: grid;
+		grid-template-columns: 20% 20% 30% 30%;
+		align-items: center;
+		height: 18px;
+		font-size: 10px;
+		font-weight: bold;
+	}
+}
+.box {
+	background-color: rgba(0, 0, 0, 0.5);
+	border-radius: 8px;
+	padding: 9px 18px;
+	font-size: 10px;
+	font-weight: bold;
+	.name {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		font-size: 10px;
+		line-height: 15px;
+	}
+	.line {
+		display: flex;
+		align-items: center;
+		border-radius: 3px;
+		overflow: hidden;
+		column-gap: 2px;
+		.fff {
+			background-color: #fff;
+			height: 5px;
+		}
+		.DC3C23 {
+			background-color: #DC3C23;
+			height: 5px;
+		}
+	}
+	.logo-box {
+		display: flex;
+		align-items: center;
+		margin-top: 5px;
+		justify-content: space-between;
+		.l-item, .r-item {
+			width: 45%;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
+		.l-item {
+			padding-right: 10px;
+		}
+		.r-item {
+			padding-left: 10px;
+		}
+	}
+	.logo {
+		margin-right: 9px;
+		margin-left: 9px;
+	}
+}
+.overflowt {
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}
+</style>

pages/Live/compontent/todayList.vue

@@ -0,0 +1,957 @@
+<!-- 推荐 -->
+<template>
+  <view class="today">
+    <div class="live-box">
+      <div class="title" :class="{'fadeInRight': animationLoaded}">
+        <img class="icon" src="/static/image/live/icon.png" alt="" />
+        <!-- Free to Watch Cricket TV Schedule -->
+        {{ $t("live.lab47") }}
+      </div>
+      <div class="today-box" :class="{'fadeInLeft': animationLoaded}" v-if="listOne">
+        <div class="item-one" @click="toUrlLive(listOne)">
+          <div class="img-box">
+            <img class="logo" src="/static/image/live/header_logo.png" alt="" />
+            <img
+              class="live"
+              v-if="listOne.status == 1"
+              src="/static/image/live/live.png"
+              alt=""
+            />
+            <img class="thumb" :src="listOne.thumb" alt="" />
+            <!-- <div
+              class="down-box"
+              v-if="listOne.starttime > 0 && listOne.status == 0"
+            >
+              <div>
+                <div>
+                  Match starts in
+                  {{ $t("match.lab76") }}
+                </div>
+                <div class="down">
+                  {{ countdownFun(listOne.starttime / 1000) }}
+                </div>
+              </div>
+            </div> -->
+          </div>
+          <div class="body">
+            <div class="content">
+              <div class="match1">
+                <div class="text-clamp">{{ listOne.tournament }}</div>
+                <img class="icon1" src="/static/image/live/icon1.png" alt="" />
+              </div>
+              <div class="match-detail-box">
+                <div class="detail-box">
+                  <div class="home">
+                    <div class="left">
+                      <u--image
+                        class="home_logo"
+                        mode="aspectFit"
+                        :src="
+                          listOne.home_logo || '/static/image/common/team.png'
+                        "
+                        shape="circle"
+                        width="32rpx"
+                        height="32rpx"
+                      ></u--image>
+                      <div class="text-clamp">{{ listOne.home_name }}</div>
+                    </div>
+                    <div class="right">
+                      {{ formaScore(listOne.home_display_score) }}
+                      <div
+                        class="value"
+                        :class="{
+                          value1:
+                            listOne.winner_id &&
+                            listOne.winner_id == listOne.home_id,
+                        }"
+                      >
+                        {{ formaScore1(listOne.home_display_score) }}
+                      </div>
+                    </div>
+                    <img
+                      v-if="
+                        listOne.winner_id &&
+                        listOne.winner_id == listOne.home_id
+                      "
+                      class="icon2"
+                      src="/static/image/live/icon2.png"
+                      alt=""
+                    />
+                  </div>
+                  <div class="home">
+                    <div class="left">
+                      <u--image
+                        class="home_logo"
+                        mode="aspectFit"
+                        :src="
+                          listOne.away_logo || '/static/image/common/team.png'
+                        "
+                        shape="circle"
+                        width="32rpx"
+                        height="32rpx"
+                      ></u--image>
+                      <div class="text-clamp">{{ listOne.away_name }}</div>
+                    </div>
+                    <div class="right">
+                      {{ formaScore(listOne.away_display_score) }}
+                      <div
+                        class="value"
+                        :class="{
+                          value1:
+                            listOne.winner_id &&
+                            listOne.winner_id == listOne.away_id,
+                        }"
+                      >
+                        {{ formaScore1(listOne.away_display_score) }}
+                      </div>
+                    </div>
+                    <img
+                      v-if="
+                        listOne.winner_id &&
+                        listOne.winner_id == listOne.away_id
+                      "
+                      class="icon2"
+                      src="/static/image/live/icon2.png"
+                      alt=""
+                    />
+                  </div>
+                </div>
+                <div class="status-box">
+                  <img
+                    v-if="listOne.status == 1"
+                    class="icon3"
+                    src="/static/image/live/icon3.png"
+                    alt=""
+                  />
+                  <div v-if="listOne.status == 0" class="text">
+                    <!-- Watch Live in -->
+                    {{ $t("match.lab92") }}
+                  </div>
+                  <div v-if="listOne.status == 2" class="text">
+                    {{ $t("match.lab90") }}
+                  </div>
+                  <div v-if="listOne.status == 0" class="text1">
+                    {{ watchLiveAt(listOne.scheduled) }}
+                    {{ watchLiveAt1(listOne.scheduled) }}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="item"
+          v-for="item in todayList1"
+          :key="item.live_id"
+          @click="toUrlLive(item)"
+        >
+          <div class="thumb-box">
+            <u--image
+              class="thumb"
+              :src="item.thumb"
+              width="34.46vw"
+              height="19.62vw"
+              mode="aspectFill"
+            ></u--image>
+            <!-- <div class="down-box" v-if="item.starttime > 0 && item.status == 0">
+              <div>
+                <div>
+                  Match starts in
+                  {{ $t("match.lab76") }}
+                </div>
+                <div class="down">
+                  {{ countdownFun(item.starttime / 1000) }}
+                </div>
+              </div>
+            </div> -->
+          </div>
+          <div class="match-detail-box">
+            <div class="match1">
+              <div class="text-clamp">{{ item.tournament }}</div>
+              <img class="icon1" src="/static/image/live/icon1.png" alt="" />
+            </div>
+            <div class="detail-box">
+              <div class="detail-box1">
+                <div class="home">
+                  <div class="left">
+                    <u--image
+                      class="home_logo"
+                      :src="item.home_logo || '/static/image/common/team.png'"
+                      shape="circle"
+                      width="32rpx"
+                      mode="aspectFit"
+                      height="32rpx"
+                    ></u--image>
+                    <div class="text-clamp">{{ item.home_name }}</div>
+                  </div>
+                  <div class="right">
+                    {{ formaScore(item.home_display_score) }}
+                    <div
+                      class="value"
+                      :class="{
+                        value1:
+                          item.winner_id && item.winner_id == item.home_id,
+                      }"
+                    >
+                      {{ formaScore1(item.home_display_score) }}
+                    </div>
+                  </div>
+                  <img
+                    v-if="item.winner_id && item.winner_id == item.home_id"
+                    class="icon2"
+                    src="/static/image/live/icon2.png"
+                    alt=""
+                  />
+                </div>
+                <div class="home">
+                  <div class="left">
+                    <u--image
+                      class="home_logo"
+                      :src="item.away_logo || '/static/image/common/team.png'"
+                      mode="aspectFit"
+                      shape="circle"
+                      width="32rpx"
+                      height="32rpx"
+                    ></u--image>
+                    <div class="text-clamp">{{ item.away_name }}</div>
+                  </div>
+                  <div class="right">
+                    {{ formaScore(item.away_display_score) }}
+                    <div
+                      class="value"
+                      :class="{
+                        value1:
+                          item.winner_id && item.winner_id == item.away_id,
+                      }"
+                    >
+                      {{ formaScore1(item.away_display_score) }}
+                    </div>
+                  </div>
+                  <img
+                    v-if="item.winner_id && item.winner_id == item.away_id"
+                    class="icon2"
+                    src="/static/image/live/icon2.png"
+                    alt=""
+                  />
+                </div>
+              </div>
+              <div class="status-box">
+                <img
+                  v-if="item.status == 1"
+                  class="icon3"
+                  src="/static/image/live/icon3.png"
+                  alt=""
+                />
+                <div v-if="item.status == 0" class="text">
+                  <!-- Watch Live in -->
+                  {{ $t("match.lab92") }}
+                </div>
+                <div v-if="item.status == 2" class="text">
+                  {{ $t("match.lab90") }}
+                </div>
+                <div v-if="item.status == 0" class="text1">
+                  {{ watchLiveAt(item.scheduled) }}
+                  {{ watchLiveAt1(item.scheduled) }}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="show-all" @click="showAll = true" v-if="todayList.length > 2 && !showAll">
+          <!-- Show All Live Games -->
+          {{ $t("live.lab48") }}
+          <img class="icon4" src="/static/image/live/icon4.png" alt="" />
+        </div>
+      </div>
+      <img
+        class="load3"
+        v-if="!listOne"
+        src="/static/image/live/load3.png"
+        alt=""
+      />
+    </div>
+    <div class="box2">
+      <div class="title">
+        <!-- Upcoming Free to Watch Cricket TV -->
+        <div :class="{'fadeInRight': animationLoaded1}">{{ $t("live.lab49") }}</div>
+        <div class="all" :class="{'fadeInLeft': animationLoaded1}" @click="toMatch(0)">{{ $t("live.lab50") }}</div>
+      </div>
+      <div class="list-box" :class="{'fadeInTop': animationLoaded1}">
+        <div
+          class="item"
+          @click="toMatchLive(item)"
+          v-for="(item, index) in comingList"
+          :key="item.id"
+        >
+          <div class="body" :class="'body' + (index % 3)">
+            <div class="time">{{ item.scheduled }}</div>
+            <div class="match-box">
+              <div class="img-box">
+                <img
+                  class="home_logo"
+                  :src="item.home_logo || '/static/image/common/team.png'"
+                  alt=""
+                />
+                <div class="text-clamp">{{ item.home_name }}</div>
+              </div>
+              <div class="vs">V/S</div>
+              <div class="img-box">
+                <img
+                  class="home_logo"
+                  :src="item.away_logo || '/static/image/common/team.png'"
+                  alt=""
+                />
+                <div class="text-clamp">{{ item.away_name }}</div>
+              </div>
+            </div>
+          </div>
+          <div class="team text-clamp">{{ item.title }}</div>
+        </div>
+        <div class="item" v-if="comingList.length == 0">
+          <img class="load1" src="/static/image/live/load1.png" alt="" />
+          <div class="soon text-clamp">
+            <!-- More events coming soon.. -->
+            {{ $t("live.lab51") }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </view>
+</template>
+<script>
+import { deepCopy } from '@/utils/common-utils';
+import animationMixin from '@/pages/mixins/animation'
+import { parseTime } from "@/utils/util";
+export default {
+  mixins: [animationMixin],
+  data() {
+    return {
+      todayList: [],
+      comingList: [],
+      listOne: null,
+      loading: false,
+      showAll: false,
+      timer: null,
+      animationLoaded1: false
+    };
+  },
+  deactivated() {
+    // clearInterval(this.timer);
+    // this.timer = null;
+  },
+  activated() {
+    // this.timerStart();
+  },
+  created() {
+    this.getList();
+  },
+  computed: {
+    todayList1() {
+      if (this.showAll) {
+        return this.todayList;
+      }
+      return this.todayList.filter((item, index) => index < 2);
+    },
+  },
+  methods: {
+    toUrlLive(item) {
+      gtag("event", "live_H5", {
+        live_H5: "0",
+      });
+      uni.navigateTo({
+        url: `./live-detail?id=${item.live_id}&ID=${item.live_id}`,
+      });
+    },
+    toMatchLive(item) {
+      uni.navigateTo({
+        url: "/pages/Match/match-detail?id=" + item.id,
+      });
+    },
+    toMatch(live) {
+      sessionStorage.setItem("match_live", JSON.stringify(live));
+      uni.switchTab({
+        url: "/pages/Match/Match",
+      });
+    },
+    getList() {
+      this.loading = true;
+      uni.$u.http
+        .get("/api/live_streaming/getPlayingCards", {
+          params: {
+            timezone: this.$store.state.timeZone,
+          },
+        })
+        .then((res) => {
+          let todayList = res || [];
+          todayList.forEach((item) => {
+            item.starttime =
+              new Date(
+                item.scheduled.replace(new RegExp(/-/gm), "/")
+              ).getTime() - new Date().getTime();
+          });
+          this.listOne = todayList[0];
+          if (todayList.length > 1) {
+            this.todayList = todayList.splice(1);
+          } else {
+            this.todayList = []
+          }
+          // this.timerStart();
+        }).finally(() => {
+          if (this.animationLoaded) {
+            return
+          }
+          this.animationLoaded = true
+          this.$nextTick(() => {
+            this.scrollFun()
+          })
+        })
+      uni.$u.http
+        .get("/api/live_streaming/getLiveListNew", {
+          params: {
+            timeZone: this.$store.state.timeZone,
+          },
+        })
+        .then((res) => {
+          this.comingList = res.upcoming || [];
+        })
+        .finally(() => {
+          this.loading = false;
+          if (this.animationLoaded1) {
+            return
+          }
+          this.animationLoaded1 = true
+          this.$nextTick(() => {
+            this.scrollFun()
+          })
+        });
+    },
+    timerStart() {
+      if (this.listOne) {
+        if (!this.timer) {
+          this.timer = setInterval(() => {
+            this.cutDown();
+          }, 1000);
+        }
+      } else {
+        if (this.timer) {
+          clearInterval(this.timer);
+          this.timer = null;
+        }
+      }
+    },
+    cutDown() {
+      if (this.listOne) {
+        this.$set(
+          this.listOne,
+          "starttime",
+          new Date(
+            this.listOne.scheduled.replace(new RegExp(/-/gm), "/")
+          ).getTime() - new Date().getTime()
+        );
+        let todayList = this.todayList;
+        todayList.forEach((item, index) => {
+          this.$set(this.todayList[index], 'starttime',  new Date(item.scheduled.replace(new RegExp(/-/gm), "/")).getTime() - new Date().getTime())
+        })
+      }
+    },
+    parseTime(t) {
+      return parseTime(t, "{m}-{d} {h}:{i}");
+    },
+    formaScore(v) {
+      if (!v) {
+        return "";
+      }
+      if (v == "0/0（0）") {
+        return "Yet To Bat";
+      }
+      let s = v.replace("（", "(");
+      let index = v.indexOf("(");
+      return s.substring(index);
+    },
+    formaScore1(v) {
+      if (!v) {
+        return "";
+      }
+      let s = v.replace("（", "(");
+      let index = v.indexOf("(");
+      return s.substring(0, index);
+    },
+    watchLiveAt(value) {
+      if (!value) {
+        return "";
+      }
+      var date = new Date(value.replace(new RegExp(/-/gm), "/"));
+      var hours = date.getHours();
+      var minutes = date.getMinutes();
+      if (hours != 12) {
+        hours = hours % 12;
+      }
+      if (hours == 12 && minutes) {
+        hours = hours % 12;
+      }
+      minutes = minutes < 10 ? "0" + minutes : minutes;
+      hours = hours < 10 ? "0" + hours : hours;
+      var strTime = hours + ":" + minutes;
+      return strTime;
+    },
+    watchLiveAt1(value) {
+      if (!value) {
+        return "";
+      }
+      var date = new Date(value.replace(new RegExp(/-/gm), "/"));
+      var hours = date.getHours();
+      var minutes = date.getMinutes();
+      var ampm = hours >= 12 ? "PM" : "AM";
+      var strTime = ampm;
+      if (minutes && hours == 12) {
+        strTime = "PM";
+      }
+      return strTime;
+    },
+    countdownFun(value) {
+      if (!value) {
+        return "";
+      }
+      var h = parseInt(value / 3600);
+      var m = parseInt((value % 3600) / 60);
+      var str = "";
+      if (h > 0) {
+        str += h + "hrs";
+        if (m < 10) {
+          m = "0" + m;
+        }
+        str += " " + m + "min";
+        return str;
+      } else {
+        if (m > 0) {
+          if (m < 10) {
+            m = "0" + m;
+          }
+          str += m + "min";
+        }
+      }
+
+      var s = parseInt((value % 3600) % 60);
+      if (s < 10) {
+        s = "0" + s;
+      }
+      str += " " + s + "s";
+      return str;
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.today {
+  padding-top: 4.43vw;
+}
+.live-box {
+  padding: 0 29rpx;
+  .title {
+    font-size: 3.5vw;
+    font-weight: bold;
+    color: #242424;
+    line-height: 1;
+    display: flex;
+    align-items: center;
+    padding-bottom: 24rpx;
+    .icon {
+      height: 4.08vw;
+      margin-right: 14rpx;
+    }
+  }
+  .load3 {
+    width: 100%;
+    display: block;
+  }
+  .today-box {
+    border-radius: 24rpx;
+    background-color: #fff;
+    overflow-x: hidden;
+    padding-bottom: 30rpx;
+    box-shadow: 0px 4px 10px 0px rgba(142, 142, 142, 0.33);
+  }
+  .item-one {
+    .img-box {
+      position: relative;
+      min-height: 60rpx;
+      .down-box {
+        position: absolute;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        right: 0;
+        border-radius: 17rpx;
+        background-color: rgba(27, 24, 67, 0.8);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 26rpx;
+        font-weight: 400;
+        color: #d5d4e4;
+        line-height: 1;
+        text-align: center;
+        .down {
+          margin-top: 24rpx;
+          font-size: 36rpx;
+          font-weight: bold;
+          color: #ffffff;
+        }
+      }
+    }
+    .logo {
+      position: absolute;
+      top: 13rpx;
+      left: 18rpx;
+      height: 31rpx;
+    }
+    .live {
+      position: absolute;
+      top: 25rpx;
+      right: 25rpx;
+      height: 37rpx;
+    }
+    .thumb {
+      display: block;
+      width: 100%;
+    }
+    .body {
+      padding: 0 27rpx;
+    }
+    .content {
+      border-bottom: 1px solid #e5e5e5;
+      padding-bottom: 16rpx;
+    }
+    .match1 {
+      display: flex;
+      align-items: center;
+      font-size: 3.5vw;
+      font-weight: bold;
+      color: #131313;
+      padding: 18rpx 0;
+    }
+    .icon1 {
+      margin-left: 20rpx;
+      width: 11rpx;
+    }
+    .match-detail-box {
+      position: relative;
+      padding-right: 14.48vw;
+    }
+    .detail-box {
+      border-right: 1px solid #e5e5e5;
+      padding-right: 22rpx;
+    }
+    .home {
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      & + .home {
+        margin-top: 9rpx;
+      }
+      .icon2 {
+        position: absolute;
+        right: -22rpx;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 11rpx;
+      }
+    }
+    .left {
+      display: flex;
+      align-items: center;
+      font-size: 3.03vw;
+      font-weight: bold;
+      color: #131313;
+      line-height: 1;
+      max-width: 90%;
+      min-width: 20%;
+      .home_logo {
+        margin-right: 14rpx;
+      }
+    }
+    .right {
+      display: flex;
+      align-items: center;
+      font-size: 3.03vw;
+      font-weight: 400;
+      color: #888888;
+    }
+    .value {
+      font-weight: bold;
+      &.value1 {
+        color: #2c2c2c;
+      }
+    }
+    .status-box {
+      position: absolute;
+      top: 0;
+      right: -20rpx;
+      height: 100%;
+      width: 16.35vw;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      line-height: 1;
+      .icon3 {
+        display: block;
+        width: 11.09vw;
+      }
+      .text {
+        font-size: 2.33vw;
+        font-weight: 400;
+        color: #6e6e6e;
+        margin-bottom: 12rpx;
+        white-space: nowrap;
+      }
+      .text1 {
+        font-size: 2.8vw;
+        font-weight: bold;
+        color: #2c2c2c;
+      }
+    }
+  }
+  .item {
+    padding: 26rpx 27rpx 0;
+    display: flex;
+    align-items: center;
+    .thumb-box {
+      position: relative;
+      margin-right: 2.21vw;
+      .down-box {
+        position: absolute;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        right: 0;
+        border-radius: 10rpx;
+        background-color: rgba(27, 24, 67, 0.8);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 22rpx;
+        font-weight: 400;
+        color: #d5d4e4;
+        line-height: 1;
+        text-align: center;
+        .down {
+          margin-top: 24rpx;
+          font-size: 28rpx;
+          font-weight: bold;
+          color: #ffffff;
+        }
+      }
+    }
+    .thumb {
+      min-width: 34.46vw;
+      max-width: 34.46vw;
+      border-radius: 10rpx;
+      overflow: hidden;
+    }
+    .match-detail-box {
+      width: calc(100% - 36.67vw);
+    }
+    .match1 {
+      display: flex;
+      align-items: center;
+      font-size: 3.5vw;
+      font-weight: bold;
+      color: #131313;
+      padding-bottom: 3.27vw;
+    }
+    .icon1 {
+      margin-left: 20rpx;
+      width: 11rpx;
+    }
+    .detail-box {
+      position: relative;
+      padding-right: 14.48vw;
+    }
+    .detail-box1 {
+      border-right: 1px solid #e5e5e5;
+      padding-right: 22rpx;
+    }
+    .home {
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      & + .home {
+        margin-top: 9rpx;
+      }
+      .icon2 {
+        position: absolute;
+        right: -22rpx;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 11rpx;
+      }
+    }
+    .left {
+      display: flex;
+      align-items: center;
+      font-size: 3.03vw;
+      font-weight: bold;
+      color: #131313;
+      line-height: 1;
+      max-width: 90%;
+      min-width: 20%;
+      .home_logo {
+        margin-right: 14rpx;
+      }
+    }
+    .right {
+      display: flex;
+      align-items: center;
+      font-size: 3.03vw;
+      font-weight: 400;
+      color: #888888;
+      // white-space: nowrap;
+    }
+    .value {
+      font-weight: bold;
+      &.value1 {
+        color: #2c2c2c;
+      }
+    }
+    .status-box {
+      position: absolute;
+      top: 0;
+      right: -20rpx;
+      height: 100%;
+      width: 16.35vw;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      line-height: 1;
+      .icon3 {
+        display: block;
+        width: 11.09vw;
+      }
+      .text {
+        font-size: 2.33vw;
+        font-weight: 400;
+        color: #6e6e6e;
+        margin-bottom: 12rpx;
+        white-space: nowrap;
+      }
+      .text1 {
+        font-size: 2.8vw;
+        font-weight: bold;
+        color: #2c2c2c;
+      }
+    }
+  }
+}
+.show-all {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 3.5vw;
+  font-weight: bold;
+  color: #ff3300;
+  line-height: 1;
+  padding-top: 4.32vw;
+  .icon4 {
+    width: 15rpx;
+    margin-left: 1.75vw;
+  }
+}
+.box2 {
+  padding-left: 29rpx;
+  .title {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-weight: bold;
+    color: #242424;
+    font-size: 30rpx;
+    line-height: 1;
+    padding: 40rpx 29rpx 40rpx 0;
+  }
+  .all {
+    font-size: 28rpx;
+    color: #ff3300;
+  }
+}
+.list-box {
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  .item {
+    min-width: 42.17vw;
+    max-width: 42.17vw;
+    margin-right: 20rpx;
+  }
+  .body {
+    color: #fff;
+    border-radius: 92rpx;
+    padding: 0 5.1vw;
+    box-shadow: 0px 4px 10px 0px rgba(142, 142, 142, 0.33);
+  }
+  .body0 {
+    background-color: #2549d1;
+  }
+  .body1 {
+    background-color: #3e3e3e;
+  }
+  .body2 {
+    background-color: #be313e;
+  }
+  .time {
+    font-size: 22rpx;
+    font-weight: 400;
+    line-height: 1;
+    padding: 2.1vw 0;
+    text-align: center;
+  }
+  .match-box {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-bottom: 3.73vw;
+    font-size: 2.57vw;
+    font-weight: bold;
+    color: #fffefe;
+  }
+  .img-box {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .text-clamp {
+      width: 8.52vw;
+      text-align: center;
+    }
+  }
+  .home_logo {
+    height: 8.17vw;
+    display: block;
+    max-width: 100%;
+  }
+  .vs {
+    padding:0 2px 2.57vw;
+  }
+  .team {
+    font-size: 3.27vw;
+    font-weight: 400;
+    color: #333333;
+    text-align: center;
+    padding-top: 14rpx;
+  }
+  .soon {
+    font-size: 3.27vw;
+    font-weight: 400;
+    color: #333333;
+    text-align: center;
+  }
+  .load1 {
+    width: 100%;
+    display: block;
+  }
+}
+</style>

pages/Live/compontent/tournamentList.vue

@@ -0,0 +1,587 @@
+<template>
+  <div class="tournament">
+    <div class="box" v-if="list.length">
+      <div class="title" :class="{'fadeInRight': animationLoaded}">
+        <img class="icon" src="/static/image/live/icon.png" alt="" />
+        <!-- with Sportcaster -->
+        {{ $t("live.lab46") }}
+      </div>
+      <div class="tag-box" :class="{'fadeInLeft': animationLoaded}">
+        <div class="list-box">
+          <div
+            class="item"
+            v-for="item in list"
+            :key="item.id"
+            @click="activeInfo = item"
+          >
+            <div class="img-box" :class="{ active: activeInfo.id == item.id }">
+              <u--image
+                class="avatar"
+                :src="item.avatar"
+                shape="circle"
+                width="104rpx"
+                height="104rpx"
+              ></u--image>
+            </div>
+            <div class="name text-clamp">{{ item.user_nickname }}</div>
+            <div class="active-box" v-if="activeInfo.id == item.id"></div>
+          </div>
+        </div>
+        <div class="left-tag"></div>
+        <div class="right-tag"></div>
+      </div>
+
+      <div class="section" :class="{'fadeInRight': animationLoaded}" v-if="activeInfo.id" @click="toUrlLive(activeInfo)">
+        <div class="box1">
+          <div class="detail-section">
+            <div class="img-box">
+              <img
+                class="logo"
+                src="/static/image/live/header_logo.png"
+                alt=""
+              />
+              <img class="thumb" :src="activeInfo.thumb" alt="" />
+              <div class="view-box">
+                <img class="icon6" src="/static/image/live/icon6.png" alt="" />
+                {{ numberToK(activeInfo.viewers) || 0 }}
+              </div>
+              <!-- <div class="down-box" v-if="activeInfo.starttime > 0 && activeInfo.status == 0">
+                <div>
+                  <div>
+                    Match starts in
+                    {{ $t("match.lab76") }}
+                  </div>
+                  <div class="down">
+                    {{ countdownFun(activeInfo.starttime / 1000) }}
+                  </div>
+                </div>
+              </div> -->
+            </div>
+            <div class="body">
+              <div class="match1">
+                <div class="text-clamp">{{ activeInfo.tournament }}</div>
+                <img class="icon1" src="/static/image/live/icon1.png" alt="" />
+              </div>
+              <div class="match-detail-box">
+                <div class="detail-box">
+                  <div class="home">
+                    <div class="left">
+                      <u--image
+                        class="home_logo"
+                        mode="aspectFit"
+                        :src="
+                          activeInfo.home_logo ||
+                          '/static/image/common/team.png'
+                        "
+                        shape="circle"
+                        width="32rpx"
+                        height="32rpx"
+                      ></u--image>
+                      <div class="text-clamp">{{ activeInfo.home_name }}</div>
+                    </div>
+                    <div class="right">
+                      {{ formaScore(activeInfo.home_display_score) }}
+                      <div
+                        class="value"
+                        :class="{
+                          value1:
+                            activeInfo.winner_id &&
+                            activeInfo.winner_id == activeInfo.home_id,
+                        }"
+                      >
+                        {{ formaScore1(activeInfo.home_display_score) }}
+                      </div>
+                    </div>
+                    <img
+                      v-if="
+                        activeInfo.winner_id &&
+                        activeInfo.winner_id == activeInfo.home_id
+                      "
+                      class="icon2"
+                      src="/static/image/live/icon2.png"
+                      alt=""
+                    />
+                  </div>
+                  <div class="home">
+                    <div class="left">
+                      <u--image
+                        class="home_logo"
+                        mode="aspectFit"
+                        :src="
+                          activeInfo.away_logo ||
+                          '/static/image/common/team.png'
+                        "
+                        shape="circle"
+                        width="32rpx"
+                        height="32rpx"
+                      ></u--image>
+                      <div class="text-clamp">{{ activeInfo.away_name }}</div>
+                    </div>
+                    <div class="right">
+                      {{ formaScore(activeInfo.away_display_score) }}
+                      <div
+                        class="value"
+                        :class="{
+                          value1:
+                            activeInfo.winner_id &&
+                            activeInfo.winner_id == activeInfo.away_id,
+                        }"
+                      >
+                        {{ formaScore1(activeInfo.away_display_score) }}
+                      </div>
+                    </div>
+                    <img
+                      v-if="
+                        activeInfo.winner_id &&
+                        activeInfo.winner_id == activeInfo.away_id
+                      "
+                      class="icon2"
+                      src="/static/image/live/icon2.png"
+                      alt=""
+                    />
+                  </div>
+                </div>
+                <div class="status-box">
+                  <img
+                    v-if="activeInfo.status == 1"
+                    class="icon3"
+                    src="/static/image/live/icon3.png"
+                    alt=""
+                  />
+                  <div v-if="activeInfo.status == 0" class="text">
+                    <!-- Watch Live in -->
+                    {{ $t("match.lab92") }}
+                  </div>
+                  <div v-if="activeInfo.status == 2" class="text">
+                    {{ $t("match.lab90") }}
+                  </div>
+                  <div v-if="activeInfo.status == 0" class="text1">
+                    {{ watchLiveAt(activeInfo.scheduled) }}
+                    {{ watchLiveAt1(activeInfo.scheduled) }}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { numberToK } from "@/utils/util";
+import animationMixin from '@/pages/mixins/animation'
+export default {
+  mixins: [animationMixin],
+  data() {
+    return {
+      list: [],
+      activeInfo: {},
+      timer: null,
+    };
+  },
+  deactivated() {
+    // clearInterval(this.timer)
+    // this.timer = null
+  },
+  created() {
+    this.getList();
+  },
+  activated() {
+    // this.timerStart()
+  },
+  methods: {
+    toUrlLive(item) {
+      gtag("event", "live_H5", {
+        live_H5: "0",
+      });
+      uni.navigateTo({
+        url: `./live-detail?id=${item.live_id}&ID=${item.live_id}`,
+      });
+    },
+    getList() {
+      uni.$u.http.get("/api/live_streaming/getTournamentLive").then((res) => {
+        let list = res || [];
+        let sign = false;
+        list.forEach((item) => {
+          if (this.activeInfo.id && this.activeInfo.id == item.id) {
+            sign = true;
+          }
+          item.starttime =
+            new Date(item.scheduled.replace(new RegExp(/-/gm), "/")).getTime() -
+            new Date().getTime();
+        });
+        this.list = list;
+        if (this.activeInfo.id) {
+          if (!sign) {
+            this.activeInfo = this.list[0] || {};
+          }
+        } else {
+          this.list[0] && (this.activeInfo = this.list[0]);
+        }
+        // this.timerStart()
+      }).finally(() => {
+        if (this.animationLoaded) {
+          return
+        }
+        this.animationLoaded = true
+        this.$nextTick(() => {
+          this.scrollFun()
+        })
+      })
+    },
+    timerStart() {
+      if (this.list[0]) {
+        if (!this.timer) {
+          this.timer = setInterval(() => {
+            this.$set(this.activeInfo, 'starttime', new Date(this.activeInfo.scheduled.replace(new RegExp(/-/gm), "/")).getTime() -
+            new Date().getTime())
+          }, 1000)
+        }
+      } else {
+        if (this.timer) {
+          clearInterval(this.timer)
+          this.timer = null
+        }
+      }
+    },
+    numberToK(v) {
+      return numberToK(v);
+    },
+    formaScore(v) {
+      if (!v) {
+        return "-";
+      }
+      if (v == "0/0（0）") {
+        return "Yet To Bat";
+      }
+      let s = v.replace("（", "(");
+      let index = v.indexOf("(");
+      return s.substring(index);
+    },
+    formaScore1(v) {
+      if (!v) {
+        return "";
+      }
+      let s = v.replace("（", "(");
+      let index = v.indexOf("(");
+      return s.substring(0, index);
+    },
+    watchLiveAt(value) {
+      if (!value) {
+        return "";
+      }
+      var date = new Date(value.replace(new RegExp(/-/gm), "/"));
+      var hours = date.getHours();
+      var minutes = date.getMinutes();
+      if (hours != 12) {
+        hours = hours % 12;
+      }
+      if (hours == 12 && minutes) {
+        hours = hours % 12;
+      }
+      minutes = minutes < 10 ? "0" + minutes : minutes;
+      hours = hours < 10 ? "0" + hours : hours;
+      var strTime = hours + ":" + minutes;
+      return strTime;
+    },
+    watchLiveAt1(value) {
+      if (!value) {
+        return "";
+      }
+      var date = new Date(value.replace(new RegExp(/-/gm), "/"));
+      var hours = date.getHours();
+      var minutes = date.getMinutes();
+      var ampm = hours >= 12 ? "PM" : "AM";
+      var strTime = ampm;
+      if (minutes && hours == 12) {
+        strTime = "PM";
+      }
+      return strTime;
+    },
+    countdownFun(value) {
+      if (!value) {
+        return "";
+      }
+      var h = parseInt(value / 3600);
+      var m = parseInt((value % 3600) / 60);
+      var str = "";
+      if (h > 0) {
+        str += h + "hrs";
+        if (m < 10) {
+          m = "0" + m;
+        }
+        str += " " + m + "min";
+        return str;
+      } else {
+        if (m > 0) {
+          if (m < 10) {
+            m = "0" + m;
+          }
+          str += m + "min";
+        }
+      }
+
+      var s = parseInt((value % 3600) % 60);
+      if (s < 10) {
+        s = "0" + s;
+      }
+      str += " " + s + "s";
+      return str;
+    },
+  },
+};
+</script>
+<style lang="scss">
+.box {
+  padding-top: 4.32vw;
+  padding-bottom: 6rpx;
+  .title {
+    font-size: 3.5vw;
+    font-weight: bold;
+    color: #242424;
+    line-height: 1;
+    display: flex;
+    align-items: center;
+    padding-bottom: 20rpx;
+    padding-left: 29rpx;
+    .icon {
+      height: 4.08vw;
+      margin-right: 14rpx;
+    }
+  }
+}
+.tag-box {
+  width: 100%;
+  overflow: hidden;
+  position: relative;
+  .left-tag,
+  .right-tag {
+    position: absolute;
+    z-index: 5;
+    bottom: 0;
+    height: 19rpx;
+    width: 42rpx;
+    background-color: #f3f3f7;
+  }
+  .left-tag {
+    left: 0;
+  }
+  .right-tag {
+    right: 0;
+  }
+}
+.list-box {
+  padding-top: 13rpx;
+  padding-left: 17rpx;
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  .item {
+    min-width: 124rpx;
+    max-width: 124rpx;
+    position: relative;
+    padding-bottom: 19rpx;
+    overflow: hidden;
+  }
+  .img-box {
+    position: relative;
+    padding: 10rpx;
+    &.active {
+      background-image: url("/static/image/live/icon5.png");
+      background-size: contain;
+      background-repeat: no-repeat;
+    }
+    .avatar {
+      width: 104rpx;
+      height: 104rpx;
+    }
+  }
+  .name {
+    padding: 1.4vw 16rpx 0;
+    font-size: 3.27vw;
+    font-weight: 400;
+    color: #242424;
+    line-height: 1;
+    text-align: center;
+  }
+  .active-box {
+    position: absolute;
+    z-index: 2;
+    border: 2rpx solid #ff3300;
+    width: 10px;
+    height: 10px;
+    left: 50%;
+    transform: translateX(-50%);
+    bottom: -7px;
+    background-color: #fff;
+    transform: rotate(45deg);
+  }
+}
+.section {
+  padding: 0 29rpx;
+  position: relative;
+  transform: translate(0, -1px);
+}
+.box1 {
+  border: 2rpx solid #ff3300;
+  border-radius: 24rpx;
+  overflow: hidden;
+}
+.detail-section {
+  background-color: #ffff;
+  position: relative;
+  z-index: 3;
+  padding: 7rpx;
+  .img-box {
+    position: relative;
+    min-height: 60rpx;
+    .logo {
+      position: absolute;
+      top: 13rpx;
+      left: 18rpx;
+      height: 31rpx;
+    }
+    .thumb {
+      width: 100%;
+      display: block;
+      border-radius: 24rpx;
+    }
+    .view-box {
+      position: absolute;
+      top: 15rpx;
+      right: 18rpx;
+      padding: 6rpx 14rpx;
+      color: #fff;
+      border-radius: 17rpx;
+      font-weight: 400;
+      line-height: 1;
+      font-size: 26rpx;
+      background-color: rgba(0, 0, 0, 0.5);
+      .icon6 {
+        width: 27rpx;
+        margin-right: 10rpx;
+      }
+    }
+    .down-box {
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      border-radius: 17rpx;
+      background-color: rgba(27, 24, 67, 0.8);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 26rpx;
+      font-weight: 400;
+      color: #d5d4e4;
+      line-height: 1;
+      text-align: center;
+      .down {
+        margin-top: 24rpx;
+        font-size: 36rpx;
+        font-weight: bold;
+        color: #ffffff;
+      }
+    }
+  }
+  .body {
+    padding-top: 18rpx;
+    padding-bottom: 17rpx;
+    padding-left: 22rpx;
+  }
+  .match1 {
+    display: flex;
+    align-items: center;
+    font-size: 3.5vw;
+    font-weight: bold;
+    color: #131313;
+    padding-bottom: 18rpx;
+  }
+  .icon1 {
+    margin-left: 20rpx;
+    width: 11rpx;
+  }
+  .match-detail-box {
+    position: relative;
+    padding-right: 16.35vw;
+  }
+  .detail-box {
+    border-right: 1px solid #e5e5e5;
+    padding-right: 22rpx;
+  }
+  .home {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    & + .home {
+      margin-top: 9rpx;
+    }
+    .icon2 {
+      position: absolute;
+      right: -22rpx;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 11rpx;
+    }
+  }
+  .left {
+    display: flex;
+    align-items: center;
+    font-size: 3.03vw;
+    font-weight: bold;
+    color: #131313;
+    line-height: 1;
+    max-width: 90%;
+    min-width: 20%;
+    .home_logo {
+      margin-right: 14rpx;
+    }
+  }
+  .right {
+    display: flex;
+    align-items: center;
+    font-size: 3.03vw;
+    font-weight: 400;
+    color: #888888;
+  }
+  .value {
+    font-weight: bold;
+    &.value1 {
+      color: #2c2c2c;
+    }
+  }
+  .status-box {
+    position: absolute;
+    top: 0;
+    right: 0;
+    height: 100%;
+    width: 16.35vw;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    line-height: 1;
+    .icon3 {
+      display: block;
+      width: 11.09vw;
+    }
+    .text {
+      font-size: 2.33vw;
+      font-weight: 400;
+      color: #6e6e6e;
+      margin-bottom: 12rpx;
+      white-space: nowrap;
+    }
+    .text1 {
+      font-size: 2.8vw;
+      font-weight: bold;
+      color: #2c2c2c;
+    }
+  }
+}
+</style>

pages/Live/detail-5.vue

@@ -0,0 +1,12 @@
+<template>
+	<div>
+		111
+		<video src=""></video>
+	</div>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>

pages/Live/history-detail.vue

@@ -0,0 +1,743 @@
+<!-- 直播间 -->
+<template>
+  <view class="detail live-detail">
+    <div class="body">
+      <detailHeader :roomInfo="roomInfo" v-if="roomInfo.title"></detailHeader>
+      <div id="palyevent">palyevent</div>
+      <div v-html="inputHtml"></div>
+      <div style="height: 420rpx; width: 100%">
+        <div class="prism-player" id="player-con">
+          <lff-barrage
+            ref="lffBarrage"
+            :maxTop="240"
+            type="leftToRight"
+          ></lff-barrage>
+          <lff-barrage ref="lffBarrage2"></lff-barrage>
+          <detailDownload @cancel="downloadTimerFun" v-if="downloadShow"></detailDownload>
+          <detailFollow v-if="toolbar && !isFullScreen" :matchDetail="matchDetail" :roomInfo="roomInfo" @success="getLiveDetail1" :userInfo="userInfo"></detailFollow>
+          <div class="icon-box" v-if="toolbar">
+            <u-icon name="rewind-left-fill" color="#fff" size="50" @click="setSeek(-10)"></u-icon>
+            <u-icon :name="!isPlay ? 'play-right-fill' : 'pause'" @click="playToggle" color="#fff" size="100"></u-icon>
+            <u-icon name="rewind-right-fill" color="#fff" size="50" @click="setSeek(10)"></u-icon>
+          </div>
+        </div>
+      </div>
+      <div class="adver-box">
+        <img class="ad" v-if="roomInfo.adver_img_one" @click="adClick(roomInfo)" :src="roomInfo.adver_img_one" alt="">
+        <img class="qr_img" v-if="roomInfo.qr_img" @click.stop="adClick1(roomInfo)" :src="roomInfo.qr_img" alt="">
+      </div>
+      <view class="tabs" v-if="liveType != 'game'">
+        <u-tabs
+          :list="tabList"
+          lineHeight="3px"
+          lineWidth="35px"
+          lineColor="#DC3C23"
+          :scrollable="true"
+          :activeStyle="{
+            color: '#DC3C23',
+            fontSize: '15px',
+            fontWeight: '700',
+          }"
+          :itemStyle="{height: '40px'}"
+          :inactiveStyle="{ color: '#000', fontSize: '15px' }"
+          :current="current"
+          @change="change"
+        >
+        </u-tabs>
+      </view>
+    </div>
+    <detailList v-if="current == 0" :liveList="liveList" :robotLength="robotLength"/>
+    <detailChat :liveType="liveType" v-show="current == 1" :giftList="giftList" @addMesg="addMesg" ref="detail1" :roomInfo="roomInfo" :userInfo="userInfo"/>
+    <!-- <detailAnimation v-if="current == 2" :livePath="matchDetail.live_url" /> -->
+    <detailLive v-if="current == 2" :matchDetail="matchDetail" />
+    <detailInfo v-if="current == 3" :matchDetail="matchDetail" />
+    <detailScorecard v-if="current == 4" :list="competition_list" :matchDetail="matchDetail" />
+    <detailSquad v-if="current == 5" :matchDetail="matchDetail" />
+  </view>
+</template>
+
+<script>
+import detailInfo from './compontent/detail-info.vue'
+import detailChat from './compontent/detail-chat.vue'
+import detailAnimation from './compontent/detail-animation.vue'
+import detailList from './compontent/detail-list-h.vue'
+import detailLive from './compontent/detail-live.vue'
+import detailScorecard from './compontent/detail-scorecard.vue'
+import detailSquad from './compontent/detail-squad.vue'
+import bus from '@/utils/bus'
+import detailHeader from './compontent/detail-header.vue'
+import detailFollow from './compontent/detail-follow.vue'
+import detailDownload from './compontent/detail-download.vue'
+export default {
+  components: {
+    detailHeader,
+    detailFollow,
+    detailInfo,
+    detailChat,
+    detailList,
+    detailLive,
+    detailScorecard,
+    detailSquad,
+    detailAnimation,
+    detailDownload
+  },
+  data() {
+    return {
+      nativeShare: null,
+      videoMask: false,
+      timer: null, //定时器
+      i: 0, //计数
+      show: false,
+      quality: ["540", "720", "1080"],
+      bg: {
+        backgroundColor: "transparent",
+      },
+      tabList: [
+        {
+          name: this.$t("live.detailTab1"),
+        },
+        {
+          name: this.$t("live.detailTab2"),
+        },
+        // {
+        //   name: this.$t('live.lab39'),
+        // },
+        {
+          name: this.$t("live.detailTab3"),
+        },
+        {
+          name: this.$t("live.detailTab4"),
+        },
+        {
+          name: this.$t("live.detailTab5"),
+        },
+        {
+          name: this.$t("live.detailTab6"),
+        },
+      ],
+      groupID: "",
+      id: '',
+      roomInfo: {},
+      matchDetail: {},
+			competition_list: [],
+      player: null,
+      current: 1,
+      userInfo: {},
+      giftList: [],
+      isPlay: true,
+      toolbar: false,
+      isFullScreen: false,
+      toolbarTimer: null,
+      videoPlay: false,
+      isQuality: false,
+      qualityIndex: 0,
+      qualityArr: [], //画质数组
+      quality: [], //画质
+      fanItam: {},
+      setType: 0,
+      liveList: [],
+      MediaUrl: '',
+      liveType: '',
+      danmu: true,
+      time1: null,
+      robotLength: 0,
+      userClick: false,
+      downloadShow: false,
+      downloadTimer: null,
+      inputHtml: '<input type="text" id="copy-input" style="opacity: 0;position: fixed;top: 0;z-index: -1;" readonly="readonly">'
+    };
+  },
+
+  onLoad(option) {
+    this.id = option.ID;
+    this.liveType = option.type
+    this.MediaUrl = option.MediaUrl;
+    // 根据传递过来的参数判断是详情还是历史记录
+    // let watchingOutSign = localStorage.getItem('watchingOutSign')
+    // if (watchingOutSign && this.isLogin != 1) {
+    //   this.$r.loginBox();
+    //   this.$store.state.loginShowSign = true;
+    //   this.$store.state.loginShowCloseSign = false;
+    // } else {
+      this.getIsLogin();
+    // }
+    // this.getUserGiftList()
+    if (this.liveType != 'game') {
+      this.getList();
+    }
+    this.$store.state.timMessage = [];
+  },
+  onUnload() {
+    bus.$off('chatLogin')
+    this.time1 && clearInterval(this.time1);
+    this.downloadTimer && clearTimeout(this.downloadTimer);
+    window.removeEventListener('touchstart', this.owerPlay1)
+    this.player && this.player.dispose();
+    this.time1 = null;
+    /* 退出群组 */
+    uni.$TUIKit
+      .quitGroup(this.groupID)
+      .then((imResponse) => {})
+      .catch((imError) => {
+        console.warn("joinGroup error:", imError); // 申请加群失败的相关信息
+      });
+  },
+  onShow() {
+   
+  },
+  onHide() {
+  },
+  watch: {
+  },
+  mounted() {
+    this.downloadTimerFun()
+		this.getLiveDetail();
+    window.addEventListener('touchstart', this.owerPlay1)
+    document.getElementById('palyevent').addEventListener('click',this.owerPlay)
+  },
+  computed: {
+    infos() {
+      return this.$store.state.info;
+    },
+    isLogin() {
+      return this.$store.state.isLogin;
+    },
+    system() {
+      return this.$store.state.system;
+    },
+  },
+  methods: {
+    videoInit(data) {
+      var $this = this
+      this.player = new Aliplayer(
+        {
+          id: "player-con",
+          source: this.MediaUrl,
+          width: "100%",
+          height: "100%",
+          autoplay: true,
+          isLive: false,
+          rePlay: true,
+          showBarTime: '3000',
+          // cover: data.thumb,
+          videoHeight: "100%",
+          keyShortCuts: true,
+          playsinline: true,
+          "language": "en-us",
+          preload: true,
+          controlBarVisibility: "hover",
+          videoWidth: "100%",
+          useH5Prism: true,
+          skinLayout: [
+            // {
+            //   name: "bigPlayButton",
+            //   align: "blabs",
+            //   x: 30,
+            //   y: 80,
+            // },
+            {
+              name: "H5Loading",
+              align: "cc",
+            },
+            {
+              name: "errorDisplay",
+              align: "tlabs",
+              x: 0,
+              y: 0,
+            },
+            {
+              name: "infoDisplay",
+            },
+            {
+              name: "tooltip",
+              align: "blabs",
+              x: 0,
+              y: 56,
+            },
+            {
+              name: "thumbnail",
+            },
+            {
+              name: "controlBar",
+              align: "blabs",
+              x: 0,
+              y: 0,
+              children: [
+                {
+                  name: "progress",
+                  align: "blabs",
+                  x: 0,
+                  y: 44,
+                },
+                // {
+                //   name: "playButton",
+                //   align: "tl",
+                //   x: 15,
+                //   y: 12,
+                // },
+                {
+                  name: "timeDisplay",
+                  align: "tl",
+                  x: 10,
+                  y: 7,
+                },
+                {
+                  name: "fullScreenButton",
+                  align: "tr",
+                  x: 10,
+                  y: 12,
+                },
+                {
+                  name: "volume",
+                  align: "tr",
+                  x: 5,
+                  y: 10,
+                },
+              ],
+            },
+          ],
+        },
+        function (player) {
+          setTimeout(() => {
+            $this.clickPlay()
+          }, 1000)
+        }
+      );
+      this.player.on('hideBar', () => {
+        this.toolbar = false
+      })
+      this.player.on('showBar', () => {
+        this.isPlay = this.player.getStatus() == 'playing';
+        this.toolbar = true;
+        if (this.toolbarTimer) {
+          clearTimeout(this.toolbarTimer)
+        }
+        this.toolbarTimer = setTimeout(() => {
+          this.toolbar = false
+          this.toolbarTimer = null
+        }, 3000)
+      })
+      this.player.on('requestFullScreen', () => {
+        this.isFullScreen = true
+      })
+      this.player.on('cancelFullScreen', () => {
+        this.isFullScreen = false
+      })
+    },
+    getLiveDetail1() {
+      uni.$u.http.post("/api/Live_streaming/getRoomInfo", {
+        id: this.id,
+      }).then(res => {
+        this.roomInfo = res.info || {};
+        this.userInfo = res.userData;
+      })
+    },
+    /* 获取详情 */
+    cricket_match_detail() {
+      let time = new Date();
+      let timeZone = time.toLocaleTimeString('en-us',{timeZoneName:'short'});  //'1:12:38 PM GMT+8'
+      let timeZoneId = Intl.DateTimeFormat().resolvedOptions().timeZone; //'Asia/Shanghai'
+      uni.$u.http.post('/api/Cricket/cricket_match_detail',{
+        match_id: this.roomInfo.match_id,
+        timezone:timeZoneId
+      }).then(res=>{
+        this.matchDetail = res;
+        this.competition_list = res.competition_list || []
+      }).catch(res=>{})
+    },
+    /* 发布弹幕 */
+    addMesg(e) {
+      if (!this.$refs.lffBarrage) {
+        return
+      }
+      this.$refs.lffBarrage.add({ item: e });
+      this.$refs.lffBarrage2.add({ item: e });
+    },
+    /* 获取直播 */
+    getList() {
+      uni.$u.http.get('/api/LivePlayBack/list', {}).then(res => {
+        if (res.list) {
+          this.robotLength = res.list.length
+          this.liveList = res.list.slice(0, 6)
+        } else {
+          this.liveList = []
+        }
+      })
+    },
+    getHistoryMsg(msg) {
+      uni.$u.http.get("/api/LivePlayBack/getSimple", {
+        params: {
+          id: this.groupID
+        }
+      }).then((res) => {
+        let RspMsgList = res.RspMsgList || [];
+        let msgList = []
+        RspMsgList.forEach(item => {
+          let MsgBody = item.MsgBody || []
+          if (Array.isArray(MsgBody)) {
+            MsgBody.forEach(item1 => {
+              msgList.unshift({
+                conversationType: 'GROUP',
+                conversationID: 'GROUP' + this.groupID,
+                from: item.From_Account,
+                nick: item.From_Account,
+                payload: {
+                  data: item1.MsgContent.Data
+                }
+              })
+            })
+          }
+        })
+        if (msg) {
+          msgList.push(msg)
+        }
+        let arr = {
+          data: msgList,
+        };
+        this.$refs.detail1.$onMessageReceived(arr);
+      });
+    },
+    /* 判断是否登录 未登录情况下只能停留3分钟 180秒 */
+    getIsLogin() {
+      let that = this;
+      if (this.isLogin == 1) return;
+      uni.$u.http.get('/api/universal/getHot', {}).then(res => {
+        this.$store.state.system = res;
+        if (!this.system.login_remind || Number(this.system.login_remind) > 5000) return;
+        this.time1 = setTimeout((res) => {
+          if (this.isLogin == 1) {
+            return
+          }
+          localStorage.setItem('watchingOutSign', true)
+          this.$toast(this.$t('live.lab40'));
+          setTimeout((res1) => {
+            this.$toUrl('/pages/login/login')
+          }, 1500);
+        }, this.system.login_remind * 60000);
+      })
+    },
+
+    getLiveDetail(id) {
+      let _this = this;
+      uni.showLoading({
+        title: this.$t('common.lab'),
+      });
+      uni.$u.http
+        .post("/api/Live_streaming/getRoomInfo", {
+          id: this.id,
+        })
+        .then((res) => {
+          this.userInfo = res.userData || {};
+          // 编辑主播公告
+          // res.userData.announcement1 = []
+          // res.userData.announcement1.push(res.userData.announcement)
+          this.roomInfo = res.info || {};
+          this.groupID = this.roomInfo.id + '';
+          if (this.roomInfo.match_id) {
+            this.cricket_match_detail()
+          } else {
+            this.tabList = [
+            {
+              name: this.$t("live.detailTab1"),
+            },
+            {
+              name: this.$t("live.detailTab2"),
+            }
+            ]
+          }
+          if (JSON.stringify(res.info.clarity) == "{}") {
+            this.quality = ["原画"];
+          } else {
+            this.quality = ["流畅", "标清", "高清"];
+            // 重组清晰画质连接
+            let qualityArr = [];
+            for (let var1 in res.info.clarity) {
+              let name = var1;
+              // if(var1 == 'smooth') {
+              // 	name = '540'
+              // }else if(var1 == 'sd') {
+              // 	name = '720'
+              // }else if(var1 == 'hd') {
+              // 	name = '1080'
+              // }
+              qualityArr.push({
+                name,
+                src: res.info.clarity[var1],
+              });
+            }
+            qualityArr.unshift({
+              src: res.info.pull,
+              name: this.$t("live.standard"),
+            });
+            this.qualityArr = qualityArr;
+          }
+          this.loginTim()
+          setTimeout(() => {
+            this.videoInit(res.info)
+          }, 1000)
+        }).finally(() => {
+          uni.hideLoading();
+        });
+    },
+    loginTim() {
+      if (this.isLogin == 1) {
+          this.$store.dispatch('loginTim', this.infos).then(() => {
+            this.joinGroup(this.infos)
+          })
+        } else {
+          bus.$on('chatLogin', this.joinGroup)
+          let youkeInfo = JSON.parse(sessionStorage.getItem('youkeInfo'))
+          if (youkeInfo) {
+            this.$store.dispatch('loginTim', {
+              ...youkeInfo,
+              types: 'youke'
+            }).then(() => {
+            this.joinGroup(youkeInfo)
+            })
+          } else {
+            uni.$u.http.post("/api/Universal/imTouristAccount").then(res => {
+              sessionStorage.setItem('youkeInfo', JSON.stringify(res))
+              this.$store.dispatch('loginTim', {
+                ...res,
+                types: 'youke'
+              }).then(() => {
+                this.joinGroup(res)
+              })
+            })
+          }
+        }
+    },
+    joinGroup(info, sign) {
+      uni.$TUIKit.joinGroup({
+        groupID: this.groupID,
+        type: "TIM.TYPES.GRP_AVCHATROOM",
+      }).then((imResponse) => {
+        switch (imResponse.data.status) {
+          case uni.$TUIKitTIM.TYPES.JOIN_STATUS_WAIT_APPROVAL:
+            // 等待管理员同意
+            break;
+
+          case uni.$TUIKitTIM.TYPES.JOIN_STATUS_SUCCESS:
+            // 加群成功
+            this.$nextTick(() => {
+              this.login(info)
+            });
+            break;
+          case "AlreadyInGroup":
+            // 加群成功
+            this.$nextTick(() => {
+              if (sign) {
+                this.login(info)
+              } else {
+                this.getHistoryMsg()
+              }
+            });
+          break;
+          case uni.$TUIKitTIM.TYPES.JOIN_STATUS_ALREADY_IN_GROUP:
+            // 已经在群中
+            break;
+          default:
+            break;
+        }
+      });
+    },
+    login(infos) {
+      let data = {
+        type: 102,
+        nobel: {
+          level: 1,
+          // 贵族图标guard_icon || 等级图标exp_icon || 房主图标
+          exp_icon: infos.exp_icon,
+          is_guard: infos.is_guard,
+          guard_swf: infos.is_guard == 1 ? infos.guard.swf : "",
+          guard_name: infos.is_guard == 1 ? infos.guard.swf_name : "",
+          is_room: infos.id == this.groupID ? 1 : 0,
+          guard_icon: infos.is_guard == 1 ? infos.guard.icon : "",
+        },
+      };
+      let to = this.groupID;
+      const message = uni.$TUIKit.createCustomMessage({
+        to,
+        conversationType: "GROUP",
+        payload: {
+          data: JSON.stringify(data),
+        },
+      });
+      uni.$TUIKit
+        .sendMessage(message)
+        .then((res) => {
+          this.getHistoryMsg()
+        })
+        .catch((error) => {});
+    },
+    change(e) {
+      this.current = e.index;
+      if (e == 2) {
+        setTimeout((res) => {
+          this.$refs.detail3.getList({ uid: this.userInfo.uid, type: 0 });
+        }, 100);
+      }
+    },
+    setSeek(type) {
+      if (this.toolbarTimer) {
+        clearTimeout(this.toolbarTimer)
+      }
+      this.toolbarTimer = setTimeout(() => {
+        this.toolbar = false
+        this.toolbarTimer = null
+      }, 3000)
+      let t = this.player.getCurrentTime();
+      let a = this.player.getDuration();
+      t += type
+      if (t < 0) {
+        t = 0
+      }
+      if (t > a) {
+        t = a
+      }
+      this.player.seek(t)
+    },
+    playToggle() {
+      let status = this.player.getStatus();
+      if (this.toolbarTimer) {
+        clearTimeout(this.toolbarTimer)
+      }
+      this.toolbarTimer = setTimeout(() => {
+        this.toolbar = false
+        this.toolbarTimer = null
+      }, 3000)
+      if (status == 'playing') {
+        this.isPlay = false
+        this.userClick = true
+        this.player.pause()
+      } else {
+        this.isPlay = true
+        this.player.play()
+      }
+    },
+    clickPlay() {
+      try {
+        var evt = document.createEvent('HTMLEvents')
+        evt.initEvent('click', true, true)
+        document.getElementById('palyevent').dispatchEvent(evt)
+      } catch (error) {
+      }
+    },
+    owerPlay() {
+      this.isPlay = true
+      this.player && this.player.play()
+    },
+    owerPlay1() {
+      if (this.userClick) {
+        return
+      }
+      this.owerPlay()
+    },
+    downloadTimerFun() {
+      this.downloadShow = false
+      this.downloadTimer = setTimeout(() => {
+        this.downloadShow = true
+      }, 60000 * 2)
+    },
+    adClick(info) {
+      if (info.adver_url_one) {
+        uni.$u.http
+        .post("/api/live_streaming/click_adv", {
+          type: this.liveType == 'game' ? 6 : 3,
+          id: info.id,
+          url: info.adver_url_one
+        })
+        .then((res) => {
+        }).finally(() => {
+        });
+        window.open(info.adver_url_one)
+      }
+    },
+    adClick1(info) {
+      if (info.qr_url) {
+        window.open(info.qr_url)
+      }
+    }
+  },
+};
+</script>
+
+<style lang="scss">
+page {
+  background-color: #f3f3f7;
+}
+.detail {
+  position: relative;
+  background: #f3f3f7;
+}
+
+.body {
+  position: sticky;
+	top: 0;
+  z-index: 20;
+  background-color: #f3f3f7;
+}
+@media screen and (orientation: landscape) {
+  .body {
+    position: relative;
+  }
+}
+#palyevent {
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+.icon-box {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: #fff;
+  font-weight: 700;
+  z-index: 9997;
+  display: flex;
+  align-items: center;
+  background-color: rgba(0, 0, 0, 0.1);
+  .u-icon {
+    padding: 10px;
+  }
+}
+.row {
+  display: flex;
+  align-items: center;
+  text-align: center;
+  background-color: rgb(18, 20, 21);
+  color: #fff;
+  font-size: 14px;
+  .col {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 20px;
+  }
+  .u-icon {
+    margin: 0 5px;
+  }
+}
+.tabs {
+  position: relative;
+}
+.u-tabs {
+  background-color: #fff;
+}
+.adver-box {
+  position: relative;
+  .qr_img {
+    position: absolute;
+    top: 0;
+    right: 0;
+    height: 100%;
+  }
+}
+.ad {
+  display: block;
+  width: 100%;
+}
+</style>

pages/Live/list.vue

@@ -0,0 +1,270 @@
+<template>
+	<view class="">
+		<view class="header flex-start">
+			<image src="/static/image/common/grade-left.png" mode="" @click="$back()"></image>
+			{{type == 0?$t('live.title1'):type == 1?$t('live.title2'):$t('live.title3')}}
+		</view>
+		<view class="detail-video-list">
+			<view class="detail-video-li" v-for="(item,index) in liveList" :key="index" @click="historyLive(item)">
+				<div class="img-box">
+					<img class="bottom" :src="item.bottom" alt="">
+					<div class="box">
+						<div class="logo-box">
+							<img class="logo" :src="item.home_logo" alt="">
+							<img class="logo" :src="item.away_logo" alt="">
+						</div>
+						<div class="detail-box">
+							<div class="title text-clamp">{{ item.Name }}</div>
+							<div class="start_time">{{ formatDate(item.start_time) }}</div>
+							<img class="icon1" src="/static/image/live/play-icon.png" alt="" />
+						</div>
+					</div>
+				</div>
+			</view>
+		</view>
+		<u-loadmore 
+			:status="status"
+			fontSize="28"
+			:line="true"
+			:loading-text="statusType.loadingText" 
+			:loadmore-text="statusType.loadmoreText" 
+			:nomore-text="statusType.nomoreText" 
+		/>
+	</view>
+</template>
+
+<script>
+import { numberToK, parseTime } from '@/utils/util'
+	export default {
+		data() {
+			return {
+				type:0,
+				liveList: [],
+				statusType:{
+					loadingText: this.$t('common.lab'),
+					loadmoreText: this.$t('common.lab1'),
+					nomoreText: this.$t('common.lab2')
+				},
+				status:'loadmore',
+				pageNumber: 1
+			}
+		},
+		onLoad(option) {
+			this.type = option.type;
+			this.getList()
+		},
+		// 触底触发
+		onReachBottom() {
+			if(this.status == 'loadmore'){
+				this.pageNumber++;
+				this.getList();
+			}
+			
+		},
+		// 下拉刷新
+		onPullDownRefresh(){
+			// 正常情况下接口返回应该很会很快。故意延迟调用，让用户有在刷新的体验感
+			this.pageNumber = 1;
+			this.status = 'loadmore';
+			this.getList();
+			
+			setTimeout(res=>{
+				uni.stopPullDownRefresh()
+			},1500)
+		},
+		methods: {
+			getList() {
+				this.status= 'loading';
+				this.getHistory()
+			},
+			getHistory() {
+				uni.$u.http.get('/api/LivePlayBack/list', {
+					params: {
+						pageNumber: this.pageNumber
+					}
+				}).then(res => {
+					if (this.pageNumber == 1) {
+						this.liveList = res.list || []
+					} else {
+						this.liveList = this.liveList.concat(res.list || [])
+					}
+					this.status = this.liveList.length == res.total ? 'nomore' : 'loadmore'
+				})
+			},
+			// 点击history
+			historyLive(item) {
+				uni.navigateTo({
+					url:`/pages/Live/history-detail?id=${item.Uid}&ID=${item.live_id}&MediaUrl=${item.MediaUrl}`
+				})
+			},
+			formatDate(value) {
+				var date1 = this.$common.parseTime(value * 1000, '{y}/{m}/{d} {h}:{i}:{s}')
+				var date = new Date(date1);
+				var weekNum = new Date().getDay()
+				let week = ""
+				switch (weekNum) {
+					case 0:
+						week = "Sun";
+						break;
+					case 1:
+						week = "Mon";
+						break;
+					case 2:
+						week = "Tue";
+						break;
+					case 3:
+						week = "Wed";
+						break;
+					case 4:
+						week = "Thu";
+						break;
+					case 5:
+						week = "Fri";
+						break;
+					case 6:
+						week = "Sat";
+						break;
+				}
+				var MonthNum = date.getMonth() + 1
+				let Month = ''
+				switch (MonthNum) {
+					case 1:
+						Month = "Jan";
+						break;
+					case 2:
+						Month = "Feb";
+						break;
+					case 3:
+						Month = "Mar";
+						break;
+					case 4:
+						Month = "Apr";
+						break;
+					case 5:
+						Month = "May";
+						break;
+					case 6:
+						Month = "Jun";
+						break;
+					case 7:
+						Month = "Jul";
+						break;
+					case 8:
+						Month = "Aug";
+						break;
+					case 9:
+						Month = "Sept";
+						break;
+					case 10:
+						Month = "Oct";
+						break;
+					case 11:
+						Month = "Nov";
+						break;
+					case 12:
+						Month = "Dec";
+						break;
+				}
+				let day = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate())
+				// this.week = week
+				// this.month = Month
+				// this.day = day
+				var hours = date.getHours();
+				var minutes = date.getMinutes();
+				var ampm = hours >= 12 ? 'PM' : 'AM';
+				if (hours != 12) {
+          hours = hours % 12;
+        }
+        if (hours == 12 && minutes) {
+          hours = hours % 12;
+          ampm = 'PM'
+        }
+        hours = hours < 10 ? "0" + hours : hours;
+				minutes = minutes < 10 ? '0' + minutes : minutes;
+				// var strTime = week + ',' + day + Month + '.' + 'Watch live in' + hours + ':' + minutes + ' ' + ampm;
+				var strTime =  `${hours}:${minutes} ${ampm},${day} ${Month} `;
+				return strTime;
+			},
+			numberToK(v) {
+				return numberToK(v)
+			},
+			parseTime(t) {
+				return parseTime(t, '{y}-{m}-{d} {h}:{i}')
+			}
+		},
+	}
+</script>
+
+<style lang="scss">
+	page {
+		background-color: #F3F3F7 !important;
+	}
+	.header {
+		color: #fff;
+		font-size: 34rpx;
+		padding: 18rpx 24rpx;
+		position: sticky;
+		top: 0;
+		z-index: 10;
+		background-color: #1D2550;
+		image {
+			width: 60rpx;
+			height: 60rpx;
+		}
+	}
+	.detail-video-list {
+		flex-wrap: wrap;
+		padding: 0 0 24rpx;
+	}
+	.detail-video-li {
+		overflow: hidden;
+		margin-top: 20rpx;
+		background-color: white;
+		.img-box {
+			position: relative;
+			min-height: 100rpx;
+		}
+		.box {
+			position: absolute;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			padding: 16px;
+		}
+		.logo-box {
+			display: flex;
+			align-items: center;
+			justify-content: space-around;
+			margin-bottom: 16px;
+			.logo {
+				height: 70rpx;
+			}
+		}
+		.detail-box {
+			position: relative;
+			padding-right: 30px;
+			.title {
+				margin-bottom: 8px;
+				font-weight: 500;
+				font-size: 14px;
+				color: #fff;
+			}
+			.start_time {
+				font-weight: 400;
+				font-size: 12px;
+				color: #ACACAC;
+			}
+			.icon1 {
+				position: absolute;
+				right: 0;
+				top: 50%;
+				transform: translateY(-50%);
+				width: 28px;
+			}
+		}
+		.bottom {
+			display: block;
+			width: 100%;
+		}
+	}
+</style>

pages/Live/live-detail.vue

@@ -0,0 +1,1146 @@
+<!-- 直播间 -->
+<template>
+  <view class="detail live-detail">
+    <div class="body">
+      <detailHeader :roomInfo="roomInfo" v-if="roomInfo.title"></detailHeader>
+      
+      <div v-html="inputHtml"></div>
+      <div class="no-live" v-if="!liveSign">
+        <detailFollow :matchDetail="matchDetail" :roomInfo="roomInfo" @success="getLiveDetail1" :userInfo="userInfo"></detailFollow>
+        <div class="down-box" v-if="roomInfo.down > 0 && roomInfo.islive == 0">
+          <div>
+            <div>
+              <!-- Match starts in -->
+              {{ $t("match.lab76") }}
+            </div>
+            <div class="down">
+              {{ countdownFun(roomInfo.down / 1000) }}
+            </div>
+          </div>
+        </div>
+        <img :src="roomInfo.thumb" width="100%" style="display:block" />
+				<!-- <image class="home_logo" v-if="roomInfo.home_logo && roomInfo.away_logo" :src="roomInfo.home_logo" mode="aspectFill" alt=""></image> -->
+				<!-- <image class="away_logo" v-if="roomInfo.home_logo && roomInfo.away_logo" :src="roomInfo.away_logo" mode="aspectFill" alt=""></image> -->
+      </div>
+      <view v-else class="video" @click="play(1)">
+        <view class="" style="z-index: 9997">
+          <lff-barrage
+            ref="lffBarrage"
+            :maxTop="240"
+            type="leftToRight"
+          ></lff-barrage>
+          <lff-barrage ref="lffBarrage2"></lff-barrage>
+        </view>
+        <view class="thumb video-js" ref="video" id="player-con">
+          <detailDownload @cancel="downloadTimerFun" v-if="downloadShow"></detailDownload>
+          <view class="video-mask" v-if="videoMask">
+            <detailFollow v-if="!isFullScreen" :matchDetail="matchDetail" :roomInfo="roomInfo" @success="getLiveDetail1" :userInfo="userInfo"></detailFollow>
+            <!-- <view class="top font24" @click="setting(5)">
+              {{ qualityIndex[qualityIndex] || "quality" }}
+            </view> -->
+            <div class="ranking-box" @click="screenMatchShow = true" v-if="isFullScreen && roomInfo.match_id">
+              <img class="ranking" src="/static/image/live/ranking.png" alt="">
+            </div>
+            <view class="foot flex-end" :class="{'full': isFullScreen}">
+              <image
+                src="/static/image/live/reset.png"
+                mode=""
+                @click="setting(1)"
+              ></image>
+              <screenChat :messageList="messageList" v-if="isFullScreen" :giftList="giftList" @addMesg="addMesg" :roomInfo="roomInfo" ref="detail1" :userInfo="userInfo"></screenChat>
+              <image
+                style="width: 78rpx"
+                :src="
+                  danmu
+                    ? '/static/image/live/danmu.png'
+                    : '/static/image/live/danm-false.png'
+                "
+                @click="setting(2)"
+                mode=""
+              ></image>
+              <u-icon v-if="isVolume" @click="play(2)" name="volume" color="#fff" size="36rpx"></u-icon>
+              <u-icon v-else @click="play(2)" name="volume-off" color="#fff" size="36rpx"></u-icon>
+              <!-- <image src="/static/image/live/danmu.png" mode=""></image> -->
+              <!-- <image src="/static/image/live/set.png" mode=""  @click="setting(3)"></image> -->
+              <image
+                src="/static/image/live/quanping.png"
+                mode=""
+                @click="setting(4)"
+              ></image>
+            </view>
+          </view>
+          <div class="screen-match" v-if="screenMatchShow && isFullScreen">
+            <screenMatch @cancel="screenMatchShow = false" :list="competition_list" :matchDetail="matchDetail" :livePath="matchDetail.live_path"></screenMatch>
+          </div>
+          <!-- 设置画质 -->
+          <view class="quality-mask" v-if="isQuality">
+            <view class="quality-nav">
+              <view class="quality-del flex-end" @click="isQuality = false">
+                <image src="/static/image/live/del.png" mode=""></image>
+              </view>
+              <view class="quality-title font32">
+                {{ $t("live.definition") }}
+              </view>
+              <view class="quality-list flex">
+                <view
+                  class=""
+                  v-for="(item, index) in qualityArr"
+                  :key="index"
+                  @click="setting(6, index)"
+                >
+                  {{ item.name }}
+                </view>
+              </view>
+            </view>
+          </view>
+        </view>
+        <image
+          class="thumb"
+          v-if="roomInfo && !videoPlay"
+          :src="roomInfo.thumb"
+          mode="aspectFill"
+        ></image>
+      </view>
+      <div class="adver-box">
+        <img class="ad" v-if="roomInfo.adver_img_one" @click="adClick(roomInfo)" :src="roomInfo.adver_img_one" alt="">
+        <img class="qr_img" v-if="roomInfo.qr_img" @click.stop="adClick1(roomInfo)" :src="roomInfo.qr_img" alt="">
+      </div>
+      <view class="tabs" v-if="liveType != 'game'">
+        <u-tabs
+          :list="tabList"
+          lineHeight="3px"
+          lineWidth="35px"
+          lineColor="#DC3C23"
+          :scrollable="true"
+          :activeStyle="{
+            color: '#DC3C23',
+            fontSize: '15px',
+            fontWeight: '700',
+          }"
+          :itemStyle="{height: '40px'}"
+          :inactiveStyle="{ color: '#000', fontSize: '15px' }"
+          :current="current"
+          @change="change"
+        >
+        </u-tabs>
+      </view>
+    </div>
+    <detailList v-if="current == 0" :liveList="liveList"/>
+    <detailChat :liveType="liveType" @uodateMsg="uodateMsg" v-show="current == 1" :giftList="giftList" @addMesg="addMesg" :roomInfo="roomInfo" ref="detail1" :userInfo="userInfo"/>
+    <!-- <detailAnimation v-if="current == 2" :livePath="matchDetail.live_path" /> -->
+    <detailLive v-if="current == 2" :matchDetail="matchDetail" />
+    <detailInfo v-if="current == 3" :matchDetail="matchDetail" />
+    <detailScorecard v-if="current == 4" :list="competition_list" :matchDetail="matchDetail" />
+    <detailSquad v-if="current == 5" :matchDetail="matchDetail" />
+  </view>
+</template>
+
+<script>
+import detailInfo from './compontent/detail-info.vue'
+import detailChat from './compontent/detail-chat.vue'
+import detailAnimation from './compontent/detail-animation.vue'
+import detailList from './compontent/detail-list.vue'
+import detailLive from './compontent/detail-live.vue'
+import detailScorecard from './compontent/detail-scorecard.vue'
+import detailSquad from './compontent/detail-squad.vue'
+import screenChat from './compontent/screen-chat.vue'
+import screenMatch from './compontent/screen-match.vue'
+import bus from '@/utils/bus'
+import detailHeader from './compontent/detail-header.vue'
+import detailFollow from './compontent/detail-follow.vue'
+import detailDownload from './compontent/detail-download.vue'
+export default {
+  components: {
+    detailHeader,
+    detailFollow,
+    detailInfo,
+    detailChat,
+    detailList,
+    detailLive,
+    detailScorecard,
+    detailSquad,
+    detailAnimation,
+    screenChat,
+    screenMatch,
+    detailDownload
+  },
+  data() {
+    return {
+      nativeShare: null,
+      videoMask: false,
+      timer: null, //定时器
+      i: 0, //计数
+      show: false,
+      quality: ["540", "720", "1080"],
+      bg: {
+        backgroundColor: "transparent",
+      },
+      tabList: [
+        {
+          name: this.$t("live.detailTab1"),
+        },
+        {
+          name: this.$t("live.detailTab2"),
+        },
+        // {
+        //   name: this.$t('live.lab39'),
+        // },
+        {
+          name: this.$t("live.detailTab3"),
+        },
+        {
+          name: this.$t("live.detailTab4"),
+        },
+        {
+          name: this.$t("live.detailTab5"),
+        },
+        {
+          name: this.$t("live.detailTab6"),
+        },
+      ],
+      groupID: "",
+      id: '',
+      roomInfo: {},
+      matchDetail: {},
+			competition_list: [],
+      player: null,
+      current: 1,
+      userInfo: {},
+      giftList: [],
+      isPlay: false,
+      isVolume: true, //是否播放声音
+      videoBar: false,
+      videoPlay: true,
+      isQuality: false,
+      isFullScreen: false,
+      screenMatchShow: false,
+      qualityIndex: 0,
+      qualityArr: [], //画质数组
+      quality: [], //画质
+      setType: 0,
+      liveList: [],
+      liveType: '',
+      danmu: true,
+      time1: null,
+      downTimer: null,
+      liveSign: true,
+      userClick: false,
+      downloadShow: false,
+      downloadTimer: null,
+      messageList: [],
+      inputHtml: '<input type="text" id="copy-input" style="opacity: 0;position: fixed;top: 0;z-index: -1;" readonly="readonly">'
+    };
+  },
+
+  onLoad(option) {
+    this.id = option.ID;
+    // this.getUserGiftList()
+    this.liveType = option.type
+    if (this.liveType != 'game') {
+      this.getList();
+    }
+    this.$store.state.timMessage = [];
+    // let watchingOutSign = localStorage.getItem('watchingOutSign')
+    // if (watchingOutSign && this.isLogin != 1) {
+    //   this.$r.loginBox();
+    //   this.$store.state.loginShowSign = true;
+    //   this.$store.state.loginShowCloseSign = false;
+    // } else {
+      this.getIsLogin();
+    // }
+  },
+  deactivated() {
+    this.isFullScreen = false
+  },
+  onUnload() {
+    bus.$off('chatLogin')
+    // this.player = null
+    this.time1 && clearInterval(this.time1);
+    this.downTimer && clearInterval(this.downTimer);
+    this.downloadTimer && clearTimeout(this.downloadTimer);
+    window.removeEventListener('touchstart', this.owerPlay1)
+    this.player && this.player.dispose();
+    /* 退出群组 */
+    this.time1 = null;
+    this.downTimer = null;
+    // this.$store.dispatch('quitGroup',{groupID:this.groupID})
+    uni.$TUIKit
+      .quitGroup(this.groupID)
+      .then((imResponse) => {})
+      .catch((imError) => {
+        console.warn("joinGroup error:", imError); // 申请加群失败的相关信息
+      });
+  },
+  onShow() {
+  },
+  onHide() {
+    // this.player = null
+    // this.player.dispose();
+  },
+  mounted() {
+    this.downloadTimerFun()
+		this.getLiveDetail();
+    window.addEventListener('touchstart', this.owerPlay1)
+    document.getElementById('palyevent').addEventListener('click',this.owerPlay)
+  },
+  computed: {
+    infos() {
+      return this.$store.state.info;
+    },
+    isLogin() {
+      return this.$store.state.isLogin;
+    },
+    system() {
+      return this.$store.state.system;
+    },
+  },
+  methods: {
+    videoInit(data) {
+      var $this = this
+      this.player = new Aliplayer(
+        {
+          id: "player-con",
+          source: data.pull || 'https://ss247.life/demoapi/Nstreamapi.php?chid=1029&ip=113.89.8.22',
+          // source: 'https://crm.wisex.io/video/5.mp4',
+          width: "100%",
+          height: "100%",
+          autoplay: true,
+          isLive: true,
+          rePlay: true,
+          showBarTime: '3000',
+          // cover: data.thumb,
+          videoHeight: "100%",
+          keyShortCuts: true,
+          playsinline: true,
+          "language": "en-us",
+          preload: true,
+          controlBarVisibility: "hover",
+          videoWidth: "100%",
+          useH5Prism: true,
+          skinLayout: [
+            // {
+            //   name: "bigPlayButton",
+            //   align: "blabs",
+            //   x: 30,
+            //   y: 80,
+            // },
+            {
+              name: "H5Loading",
+              align: "cc",
+            },
+            {
+              name: "errorDisplay",
+              align: "tlabs",
+              x: 0,
+              y: 0,
+            },
+            {
+              name: "infoDisplay",
+            },
+            {
+              name: "tooltip",
+              align: "blabs",
+              x: 0,
+              y: 56,
+            },
+            {
+              name: "thumbnail",
+            },
+          ],
+        },
+        function (player) {
+          setTimeout(() => {
+            $this.clickPlay()
+          }, 1000)
+        }
+      );
+      this.player.on('requestFullScreen', () => {
+        this.isFullScreen = true
+      })
+      this.player.on('cancelFullScreen', () => {
+        this.isFullScreen = false
+      })
+    },
+    getLiveDetail1() {
+      uni.$u.http.post("/api/Live_streaming/getRoomInfo", {
+          id: this.id,
+      }).then(res => {
+        this.roomInfo = res.info || {};
+        if (this.roomInfo.islive == 0) {
+          this.getDown()
+        }
+        this.userInfo = res.userData;
+      })
+    },
+    /* 获取详情 */
+    cricket_match_detail() {
+      let time = new Date();
+      let timeZone = time.toLocaleTimeString('en-us',{timeZoneName:'short'});  //'1:12:38 PM GMT+8'
+      let timeZoneId = Intl.DateTimeFormat().resolvedOptions().timeZone; //'Asia/Shanghai'
+      uni.$u.http.post('/api/Cricket/cricket_match_detail',{
+        match_id: this.roomInfo.match_id,
+        // match_id: 39497509,
+        timezone:timeZoneId
+      }).then(res=>{
+        this.matchDetail = res;
+        this.competition_list = res.competition_list || []
+      }).catch(res=>{})
+    },
+    /* 发布弹幕 */
+    addMesg(e) {
+      if (!this.$refs.lffBarrage) {
+        return
+      }
+      this.$refs.lffBarrage.add({
+        item: e,
+      });
+      this.$refs.lffBarrage2.add({
+        item: e,
+      });
+    },
+    /* 获取直播 */
+    getList() {
+      // 全部赛事
+      // uni.$u.http.post('/api/hot_match/all_match', {}).then(res => {
+      // 	this.bannerList = res.data
+      // })
+
+      // 正在直播
+      uni.$u.http.get("/api/live_streaming/getLiveList", {}).then((res) => {
+        this.liveList = res;
+      });
+    },
+    getHistoryMsg(msg) {
+      uni.$u.http.get("/api/LivePlayBack/getSimple", {
+        params: {
+          id: this.groupID
+        }
+      }).then((res) => {
+        let RspMsgList = res.RspMsgList || [];
+        let msgList = []
+        RspMsgList.forEach(item => {
+          let MsgBody = item.MsgBody || []
+          if (Array.isArray(MsgBody)) {
+            MsgBody.forEach(item1 => {
+              msgList.unshift({
+                conversationType: 'GROUP',
+                conversationID: 'GROUP' + this.groupID,
+                from: item.From_Account,
+                nick: item.From_Account,
+                payload: {
+                  data: item1.MsgContent.Data
+                }
+              })
+            })
+          }
+        })
+        if (msg) {
+          msgList.push(msg)
+        }
+        let arr = {
+          data: msgList,
+        };
+        this.$refs.detail1.$onMessageReceived(arr);
+      });
+    },
+    /* 设置 */
+    setting(type, i) {
+      if (type == 1) {
+        this.player.replay()
+      } else if (type == 2) {
+        //关闭显示弹幕
+        this.danmu = !this.danmu;
+      } else if (type == 3) {
+        //设置
+      } else if (type == 4) {
+        if (this.isFullScreen) {
+          this.player.fullscreenService.cancelFullScreen()
+        } else {
+          this.player.fullscreenService.requestFullScreen()
+        }
+      } else if (type == 5) {
+        //切换画质
+        if (this.$store.state.isLogin != 1) {
+          // this.$toUrl('/pages/login/login')
+          return
+        }
+        this.isQuality = true;
+        this.videoMask = false;
+      } else if (type == 6) {
+        this.isQuality = false;
+        if (this.qualityIndex == i) return;
+        this.player.dispose();
+        this.qualityIndex = i;
+        this.videoInit({pull: this.qualityArr[this.qualityIndex]})
+      }
+      if (type == 7) {
+
+
+      }
+    },
+
+    // 显示隐藏
+    play(type) {
+      //视频进度
+      if (type == 1) {
+        this.videoMask = !this.videoMask;
+        // if (this.videoMask) {
+        //   this.setInter();
+        // } else {
+        //   clearTimeout(this.timer);
+        // }
+      } else if (type == 2) {
+        //解除声音（100%
+				if (this.isVolume) {
+					this.player.setVolume(0);
+				} else {
+					this.player.setVolume(1);
+				}
+        this.isVolume = !this.isVolume;
+      } else if (type == 3) {
+        //播放/暂停
+        if (this.isPlay) {
+          this.userClick = true;
+          this.player.pause();
+        } else {
+          this.player.play();
+        }
+      } else if (type == 4) {
+        //刷新重置
+        this.player.pause();
+        this.player.loadByUrl(this.qualityArr[this.qualityIndex]);
+        this.player.play();
+      }
+    },
+    setInter() {
+      //s后自动关闭 自定义进度条
+      this.timer = setTimeout((res) => {
+        this.videoMask = false
+      }, 5000);
+    },
+    timerStart() {
+      if (!this.downTimer) {
+        this.downTimer = setInterval(() => {
+          this.$set(this.roomInfo, 'down', this.roomInfo.down - 1000)
+          if (this.roomInfo.down < 0) {
+            clearInterval(this.downTimer)
+            this.downTimer = null
+          }
+        }, 1000);
+      }
+    },
+    // 获取直播详情
+    getLiveDetail(id) {
+      let _this = this;
+      uni.showLoading({
+        title: this.$t('common.lab'),
+      });
+      uni.$u.http
+        .post("/api/Live_streaming/getRoomInfo", {
+          id: this.id,
+        })
+        .then((res) => {
+          this.userInfo = res.userData || {};
+          // 编辑主播公告
+          // res.userData.announcement1 = []
+          // res.userData.announcement1.push(res.userData.announcement)
+          this.roomInfo = res.info || {};
+          if (this.roomInfo.islive == 0) {
+            this.getDown()
+            this.timerStart()
+          }
+          this.groupID = this.roomInfo.id + '';
+          // this.$store.dispatch('joinGroup',{id:id})
+          if (this.roomInfo.match_id && this.roomInfo.islive == 1) {
+            if (this.liveType != 'game') {
+              this.cricket_match_detail()
+            }
+          } else {
+            this.tabList = [
+            {
+              name: this.$t("live.detailTab1"),
+            },
+            {
+              name: this.$t("live.detailTab2"),
+            }
+            ]
+          }
+		  localStorage.liveId =this.id;
+          if (JSON.stringify(res.info.clarity) == "{}") {
+            this.quality = ["原画"];
+          } else {
+            this.quality = ["流畅", "标清", "高清"];
+            // 重组清晰画质连接
+            let qualityArr = [];
+            for (let var1 in res.info.clarity) {
+              let name = var1;
+              // if(var1 == 'smooth') {
+              // 	name = '540'
+              // }else if(var1 == 'sd') {
+              // 	name = '720'
+              // }else if(var1 == 'hd') {
+              // 	name = '1080'
+              // }
+              qualityArr.push({
+                name,
+                src: res.info.clarity[var1],
+              });
+            }
+            qualityArr.unshift({
+              src: res.info.pull,
+              name: this.$t("live.standard"),
+            });
+            this.qualityArr = qualityArr;
+          }
+          this.loginTim()
+          if (this.roomInfo.islive == 1) {
+            this.liveSign = true
+            this.$nextTick(() => {
+              this.videoInit(res.info)
+            })
+          } else {
+            this.liveSign = false
+          }
+        }).finally(() => {
+          uni.hideLoading();
+        });
+    },
+    getDown() {
+      let starttime = new Date(this.$common.parseTime(this.roomInfo.starttime * 1000, '{y}/{m}/{d} {h}:{i}:{s}') + ' UTC+5:30')
+      let nowTime = new Date().getTime()
+      if (starttime.getTime() - nowTime < 0) {
+        starttime.setDate(new Date().getDate())
+        starttime.setMonth(new Date().getMonth())
+      }
+      var down = starttime.getTime() - nowTime;
+      this.$set(this.roomInfo, 'down', down)
+    },
+    loginTim() {
+      if (this.isLogin == 1) {
+          this.$store.dispatch('loginTim', this.infos).then(() => {
+            this.joinGroup(this.infos)
+          })
+        } else {
+          bus.$on('chatLogin', this.joinGroup)
+          let youkeInfo = JSON.parse(sessionStorage.getItem('youkeInfo'))
+          if (youkeInfo) {
+            this.$store.dispatch('loginTim', {
+              ...youkeInfo,
+              types: 'youke'
+            }).then(() => {
+            this.joinGroup(youkeInfo)
+            })
+          } else {
+            uni.$u.http.post("/api/Universal/imTouristAccount").then(res => {
+              sessionStorage.setItem('youkeInfo', JSON.stringify(res))
+              this.$store.dispatch('loginTim', {
+                ...res,
+                types: 'youke'
+              }).then(() => {
+                this.joinGroup(res)
+              })
+            })
+          }
+        }
+    },
+    joinGroup(info, sign) {
+      this.$refs.detail1.messageList = [];
+      uni.$TUIKit.joinGroup({
+        groupID: this.groupID,
+        type: "TIM.TYPES.GRP_AVCHATROOM",
+      }).then((imResponse) => {
+        switch (imResponse.data.status) {
+          case uni.$TUIKitTIM.TYPES.JOIN_STATUS_WAIT_APPROVAL:
+            // 等待管理员同意
+            break;
+
+          case uni.$TUIKitTIM.TYPES.JOIN_STATUS_SUCCESS:
+            // 加群成功
+            this.$nextTick(() => {
+              this.login(info)
+            });
+            break;
+          case "AlreadyInGroup":
+            // 加群成功
+            this.$nextTick(() => {
+              if (sign) {
+                this.login(info)
+              } else {
+                this.getHistoryMsg()
+              }
+            });
+          break;
+          case uni.$TUIKitTIM.TYPES.JOIN_STATUS_ALREADY_IN_GROUP:
+            // 已经在群中
+            break;
+          default:
+            break;
+        }
+      });
+    },
+    login(infos) {
+      let data = {
+        type: 102,
+        nobel: {
+          level: 1,
+          // 贵族图标guard_icon || 等级图标exp_icon || 房主图标
+          exp_icon: infos.exp_icon,
+          is_guard: infos.is_guard,
+          guard_swf: infos.is_guard == 1 ? infos.guard.swf : "",
+          guard_name: infos.is_guard == 1 ? infos.guard.swf_name : "",
+          is_room: infos.id == this.groupID ? 1 : 0,
+          guard_icon: infos.is_guard == 1 ? infos.guard.icon : "",
+        },
+      };
+      let to = this.groupID;
+      const message = uni.$TUIKit.createCustomMessage({
+        to,
+        conversationType: "GROUP",
+        payload: {
+          data: JSON.stringify(data),
+        },
+      });
+      uni.$TUIKit
+        .sendMessage(message)
+        .then((res) => {
+          this.getHistoryMsg()
+        })
+        .catch((error) => {});
+    },
+		back() {
+			uni.switchTab({
+				url: '/pages/Live/Live'
+			})
+		},
+     /* 判断是否登录 未登录情况下只能停留3分钟 180秒 */
+     getIsLogin() {
+      let that = this;
+      if (this.isLogin == 1) return;
+      uni.$u.http.get('/api/universal/getHot', {}).then(res => {
+        this.$store.state.system = res;
+        if (!this.system.login_remind || Number(this.system.login_remind) > 5000) return;
+        this.time1 = setTimeout((res) => {
+          if (this.isLogin == 1) {
+            return
+          }
+          localStorage.setItem('watchingOutSign', true)
+          this.$toast("Please log in to continue watching the live broadcast");
+          setTimeout((res1) => {
+            // this.$toUrl('/pages/login/login')
+          }, 1500);
+        }, this.system.login_remind * 60000);
+      })
+    },
+    change(e) {
+      this.current = e.index;
+      if (e == 2) {
+        setTimeout((res) => {
+          this.$refs.detail3.getList({
+            uid: this.userInfo.uid,
+            type: 0,
+          });
+        }, 100);
+      }
+    },
+    clickPlay() {
+      try {
+        var evt = document.createEvent('HTMLEvents')
+        evt.initEvent('click', true, true)
+        document.getElementById('palyevent').dispatchEvent(evt)
+      } catch (error) {
+      }
+    },
+    owerPlay() {
+      this.isPlay = true
+      this.player && this.player.play();
+    },
+    owerPlay1() {
+      if (this.userClick) {
+        return
+      }
+      this.owerPlay()
+    },
+    uodateMsg(list) {
+      this.messageList = list
+    },
+    countdownFun(value) {
+      if (!value) {
+        return "";
+      }
+      var h = parseInt(value / 3600);
+      var m = parseInt((value % 3600) / 60);
+      var str = "";
+      if (h > 0) {
+        str += h + "hrs";
+        if (m < 10) {
+          m = "0" + m;
+        }
+        str += " " + m + "min";
+        return str;
+      } else {
+        if (m > 0) {
+          if (m < 10) {
+            m = "0" + m;
+          }
+          str += m + "min";
+        }
+      }
+
+      var s = parseInt((value % 3600) % 60);
+      if (s < 10) {
+        s = "0" + s;
+      }
+      str += " " + s + "s";
+      return str;
+    },
+    downloadTimerFun() {
+      this.downloadShow = false
+      this.downloadTimer = setTimeout(() => {
+        this.downloadShow = true
+      }, 60000 * 2)
+    },
+    adClick(info) {
+      if (info.adver_url_one) {
+        uni.$u.http
+        .post("/api/live_streaming/click_adv", {
+          type: this.liveType == 'game' ? 6 : 3,
+          id: info.id,
+          url: info.adver_url_one
+        })
+        .then((res) => {
+        }).finally(() => {
+        });
+        window.open(info.adver_url_one)
+      }
+    },
+    adClick1(info) {
+      if (info.qr_url) {
+        window.open(info.qr_url)
+      }
+    }
+  },
+};
+</script>
+
+<style lang="scss">
+page {
+  background-color: #f3f3f7;
+}
+.body {
+  position: sticky;
+	top: 0;
+  z-index: 20;
+  background-color: #f3f3f7;
+}
+@media screen and (orientation: landscape) {
+  .body {
+    position: relative;
+  }
+}
+.quality-mask {
+  color: #fff;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 9997;
+  background-color: rgba(0, 0, 0, 0.4);
+
+  .quality-nav {
+    padding: 40rpx;
+  }
+
+  .quality-title {
+    padding: 0 98rpx;
+    margin-top: 50rpx;
+  }
+
+  image {
+    width: 24rpx;
+    height: 24rpx;
+  }
+
+  .quality-list {
+    padding: 0 98rpx;
+    flex-wrap: wrap;
+
+    view {
+      font-size: 24rpx;
+      margin-top: 28rpx;
+      border-radius: 6rpx;
+      padding: 8rpx 20rpx;
+      border: 2rpx solid #fff;
+    }
+
+    .active {
+      color: $color2;
+      border: 2rpx solid $color2;
+    }
+  }
+}
+
+.video-mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 9997;
+  box-shadow: 0px 12px 20px -12px #000 inset, 0px -12px 20px -12px #000 inset;
+
+  .top {
+    color: #fff;
+    position: absolute;
+    top: 24rpx;
+    right: 24rpx;
+    padding: 4rpx 20rpx;
+    border-radius: 40rpx;
+    border: 2rpx solid #fff;
+  }
+
+  .foot {
+    position: absolute;
+    bottom: 24rpx;
+    right: 0;
+    left: 0;
+    padding-right: 24rpx;
+    &.full {
+      position: fixed;
+      bottom: 0;
+    }
+    .u-icon {
+      margin-left: 26rpx;
+    }
+    image {
+      width: 32rpx;
+      height: 32rpx;
+      margin-left: 26rpx;
+    }
+  }
+}
+.ranking-box {
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  .ranking {
+    width: 45px;
+  }
+}
+.volume-box {
+  position: absolute;
+  right: 20rpx;
+  bottom: 16rpx;
+  z-index: 999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 60rpx;
+  height: 60rpx;
+  border-radius: 50%;
+  background-color: #000;
+}
+.detail {
+  position: relative;
+  background: #f3f3f7;
+}
+#palyevent {
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+.no-live {
+  position: relative;
+  background: rgba(0, 0, 0, 1);
+  .down-box {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    z-index: 10;
+    background-color: rgba(27, 24, 67, 0.8);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 26rpx;
+    font-weight: 400;
+    color: #d5d4e4;
+    line-height: 1;
+    text-align: center;
+    .down {
+      margin-top: 24rpx;
+      font-size: 36rpx;
+      font-weight: bold;
+      color: #ffffff;
+    }
+  }
+  .time {
+    color: #fff;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    background-color: rgba(0, 0, 0, 0.4);
+    padding: 20rpx;
+    z-index: 10;
+  }
+  .home_logo, .away_logo {
+		position: absolute;
+		top: 50%;
+		transform: translateY(-50%);
+		width: 150rpx;
+		height: 150rpx;
+		border-radius: 50%;
+	}
+	.home_logo {
+		left: 100rpx;
+	}
+	.away_logo {
+		right: 100rpx;
+	}
+}
+.video {
+  height: 420rpx;
+  position: relative;
+
+  .thumb {
+    width: 100%;
+    height: 100%;
+    z-index: 100;
+    position: relative;
+    background-color: #000;
+  }
+
+  .video-bar {
+    width: 100%;
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 9997;
+    color: #fff;
+    height: 60rpx;
+    background: rgba(0, 0, 0, 0.4);
+
+    image {
+      width: 30rpx;
+      height: 30rpx;
+      margin-left: 20rpx;
+    }
+
+    text {
+      margin-right: 60rpx;
+    }
+  }
+
+  .video-bar-right {
+    position: relative;
+
+    .quality {
+      width: 80rpx;
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      position: absolute;
+      left: -40rpx;
+      color: #fff;
+      bottom: 50rpx;
+      padding: 20rpx 22rpx;
+      border-radius: 20rpx;
+      background-color: rgba(0, 0, 0, 0.7);
+
+      text {
+        display: block;
+        width: 100%;
+        margin-right: 0;
+        text-align: center;
+        padding-bottom: 20rpx;
+      }
+    }
+  }
+
+  .voice {
+    position: absolute;
+    bottom: 50px;
+    left: 50%;
+    z-index: 4;
+    margin: -33rpx 0 0 -134rpx;
+    width: 268rpx;
+    height: 100rpx;
+    line-height: 100rpx;
+    border-radius: 8rpx;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    background: #ff5d23;
+    font-size: 30rpx;
+    text-align: center;
+    color: #fff;
+    background-size: 100% 100%;
+  }
+
+  .play {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    margin-left: -50rpx;
+    width: 100rpx;
+    height: 100rpx;
+    z-index: 9;
+  }
+
+  .myVideo {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    margin-left: -50rpx;
+    width: 100rpx;
+    height: 100rpx;
+    z-index: 9;
+  }
+}
+.row {
+  display: flex;
+  align-items: center;
+  text-align: center;
+  background-color: rgb(18, 20, 21);
+  color: #fff;
+  font-size: 14px;
+  .col {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 20px;
+  }
+  .u-icon {
+    margin: 0 5px;
+  }
+}
+
+.tabs {
+  position: relative;
+}
+.u-tabs {
+  background-color: #fff;
+}
+.active {
+  background: #ccc;
+}
+.adver-box {
+  position: relative;
+  .qr_img {
+    position: absolute;
+    top: 0;
+    right: 0;
+    height: 100%;
+  }
+}
+.ad {
+  display: block;
+  width: 100%;
+}
+</style>

pages/Live/search.vue

@@ -0,0 +1,453 @@
+<!-- 搜索 -->
+<template>
+	<view class="" style="overflow: hidden;">
+		<view class="select-head">
+			<u-navbar leftText="" bgColor="transparent" leftIconColor="#fff" :titleStyle="{color:'#fff'}" :fixed="false"
+				leftIconSize="48" :autoBack="true">
+				<view class="navBar-search flex" slot="center">
+					<u--input :placeholder="$t('live.serch')" 
+						prefixIcon="search" 
+						color="#333"
+						border="none" 
+						v-model="value"
+						fontSize="28rpx"
+						:customStyle="{borderRadius:'50px',padding:'4px 12px',background:'#F5F5F5'}"
+						prefixIconStyle="font-size: 30px;color:#999"></u--input>
+				</view>
+				<view class="flex size28 cfff" slot="right">
+					<view class="" @click="submit()">
+						{{$t('live.searchbtn')}}
+					</view>
+					<!-- <navigator url="" open-type="navigateBack">
+						Cancel
+					</navigator> -->
+				</view>
+			</u-navbar>
+		</view>
+		<view class="main">
+			<u-row justify="space-between" class="mg-tp42">
+				<text class="size32 c3 Bold">{{$t('live.Historytyps')}}</text>
+				<view class="flex" @click="setEmpty()">
+					<image src="../../static/image/live/delete.png" mode="aspectFit" class="delete-icon mg-rt8"></image>
+					<text class="szie24 c6">{{$t('live.Emptybtn')}}</text>
+				</view>
+			</u-row>
+			<view class="list mg-tp26">
+				<!-- :class="{actives:searchHistory.indexOf(item) !== -1}" -->
+				<view class="list-item" v-for="(item,index) in searchHistory" :key="index" @click="submit(1,item)">
+					{{item}}
+				</view>
+			</view>
+		</view>
+		<view class="search-title">
+			<!-- Related Live -->
+			{{ $t('live.lab41') }}
+		</view>
+		<view class="detail-video-list flex">
+			<view class="detail-video-li" v-for="(item,index) in list" :key="index" @click="$toUrl(`./live-detail?id=${item.live_id}&ID=${item.id}`)">
+				<image class="detail-video-li-logo" :src="item.thumb" mode="aspectFill"></image>
+				<view class="detail-video-content ">
+					<view class="detail-video-title text-clamp2">
+						{{item.title}}
+					</view>
+					<view class="detail-video-right flex">
+						<image class="detail-video-content-logo" :src="item.avatar" mode="aspectFill"></image>
+						<view class="detail-video-info flex">
+							<text  class="text-clamp">{{item.user_nickname}}</text>
+							<image src="/static/images/competition/detail-hot.png" mode=""></image>
+							<!-- <view>{{item.heat}}</view> -->
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+		
+		<!-- 新闻资讯 -->
+		<view class="search-title">
+			<!-- Related Headlines -->
+			{{ $t('live.lab42') }}
+		</view>
+		<view class="detail-article" v-if="obj.headlinesList.length != 0">
+			<view class="detail-article-li flex" @click="$toUrl('../News/news-detail?id=' + item.id)" v-for="(item,index) in obj.headlinesList" :key="index">
+				<!-- <view class="text-clamp2">
+					{{item.title}}
+					
+				</view> -->
+				<view class="list-li-left">
+					<view class="list-li-left-nav text-clamp2">{{item.title}}</view>
+					<view class="list-li-left-bot flex-start">
+						<!-- <text :style="{color:index == 0?'#CC374A':'#999'}">置顶</text> -->
+						<text style="color:#CC374A;width: 90rpx;" v-if="item.is_top == 1">Top</text>
+						<view class="flex-start"  style="width: 90rpx;" v-if="item.comment_count != 0">
+							<image src="/static/image/news/topic11.png" mode="aspectFill"></image>
+							<text>{{item.comment_count}}</text>
+						</view>
+						<text>{{item.addtime}}</text>
+					</view>
+				</view>
+				
+				<u--image :showLoading="true" class="list-li-logo" radius="12" :src="item.img" width="240rpx" height="136rpx"></u--image>
+			</view>
+		</view>
+		
+		<!-- 圈子 -->
+		<view class="search-title">
+			<!-- Related Posts -->
+			{{ $t('live.lab43') }}
+		</view>
+		<view class="u-demo-block__content" v-if="obj.circleList.length != 0">
+			<view class="album" @click="$toUrl('../News/community-detail?id=' + item.id)" v-for="(item,index) in obj.circleList" :key="index">
+				<view class="album_top flex-start">
+					<image class="logo" :src="item.avatar" mode=""></image>
+					<view class="">
+						<u--text :text="item.user_nickname" bold size="32"></u--text>
+						<u--text margin="6px 0 0 0" color="#999" size="26" :text="item.addtime"></u--text>
+					</view>
+				</view>
+				<!-- <view class="nav font28 text-clamp3" :ref="'text'+index" :style="{'-webkit-line-clamp':lunIndex == index?'initial':3}">
+					{{item.title}}
+				</view> -->
+				<mote-lines-divide :line="3" @click.stop="" :expandText="$t('news.full')" :foldHint="$t('news.collapsed')">
+				        {{item.title}}
+				</mote-lines-divide>
+				<!-- <view class="more" :style="{display:getLength(index)?'none':''}" @click.stop="setLunIndex(index)">
+					Full text
+				</view> -->
+				<!-- <view class="album__content">
+					<u-album multipleSize="200" space="16" :urls="item.img"></u-album>
+				</view> -->
+				<view class="album__content" v-if="item.is_flie_type == 0">
+					<u-album multipleSize="200" space="16" :urls="item.img"></u-album>
+				</view>
+				<view class="album__content" v-else >
+					<image v-if="item.video[0]" :src="item.video[0].img+'?vframe/jpg/offset/0'" style="width: 100%;" mode=""></image>
+					<image class="play" src="/static/image/match/play.png" mode=""></image>
+				</view>
+				
+				<view class="flex tabbar">
+					<view class="">
+						<image src="/static/image/news/topic2.png" mode=""></image>
+						<u--text color="#999" size="24" :text="item.favorites"></u--text>
+					</view>
+					<view class="">
+						<image src="/static/image/news/topic7.png" mode=""></image>
+						<u--text color="#999" size="24" :text="item.comment"></u--text>
+					</view>
+					<view class="">
+						<image src="/static/image/news/topic6.png" mode=""></image>
+						<u--text color="#999" size="24" :text="item.click"></u--text>
+					</view>
+				</view>
+				
+			</view>
+		</view>
+		
+		
+		
+		
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				value:'',
+				list:[],
+				obj:{
+					circleList:[],
+					headlinesList:[]
+				}
+			}
+		},
+		onLoad() {
+			
+		},
+		methods: {
+			submit(type,item) {
+				if(type == 1) {
+					this.value = item
+				}
+				uni.$u.http.get('/api/Search/index',{params:{name:this.value}}).then(res=>{
+					this.obj = res;
+					this.list = res.liveList;
+					if(type != 1) {
+						let history = this.searchHistory
+						history.push(this.value)
+						this.$common.set('searchHistory',history)
+						this.value = ''
+					}
+				}).catch(res=>{})
+				
+				
+			},
+			setEmpty() {
+				this.searchHistory = []
+				
+			}
+		},
+		computed: {
+			info() {
+				return this.$store.state.info
+			},
+			isLogin() {
+				return this.$store.state.isLogin
+			},
+			searchHistory: {
+				get() {
+					return this.$common.get('searchHistory') || []
+				},
+				set(val) {
+					console.log(val);
+					return this.$common.del('searchHistory')
+				}
+				
+			}
+			
+		},
+		
+	}
+</script>
+
+<style lang="scss" scoped>
+	page {
+		background-color: #F3F3F7;
+	}
+	.search-title {
+		font-weight: bold;
+		padding: 20rpx;
+	}
+	
+	.detail-video-list {
+		flex-wrap: wrap;
+		margin: 0 24rpx;
+	}
+	.detail-video-li {
+		overflow: hidden;
+		margin-top: 20rpx;
+		
+		width: calc(50% - 9rpx);
+		border-radius: 12rpx;
+		background-color: white;
+	
+		.detail-video-li-logo {
+			width: 100%;
+			height: 176rpx;
+			display: block;
+		}
+	
+		.detail-video-content {
+			padding: 16rpx;
+		
+			.detail-video-content-logo {
+				width: 40rpx;
+				height: 40rpx;
+				border-radius: 50%;
+				margin-right: 24rpx;
+			}
+		
+			.detail-video-title {
+				width: 99%;
+				height: 80rpx;
+				color: #333;
+				font-size: 28rpx;
+			}
+		}
+		
+		.detail-video-info {
+			font-size: 24rpx;
+			flex: 1;
+			image {
+				width: 24rpx;
+				height: 24rpx;
+				margin-right: 6rpx;
+			}
+		
+			text {
+				flex: 1;
+				width: 100rpx;
+				color: #9193B4;
+		
+			}
+		
+			view {
+				
+				color: #999;
+			}
+		}
+	}
+	
+	.select-head {
+		position: sticky;
+		top: 0;
+		z-index: 99;
+		background-color: $color1;
+
+		.navBar-search {
+			width: 70vw;
+			padding: 18rpx 24rpx;
+			margin-left: -32rpx;
+
+			image {
+				width: 60rpx;
+				height: 60rpx;
+				margin-right: 24rpx;
+			}
+		}
+
+		.select-tab {
+			padding: 0 28rpx;
+			margin-top: 20rpx;
+		}
+	}
+
+	.main {
+		padding: 0 24rpx;
+
+		.delete-icon {
+			width: 24rpx;
+			height: 24rpx;
+		}
+
+		.list {
+			display: flex;
+			flex-wrap: wrap;
+
+			.list-item {
+				text-align: center;
+				line-height: 52rpx;
+				// width: 124rpx;
+				padding: 4rpx 10rpx;
+				height: 52rpx;
+				margin-bottom: 20rpx;
+				border-radius: 4rpx 4rpx 4rpx 4rpx;
+				border: 2px solid #ccc;
+				color: #333;
+				margin-right: 22rpx;
+			}
+
+			.actives {
+				border: 2rpx solid #DC3C23;
+				color: #DC3C23;
+			}
+		}
+	}
+	.detail-video-right {
+		flex: 1;
+		min-width: 100px;
+	}
+	
+	.detail-article {
+		margin: 24rpx 24rpx;
+		padding: 0 24rpx;
+		// border-top: 20rpx solid #f7f7f7;
+		// padding-bottom: 120rpx;
+		background-color: white;
+		.list-li {
+		
+			padding: 32rpx 0;
+			border-bottom: 2rpx solid #F0F0F0;
+		}
+		.detail-article-title {
+			color: #333;
+			font-size: 32rpx;
+			font-weight: bold;
+			padding-top: 32rpx;
+			
+		}
+		.detail-article-li {
+			padding: 30rpx 0;
+			border-bottom: 2rpx solid #F0F0F0;
+			.list-li-left {
+				flex: 1;
+				display: flex;
+				flex-wrap: wrap;
+				height: 136rpx;
+			
+				image {
+					width: 28rpx;
+					height: 24rpx;
+					margin-right: 8rpx;
+				}
+			
+				.list-li-left-nav {
+					color: #333;
+					font-size: 32rpx;
+					align-self: flex-start;
+				}
+			}
+			
+			.list-li-left-bot {
+				width: 95%;
+				font-size: 24rpx;
+				// margin: 0 auto;
+				margin-left: 20rpx;
+				align-self: flex-end;
+			
+				text {
+					color: #999;
+					// margin-right: 32rpx;
+				}
+			
+				view {
+					text {
+						color: #999;
+					}
+				}
+			}
+			.list-li-logo {
+			
+				width: 242rpx;
+				height: 136rpx;
+				margin-left: 32rpx;
+				border-radius: 12rpx;
+			}
+		}
+	}
+
+	/* 圈子 */
+	.album {
+		margin-top: 20rpx;
+		padding: 32rpx 24rpx;
+		border-radius: 12rpx;
+		background-color: white;
+		.logo {
+			width: 72rpx;
+			height: 72rpx;
+			border-radius: 50%;
+			margin-right: 16rpx;
+		}
+		.nav {
+			padding-top: 20rpx;
+		}
+		.album__content {
+			position: relative;
+			margin-top: 30rpx;
+			image {
+				border-radius: 10rpx;
+			}
+			.play {
+				position: absolute;
+				top: 40%;
+				left: 50%;
+				margin-left: -60rpx;
+				width: 80rpx;
+				height: 80rpx;
+				
+			}
+		}
+		.tabbar {
+			margin-top: 22rpx;
+			padding: 0 22rpx;
+			image {
+				width: 48rpx;
+				height: 48rpx;
+			}
+			view {
+				display: flex;
+				align-items: center;
+				justify-content: flex-start;
+			}
+		}
+	}
+</style>

pages/Match/Match.vue

@@ -0,0 +1,1700 @@
+<template>
+  <view class="match">
+    <view class="match-head">
+      <div class="search-box">
+        <div class="search" @click="toSearch">
+          <img class="icon" src="/static/image/search-icon.svg" alt="">
+          <div>
+            <!-- Search for tours and teams... -->
+						{{ $t('match.lab86') }}
+          </div>
+        </div>
+      </div>
+      <div class="filter-box">
+        <div class="box">
+          <div class="item-box" id="item-box">
+            <div class="item item1" :class="{'active': match_live !== 0}" @click="matchLiveShow = true">
+              <img class="icon" v-show="match_live == 0" src="/static/image/match/video.svg" alt="">
+              <img class="icon" v-show="match_live !== 0" src="/static/image/match/video-a.svg" alt="">
+              <!-- Streaming -->
+						  {{ $t('match.lab87') }}
+              <img class="down" v-show="match_live == 0" src="/static/image/match/expert_down_ico.svg" alt="">
+              <img class="down" v-show="match_live !== 0" src="/static/image/match/expert_down_ico_a.svg" alt="">
+            </div>
+            <div class="border"></div>
+            <div v-for="item in tagActiveList" :key="item.id" class="item" :class="{'active': selectArr.indexOf(item.id) !== -1}" @click="selectedTag(item.id)">
+              {{ item.name }}
+            </div>
+          </div>
+          <div class="tours" @click="showSelectMask">
+            <div class="number-box" v-if="selectArr.length">{{ selectArr.length }}</div>
+            <!-- Tours -->
+						{{ $t('match.lab88') }}
+            <img class="down" src="/static/image/match/expert_down_ico.svg" alt="">
+          </div>
+        </div>
+        <div class="box1">
+          <div class="left">
+            <div class="bold">{{ formatDate1(titleDate) }}</div>
+            <div v-if="titleDate">- {{ formatDate(titleDate) }}</div>
+          </div>
+          <div class="right">
+            <div class="live-now" :class="{'active': live == 1}" @click="checkLive">
+              <!-- Live Now -->
+					  {{ $t('match.labe6') }}
+            </div>
+            <div class="date-box" :class="{active: nowDate != targetDate}" @click="dateShowChange">
+              <img class="icon" v-show="nowDate != targetDate" src="/static/image/match/icon_Calendar.png" alt="">
+              <img class="icon" v-show="nowDate == targetDate" src="/static/image/match/icon_Calendar.svg" alt="">
+              <!-- Calendar -->
+						{{ $t('match.lab89') }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </view>
+
+    <!-- 列表 -->
+    <scroll-view
+      class="scroll"
+      :scroll-y="true"
+      :refresher-enabled="refresherEnabled"
+      :refresher-triggered="triggered"
+      :refresher-threshold="100"
+      :scroll-top="scrollTop"
+      @scroll="scroll"
+      @refresherpulling="onPulling"
+      @refresherrefresh="onRefresh"
+      @scrolltolower="scrolltolower"
+      @refresherabort="onAbort"
+    >
+    <view class="match-list" id="match">
+      <view
+        class="match-list-ul"
+        v-for="(item) in matchList"
+        :key="item.item[0].day"
+        :data-day="item.item[0].day"
+      >
+        <div class="day" :class="{'target-date': item.item[0].day == targetDate}"><div class="bold">{{ formatDate1(item.item[0].day) }}</div> - {{ formatDate(item.item[0].day) }}</div>
+        <div class="list" v-for="list in item.item[0].list" :key="list.tournament_id">
+          <div class="title" @click="toMatchList(list)">
+            <view class="text-clamp">{{ list.name }}</view>
+            <img class="icon" src="/static/image/match/next_ico.svg" alt="">
+          </div>
+          <div class="match-list" v-for="item1 in list.cricket_match" :key="item1.id">
+            <div class="match-detail-box" @click="toDetail(item1)">
+              <div class="match_num">{{ item1.match_num }}</div>
+              <div class="detail-box">
+                <div class="detail">
+                  <div class="home">
+                    <div class="left">
+                      <div class="row">
+                        <u--image :src="item1.home_logo || '/static/image/common/team.png'" shape="circle" width="40rpx" height="40rpx"></u--image>
+                        <div class="text-clamp">{{ item1.home_name }}</div>
+                      </div>
+                      <div class="row">
+                        <u--image :src="item1.away_logo || '/static/image/common/team.png'" shape="circle" width="40rpx" height="40rpx"></u--image>
+                        <div class="text-clamp">{{ item1.away_name }}</div>
+                      </div>
+                    </div>
+                    <div class="right">
+                      <div class="li-team-value" v-if="item1.home_display_score">
+                        <div class="value">{{ formaScore(item1.home_display_score) }}</div>
+                        <div class="value2" v-if="item1.home_display_score != '0/0（0）' && formaScore2(item1.home_display_score)" :class="{'r': item1.win_id == item1.away_id && item1.status == 2}">{{ formaScore2(item1.home_display_score) }}</div>
+                        <div class="value1" v-if="item1.home_display_score != '0/0（0）'" :class="{'r': item1.win_id == item1.away_id && item1.status == 2}">{{ formaScore1(item1.home_display_score) }}</div>
+                        <u-icon v-if="item1.win_id == item1.home_id && item1.status == 2" name="play-left-fill" color="#DC3C23" size="11"></u-icon>
+                      </div>
+                      <div class="li-team-value" v-if="item1.away_display_score">
+                        <div class="value">{{ formaScore(item1.away_display_score) }}</div>
+                        <div class="value2" v-if="item1.away_display_score != '0/0（0）' && formaScore2(item1.away_display_score)" :class="{'r': item1.win_id == item1.home_id && item1.status == 2}">{{ formaScore2(item1.away_display_score) }} </div>
+                        <div class="value1" v-if="item1.away_display_score != '0/0（0）'" :class="{'r': item1.win_id == item1.home_id && item1.status == 2}">{{ formaScore1(item1.away_display_score) }}</div>
+                        <u-icon v-if="item1.win_id == item1.away_id && item1.status == 2" name="play-left-fill" color="#DC3C23" size="11"></u-icon>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <!-- status 0未开始  1已开始  2已结束 -->
+                <div class="state-box">
+                  <div class="status2" v-if="item1.status == 2">
+                    <!-- Completed -->
+						      {{ $t('match.lab90') }}
+                  </div>
+                  <template v-if="item1.status == 0">
+                    <div v-if="item1.live_time">
+                      <!-- Watch Live In -->
+						        {{ $t('match.lab91') }}
+                    </div>
+                    <div v-else>
+                      <!-- Watch Live in -->
+						        {{ $t('match.lab92') }}
+                    </div>
+                    <div v-if="item1.live_time" class="down">{{ item1.live_time }}</div>
+                    <div v-else class="status0"><span class="down">{{ watchLiveAt(item1.scheduled) }}&nbsp;</span><span>{{ watchLiveAt1(item1.scheduled) }}</span></div>
+                  </template>
+                  <template v-if="item1.status == 1">
+                    <div @click.stop="toDetail(item1, 1)" v-if="item1.match_live" class="match_live">
+                      <img class="icon" src="/static/image/match/play_icon.png" alt="">
+                      <!-- Watch Live -->
+						        {{ $t('match.lab93') }}
+                    </div>
+                    <div v-if="item1.live_id && item1.islive == 1" @click.stop="toDetail(item1, 2)" class="match_live">
+                      <img class="icon" src="/static/image/match/play_icon.png" alt="">
+                      <!-- L I V E -->
+						        {{ $t('match.lab94') }}
+                    </div>
+                    <div class="scores" v-if="!(item1.live_id && item1.islive == 1) && !item1.match_live">
+                      <div class="radius"></div> 
+                      <!-- Live Scores -->
+						        {{ $t('match.lab95') }}
+                    </div>
+                  </template>
+                </div>
+              </div>
+              <div v-if="item1.match_result" class="ended">{{ item1.match_result }}</div>
+            </div>
+          </div>
+        </div>
+      </view>
+      <u-loadmore
+        v-if="matchList.length != 0 && !live && !selectArr.length && match_live == 0"
+        :status="status"
+        fontSize="28"
+        :line="true"
+        :loading-text="statusType.loadingText"
+        :loadmore-text="statusType.loadmoreText"
+        :nomore-text="statusType.nomoreText"
+      />
+    </view>
+    <div class="skeleton" v-if="!matchList.length && status == 'loading'">
+      <div class="list">
+        <div class="item-header"></div>
+        <div class="item-body">
+          <div class="item">
+            <div class="row">
+              <div class="left"></div>
+              <div class="right"></div>
+            </div>
+            <div class="row">
+              <div class="left"></div>
+              <div class="right"></div>
+            </div>
+          </div>
+          <div class="item">
+            <div class="row">
+              <div class="left"></div>
+              <div class="right"></div>
+            </div>
+            <div class="row">
+              <div class="left"></div>
+              <div class="right"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="list">
+        <div class="item-header"></div>
+        <div class="item-body">
+          <div class="item">
+            <div class="row">
+              <div class="left"></div>
+              <div class="right"></div>
+            </div>
+            <div class="row">
+              <div class="left"></div>
+              <div class="right"></div>
+            </div>
+          </div>
+          <div class="item">
+            <div class="row">
+              <div class="left"></div>
+              <div class="right"></div>
+            </div>
+            <div class="row">
+              <div class="left"></div>
+              <div class="right"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="no-data" v-show="!matchList.length && status == 'loadmore'">
+      <img class="e_img" src="/static/image/match/no_data.jpg" alt="">
+      <div class="text">
+        <!-- No search results for this filter -->
+        {{ $t('match.lab96') }}
+      </div>
+      <div class="reset-box">
+        <div class="btn" @click="reset">
+          <!-- RESET FILTERS -->
+					{{ $t('match.lab97') }}
+        </div>
+      </div>
+    </div>
+    </scroll-view>
+    <u-calendar
+        class="calendar"
+        :maxDate="maxDate"
+        :showSubtitle="false"
+        :title="$t('match.la31')"
+        :defaultDate="defaultDate"
+        color="#DC3C23"
+        :rowHeight="114"
+        confirmText="Confirm"
+        :formatter="formatter"
+        :minDate="minDate"
+        :show="dateShow"
+        @monthSelected="monthSelected"
+        @close="dateClose"
+        @confirm="dateConfirm">
+	  </u-calendar>
+    <u-popup
+      :show="selectMask"
+      mode="bottom"
+      :round="20"
+      @close="selectMask = false"
+    >
+      <view class="tag_popup_box" @touchmove.stop="">
+        <view class="top">
+          <img class="left_img" src="/static/image/match/left.png" @click="selectMask = false" alt="">
+          <u--input
+              :placeholder="$t('match.lab98')"
+              v-model="tournamentName"
+              prefixIcon="search"
+              prefixIconStyle="font-size: 28px;color: #909399"
+          ></u--input>
+          <img class="close" src="/static/image/common/warn.png" @click="selectMask = false" alt="">
+        </view>
+        <view class="list" v-if="tournamentListFilter.length">
+          <view
+            class="li font28 flex"
+            v-for="(item) in tournamentListFilter"
+            :key="item.tournament_id"
+            @click="checkboxChange(item.tournament_id)"
+          >
+            <text>{{ item.name }}</text>
+            <img class="img" :src="selectArrPopup.indexOf(item.tournament_id) != -1 ? '/static/image/match/match_selected.png' : '/static/image/match/match_notselected.png'">
+          </view>
+        </view>
+        <div class="no-tag-box" v-else>
+          <img class="no" src="/static/image/match/no_tag.png" alt="">
+          <div class="found">
+            <!-- Nothing found! -->
+					{{ $t('match.lab99') }}
+          </div>
+          <div class="text">
+            <!-- Please try searching again -->
+					{{ $t('match.labe') }}
+          </div>
+        </div>
+        <view class="foot flex-around" v-if="tournamentListFilter.length">
+          <view class="btn" @click="selectArrPopup = []">
+            <!-- Clear All -->
+					{{ $t('match.labe1') }}
+          </view>
+          <view class="btn1" @click="saveOptions">
+            <!-- Save Options -->
+					{{ $t('match.labe2') }}
+          </view>
+        </view>
+      </view>
+    </u-popup>
+    <u-popup
+      :show="matchLiveShow"
+      mode="bottom"
+      :round="20"
+      @close="matchLiveShow = false"
+    >
+      <view class="match_live_box" @touchmove.stop="">
+        <div class="item" @click="selectMatchLive(0)">
+          <!-- All matches(Non-streaming & Streaming) -->
+					{{ $t('match.labe3') }}
+          <div class="radius">
+            <div v-if="match_live == 0" class="radius-active"></div>
+          </div>
+        </div>
+        <div class="item" @click="selectMatchLive(2)">
+          <!-- Anchor explanation -->
+					{{ $t('match.labe4') }}
+          <div class="radius">
+            <div v-if="match_live == 2" class="radius-active"></div>
+          </div>
+        </div>
+        <div class="item" @click="selectMatchLive(1)">
+          <!-- Streaming on OneCric -->
+					{{ $t('match.labe5') }}
+          <div class="radius">
+            <div v-if="match_live == 1" class="radius-active"></div>
+          </div>
+        </div>
+      </view>
+    </u-popup>
+    <div @click="goTop" :class="getTopClass()" class="to-top" v-if="((!hasNowDate) || (titleDate && titleDate != nowDate)) && matchList.length">
+      <u-icon name="arrow-left-double" color="#fff"></u-icon>
+    </div>
+    <div class="news-install">
+      <install></install>
+    </div>
+  </view>
+</template>
+
+<script>
+import install from "@/components/install/install.vue";
+import { deepCopy } from '@/utils/common-utils';
+export default {
+  components: {
+    install,
+  },
+  data() {
+    const d = new Date()
+    const year = d.getFullYear()
+    let month = d.getMonth() + 1
+    month = month < 10 ? `0${month}` : month
+    const date = d.getDate()
+    return {
+      value: [],
+      streaming: 0,
+      status: "loadmore",
+      selectMask: false,
+      homeShow: false,
+      timer: null,
+      intervalTimer: null,
+      defaultDate: null,
+      statusType: {
+        loadingText: this.$t('common.lab'),
+        loadmoreText: this.$t('common.lab1'),
+        nomoreText: this.$t('common.lab2')
+      },
+      matchList: [],
+      tournamentList: [],
+      tournamentName: '',
+      triggered: false,
+      _freshing: false,
+      selectArr: [],
+      selectArrPopup: [],
+      live: 0,
+      match_live: 0,
+      tagList: [],
+      targetDate: '',
+      nowDate: '',
+      hasNowDate: true,
+      nextDate: '',
+      preDate: '',
+      dateShow: false,
+      matchLiveShow: false,
+      scrollTop: 0,
+      old: {
+        scrollTop: 0
+      },
+      titleDate: '',
+      targetDateScrollTop: 0,
+      maxDate: `${year}-${month}-${date + 15}`,
+      minDate: `${year}-${month}-${date - 15}`,
+    };
+  },
+  computed: {
+    refresherEnabled() {
+      if (this.match_live !== 0) {
+        return false
+      }
+      if (this.live == 1) {
+        return false
+      }
+      if (!this.matchList[0]) {
+        return false
+      }
+      return true
+    },
+    tagActiveList() {
+      let list = [];
+      list = this.tagList.filter(item => {
+        return this.selectArr.indexOf(item.id) !== -1
+      })
+      list = list.concat(this.tagList.filter(item => {
+        return this.selectArr.indexOf(item.id) === -1
+      }))
+      return list
+    },
+    tournamentListFilter() {
+      return this.tournamentList.filter(item => {
+        return item.name.toLowerCase().indexOf(this.tournamentName.toLowerCase()) !== -1
+      })
+    },
+    info() {
+      return this.$store.state.info;
+    },
+    isLogin() {
+      return this.$store.state.isLogin;
+    },
+  },
+  created() {
+    if (sessionStorage.getItem('match_live')) {
+      this.matchLiveLoad()
+    } else {
+      this.targetDate = this.$common.parseTime(new Date(), '{y}-{m}-{d}')
+      this.get_Cricket_match(true);
+    }
+    this.get_cricket_tag();
+    this.get_cricket_tournament();
+    this.intervalTimer = setInterval(() => {
+      if (this.matchList.length) {
+        this.get_live_Cricket_match()
+      }
+    }, 10000)
+  },
+  activated() {
+    if (sessionStorage.getItem('match_live')) {
+      this.matchLiveLoad()
+    }
+    this.intervalTimer = setInterval(() => {
+      if (this.matchList.length) {
+        this.get_live_Cricket_match()
+      }
+    }, 10000)
+  },
+  deactivated() {
+    clearInterval(this.intervalTimer)
+    this.intervalTimer = null
+  },
+  methods: {
+    setList() {
+      let num = this.streaming;
+      this.streaming = num == 1 ? 0 : 1;
+      this.get_Cricket_match();
+    },
+
+    // 获取公开赛列表
+    get_cricket_tournament() {
+      uni.$u.http
+        .post("/api/Cricket/get_cricket_tournament", {})
+        .then((res) => {
+          this.tournamentList = res;
+        })
+        .catch((res) => {});
+    },
+    // 联赛-标签
+    get_cricket_tag() {
+      uni.$u.http
+        .post("/api/Cricketnew/get_cricket_tag", {})
+        .then((res) => {
+          this.tagList = res
+        })
+        .catch((res) => {});
+    },
+    /* 获取板球列表 */
+    get_Cricket_match(reset, d) {
+      this.status = "loading";
+      let time = new Date();
+      let timeZone = time.toLocaleTimeString("en-us", {
+        timeZoneName: "short",
+      }); //'1:12:38 PM GMT+8'
+      let timeZoneId = Intl.DateTimeFormat().resolvedOptions().timeZone; //'Asia/Shanghai'
+      let selectArr = this.selectArr.join(',');
+      this.nowDate = this.$common.parseTime(new Date(), '{y}-{m}-{d}')
+      if (this.nowDate == d) {
+        this.hasNowDate = true
+      }
+      uni.$u.http
+        .post("/api/Cricketnew/cricket_match_day", {
+          timezone: timeZoneId,
+          date: d || this.targetDate,
+          live: this.live,
+          tag: selectArr,
+          match_live: this.match_live
+        })
+        .then((res) => {
+          if (reset) {
+            let matchList = [];
+            (res.item || []).forEach(a => {
+              matchList.push({
+                end_day: res.end_day,
+                front_day: res.front_day,
+                item: [a]
+              })
+            })
+            this.matchList = matchList;
+            this.$nextTick(() => {
+              this.scrollTop = this.old.scrollTop
+              this.$nextTick(()=>{
+                this.scrollTop = 0
+              });
+              this.getDateTitle()
+              var div = document.querySelectorAll('.match-list-ul')
+              //最终结果
+              div.forEach(item => {
+                let distance = item.offsetTop + this.getTop(item.parentElement)
+                if (this.hasNowDate) {
+                  if (item.getAttribute('data-day') == this.nowDate) {
+                    this.targetDateScrollTop = distance
+                  }
+                } else {
+                  if (item.getAttribute('data-day') == this.targetDate) {
+                    this.targetDateScrollTop = distance
+                  }
+                }
+              })
+            })
+          } else {
+            if (d == this.preDate) {
+              let titleDate = this.titleDate
+              uni.stopPullDownRefresh();
+              let matchList = [];
+              (res.item || []).forEach(a => {
+                matchList.push({
+                  end_day: res.end_day,
+                  front_day: res.front_day,
+                  item: [a]
+                })
+              })
+              this.matchList = matchList.concat(this.matchList);
+              this.$nextTick(() => {
+                var div = document.querySelectorAll('.match-list-ul')
+                div.forEach(item => {
+                  let distance = item.offsetTop + this.getTop(item.parentElement)
+                  if (item.getAttribute('data-day') == titleDate) {
+                    this.targetDateScrollTop = distance
+                  }
+                })
+                this.scrollTop = (this.targetDateScrollTop - 90)
+              })
+            } else {
+              if (res) {
+                let matchList = [];
+                (res.item || []).forEach(a => {
+                  matchList.push({
+                    end_day: res.end_day,
+                    front_day: res.front_day,
+                    item: [a]
+                  })
+                })
+                this.matchList = this.matchList.concat(matchList);
+              }
+              this.$nextTick(() => {
+                this.getDateTitle()
+                var div = document.querySelectorAll('.match-list-ul')
+                //最终结果
+                div.forEach(item => {
+                  let distance = item.offsetTop + this.getTop(item.parentElement)
+                  if (this.hasNowDate) {
+                    if (item.getAttribute('data-day') == this.nowDate) {
+                      this.targetDateScrollTop = distance
+                    }
+                  } else {
+                    if (item.getAttribute('data-day') == this.targetDate) {
+                      this.targetDateScrollTop = distance
+                    }
+                  }
+                })
+              })
+            }
+          }
+          if (this.timer) {
+            clearInterval(this.timer)
+            this.timer = null
+          }
+          this.countdown1()
+          this.timer = setInterval(this.countdown, 1000)
+          document.getElementById('item-box').scrollLeft=0;
+          if (this.selectMask) {
+            this.selectMask = false;
+          }
+        }).finally(() => {
+          this.triggered = false
+          this._freshing = false;
+          this.status = "loadmore";
+        })
+        .catch((res) => {});
+    },
+    toMatchList(item) {
+      uni.navigateTo({
+        url:`./match-list?title=${item.name}&id=${item.tournament_id}&type=${item.type}${item.cricket_match.length != 0 ? ('&matchid=' + item.cricket_match[0].id): ''}`
+      })
+    },
+    toSearch() {
+      uni.navigateTo({
+        url:`./search`
+      })
+    },
+    close(event) {
+      this.homeShow = false;
+    },
+    countdown1() {
+      var matchList = this.matchList
+      matchList.forEach(item => {
+        if (item.item && item.item[0] && item.item[0].list) {
+          item.item[0].list.forEach(a => {
+            a.cricket_match && a.cricket_match.forEach(item1 => {
+              if (item1.match_result == null) {
+                item1.match_result = ''
+              }
+              item1.live_time_unix = new Date(item1.todaystart.replace(new RegExp(/-/gm), "/")).getTime() - new Date().getTime()
+              if (item1.live_time_unix > 0 && item1.live_time_unix < (1000 * 60 * 60 * 3)) {
+                item1.live_time = this.$common.countdownFun(item1.live_time_unix / 1000)
+              } else {
+                item1.live_time = null
+              }
+              if (item1.live_time_unix == 0) {
+                item1.status = 1
+              }
+            })
+          })
+        }
+      })
+      this.$set(this, 'matchList', matchList)
+    },
+    countdown() {
+      var matchList = this.matchList
+      matchList.forEach(item => {
+        if (item.item && item.item[0] && item.item[0].list) {
+          item.item[0].list.forEach(a => {
+            a.cricket_match && a.cricket_match.forEach(item1 => {
+              if (item1.match_result == null) {
+                item1.match_result = ''
+              }
+              if (item1.live_time_unix > 0 && item1.live_time_unix < (1000 * 60 * 60 * 3)) {
+                item1.live_time_unix = item1.live_time_unix - 1000
+                item1.live_time = this.$common.countdownFun(item1.live_time_unix / 1000)
+              } else {
+                item1.live_time = null
+              }
+              if (item1.live_time_unix == 0) {
+                item1.status = 1
+              }
+            })
+          })
+        }
+      })
+      this.$set(this, 'matchList', matchList)
+    },
+    get_live_Cricket_match() {
+      let timeZoneId = Intl.DateTimeFormat().resolvedOptions().timeZone; //'Asia/Shanghai'
+      let selectArr = this.selectArr.join(',');
+      let nowDate = this.$common.parseTime(new Date(), '{y}-{m}-{d}')
+      uni.$u.http
+        .post("/api/Cricketnew/cricket_match_day", {
+          timezone: timeZoneId,
+          date: nowDate,
+          live: this.live,
+          tag: selectArr,
+          match_live: this.match_live
+        })
+        .then((res) => {
+          if (res.item[0] && res.item[0].list&& res.item[0].list[0]) {
+            let obj = {}
+            res.item[0].list.forEach(item => {
+              (item.cricket_match || []).forEach(m => {
+                obj[m.id] = m
+              })
+            })
+            let matchList = deepCopy(this.matchList)
+            matchList.forEach((item, index1) => {
+              if (item.item && item.item[0] && item.item[0].list) {
+                item.item[0].list.forEach((a, index2) => {
+                  a.cricket_match && a.cricket_match.forEach((item1, index3) => {
+                    if (obj[item1.id]) {
+                      obj[item1.id].live_time = item1.live_time
+                      item1 = obj[item1.id]
+                      a.cricket_match[index3] = item1
+                    }
+                  })
+                })
+              }
+            })
+            matchList.forEach(item => {
+              if (item.item && item.item[0] && item.item[0].list) {
+                item.item[0].list.forEach(a => {
+                  a.cricket_match && a.cricket_match.forEach(item1 => {
+                    item1.live_time_unix = new Date(item1.todaystart.replace(new RegExp(/-/gm), "/")).getTime() - new Date().getTime()
+                    if (item1.live_time_unix > 0 && item1.live_time_unix < (1000 * 60 * 60 * 3)) {
+                      item1.live_time = this.$common.countdownFun(item1.live_time_unix / 1000)
+                    } else {
+                      item1.live_time = null
+                    }
+                    if (item1.live_time_unix == 0) {
+                      item1.status = 1
+                    }
+                  })
+                })
+              }
+            })
+            this.matchList = matchList
+          }
+        })
+        .catch((res) => {});
+    },
+    toDetail(item, type) {
+      if (type == 1) {
+        this.$toUrl('./match-detail?id=' + item.id + '&animation=1')
+        return
+      }
+      if (type == 2) {
+        this.$toUrl('/pages/Live/live-detail?ID=' + item.live_id)
+        return
+      }
+      if(item.status == 1) {
+        this.$toUrl(`./match-detail?id=${item.id}&live=1`)
+        return
+      }
+      this.$toUrl('./match-detail?id=' + item.id)
+    },
+    open(event) {},
+    onPulling(e) {
+    },
+    onRefresh() {
+      if (this._freshing) return;
+      this.triggered = true
+      this._freshing = true;
+      this.preDate = this.matchList[0].front_day
+      this.get_Cricket_match(false, this.preDate);
+    },
+    scrolltolower() {
+      if (this.live || this.selectArr.length || !this.matchList[this.matchList.length - 1] || this.match_live !== 0) {
+        return
+      }
+      if (this.status == "loadmore") {
+        this.nextDate = this.matchList[this.matchList.length - 1].end_day
+        this.get_Cricket_match(false, this.nextDate);
+      }
+    },
+    scroll(e) {
+      // console.error(e)
+			this.old.scrollTop = e.detail.scrollTop
+      this.getDateTitle()
+    },
+    getDateTitle() {
+      var div = document.querySelectorAll('.match-list-ul')
+      //最终结果
+      let hasNowDate = false
+      div.forEach(item => {
+        if (item.getAttribute('data-day') == this.nowDate) {
+          hasNowDate = true
+        }
+        let distance = item.offsetTop + item.offsetHeight
+        if ((this.old.scrollTop - distance) < -100 && this.old.scrollTop >= item.offsetTop) {
+          this.titleDate = item.getAttribute('data-day')
+        }
+      })
+      this.hasNowDate = hasNowDate
+    },
+    getTop(dom, distance) {
+      distance = distance || 0
+      //可以使用dom.style.positin 但style只能获取到行内属性会出现获取不到属性值返回空字符串
+      //getComputedStyle会输出最终应用于该element上的最终样式  IE9+支持
+      //currentStyle  IE老版本支持
+      if (['relative','absolute','fixed'].includes(getComputedStyle(dom).position)) {
+        distance += distance.offsetTop
+      }
+      if (dom.parentElement.nodeName === 'BODY' || !dom.parentElement) {
+            return distance
+      }
+      return this.getTop(dom.parentElement, distance)
+    },
+    onAbort() {
+    },
+    monthSelected(e) {
+      this.defaultDate = e
+    },
+    selectMatchLive(type) {
+      this.matchLiveShow = false
+      if (this.match_live == type) {
+        return
+      }
+      this.targetDate = this.nowDate
+      this.match_live = type
+      this.get_Cricket_match(true);
+    },
+    reset() {
+      this.live = 0;
+      this.match_live = 0;
+      this.selectArr = [];
+      this.get_Cricket_match(true);
+    },
+    matchLiveLoad() {
+      this.match_live = JSON.parse(sessionStorage.getItem('match_live'))
+      this.targetDate = this.$common.parseTime(new Date(), '{y}-{m}-{d}')
+      this.get_Cricket_match(true);
+      sessionStorage.removeItem('match_live')
+    },
+    checkLive() {
+      if (this.status == "loading") {
+        return
+      }
+      this.match_live = 0;
+      this.targetDate = this.nowDate
+      let selectArr = []
+      this.tagActiveList.forEach(item => {
+        if (this.selectArr.indexOf(item.id) !== -1) {
+          selectArr.push(item.id)
+        }
+      })
+      this.selectArr = selectArr
+      this.live = this.live ? 0 : 1
+      this.targetDate = this.$common.parseTime(new Date(), '{y}-{m}-{d}')
+      this.get_Cricket_match(true)
+    },
+    selectedTag(id) {
+      if (this.status == "loading") {
+        return
+      }
+      if (this.selectArr.indexOf(id) === -1) {
+        this.selectArr.push(id)
+      } else {
+        this.selectArr = this.selectArr.filter(item => {
+          return item != id
+        })
+      }
+      this.match_live = 0;
+      this.live = 0
+      this.targetDate = this.nowDate
+      document.getElementById('item-box').scrollLeft=0;
+      this.get_Cricket_match(true)
+    },
+    checkboxChange(id) {
+      if (this.selectArrPopup.indexOf(id) === -1) {
+        this.selectArrPopup.push(id)
+      } else {
+        this.selectArrPopup = this.selectArrPopup.filter(item => {
+          return item != id
+        })
+      }
+    },
+    saveOptions() {
+      this.selectArr = deepCopy(this.selectArrPopup)
+      this.targetDate = this.nowDate
+      this.selectMask = false
+      this.get_Cricket_match(true)
+    },
+    showSelectMask() {
+      this.selectMask = true
+      this.tournamentName = ''
+      this.selectArrPopup = deepCopy(this.selectArr)
+    },
+    dateConfirm(e) {
+      this.targetDate = e[0]
+      this.get_Cricket_match(true)
+      this.dateShow = false
+    },
+    dateClose() {
+      this.dateShow = false
+    },
+    dateShowChange() {
+      this.dateShow = true
+      this.defaultDate = [this.targetDate]
+    },
+    goTop(e) {
+      if (!this.hasNowDate) {
+        this.selectArr = [];
+        this.match_live = 0;
+        this.targetDate = this.nowDate
+        this.get_Cricket_match(true, this.nowDate);
+        return
+      }
+      var div = document.querySelectorAll('.match-list-ul')
+      let scrollTop = 0
+      div.forEach(item => {
+        if (item.getAttribute('data-day') == this.nowDate) {
+          scrollTop = item.offsetTop
+        }
+      })
+      // 解决view层不同步的问题
+      this.scrollTop = this.old.scrollTop
+      this.$nextTick(()=>{
+        this.scrollTop = scrollTop
+        this.old.scrollTop = scrollTop
+        this.getDateTitle()
+      });
+    },
+    getTopClass() {
+      if (new Date(this.titleDate.replace(new RegExp(/-/gm), "/")).getTime() < new Date(this.nowDate.replace(new RegExp(/-/gm), "/")).getTime()) {
+        return 'down'
+      }
+      return 'up'
+    },
+    formatter(day) {
+      const d = new Date()
+      let month = d.getMonth() + 1
+      const date = d.getDate()
+      if(day.month == month && day.day == date)
+      {
+        day.bottomInfo = this.$t('match.tab2')
+      }
+      return day
+      },
+    watchLiveAt(value) {
+      if (!value) {
+        return ''
+      }
+			var date = new Date(value.replace(new RegExp(/-/gm), "/"));
+      var hours = date.getHours();
+      var minutes = date.getMinutes();
+      if (hours != 12) {
+        hours = hours % 12;
+      }
+      if (hours == 12 && minutes) {
+        hours = hours % 12;
+      }
+      minutes = minutes < 10 ? '0' + minutes : minutes;
+      hours = hours < 10 ? '0' + hours : hours;
+      var strTime = hours + ':' + minutes;
+      return strTime;
+    },
+    watchLiveAt1(value) {
+      if (!value) {
+        return ''
+      }
+			var date = new Date(value.replace(new RegExp(/-/gm), "/"));
+      var hours = date.getHours();
+      var minutes = date.getMinutes();
+      var ampm = hours >= 12 ? "PM" : "AM";
+      var strTime = ampm;
+      if (minutes && hours == 12) {
+        strTime = 'PM'
+      }
+      return strTime;
+    },
+    formaScore(v){
+      if (v == '0/0（0）') {
+        return 'Yet To Bat'
+      }
+      let s = v.replace("（", '(')
+      let index = v.indexOf('(')
+      return s.substring(index)
+    },
+    formaScore1(v){
+      let s = v.replace("（", '(')
+      let index = v.indexOf('(')
+      let val = s.substring(0, index).split('&')
+      if (val[1]) {
+        return '&' + val[1]
+      }
+      return val[0]
+    },
+    formaScore2(v){
+      let s = v.replace("（", '(')
+      let index = v.indexOf('(')
+      let val = s.substring(0, index).split('&')
+      if (val[1]) {
+        return val[0]
+      }
+      return ''
+    },
+    formatDate1(value) {
+        if (!value) {
+          return ''
+        }
+        var nowDate = new Date(this.$common.parseTime(new Date(), '{y}/{m}/{d}')).getTime();
+        var date = new Date(value.replace(new RegExp(/-/gm), "/"));
+				var weekNum = date.getDay()
+				let week = ""
+				switch (weekNum) {
+					case 0:
+						week = "Sunday";
+						break;
+					case 1:
+						week = "Monday";
+						break;
+					case 2:
+						week = "Tuesday";
+						break;
+					case 3:
+						week = "Wednesday";
+						break;
+					case 4:
+						week = "Thursday";
+						break;
+					case 5:
+						week = "Friday";
+						break;
+					case 6:
+						week = "Saturday";
+						break;
+				}
+        var targetDate = date.getTime()
+        if (nowDate - targetDate < 0 && nowDate - targetDate >= -(1000 * 60 * 60 * 24)) {
+          week = this.$t('match.la33')
+        }
+        if (nowDate - targetDate > 0 && nowDate - targetDate <= (1000 * 60 * 60 * 24)) {
+          week = this.$t('match.la32')
+        }
+        if (nowDate == targetDate) {
+          week = this.$t('match.tab2')
+        }
+				return `${week}`;
+		},
+    formatDate(value) {
+        if (!value) {
+          return ''
+        }
+        var date = new Date(value.replace(new RegExp(/-/gm), "/"));
+				var MonthNum = date.getMonth() + 1
+				let Month = ''
+				switch (MonthNum) {
+					case 1:
+						Month = "Jan";
+						break;
+					case 2:
+						Month = "Feb";
+						break;
+					case 3:
+						Month = "Mar";
+						break;
+					case 4:
+						Month = "Apr";
+						break;
+					case 5:
+						Month = "May";
+						break;
+					case 6:
+						Month = "Jun";
+						break;
+					case 7:
+						Month = "Jul";
+						break;
+					case 8:
+						Month = "Aug";
+						break;
+					case 9:
+						Month = "Sept";
+						break;
+					case 10:
+						Month = "Oct";
+						break;
+					case 11:
+						Month = "Nov";
+						break;
+					case 12:
+						Month = "Dec";
+						break;
+				}
+				let day = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate())
+				
+				return `${day} ${Month}`;
+		},
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+page {
+  background-color: rgb(251, 251, 252);
+  padding-bottom: var(--window-bottom);
+}
+.match-head {
+  color: #fff;
+  font-size: 28rpx;
+  position: sticky;
+  top: 0;
+  z-index: 99;
+  background-color: $color1;
+  .match-install {
+    color: #333;
+  }
+}
+.search-box {
+  padding: 22rpx 24rpx;
+  color: #BBBBBB;
+  font-size: 28rpx;
+  .search {
+    background-color: rgba(245,245,245,0.3);
+    border-radius: 44rpx;
+    height: 60rpx;
+    display: flex;
+    align-items: center;
+    padding: 0 18rpx;
+  }
+  .icon {
+    width: 28rpx;
+    height: 28rpx;
+    margin-right: 18rpx;
+  }
+}
+.filter-box {
+  background-color: #fff;
+  .box {
+    padding: 24rpx 0;
+    position: relative;
+  }
+  .item-box {
+    padding: 0 26rpx;
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    white-space: nowrap;
+    word-break: keep-all;
+    overflow: auto;
+    .item {
+      display: flex;
+      align-items: center;
+      line-height: 1;
+      height: 52rpx;
+      color: #333;
+      font-size: 22rpx;
+      border-radius: 30rpx;
+      border: 1px solid #999999;
+      padding: 0 20rpx;
+      margin-right: 16rpx;
+      &.item1 {
+        padding: 0 13rpx;
+      }
+      &.active {
+        color: #DC3C23;
+        border-color: #DC3C23;
+      }
+      .icon {
+        margin-right: 11rpx;
+        height: 20rpx;
+        width: 20rpx;
+      }
+      .down {
+        margin-left: 9rpx;
+        height: 16rpx;
+      }
+    }
+  }
+  .border {
+    height: 40rpx;
+    min-width: 1rpx;
+    max-width: 1px;
+    background-color: #CCCCCC;
+    margin-right: 18rpx;
+  }
+  .tours {
+    position: absolute;
+    top: 50%;
+    right: 0;
+    transform: translateY(-50%);
+    height: 64rpx;
+    padding-left: 20rpx;
+    padding-right: 15rpx;
+    display: flex;
+    align-items: center;
+    line-height: 1;
+    color: #333;
+    font-size: 22rpx;
+    background-color: #fff;
+    background: #FFFFFF;
+    box-shadow: 4rpx 4rpx 8rpx 1rpx rgba(0,0,0,0.16);
+    border-radius: 10rpx 0px 0px 10rpx;
+    border: 1px solid #CCCCCC;
+    .down {
+      margin-left: 16rpx;
+      height: 16rpx;
+    }
+    .number-box {
+      margin-right: 9rpx;
+      width: 34rpx;
+      height: 26rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 18rpx;
+      line-height: 1;
+      color: #fff;
+      background: #DC3C23;
+      border-radius: 30rpx;
+    }
+  }
+  .box1 {
+    padding: 25rpx 24rpx 22rpx;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    color: #333;
+    .live-now {
+      width: 120rpx;
+      height: 40rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 30rpx;
+      border: 1px solid #CCCCCC;
+      line-height: 1;
+      font-size: 22rpx;
+      &.active {
+        color: #DC3C23;
+        border-color: #DC3C23;
+      }
+    }
+  }
+  .left {
+    display: flex;
+    align-items: center;
+    font-size: 26rpx;
+    line-height: 1;
+    .bold {
+      font-weight: bold;
+      margin-right: 6rpx;
+    }
+  }
+  .right {
+    display: flex;
+    align-items: center;
+  }
+  .date-box {
+    display: flex;
+    align-items: center;
+    height: 36rpx;
+    border-left: 1px solid #ccc;
+    font-size: 28rpx;
+    padding-left: 19rpx;
+    margin-left: 22rpx;
+    &.active {
+      color: #FF3300;
+    }
+    .icon {
+      width: 28rpx;
+      margin-right: 10rpx;
+    }
+  }
+}
+.match-list {
+  &+.match-list-ul {
+    margin-top: 20rpx;
+  }
+  .match-list-ul {
+    background-color: #fff;
+    &+.match-list-ul {
+      margin-top: 20rpx;
+    }
+    .day {
+      font-size: 26rpx;
+      color: #333;
+      height: 77rpx;
+      display: flex;
+      align-items: center;
+      padding: 0 24rpx;
+      .bold {
+        font-weight: bold;
+        margin-right: 6rpx;
+      }
+    }
+    .list {
+      background-color: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%);
+      border-bottom: 1px solid #F3F3F7;
+    }
+    .list + .list{
+      margin-top: 22rpx;
+    }
+    .title {
+      height: 80rpx;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 24rpx;
+      font-size: 30rpx;
+      font-weight: bold;
+      color: #333;
+      background-image: url('/static/image/match/list-top-bg.png');
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      .icon {
+        width: 48rpx;
+      }
+    }
+    .match-list {
+      padding: 15rpx 25rpx 17rpx;
+      &+.match-list {
+        border-top: 1px solid #F3F3F7;
+      }
+    }
+    .match-detail-box {
+      padding: 20rpx 0 20rpx 19rpx;
+      .match_num {
+        margin-bottom: 10px;
+        font-size: 22rpx;
+        color: #999;
+      }
+      .detail-box {
+        padding-right: 212rpx;
+        position: relative;
+        .detail {
+          font-size: 24rpx;
+          line-height: 40rpx;
+          color: #333;
+          font-weight: bold;
+          border-right: 1px solid #F3F3F7;
+        }
+        .home {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          position: relative;
+          .row {
+            display: flex;
+            align-items: center;
+            &+.row {
+              margin-top: 32rpx;
+            }
+          }
+          .left {
+            flex: 1;
+            min-width: 10%;
+            max-width: 100%;
+            .text-clamp {
+              // padding-right: 14rpx;
+            }
+          }
+          .u-icon {
+            position: absolute;
+            right: -6rpx;
+            top: 50%;
+            transform: translateY(-50%);
+          }
+          .u-transition {
+            margin-right: 18rpx;
+          }
+          .li-team-value {
+            display: flex;
+            align-items: center;
+            justify-content: flex-end;
+            line-height: 40rpx;
+            padding-right: 16rpx;
+            position: relative;
+            &+.li-team-value {
+              margin-top: 32rpx;
+            }
+          }
+          .value {
+            font-size: 22rpx;
+            font-weight: 400;
+            color: #666666;
+          }
+          .value2 {
+            font-size: 24rpx;
+            font-weight: bold;
+            color: #999;
+            margin-right: 3px;
+            &.r {
+              color: #666666;
+            }
+          }
+          .value1 {
+            font-size: 24rpx;
+            font-weight: bold;
+            color: #333;
+            &.r {
+              color: #666666;
+            }
+          }
+        }
+      }
+      .state-box {
+        position: absolute;
+        right: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        min-width: 212rpx;
+        max-width: 212rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        font-size: 22rpx;
+        line-height: 30rpx;
+        font-weight: 400;
+        .status2 {
+          color: #999;
+        }
+        .status0 {
+          display: flex;
+          align-items: flex-end;
+          line-height: 1;
+          .down {
+            margin-right: 8rpx;
+          }
+        }
+        .down {
+          font-size: 28rpx;
+          font-weight: bold;
+        }
+        .match_live {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 160rpx;
+          height: 50rpx;
+          background-color: #DC3C23;
+          border-radius: 40rpx;
+          font-size: 22rpx;
+          color: #fff;
+          line-height: 1;
+          font-weight: 400;
+          &+.match_live {
+            margin-top: 20rpx;
+          }
+          .icon {
+            width: 19rpx;
+            margin-right: 4px;
+          }
+        }
+        .scores {
+          color: #959DEE;
+          display: flex;
+          align-items: center;
+          font-weight: bold;
+          .radius {
+            width: 6rpx;
+            height: 6rpx;
+            border-radius: 50%;
+            background-color: #959DEE;
+            margin-right: 7rpx;
+          }
+        }
+      }
+      .ended {
+        font-size: 22rpx;
+        line-height: 30rpx;
+        font-weight: bold;
+        color: #999;
+        margin-top: 22rpx;
+      }
+    }
+  }
+}
+.skeleton {
+  background-color: #fff;
+  .list {
+    background-color: #fff;
+    border-bottom: 1px solid #F3F3F7;
+    &+.list {
+      margin-top: 20rpx;
+    }
+    .item-header {
+      background-color: #F3F3F7;
+      height: 80rpx;
+    }
+    .item-body {
+      padding: 6rpx 25rpx 0;
+    }
+    .item {
+      padding: 30rpx 13rpx 40rpx;
+      &+.item {
+        border-top: 1px solid #ccc;
+      }
+      .row {
+        display: flex;
+        align-items: center;
+        .left, .right {
+          height: 44rpx;
+          background-color: #F3F3F7;
+        }
+        .left {
+          width: 44rpx;
+          margin-right: 12rpx;
+        }
+        .right {
+          width: 423rpx;
+        }
+        &+.row {
+          margin-top: 20rpx;
+        }
+      }
+    }
+  }
+}
+.match_live_box {
+  background-color: #fff; 
+  border-top-left-radius: 20rpx;
+  border-top-right-radius: 20rpx;
+  padding-top: 43rpx;
+  padding-bottom: 34rpx;
+  .item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    line-height: 40rpx;
+    font-size: 28rpx;
+    font-weight: bold;
+    color: #333333;
+    padding: 19rpx 42rpx 19rpx 24rpx;
+  }
+  .radius {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32rpx;
+    height: 32rpx;
+    border-radius: 50%;
+    border: 3rpx solid #DC3C23;
+  }
+  .radius-active {
+    width: 16rpx;
+    height: 16rpx;
+    border-radius: 50%;
+    background-color: #DC3C23;
+  }
+}
+.tag_popup_box {
+  background-color: #fff; 
+  border-top-left-radius: 20rpx;
+  border-top-right-radius: 20rpx;
+  position: relative;
+  padding-bottom: 130rpx;
+  .top {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 26rpx 39rpx 40rpx 36rpx;
+    .u-input {
+      flex: 1;
+      border: none;
+      height: 58rpx;
+      border-radius: 44rpx;
+      background-color: #F5F5F5;
+      box-sizing: border-box;
+    }
+    .left_img {
+      min-width: 19rpx;
+      max-width: 19rpx;
+      margin-right: 31rpx;
+    }
+    .close {
+      min-width: 28rpx;
+      max-width: 28rpx;
+      margin-left: 24rpx;
+    }
+  }
+  .list {
+    max-height: 50vh;
+    overflow-y: auto;
+    padding-left: 24rpx;
+    padding-right: 41rpx;
+    .li {
+      height: 75rpx;
+      display: flex;
+      align-items: center;
+      font-size: 24rpx;
+      color: #333;
+      font-weight: bold;
+      .img {
+        width: 34rpx;
+        height: 34rpx;
+      }
+    }
+  }
+  .no-tag-box {
+    padding-top: 170rpx;
+    padding-bottom: 300rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    .no {
+      display: block;
+      width: 164rpx;
+      margin-bottom: 37rpx;
+    }
+    .found {
+      line-height: 45rpx;
+      font-size: 32rpx;
+      font-weight: bold;
+      color: #333333;
+      margin-bottom: 12rpx;
+    }
+    .text {
+      height: 33rpx;
+      font-size: 24rpx;
+      font-weight: 400;
+      color: #999999;
+    }
+  }
+  .foot {
+    padding-top: 26rpx;
+    padding-bottom: 22rpx;
+    box-shadow: 0px -3px 8px 1px rgba(0,0,0,0.1);
+    line-height: 1;
+    box-sizing: border-box;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: #ffff;
+    z-index: 2;
+  }
+  .btn {
+    width: 232rpx;
+    height: 62rpx;
+    border-radius: 10rpx;
+    border: 1px solid #707070;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 28rpx;
+    font-weight: 400;
+    color: #333333;
+  }
+  .btn1 {
+    width: 232rpx;
+    height: 62rpx;
+    border-radius: 10rpx;
+    border: 1px solid #DC3C23;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 28rpx;
+    font-weight: 400;
+    color: #fff;
+    background-color: #DC3C23;
+  }
+}
+.no-data {
+  padding-top: 20vh;
+  .e_img {
+    display: block;
+    width: 160rpx;
+    margin: 0 auto;
+  }
+  .text {
+    color: #999;
+    font-size: 32rpx;
+    margin-top: 32rpx;
+    margin-bottom: 60rpx;
+    text-align: center;
+  }
+  .reset-box {
+    display: flex;
+    justify-content: center;
+    .btn {
+      border: 1px solid #DC3C23;
+      color: #DC3C23;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0 30rpx;
+      height: 84rpx;
+      border-radius: 16rpx;
+    }
+  }
+}
+.scroll {
+  height: calc(100vh - 290rpx - var(--window-bottom));
+}
+.to-top {
+  position: fixed;
+  right: 24px;
+  bottom: 248rpx;
+  z-index: 5;
+  height: 40px;
+  width: 40px;
+  border-radius: 50%;
+  background-color: #1D2550;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  &.up {
+    .u-icon {
+      transform: rotate(90deg);
+    }
+  }
+  &.down {
+    .u-icon {
+      transform: rotate(-90deg);
+    }
+  }
+}
+.news-install {
+  position: sticky;
+  bottom: var(--window-bottom);
+  z-index: 200;
+}
+</style>

pages/Match/compontent/Bio.vue

@@ -0,0 +1,137 @@
+<template>
+	<view class="bio">
+		<view class="selection">
+			<text class="size32 c3 Bold">
+				<!-- Teams -->
+				{{ $t('match.lab') }}
+			</text>
+			<view class="list">
+				<view class="list-item">
+					<view class="size28 c3 mg-tp6">
+						{{bioDeatil.teams || $t('match.lab1')}}
+					</view>
+				</view>
+			</view>
+			<text class="size32 c3 Bold">
+				<!-- Recent Matches -->
+				{{ $t('match.lab2') }}
+			</text>
+		</view>
+		<view class="table-item-content-th th2">
+			<text class="size24 c9">
+				<!-- MATCHES -->
+				{{ $t('match.lab3') }}
+			</text>
+			<text class="size24 c9">
+				<!-- BAT -->
+				{{ $t('match.lab4') }}
+			</text>
+			<text class="size24 c9">
+				<!-- BOWL -->
+				{{ $t('match.lab5') }}
+			</text>
+			<text class="size24 c9">
+				<!-- FORMAT -->
+				{{ $t('match.lab6') }}
+			</text>
+		</view>
+		<view class="table-item-content-tr tr2" v-for="(item,index) in bioDeatil.recent_matches" :key="index">
+			
+			<view class="size28">
+				<text>{{item.match_home_name}}/{{item.match_away_name}}</text>
+				<!-- <text>{{item.match_time}}</text> -->
+			</view>
+			<text class="size24 c6">{{item.bat}}</text>
+			<text class="size24 c6 overflow1">{{item.bowl}}</text>
+			<text class="size24 c6">{{item.tournament_type}}</text>
+		</view>
+		
+		<view class="selection" style="margin-top: 50rpx;padding-top: 24rpx;">
+			<text class="size32 c3 Bold">
+				<!-- Profile -->
+				{{ $t('match.lab7') }}
+			</text>
+			<view class="list">
+				<view class="list-item">
+					<view class="size28 c3 mg-tp6">
+						{{bioDeatil.profile}}
+					</view>
+				</view>
+			</view>
+			<!-- <text class="size32 c3 Bold"> Recent Matches </text> -->
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				bioDeatil:{
+					recent_matches:[]
+				}
+			}
+		},
+		methods: {
+			getBio(id) {
+				uni.$u.http.post('/api/CricketPlayer/cricket_player_bio',{player_id:id}).then(res=>{
+					this.bioDeatil = res
+				}).catch(res=>{})
+			}
+		},
+	}
+</script>
+
+<style lang="scss">
+	.bio {
+		padding: 0 24rpx;
+		.table-item-content-th{
+			height: 50rpx;
+			background: #CCCCCC;
+			border-radius: 10rpx;
+			display: grid;
+			grid-template-columns: 40% 10% 10% 10% 10% 20%;
+			grid-template-rows:50rpx;
+			min-height: 50rpx;
+			padding-left: 24rpx;
+			line-height: 50rpx;
+		}
+		.table-item-content-tr{
+			display: grid;
+			grid-template-columns: 40% 10% 10% 10% 10% 20%;
+			// grid-template-rows:121rpx;
+			padding: 24rpx 0 24rpx 24rpx;
+			border-bottom:1rpx solid #ccc;
+			&:last-child{
+				border-bottom:0;
+			}
+			
+		}
+		
+		.th2{
+			grid-template-columns: 25% 25% 25% 25%;
+			margin-top: 24rpx;
+		}
+		.tr2{
+			grid-template-columns: 25% 25% 25% 25%;
+		}
+		.th3{
+			margin-top: 24rpx;
+			grid-template-columns: 70% 15% 15%;
+		}
+		.tr3{
+			grid-template-columns: 70% 15% 15%;
+		}
+		.end-item{
+			&:first-child{
+				border-bottom:0;
+			}
+			border-top:1rpx solid #ccc;
+		}
+	}
+	.selection {
+		.list {
+			margin: 25rpx 0;
+		}
+	}
+</style>

pages/Match/compontent/Career.vue

@@ -0,0 +1,423 @@
+<template>
+	<view class="career">
+		<view class="select font32" @click="seletIndex=0,show = true">
+			{{popupList[0][check1]}}
+		</view>
+
+		<view class="title flex">
+			<!-- Performance -->
+				{{ $t('match.lab8') }}
+			<view class="title-select font24" @click="seletIndex=1,show = true">
+				{{popupList[1][check2]}}
+			</view>
+		</view>
+		<view class="career-list flex">
+			<view class="li" v-for="(item,index) in list" :key="index">
+				<text class="font24">{{item.title}}</text>
+				<view class="">
+					{{item.value || 0}}
+				</view>
+			</view>
+		</view>
+		<u-gap height="24" bgColor="#E5E5E5"></u-gap>
+		<view class="title flex">
+			<!-- Recent ODI Matches -->
+				{{ $t('match.lab9') }}
+		</view>
+		<view class="" style="padding: 0 26rpx;">
+			<view class="table-item-content-th th2">
+				<text class="size24 c9">
+					<!-- MATCHES -->
+				{{ $t('match.lab3') }}
+				</text>
+				<text class="size24 c9">
+					<!-- BAT -->
+				{{ $t('match.lab4') }}
+				</text>
+				<text class="size24 c9">
+					<!-- BOWL -->
+				{{ $t('match.lab5') }}
+				</text>
+				<text class="size24 c9">
+					<!-- FORMAT -->
+				{{ $t('match.lab6') }}
+				</text>
+			</view>
+			<view class="table-item-content-tr tr2" v-for="(item,index) in info.matches" :key="index">
+				
+				<view class="size28">
+					<text>{{item.match_home_name}}</text>
+					<!-- <text>{{item.match_time}}</text> -->
+				</view>
+				<text class="size24 c6">{{item.bat}}</text>
+				<text class="size24 c6 overflow1">{{item.bowl}}</text>
+				<text class="size24 c6">{{item.type}}</text>
+			</view>
+		</view>
+		
+		<u-popup :show="show" mode="center" :closeable="true" bgColor="transparent" @close="show=false">
+			<view class="poput">
+				<view class="poput-li font32" v-for="(item,index) in popupList[seletIndex]"
+					@click="setCheck(seletIndex,index)" :key="index">
+					{{item}}
+				</view>
+			</view>
+		</u-popup>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				id: 0,
+				check1: 0,
+				check2: 0,
+				seletIndex: 0,
+				show: false,
+				popupList: [
+					[ 'ODI', 'T20I', 'T20',this.$t('match.lab10')],
+					[this.$t('match.lab11'), this.$t('match.lab12'), this.$t('match.lab13')]
+				],
+				list:[],
+				info:{}
+			}
+		},
+		watch:{
+			check2(e) {
+				this.setArr(this.popupList[this.seletIndex][e])
+			},
+			check1(e) {
+				this.check2 = 0;
+				this.getInfo(this.id)
+			}
+		},
+		methods: {
+			setCheck(type, i) {
+				this['check' + (type + 1)] = i;
+				this.show = false
+				// this.$forerUpdate()
+			},
+			getInfo(id) {
+				this.id = id;
+				// this.id
+				uni.$u.http.post('/api/CricketPlayer/get_player_career', {
+					player_id: this.id,
+					type: this.popupList[0][this.check1]
+				}).then(res => {
+					this.info = res;
+					
+					// let obj = this.info[this.check2 == 0?'batting':this.check2 == 1?'bowling':'fielding']
+					let {
+						matches,
+						innings,
+						balls_faced,
+						not_outs,
+						runs,
+						average,
+						strike_rate,
+						hundreds,
+						fifties,
+						fours,
+						sixes,
+						economy,
+						four_wicket_hauls,
+						five_wicket_hauls,
+						catches,
+						stumpings,
+						runouts,
+					} = res[this.check2 == 0?'batting':this.check2 == 1?'bowling':'fielding']
+					this.list = [{
+								title: this.$t('match.lab3'),
+								value: matches
+							},
+							{
+								title: this.$t('match.lab14'),
+								value: innings
+							},
+							{
+								title: this.$t('match.lab15'),
+								value: runs
+							},
+							{
+								title: this.$t('match.lab16'),
+								value: balls_faced
+							},
+							{
+								title: this.$t('match.lab17'),
+								value: average
+							},
+							{
+								title: this.$t('match.lab18'),
+								value: strike_rate
+							},
+							{
+								title: this.$t('match.lab19'),
+								value: not_outs
+							},
+							{
+								title: '100s',
+								value: hundreds
+							},
+							{
+								title: '50s',
+								value: fifties
+							},
+							{
+								title: '6s',
+								value: sixes
+							},
+							{
+								title: '4s',
+								value: fours
+							}
+						]
+						console.log(this.list);
+					
+				}).catch(res => {})
+			},
+			setArr (type) {
+				let obj = this.info[this.check2 == 0?'batting':this.check2 == 1?'bowling':'fielding']
+				console.log(obj);
+				let {
+					matches,
+					innings,
+					balls_faced,
+					not_outs,
+					runs,
+					average,
+					strike_rate,
+					hundreds,
+					fifties,
+					fours,
+					sixes,
+					economy,
+					four_wicket_hauls,
+					five_wicket_hauls,
+					catches,
+					stumpings,
+					runouts,
+				} = obj
+				// return
+				
+				
+				let arr = []
+				
+				if(this.check2 == 0) {
+					this.list = [{
+							title: this.$t('match.lab3'),
+							value: matches
+						},
+						{
+							title: this.$t('match.lab14'),
+							value: innings
+						},
+						{
+							title: this.$t('match.lab15'),
+							value: runs
+						},
+						{
+							title: this.$t('match.lab16'),
+							value: balls_faced
+						},
+						{
+							title: this.$t('match.lab17'),
+							value: average
+						},
+						{
+							title: this.$t('match.lab18'),
+							value: strike_rate
+						},
+						{
+							title: this.$t('match.lab19'),
+							value: not_outs
+						},
+						{
+							title: '100s',
+							value: hundreds
+						},
+						{
+							title: '50s',
+							value: fifties
+						},
+						{
+							title: '6s',
+							value: sixes
+						},
+						{
+							title: '4s',
+							value: fours
+						}
+					];
+				}else if(this.check2 == 1) {
+					this.list = [
+				
+						{
+							title: this.$t('match.lab3'),
+							value: matches
+						},
+						{
+							title: this.$t('match.lab14'),
+							value: innings
+						},
+						{
+							title: this.$t('match.lab15'),
+							value: runs
+						},
+						// {
+						// 	title: this.$t('match.lab16'),
+						// 	value: balls_bowled
+						// },
+						{
+							title: this.$t('match.lab17'),
+							value: average
+						},
+						{
+							title: this.$t('match.lab18'),
+							value: strike_rate
+						},
+						{
+							title: this.$t('match.lab20'),
+							value: economy
+						},
+						{
+							title: '4s',
+							value: four_wicket_hauls
+						},
+						{
+							title: '5s',
+							value: five_wicket_hauls
+						}
+				
+					]
+				}else if(this.check2 == 2) {
+					this.list = [
+						{
+							title: this.$t('match.lab21'),
+							value: catches
+						},
+						{
+							title: this.$t('match.lab22'),
+							value: stumpings
+						},
+						{
+							title: this.$t('match.lab23'),
+							value: runouts
+						}
+					]
+				}
+				
+				// console.log(this.list);
+			}
+		},
+	}
+</script>
+
+<style lang="scss">
+	.career {
+		padding: 28rpx 0;
+	}
+
+	.title {
+		padding-top: 36rpx ;
+		margin: 0 26rpx;
+		font-size: 32rpx;
+		font-weight: bold;
+		.title-select {
+			color: #999;
+			border-radius: 10rpx;
+			padding: 9rpx 25rpx;
+			background-color: #E5E5E5;
+		}
+	}
+
+	.select {
+		margin: 0 26rpx;
+		font-weight: bold;
+		padding: 18rpx 24rpx;
+		border-radius: 10rpx;
+		border: 2rpx solid #CCC;
+	}
+
+	.career-list {
+		flex-wrap: wrap;
+		padding: 0 26rpx;
+		padding-bottom: 40rpx;
+		&::after {
+			content: '';
+			width: calc(100% / 4);
+		}
+
+		.li {
+
+			width: calc(100% / 4);
+			margin-top: 36rpx;
+
+			text {
+				color: #999;
+
+			}
+
+			view {
+				color: #333;
+				font-weight: bold;
+			}
+		}
+	}
+
+	.poput {
+		width: 400rpx;
+		padding: 40rpx;
+		height: 400rpx;
+		border-radius: 20rpx;
+		background-color: #fff;
+
+		.poput-li {
+			margin-top: 30rpx;
+		}
+	}
+	
+	.table-item-content-th{
+		height: 50rpx;
+		background: #CCCCCC;
+		border-radius: 10rpx;
+		display: grid;
+		grid-template-columns: 40% 10% 10% 10% 10% 20%;
+		grid-template-rows:50rpx;
+		min-height: 50rpx;
+		padding-left: 24rpx;
+		line-height: 50rpx;
+	}
+	.table-item-content-tr{
+		display: grid;
+		grid-template-columns: 40% 10% 10% 10% 10% 20%;
+		// grid-template-rows:121rpx;
+		padding: 24rpx 0 24rpx 24rpx;
+		border-bottom:1rpx solid #ccc;
+		&:last-child{
+			border-bottom:0;
+		}
+		
+	}
+	
+	.th2{
+		grid-template-columns: 25% 25% 25% 25%;
+		margin-top: 24rpx;
+	}
+	.tr2{
+		grid-template-columns: 25% 25% 25% 25%;
+	}
+	.th3{
+		margin-top: 24rpx;
+		grid-template-columns: 70% 15% 15%;
+	}
+	.tr3{
+		grid-template-columns: 70% 15% 15%;
+	}
+	.end-item{
+		&:first-child{
+			border-bottom:0;
+		}
+		border-top:1rpx solid #ccc;
+	}
+</style>

pages/Match/compontent/Info.vue

@@ -0,0 +1,504 @@
+<template>
+	<view class="Info">
+		<view class="selection">
+			<div class="title">
+				<!-- Tournament -->
+				{{ $t('live.lab2') }}
+			</div>
+			<view class="list">
+				<u-row justify="space-between" @click="$toUrl(`/pages/Match/match-list?id=${matchDetail.tournament_id}&title=${detail_info.tournament_name}&type=${detail_info.type}`)">
+					<view class="selection-info">
+						<view class="flex-start">
+							<text class="size28 c3 Bold">
+								{{detail_info.tournament_name}}
+							</text>
+						</view>
+					</view>
+					<image src="/static/image/match/[email protected]" mode="heightFix" class="detail-right"></image>
+				</u-row>
+			</view>
+		</view>
+		<view class="selection">
+			<text class="title">
+				<!-- Teams -->
+				{{ $t('live.lab1') }}
+			</text>
+			<view class="list">
+				<u-row justify="space-between" @click="$toUrl(`/pages/Match/teams/teams?id=${detail_info.home_id}&title=${detail_info.home_name}`)">
+					<view class="selection-info">
+						<image :src="detail_info.home_logo || '/static/image/common/team.png'" mode="aspectFit" class="mg-rt24"></image>
+						<view class="flex-start">
+							<text class="size28 c3 Bold">
+								{{detail_info.home_name}}
+							</text>
+							<view class="mg-tp8">
+								<!-- <text class="c6 size24 bgE5">TOSS</text> -->
+								<!-- <text class="size26 c4">
+									{{detail_info.home_member}}
+								</text> -->
+							</view>
+						</view>
+					</view>
+					<image src="/static/image/match/[email protected]" mode="heightFix" class="detail-right"></image>
+				</u-row>
+				<u-row justify="space-between" @click="$toUrl(`/pages/Match/teams/teams?id=${detail_info.away_id}&title=${detail_info.away_name}`)">
+					<view class="selection-info">
+						<image :src="detail_info.away_logo || '/static/image/common/team.png'" mode="aspectFit" class="mg-rt24"></image>
+						<view class="flex-start">
+							<text class="size28 c3 Bold">
+								{{detail_info.away_name}}
+							</text>
+							<view class="mg-tp8">
+								<!-- <text class="c6 size24 bgE5">TOSS</text> -->
+								<!-- <text class="size26 c4">
+									{{detail_info.away_member}}
+								</text> -->
+							</view>
+						</view>
+					</view>
+					<image src="/static/image/match/[email protected]"  mode="heightFix" class="detail-right"></image>
+				</u-row>
+			</view>
+		</view>
+		<view class="selection">
+			<text class="title">
+				<!-- Match Details -->
+				{{ $t('live.lab3') }}
+			</text>
+			<view class="list">
+				<view class="list-item">
+					<text class="label">
+						<!-- Match -->
+					{{ $t('live.lab4') }}
+					</text>
+					<view class="content">
+						{{detail_info.match}}
+					</view>
+				</view>
+				<view class="list-item">
+					<text class="label">
+						<!-- Match Start Time -->
+					{{ $t('live.lab5') }}
+					</text>
+					<view class="content">
+						{{detail_info.match_start_time}}
+					</view>
+				</view>
+				<view class="list-item" v-if="detail_info.venue_name">
+					<text class="label">
+						<!-- Stadium/Venue -->
+					{{ $t('live.lab6') }}
+					</text>
+					<view class="content cDE9">
+						{{detail_info.venue_name || '-'}}
+					</view>
+				</view>
+				<view class="list-item">
+					<text class="label">
+						<!-- Toss -->
+					{{ $t('live.lab57') }}
+					</text>
+					<view class="content">
+						{{detail_info.toss || '-'}}
+					</view>
+				</view>
+				<!-- <view class="list-item">
+					<text class="label">Match Officials</text>
+					<view class="content">
+						Hassan Adnan (On Field),Richard Kettleborough
+						(On Field),Wayne Noon (referee)
+					</view>
+				</view> -->
+			</view>
+		</view>
+		<view class="selection">
+			<text class="title">
+				<!-- Playing XI -->
+				{{ $t('live.lab7') }}
+			</text>
+			<view class="list">
+				<view class="list-item">
+					<text class="label">{{detail_info.home_name}}</text>
+					<view class="content1">
+						{{detail_info.home_member}}
+					</view>
+				</view>
+				<view class="list-item">
+					<text class="label">{{detail_info.away_name}}</text>
+					<view class="content1">
+						{{detail_info.away_member}}
+					</view>
+					<view class="full">
+						<!-- View Full Squad Info -->
+					{{ $t('live.lab8') }}
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="flex-end selection-table-title">
+			<text class="label">
+				<!-- Updated 12 hrs ago -->
+			{{ $t('live.lab9') }}
+			</text>
+		</view>
+		<view class="selection-table">
+			<view >
+				<!-- 表头行 -->
+				<u-row class="tr-header">
+					<view class="text-center">#</view>
+					<view class="text-center">
+						<!-- TEAM -->
+					{{ $t('live.lab25') }}
+					</view>
+					<view class="text-center">P</view>
+					<view class="text-center">W</view>
+					<view class="text-center">L</view>
+					<view class="text-center">NR</view>
+					<view class="text-center">NRR</view>
+					<view class="text-center">PTS</view>
+				</u-row>
+				
+				<!-- 表格数据行 -->
+				<view v-for="(item,index) in tournament_list" :key="index" :class="{actives:acIndex == index}">
+					<u-line color="#CCCCCC"></u-line>
+					<u-row @click="clickItem(index)">
+						<view class="trc6">{{index+1}}</view>
+						<view class="trc3">{{item.competitor || 0}}</view>
+						<view class="trc6">{{item.p || 0}}</view>
+						<view class="trc6">{{item.w || 0}}</view>
+						<view class="trc6">{{item.l || 0}}</view>
+						<view class="trc6">{{item.nr || 0}}</view>
+						<view class="trc6">{{item.nrr || 0}}</view>
+						<view>
+							<view class="flex pts">
+								<text class="trc3 size28 mg-rt30 Bold"> {{item.pts}} </text>
+								<image src="/static/image/match/expert_down_ico.png" mode="aspectFill"></image>
+							</view>
+						</view>
+					</u-row>
+					
+					<view class="table-item-content" :class="{'active': acIndex==index}">
+						<view class="table-item-content-th">
+							<text class="label">
+							{{ $t('live.lab10') }}
+							</text>
+							<text class="label">
+							{{ $t('live.lab11') }}
+							</text>
+							<text class="label">
+							{{ $t('live.lab12') }}
+							</text>
+							<text class="label">
+							{{ $t('live.lab13') }}
+							</text>
+						</view>
+						<view class="table-item-content-tr" v-for="(item1,index1) in item.match" :key="index1">
+							<text class="td">{{item1.competitor}}</text>
+							<text class="td1">{{item1.date}}</text>
+							<text class="td1">{{item1.venue_name}}</text>
+							<text class="td1 overflow1" :class="classFilter(item1.winner) == 1">{{item1.match_result}}</text>
+						</view>
+					</view>
+				</view>
+			</view>
+			<u-empty
+				v-if="tournament_list.length == 0"
+				mode="data"
+				width="474"
+				height="312"
+				textSize="28"
+				marginTop="100"
+				:text="$t('common.nodata')"
+				icon="/static/image/common/nodata.png"
+			>
+			</u-empty>
+		</view>
+		
+		<view class="selection" style="margin-top: 20rpx;">
+			<view class="title">
+				{{ $t('live.lab14') }}
+			</view>
+			<view class="li">
+				<text class="D4199">#:</text>
+				{{ $t('live.lab15') }}
+			</view>
+			<view class="li">
+				<text class="D4199">
+					{{ $t('live.lab16') }}:</text>
+				{{ $t('live.lab17') }}
+			</view>
+			<view class="li">
+				<text class="D4199">P:</text>
+				{{ $t('live.lab18') }}
+			</view>
+			<view class="li">
+				<text class="D4199">W:</text>
+				{{ $t('live.lab19') }}
+			</view>
+			<view class="li">
+				<text class="D4199">D:</text>
+				{{ $t('live.lab20') }}
+			</view>
+			<view class="li">
+				<text class="D4199">L:</text>
+				{{ $t('live.lab21') }}
+			</view>
+			<view class="li">
+				<text class="D4199">NR:</text>
+				{{ $t('live.lab22') }}
+			</view>
+			<view class="li">
+				<text class="D4199">NRR:</text>
+				{{ $t('live.lab23') }}
+			</view>
+			<view class="li">
+				<text class="D4199">PTS:</text>
+				{{ $t('live.lab24') }}
+			</view>
+			<!-- <view class="li">
+				<text class="cfff qqs">Q</text>:
+				{{ $t('live.lab24') }}
+			</view> -->
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+      matchDetail: {
+        default: {}
+      }
+    },
+		data() {
+			return {
+				acIndex:null,
+				detail_info:{},
+				tournament_list:[]
+			}
+		},
+    created() {
+      this.cricket_tournament_standings()
+      this.cricket_match_detail_info()
+    },
+		methods:{
+			clickItem(index){
+				console.log('index :>> ', index);
+				this.acIndex=(this.acIndex==index?null:index)
+				console.log(this.acIndex);
+			},
+			/* 积分	 */
+			cricket_tournament_standings() {
+				uni.$u.http.post('/api/Cricket/cricket_tournament_standings',{
+          tournament_id: this.matchDetail.tournament_id
+        }).then(res=>{
+					this.tournament_list = res;
+				}).catch(res=>{})
+			},
+			/* 详情 */
+			cricket_match_detail_info() {
+				let time = new Date();
+				let timeZone = time.toLocaleTimeString('en-us',{timeZoneName:'short'});  //'1:12:38 PM GMT+8'
+				let timeZoneId = Intl.DateTimeFormat().resolvedOptions().timeZone; //'Asia/Shanghai'
+				uni.$u.http.post('/api/Cricket/cricket_match_detail_info',{
+          match_id: this.matchDetail.match_id,
+          timezone: timeZoneId
+        }).then(res=>{
+					this.detail_info = res;
+				}).finally(() => {
+        })
+			},
+			classFilter(key) {
+				return key == 1 ? 'c430' : key == 2 ? 'cC23' : 'c666'
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.Info{
+		padding: 12px 15rpx;
+		.selection{
+			background-color: #fff;
+			margin-bottom: 10px;
+			border-radius: 5px;
+			overflow: hidden;
+			.title {
+				line-height: 33px;
+				background-color: rgba(16, 5, 74, .1);
+				padding: 0 28rpx;
+				font-size: 17px;
+				font-weight: 700;
+				color: #242424;
+				display: block;
+			}
+			.list{
+				padding: 0 28rpx;
+				.u-row{
+					padding: 36rpx 0;
+					border-bottom: 1rpx solid #ccc;
+					&:last-child{
+						border: none;
+					}
+					.selection-info{
+						display: flex;
+						image{
+							width: 80rpx;
+							height: auto;
+						}
+					}
+					.detail-right{
+						width: 48rpx;
+						height: 48rpx;
+					}
+				}
+				
+				.list-item{
+					padding: 24rpx 0;
+					&+.list-item {
+						border-top: 1rpx solid #d1d1d1;
+					}
+				}
+			}
+			.label {
+				font-size: 12px;
+				color: #939292;
+			}
+			.content {
+				font-size: 17px;
+				color: #242424;
+				&.cDE9 {
+					color: #0C52D2;
+				}
+			}
+			.content1 {
+				font-size: 15px;
+				color: #242424;
+			}
+			.full {
+				font-size: 15px;
+				font-weight: 700;
+				color: #ff3300;
+				text-align: center;
+				padding-top: 25px;
+				padding-bottom: 8px;
+			}
+		}
+		.selection-table-title{
+			padding: 36rpx 28rpx 36rpx 0;
+		}
+		.selection-table{
+			background-color: #fff;
+			border-radius: 5px;
+			overflow: hidden;
+			.tr-header{
+				background-color: rgba(16, 5, 74, .1);
+				color: #484A4D;
+				font-size: 12px;
+			}
+			.pts{
+				image{
+					width: 19rpx;
+					height: 19rpx;
+					transition: all 0.5s ease;
+				}
+			}
+			.u-row{
+				display: grid;
+				grid-template-columns: 10% 15% 10% 10% 10% 10% 20% 10%;
+				grid-template-rows:74rpx;
+				transition: all 0.5s ease;
+				font-size: 12px;
+			}
+			.trc6{
+				color: #666;
+				text-align: center;
+			}
+			.trc3{
+				color: #333;
+				text-align: center;
+			}
+			.table-item-content{
+				height: 0rpx;
+				overflow: hidden;
+				line-height: 66rpx;
+				transition: all 0.5s ease;
+				height: 0;
+				&.active {
+					height: 100%;
+					padding: 24rpx 28rpx 0;
+				}
+				.table-item-content-th{
+					height: 27px;
+					background: rgba(16, 5, 74, .1);
+					border-radius: 10rpx;
+					display: grid;
+					grid-template-columns: 15% 20% 25% 40%;
+					grid-template-rows:27px;
+					padding-left: 24rpx;
+					color: #505255;
+					align-items: center;
+					font-size: 12px;
+				}
+				.table-item-content-tr{
+					display: grid;
+					grid-template-columns: 15% 20% 25% 40%;
+					grid-template-rows:70rpx;
+					min-height: 70rpx;
+					padding-left: 24rpx;
+				}
+				.td {
+					font-size: 14px;
+					color: #282828;
+				}
+				.td1 {
+					font-size: 12px;
+					color: #5A5C5F;
+				}
+			}
+			.actives{
+				.u-row{
+					background-color: #1D2550;
+				}
+				.trc6{
+					color: #999;
+				}
+				.trc3{
+					color: #fff;
+				}
+				.pts{
+					image{
+						transform: rotateZ(180deg);
+					}
+				}
+				// .table-item-content{
+				// 	height: max-content;
+				// }
+			}
+		}
+		.li {
+			font-size: 14px;
+			font-weight: 400;
+			text-align: left;
+			color: #242424;
+			line-height: 1;
+			display: flex;
+			align-items: center;
+			height: 39px;
+			.D4199 {
+				color: #4D4199;
+				display: inline-block;
+				width: 50px;
+				text-align: right;
+				padding-right: 19px;
+			}
+		}
+		.qqs{
+			font-size: 28rpx;
+			background-color: #EEA831;
+			display: inline-block;
+			padding: 0 8rpx;
+			border-radius: 100rpx;
+		}
+	}
+</style>

pages/Match/compontent/Points.vue

@@ -0,0 +1,229 @@
+<template>
+	<view class="">
+		<view class="selection-table">
+			<view >
+				<!-- 表头行 -->
+				<u-row class="tr-header">
+					<view class="text-center">#</view>
+					<view class="text-center">
+						<!-- TEAM -->
+					{{ $t('live.lab25') }}
+					</view>
+					<view class="text-center">P</view>
+					<view class="text-center">W</view>
+					<view class="text-center">L</view>
+					<view class="text-center">NR</view>
+					<view class="text-center">NRR</view>
+					<view class="text-center">PTS</view>
+				</u-row>
+				
+				<!-- 表格数据行 -->
+				<view v-for="(item,index) in tournament_list" :key="index" :class="{actives:acIndex == index}">
+					<u-line color="#CCCCCC"></u-line>
+					<u-row @click="clickItem(index)">
+						<view class="trc6">{{(index + 1) || 0}}</view>
+						<view class="trc3">{{item.competitor || 0}}</view>
+						<view class="trc6">{{item.p || 0}}</view>
+						<view class="trc6">{{item.w || 0}}</view>
+						<view class="trc6">{{item.l || 0}}</view>
+						<view class="trc6">{{item.nr || 0}}</view>
+						<view class="trc6">{{item.nrr || 0}}</view>
+						<view>
+							<view class="pts">
+								<text class="trc3 size28 Bold"> {{item.pts}} </text>
+								<image src="../../../static/image/match/expert_down_ico.png" mode="aspectFill"></image>
+							</view>
+						</view>
+					</u-row>
+					
+					<view class="table-item-content" :style="{height:acIndex==index?'100%':0}">
+						<view class="table-item-content-th">
+							<text class="size24 c9">
+							{{ $t('live.lab10') }}
+							</text>
+							<text class="size24 c9">
+							{{ $t('live.lab11') }}
+							</text>
+							<text class="size24 c9">
+							{{ $t('live.lab12') }}
+							</text>
+							<text class="size24 c9">
+							{{ $t('live.lab13') }}
+							</text>
+						</view>
+						<view class="table-item-content-tr" v-for="(item1,index1) in item.match" :key="index1">
+							<text class="size24 c3">{{item1.competitor}}</text>
+							<text class="size24 c6">{{item1.date}}</text>
+							<text class="size24 c6">{{item1.venue_name}}</text>
+							<text class="size24  overflow1" :class="item1.winner == 1?'c430':item1.winner == 2?'cC23':'c666'">{{item1.match_result}}</text>
+						</view>
+					</view>
+				</view>
+			
+			</view>
+			<u-empty
+				v-if="tournament_list && tournament_list.length == 0"
+				mode="data"
+				width="474"
+				height="312"
+				textSize="28"
+				marginTop="100"
+				:text="$t('common.nodata')"
+				icon="/static/image/common/nodata.png"
+			>
+			</u-empty>
+		</view>
+		
+		<view class="mng-tp60 pd-lt28 pd-rt28 pd-bt110" style="margin-top: 20rpx;">
+			<view class="pd20 pd-lt24 bgE5 mg-bt12 c9">
+				{{ $t('live.lab14') }}
+			</view>
+			<view class="mg-tp24 mg-bt24 size28 c6">
+				<text class="c3 Bold mg-rt23">#:</text>
+				{{ $t('live.lab15') }}
+			</view>
+			<view class="mg-tp24 mg-bt24 size28 c6">
+				<text class="c3 Bold mg-rt23">{{ $t('live.lab16') }}:</text>
+				{{ $t('live.lab17') }}
+			</view>
+			<view class="mg-tp24 mg-bt24 size28 c6">
+				<text class="c3 Bold mg-rt23">P:</text>
+				{{ $t('live.lab18') }}
+			</view>
+			<view class="mg-tp24 mg-bt24 size28 c6">
+				<text class="c3 Bold mg-rt23">W:</text>
+				{{ $t('live.lab19') }}
+			</view>
+			<view class="mg-tp24 mg-bt24 size28 c6">
+				<text class="c3 Bold mg-rt23">D:</text>
+				{{ $t('live.lab20') }}
+			</view>
+			<view class="mg-tp24 mg-bt24 size28 c6">
+				<text class="c3 Bold mg-rt23">L:</text>
+				{{ $t('live.lab21') }}
+			</view>
+			<view class="mg-tp24 mg-bt24 size28 c6">
+				<text class="c3 Bold mg-rt23">NR:</text>
+				{{ $t('live.lab22') }}
+			</view>
+			<view class="mg-tp24 mg-bt24 size28 c6">
+				<text class="c3 Bold mg-rt23">NRR:</text>
+				{{ $t('live.lab23') }}
+			</view>
+			<view class="mg-tp24 mg-bt24 size28 c6">
+				<text class="c3 Bold mg-rt23">PTS:</text>
+				{{ $t('live.lab24') }}
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				status:'more',
+				acIndex:null,
+				tournament_list:[]
+			}
+		},
+		methods:{
+			clickItem(index){
+				console.log('index :>> ', index);
+				this.acIndex=(this.acIndex==index?null:index)
+				console.log(this.acIndex);
+			},
+			cricket_tournament_standings(id) {
+				uni.$u.http.post('/api/Cricket/cricket_tournament_standings',{tournament_id:id}).then(res=>{
+					this.tournament_list = res;
+					if(res.length == 0) {
+						this.status = 'noMore'
+					}
+				}).catch(res=>{})
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	.selection-table{
+		
+		.selection-table-title{
+			padding: 36rpx 28rpx 36rpx 0;
+		}
+		
+		.tr-header{
+			background-color: #ccc;
+			color: #999;
+		}
+		.pts{
+			display: flex;
+			align-items: center;
+			justify-content: flex-end;
+			column-gap: 16rpx;
+			image{
+				width: 19rpx;
+				height: 19rpx;
+				transition: all 0.5s ease;
+			}
+		}
+		.u-row{
+			display: grid;
+			grid-template-columns: 10% 15% 10% 10% 10% 10% 20% 12%;
+			grid-template-rows:90rpx;
+			transition: all 0.5s ease;
+		}
+		.trc6{
+			color: #666;
+			text-align: center;
+		}
+		.trc3{
+			color: #333;
+			text-align: center;
+		}
+		.table-item-content{
+			height: 0rpx;
+			padding: 24rpx 28rpx 0;
+			overflow: hidden;
+			line-height: 70rpx;
+			transition: all 0.5s ease;
+			background-color: #E5E5E5;
+			.table-item-content-th{
+				height: 50rpx;
+				background: #CCCCCC;
+				border-radius: 10rpx;
+				display: grid;
+				grid-template-columns: 15% 20% 25% 40%;
+				grid-template-rows:70rpx;
+				min-height: 70rpx;
+				padding-left: 24rpx;
+			}
+			.table-item-content-tr{
+				display: grid;
+				grid-template-columns: 15% 20% 25% 40%;
+				grid-template-rows:70rpx;
+				min-height: 70rpx;
+				padding-left: 24rpx;
+			}
+		}
+		.actives{
+			.u-row{
+				background-color: #1D2550;
+			}
+			.trc6{
+				color: #999;
+			}
+			.trc3{
+				color: #fff;
+			}
+			.pts{
+				image{
+					transform: rotateZ(180deg);
+				}
+			}
+			// .table-item-content{
+			// 	height: max-content;
+			// }
+		}
+	}
+</style>

pages/Match/compontent/Post.vue

@@ -0,0 +1,153 @@
+<template>
+	<view class="post">
+		<view class="post-image">
+			<view class="post-name flex-start">
+				<image src="../../../static/image/match/touxiang.png" mode=""></image>
+				<view style="margin-left: 18rpx;">
+					<view class="font32 c3">Fat Li</view>
+					<view class="font24 c9">Before January</view>
+				</view>
+			</view>
+			<view class="c3 font28 post-text">
+				7: 30 and 10:30 two NBA playoffs, locked fat ,This is
+				the live broadcast room.
+			</view>
+			<view class="post-img flex-around">
+				<image src="../../../static/image/match/post_img_1.png" mode=""></image>
+				<image src="../../../static/image/match/post_img_1.png" mode=""></image>
+				<image src="../../../static/image/match/post_img_1.png" mode=""></image>
+				<image src="../../../static/image/match/post_img_1.png" mode=""></image>
+				<image src="../../../static/image/match/post_img_1.png" mode=""></image>
+				<image src="../../../static/image/match/post_img_1.png" mode=""></image>
+				<image src="../../../static/image/match/post_img_1.png" mode=""></image>
+				<image src="../../../static/image/match/post_img_1.png" mode=""></image>
+				<image src="../../../static/image/match/post_img_2.png" mode=""></image>
+			</view>
+			<view class="post-share flex">
+				<view class="post-icon">
+					<image src="../../../static/image/match/post-share.png" mode=""></image>
+					<text class="font24 c9">Share</text>
+				</view>
+				<view class="post-icon">
+					<image src="../../../static/image/match/post-comment.png" mode=""></image>
+					<text class="font24 c9">1562</text>
+				</view>
+				<view class="post-icon">
+					<image src="../../../static/image/match/post-fabulous.png" mode=""></image>
+					<text class="font24 c9">886</text>
+				</view>
+			</view>
+		</view>
+		
+		<view class="post-image">
+			<view class="post-name flex-start">
+				<image src="../../../static/image/match/touxiang.png" mode=""></image>
+				<view style="margin-left: 18rpx;">
+					<view class="font32 c3">Fat Li</view>
+					<view class="font24 c9">Before January</view>
+				</view>
+			</view>
+			<view class="c3 font28 post-text">
+				7: 30 and 10:30 two NBA playoffs, locked fat ,This is
+				the live broadcast room.
+			</view>
+			<view class="post-video">
+				<image src="../../../static/image/match/post-play.png" mode="" class="post-play"></image>
+				<image src="../../../static/image/match/post-close.png" mode="" class="post-close"></image>
+			</view>
+			<view class="post-share flex">
+				<view class="post-icon">
+					<image src="../../../static/image/match/post-share.png" mode=""></image>
+					<text class="font24 c9">Share</text>
+				</view>
+				<view class="post-icon">
+					<image src="../../../static/image/match/post-comment.png" mode=""></image>
+					<text class="font24 c9">1562</text>
+				</view>
+				<view class="post-icon">
+					<image src="../../../static/image/match/post-fabulous.png" mode=""></image>
+					<text class="font24 c9">886</text>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+
+	}
+</script>
+
+<style lang="scss">
+	.post {
+		padding-left: 25rpx;
+		padding-right: 25rpx;
+
+		.post-image {
+			background-color: #fff;
+			border-radius: 12rpx;
+			padding: 24rpx 20rpx;
+			margin-bottom: 22rpx;
+			.post-name {
+				image {
+					width: 72rpx;
+					height: 72rpx;
+				}
+
+			}
+
+			.post-text {
+				margin-top: 18rpx;
+				margin-bottom: 30rpx;
+				line-height: 40rpx;
+			}
+
+			.post-img {
+				flex-wrap: wrap;
+
+				image {
+					width: 208rpx;
+					height: 208rpx;
+					margin-bottom: 18rpx;
+				}
+
+			}
+			.post-video {
+				position: relative;
+				width: 654rpx;
+				height: 366rpx;
+				background-color: #333;
+				border-radius: 12rpx;
+				margin-bottom: 18rpx;
+				.post-play {
+					position: absolute;
+					top: 50%;
+					left: 50%;
+					transform: translate(-50%, -50%);
+					width: 80rpx;
+					height: 80rpx;
+				}
+				.post-close {
+					position: absolute;
+					bottom: 14rpx;
+					left: 14rpx;
+					width: 48rpx;
+					height: 48rpx;
+				}
+			}
+
+			.post-share {
+				padding: 10rpx 52rpx;
+				.post-icon {
+					image {
+						vertical-align: middle;
+						width: 36rpx;
+						height: 36rpx;
+						margin-right: 6rpx;
+					}
+				}
+			}
+		}
+	}
+</style>

pages/Match/compontent/Scorecard.vue

@@ -0,0 +1,305 @@
+<template>
+	<view class="Scorecard">
+		<view class="list">
+			<view class="list-item" v-for="(item,i) in list" :key="i" :class="{actives:acIndex==i}">
+				<u-row justify="space-between" @click="clickItem(i, item)">
+					<view class="flex">
+						<img class="logo" :src="matchDetail.home_logo || '/static/image/common/team.png'" alt="">
+						<div class="name">{{ item.name }}</div>
+						<text>{{ item.order }}</text>
+					</view>
+					<view class="open-image">
+						<text>{{ formaScore1(item.score) }}</text>
+						<text class="trti">{{ formaScore(item.score) }}</text>
+						<image src="../../../static/image/match/expert_down_ico-black.png" mode="heightFix"></image>
+					</view>
+				</u-row>
+				<view class="list-item-content">
+					<view class="table-item-content-th">
+						<text class="size24 c9">
+							<!-- BATTER -->
+						{{ $t('live.lab26') }}
+						</text>
+						<text class="size24 c9">R</text>
+						<text class="size24 c9">B</text>
+						<text class="size24 c9">4s</text>
+						<text class="size24 c9">6s</text>
+						<text class="size24 c9" style="text-align: right; padding-right: 10px;">S/R</text>
+					</view>
+					<view class="table-item-content-tr" v-for="(item) in obj.batting_info" :key="item.id + 1">
+						<text class="size28 c52">{{item.name}}
+							<br>
+							<text class="size24 a6" style="color: #219430;" v-if="item.batting == 'true'">Batting</text>
+							<text class="size24 a6" v-else>{{item.type}}</text>
+						</text>
+						<text class="size24 c3">{{item.runs || '0'}}</text>
+						<text class="size24 a6">{{item.ball_number || '0'}}</text>
+						<text class="size24 a6 overflow1">{{item.fours || '0'}}</text>
+						<text class="size24 a6">{{item.sixes || '0'}}</text>
+						<text class="size24 a6 overflow1" style="text-align: right;; padding-right: 10px;">{{$common.handleDigits2(item.strike_rate)}}</text>
+					</view>
+					<view class="pd24 flex flex-between end-item">
+						<text class="size28">
+							<!-- EXTRAS -->
+						{{ $t('live.lab27') }}
+						</text>
+						<view>
+							<!-- <text class="size24 c3">8</text> -->
+							<text class="size24">{{obj.extras}}</text>
+						</view>
+					</view>
+					<view class="pd24 flex-start end-item">
+						<text class="size28">
+							<!-- DID NOT BAT -->
+						{{ $t('live.lab28') }}
+							<br> <text class="size28">{{obj.no_batting_name}}</text>
+						</text>
+					</view>
+
+
+					<view class="table-item-content-th th2">
+						<text class="size24 c9">
+							<!-- BOWLER -->
+						{{ $t('live.lab29') }}
+						</text>
+						<text class="size24 c9">O</text>
+						<text class="size24 c9">M</text>
+						<text class="size24 c9">R</text>
+						<text class="size24 c9">W</text>
+						<text class="size24 c9">ER</text>
+					</view>
+					<view class="table-item-content-tr tr2" v-for="(item) in obj.bowling_info" :key="item.id + 2">
+						<text class="size28 c52">{{item.name}}
+						</text>
+						<text class="size24 c6">{{item.overs_bowled || '0'}}</text>
+						<text class="size24 c6">{{item.maidens || '0'}}</text>
+						<text class="size24 a6 overflow1">{{item.runs_conceded || '0'}}</text>
+						<text class="size24 a6">{{item.wides || '0'}}</text>
+						<text class="size24 a6">{{$common.handleDigits2(item.economy_rate)}}</text>
+					</view>
+
+					<view class="table-item-content-th th3">
+						<text class="size24 c9">
+							<!-- FALL OF WICKETS -->
+						{{ $t('live.lab30') }}
+						</text>
+						<text class="size24 c9">
+							<!-- SCORE -->
+						{{ $t('live.lab31') }}
+						</text>
+						<text class="size24 c9">
+							<!-- OVER -->
+						{{ $t('live.lab32') }}
+						</text>
+					</view>
+					<view class="table-item-content-tr tr3" v-for="(item) in obj.partnerships" :key="item.id + 3">
+						<text class="size28 c430">{{item.name}}
+						</text>
+						<text class="size24 c6">{{item.score || '0'}}-{{ item.order }}</text>
+						<text class="size24 a6">{{$common.handleDigits2(item.over)}}</text>
+					</view>
+				</view>
+			</view>
+		</view>
+		<u-empty
+			v-if="list.length == 0"
+			mode="data"
+			width="474"
+			height="312"
+			textSize="28"
+			marginTop="100"
+			:text="$t('common.nodata')"
+			icon="/static/image/common/nodata.png"
+		></u-empty>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: ['matchDetail', 'list'],
+		data() {
+			return {
+				obj: {
+					batting_info: [],
+					partnerships: [],
+					bowling_info: [],
+					no_batting_name: '',
+					extras: '',
+					total: ''
+				},
+				acIndex: null,
+			}
+		},
+		mounted() {
+			if (this.list.length) {
+				this.clickItem(this.list.length - 1, this.list[this.list.length - 1])
+			}
+		},
+		methods: {
+			clickItem(index, item) {
+				// console.log('index :>> ', index);
+				this.acIndex = (this.acIndex == index ? null : index)
+				// console.log(this.acIndex);
+				if (this.acIndex != null) {
+					this.getList(item)
+				}
+
+			},
+			getList(item) {
+				uni.$u.http.post('/api/Cricket/cricket_match_detail_scorecard', {
+					team_id: item.id,
+					id: this.matchDetail.match_id
+				}).then(res => {
+					// console.log(res);
+					this.obj = res
+				}).catch(res => {})
+			},
+			formaScore(v) {
+				if (!v) {
+					return "";
+				}
+				let s = v.replace("）", ")");
+				let index = v.indexOf(")");
+				return s.substring(index+1);
+			},
+			formaScore1(v) {
+				if (!v) {
+					return "";
+				}
+				let s = v.replace("）", ")");
+				let index = v.indexOf(")");
+				return s.substring(0, index+1);
+			},
+		},
+		
+	}
+</script>
+
+<style lang="scss">
+	.Scorecard {
+		padding: 12px 15rpx;
+		.list {
+			background: #ffffff;
+			border-radius: 5px;
+			overflow: hidden;
+			.list-item {
+				&+.list-item {
+					border-top: 1rpx solid #d1d1d1;
+				}
+				.u-row {
+					height: 68px;
+					background: #fff;
+					line-height: 68px;
+					padding: 0 18px;
+					font-size: 13px;
+					color: #999999;
+					.logo {
+						margin-right: 11px;
+						width: 30px;
+					}
+					.name {
+						font-size: 15px;
+						font-weight: 700;
+						color: #242424;
+						margin-right: 7px;
+					}
+					.open-image {
+						display: flex;
+						align-items: center;
+
+						image {
+							transition: all 0.5s ease;
+							width: 19rpx;
+							height: 19rpx;
+							margin-left: 24rpx;
+						}
+					}
+					.trti {
+						color: #333;
+						font-weight: 600;
+					}
+				}
+
+				.list-item-content {
+					height: 0rpx;
+					overflow: hidden;
+					transition: all 0.5s ease;
+
+					.table-item-content-th {
+						height: 27px;
+						background: rgba(16, 5, 74, .1);
+						border-radius: 5px;
+						display: grid;
+						grid-template-columns: 40% 10% 10% 10% 10% 20%;
+						grid-template-rows: 27px;
+						align-items: center;
+						padding-left: 24rpx;
+						color: #505255;
+					}
+
+					.table-item-content-tr {
+						display: grid;
+						grid-template-columns: 40% 10% 10% 10% 10% 20%;
+						// grid-template-rows:121rpx;
+						padding: 24rpx 0 24rpx 24rpx;
+						&+.table-item-content-tr {
+							border-top: 1rpx solid #D1D1D1;
+						}
+						.c52 {
+							color: #0C52D2;
+						}
+						.a6 {
+							color: #A6A6A6;
+						}
+					}
+
+					.th2 {
+						grid-template-columns: 50% 10% 10% 10% 10% 10%;
+						margin-top: 24rpx;
+					}
+
+					.tr2 {
+						grid-template-columns: 50% 10% 10% 10% 10% 10%;
+					}
+
+					.th3 {
+						margin-top: 24rpx;
+						grid-template-columns: 70% 15% 15%;
+					}
+
+					.tr3 {
+						grid-template-columns: 70% 15% 15%;
+					}
+
+					.end-item {
+						&:first-child {
+							border-bottom: 0;
+						}
+
+						border-top:1rpx solid #ccc;
+					}
+				}
+			}
+
+			.actives {
+				.u-row {
+					background-color: #1D2550;
+					color: #fff;
+					.trti,.name {
+						color: #fff;
+					}
+				}
+
+				.open-image {
+					image {
+						transform: rotateZ(180deg);
+					}
+				}
+				.list-item-content {
+					height: inherit;
+					padding: 24rpx 28rpx 0;
+				}
+			}
+		}
+	}
+</style>

pages/Match/compontent/Squad.vue

@@ -0,0 +1,233 @@
+<template>
+	<view class="Squad">
+		<!-- <view class="text-center"> -->
+			<!-- Playing 11 for the Match -->
+			<!-- {{ $t('live.lab33') }} -->
+		<!-- </view> -->
+		<view class="list">
+			<u-row justify="space-between" align="top">
+				<u-col span="6" class="left-list" style="border-right: 2rpx solid #f3f3f3;">
+					<view class="top">
+						<image :src="matchDetail.home_logo || '/static/image/common/team.png'" mode="aspectFit" class="list-pic" style="border-radius: 0;"></image>
+						<view class="size32 c3 Bold" style="text-align: center;">{{matchDetail.home_name}}</view>
+					</view>
+				</u-col>
+				<u-col span="6" class="right-list">
+					<view class="top">
+						<image :src="matchDetail.away_logo || '/static/image/common/team.png'" mode="aspectFit" class="list-pic mg-lt16" style="border-radius: 0;"></image>
+						<view class="size32 c3 Bold" style="text-align: center;">{{matchDetail.away_name}}</view>
+					</view>
+				</u-col>
+			</u-row>
+		</view>
+		<div class="bench">Starters</div>
+		<view class="list">
+			<u-row justify="space-between" align="top">
+				<u-col span="6" class="left-list" style="border-right: 2rpx solid #f3f3f3;">
+					<view class="list-item" v-for="(item,index) in detail_squad[1]" :key="index" @click="$toUrl('./teams/detail?id=' + item.id)">
+						<image :src="item.player_logo || '/static/image/common/[email protected]'" mode="aspectFill" class="list-pic"></image>
+						<view class="content">
+							<view class="size24 c3 Bold overflow1">{{item.player_name}}</view>
+							<view class="size24 c9">{{item.type}}</view>	
+						</view>
+					</view>
+				</u-col>
+				<u-col span="6" class="right-list">
+					<view class="list-item" v-for="(item,index) in detail_squad[0]" :key="index" @click="$toUrl('./teams/detail?id=' + item.id)">
+						<view class="content">
+							<view class="size24 c3 Bold overflow1" style="text-align: right;">{{item.player_name}}</view>
+							<view class="size24 c9" style="text-align: right;">{{item.type}}</view>	
+						</view>
+						<image :src="item.player_logo || '/static/image/common/[email protected]'" mode="aspectFill" class="list-pic"></image>
+					</view>
+				</u-col>
+			</u-row>
+			<u-empty
+				v-if="detail_squad[0] && detail_squad[0].length == 0"
+				mode="data"
+				width="474"
+				height="312"
+				textSize="28"
+				marginTop="100"
+				:text="$t('common.nodata')"
+				icon="/static/image/common/nodata.png"
+			>
+			</u-empty>
+		</view>
+		<div class="bench">Bench</div>
+		<view class="list">
+			<u-row justify="space-between" align="top">
+				<u-col span="6" class="left-list" style="border-right: 2rpx solid #f3f3f3;">
+					<view class="list-item" v-for="(item,index) in detail_bench[1]" :key="index" @click="$toUrl('./teams/detail?id=' + item.id)">
+						<image :src="item.player_logo || '/static/image/common/[email protected]'" mode="aspectFill" class="list-pic"></image>
+						<view class="content">
+							<view class="size24 c3 Bold overflow1">{{item.player_name}}</view>
+							<view class="size24 c9">{{item.type}}</view>	
+						</view>
+					</view>
+				</u-col>
+				<u-col span="6" class="right-list">
+					<view class="list-item" v-for="(item,index) in detail_bench[0]" :key="index" @click="$toUrl('./teams/detail?id=' + item.id)">
+						<view class="content">
+							<view class="size24 c3 Bold overflow1" style="text-align: right;">{{item.player_name}}</view>
+							<view class="size24 c9" style="text-align: right;">{{item.type}}</view>	
+						</view>
+						<image :src="item.player_logo || '/static/image/common/[email protected]'" mode="aspectFill" class="list-pic"></image>
+					</view>
+				</u-col>
+			</u-row>
+			<u-empty
+				v-if="detail_bench[0] && detail_bench[0].length == 0"
+				mode="data"
+				width="474"
+				height="312"
+				textSize="28"
+				marginTop="100"
+				:text="$t('common.nodata')"
+				icon="/static/image/common/nodata.png"
+			>
+			</u-empty>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+      matchDetail: {
+        default: {}
+      }
+    },
+		data() {
+			return {
+				detail_squad: [],
+				detail_bench: [],
+			}
+		},
+    created() {
+      this.cricket_match_detail_squad()
+      this.cricket_match_detail_squad_bench()
+    },
+		methods: {
+			cricket_match_detail_squad() {
+				uni.$u.http.post('/api/Cricket/cricket_match_detail_squad',{
+          match_id: this.matchDetail.match_id,
+          tournament_id: this.matchDetail.tournament_id,
+          away_id: this.matchDetail.away_id,
+        }).then(res=>{
+					
+					// if(res.length == 0) return
+					let detail_squad = [
+						[],
+						[]
+					];
+					res.forEach(item=>{
+						let obj1 = {
+							player_logo:item.away_player_logo,
+							player_name:item.away_player_name,
+							type:item.away_type,
+							id:item.away_player_id
+						}
+						let obj2 = {
+							player_logo:item.home_player_logo,
+							player_name:item.home_player_name,
+							type:item.home_type,
+							id:item.home_player_id
+						}
+						
+						detail_squad[0].push(obj1)
+						detail_squad[1].push(obj2)
+					})
+					this.detail_squad = detail_squad
+				}).catch(res=>{})
+			},
+			cricket_match_detail_squad_bench() {
+				uni.$u.http.post('/api/Cricket/cricket_match_detail_squad_bench',{
+          match_id: this.matchDetail.match_id,
+          tournament_id: this.matchDetail.tournament_id,
+          away_id: this.matchDetail.away_id,
+        }).then(res=>{
+					
+					// if(res.length == 0) return
+					let detail_squad = [
+						[],
+						[]
+					];
+					res.forEach(item=>{
+						if (item.away_player_name) {
+							let obj1 = {
+								player_logo:item.away_player_logo,
+								player_name:item.away_player_name,
+								type:item.away_type,
+								id:item.away_player_id
+							}
+							detail_squad[0].push(obj1)
+						}
+						if (item.home_player_name) {
+							let obj2 = {
+								player_logo:item.home_player_logo,
+								player_name:item.home_player_name,
+								type:item.home_type,
+								id:item.home_player_id
+							}
+							
+							detail_squad[1].push(obj2)
+						}
+					})
+					this.detail_bench = detail_squad
+				}).catch(res=>{})
+			}
+		},
+	}
+</script>
+
+<style lang="scss">
+	.Squad {
+		padding: 19px 0 12px;
+		>.text-center {
+			padding-bottom: 15px;
+			font-size: 18px;
+			font-weight: 700;
+		}
+	}
+	.list{
+		padding: 7px 7px 14px;
+		background-color: #fff;
+		border-radius: 5px;
+		.top {
+			display: flex;
+			align-items: center;
+			flex-direction: column;
+			margin-bottom: 36rpx;
+		}
+		.list-item{
+			margin-bottom: 36rpx;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			column-gap: 18rpx;
+		}
+		.content {
+			flex: 1;
+			min-width: 10%;
+			max-width: 100%;
+		}
+		.right-list{
+			text-align: right;
+		}
+		.list-pic{
+			width: 80rpx;
+			height: 80rpx;
+			border-radius: 50%;
+		}
+	}
+	.bench{
+		text-align: center;
+		line-height: 100rpx;
+		font-size: 32rpx;
+		color: #999;
+		font-weight: bold;
+  	background-color: rgb(251, 251, 252);
+		margin-bottom: 36rpx;
+	}
+</style>

pages/Match/compontent/Teams.vue

@@ -0,0 +1,75 @@
+<template>
+	<view>
+		<view class="stats-main mg-tp12">
+			<view class="stats-main-content">
+				<u-row v-for="(item,index) in tournament_team" :key="index" justify="space-between"  @click="$toUrl('/pages/Match/teams/teams?id=' + item.id + '&title=' + item.name)">
+					<view class="flex-start">
+						<image :src="item.team_logo || '/static/image/common/team.png'" mode="aspectFit" class="avatar"></image>
+						<view>
+							<text class="size32 c3 Bold">{{item.name}}</text>
+							<view class="mg-tp5 size c3">
+								{{item.abbreviation}}
+								 <!-- - <text class="Bold">241</text> -->
+							</view>
+						</view>
+					</view>
+					<image src="/static/image/match/[email protected]" mode="heightFix" class="arrow-right"></image>
+				</u-row>
+				<u-empty
+					v-if="tournament_team && tournament_team.length == 0"
+					mode="data"
+					width="474"
+					height="312"
+					textSize="28"
+					marginTop="100"
+					:text="$t('common.nodata')"
+					icon="/static/image/common/nodata.png"
+				>
+				</u-empty>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data(){
+			return{
+				status:'more',
+				tournament_team:[]
+			}
+		},
+		methods:{
+			/* 获取团队列表 */
+			get_tournament_team(id) {
+				uni.$u.http.post('/api/Cricket/get_tournament_team',{tournament_id:id}).then(res=>{
+					this.tournament_team = res
+					if(res.length == 0) {
+						this.status = 'noMore'
+					}
+				}).catch(res=>{})
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.stats-main{
+		.stats-main-content{
+			background: #FFFFFF;
+			.u-row{
+				border-bottom: 1rpx solid #E5E5E5;
+				padding: 24rpx 28rpx;
+				.avatar{
+					width: 90rpx;
+					height: 90rpx;
+					margin-right: 16rpx;
+				}
+				.arrow-right{
+					width: 48rpx;
+					height: 48rpx;
+				}
+			}
+		}
+	}
+</style>

pages/Match/compontent/Updates.vue

@@ -0,0 +1,64 @@
+<template>
+	<view class="Updates">
+		<view class="list">
+			<navigator :url="'/pages/News/news-detail?id='+ item.id" hover-class="none" v-for="(item,index) in list" :key="index" class="list-item">
+				<!-- <view> -->
+					<image :src="item.img" mode="aspectFill" class="mg-rt16 header-image"></image>
+					<view class="msg-info">
+						<text class="overflow2 size28 c3 Bold">{{item.title}}</text>
+						<text class="size24 c9">{{item.addtime}}</text>
+					</view>
+				<!-- </view> -->
+			</navigator>
+			
+			<u-empty
+				v-if="list.length == 0"
+				mode="data"
+				width="474"
+				height="312"
+				textSize="28"
+				marginTop="100"
+				:text="$t('common.nodata')"
+				icon="/static/image/common/nodata.png"
+			>
+			</u-empty>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: ['list'],
+		data() {
+			return {
+			}
+		},
+		
+		methods:{
+		}
+	}
+</script>
+
+<style lang="scss">
+	.Updates{
+		padding: 12rpx 28rpx 53px;
+		.list{
+			.list-item{
+				border-bottom: 1rpx solid #ccc;
+				padding: 24rpx 0;
+				display: flex;
+			}
+			.header-image{
+				width: 216rpx;
+				height: 130rpx;
+				border-radius: 10rpx;
+			}
+			.msg-info{
+				flex: 1;
+				display: flex;
+				flex-direction: column;
+				justify-content: space-between;
+			}
+		}
+	}
+</style>

pages/Match/compontent/Videos.vue

@@ -0,0 +1,126 @@
+<template>
+	<view class="videos flex">
+		<view class="videos-one">
+			<view class="videos-img">
+					<image src="https://cdn.family.mhuan.shop/Fultsu5vMRr3BQEVERJITJDlZHGL.jpg" mode="widthFix"></image>
+				<view class="videos-icon">
+					<view class="videos-collection">
+						<image src="../../../static/image/videos/video5.png" mode=""></image>
+						<text class="cfff font24">123</text>
+					</view>
+					<view class="videos-play">
+						<image src="../../../static/image/videos/video6.png" mode=""></image>
+						<text class="cfff font24">123</text>
+					</view> 
+				
+				</view>
+		
+			</view>
+			<view class="videos-text">
+				<text class="font24 c3">The ball is as good as the character of Dele Ali</text>
+			</view>
+		</view>
+		<view class="videos-one">
+			<view class="videos-img">
+					<image src="https://cdn.family.mhuan.shop/Fultsu5vMRr3BQEVERJITJDlZHGL.jpg" mode="widthFix"></image>
+				<view class="videos-icon">
+					<view class="videos-collection">
+						<image src="../../../static/image/videos/video5.png" mode=""></image>
+						<text class="cfff font24">123</text>
+					</view>
+					<view class="videos-play">
+						<image src="../../../static/image/videos/video6.png" mode=""></image>
+						<text class="cfff font24">123</text>
+					</view> 
+				
+				</view>
+		
+			</view>
+			<view class="videos-text">
+				<text class="font24 c3">The ball is as good as the character of Dele Ali</text>
+			</view>
+		</view>
+		
+		<view class="videos-one">
+			<view class="videos-img">
+					<image src="https://cdn.family.mhuan.shop/FkrhzKm9a5fsTtuJGIdJGzaqPEjn.jpg" mode="widthFix"></image>
+				<view class="videos-icon">
+					<view class="videos-collection">
+						<image src="../../../static/image/videos/video5.png" mode=""></image>
+						<text class="cfff font24">123</text>
+					</view>
+					<view class="videos-play">
+						<image src="../../../static/image/videos/video6.png" mode=""></image>
+						<text class="cfff font24">123</text>
+					</view> 
+				
+				</view>
+		
+			</view>
+			<view class="videos-text">
+				<text class="font24 c3">The ball is as good as the character of Dele Ali</text>
+			</view>
+		</view>
+
+	</view>
+</template>
+
+<script>
+</script>
+
+<style lang="scss">
+	.videos {
+		flex-wrap: wrap;
+		padding-left: 25rpx;
+		padding-right: 25rpx;
+
+		.videos-one {
+			width: 340rpx;
+			background-color: #fff;
+			border-radius: 12px;
+			margin-bottom: 18rpx;
+			
+			.videos-img {
+				position: relative;
+				height: auto;
+				width: 340rpx;
+				image {
+					width: 100%;
+					border-radius: 12rpx 12rpx 0 0;
+				}
+				.videos-icon {
+					.videos-play {
+						position: absolute;
+						bottom: 18rpx;
+						left: 18rpx;
+						z-index: 99;
+					image {
+						width: 24rpx;
+						height: 24rpx;
+						margin-right: 10rpx;
+						vertical-align: middle;
+					}
+					}
+					.videos-collection {
+						position: absolute;
+						bottom: 18rpx;
+						left: 141rpx;
+						z-index: 99;
+					image {
+						width: 24rpx;
+						height: 24rpx;
+						margin-right: 10rpx;
+						vertical-align: middle;
+					}
+					}
+				}
+		
+			}
+
+			.videos-text {
+				margin: 10rpx 18rpx 20rpx;
+				
+			}
+		}
+	}
+</style>

pages/Match/compontent/fantasy.vue

@@ -0,0 +1,513 @@
+<template>
+	<view class="fantasy">
+<!-- 		<view class="fantasy-top">
+			<view class="fantasy-list">
+				<view class="fantasy-list-title flex-start" @click="toUrl">
+					<image src="/static/image/match/[email protected]" mode=""></image>
+					<view class="right">
+						<view class="flex-start">
+							<view class="">
+								Player Stats
+							</view>
+							<text>Lineups out</text>
+						</view>
+						<view class="foot">
+							stats from this tour
+						</view>
+					</view>
+				</view>
+				
+				<view class="fantasy-list-content">
+					<view class="fantasy-list-th flex">
+						<view class="">
+							Players
+						</view>
+						<view class="">
+							Matches 
+							Played
+						</view>
+						<view class="">
+							Points per
+							Match
+						</view>
+						<view class="flex-start" style="justify-content: center;">
+							<image src="/static/image/match/[email protected]" mode=""></image>
+							%
+						</view>
+					</view>
+					<view class="fantasy-list-td flex">
+						<view class="">
+							<view class="">
+								N Ellis
+							</view>
+							<text>Bowler</text>
+						</view>
+						<view class="">
+							1
+						</view>
+						<view class="">
+							10
+						</view>
+						<view class="">
+							10
+						</view>
+					</view>
+				</view>
+				
+				<view class="fantasy-list-foot flex" @click="toUrl">
+					SEE ALL PLAYERS STATS
+					<image src="/static/image/match/[email protected]" mode=""></image>
+				</view>
+			</view>
+	
+			<!-- <view class="fantasy-list">
+				<view class="fantasy-list-title flex-start" @click="goexpert">
+					<image src="/static/image/match/[email protected]" mode=""></image>
+					<view class="right">
+						<view class="flex-start">
+							<view class="">
+								Expert Analysis
+							</view>
+						</view>
+						<view class="foot">
+							Based on 6 Experts
+						</view>
+					</view>
+				</view>
+				
+				<view class="fantasy-list-content fantasy-list-content1">
+					<view class="list-title flex">
+						<text>TEAM TYPES</text>
+						<text>NO.OF TEAMS</text>
+					</view>
+					<view class="list-nac flex font32" v-for="(item,index) in 3">
+						<text>Mega League Teams</text>
+						<text>1</text>
+					</view>
+				</view>
+				
+				<view class="fantasy-list-foot flex">
+					see all players stats
+					<image src="/static/image/match/[email protected]" mode=""></image>
+				</view>
+			</view> -->
+		
+			<!-- <view class="fantasy-list-banner flex-start">
+				<image src="/static/image/match/[email protected]" mode=""></image>
+				<view class="right">
+					<view class="font32">
+						NOS vs MNR | The Guru
+						Leaderboard
+					</view>
+					<text class="font28">Fancode • 9 hrs ago </text>
+				</view>
+			</view> -->
+		<!-- </view> -->
+		
+		<!-- <view class="fantasy-classify font36">
+			Venue & Team Stats
+		</view> -->
+<!-- 		<view class="fantasy-classify font36">
+			Team Stats
+		</view> -->
+		<!-- <view class="fantasy-foot">
+			<view class="fantasy-list">
+				<view class="fantasy-list-title flex-start" @click="goexpert(2)">
+					<image src="../../../static/image/match/[email protected]" mode=""></image>
+					<view class="right">
+						<view class="flex-start">
+							<view class="">
+								Venue
+							</view>
+						</view>
+					</view>
+				</view>
+				
+				<view class="fantasy-list-content fantasy-list-content2">
+					<view class="flex mg-bt24">
+						<view class="size32 c333">
+							<text class="size24 c6">Leeds</text>
+							<view>
+								Headingley
+							</view>
+						</view>
+					</view>
+					<view class="flex mg-bt24">
+						<view class="size32 c333">
+							<text class="size24 c6">Pitch Behaviour</text>
+							<view>
+								Balanced
+							</view>
+						</view>
+						<view class="flex-col align-start right-views">
+							<text class="size24 c6">Avg Score</text>
+							<view>
+								147
+							</view>
+						</view>
+					</view>
+					<view class="flex mg-bt24">
+						<view class="size32 c333">
+							<text class="size24 c6">Pitch Behaviour</text>
+							<view>
+								Balanced
+							</view>
+						</view>
+						<view class="flex-col align-start right-views">
+							<text class="size24 c6">Temperature</text>
+							<view>
+								19.49­°
+							</view>
+						</view>
+					</view>
+				</view>
+				<view class="fantasy-list-foot flex">
+					SEE TOP PLAYERS AT THIS VENUE
+					<image src="/static/image/match/[email protected]" mode=""></image>
+				</view>
+			</view>
+		</view> -->
+		
+		<view class="fantasy-foot">
+			<view class="fantasy-list" @click="goexpert(3)">
+				<view class="fantasy-list-title flex-start">
+					<image src="/static/image/match/matches_detail_team_ico.png" mode=""></image>
+					<view class="right">
+						<view class="flex-start">
+							<view class="">
+								<!-- Team Comparison -->
+								{{ $t('match.lab24') }}
+							</view>
+						</view>
+					</view>
+				</view>
+				
+				<view class="fantasy-list-content fantasy-list-content2">
+					<view class="list-top">
+						<view class="team flex font24">
+							<text>{{info.home_name}}</text>
+							<image src="/static/image/match/[email protected]" mode=""></image>
+							<text>{{info.away_name}}</text>
+						</view>
+						<view class="logo flex">
+							<image :src="info.home_logo || '/static/image/common/team.png'" mode="aspectFit"></image>
+							<image :src="info.away_logo || '/static/image/common/team.png'" mode="aspectFit"></image>
+						</view>
+					</view>
+					<view class="list-title font24">
+						<!-- Winning Chances -->
+						{{ $t('match.lab25') }}
+					</view>
+					<view class="jindu">
+						<view class="jindu-num flex">
+							<text class="font28">{{fantasy.home_win_probabilities || 0}}%</text>
+							<text class="font28">{{fantasy.away_win_probabilities|| 0}}%</text>
+						</view>
+						<view class="jindu-color flex">
+							<!-- <text></text>
+							<text style="background-color: #585858;"></text> -->
+							<u-line-progress activeColor="#C8C8C8" inactiveColor="#DC3C23"	:percentage="fantasy.home_win_probabilities" :showText="false"></u-line-progress>
+						</view>
+					</view>
+					<view class="result">
+						<view class="result-num flex font24">
+							<text>{{fantasy.home.filter(item=>item == 'W').length}}/5</text>
+							<text>
+								<!-- RECENT FORM -->
+								{{ $t('match.lab26') }}
+							</text>
+							<text>{{fantasy.away.filter(item=>item == 'W').length}}/5</text>
+						</view>
+						<view class="result-list flex">
+							<view class="result-list-left" style="border-right: 1rpx solid #E5E5E5;">
+								<view class="flex-start">
+									<text class="result-list-li font24" :class="{'green':item == 'W'}" v-for="(item,index) in fantasy.home" :key="index">{{item}}</text>
+								</view>
+								<view class="">
+									<!-- LATEST -->
+								{{ $t('match.lab27') }}
+								</view>
+							</view>
+							<view class="result-list-left">
+								<view class="flex-end">
+									<text class="result-list-li font24" :class="{'green':item == 'W'}" v-for="(item,index) in fantasy.away" :key="index">{{item}}</text>
+								</view>
+								<view class="" style="margin-left: 24rpx;">
+									<!-- LATEST -->
+								{{ $t('match.lab27') }}
+								</view>
+							</view>
+						</view>
+					</view>
+				</view>
+				<view class="fantasy-list-foot flex">
+					<!-- SEE ALL PLAYERS STATS -->
+					{{ $t('match.lab28') }}
+					<image src="/static/image/match/[email protected]" mode=""></image>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props:['info'],
+		data() {
+			return {
+				fantasy:{
+					home:[],
+					away:[]
+				}
+			}
+		},
+		methods:{
+			cricket_match_detail_fantasy(id) {
+				uni.$u.http.post('/api/Cricket/cricket_match_detail_fantasy',{match_id:id}).then(res=>{
+					this.fantasy = res;
+				}).catch(res=>{})
+			},
+			
+			toUrl(){
+				uni.navigateTo({
+					url:'/pages/Match/player-stats'
+				})
+			},
+			goexpert(type){
+				switch(type){
+					case 3:
+					uni.navigateTo({
+						url:"/pages/Match/team?match_id=" + this.info.match_id
+					})
+					break;
+					case 2:
+					uni.navigateTo({
+						url:"/pages/Match/venue"
+					})
+					break;
+					default:
+					uni.navigateTo({
+						url:'/pages/Match/expert-analysis'
+					})
+					break;
+				}
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.fantasy {
+		min-height: 70vh;
+	}
+	.fantasy-top {
+		overflow: hidden;
+		padding: 0 28rpx;
+		background-color: white;
+		margin-bottom: 30rpx;
+	}
+	.fantasy-foot {
+		overflow: hidden;
+		padding: 0 28rpx;
+		padding-bottom: 40rpx;
+		.fantasy-list {
+			background-color: white;
+		}
+	}
+	.fantasy-list-banner {
+		margin: 36rpx 0;
+		image {
+			width: 276rpx;
+			height: 142rpx;
+			margin-right: 24rpx;
+		}
+		.right view {
+			font-weight: bold;
+		}
+		text {
+			color: $color4;
+			margin-top: 12rpx;
+		}
+	}
+	.fantasy-classify {
+		color: #333;
+		font-weight: bold;
+		padding: 0 52rpx;
+		margin-top: 26rpx;
+	}
+	.fantasy-list {
+		font-size: 28rpx;
+		margin-top: 24rpx;
+		box-shadow: 0rpx 0rpx 8rpx 1rpx $color9;
+		border-radius: 10rpx 10rpx 10rpx 10rpx;
+		.fantasy-list-title {
+			padding: 24rpx;
+			border-bottom: 2rpx solid $color6;
+			image {
+				width: 50rpx;
+				height: 50rpx;
+				margin-right: 16rpx;
+			}
+			.right view view {
+				font-size: 36rpx;
+				font-weight: bold;
+				margin-right: 24rpx;
+			}
+			.right view text {
+				color: #fff;
+				padding: 0 16rpx;
+				font-size: 28rpx;
+				background-color: #959DEE;
+			}
+			.foot {
+				color: $color4;
+				font-size: 28rpx;
+			}
+		}
+		.fantasy-list-content {
+			padding: 24rpx;
+			text-align: center;
+			.right-views{
+				width: 176rpx;
+			}
+		}
+		.fantasy-list-th {
+			color: $color4;
+			border-radius: 10rpx;
+			padding: 0 24rpx;
+			background-color: $color6;
+			image {
+				width: 17rpx;
+				height: 21rpx;
+				margin-right: 6rpx;
+			}
+			&:view {
+				width: calc(100% / 4);
+				
+			}
+		}
+		.fantasy-list-th>view {
+			width: calc(100% / 4);
+		}
+		.fantasy-list-td {
+			color: $color3;
+			margin-top: 24rpx;
+			font-size: 32rpx;
+			font-weight: bold;
+			padding: 0 24rpx;
+			text {
+				font-size: 24rpx;
+				color:  $color4;
+			}
+		}
+		.fantasy-list-td>view {
+			width: calc(100% / 4);
+		}
+		.fantasy-list-foot {
+			color: $color2;
+			padding: 24rpx;
+			font-size: 28rpx;
+			font-weight: bold;
+			border-top: 2rpx solid $color6;
+			image {
+				width: 48rpx;
+				height: 48rpx;
+			}
+		}
+		.fantasy-list-content1 {
+			.list-title {
+				padding: 15rpx 24rpx;
+				background-color: $color6;
+				color: $color4;
+				border-radius: 10rpx;
+			}
+			.list-nac {
+				padding: 0 24rpx;
+				font-weight: bold;
+				margin-top: 24rpx;
+			}
+		}
+		.fantasy-list-content2 {
+			color: #333;
+			.list-top {
+				margin-top: 38rpx;
+				// padding: 0 24rpx;
+				.team {
+					color:$color4;
+					text {
+						width: 100rpx;
+						text-align: center;
+					}
+				}
+				.team image {
+					width: 36rpx;
+					height: 36rpx;
+				}
+				.logo {
+					padding: 17rpx 24rpx;
+					image {
+						width: 56rpx;
+						height: 56rpx;
+					}
+				}
+			}
+			.list-title {
+				font-weight: bold;
+				margin-top: 19rpx;
+			}
+			.jindu {
+				margin-top: 16rpx;
+				
+			}
+			.jindu-color {
+				height:16rpx;
+				text {
+					height: 100%;
+					width: 30%;
+					background-color: #DC3C23;
+				}
+			}
+			.result {
+				margin-top: 50rpx;
+				.result-num {
+					
+					color: $color4;
+					
+				}
+			}
+			.result-list {
+				
+				margin-top: 16rpx;
+			}
+			.result-list-left {
+				width: calc(100% / 2);
+			}
+			.result-list-li {
+				color: #fff;
+				width: 48rpx;
+				height: 48rpx;
+				text-align: center;
+				line-height: 48rpx;
+				background-color: #DC3C23;
+				margin-right: 16rpx;
+			}
+			.green {
+				background-color: #219430;
+			}
+			
+			.li {
+				margin: 0;
+				margin-left: 16rpx;
+			}
+			
+			
+			
+		}
+		
+		
+		
+	}
+	
+	
+	
+</style>

pages/Match/compontent/live.vue

@@ -0,0 +1,267 @@
+<template>
+	<view class="live">
+		<view>
+
+			<!-- 	<view class="size28 c3 mg-bt24" v-for="(item,index) in info" :key="index">
+				<text class="size32 Bold mg-rt20">2.36am  </text>
+				{{item}}
+			</view>
+ -->
+			<!-- <u-divider class="mg-bt24" lineColor="#E5E5E5"></u-divider> -->
+			<view class="size28 c3 mg-bt24" v-for="(item,index) in info" :key="index">
+				<!-- 				<view class="size28 c3 mg-bt24">
+					<text class="size32 Bold mg-rt20">2.36am </text>
+					{{item.commentaries}}
+				</view> -->
+
+				<!-- <u-divider class="mg-bt24" lineColor="#E5E5E5"></u-divider> -->
+
+				<view>
+					<view class="" style="display: flex;">
+						<view class="size32 c3 Bold live-item" v-if="item.type===1">
+							<text class="indexNumber">{{item.display_overs}}</text>
+							<text class="live-item-text"
+								:class="item.runs_scored=='w'?'live-item-text-red':item.runs_scored=='4'?'live-item-text-green':item.runs_scored=='6'?'live-item-text-green':item.runs_scored=='8'?'live-item-text-green':'live-item-text-block'">{{item.runs_scored}}</text>
+							<!-- <text>{{item.commentaries}}</text> -->
+						</view>
+						<view class="size28 c3 live-item">
+
+							<text>{{item.commentaries}}</text>
+						</view>
+					</view>
+
+
+				</view>
+
+				<u-divider class="mg-bt24" lineColor="#E5E5E5" v-if="item.type===1"></u-divider>
+
+				<!-- 		<view>
+					<view class="size32 c3 Bold live-item">
+						<view class="indexNumber">59</view>
+						<text>Luke Wood to Tim David</text>
+					</view>
+					<view class="size28 c3 live-item">
+						<view class="indexNumber"><text>4</text></view>
+						<text>Adam Rossington(wk) , Daniel Drummond Ben McDermott , Dan Lawrence , Eoin Morgan(c) ,
+							KieronPollard , Jordan Thomp , Liam Dawson , Nathan Ellis , Chris Wood , Mason Crane</text>
+					</view>
+				</view> -->
+
+				<view class="green-card" v-if="item.type===2">
+					<u-row>
+						<u-col span="8" class="flex">
+							<view class="flex-start">
+								<view class="over17 size28 c6">
+									OVER <br>
+									<text class="size32">{{item.serial_number}}</text>
+								</view>
+								<view class="size24 c6">
+									{{item.head.sessions_number}} <br>
+									<text class="size28 mg-tp16 c3 Bold"> {{item.head.sum}}Runs</text>
+								</view>
+							</view>
+						</u-col>
+						<!-- <u-col span="4" > -->
+						<view class="size24 c6 pd-lt21" style="border-left: 1rpx solid #b1d9ff">
+							{{item.head.country_code}}<br>
+							<text class="size28 mg-tp16 c3 Bold">{{item.head. display_score}}</text>
+						</view>
+						</u-col>
+					</u-row>
+					<u-line color="#b1d9ff"></u-line>
+					<u-row>
+						<u-col span="6">
+							<view class="size24 c6">
+								{{item.head.striker.name}}<br>
+								<text
+									class="size28 mg-tp16 c3 Bold">{{item.head.striker.runs_scored_so_far}}</text>({{item.head.striker.balls_faced_so_far}})
+							</view>
+						</u-col>
+						<u-col span="6">
+							<view class="size24 c6">
+								{{item.head.non_striker.name}}<br>
+								<text
+									class="size28 mg-tp16 c3 Bold">{{item.head.non_striker.runs_scored_so_far}}</text>({{item.head.non_striker.balls_faced_so_far}})
+							</view>
+						</u-col>
+						<u-line direction="col" color="#219430"></u-line>
+						<!-- 				<u-col span="4">
+							<view class="size24 c6 pd-lt21">
+								Tabraiz Shamsi<br>
+								<text class="mg-tp16">20-30-0</text>
+							</view>
+						</u-col> -->
+					</u-row>
+				</view>
+			</view>
+
+			<u-empty v-if="info.length == 0" :show="loadingData" mode="data" width="474" height="312" textSize="28"
+				marginTop="100" :text="$t('common.nodata')" icon="/static/image/common/nodata.png">
+			</u-empty>
+			<u-loadmore v-if="info.length != 0" :status="status" fontSize="28" :line="true"
+				:loading-text="statusType.loadingText" :loadmore-text="statusType.loadmoreText"
+				:nomore-text="statusType.nomoreText" />
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				info: [],
+				loadingData: false,
+				page: 1,
+				statusType: {
+					loadingText: this.$t('common.lab'),
+					loadmoreText: this.$t('common.lab1'),
+					nomoreText: this.$t('common.lab2')
+				},
+				id: '',
+			}
+		},
+		created() {},
+		onPullDownRefresh() {
+			this.page = 1
+			this.cricket_match_detail_live(this.id)
+			setTimeout(res => {
+				uni.stopPullDownRefresh()
+			}, 1500)
+		},
+		onReachBottom() {
+			console.log(111)
+			if (this.status == 'loadmore') {
+				this.cricket_match_detail_live(this.id)
+			}
+		},
+		methods: {
+			cricket_match_detail_live(id) {
+				uni.showLoading({
+					title: this.$t('common.lab')
+				})
+				this.status = 'loading'
+				uni.$u.http.post('/api/Cricket/cricket_match_detail_live_new', {
+					match_id: id,
+					page: this.page,
+				}).then(res => {
+					console.log(res, 111)
+
+					if (this.page == 1) {
+						this.info = res;
+					} else {
+						this.info = this.info.concat(res)
+					}
+					if (res.total > this.info.length) {
+						this.status = 'loadmore'
+						this.page++
+					} else {
+						this.status = 'nomore'
+					}
+
+					uni.hideLoading()
+				}).catch(res => {})
+			}
+		},
+		onLoad(option) {
+			this.cricket_match_detail_live(opton.id)
+			this.id = option.id
+		}
+	}
+</script>
+
+<style lang="scss">
+	.live {
+		padding: 36rpx 28rpx;
+
+		.live-item {
+			display: flex;
+			flex-direction: column;
+
+			.live-item-text {
+				display: block;
+				border-radius: 100rpx;
+				color: #fff;
+				width: 36rpx;
+				height: 36rpx;
+				background-color: #219430;
+				text-align: center;
+				line-height: 36rpx;
+			}
+
+			.live-item-text-green {
+				background-color: green !important;
+			}
+
+			.live-item-text-red {
+				background-color: red !important;
+			}
+
+			.live-item-text-block {
+				background-color: #999999 !important;
+				opacity: 0.7;
+			}
+
+			text {
+				// flex: 1;
+
+			}
+
+			.indexNumber {
+				width: 76rpx;
+
+				text {
+					display: block;
+					border-radius: 100rpx;
+					color: #fff;
+					width: 36rpx;
+					height: 36rpx;
+					background-color: #219430;
+					text-align: center;
+					line-height: 36rpx;
+				}
+			}
+
+			.indexRed {
+				width: 76rpx;
+
+				text {
+					display: block;
+					border-radius: 100rpx;
+					color: #fff;
+					width: 36rpx;
+					height: 36rpx;
+					background-color: red;
+					text-align: center;
+					line-height: 36rpx;
+				}
+			}
+		}
+
+		.green-card {
+			background-color: #F3F8FE;
+
+			.u-row {
+				padding: 24rpx;
+
+				.over17 {
+					background: #d8ecff;
+					border-radius: 10rpx;
+					border: 1rpx solid #b1d9ff;
+					text-align: center;
+					width: 101rpx;
+					margin-right: 24rpx;
+				}
+
+				.u-col {
+					text {
+						display: inline-block;
+					}
+
+					&:last-child {
+						border-left: 1rpx solid #b1d9ff;
+					}
+				}
+			}
+		}
+	}
+</style>

pages/Match/expert-analysis.vue

@@ -0,0 +1,650 @@
+<template>
+	<view>
+		<view class="select-head">
+			<u-navbar :leftText="$t('navbar.txt')" bgColor="transparent" leftIconColor="#fff" :titleStyle="{color:'#fff'}" :fixed="false" leftIconSize="48" :autoBack="true"></u-navbar>
+		</view>
+		<view class="main">
+			<!-- <image src="../../static/image/match/expert_context.png" :name="'BASED ON ANALYSIS FROM 7 EXPERTS'" class="heand-pic" mode="aspectFit"></image> -->
+			<view class="heand-pic flexcenter">
+				<!-- BASED ON ANALYSIS FROM 7 EXPERTS -->
+				{{ $t('match.lab33') }}
+			</view>
+			<view class="size32 expert-text text-center">
+				<!-- Expert Predictions Summary -->
+				{{ $t('match.lab34') }}
+			</view>
+			<view class="size28 expert-text text-center">
+				<!-- Winning Chances -->
+				{{ $t('match.lab35') }}
+			</view>
+			
+			<view class="mg-tp36">
+				<u-row justify="space-between">
+					<text class="expert-text size28">
+						<!-- Welsh Fire -->
+					{{ $t('match.lab36') }}
+					</text>
+					<text class="expert-text size28">
+						<!-- Southern Brave -->
+					{{ $t('match.lab37') }}
+					</text>
+				</u-row>
+				<u-row justify="space-between" class="mg-tp15">
+					<image src="../../static/image/match/star.png" mode="aspectFit" class="team-icon mg-lt24"></image>
+					<image src="../../static/image/match/star.png" mode="aspectFit" class="team-icon mg-rt24"></image>
+				</u-row>
+			</view>
+			
+			<view class="mg-tp36">
+				<u-row justify="space-between">
+					<text class="size28 c3">40%</text>
+					<text class="size28 c3">60%</text>
+				</u-row>
+				<u-line-progress :percentage="40" height="16" activeColor="#585858" inactiveColor="#DC3C23" :showText="false" class="mg-tp12"> 
+						<!-- <text class="u-percentage-slot">{{30}}%</text> -->
+				</u-line-progress>
+			</view>
+			
+			<view class="mg-tp61">
+				<text class="expert-text size28">
+					<!-- Pitch Report -->
+				{{ $t('match.lab38') }}
+				</text>
+				<u-row class="pd-lt90 pd-rt50" align="bottom">
+					<u-line color="#EEA831" direction="col" length="104rpx" dashed></u-line>
+					<view class="size24 c6 mg-lt10 mg-rt25 mg-bt40">
+						<text class="keep-all">
+							<!-- Batting Pitch -->
+						{{ $t('match.lab39') }}
+						</text>
+						<text class="c3 Bold">0%</text>
+					</view>
+					<u-line color="#EEA831" direction="col" length="171rpx" dashed></u-line>
+					<view class="size24 c6 mg-lt10 mg-rt32 mg-bt106">
+						<text class="keep-all">
+							<!-- Balanced Pitch -->
+						{{ $t('match.lab40') }}
+						</text>
+						<text class="c3 Bold">0%</text>
+					</view>
+					<u-line color="#EEA831" direction="col" length="105rpx" dashed></u-line>
+					<view class="size24 c6 mg-lt10 mg-bt40">
+						<text class="keep-all">
+							<!-- Bowling Pitch -->
+						{{ $t('match.lab41') }}
+						</text>
+						<text class="c3 Bold">0%</text>
+					</view>
+				</u-row>
+				<image src="../../static/image/match/expert_pitch.png" mode="aspectFit" class="pitch-pic"></image>
+			</view>
+			
+			<view class="mg-tp36 mg-bt12">
+				<text class="expert-text size28 Bold">
+					<!-- Pitch is good for -->
+						{{ $t('match.lab42') }}
+				</text>
+				<u-row class="pd-rt50 mg-tp24">
+					<view class="flex-start good-for">
+						<image src="../../static/image/match/expert_pace_ico.png" mode="aspectFit" class="pace-pic mg-rt16"></image>
+						<view class="flex-col size24">
+							<text class="c3">67%</text>
+							<text class="c6">
+								<!-- Say Pace -->
+						{{ $t('match.lab43') }}
+							</text>
+						</view>
+					</view>
+					<view class="flex-start good-for mg-lt24">
+						<image src="../../static/image/match/expert_spin_ico.png" mode="aspectFit" class="pace-pic mg-rt16"></image>
+						<view class="flex-col size24">
+							<text class="c3">33%</text>
+							<text class="c6">
+								<!-- Say Spin -->
+						{{ $t('match.lab44') }}
+							</text>
+						</view>
+					</view>
+				</u-row>
+			</view>
+		</view>
+		<u-gap height="24" bgColor="#E5E5E5"></u-gap>
+		<view class="main">
+			<view class="flex mg-tp36">
+				<text class="size28 c3">
+					<!-- Top Player Picks -->
+						{{ $t('match.lab45') }}
+				</text>
+				<text class="size24 c6">
+					<!-- Updated 13h 48m ago -->
+						{{ $t('match.lab46') }}
+				</text>
+			</view>
+			<view class="bgE5">
+				<view class="flex bfb">
+					<text class="size24 c6">
+						<!-- PLAYERS PICKED MOST -->
+						{{ $t('match.lab47') }}
+					</text>
+					<text class="size24 c6">
+						{{ $t('match.lab48') }} %
+					</text>
+				</view>
+			</view>
+			
+			<view class="list mg-tp30">
+				<view class="flex mg-bt24 c3">
+					<text class="size28">W Khan <text class="size24 c6">(ALL)</text></text>
+					<text>100.0</text>
+				</view>
+				<view class="flex mg-bt24 c3">
+					<text class="size28">D Qureshi<text class="size24 c6">(BOWL)</text></text>
+					<text>100.0</text>
+				</view>
+				<view class="flex c3">
+					<text class="size28">A Jotin <text class="size24 c6">(BOWL)</text></text>
+					<text>100.0</text>
+				</view>
+			</view>
+		</view>
+		
+		<u-gap height="24" bgColor="#E5E5E5"></u-gap>
+		
+		<view class="main">
+			<u-row justify="space-between" align="top">
+				<view class="flex-col align-start">
+					<text class="size32 c3">
+						<!-- Head to Head Teams -->
+						{{ $t('match.lab49') }}
+					</text>
+					<text class="size24 c6">
+						<!-- 2 Teams -->
+						{{ $t('match.lab50') }}
+					</text>
+				</view>
+				<view class="select-range">
+					<uni-data-select
+					  v-model="value"
+					  :localdata="range"
+					  @change="change"
+					></uni-data-select>
+				</view>
+			</u-row>
+			
+			<view class="showing mg-tp24" v-for="item in 2" :key="item">
+				<u-row justify="space-between">
+					<view class="flexcenter">
+						<image src="../../static/image/common/[email protected]" mode="widthFix" class="team-avatar mg-rt16"></image>
+						<text class="size28 c3 Bold">
+							<!-- Kartik Vyas -->
+						{{ $t('match.lab51') }}
+						</text>
+					</view>
+					<image src="../../static/image/match/[email protected]" mode="widthFix" class="team-icon"></image>
+				</u-row>
+				<view class="green-info mg-tp24">
+					<view class="flex cfff size24">
+						<view class="team1">
+							<!-- TEAM1 -->
+						{{ $t('match.lab52') }}
+						</view>
+						<text>
+							<!-- 14h 14m ago -->
+						{{ $t('match.lab53') }}
+						</text>
+					</view>
+					<view class="flex align-end mg-tp24">
+						<view class="flex-col-between size24 cfff">
+							<view class="pbd">
+								<view class="flex">
+									<text>PBD</text>
+									<text>DDD</text>
+								</view>
+								<view class="flex">
+									<text>7</text>
+									<text class="mg-rt32">4</text>
+								</view>
+							</view>
+							<text class="mg-bt9">
+								Cr:98.5 <text class="size24">/100</text>
+							</text>
+						</view>
+						<view class="flexcenter">
+							<view class="c-vc mg-rt90">
+								<image src="../../static/image/match/player_c_ico.png" mode="aspectFit" class="c-icon"></image>
+								<image src="../../static/image/match/[email protected]" mode="widthFix" class="team-member-avatar" :name="'W Khan'"></image>
+							</view>
+							<view class="c-vc mg-rt36">
+								<image src="../../static/image/match/player_vc_ico.png" mode="aspectFit" class="c-icon"></image>
+								<image src="../../static/image/match/[email protected]" mode="widthFix" class="team-member-avatar" :name="'RA Ali'"></image>
+							</view>
+						</view>
+					</view>
+					<view class="flex size24 cfff mg-tp32">
+						<text>WK 2</text>
+						<text>BAT 2</text>
+						<text>ALL 2</text>
+						<text>BOWL 2</text>
+					</view>
+				</view>
+					<view class="flex mg-tp9">
+						<text class="size24 c6">
+							<!-- See this team -->
+						{{ $t('match.lab54') }}
+						</text>
+						<image src="../../static/image/match/[email protected]" mode="heightFix" class="arrow-right"></image>
+					</view>
+			</view>
+			
+			<text class="size28 c6 mg-tp24">
+				<!-- Showing 2/2 -->
+				{{ $t('match.lab55') }}
+			</text>
+			
+		</view>
+		
+		<u-gap height="24" bgColor="#E5E5E5"></u-gap>
+		
+		<view class="main">
+			<u-row justify="space-between" align="top">
+				<view class="flex-col align-start">
+					<text class="size32 c3">
+						<!-- Head to Head Teams -->
+						{{ $t('match.lab49') }}
+					</text>
+					<text class="size24 c6">
+						<!-- 2 Teams -->
+						{{ $t('match.lab50') }}
+					</text>
+				</view>
+				<view class="select-range">
+					<uni-data-select
+					  v-model="value"
+					  :localdata="range"
+					  @change="change"
+					></uni-data-select>
+				</view>
+			</u-row>
+			
+			<view class="showing mg-tp24" v-for="item in 2" :key="item">
+				<u-row justify="space-between">
+					<view class="flexcenter">
+						<image src="../../static/image/common/[email protected]" mode="widthFix" class="team-avatar mg-rt16"></image>
+						<text class="size28 c3 Bold">Kartik Vyas</text>
+					</view>
+					<image src="../../static/image/match/[email protected]" mode="widthFix" class="team-icon"></image>
+				</u-row>
+				<view class="green-info mg-tp24">
+					<view class="flex cfff size24">
+						<view class="team1">
+							<!-- TEAM1 -->
+						{{ $t('match.lab52') }}
+						</view>
+						<text>
+							<!-- 14h 14m ago -->
+						{{ $t('match.lab53') }}
+						</text>
+					</view>
+					<view class="flex align-end mg-tp24">
+						<view class="flex-col-between size24 cfff">
+							<view class="pbd">
+								<view class="flex">
+									<text>PBD</text>
+									<text>DDD</text>
+								</view>
+								<view class="flex">
+									<text>7</text>
+									<text class="mg-rt32">4</text>
+								</view>
+							</view>
+							<text class="mg-bt9">
+								Cr:98.5 <text class="size24">/100</text>
+							</text>
+						</view>
+						<view class="flexcenter">
+							<view class="c-vc mg-rt90">
+								<image src="../../static/image/match/player_c_ico.png" mode="aspectFit" class="c-icon"></image>
+								<image src="../../static/image/match/[email protected]" mode="widthFix" class="team-member-avatar" :name="'W Khan'"></image>
+							</view>
+							<view class="c-vc mg-rt36">
+								<image src="../../static/image/match/player_vc_ico.png" mode="aspectFit" class="c-icon"></image>
+								<image src="../../static/image/match/[email protected]" mode="widthFix" class="team-member-avatar" :name="'W Khan'"></image>
+							</view>
+						</view>
+					</view>
+					<view class="flex size24 cfff mg-tp32">
+						<text>WK 2</text>
+						<text>BAT 2</text>
+						<text>ALL 2</text>
+						<text>BOWL 2</text>
+					</view>
+				</view>
+					<view class="flex mg-tp9">
+						<text class="size24 c6">
+							<!-- See this team -->
+						{{ $t('match.lab54') }}
+						</text>
+						<image src="../../static/image/match/[email protected]" mode="heightFix" class="arrow-right"></image>
+					</view>
+			</view>
+			
+			<view class="size28 c6 mg-tp24">
+				<!-- Showing 2/2 -->
+				{{ $t('match.lab55') }}
+			</view>
+			
+		</view>
+		
+		<view class="main bgE5">
+			<text class="size32 c3 Bold">
+				<!-- Doing your own research? -->
+				{{ $t('match.lab56') }}
+			</text>
+			<view class="size32 c6 mg-tp10">
+				<!-- Enjoy detailed stats and analysis -->
+				{{ $t('match.lab57') }}
+			</view>
+			<view class="list mg-tp27">
+				<u-row class="list-item mg-bt24">
+					<image src="../../static/image/match/houser.png" mode="aspectFit" class="title-pic"></image>
+					<view class="list-item-view">
+						<text class="size28 C3 Bold">
+							<!-- Player Stats -->
+						{{ $t('match.lab58') }}
+						</text>
+						<view class="size24 c6">
+							{{ $t('match.lab59') }}<br>
+							<!-- career stats -->
+						{{ $t('match.lab60') }}
+						</view>
+					</view>
+					<image src="../../static/image/match/[email protected]" mode="heightFix" class="right-icon"></image>
+				</u-row>
+				<u-row class="list-item mg-bt24">
+					<image src="../../static/image/match/[email protected]" mode="aspectFit" class="title-pic"></image>
+					<view class="list-item-view">
+						<text class="size28 C3 Bold">
+							<!-- Venue Details -->
+						{{ $t('match.lab61') }}
+						</text>
+						<view class="size24 c6">
+							{{ $t('match.lab62') }}<br>
+							<!-- muchh more -->
+						{{ $t('match.lab63') }}
+						</view>
+					</view>
+					<image src="../../static/image/match/[email protected]" mode="heightFix" class="right-icon"></image>
+				</u-row>
+				<u-row class="list-item">
+					<image src="../../static/image/match/matches_detail_team_ico.png" mode="aspectFit" class="title-pic"></image>
+					<view class="list-item-view">
+						<text class="size28 C3 Bold">
+							<!-- Team Compare -->
+						{{ $t('match.lab64') }}
+						</text>
+						<view class="size24 c6">
+							{{ $t('match.lab65') }}<br>
+							<!-- record -->
+						{{ $t('match.lab66') }}
+						</view>
+					</view>
+					<image src="../../static/image/match/[email protected]" mode="heightFix" class="right-icon"></image>
+				</u-row>
+			</view>
+		</view>
+		
+		<view class="views flex-start">
+			<image src="../../static/image/match/expert_Indicate_ico.png" mode="aspectFit" class="views-icon mg-rt13"></image>
+			<text class="size24 c6">
+				{{ $t('match.lab67') }}
+			</text>
+		</view>
+		
+		<view class="detailed flex-start bgE5">
+			<image src="../../static/image/match/[email protected]" mode="aspectFit" class="detailed-icon mg-rt24"></image>
+			<text class="size24 c6">
+				{{ $t('match.lab68') }}
+			</text>
+		</view>
+		
+		<u-popup :show="show" mode="center" :round="10" @close="close" @open="open">
+			<view>
+				<view class="flex header-box">
+					<text class="size24 c6">
+						<!-- Sort By -->
+						{{ $t('match.lab69') }}
+					</text>
+					<image src="../../static/image/match/close_ico.png" mode="heightFix" class="close-icon" @click="close"></image>
+				</view>
+				<view class="text-box">
+					<text class="size32 c3 Bold">
+						<!-- Expert Performance -->
+						{{ $t('match.lab70') }}
+					</text>
+					<view class="size28 c6">
+						<!-- (based on recent performance of experts) -->
+						{{ $t('match.lab71') }}
+					</view>
+				</view>
+				<view class="text-box">
+					<text class="size32 c3 Bold">
+						<!-- Last Updated -->
+						{{ $t('match.lab72') }}
+					</text>
+					<view class="size28 c6">
+						<!-- (based on last updated time of the article) -->
+						{{ $t('match.lab73') }}
+					</view>
+				</view>
+			</view>
+		</u-popup>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				show:true,
+				value:0,
+				range: [
+					{ value: 0, text: this.$t('match.lab74') },
+					{ value: 1, text: this.$t('match.lab74') },
+					{ value: 2, text: this.$t('match.lab74') },
+				],
+			};
+		},
+		methods:{
+			open() {
+			  // console.log('open');
+			  this.show = true
+			},
+			close() {
+			  this.show = false
+			  // console.log('close');
+			},
+			change(e) {
+			  console.log("e:", e);
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	.header-box{
+		padding: 11rpx 33rpx;
+		.close-icon{
+			width: 44rpx;
+			height: 44rpx;
+		}
+	}
+	.text-box{
+		padding: 36rpx 33rpx;
+		border-top: 1rpx solid #E5E5E5;
+	}
+	.select-head {
+		position: sticky;
+		top: 0;
+		z-index: 99;
+		background-color: $color1;
+		.select-tab {
+			padding: 0 28rpx;
+			margin-top: 20rpx;
+		}
+	}
+	.main{
+		padding: 24rpx 28rpx;
+		
+		.heand-pic{
+			width: 694rpx;
+			height: 116rpx;
+			background: url(../../static/image/match/expert_context.png) center center/100% auto no-repeat;
+				font-size: 28rpx;
+				color: #FFFFFF;
+				font-weight: bold;
+			// position: relative;
+			// &:before{
+			// 	content: attr(name);
+			// 	position: absolute;
+			// 	left: 50%;
+			// 	top: 50%;
+			// 	margin-left: -50%;
+			// 	margin-top: -50%;
+			// 	z-index: 2;
+			// 	font-size: 28rpx;
+			// 	color: #FFFFFF;
+			// 	font-weight: bold;
+			// }
+		}
+		.team-icon{
+			width: 56rpx;
+			height: 56rpx;
+		}
+		.pitch-pic{
+			width: 694rpx;
+			height: 68rpx;
+		}
+		.good-for{
+			width: 250rpx;
+			height: 78rpx;
+			background: #E5E5E5;
+			align-items: center;
+			padding-left: 24rpx;
+			border-radius: 43rpx;
+			.pace-pic{
+				width: 54rpx;
+				height: 54rpx;
+			}
+		}
+		.bfb{
+			margin-top: 24rpx;
+			padding: 12rpx 24rpx;
+		}
+		
+		.select-range{
+			width: 305rpx;
+		}
+		
+		.showing{
+			padding: 24rpx 24rpx 8rpx;
+			background: #FFFFFF;
+			box-shadow: 0rpx 0rpx 8rpx 1rpx $color7;
+			border-radius: 10rpx;
+			.team-avatar{
+				width: 90rpx;
+				height: 90rpx;
+				border-radius: 200rpx;
+			}
+			.team-icon{
+				width: 36rpx;
+				height: 36rpx;
+			}
+			
+			
+			.green-info{
+				background: #408335;
+				border-radius: 10rpx;
+				padding: 24rpx;
+				.team1{
+					padding: 1rpx 31rpx;
+					background: #2B8744;
+				}
+				.pbd{
+					width: 138rpx;
+				}
+				.c-vc{
+					position: relative;
+					.c-icon{
+						width: 30rpx;
+						height: 30rpx;
+						opacity: 0.4;
+						position: absolute;
+						top: 0;
+						left: 0;
+						z-index: 2;
+					}
+					.team-member-avatar{
+						position: relative;
+						width: 108rpx;
+						height: 108rpx;
+						&:before{
+							content: attr(name);
+							position: absolute;
+							bottom: -20rpx;
+							left: 50%;
+							word-break: break-all;
+							margin-left: -50%;
+							background-color: #fff;
+							padding: 1rpx 20rpx;
+							font-size: 24rpx;
+							color: #333;
+							line-height: 24rpx;
+						}
+					}
+				}
+			}
+			.arrow-right{
+				width: 48rpx;
+				height: 48rpx;
+			}
+			
+		}
+		
+		.list{
+			.list-item{
+				background: #FFFFFF;
+				box-shadow: 0rpx 0rpx 8rpx 1rpx $color7;
+				border-radius: 10rpx 10rpx 10rpx 10rpx;
+				padding: 24rpx;
+				.list-item-view{
+					flex: 1;
+				}
+				.right-icon{
+					width: 48rpx;
+					height: 48rpx;
+				}
+				.title-pic{
+					width: 68rpx;
+					height: 68rpx;
+					margin-right: 24rpx;
+				}
+			}
+		}
+	}
+	
+	.views{
+		background-color: #fff;
+		padding: 36rpx 28rpx;
+		.views-icon{
+			width: 83rpx;
+			height: 83rpx;
+		}
+	}
+	.detailed{
+		padding: 24rpx 28rpx;
+		.detailed-icon{
+			width: 36rpx;
+			height: 36rpx;
+		}
+	}
+</style>

pages/Match/match-detail.vue

@@ -0,0 +1,419 @@
+<template>
+	<view class="detail">
+		<view class="detail-head" v-if="dispalyTop">
+			<div class="header">
+				<img class="logo" src="/static/logo_big.png" alt="">
+				<div class="flex">
+					<img class="msg" src="/static/image/match/msg-icon.png" alt="">
+					<u--image
+          	class="border"
+						:showLoading="true"
+						:src="info.avatar || '/static/image/match/[email protected]'"
+          	@click="go('/pages/Match/member/usermanger', true)"
+						width="24px"
+						height="24px"
+						shape="circle"
+					></u--image>
+				</div>
+			</div>
+			<div class="title-box">
+				<div class="flex" @click="stepBack">
+          <u-icon name="arrow-left" color="#ffffff" size="16px" bold></u-icon>
+          <!-- Live matches -->
+					{{ tournament_name }}
+        </div>
+			</div>
+			<view class="nav">
+				<view class="nav-name flex font32">
+					<text>{{match_detail.home_name}}</text>
+					<text>{{match_detail.away_name}}</text>
+				</view>
+				<view class="nav-score flex">
+					<view class="nav-score-li flex-start">
+						<image :src="match_detail.home_logo || '/static/image/common/team.png'" mode="aspectFit"></image>
+						<view class="font36">{{match_detail.home_display_score}}</view>
+						<text class="font24">({{match_detail.home_display_overs}})</text>
+					</view>
+					<image  v-if="match_detail.status == 2" src="/static/image/match/[email protected]" class="nav-score-center" mode=""></image>
+					<view class="nav-score" style="text-align: center;" v-if="match_detail.status == 0">
+						{{ $t('match.lab76') }}<text style="color: #ff4100;">{{match_detail.live_time}}</text>
+					</view>
+					<view class="nav-score-li flex-start">
+						<text class="font24">({{match_detail.away_display_overs}})</text>
+						<view class="font36">{{match_detail.away_display_score}}</view>
+						<image style="margin: 0;margin-left: 16rpx;" :src="match_detail.away_logo || '/static/image/common/team.png'" mode="aspectFit"></image>
+					</view>
+				</view>
+				
+				<!-- <view class="nav-score" style="text-align: center;" v-if="match_detail.status == 1">
+					456456464
+				</view> -->
+				
+				<!-- <view class="nav-score" style="text-align: center;" v-if="match_detail.status == 2">
+					match starts in <text style="color: #ff4100;">{{match_detail.live_time}}</text>
+				</view> -->
+				
+				<view class="nav-time font28">
+					{{match_detail.match_result}}
+				</view>
+				<!-- <view class="nav-tab flex" v-if="match_detail.status==1">
+					<view class="" @click="liveStatusTop()">
+						Live animation
+					{{ $t('match.lab77') }}
+					</view>
+					<text>|</text>
+					<view class="" @click="liveStatusChange">
+						Live video
+					{{ $t('match.lab78') }}
+					</view>
+				</view>
+				<view class="width150 nav-tab "   v-else>
+					<view class="text-center" @click="liveStatusTop()">
+						Live animation
+					{{ $t('match.lab77') }}
+					</view>
+				
+				</view> -->
+			</view>
+		</view>
+		<view class="">
+			<view style="height: 300px;overflow: hidden;" v-if="liveStatus == 1">
+				<iframe style="width: 100%;" height="300" :src="match_detail.live_path" frameborder="0"></iframe>
+			</view>
+			<view style="height: 306px;overflow: hidden;" v-if="liveStatus == 2">
+				<iframe style="width: 100%;" height="306" :src="match_detail.live_url" frameborder="0"></iframe>
+			</view>
+		</view>
+
+		<view class="detail-tab">
+			<u-tabs
+			:list="list1"
+			:current="Index"
+			lineWidth="80rpx"
+			@click="changeTab" 
+			lineHeight="4" 
+			:scrollable="true"
+			lineColor="#DC3C23"
+			:activeStyle="{color:'#DC3C23',fontSize:'32rpx'}" 
+			:inactiveStyle="{color:'#333',fontSize:'32rpx'}"
+			></u-tabs>
+		</view>
+		<!-- <u-sticky offset-top="0"> -->
+			
+		<!-- </u-sticky> -->
+		<view class="content">
+			<Fantasy v-if="Index == 0" :info="match_detail" ref="fantasy"></Fantasy>
+			<Info v-if="Index == 1" :matchDetail="match_detail" ref="info" />
+			<Live v-if="Index == 2" ref="live" />
+			<Scorecard v-if="Index == 3" :list="competition_list" :matchDetail="match_detail" ref="Scorecard" />
+			<Updates v-if="(Index == 4 && updateList.length)" :list="updateList" ref="Updates" />
+			<Squad v-if="(Index == 5 || (Index == 4 && updateList.length == 0))" :matchDetail="match_detail" ref="squad"/>
+		</view>
+	</view>
+</template>
+
+<script>
+	import Fantasy from './compontent/fantasy.vue';
+	import Info from './compontent/Info.vue';
+	import Live from './compontent/live.vue';
+	import Scorecard from './compontent/Scorecard.vue';
+	import Updates from './compontent/Updates.vue';
+	import Squad from './compontent/Squad.vue';
+	
+	export default {
+		components:{Fantasy,Info,Live,Scorecard,Updates,Squad},
+		data() {
+			return {
+				Index:0,
+				parent:{},
+				liveStatus:0,
+				match_detail:{},
+				competition_list: [],
+				dispalyTop:true,
+				updateList: [],
+				list1: [
+					{
+						name: this.$t('match.lab31'),
+					},
+					{
+						name: this.$t('live.detailTab4'),
+					},
+					{
+						name: this.$t('live.detailTab3'),
+					},
+					// {
+					// 	name: 'highlights',
+					// },
+					{
+						name: this.$t('live.detailTab5'),
+					},
+					// {
+					// 	name: this.$t('match.lab79'),
+					// },
+					{
+						name:this.$t('live.detailTab6')
+					}
+				],
+				time1: null,
+				tournament_name: ''
+			}
+		},
+		computed: {
+			info() {
+				return this.$store.state.info;
+			},
+			isLogin() {
+				return this.$store.state.isLogin;
+			},
+			system() {
+				return this.$store.state.system;
+			},
+		},
+		onLoad(option) {
+			this.parent = option;
+			if (this.parent.live == 1) {
+				this.Index = 2
+			}
+			this.cricket_match_detail()
+		},
+		onPullDownRefresh() {
+			// this.page = 1
+			this.changeTab({index:this.Index})
+			setTimeout(res=>{
+				uni.stopPullDownRefresh()
+			},1500)
+		},
+		onUnload() {
+			this.time1 && clearInterval(this.time1);
+		},
+		methods: {
+			// 显示隐藏顶部，并更改状态
+			liveStatusTop(){
+				this.liveStatus = 1
+				this.dispalyTop = false
+			},
+			leftClick() {
+				if(this.liveStatus == 1 || this.liveStatus == 2){
+					this.liveStatus = 0
+				}else {
+					this.$back()
+				}
+			},
+			changeTab(e) {
+				this.Index = e.index
+				if(e.index == 0) {
+					this.$nextTick(res=>{
+						// this.$refs.fantasy.cricket_tournament_standings(this.match_detail.tournament_id);
+						this.$refs.fantasy.cricket_match_detail_fantasy(this.match_detail.match_id);
+					})
+				}else if(e.index == 1) {
+					this.$nextTick(res=>{
+						this.$refs.info.cricket_tournament_standings(this.match_detail.tournament_id);
+						this.$refs.info.cricket_match_detail_info(this.parent.id);
+					})
+				}else if(e.index == 2) {
+					this.$nextTick(res=>{
+						this.$refs.live.cricket_match_detail_live(this.match_detail.match_id);
+					})
+				}else if(e.index == 4) {
+					if (this.updateList.len == 0) {
+						this.$refs.squad.cricket_match_detail_squad(this.match_detail);
+					}
+					// this.$nextTick(res=>{
+					// 	this.$refs.Updates.getList(this.match_detail.match_id,0);
+					// })
+				}else if(e.index == 5) {
+					this.$nextTick(res=>{
+						this.$refs.squad.cricket_match_detail_squad(this.match_detail);
+					})
+				}
+			},
+			/* 获取详情 */
+			cricket_match_detail() {
+				let time = new Date();
+				let timeZone = time.toLocaleTimeString('en-us',{timeZoneName:'short'});  //'1:12:38 PM GMT+8'
+				let timeZoneId = Intl.DateTimeFormat().resolvedOptions().timeZone; //'Asia/Shanghai'
+				uni.$u.http.post('/api/Cricket/cricket_match_detail',{match_id:this.parent.id,timezone:timeZoneId}).then(res=>{
+					this.match_detail = res;
+					this.competition_list = res.competition_list || []
+					this.getUpdate(this.match_detail.match_id,0)
+					this.cricket_match_detail_info(this.match_detail.match_id)
+					this.changeTab({index:this.Index})
+					if (this.parent.animation) {
+						this.liveStatusTop()
+					}
+				}).catch(res=>{})
+			},
+			liveStatusChange() {
+				this.liveStatus = 2;
+				// let watchingOutSign = localStorage.getItem('watchingOutSign')
+				// if (watchingOutSign && this.isLogin != 1) {
+				// 	this.$r.loginBox()
+				// 	this.$store.state.loginShowSign = true
+				// 	this.$store.state.loginShowCloseSign = false;
+				// } else {
+					this.getIsLogin()
+				// }
+			},
+			/* 判断是否登录 未登录情况下只能停留3分钟 180秒 */
+			getIsLogin() {
+				let that = this;
+				if (this.isLogin == 1) return;
+				uni.$u.http.get('/api/universal/getHot', {}).then(res => {
+					this.$store.state.system = res;
+					if (!this.system.login_remind || Number(this.system.login_remind) > 5000) return;
+						this.time1 = setTimeout((res) => {
+							if (this.isLogin == 1) {
+								return
+							}
+							localStorage.setItem('watchingOutSign', true)
+							this.$toast(this.$t('live.lab40'));
+							setTimeout((res1) => {
+								this.$toUrl('/pages/login/login')
+							}, 1500);
+						}, this.system.login_remind * 60000);
+				})
+			},
+			stepBack() {
+				uni.switchTab({
+					url: '/pages/Match/Match'
+				})
+			},
+			/* 详情 */
+			cricket_match_detail_info(id) {
+				let time = new Date();
+				let timeZone = time.toLocaleTimeString('en-us',{timeZoneName:'short'});  //'1:12:38 PM GMT+8'
+				let timeZoneId = Intl.DateTimeFormat().resolvedOptions().timeZone; //'Asia/Shanghai'
+				uni.$u.http.post('/api/Cricket/cricket_match_detail_info',{match_id:id,timezone:timeZoneId}).then(res=>{
+					this.tournament_name = res.tournament_name;
+				}).catch(res=>{})
+			},
+			go(url, login) {
+				if (this.isLogin == 2 && login) {
+					this.$toUrl('/pages/login/login')
+					return
+				}
+				this.$toUrl(url)
+			},
+			getUpdate(id, type) {
+				uni.$u.http.post('/api/Cricket/cricket_match_detail_updates',{id:id,type:type}).then(res=>{
+					this.updateList = (res || []);
+					if (this.updateList.length) {
+						this.list1 = [
+								{
+									name: this.$t('match.lab31'),
+								},
+								{
+									name: this.$t('live.detailTab4'),
+								},
+								{
+									name: this.$t('live.detailTab3'),
+								},
+								// {
+								// 	name: 'highlights',
+								// },
+								{
+									name: this.$t('live.detailTab5'),
+								},
+								{
+									name: this.$t('match.lab79'),
+								},
+								{
+									name:this.$t('live.detailTab6')
+								}
+							]
+					}
+				}).catch(res=>{})
+			}
+		},
+	}
+</script>
+
+<style lang="scss">
+	.detail-head {
+		position: sticky;
+		top: 0;
+		z-index: 9;
+		overflow: hidden;
+		background: url(/static/image/match/[email protected]) center top / 100% 100% no-repeat;
+		.header {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			padding: 8rpx 16px 16rpx;
+			background-color: #10044A;
+			.msg {
+				width: 19px;
+				margin-right: 16px;
+			}
+			.border {
+				border: 1px solid #CC2900;
+				border-radius: 50%;
+			}
+		}
+		.logo {
+			height: 24px;
+		}
+		.title-box {
+			height: 40px;
+			background-color: #262E4A;
+			padding: 0 16px;
+			display: flex;
+			align-items: center;
+			color: #fff;
+			font-weight: 500;
+			font-size: 16px;
+			.u-icon {
+				margin-right: 10px;
+			}
+		}
+		.nav {
+			color: #fff;
+			padding: 0 52rpx;
+		}
+		.nav-name  {
+			margin-top: 54rpx;
+			text {
+				max-width: 30%;
+				text-align: center;
+			}
+		}
+		.nav-score-center {
+			width: 48rpx;
+			height: 48rpx;
+			margin: 0 54rpx;
+		}
+		.nav-score-li {
+			image {
+				width: 80rpx;
+				height: 80rpx;
+				margin-right: 16rpx;
+			}
+			text {
+				// margin-top: 20rpx;
+				// align-self: flex-end;
+			}
+		}
+		.nav-time {
+			margin-top: 34rpx;
+			margin-bottom: 102rpx;
+			text-align: center;
+		}
+		.width150{
+			width: 290rpx  !important;
+		}
+		.nav-tab {
+			width: 506rpx;
+			margin: 24rpx auto;
+			padding: 6rpx 6rpx;
+			border-radius: 40rpx;
+			background-color:  rgba(0,0,0,0.5);
+		}
+		
+
+	}
+	.detail-tab {
+		z-index: 999;
+		background-color: $color6;
+	}
+</style>

pages/Match/match-list.vue

@@ -0,0 +1,365 @@
+<template>
+	<view class="select">
+		<view class="select-head">
+			<u-navbar :leftText="parent.title" titleWidth="200" bgColor="transparent" leftIconColor="#fff" :titleStyle="{color:'#fff'}" :fixed="false" leftIconSize="48" :autoBack="true"></u-navbar>
+			<view class="select-tab">
+				<u-tabs
+				:list="list1"
+				lineWidth="100rpx"
+				@click="changeTab" 
+				lineHeight="4" 
+				lineColor="#DC3C23"   
+				:activeStyle="{color:'#DC3C23',fontSize:'32rpx',fontWeight:'Bold'}" 
+				:inactiveStyle="{color:'#fff',fontSize:'32rpx'}"
+				></u-tabs>
+			</view>
+		</view>
+		<view class="list" v-if="activeIndex == 0">
+			<view class="li" :class="{'match-target': item.id == parent.matchid}" v-for="(item,index) in tournament_match" :key="index" @click="$toUrl('./match-detail?id=' + item.id + '&title=' + parent.title)">
+				<view class="li-top flex">
+					<!-- status 0未开始  1已开始  2已结束 -->
+					<view class="flex-start font28">
+						<image src="/static/image/match/begin.png" mode="" v-if="item.status == 1"></image>
+						<text v-if="item.status == 0" class="begin">{{item.live_time}}</text>
+						<!-- <text v-if="item.status == 2">{{item.match_result}}</text> -->
+						{{item.match_num}}
+						<!-- {{item1.status == 0?item1.live_time+ ' ' + :item1.match_result}} -->
+					</view>
+					<!-- <image src="/static/image/match/[email protected]" mode=""></image> -->
+				</view>
+				<view class="li-team flex font32">
+					<view class="flex-start">
+						<image :src="item.home_logo || '/static/image/common/team.png'" mode="aspectFit"></image>
+						{{item.home_name}}
+					</view>
+					<view class="li-team-value" :style="{color:item.match_result_type == 'w'?'#000':'#666'}">
+						{{item.home_display_score}}
+					</view>
+				</view>
+				<view class="li-team flex">
+					<view class="flex-start">
+						<image :src="item.away_logo || '/static/image/common/team.png'" mode="aspectFit"></image>
+						{{item.away_name}}
+					</view>
+					<view class="" :style="{color:item.match_result_type == 'r'?'#000':'#666'}">
+						{{item.away_display_score}}
+					</view>
+				</view>
+				<view class="li-foot font28">
+					{{item.match_result}}
+				</view>
+			</view>
+			<u-empty
+				v-if="tournament_match && tournament_match.length == 0"
+				mode="data"
+				width="474"
+				height="312"
+				textSize="28"
+				marginTop="100"
+				:text="$t('common.nodata')"
+				icon="/static/image/common/nodata.png"
+			>
+			</u-empty>
+		</view>
+		<view v-else-if="activeIndex == 1">
+			<view class="stats-main mg-tp12">
+				<view class="flex-start stats-main-title">
+					<view></view>
+					<text class="size36 c3 Bold">
+						{{ $t('match.lab80') }}
+					</text>
+				</view>
+				
+				<view class="stats-main-content">
+					<u-row v-for="item in 5" :key="item" justify="space-between"  @click="toUrl(0,item)">
+						<view>
+							<text class="size32 c3 Bold">{{item == 1?'Highest Individual Score':item == 2?'Most Runs':item == 3?'Best Batting Average':item == 4?'Highest Strike Rate':'Maximum Sixes'}}</text>
+							<view class="mg-tp16 size c3">
+								{{item == 1?stats.highest_score_name:item == 2?stats.most_runs_name:item == 3?stats.best_battingAv_name:item == 4?stats.highest_strikeRate_name:stats.maximum_sixes_name}} - <text class="Bold">
+								{{item == 1?stats.highest_score:item == 2?stats.most_runs:item == 3?stats.best_battingAv:item == 4?stats.highest_strikeRate:stats.maximum_sixes}}
+								</text>
+							</view>
+						</view>
+						<image src="../../static/image/match/[email protected]" mode="heightFix" class="arrow-right"></image>
+					</u-row>
+				</view>
+			</view>
+			<u-gap bgColor="#E5E5E5" heignt="24"></u-gap>
+			
+			<view class="stats-main mg-tp12">
+				<view class="flex-start stats-main-title">
+					<view></view>
+					<text class="size36 c3 Bold">
+						{{ $t('match.lab81') }}
+					</text>
+				</view>
+				<view class="stats-main-content">
+					<u-row v-for="item in 3" justify="space-between" :key="item" @click="toUrl(5,item)">
+						<view>
+							<text class="size32 c3 Bold">{{item == 1?'Most Wickets':item == 2?'Best Bowling Average':'Best Bowling Economy'}}</text>
+							<view class="mg-tp16 size c3">
+								{{item == 1?stats.most_wickets_name:item == 2?stats.best_bowling_average_name:stats.best_bowling_economy_name}} - <text class="Bold">{{item == 1?stats.most_wickets:item == 2?stats.best_bowling_average:stats.best_bowling_economy}}</text>
+							</view>
+						</view>
+						<image src="../../static/image/match/[email protected]" mode="heightFix" class="arrow-right"></image>
+					</u-row>
+				</view>
+			</view>
+			<view class="stats-main mg-tp12" style="display: none;">
+				<view class="flex-start stats-main-title">
+					<view></view>
+					<text class="size36 c3 Bold">
+						{{ $t('match.lab82') }}
+					</text>
+				</view>
+				<view class="stats-main-content">
+					<u-row v-for="item in 3" justify="space-between" :key="item" @click="toUrl(8,item)">
+						<view>
+							<text class="size32 c3 Bold">{{item == 1?'Most Catches':item == 2?'Most Run Outs':'Most Stumpings'}}</text>
+							<view class="mg-tp16 size c3">
+								{{item == 1?stats.most_catches_name:item == 2?stats.most_run_outs_name:stats.most_stumpings_name}} - <text class="Bold">{{item == 1?stats.most_catches:item == 2?stats.most_run_outs:stats.most_stumpings}}</text>
+							</view>
+						</view>
+						<image src="../../static/image/match/[email protected]" mode="heightFix" class="arrow-right"></image>
+					</u-row>
+				</view>
+			</view>
+		</view>
+		<Teams ref="teams" v-else-if="activeIndex == 2" />
+		<Points ref="points"  v-else-if="activeIndex == 3" />
+		<Updates  v-else-if="activeIndex == 4" ref="Updates" />
+	</view>
+</template>
+
+<script>
+	import Teams from './compontent/Teams.vue';
+	import Points from './compontent/Points.vue';
+	import Updates from './compontent/Updates.vue'
+	export default {
+		components:{Teams,Points,Updates},
+		data(){
+			return {
+				list1:[
+					{
+						name: this.$t('match.lab83'),
+					},
+					{
+						name: this.$t('match.lab84'),
+					},
+					{
+						name: this.$t('match.lab'),
+					},
+					{
+						name: this.$t('match.lab85'),
+					},
+					// {
+					// 	name: this.$t('match.lab79'),
+					// }
+				],
+				page:1,
+				parent:{
+					title:'',
+				},
+				stats:{},//Stats
+				status:'more',
+				firstSign: false,
+				tournament_team:[],
+				activeIndex:0,
+				tournament_match:[],
+			}
+		},
+		onLoad(option) {
+			this.parent = option;
+			this.get_cricket_tournament_match()
+		},
+		onPullDownRefresh() {
+			this.page = 1;
+			this.changeTab({index:this.activeIndex})
+			setTimeout(res=>{
+				uni.stopPullDownRefresh()
+			},1500)
+		},
+		onReachBottom() {
+			if(this.status == 'more' && this.activeIndex == 0) {
+				this.get_cricket_tournament_match()
+			}
+		},
+		methods: {
+			
+			toUrl(type,i) {
+				let title = this.parent.type.toUpperCase()
+				this.$toUrl(`./stats-detail?id=${this.parent.id}&type=${(type+i) - 1}&title=Tour Stats：${title}`)
+				// ''+parent.id+ '&title=' + parent.title
+			},
+			
+			get_cricket_tournament_match() {
+				let time = new Date();
+				this.status = 'loading';
+				let timeZone = time.toLocaleTimeString('en-us',{timeZoneName:'short'});  //'1:12:38 PM GMT+8'
+				let timeZoneId = Intl.DateTimeFormat().resolvedOptions().timeZone; //'Asia/Shanghai'
+				uni.$u.http.post('/api/Cricket/get_cricket_tournament_match',{tournament_id:this.parent.id,timezone:timeZoneId,page:this.page}).then(res=>{
+					
+					if(this.page == 1) {
+						this.tournament_match = res.data
+					}else {
+						this.tournament_match = this.tournament_match.concat(res.data);
+					}
+					if(res.tatal == 0) {
+						this.status = 'none'
+					}
+					if(this.tournament_match.length < res.total) {
+						this.status = 'more'
+						this.page++
+					}else {
+						this.status = 'noMore'
+					}
+					!this.firstSign && this.$nextTick(() => {
+						uni.pageScrollTo({
+							duration: 0,
+							selector: '.match-target',
+						});
+						this.firstSign = true
+					})
+					// }
+				}).catch(res=>{})
+				
+				uni.$u.http.post('/api/Cricket/get_tournament_stats',{id:this.parent.id}).then(res=>{
+					this.stats = res
+				}).catch(res=>{})
+				
+			},
+			/* 获取团队列表 */
+			get_tournament_team() {
+				uni.$u.http.post('/api/Cricket/get_tournament_team',{tournament_id:this.parent.id}).then(res=>{
+					this.tournament_team = res
+				}).catch(res=>{})
+			},
+			
+			
+			changeTab(e) {
+				this.activeIndex = e.index
+				if(e.index == 0){
+					this.get_cricket_tournament_match()
+				}else if(e.index == 2) {
+					this.$nextTick(res=>{
+						this.$refs.teams.get_tournament_team(this.parent.id)
+					})
+					
+				}else if(e.index == 3) {
+					this.$nextTick(res=>{
+						this.$refs.points.cricket_tournament_standings(this.parent.id)
+					})
+					
+				}else if(e.index == 4) {
+					this.$nextTick(res=>{
+						this.$refs.Updates.getList(this.parent.id,1)
+					})
+				}
+			}
+		},
+	}
+</script>
+
+<style lang="scss">
+	/deep/.u-navbar__content__left__text {
+		width: 90%;
+		display: block;
+		overflow: hidden;
+		/* //超出的文本隐藏 */
+		text-overflow: ellipsis;
+		/* //溢出用省略号显示 */
+		white-space: nowrap;
+		/* //溢出不换行 */
+	}
+	.select-head {
+		position: sticky;
+		top: 0;
+		z-index: 99;
+		background-color: $color1;
+		.select-tab {
+			padding: 0 28rpx;
+			margin-top: 20rpx;
+		}
+	}
+	.list {
+		padding: 0 28rpx;
+		padding-bottom: 100rpx;
+		.li {
+			padding: 24rpx;
+			box-shadow: 0px 0px 8rpx 0px $color7;
+			border-radius: 10rpx;
+			margin-top: 24rpx;
+		}
+		.li-top {
+			color: $color4;
+		
+			image {
+				width: 36rpx;
+				height: 36rpx;
+			}
+			view {
+				image {
+					width: 82rpx;
+					height: 42rpx;
+					margin-right: 16rpx;
+				}
+			}
+			text {
+				margin-right: 16rpx;
+			}
+			.begin {
+				color: #666;
+				padding: 0 10rpx;
+				background-color: #E5E5E5;
+			}
+		}
+		.li-team {
+			width: 80%;
+			margin-top: 24rpx;
+			image {
+				width: 56rpx;
+				height: 56rpx;
+				margin-right: 16rpx;
+			}
+			.li-team-value {
+				color: $color4;
+			}
+		}
+		.li-foot {
+			color: $color4;
+			margin-top: 24rpx;
+		}
+	}
+	
+	.stats-main{
+		padding: 24rpx 28rpx;
+		.stats-main-title{
+			view{
+				width: 6rpx;
+				height: 40rpx;
+				background: #DC3C23;
+				margin-right: 16rpx;
+			}
+		}
+		.stats-main-content{
+			margin-top: 29rpx;
+			background: #FFFFFF;
+			box-shadow: 0rpx 0rpx 8rpx 1rpx $color7;
+			border-radius: 10rpx 10rpx 10rpx 10rpx;
+			.u-row{
+				border-bottom: 1rpx solid #E5E5E5;
+				padding: 24rpx;
+				.arrow-right{
+					width: 48rpx;
+					height: 48rpx;
+				}
+			}
+		}
+	}
+	
+	
+	
+	
+	
+	
+</style>

pages/Match/member/author.vue

@@ -0,0 +1,252 @@
+<template>
+	<view class="contain">
+		<view class="select-head">
+			<u-navbar bgColor="transparent" leftIconColor="#fff" :titleStyle="{color:'#fff'}" :fixed="false" leftIconSize="48" :autoBack="true">
+				<view slot="center" class="navbar-center">
+					 <u-tabs 
+					 :list="list1" 
+					 lineWidth="126rpx"
+					 @click="changeTab" 
+					 lineHeight="2" 
+					 lineColor="#DC3C23" 
+					 :scrollable="false"   
+					 :activeStyle="{color:'#DC3C23',fontSize:'34rpx'}" 
+					 :inactiveStyle="{color:'#fff',fontSize:'34rpx'}
+					 "></u-tabs>
+				</view>
+			</u-navbar>
+			<view class="match-head-tab" v-if="list1Index == 0">
+				 <u-tabs 
+				 :list="list2" 
+				 lineWidth="126rpx"
+				 @click="changeTab2" 
+				 lineHeight="2" 
+				 lineColor="#DC3C23" 
+				 :scrollable="false"   
+				 :activeStyle="{color:'#DC3C23',fontSize:'32rpx'}" 
+				 :inactiveStyle="{color:'#fff',fontSize:'32rpx'}
+				 "></u-tabs>
+			</view>
+		</view>
+		<view class="main">
+			<view>
+				<view class="list-item flex-start" v-for="(item,index) in list" :key="index" style="position: relative;">
+					<!-- actives:item!==2 -->
+				
+					<image  :src="item.avatar || '/static/image/common/[email protected]'" mode="aspectFill" class="avatar"></image>
+					<!-- <u-tag style="position: absolute;top: 42px;left: 22px;"   text="Live" :type="item.is_live!=1?'info':'error'" size="mini" mode="drak" />	 -->
+					<view v-if="item.is_anchor==1">
+						<image v-if="item.is_live!=1" style="position: absolute;top: 100rpx;left: 44rpx; height: 30rpx; width:70rpx;"  src="../../../static/image/common/nolive.png"></image>
+						<image v-else style="position: absolute;top: 100rpx;left: 44rpx;height: 30rpx; width:70rpx;" src="../../../static/image/common/live.png"></image>
+					</view>				
+					<view class="list-item-content c9 size24">
+						<view class="mg-tp6">
+							<view class="size28 c3" style="padding-bottom: 16rpx;">{{item.user_nickname}}</view>
+							<text>{{ $t('member.lab2') }}: {{item.attention}}</text>
+							<!-- <view style="padding-top: 16rpx;">Online</view> -->
+						</view>
+						<view class="flexcenter flex-col align-start">
+							<view class="paid size28" v-if="list1Index == 0" @click="setAttention(item)">
+								<!-- Followed -->
+								{{ $t('member.lab') }}
+							</view>
+							<template v-if="list1Index == 1">
+								<view class="paid size28" v-if="item.is_attention == 1" @click="setAttention(item)">
+									<!-- Followed -->
+								{{ $t('member.lab') }}
+								</view>
+								<view class="guanzhu-box" v-if="item.is_attention == 0" @click="setAttention(item)">
+									<image src="../../../static/image/match/guanzhu.png" mode="widthFix" class="guanzhu-icon mg-rt12"></image>
+									<text class="size28 cfff">{{ $t('member.lab1') }}</text>
+								</view>
+							</template>
+							<!-- <text v-if="item.is_attention == 1">Number of fans: 44</text> -->
+						</view>
+					</view>
+				</view>
+				
+				<u-empty
+					v-if="list && list.length == 0"
+					mode="data"
+					width="474"
+					height="312"
+					textSize="28"
+					marginTop="100"
+					:text="$t('common.nodata')"
+					icon="/static/image/common/nodata.png"
+				>
+				</u-empty>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				list1Index:0,
+				list1:[
+					{
+						name: this.$t('member.tab1'),
+					},
+					{
+						name: this.$t('member.tab2'),
+					},
+				],
+				type:0,
+				list:[],
+				list2:[
+					{
+						name: this.$t('member.tab3'),
+					},
+					{
+						name: this.$t('member.tab4'),
+					},
+			
+				],
+			};
+		},
+		onReady() {
+			this.getList()
+		},
+		computed:{
+			info() {
+				return this.$store.state.info
+			}
+		},
+		methods:{
+			changeTab(e) {
+				this.list1Index = e.index
+				if(this.list1Index == 1) {
+					this.type = 0
+					this.watchlistList()
+				}else {
+					this.getList()
+				}
+			},
+			changeTab2(e) {
+				this.type = e.index
+				this.getList()
+			},
+			getList() {
+				uni.showLoading({
+					title:this.$t('common.lab')
+				})
+				uni.$u.http.get('api/User/attentionList',{params:{type:this.type == 0 ? 0 : 2}}).then(res=>{
+					this.list = res.data || []
+					uni.hideLoading()
+				}).catch(res=>{})
+			},
+			watchlistList() {
+				uni.showLoading({
+					title:this.$t('common.lab')
+				})
+				uni.$u.http.get('api/User/watchlistList',{params:{type:0,uid:this.info.id}}).then(res=>{
+					this.list = res.data || []
+					uni.hideLoading()
+				}).catch(res=>{})
+			},
+			/* type == 1取消 2关注 */
+			setAttention(item){
+				uni.showLoading({
+					title:this.$t('common.lab')
+				})
+				uni.$u.http.post('/api/Member/attention',{id: this.list1Index == 1 ? item.uid : item.followed_id}).then(res=>{
+					uni.hideLoading()
+					if(this.list1Index == 1) {
+						this.watchlistList()
+					}else {
+						this.getList()
+					}
+				}).catch(res=>{})
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.contain{
+		min-height: 100vh;
+		background-color: #F3F3F7;
+	}
+	.navbar-center{
+		width: 520rpx;
+	}
+	.select-head {
+		position: sticky;
+		top: 0;
+		z-index: 99;
+		background-color: $color1;
+		.select-tab {
+			padding: 0 28rpx;
+			margin-top: 20rpx;
+		}
+	}
+	.match-head-tab {
+		padding: 0 52rpx;
+		// margin-top: 49rpx;
+	}
+	.main{
+		padding: 24rpx 28rpx;
+		.list-item{
+			margin-bottom: 24rpx;
+			padding: 28rpx 28rpx;
+			background-color: #fff;
+			border-radius: 12rpx;
+			.avatar{
+				width: 96rpx;
+				height: 96rpx;
+				border-radius: 200rpx;
+				margin-right: 20rpx;
+			}
+			.live{
+				position: relative;
+				&:before{
+					content: url(@/static/image/match/live.png);
+					width: 74rpx;
+					height: 28rpx;
+					position: absolute;
+					bottom: -12rpx;
+					margin-left: -50%;
+					left: 50%;
+				}
+			}
+			.actives{
+				&:before{
+					content: url(@/static/image/match/live-actives.png);
+					width: 74rpx;
+					height: 28rpx;
+					position: absolute;
+					bottom: -12rpx;
+					margin-left: -50%;
+					left: 50%;
+				}
+			}
+			.list-item-content{
+				flex: 1;
+				display: flex;
+				justify-content: space-between;
+				.paid{
+					padding: 8rpx 20rpx;
+					border-radius: 12rpx;
+					background-color: #ccc;
+					color: #fff;
+				}
+				.guanzhu-box{
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					background: url(@/static/image/match/right-bg.png)center center/ 100% 100% no-repeat;
+					width: 180rpx;
+					height: 59.54rpx;
+					.guanzhu-icon{
+						width: 28.82rpx;
+						height: 25.39rpx;
+					}
+				}
+			}
+		}
+		
+	}
+</style>

pages/Match/member/change-mobile.vue

@@ -0,0 +1,187 @@
+<template>
+	<view class="contain">
+		<view class="select-head">
+			<u-navbar :leftText="$t('navbar.txt3')" bgColor="transparent" leftIconColor="#333" :titleStyle="{color:'#333'}" :fixed="false" leftIconSize="48" :autoBack="true"></u-navbar>
+		</view>
+		<view class="main">
+			<view class="info flex mg-tp24">
+				<text class="size28 c3">
+					<!-- Cell-phone number -->
+					{{ $t('member.lab3') }}
+				</text>
+				<view class="flex-end">
+					<text class="c9">{{mobile1}}</text>
+					<!-- <image src="../../../static/image/match/arrow-right.png" mode="widthFix" class="arrow-right"></image> -->
+				</view>
+			</view>
+			
+			<view class="info flex size28 c9 flex">
+				<text class="c3" @click="region = true">+{{code1}}</text>
+				<input type="text" v-model="mobile"  :placeholder="$t('common.inputPhone')">
+			</view>
+			<view class="info flex size28 c9 flex">
+				<input v-model="code" type="text" :placeholder="$t('login.getCode')" maxlength="6" />
+				<u-toast ref="uToast"></u-toast>
+				<u-code :seconds="seconds" @end="end" @start="start" ref="uCode" 
+				@change="codeChange" changeText="xs" :startText="$t('login.getCode')" :endText="$t('login.getCode')"></u-code>
+				<u-button class="getcode" @tap="getCode">{{tips}}</u-button>
+			</view>
+		</view>
+		<u-picker mode="selector"  :cancelText="$t('news.cancel')" :confirmText="$t('news.confirm')" :columns="countryCode" @cancel="region=false" @confirm="regionConfirm" :show="region" keyName="nameCode" :default-selector="[0]"></u-picker>
+		<button type="default" @click="submit()" class="bgc23 cfff preservation">{{$t('login.confirm')}}</button>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				tips: '',
+				region:false,
+				code1:'65',
+				mobile:'',
+				code:'',
+				mobile1:'',
+				// refCode: null,
+				seconds: 60,
+				countryCode:[]
+			};
+		},
+		computed:{
+			info() {
+				return this.$store.state.info
+			},
+			system(){
+				return this.$store.state.system
+			},
+		},
+		mounted() {
+			this.getCountryCode()
+		},
+		onLoad() {
+			var reg=/(\d{3})\d{4}(\d{4})/; //正则表达式
+			var phone= this.info.mobile.replace(reg, "$1****$2")
+			this.mobile1 = phone
+		},
+		methods:{
+			regionConfirm(e) {
+				this.region = false;
+				this.code1 = e.value[0].code
+			},
+			//获取国家区号
+			getCountryCode(){
+				let CountryCode = []
+				console.log(this.system);
+				this.system.CountryCode.forEach(item=>{
+					item.nameCode =  '+' + item.code + ' ' + item.name
+				})
+				this.countryCode.push(this.system.CountryCode)
+				// console.log(this.countryCode);
+				
+			},
+			
+			submit() {
+				uni.$u.http.get('/api/member/updateInfo',{params:{code:this.code,mobile:this.code1 + '-' + this.mobile}}).then(res => {
+					uni.navigateBack({
+						delta:1
+					})
+				})
+			},
+			
+			codeChange(text) {
+				this.tips = text;
+			},
+			
+			
+			getCode() {
+				// let str = this.info.mobile;
+				// let i = str.indexOf("-");
+				// let code = str.slice(0,i);
+				// let mobile = str.slice(i+1,-1);
+				if(this.$refs.uCode.canGetCode) {
+					// 模拟向后端请求验证码
+					uni.showLoading({
+						title: this.$t('common.lab')
+					})
+					// let mobile = (this.from.code1).slice(1) + '-' + this.from.mobile
+					uni.$u.http.get('/api/user/getCode',{params:{type:9,mobile:this.info.mobile}}).then(res => {
+						uni.hideLoading();
+						// 这里此提示会被this.start()方法中的提示覆盖
+						uni.$u.toast(this.$t('login.lab13'));
+						// 通知验证码组件内部开始倒计时
+						this.$refs.uCode.start();
+					})
+				} else {
+					uni.$u.toast(this.$t('common.lab3'));
+				}
+			},
+			end() {
+				// uni.$u.toast('end');
+			},
+			start() {
+				// uni.$u.toast('start');
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.contain{
+		background: #F3F3F7;
+		min-height: 100vh;
+	}
+	.select-head {
+		position: sticky;
+		top: 0;
+		z-index: 99;
+		background-color: #FFF;
+		.select-tab {
+			padding: 0 28rpx;
+			margin-top: 20rpx;
+		}
+	}
+	.main{
+		padding: 0 24rpx;
+	}
+	.info{
+		padding: 30rpx 28rpx;
+		border-bottom: 2rpx solid #E9E9E9;
+		background-color: #FFF;
+		&:first-child{
+			border-radius: 12rpx 12rpx 0 0;
+		}
+		&:last-child{
+			border-radius: 12rpx 12rpx 0 0;
+		}
+		text {
+			margin-right: 20rpx;
+		}
+	}
+	.preservation{
+		padding: 0 30rpx;
+		border-radius: 200rpx;
+		color: #FFF;
+		margin-top: 96rpx;
+	}
+	.arrow-right{
+		width: 48.01rpx;
+		height: 48.01rpx;
+		margin-left: 6rpx;
+	}
+	input{
+		width: 100%;
+	}
+	.getcode{
+		width: 152rpx;
+		padding: 12rpx 0;
+		line-height: 48rpx;
+		font-size: 24rpx;
+		margin: 0;
+		height: 48rpx;
+		text-align: center;
+		background: #FFFFFF;
+		border-radius: 4rpx;
+		color: #DC3C23;
+		border: 2rpx solid #DC3C23;
+	}
+</style>

pages/Match/member/change-nickname.vue

@@ -0,0 +1,101 @@
+<template>
+	<view class="contain">
+		<view class="select-head">
+			<u-navbar :leftText="$t('navbar.txt4')" bgColor="transparent" leftIconColor="#333" :titleStyle="{color:'#333'}" :fixed="false" leftIconSize="48" :autoBack="true"></u-navbar>
+		</view>
+		<view class="main">
+			<view class="info flex mg-tp24">
+				<text class="size28 c3">
+					<!-- Nickname -->
+					{{ $t('member.lab4') }}
+				</text>
+				<view class="flex-end">
+					<text class="c9">{{info.user_nickname}}</text>
+					<image src="/static/image/match/arrow-right.png" mode="widthFix" class="arrow-right"></image>
+				</view>
+			</view>
+			
+			<view class="info flex size28 c9">
+				<input type="text" v-model="value" maxlength="10" :placeholder="$t('member.lab5')">
+			</view>
+			
+			<button type="default" @click="submit()" class="bgc23 cfff preservation">
+				<!-- Save -->
+				{{ $t('member.lab6') }}
+			</button>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				value:''
+			};
+		},
+		computed:{
+			info() {
+				return this.$store.state.info
+			}
+		},
+		methods:{
+			submit() {
+				if(!this.value) return
+				uni.$u.http.get('api/member/updateInfo',{params:{user_nickname:this.value}}).then(res=>{
+					this.$store.state.info.user_nickname = this.value
+					uni.navigateBack({
+						delta:1
+					})
+					this.$store.dispatch('editInfo', '')
+				}).catch(res=>{})
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.contain{
+		background: #F3F3F7;
+		min-height: 100vh;
+	}
+	.select-head {
+		position: sticky;
+		top: 0;
+		z-index: 99;
+		background-color: #FFF;
+		.select-tab {
+			padding: 0 28rpx;
+			margin-top: 20rpx;
+		}
+	}
+	.info{
+		padding: 30rpx 28rpx;
+		border-bottom: 2rpx solid #E9E9E9;
+		background-color: #FFF;
+		&:first-child{
+			border-radius: 12rpx 12rpx 0 0;
+		}
+		&:last-child{
+			border-radius: 12rpx 12rpx 0 0;
+		}
+	}
+	.main{
+		padding: 0 24rpx;
+	}
+	
+	.preservation{
+		padding: 0 30rpx;
+		border-radius: 200rpx;
+		color: #FFF;
+		margin-top: 96rpx;
+	}
+	.arrow-right{
+		width: 48.01rpx;
+		height: 48.01rpx;
+		margin-left: 6rpx;
+	}
+	input{
+		width: 100%;
+	}
+</style>

pages/Match/member/change-profile.vue

@@ -0,0 +1,93 @@
+<template>
+	<view class="contain">
+		<view class="select-head">
+			<u-navbar :leftText="$t('navbar.txt5')" bgColor="transparent" leftIconColor="#333" :titleStyle="{color:'#333'}" :fixed="false" leftIconSize="48" :autoBack="true"></u-navbar>
+		</view>
+		<view class="main">
+			<view class="info flex size28 mg-tp24 c9">
+				<!-- <input type="text" placeholder="Please enter a new nickname"> -->
+				<u-textarea value="" :show-confirm-bar="false" v-model="signature" :placeholder="$t('member.lab7')" confirmTyp="" :height="200" maxlength="100" count border="none"  />
+			</view>
+			
+			<button type="default" class="bgc23 cfff preservation" @click="submit()">
+				<!-- Save -->
+				{{ $t('member.lab6') }}
+			</button>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				signature:''
+			};
+		},
+		computed:{
+			info() {
+				return this.$store.state.info
+			}
+		},
+		mounted(){
+			this.signature = this.info.signature
+		},
+		methods:{
+			submit() {
+				if(!this.signature) return
+				uni.$u.http.get('api/member/updateInfo',{params:{signature:this.signature}}).then(res=>{
+					this.$store.state.info.signature = this.signature
+					uni.navigateBack({
+						delta:1
+					})
+				}).catch(res=>{})
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.contain{
+		background: #F3F3F7;
+		min-height: 100vh;
+	}
+	.select-head {
+		position: sticky;
+		top: 0;
+		z-index: 99;
+		background-color: #FFF;
+		.select-tab {
+			padding: 0 28rpx;
+			margin-top: 20rpx;
+		}
+	}
+	
+	.main{
+		padding: 0 24rpx;
+	}
+	.info{
+		padding: 30rpx 28rpx;
+		border-bottom: 2rpx solid #E9E9E9;
+		background-color: #FFF;
+		&:first-child{
+			border-radius: 12rpx 12rpx 0 0;
+		}
+		&:last-child{
+			border-radius: 12rpx 12rpx 0 0;
+		}
+	}
+	.preservation{
+		padding: 0 30rpx;
+		border-radius: 200rpx;
+		color: #FFF;
+		margin-top: 96rpx;
+	}
+	.arrow-right{
+		width: 48.01rpx;
+		height: 48.01rpx;
+		margin-left: 6rpx;
+	}
+	input{
+		width: 100%;
+	}
+</style>

pages/Match/member/infomation.vue

@@ -0,0 +1,162 @@
+<template>
+	<view class="contain">
+		<view class="select-head">
+			<u-navbar :leftText="$t('member.title')" bgColor="transparent" leftIconColor="#333" :titleStyle="{color:'#333'}" :fixed="false" leftIconSize="48" :autoBack="true"></u-navbar>
+		</view>
+		<view class="main">
+			<view class="user flex mg-tp24 inforound" @click="chooseImage()">
+				<image :src="info.avatar || '/static/image/common/[email protected]'" mode="aspectFill" class="avatar" ></image>
+				<view class="flex-end">
+					<text class="c9">{{$t('member.infoAvatar')}}</text>
+					<image src="/static/image/match/arrow-right.png" mode="widthFix" class="arrow-right"></image>
+				</view>
+			</view>
+			<navigator url="/pages/Match/member/change-nickname">
+				<view class="info flex mg-tp24 infohead">
+					<text class="size28 c3">{{$t('member.Nickname')}}</text>
+					<view class="flex-end">
+						<text class="c9">{{info.user_nickname}}</text>
+						<image src="/static/image/match/arrow-right.png" mode="widthFix" class="arrow-right"></image>
+					</view>
+				</view>
+			</navigator>
+			<navigator url="/pages/Match/member/change-profile">
+				<view class="info flex infolast">
+					<text class="size28 c3">{{$t('member.profile')}}</text>
+					<view class="flex-end mg-lt60">
+						<text class="c9 overflow1">{{info.signature}}</text>
+						<image src="/static/image/match/arrow-right.png" mode="widthFix" class="arrow-right"></image>
+					</view>
+				</view>
+			</navigator>
+			<navigator url="/pages/Match/member/change-mobile">
+				<view class="info flex mg-tp24 inforound ">
+					<text class="size28 c3">{{ $t('navbar.txt3') }}</text>
+					<view class="flex-end">
+						<text class="c9 overflow1">{{mobile1}}</text>
+						<image src="/static/image/match/arrow-right.png" mode="widthFix" class="arrow-right"></image>
+					</view>
+				</view>
+			</navigator>
+		</view>
+		
+		
+		<!-- <u-popup :show="homeShow" mode="bottom" round="20" @close="close" @open="open">
+			<view class="size32 c0">
+				<view class="list-item" @click="chooseImage('camera')">
+					camera
+				</view>
+				<u-line color="#707070"></u-line>
+				<view class="list-item" @click="chooseImage('album')">
+					album
+				</view>
+				<u-gap bgColor="#F3F3F7" height="18"></u-gap>
+				<view class="list-item" @click="homeShow = false">
+					cancel
+				</view>
+			</view>
+		</u-popup> -->
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				homeShow:false,
+				mobile1:''
+			};
+		},
+		computed:{
+			info() {
+				return this.$store.state.info
+			}
+		},
+		onLoad() {
+			console.log(this.info.mobile.length)
+			if(this.info.mobile.length === 14) {
+				var reg=/(\d{3})\d{4}(\d{4})/; //正则表达式
+				var phone= this.info.mobile.replace(reg, "$1****$2")
+				this.mobile1 = phone
+			} else{
+				var reg=/^(.{4}).*(.{4})$/;
+				var phone= this.info.mobile.replace(reg, "$1****$2")
+				this.mobile1 = phone
+			}
+
+		},
+		methods:{
+			close(){
+				this.homeShow = false
+			},
+			open(){
+				this.homeShow = true
+			},
+			chooseImage(type) {
+				let _this = this;
+				this.$common.chooseImage(1).then(res1=>{
+					uni.$u.http.get('api/member/updateInfo',{params:{avatar:res1}}).then(res=>{
+						_this.homeShow = false;
+						_this.$store.state.info.avatar = res1
+						
+					}).catch(res=>{})
+				}).catch(res=>{
+					
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.contain{
+		background: #F3F3F7;
+		min-height: 100vh;
+	}
+	.select-head {
+		position: sticky;
+		top: 0;
+		z-index: 99;
+		background-color: #FFF;
+		.select-tab {
+			padding: 0 28rpx;
+			margin-top: 20rpx;
+		}
+	}
+	.user{
+		padding: 24rpx 28rpx;
+		background-color: #ffffff;
+		.avatar{
+			width: 128rpx;
+			height: 128rpx;
+			border-radius: 50%;
+		}
+	}
+	.arrow-right{
+		width: 48.01rpx;
+		height: 48.01rpx;
+		margin-left: 6rpx;
+	}
+	
+	.main{
+		padding: 0 24rpx;
+	}
+	.info{
+		padding: 30rpx 28rpx;
+		border-bottom: 2rpx solid #E9E9E9;
+		background-color: #FFF;
+		&:first-child{
+			border-radius: 12rpx 12rpx 0 0;
+		}
+		&:last-child{
+			border-radius: 12rpx 12rpx 0 0;
+		}
+		text{
+			word-break: break-all;
+		}
+	}
+	.list-item{
+		text-align: center;
+		padding:  32rpx 0;
+	}
+</style>

pages/Match/member/usermanger.vue

@@ -0,0 +1,271 @@
+<template>
+	<view class="user">
+		<!-- 头部导航 -->
+		<view class="user-head">
+			<u-navbar :leftText="$t('navbar.txt6')" bgColor="transparent" leftIconColor="#fff" :titleStyle="{color:'#fff'}"
+				:fixed="false" leftIconSize="48" :autoBack="true"></u-navbar>
+		</view>
+		<!-- 个人信息 -->
+		<view class="user-bg">
+			<view class="user-top">
+				<view class="user-personal flex">
+					<div class="img-box">
+						<u--image
+							:showLoading="true"
+							:src="pageInfo.avatar || '/static/image/match/[email protected]'"
+							@click="infomationClick"
+							width="120rpx"
+							height="120rpx"
+							shape="circle"
+						></u--image>
+						<img v-if="pageInfo.is_live == 1" class="img" src="/static/image/match/live-actives.png" alt="">
+						<img v-else class="img" src="/static/image/match/live.png" alt="">
+					</div>
+					<view class="" style="margin-left: 27rpx; flex: 1;">
+						<view class="font32 cfff">{{ pageInfo.user_nickname }}</view>
+						<view class="cfff" style="font-size: 20rpx; margin-top: 12rpx;">{{ pageInfo.signature }}</view>
+					</view>
+					<view class="guanzhu-box" v-if="userId" @click="attention">
+						<image src="/static/image/match/guanzhu.png" mode="widthFix" class="guanzhu-icon mg-rt12">
+						</image>
+						<text class="size28 cfff">
+							<!-- Follow -->
+							{{ pageInfo.is_attention == 0 ? $t('match.la34') : $t('match.la38') }}
+						</text>
+					</view>
+				</view>
+				<view class="user-number flex" style="text-align: center;">
+					<view class="">
+						<view class="font32 cfff user-number-one">{{ pageInfo.follow_the_anchor || 0 }}</view>
+						<view class="cfff user-number-text" style="">
+							<!-- Follow the auchor -->
+							{{ $t('match.la35') }}
+						</view>
+					</view>
+					<view class="">
+						<view class="font32 cfff user-number-one">{{ pageInfo.follow_the_author || 0 }}</view>
+						<view class="cfff user-number-text">
+							<!-- Follow the author -->
+							{{ $t('match.la36') }}
+						</view>
+					</view>
+					<view class="">
+						<view class="font32 cfff user-number-one">{{ pageInfo.fans || pageInfo.attention || 0 }}</view>
+						<view class="cfff user-number-text">
+							<!-- Fans -->
+							{{ $t('match.la37') }}
+						</view>
+					</view>
+
+				</view>
+			</view>
+		</view>
+		<div class="list">
+			<u-empty
+        v-if="list == 0"
+        mode="data"
+        width="474"
+        height="312"
+        textSize="28"
+        marginTop="100"
+        :text="$t('common.nodata')"
+        icon="/static/image/common/nodata.png"
+      >
+      </u-empty>
+		</div>
+		<image src="/static/image/news/topic-top.png" v-if="!userId" class="topic-top" mode="aspectFill" @click="publishClick"></image>
+	</view>
+</template>
+
+<script>
+	import Post from '../../Match/compontent/Post.vue'
+	import Videos from '../../Match/compontent/Videos.vue'
+	import list from '../../News/list.vue'
+	export default {
+		components: {
+			Post,
+			Videos,
+			list
+		},
+		data() {
+			return {
+				show:false,
+				name: 'Post',
+				userId: '',
+				pageInfo: {},
+				list: [],
+				list2: [{
+					name: 'Post',
+				}, {
+					name: 'Videos',
+				}],
+				list3: [{
+					name: 'Cricket circle'
+				}, {
+					name: 'Great circle'
+				}, {
+					name: 'Hodgepodge'
+				}]
+			}
+		},
+		onLoad(option) {
+			if (option.id) {
+				this.userId = option.id
+			}
+		},
+		created() {
+			this.getInfo()
+		},
+		methods: {
+			/* 关注 */
+			attention() {
+				if (this.$store.state.isLogin != 1) {
+					this.$toUrl('/pages/login/login')
+					return
+				}
+				uni.showLoading({
+					title: this.$t('common.lab'),
+				});
+				uni.$u.http
+					.post("/api/Member/attention", {
+						id: this.pageInfo.uid,
+					})
+					.then((res) => {
+						this.getLiveDetail()
+					}).finally(() => {
+						uni.hideLoading();
+					});
+			},
+			getInfo() {
+				uni.showLoading({
+					title: this.$t('common.lab'),
+				});
+				if (this.userId) {
+					this.getLiveDetail()
+					return
+				}
+				uni.$u.http.get('/api/Member/info', {
+				}).then(res => {
+					this.pageInfo = res
+				}).finally(() => {
+					uni.hideLoading();
+				});
+			},
+			getLiveDetail() {
+				uni.$u.http.post("/api/Live_streaming/getRoomInfo", {
+					uid: this.userId,
+				}).then(res => {
+					this.pageInfo = res.userData;
+				}).finally(() => {
+					uni.hideLoading();
+				});
+			},
+			popupShow() {
+				this.show = !this.show
+			},
+			infomationClick() {
+				if (this.userId) {
+					return
+				}
+				uni.navigateTo({
+					url: './infomation'
+				});
+			},
+			changeClick(item) {
+				this.name = item.name
+			},
+			// 跳转发布页
+			publishClick() {
+				uni.navigateTo({
+					url: '../../News/publish'
+				});
+			}
+		}
+
+	}
+</script>
+
+<style lang="scss" scoped>
+	page {
+		background-color: #F3F3F7;
+	}
+
+	.user {
+		display: flex;
+		flex-direction: column;
+		height: 100vh;
+		.user-head {
+			position: absolute;
+		}
+
+		.user-bg {
+			width: 100%;
+			height: 464rpx;
+			background-color: #1D2550;
+
+			.user-top {
+				width: 100%;
+				height: 464rpx;
+				background: url('../../../static/image/match/user_bg.png') no-repeat;
+				background-size: 100%;
+
+				.user-personal {
+					padding: 160rpx 42rpx 0;
+					.img-box {
+						position: relative;
+						width: 120rpx;
+						height: 120rpx;
+					}
+					.img {
+						position: absolute;
+						bottom: 0;
+						left: 50%;
+						transform: translateX(-50%);
+						width: 77%;
+					}
+					.guanzhu-box {
+						display: flex;
+						justify-content: center;
+						align-items: center;
+						background: url(@/static/image/match/right-bg.png)center center/ 100% 100% no-repeat;
+						padding: 0 20rpx;
+						height: 59.54rpx;
+
+						.guanzhu-icon {
+							width: 28.82rpx;
+							height: 25.39rpx;
+						}
+					}
+				}
+
+				.user-number {
+					padding: 67rpx 64rpx 0;
+
+					.user-number-one {
+						font-weight: 700;
+					}
+
+					.user-number-text {
+						font-size: 22rpx;
+						margin-top: 8rpx;
+					}
+				}
+
+			}
+		}
+		.list {
+			flex: 1;
+			max-height: 100%;
+			min-height: 10%;
+			overflow-y: auto;
+		}
+		.topic-top {
+			position: fixed;
+			bottom: 192rpx;
+			right: 32rpx;
+			width: 96rpx;
+			height: 96rpx;
+		}
+
+	}
+</style>

pages/Match/message/detail.vue

@@ -0,0 +1,94 @@
+<template>
+	<view class="contain">
+		<view class="select-head">
+			<u-navbar :leftText="$t('navbar.txt7')" bgColor="transparent" leftIconColor="#fff" :titleStyle="{color:'#fff'}" :fixed="false" leftIconSize="48" :autoBack="true"></u-navbar>
+		</view>
+		<view class="main">
+			<view class="item">
+				<view class="time size24 c6 text-center">
+					2021-05-25 12:20
+				</view>
+				<view class="item-content inforound">
+					<view class="size28 c6 mg-bt22">
+						It’s a pleasure to meet you for the first time. We will
+						 accompany you day and night in the coming days.
+					</view>
+					<view class="size28 c6 mg-tp44">
+						It’s a pleasure to meet you for the first time. We will
+						 accompany you day and night in the coming days.
+						It’s a pleasure to meet you for the first time. We will
+						 accompany you day and night in the coming days.
+					</view>
+					<view class="size28 c6 mg-tp44">
+					It’s a pleasure to meet you for the first time. We will
+					 accompany you day and night in the coming days.
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				value1:false
+			};
+		},
+		onLoad(option) {
+			this.getDetail(option.id)
+		},
+		methods:{
+			getDetail(id) {
+				uni.$u.http.get('api/Push/getList',{params:{page:this.page}}).then(res=>{
+					this.detail = res.data
+				}).catch(res=>{})
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.contain{
+		background-color: #F3F3F7;
+		min-height: 100vh;
+	}
+	.select-head {
+		position: sticky;
+		top: 0;
+		z-index: 99;
+		background-color: $color1;
+		.select-tab {
+			padding: 0 28rpx;
+			margin-top: 20rpx;
+		}
+	}
+	.item{
+		.time{
+			height: 46rpx;
+			line-height: 46rpx;
+		}
+		.item-content{
+			background-color: #fff;
+			padding: 24rpx;
+			border-radius: 12rpx;
+		}
+	}
+	.arrow-right{
+		width: 32rpx;
+		height: 32rpx;
+	}
+	.logout{
+		height: 108rpx;
+		background-color: #fff;
+		margin-top: 48rpx;
+		line-height: 108rpx;
+		color: #FF7B7F;
+	}
+	
+	.main{
+		padding: 0 24rpx;
+	}
+
+</style>

pages/Match/message/message.vue

@@ -0,0 +1,102 @@
+<template>
+	<view class="contain">
+		<view class="select-head">
+			<u-navbar :leftText="$t('member.message')" bgColor="transparent" leftIconColor="#fff" :titleStyle="{color:'#fff'}" :fixed="false" leftIconSize="48" :autoBack="true"></u-navbar>
+		</view>
+		<view class="main">
+			<view class="item" v-for="(item,index) in list" :key="index">
+				<view>
+					<view class="time size24 c6 text-center">
+						{{item.addtimeStr}}
+					</view>
+					<view class="item-content">
+						<!-- <view class="flex mg-bt22">
+							<text class="size32 c3 dot">System message</text>
+							<image src="../../../static/image/match/arrow-right.png" mode="widthFix" class="arrow-right"></image>
+						</view> -->
+						<text class="size28 c9">
+							{{item.content}}
+						</text>
+					</view>
+				</view>
+			</view>
+			<u-empty
+				v-if="list && list.length == 0"
+				mode="data"
+				width="474"
+				height="312"
+				textSize="28"
+				marginTop="100"
+				:text="$t('common.nodata')"
+				icon="/static/image/common/nodata.png"
+			>
+			</u-empty>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				page:1,
+				list:[],
+				value1:false
+			};
+		},
+		mounted() {
+			this.getList()
+		},
+		methods:{
+			getList() {
+				uni.$u.http.get('api/Push/getList',{params:{page:this.page}}).then(res=>{
+					this.list = res.data
+				}).catch(res=>{})
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.contain{
+		background-color: #F3F3F7;
+		min-height: 100vh;
+	}
+	.select-head {
+		position: sticky;
+		top: 0;
+		z-index: 99;
+		background-color: $color1;
+		.select-tab {
+			padding: 0 28rpx;
+			margin-top: 20rpx;
+		}
+	}
+	.item{
+		.time{
+			height: 46rpx;
+			line-height: 46rpx;
+		}
+		.item-content{
+			background-color: #fff;
+			padding: 24rpx;
+			border-radius: 12rpx;
+		}
+	}
+	.arrow-right{
+		width: 32rpx;
+		height: 32rpx;
+	}
+	.logout{
+		height: 108rpx;
+		background-color: #fff;
+		margin-top: 48rpx;
+		line-height: 108rpx;
+		color: #FF7B7F;
+	}
+	
+	.main{
+		padding: 0 24rpx;
+	}
+
+</style>

pages/Match/player-stats.vue

@@ -0,0 +1,854 @@
+<template>
+	<view class="select">
+		<view class="select-head">
+			<u-navbar :leftText="$t('navbar.txt1')" bgColor="transparent" leftIconColor="#fff" :titleStyle="{color:'#fff'}" :fixed="false" leftIconSize="48" :autoBack="true"></u-navbar>
+			<view class="select-tab">
+				<u-tabs
+				:list="list1"
+				@click="changeTab" 
+				lineHeight="4" 
+				lineColor="#DC3C23"   
+				:activeStyle="{color:'#DC3C23',fontSize:'32rpx',fontWeight:'Bold'}" 
+				:inactiveStyle="{color:'#fff',fontSize:'32rpx'}"
+				></u-tabs>
+			</view>
+		</view>
+		<view class="main">
+			
+			<scroll-view scroll-x="true" :scroll-left="left * -1" style="width: 100%;overflow: hidden;" @touchstart="mousedown2" @scroll="moveTo2" @mouseup="endMove">
+			<view class="header">
+			<!-- <view class="header" :style="{transform:`translateX(${left * 2}rpx)`}"> -->
+				<view class="header-item fixedLeft twoSelft3 bgE5" :style="{zIndex:30}">
+					<text class="size24 c6">
+						<!-- Last Updated 8 days ago -->
+					{{ $t('match.labe7') }}
+					</text>
+					<view class="lineups size28 cfff">
+						<!-- Lineups out -->
+					{{ $t('match.labe8') }}
+					</view>
+				</view>
+				
+				<view class="header-item mg-lt388">
+					<text class="size28 c3 Bold">
+						<!-- Dream11 Data -->
+					{{ $t('match.labe9') }}
+					</text>
+				</view>
+				
+				<view class="header-item">
+					<u-row>
+						<text class="size28 c3 Bold">
+							<!-- Recent Points -->
+						{{ $t('match.labe10') }}
+						</text>
+						<view class="hover-show">
+							<image src="../../static/image/match/player_prompt_ico.png" mode="aspectFit" class="header-icon mg-lt16" @click="pointsShow = !pointsShow"></image>
+							<view class="hover-show-main width468 size24" v-if="pointsShow">
+								<view class="arrow-icon"> </view>
+								<text class="c3">
+									<!-- Fantasy points scored by a player in each of their last 5 matches in the tour's format -->
+								{{ $t('match.labe11') }}
+								</text>
+								<view class="c9 mg-tp24">
+									<!-- POINTS -->
+								{{ $t('match.labe12') }}
+								</view>
+								<view class="c3 mg-tp24 flex-start">
+									<text>14</text>,
+									<text class="dot-slot">120</text>,
+									<view class="mg-rt24">132</view>
+									<u-line direction="col" length="26rpx" color="#333333"></u-line>
+									<view class="mg-lt24">25</view>,
+									<text class="dot-slot">180</text>,
+								</view>
+								<view class="c9 size24 mg-tp24">
+									<text class="mg-rt51">
+										<!-- In this tour -->
+								{{ $t('match.labe13') }}
+									</text>
+									<text>
+										<!-- Before this tour -->
+								{{ $t('match.labe14') }}
+									</text>
+								</view>
+								<u-row class="mg-tp36">
+									<view class="dot"> </view>
+									<text class="c3"> : 
+										<!-- Featured in the Best Fantasy XI  -->
+								{{ $t('match.labe15') }}
+									</text>
+									<image src="../../static/image/match/[email protected]" mode="aspectFit" class="dt-icon"></image>
+								</u-row>
+							</view>
+						</view>
+					</u-row>
+					<view class="size24 c6">
+						<!-- Last 5 matches of The Hundred -->
+								{{ $t('match.labe16') }}
+					</view>
+				</view>
+				
+				<view class="header-item">
+					<u-row>
+						<text class="size28 c3 Bold">
+							<!-- The Hundred Stats -->
+								{{ $t('match.labe17') }}
+						</text>
+						<view class="hover-show">
+							<image src="../../static/image/match/player_prompt_ico.png" mode="aspectFit" class="header-icon mg-lt16" @click="pointsShow = !pointsShow"></image>
+							<view class="hover-show-main width468 size24 c3" v-if="pointsShow">
+								<view class="arrow-icon"> </view>
+								<text>
+									<!-- Based on player's performance in The Hundred -->
+								{{ $t('match.labe18') }}
+								</text>
+								<u-row class="mg-tp36" :gutter="20">
+									<u-col span="4">
+										{{ $t('match.lab83') }} <br>
+										<!-- Played -->
+								{{ $t('match.labe19') }}
+									</u-col>
+									<u-line direction="col" color="#ccc" length="65rpx"></u-line>
+									<u-col span="7" class="mg-lt16">
+										<!-- Total number of matches a 
+										player has featured in. -->
+								{{ $t('match.labe21') }}
+									</u-col>
+								</u-row>
+								<u-row class="mg-tp36" :gutter="20">
+									<u-col span="4">
+								{{ $t('match.labe22') }}<br>
+										<!-- Match -->
+								{{ $t('match.labe23') }}
+									</u-col>
+									<u-line direction="col" color="#ccc" length="65rpx"></u-line>
+									<u-col span="7" class="mg-lt16">
+										<!-- Average points a player has
+										scored per match. -->
+								{{ $t('match.labe24') }}
+									</u-col>
+								</u-row>
+								<u-row class="mg-tp36" :gutter="20">
+									<u-col span="4" class="flex">
+										<u-row>
+											<image src="../../static/image/match/[email protected]" mode="aspectFit" class="dt-icon"></image><text>%</text>
+										</u-row>
+									</u-col>
+									<u-line direction="col" color="#ccc" length="65rpx"></u-line>
+									<u-col span="7" class="mg-lt16">
+										<!-- How often a player has
+										featured in the Dream Team. -->
+								{{ $t('match.labe25') }}
+									</u-col>
+								</u-row>
+							</view>
+						</view>
+					</u-row>
+				</view>
+				
+				<view class="header-item">
+					<u-row>
+						<text class="size28 c3 Bold">
+							<!-- Experts Sats -->
+								{{ $t('match.labe26') }}
+						</text>
+						<view class="hover-show">
+							<image src="../../static/image/match/player_prompt_ico.png" mode="aspectFit" class="header-icon mg-lt16"></image>
+							<view class="hover-show-main width468 size24 c3" v-if="pointsShow">
+								<view class="arrow-icon"> </view>
+								<text>
+									<!-- Based on selection of players by Experts -->
+								{{ $t('match.labe27') }}
+								</text>
+								<u-row class="mg-tp36" :gutter="20">
+									<u-col span="4">
+										{{ $t('match.labe28') }}<br>
+										<!-- Tesm -->
+								{{ $t('match.labe29') }}
+									</u-col>
+									<u-line direction="col" color="#ccc" length="65rpx"></u-line>
+									<u-col span="7" class="mg-lt16">
+										<!-- Percentage of Expert Teams
+										that a player features in. -->
+								{{ $t('match.labe30') }}
+									</u-col>
+								</u-row>
+								<u-row class="mg-tp36" :gutter="20">
+									<u-col span="4">
+										<u-row>
+											<text>
+												<!-- % Sel -->
+											{{ $t('match.labe31') }}
+											</text>
+											<image src="../../static/image/match/player_c_ico.png" mode="aspectFit" class="vc-icon"></image>
+										</u-row>
+									</u-col>
+									<u-line direction="col" color="#ccc" length="65rpx"></u-line>
+									<u-col span="7" class="mg-lt16">
+										<!-- Percentage of Expert Teams 
+										that a player is captain in. -->
+								{{ $t('match.labe32') }}
+									</u-col>
+								</u-row>
+								<u-row class="mg-tp36" :gutter="20">
+									<u-col span="4">
+										<u-row>
+											<text>
+												<!-- % Sel -->
+											{{ $t('match.labe31') }}
+											</text>
+											<image src="../../static/image/match/player_vc_ico.png" mode="aspectFit" class="vc-icon"></image>
+										</u-row>
+									</u-col>
+									<u-line direction="col" color="#ccc" length="65rpx"></u-line>
+									<u-col span="7" class="mg-lt16">
+										<!-- Percentage of Experts Teams 
+										that a player is vice-captain in. -->
+								{{ $t('match.labe33') }}
+									</u-col>
+								</u-row>
+							</view>
+						</view>
+					</u-row>
+					<view class="size24 c6">
+						<!-- Based on 11 Expert Teams -->
+								{{ $t('match.labe34') }}
+					</view>
+				</view>
+				
+				<view class="header-item">
+					<u-row>
+						<text class="size28 c3 Bold">
+							<!-- Player Performance -->
+								{{ $t('match.labe35') }}
+						</text>
+						<view class="hover-show">
+							<image src="../../static/image/match/player_prompt_ico.png" mode="aspectFit" class="header-icon mg-lt16"></image>
+							<view class="hover-show-main width468 size24 c3" v-if="pointsShow">
+								<view class="arrow-icon"> </view>
+								<text>
+									<!-- Performance indicators for each attribute -->
+								{{ $t('match.labe36') }}
+								</text>
+								<u-row class="mg-tp36" :gutter="20">
+									<u-col span="4">
+										<!-- Stadium -->
+								{{ $t('match.labe37') }}
+									</u-col>
+									<u-line direction="col" color="#ccc" length="65rpx"></u-line>
+									<u-col span="7" class="mg-lt16">
+										<!-- player's performance at this
+										venue -->
+								{{ $t('match.labe38') }}
+									</u-col>
+								</u-row>
+								<u-row class="mg-tp36" :gutter="20">
+									<u-col span="4">
+										<!-- Opponent -->
+								{{ $t('match.labe39') }}
+									</u-col>
+									<u-line direction="col" color="#ccc" length="65rpx"></u-line>
+									<u-col span="7" class="mg-lt16">
+										<!-- Player's performance
+										against this opposition -->
+								{{ $t('match.labe40') }}
+									</u-col>
+								</u-row>
+								<u-row class="mg-tp36" :gutter="20">
+									<u-col span="4">
+										<!-- Last 5 -->
+								{{ $t('match.labe41') }}
+									</u-col>
+									<u-line direction="col" color="#ccc" length="65rpx"></u-line>
+									<u-col span="7" class="mg-lt16">
+										<!-- Player's performance in 
+										their last 5 matches -->
+								{{ $t('match.labe42') }}
+									</u-col>
+								</u-row>
+								<u-row class="mg-tp36" :gutter="20">
+									<u-col span="4">
+										<!-- This Tour -->
+								{{ $t('match.labe43') }}
+									</u-col>
+									<u-line direction="col" color="#ccc" length="65rpx"></u-line>
+									<u-col span="7" class="mg-lt16">
+										<!-- Player performance in this 
+										Tour -->
+								{{ $t('match.labe44') }}
+									</u-col>
+								</u-row>
+								<u-row class="mg-tp36" :gutter="20">
+									<u-col span="4">
+										<!-- In GBR -->
+								{{ $t('match.labe45') }}
+									</u-col>
+									<u-line direction="col" color="#ccc" length="65rpx"></u-line>
+									<u-col span="7" class="mg-lt16">
+										<!-- Player's performance in this
+										country -->
+								{{ $t('match.labe46') }}
+									</u-col>
+								</u-row>
+							</view>
+						</view>
+					</u-row>
+					<view class="size24 c6">
+						<!-- Form based on The Hundred -->
+								{{ $t('match.labe47') }}
+					</view>
+				</view>
+				
+				<view class="header-item">
+					<u-row justify="space-around">
+						<u-col span="4">
+							<view class="flexcenter">
+								<text class="size28 c6">
+									<!-- Good -->
+								{{ $t('match.labe48') }}
+								</text>
+								<view class="jiantou-icon icongreen">
+									&uarr;
+								</view>
+							</view>
+						</u-col>
+						<u-col span="4">
+							<view class="flexcenter">
+								<text class="size28 c6">
+									<!-- Avg -->
+								{{ $t('match.labe49') }}
+								</text>
+								<view class="jiantou-icon iconyellow">
+									&rarr;
+								</view>
+							</view>
+						</u-col>
+						<u-col span="4">
+							<view class="flexcenter">
+								<text class="size28 c6">
+									<!-- Bad -->
+								{{ $t('match.labe50') }}
+								</text>
+								<view class="jiantou-icon iconred">
+									&darr;
+								</view>
+							</view>
+						</u-col>
+					</u-row>
+				</view>
+			</view>
+			<view class="header-two bgE5 gridrow83">
+			<!-- <view class="header-two bgE5 gridrow83" :style="{transform:`translateX(${left * 2}rpx)`}"> -->
+				<view class="header-two-item flex-start fixedLeft twoSelft2 bgE5" :style="{zIndex:30}">
+					<text class="size24 c6">
+						<!-- Team -->
+								{{ $t('match.labe51') }}
+					</text>
+					<text class="size24 c6 mg-lt63">
+						<!-- Players -->
+								{{ $t('match.labe52') }}
+					</text>
+				</view>
+				<view class="header-two-item flex mg-lt388">
+					<text class="size24 c6">{{ $t('match.labe28') }}
+					<br> 
+					<!-- Users  -->
+					{{ $t('match.labe53') }}
+					&darr;</text>
+					<text class="size24 c6">
+						<!-- Credits -->
+					{{ $t('match.labe54') }}
+					</text>
+				</view>
+				<view class="header-two-item flex-end">
+					<text class="size24 c6"><text class="cC23">*</text>
+					<!-- Part of the dream team -->
+					{{ $t('match.labe55') }}
+				</text>
+				</view>
+				
+				<u-row class="header-two-item">
+					<u-col span="4">
+						<view class="size24 c6 text-center">
+							{{ $t('match.lab83') }} <br>
+							<!-- Played -->
+						{{ $t('match.labe19') }}
+						</view>
+					</u-col>
+					<u-col span="4">
+						<view class="size24 c6">
+							{{ $t('match.labe20') }}<br>
+							<!-- Match -->
+					{{ $t('match.labe21') }}
+						</view>
+					</u-col>
+					<u-col span="4">
+						<view class="size28 c6 flex-end">
+							<image src="../../static/image/match/[email protected]" mode="aspectFit" class="dt"></image><text>%</text>
+						</view>
+					</u-col>
+				</u-row>
+				
+				<u-row class="header-two-item">
+					<u-col span="4">
+						<view class="size24 c6 text-center">
+							{{ $t('match.labe28') }}<br>
+							<!-- Team -->
+							{{ $t('match.labe51') }}
+						</view>
+					</u-col>
+					<u-col span="4">
+						<view class="size24 c6 flexcenter">
+							<text>
+								<!-- % Sel -->
+						{{ $t('match.labe31') }}
+							</text><image src="../../static/image/match/player_c_ico.png" mode="aspectFit" class="c-icon"></image>
+						</view>
+					</u-col>
+					<u-col span="4">
+						<view class="size24 c6 flex-end">
+							<text>
+								<!-- % Sel -->
+						{{ $t('match.labe31') }}
+							</text><image src="../../static/image/match/player_vc_ico.png" mode="aspectFit" class="c-icon"></image>
+						</view>
+					</u-col>
+				</u-row>
+				
+				<view class="header-two-item flex-start">
+					<text class="size24 c6">
+						<!-- Stadium -->
+						{{ $t('match.labe37') }}
+					</text>
+					<text class="size24 c6 mg-lt63">
+						<!-- Opponent -->
+						{{ $t('match.labe39') }}
+					</text>
+				</view>
+				
+				<u-row class="header-two-item">
+					<u-col span="4">
+						<view class="flexcenter">
+							<text class="size24 c6">
+								<!-- Last 5 -->
+								{{ $t('match.labe41') }}
+							</text>
+						</view>
+					</u-col>
+					<u-col span="4">
+						<view class="flexcenter">
+							<text class="size24 c6">
+								<!-- This Tour -->
+								{{ $t('match.labe43') }}
+							</text>
+						</view>
+					</u-col>
+					<u-col span="4">
+						<view class="flexcenter">
+							<text class="size24 c6">
+								<!-- In GBR -->
+								{{ $t('match.labe45') }}
+							</text>
+						</view>
+					</u-col>
+				</u-row>
+			</view>
+			</scroll-view>
+			<scroll-view scroll-x="true" :scroll-top="top2 * -1" :scroll-left="left2 * -1" scroll-y="true" style="width: 100%;height: calc(100vh - 432rpx);overflow: hidden;" @touchstart="mousedown" @scroll="moveTo"  @mouseup="endMove">
+				<view>
+					<view class="header-two gridrow180" v-for="(item, index) in 20" :key="index">
+						<view class="header-two-item flex-start fixedLeft twoSelft" :style="{transform:`translateY(${top * 2}rpx)`,zIndex:2}" @touchmove="moveDan">
+							<image src="../../static/image/common/[email protected]" lnsmnr='LNS' class="avatar-lns" mode="aspectFill"></image>
+							<view class="flex-col align-start">
+								<text class="size24 c6">AR</text>
+								<text class="size28 c3 Bold">
+									<!-- D Pretorius -->
+									{{ $t('match.labe56') }}
+								</text>
+								<text class="size24 c3">•
+									<!-- Announced -->
+								{{ $t('match.labe57') }}
+								</text>
+							</view>
+						</view>
+						<view class="header-two-item flex">
+							<view class="size28 c3 numb123">89.3</view>
+							<view class="size28 c3">9</view>
+						</view>
+						<view class="header-two-item flex-end">
+							<view class="size28 c3">
+								<text>29</text>,
+								<text class="dot-slot">28</text>,
+								<text>18</text>,
+								<text class="dot-slot">42</text>,
+								<text class="dot-slot">103</text>,
+								</view>
+						</view>
+						<view class="header-two-item flex">
+							<view class="size28 c3 text-center mg-lt28">
+								2
+							</view>
+							<view class="size28 c3">
+								59
+							</view>
+							<view class="size28 c6 flexcenter">
+								59
+							</view>
+						</view>
+						
+						
+						<u-row class="header-two-item">
+							<u-col span="4">
+								<view class="size28 c3 text-center">
+									88.2
+								</view>
+							</u-col>
+							<u-col span="4">
+								<view class="size28 c3 flexcenter">
+									59
+								</view>
+							</u-col>
+							<u-col span="4">
+								<view class="size28 c3 flexcenter">
+									59
+								</view>
+							</u-col>
+						</u-row>
+						
+						<view class="header-two-item flex-start">
+							<view class="iconred mg-lt16">
+								&darr;
+							</view>
+							<view class="icongreen mg-lt140">
+								&uarr;
+							</view>
+						</view>
+						
+						<u-row class="header-two-item">
+							<u-col span="4">
+								<view class="flexcenter">
+									<view class="icongreen">
+										&uarr;
+									</view>
+								</view>
+							</u-col>
+							<u-col span="4">
+								<view class="flexcenter">
+									<view class="icongreen">
+										&uarr;
+									</view>
+								</view>
+							</u-col>
+							<u-col span="4">
+								<view class="flexcenter">
+									<view class="icongreen">
+										&uarr;
+									</view>
+								</view>
+							</u-col>
+						</u-row>
+						
+					</view>
+				</view>
+			</scroll-view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				pointsShow:false,
+				list1:[
+					{
+						name: 'ALL',
+					},
+					{
+						name: 'WK',
+					},
+					{
+						name: 'BAT',
+					},
+					{
+						name: 'BOWL',
+					},
+					{
+						name: 'AR',
+					}
+				],
+				left:0,
+				left2:0,
+				top:0,
+				top2:0,
+				isScroll:0,
+				moveJl:0,
+			}
+		},
+		watch:{
+			moveJl(newValue,oldValue){
+				this.top2 = this.top + ((newValue - oldValue) * 4)
+			}
+		},
+		methods: {
+			changeTab() {
+				
+			},
+			moveTo(e){
+				if(this.isScroll == 1)return
+				// console.log(1);
+				// this.isScroll = 2
+				this.left = e.detail.scrollLeft * -1
+				this.top = e.detail.scrollTop * -1
+			},
+			mousedown(){
+				// console.log('dds');
+				this.isScroll = 2
+			},
+			moveTo2(e){
+				if(this.isScroll == 2)return
+				// console.log(2);
+				this.left2 = e.detail.scrollLeft * -1
+			},
+			mousedown2(){
+				// console.log('dds2');
+				this.isScroll = 1
+			},
+			moveDan(e){
+				// console.log("e: ",e);
+				this.moveJl = e.touches[0].clientY
+			},
+			endMove(){
+				this.isScroll = 0
+			}
+		},
+	}
+</script>
+
+<style lang="scss">
+	.select-head {
+		position: sticky;
+		top: 0;
+		z-index: 99;
+		background-color: $color1;
+		.select-tab {
+			padding: 0 28rpx;
+			margin-top: 20rpx;
+		}
+	}
+	.main{
+		.fixedLeft{
+			position: fixed !important;
+			box-shadow: 10rpx 0 10rpx #ccc;
+			width: 332rpx;
+			border-bottom: 1rpx solid #CCC;
+			left: 0;
+		}
+		.twoSelft2{
+			height: 82rpx;
+		}
+		.twoSelft3{
+			height: 106rpx;
+			background-color: #E5E5E5 !important;
+		}
+		.twoSelft{
+			height: 178rpx;
+		}
+		.dot-slot{
+			position: relative;
+			&:before{
+				content: "";
+				position: absolute;
+				bottom: -6rpx;
+				left: calc(50% - 4rpx);
+				width: 8rpx;
+				height: 8rpx;
+				border-radius: 100rpx;
+				background: linear-gradient(180deg, #EEA831 0%, #DC3C23 100%);
+			}
+		}
+		.header{
+			display: grid;
+			background-color: #E5E5E5;
+			grid-template-columns: 388rpx 290rpx 404rpx 445rpx 454rpx 369rpx 467rpx;
+			width: max-content;
+			padding-left: 388rpx;
+			position: relative;
+			z-index: 26;
+			.header-item{
+				padding: 24rpx 28rpx;
+				position: relative;
+				border-bottom: 1rpx solid #CCC;
+				
+				.hover-show{
+					position: relative;
+					.hover-show-main{
+						position: absolute;
+						top: 48rpx;
+						right: -45rpx;
+						padding: 24rpx;
+						background: #FFFFFF;
+						box-shadow: 0rpx 0rpx 8rpx 1rpx rgba(0,0,0,0.6);
+						border-radius: 10rpx 10rpx 10rpx 10rpx;
+						z-index: 99;
+						.arrow-icon{
+							position: absolute;
+							right: 52rpx;
+							top: -5rpx;
+							width: 15rpx;
+							height: 15rpx;
+							transform: rotateZ(45deg) skew(18deg,18deg);
+							background-color: #FFF;
+						}
+						.dot{
+							width: 14rpx;
+							height: 14rpx;
+							background: linear-gradient(180deg, #EEA831 0%, #DC3C23 100%);
+							border-radius: 50rpx;
+							margin-right: 12rpx;
+						}
+						.dt-icon{
+							margin-left: 12rpx;
+							width: 17.85rpx;
+							height: 21.01rpx;
+						}
+						.vc-icon{
+							width: 24rpx;
+							height: 24rpx;
+						}
+					}
+					.width468{
+						width: 468rpx;
+					}
+				}
+				
+				&:nth-child(n + 3){
+					&:before{
+						content: "";
+						position: absolute;
+						width: 1rpx;
+						height: 77rpx;
+						left: 0;
+						background: #CCCCCC;
+					}
+				}
+				.lineups{
+					width: 183rpx;
+					height: 40rpx;
+					text-align: center;
+					line-height: 40rpx;
+					color: #fff;
+					background: #959DEE;
+				}
+				.header-icon{
+					width: 28rpx;
+					height: 28rpx;
+				}
+				.icongreen{
+					background: #219430;
+				}
+				.iconyellow{
+					background: #E2B15D;
+				}
+				.iconred{
+					background: #DC3C23;
+				}
+				.icongreen,
+				.iconyellow,
+				.iconred{
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					width: 36rpx;
+					height: 36rpx;
+					margin-left: 6rpx;
+					border-radius: 100rpx;
+					color: #fff;
+				}
+			}
+		}
+		.gridrow83{
+			grid-template-rows: 83rpx;
+			position: relative;
+			z-index: 25;
+		}
+		.gridrow180{
+			grid-template-rows: 180rpx;
+			z-index: 1;
+		}
+		.header-two{
+			display: grid;
+			grid-template-columns: 388rpx 290rpx 404rpx 445rpx 454rpx 369rpx 467rpx;
+			padding-left: 388rpx;
+			&:nth-child(2n){
+				.header-two-item{
+					background-color: #E5E5E5;
+				}
+			}
+			&:nth-child(2n+1){
+				.header-two-item{
+					background-color: #FFF;
+				}
+			}
+			.header-two-item{
+				padding: 0 28rpx;
+				z-index: -1;
+				border-bottom: 1rpx solid #CCC;
+				.dt{
+					width: 17.85rpx;
+					height: 21rpx;
+				}
+				.c-icon{
+					width: 24px;
+					height: 24rpx;
+				}
+				.icongreen{
+					background: #219430;
+				}
+				.iconyellow{
+					background: #E2B15D;
+				}
+				.iconred{
+					background: #DC3C23;
+				}
+				.icongreen,
+				.iconyellow,
+				.iconred{
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					width: 36rpx;
+					height: 36rpx;
+					border-radius: 100rpx;
+					color: #fff;
+				}
+				.avatar-lns{
+					width: 108rpx;
+					height: 108rpx;
+					position: relative;
+					margin-right: 16rpx;
+					&:before{
+						content: attr(lnsmnr) ;
+						text-align: center;
+						position: absolute;
+						left: 0;
+						bottom: 0;
+						width: 66rpx;
+						height: 30rpx;
+						font-size: 28rpx;
+						color: #fff;
+						line-height: 30rpx;
+						background: #219430;
+					}
+				}
+			}
+		}
+		.btline{
+			border-bottom: 1rpx solid #CCC;
+		}
+	}
+	.list {
+		
+	}
+</style>

pages/Match/search.vue

@@ -0,0 +1,556 @@
+<template>
+  <div>
+    <div class="top-box">
+      <div class="header">
+        <u-icon name="arrow-left" @click="back" color="#fff" size="40"></u-icon>
+        <u--input
+          color="#fff"
+          v-model="tournamentName"
+          :placeholder="$t('match.lab86')"
+          prefixIcon="search"
+          prefixIconStyle="font-size: 28px;color: #909399"
+        >
+          <template slot="suffix">
+            <img
+              class="close"
+              @click="tournamentName = ''"
+              src="/static/image/match/close.png"
+              alt=""
+            />
+          </template>
+        </u--input>
+      </div>
+      <div
+        class="tab"
+        v-if="
+          tournamentName.length >= 3 && (matchList.length || tourList.length)
+        "
+      >
+        <div
+          class="item"
+          :class="{ active: type == '' }"
+          @click="changeType('')"
+        >
+          <!-- All -->
+          {{ $t('match.labe58') }}
+        </div>
+        <div
+          class="item"
+          v-if="matchList.length"
+          :class="{ active: type == 'match' }"
+          @click="changeType('match')"
+        >
+          <!-- Matches -->
+          {{ $t('match.lab83') }}
+        </div>
+        <div
+          class="item"
+          v-if="tourList.length"
+          :class="{ active: type == 'tour' }"
+          @click="changeType('tour')"
+        >
+          <!-- Tours -->
+          {{ $t('match.lab88') }}
+        </div>
+      </div>
+    </div>
+    <div class="no-input" v-if="tournamentName.length < 3">
+      <u-icon name="error-circle" color="#DC3C23" size="30"></u-icon>
+      <!-- Enter at
+      least 3 characters to auto search... -->
+      {{ $t('match.lab59') }}
+    </div>
+    <div v-else>
+      <div
+        v-if="
+          matchList.length == 0 && tourList.length == 0 && !loading && !timer
+        "
+        class="no-data"
+      >
+        <img class="no" src="/static/image/match/no_tag.png" alt="" />
+        <div class="result">{{ $t('match.lab60') }}‘{{ tournamentName }}’</div>
+        <div class="text">{{ $t('match.lab61') }}</div>
+      </div>
+      <template v-if="(matchList.length || tourList.length)">
+        <div class="box1" v-if="type == ''">
+          <div class="match-list" v-if="matchList.length">
+            <div class="lab-title" @click="type = 'match'">
+              <!-- Matches -->
+              {{ $t('match.lab83') }}
+              <u-icon name="arrow-right" color="#333" size="32"></u-icon>
+            </div>
+            <div
+              class="item"
+              v-for="item in matchList.slice(0, 9)"
+              :key="item.id"
+              @click="toDetail(item)"
+            >
+              <img
+                class="icon"
+                src="/static/image/match/search_list_icon.png"
+                alt=""
+              />
+              <div class="title">{{ item.title }}</div>
+              <div class="text">{{ item.content }}</div>
+              <div class="tag">
+                {{ statusText[item.status] }}
+              </div>
+            </div>
+          </div>
+          <div class="tour-list" v-if="tourList.length">
+            <div class="lab-title" @click="type = 'tour'">
+              <!-- Tours -->
+             {{ $t('match.lab88') }}
+              <u-icon name="arrow-right" color="#333" size="32"></u-icon>
+            </div>
+            <div
+              class="item"
+              v-for="item in tourList.slice(0, 9)"
+              :key="item.id"
+              @click="toMatchList(item)"
+            >
+              <div class="icon-box">
+                <img
+                  class="icon"
+                  src="/static/image/match/search_list_icon1.png"
+                  alt=""
+                />
+              </div>
+              <div class="text">{{ item.content }}</div>
+              <div class="title">{{ item.name }}</div>
+            </div>
+          </div>
+        </div>
+        <div class="box1" v-if="type == 'match'">
+          <div class="match-list">
+            <div class="lab-title">
+              <!-- Matches -->
+             {{ $t('match.lab83') }}
+            </div>
+            <scroll-view
+              class="scroll"
+              :scroll-y="true"
+              @scrolltolower="scrolltolower"
+            >
+              <div
+                class="item"
+                v-for="item in matchList"
+                :key="item.id"
+                @click="toDetail(item)"
+              >
+                <img
+                  class="icon"
+                  src="/static/image/match/search_list_icon.png"
+                  alt=""
+                />
+                <div class="title">{{ item.title }}</div>
+                <div class="text">{{ item.content }}</div>
+                <div class="tag">
+                  {{ statusText[item.status] }}
+                </div>
+              </div>
+              <u-loadmore
+                :status="status"
+                fontSize="28"
+                :line="true"
+                :loading-text="statusType.loadingText"
+                :loadmore-text="statusType.loadmoreText"
+                :nomore-text="statusType.nomoreText"
+              />
+            </scroll-view>
+          </div>
+        </div>
+        <div class="box1" v-if="type == 'tour'">
+          <div class="tour-list">
+            <div class="lab-title">
+              <!-- Tours -->
+             {{ $t('match.lab88') }}
+            </div>
+            <scroll-view
+              class="scroll"
+              :scroll-y="true"
+              @scrolltolower="scrolltolower1"
+            >
+              <div
+                class="item"
+                v-for="item in tourList"
+                :key="item.id"
+                @click="toMatchList(item)"
+              >
+                <div class="icon-box">
+                  <img
+                    class="icon"
+                    src="/static/image/match/search_list_icon1.png"
+                    alt=""
+                  />
+                </div>
+                <div class="text">{{ item.content }}</div>
+                <div class="title">{{ item.name }}</div>
+              </div>
+              <u-loadmore
+                :status="status1"
+                fontSize="28"
+                :line="true"
+                :loading-text="statusType.loadingText"
+                :loadmore-text="statusType.loadmoreText"
+                :nomore-text="statusType.nomoreText"
+              />
+            </scroll-view>
+          </div>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      tournamentName: "",
+      type: "",
+      status: "loadmore",
+      status1: "loadmore",
+      matchList: [],
+      tourList: [],
+      matchPage: 1,
+      tourPage: 1,
+      matchTotal: 1,
+      tourTotal: 1,
+      timer: null,
+      loading: true,
+      statusType: {
+        loadingText: this.$t('common.lab'),
+        loadmoreText: this.$t('common.lab1'),
+        nomoreText: this.$t('common.lab2')
+      },
+    };
+  },
+  computed: {
+    statusText() {
+      return [this.$t('match.labe62'), this.$t('match.labe63'), this.$t('match.labe64')];
+    },
+  },
+  watch: {
+    tournamentName(val) {
+      if (this.timer) {
+        clearTimeout(this.timer);
+        this.timer = null;
+      }
+      this.matchList = []
+      this.tourList = []
+      if (val.length > 2) {
+        this.timer = setTimeout(() => {
+          this.matchPage = 1;
+          this.tourPage = 1;
+          this.type = "";
+          this.getMacthList(true);
+          this.getTourList(true);
+        }, 1000);
+      }
+    },
+  },
+  created() {
+  },
+  methods: {
+    changeType(type) {
+      this.type = type;
+    },
+    // 获取公开赛列表
+    getMacthList(reset) {
+      if (reset) {
+        uni.showLoading();
+      } else {
+        this.status = "loading";
+      }
+      this.loading = true;
+      let timeZoneId = Intl.DateTimeFormat().resolvedOptions().timeZone; //'Asia/Shanghai'
+      uni.$u.http
+        .post("/api/Cricketnew/get_search", {
+          timezone: timeZoneId,
+          content: this.tournamentName,
+          type: "match",
+          page: this.matchPage,
+        })
+        .then((res) => {
+          if (reset) {
+            this.matchList = res.data || [];
+          } else {
+            this.matchList = this.matchList.concat(res.data || [])
+          }
+          this.matchTotal = res.total;
+          if (this.matchList.length == this.matchTotal) {
+            this.status = "nomore";
+          } else {
+            this.status = "loadmore";
+          }
+        })
+        .finally(() => {
+          this.timer = null;
+          if (reset) {
+            uni.hideLoading();
+          }
+          this.loading = false;
+        });
+    },
+    getTourList(reset) {
+      if (reset) {
+        uni.showLoading();
+      } else {
+        this.status1 = "loading";
+      }
+      this.loading = true;
+      let timeZoneId = Intl.DateTimeFormat().resolvedOptions().timeZone; //'Asia/Shanghai'
+      uni.$u.http
+        .post("/api/Cricketnew/get_search", {
+          timezone: timeZoneId,
+          content: this.tournamentName,
+          type: "tour",
+          page: this.tourPage,
+        })
+        .then((res) => {
+          if (reset) {
+            this.tourList = res.data || [];
+          } else {
+            this.tourList = this.tourList.concat(res.data || [])
+          }
+          this.tourTotal = res.total;
+          if (this.tourList.length == this.tourTotal) {
+            this.status1 = "nomore";
+          } else {
+            this.status1 = "loadmore";
+          }
+        })
+        .finally(() => {
+          if (reset) {
+            uni.hideLoading();
+          }
+          this.timer = null;
+          this.loading = false;
+        });
+    },
+    scrolltolower() {
+      if (this.status == "loadmore") {
+        this.matchPage += 1
+        this.getMacthList()
+      }
+    },
+    scrolltolower1() {
+      if (this.status1 == "loadmore") {
+        this.tourPage += 1
+        this.getTourList()
+      }
+    },
+    back() {
+      uni.switchTab({
+        url: "/pages/Match/Match",
+      });
+    },
+    toDetail(item) {
+      this.$toUrl("./match-detail?id=" + item.id);
+    },
+    toMatchList(item) {
+      uni.navigateTo({
+        url: `./match-list?title=${item.name}&id=${item.id}&type=${item.type}}`,
+      });
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+page {
+  background-color: rgb(251, 251, 252);
+}
+.top-box {
+  position: sticky;
+  top: 0;
+  background-color: #1d2550;
+  z-index: 5;
+  .header {
+    padding: 22rpx 24rpx 22rpx 36rpx;
+    display: flex;
+    align-items: center;
+    .close {
+      width: 36rpx;
+    }
+    .u-input {
+      flex: 1;
+      margin-left: 25rpx;
+      height: 60rpx;
+      color: #fff;
+      font-size: 28rpx;
+      border: none;
+      box-sizing: border-box;
+      background-color: rgba(245, 245, 245, 0.3);
+      border-radius: 30rpx;
+    }
+  }
+  .tab {
+    padding-top: 8rpx;
+    padding-bottom: 12rpx;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    .item {
+      height: 60rpx;
+      display: flex;
+      align-items: center;
+      padding: 0 24rpx;
+      border-radius: 30rpx;
+      line-height: 42rpx;
+      font-size: 30rpx;
+      font-weight: 400;
+      color: #ffffff;
+      &.active {
+        background-color: #2a3260;
+      }
+    }
+  }
+}
+
+.no-input {
+  height: 66rpx;
+  background: #f3f3f7;
+  display: flex;
+  align-items: center;
+  padding-left: 29rpx;
+  line-height: 33rpx;
+  font-size: 24rpx;
+  font-weight: 400;
+  color: #333333;
+  .u-icon {
+    margin-right: 12rpx;
+  }
+}
+.no-data {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  padding-top: 273rpx;
+  .no {
+    display: block;
+    width: 294rpx;
+    margin-bottom: 37rpx;
+  }
+  .result {
+    line-height: 45rpx;
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #333333;
+    margin-bottom: 12rpx;
+    text-align: center;
+  }
+  .text {
+    line-height: 33rpx;
+    font-size: 24rpx;
+    font-weight: 400;
+    color: #999999;
+  }
+}
+.match-list {
+  background-color: #fff;
+  & + .tour-list {
+    margin-top: 20rpx;
+  }
+  .lab-title {
+    height: 88rpx;
+    display: flex;
+    align-items: center;
+    line-height: 1;
+    font-size: 30rpx;
+    font-weight: bold;
+    color: #333333;
+    padding: 0 24rpx;
+  }
+  .item {
+    position: relative;
+    padding: 31rpx 170rpx 27rpx 109rpx;
+    .title {
+      line-height: 42rpx;
+      font-size: 30rpx;
+      font-weight: bold;
+      color: #333333;
+      margin-bottom: 10rpx;
+    }
+    .text {
+      line-height: 30rpx;
+      font-size: 22rpx;
+      font-weight: 400;
+      color: #333333;
+    }
+    .icon {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      left: 24rpx;
+      width: 70rpx;
+    }
+    .tag {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      right: 24rpx;
+      min-width: 128rpx;
+      height: 32rpx;
+      background: #f3f3f7;
+      border-radius: 6rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 18rpx;
+      line-height: 1;
+      font-weight: 400;
+      color: #999999;
+    }
+  }
+}
+.tour-list {
+  background-color: #fff;
+  .lab-title {
+    height: 88rpx;
+    display: flex;
+    align-items: center;
+    line-height: 1;
+    font-size: 30rpx;
+    font-weight: bold;
+    color: #333333;
+    padding: 0 24rpx;
+  }
+  .item {
+    position: relative;
+    padding: 31rpx 24rpx 27rpx 109rpx;
+    .title {
+      line-height: 40rpx;
+      font-size: 28rpx;
+      font-weight: bold;
+      color: #333333;
+      margin-top: 7rpx;
+    }
+    .text {
+      line-height: 30rpx;
+      font-size: 22rpx;
+      font-weight: 400;
+      color: #333333;
+    }
+    .icon-box {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      left: 24rpx;
+      width: 70rpx;
+      height: 70rpx;
+      border-radius: 10rpx;
+      border: 1px solid #cccccc;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .icon {
+      width: 43rpx;
+    }
+  }
+}
+.scroll {
+  height: calc(100vh - 272rpx);
+}
+</style>

pages/Match/setting/about.vue

@@ -0,0 +1,23 @@
+<template>
+	<view class="about">
+		
+		<view class="bottom">
+			<view class="bottom-agr">
+				<text @click="$toUrl('../../login/agreement?type=1')">{{ $t('member.lab8') }}</text> | <text @click="$toUrl('../../login/agreement?type=2')">{{ $t('download.lab30') }}</text>
+			</view>
+
+		</view>
+		
+		
+	</view>
+</template>
+
+<script>
+</script>
+
+<style lang="scss">
+	page {
+			background-color: #F3F3F7;
+	}
+
+</style>

pages/Match/setting/cancel-account.vue

@@ -0,0 +1,163 @@
+<template>
+	<view class="contain">
+		<view class="select-head">
+			<u-navbar :leftText="$t('navbar.txt8')" bgColor="transparent" leftIconColor="#333" :titleStyle="{color:'#333'}" :fixed="false" leftIconSize="48" :autoBack="true"></u-navbar>
+		</view>
+		
+		<view class="main">
+			<view class="info mg-tp24">
+				<text class="size32 c3">
+					<!-- SMS verification code will be sent to: -->
+					{{ $t('member.lab9') }}
+				</text>
+				<view class="mg-tp18">
+					<text class="cC23">{{mobile}}</text>
+				</view>
+				<view class="mg-tp28 flex size28 c9 flex">
+					<input type="text" v-model="code" :placeholder="$t('login.getCode')"  class="size28 c9">
+					<u-toast ref="uToast"></u-toast>
+					<u-code :seconds="seconds" @end="end" @start="start" ref="uCode" 
+					@change="codeChange" changeText="xs" startText="Auth code"></u-code>
+					<u-button class="getcode" @tap="getCode">{{tips}}</u-button>
+				</view>
+			</view>
+			<button type="default" @click="submit" class="bgc23 cfff preservation">
+				<!-- Confirm -->
+				{{ $t('member.confirm1') }}
+			</button>
+			<view class="mg-tp80 size24">
+				<text class="c9">
+					<!-- Special notes on account cancellation: -->
+					{{ $t('member.lab10') }}
+				</text>
+				<view class="c3 mg-tp22">
+					(1) {{ $t('member.lab11') }}<br>
+					(2) {{ $t('member.lab12') }}
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				tips: '',
+				code:'',
+				// refCode: null,
+				seconds: 60,
+				loading: false
+			};
+		},
+		computed:{
+			info() {
+				return this.$store.state.info
+			},
+			mobile() {
+				var reg=/(\d{3})\d{4}(\d{4})/; //正则表达式
+				return (this.info.mobile || '').replace(reg, "$1****$2")
+			}
+		},
+		onLoad() {
+		},
+		methods:{
+			codeChange(text) {
+				this.tips = text;
+			},
+			getCode() {
+				// if(!this.from.mobile) return uni.$u.toast('请输入手机号');
+				if (this.loading) {
+					return
+				}
+				if(this.$refs.uCode.canGetCode) {
+					this.loading = true
+					uni.showLoading();
+					uni.$u.http.get('/api/user/getCode',{params:{type:11,mobile:this.info.mobile}}).then(res => {
+						uni.$u.toast(this.$t('login.lab13'));
+						this.$refs.uCode.start();
+					}).finally(() => {
+						uni.hideLoading();
+						this.loading = false
+					})
+				} else {
+					uni.$u.toast(this.$t('common.lab3'));
+				}
+			},
+			submit() {
+				if (!this.code) {
+					uni.$u.toast(this.$t('member.lab13'));
+					return
+				}
+				uni.$u.http.get('/api/member/logout',{params:{code:this.code}}).then(res => {
+					this.$common.del('information');
+					this.$common.del('imTouristAccount');
+					this.$store.state.isLogin = 2;
+					this.$store.state.info={};
+					uni.redirectTo({
+						url:'/'
+					})
+				})
+			},
+			
+			end() {
+				uni.$u.toast(this.$t('common.lab4'));
+			},
+			start() {
+				// uni.$u.toast('start');
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.contain{
+		background: #F3F3F7;
+		min-height: 100vh;
+	}
+	.main{
+		padding: 0 24rpx;
+	}
+	.select-head {
+		position: sticky;
+		top: 0;
+		z-index: 99;
+		background-color: #FFF;
+		.select-tab {
+			padding: 0 28rpx;
+			margin-top: 20rpx;
+		}
+	}
+	.info{
+		padding: 30rpx 28rpx;
+		border-bottom: 2rpx solid #E9E9E9;
+		background-color: #FFF;
+	}
+	.preservation{
+		padding: 0 30rpx;
+		border-radius: 200rpx;
+		color: #FFF;
+		margin-top: 96rpx;
+	}
+	.arrow-right{
+		width: 48.01rpx;
+		height: 48.01rpx;
+		margin-left: 6rpx;
+	}
+	input{
+		width: 100%;
+	}
+	.getcode{
+		width: 152rpx;
+		padding: 12rpx 0;
+		line-height: 48rpx;
+		font-size: 24rpx;
+		margin: 0;
+		height: 48rpx;
+		text-align: center;
+		background: #FFFFFF;
+		border-radius: 4rpx;
+		color: #DC3C23;
+		border: 2rpx solid #DC3C23;
+	}
+</style>

pages/Match/setting/change-password.vue

@@ -0,0 +1,179 @@
+<template>
+	<view class="contain">
+		<view class="select-head">
+			<u-navbar :leftText="$t('member.changePw')" bgColor="transparent" leftIconColor="#333"
+				:titleStyle="{color:'#333'}" :fixed="false" leftIconSize="48" :autoBack="true"></u-navbar>
+		</view>
+
+		<view class="main">
+			<view class="info mg-tp24">
+				<text class="size32 c3">{{$t('member.changeText')}}</text>
+				<view class="mg-tp18">
+					<text class="cC23">{{ $t('member.lab14') }} {{mobile}}, {{ $t('member.lab15') }}</text>
+				</view>
+				<view class="mg-tp28 flex size28 c9 flex">
+					<input type="text" :placeholder="$t('login.getCode')" v-model="code" class="size28 c9">
+					<u-toast ref="uToast"></u-toast>
+					<u-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange"
+						changeText="xs" :startText="$t('login.getCode')" :endText="$t('login.getCode')"></u-code>
+					<u-button class="getcode" @tap="getCode">{{tips}}</u-button>
+				</view>
+			</view>
+
+			<view class="info flex size26 c9 flex">
+				<input type="safe-password" style="font-size: 26rpx;" v-model="password" :placeholder="$t('member.pw')">
+			</view>
+			<view class="password-bg"></view>
+			<view class="clew font24 cC23">{{ $t('member.lab16') }}</view>
+			<button type="default" class="bgc23 cfff preservation" @click="submit()">{{$t('member.Confirm')}}</button>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				tips: '',
+				code: '',
+				password: '',
+				// refCode: null,
+				seconds: 60,
+				loading: false
+			};
+		},
+		computed: {
+			info() {
+				return this.$store.state.info
+			},
+			mobile() {
+				var reg=/(\d{3})\d{4}(\d{4})/; //正则表达式
+				return (this.info.mobile || '').replace(reg, "$1****$2")
+			}
+		},
+		onLoad() {
+		},
+		methods: {
+			codeChange(text) {
+				this.tips = text;
+			},
+			getCode() {
+				// if(!this.from.mobile) return uni.$u.toast('请输入手机号');
+				if (this.loading) {
+					return
+				}
+				if (this.$refs.uCode.canGetCode) {
+					this.loading = true
+					uni.showLoading();
+					uni.$u.http.get('/api/user/getCode', {
+						params: {
+							type: 2,
+							mobile: this.info.mobile
+						}
+					}).then(res => {
+						uni.$u.toast(this.$t('login.lab13'));
+						this.$refs.uCode.start();
+					}).finally(() => {
+						uni.hideLoading();
+						this.loading = false
+					})
+				} else {
+					uni.$u.toast(this.$t('common.lab3'));
+				}
+			},
+
+			submit() {
+				if (!this.code) {
+					uni.$u.toast(this.$t('member.lab13'));
+					return
+				}
+				uni.$u.http.get('/api/user/forgotPassword', {
+					params: {
+						code: this.code,
+						mobile: this.info.mobile,
+						password: this.password
+					}
+				}).then(res => {
+					uni.navigateBack({
+						delta: 1
+					})
+				})
+			},
+			end() {
+				uni.$u.toast(this.$t('common.lab4'));
+			},
+			start() {
+				// uni.$u.toast('start');
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.main {
+		padding: 0 24rpx;
+	}
+
+	.contain {
+		background: #F3F3F7;
+		min-height: 100vh;
+	}
+
+	.select-head {
+		position: sticky;
+		top: 0;
+		z-index: 99;
+		background-color: #FFF;
+
+		.select-tab {
+			padding: 0 28rpx;
+			margin-top: 20rpx;
+		}
+	}
+
+	.info {
+		padding: 30rpx 28rpx;
+		border-bottom: 2rpx solid #E9E9E9;
+		background-color: #FFF;
+	}
+
+	.preservation {
+		padding: 0 30rpx;
+		border-radius: 200rpx;
+		color: #FFF;
+		margin-top: 96rpx;
+	}
+
+	.arrow-right {
+		width: 48.01rpx;
+		height: 48.01rpx;
+		margin-left: 6rpx;
+	}
+
+	input {
+		width: 100%;
+	}
+
+	.getcode {
+		width: 152rpx;
+		padding: 12rpx 0;
+		line-height: 48rpx;
+		font-size: 24rpx;
+		margin: 0;
+		height: 48rpx;
+		text-align: center;
+		background: #FFFFFF;
+		border-radius: 4rpx;
+		color: #DC3C23;
+		border: 2rpx solid #DC3C23;
+	}
+
+	.password-bg {
+		background-color: #fff;
+		width: 100%;
+		height: 20rpx;
+	}
+	.clew {
+		margin-top: 20rpx;
+	}
+</style>

pages/Match/setting/language.vue

@@ -0,0 +1,100 @@
+<template>
+  <div>
+    <view class="topic-head">
+		  <header-logo></header-logo>
+      <div class="bar flex">
+        <div class="flex" @click="stepBack">
+          <u-icon name="arrow-left" color="#ffffff" size="16px" bold></u-icon>
+          <!-- Language -->
+        {{ $t('more.lab6') }}
+        </div>
+      </div>
+    </view>
+    <div class="list">
+      <div class="item flex" @click="setLang('en')">
+        English
+        <div>
+          <img v-show="language != 'en'" class="img" src="/static/image/common/check.png" alt="">
+          <img v-show="language == 'en'" class="img" src="/static/image/common/checked.png" alt="">
+        </div>
+      </div>
+      <div class="item flex" @click="setLang('hi')">
+        हिंदी
+        <div>
+          <img v-show="language != 'hi'" class="img" src="/static/image/common/check.png" alt="">
+          <img v-show="language == 'hi'" class="img" src="/static/image/common/checked.png" alt="">
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { setTabBar } from '@/utils/util'
+export default {
+  data () {
+    return {
+      
+    }
+  },
+  computed: {
+    language() {
+      return this.$store.state.language;
+    },
+  },
+  methods: {
+    setLang(lan) {
+      this.$i18n.locale = lan
+      this.$store.commit('setLang', lan);
+      setTabBar(this)
+    },
+    stepBack() {
+      uni.switchTab({
+        url: '/pages/more/index'
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.topic-head {
+  position: sticky;
+  top: 0;
+  z-index: 9;
+  .header {
+    position: relative;
+    display: flex;
+    align-items: center;
+    padding-left: 20rpx;
+  }
+  .bar {
+    background-color: #262E4A;
+    height: 40px;
+    font-weight: 500;
+    font-size: 16px;
+    padding: 0 16px;
+    color: #fff;
+    .u-icon {
+      margin-right: 10px;
+    }
+  }
+}
+.list {
+  padding-top: 23px;
+  font-weight: 500;
+  font-size: 16px;
+  color: #242424;
+  .item {
+    background-color: #F9F9F9;
+    height: 48px;
+    padding: 0 20px 0 16px;
+    justify-content: space-between;
+    &+.item {
+      margin-top: 6px;
+    }
+  }
+  .img {
+    display: block;
+    width: 16px;
+  }
+}
+</style>

pages/Match/setting/setting.vue

@@ -0,0 +1,119 @@
+<template>
+	<view class="contain">
+		<view class="select-head">
+			<u-navbar :leftText="$t('member.settings')" bgColor="transparent" leftIconColor="#fff" :titleStyle="{color:'#fff'}" :fixed="false" leftIconSize="48" :autoBack="true"></u-navbar>
+		</view>
+		<view class="main">
+			<!-- <view class="flex item mg-tp24">
+				<text>Floating window play</text>
+				<u-switch v-model="value1" activeColor="#E3AC72" size="28" ></u-switch>
+			</view> -->
+			<!-- <view class="flex item mg-tp20">
+				<text>Check for updates</text>
+				<image src="../../../static/image/match/arrow-right.png" mode="widthFix" class="arrow-right"></image>
+			</view> -->
+			<!-- <view class="flex item">
+				<text>About us</text>
+				<image src="../../../static/image/match/arrow-right.png" mode="widthFix" class="arrow-right"></image>
+			</view> -->
+			<view class="mg-tp20" style="border-radius: 10rpx;overflow: hidden;">
+				<navigator url="/pages/Match/setting/change-password">
+					<view class="flex item ">
+						<text>{{$t('member.changePw')}}</text>
+						<image src="../../../static/image/match/arrow-right.png" mode="widthFix" class="arrow-right"></image>
+					</view>
+				</navigator>
+				<navigator url="/pages/Match/setting/cancel-account">
+					<view class="flex item" style="border-top: 2rpx solid #F3F3F7;">
+						<text>
+							<!-- Cancel account -->
+							{{ $t('navbar.txt8') }}
+						</text>
+						<image src="../../../static/image/match/arrow-right.png" mode="widthFix" class="arrow-right"></image>
+					</view>
+				</navigator>
+			</view>
+			<!-- <view class="flex item">
+				<text>About us</text>
+				<image src="../../../static/image/match/arrow-right.png" mode="widthFix" class="arrow-right"></image>
+			</view> -->
+			<view class="mg-tp20" style="border-radius: 10rpx;overflow: hidden;">
+				<navigator url="../../login/agreement?type=1">
+					<view class="flex item ">
+						<text>
+							<!-- User agreement -->
+							{{ $t('member.lab8') }}
+						</text>
+						<image src="../../../static/image/match/arrow-right.png" mode="widthFix" class="arrow-right"></image>
+					</view>
+				</navigator>
+				<navigator url="../../login/agreement?type=2">
+					<view class="flex item" style="border-top: 2rpx solid #F3F3F7;">
+						<text>
+							<!-- Privacy policy -->
+							{{ $t('download.lab30') }}
+						</text>
+						<image src="../../../static/image/match/arrow-right.png" mode="widthFix" class="arrow-right"></image>
+					</view>
+				</navigator>
+			</view>
+			
+	<!-- 		<navigator url="../../login/agreement?type=1">
+				<view class="flex item mg-tp20">
+					<text>User agreement</text>
+					<image src="../../../static/image/match/arrow-right.png" mode="widthFix" class="arrow-right"></image>
+				</view>
+			</navigator>
+			<navigator url="../../login/agreement?type=2">
+				<view class="flex item mg-tp20">
+					<text>Privacy policy</text>
+					<image src="../../../static/image/match/arrow-right.png" mode="widthFix" class="arrow-right"></image>
+				</view>
+			</navigator> -->
+			
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				value1:false
+			};
+		},
+		methods:{
+
+		}
+	}
+</script>
+
+<style lang="scss">
+	.main{
+		padding: 0 24rpx;
+	}
+	.contain{
+		background-color: #F3F3F7;
+		min-height: 100vh;
+	}
+	.select-head {
+		position: sticky;
+		top: 0;
+		z-index: 99;
+		background-color: $color1;
+		.select-tab {
+			padding: 0 28rpx;
+			margin-top: 20rpx;
+		}
+	}
+	.item{
+		padding: 30rpx 24rpx ;
+		background-color: #fff;
+	}
+	.arrow-right{
+		width: 48.01rpx;
+		height: 48.01rpx;
+	}
+
+
+</style>

pages/Match/stats-detail.vue

@@ -0,0 +1,278 @@
+<template>
+	<view>
+		<view class="select-head">
+			<u-navbar :leftText="parent.title" bgColor="transparent" leftIconColor="#fff" :titleStyle="{color:'#fff'}" :fixed="false" leftIconSize="48" :autoBack="true"></u-navbar>
+			<view class="select-tab">
+				<u-tabs
+				:list="list1"
+				@click="changeTab" 
+				:current="activeIndex"
+				lineHeight="0" 
+				lineColor="#DC3C23"   
+				:activeStyle="{
+					color:'#DC3C23',
+					fontSize:'32rpx',
+					padding:'2rpx 20rpx',
+					border:'1rpx solid #DC3C23',
+					borderRadius:'31rpx'
+				}" 
+				:inactiveStyle="{
+					color:'#fff',
+					fontSize:'32rpx',
+					padding:'2rpx 20rpx',
+					border:'1rpx solid #FFF',
+					borderRadius:'31rpx'
+				}"
+				></u-tabs>
+			</view>
+		</view>
+		<view class="list">
+			<view class="list-item-tr size24 c6">
+				<view> # </view>
+				<view>
+					<!-- TEAM  -->
+					{{ $t('live.lab25') }}
+				</view>
+				<view> {{activeIndex == 0?'B':'M'}} </view>
+				<view> {{activeIndex == 0?'S/R':0 < activeIndex && activeIndex < 5?'INN':'O'}} </view>
+				<view> {{activeIndex == 0?'VS':activeIndex == 1 || activeIndex == 5?'AVG':activeIndex == 6 || activeIndex == 7?'W':'R'}} </view>
+				<view> {{activeIndex == 0 || activeIndex == 1?'RUNS':activeIndex == 2 || activeIndex == 6?'AVG':activeIndex == 3?'S/R':activeIndex == 4?'6S':activeIndex == 5?'W':'ECO'}} </view>
+			</view>
+			
+			<view class="list-item-th" v-for="(item,index) in statsDetail.list" :key="index" :class="{actives:acIndex == index}"><!-- @click="acIndex=item" -->
+				<view class="flex-end list-av" :name="index+1">
+					<image :src="item.img || '/static/image/common/[email protected]'" mode="aspectFill" class="list-avatar mg-rt16"></image>
+				</view>
+				<view class="size28 c6">
+					<view class="size32 c3 mg-bt6">
+						{{item.name}}
+					</view>
+					<text>{{item.abbreviation}}</text>
+				</view>
+				<view class="size28 c6">
+					<text>{{activeIndex == 0?item.b:item.m}}</text>
+				</view>
+				<view class="size32 c3 ">
+					<text>{{activeIndex == 0?item.sr:0 < activeIndex && activeIndex < 5?item.inn:item.o}}</text>
+				</view>
+				<view class="size32 c3 ">
+					<text>{{activeIndex == 0?item.vscname:activeIndex == 1 || activeIndex == 5?item.avg:activeIndex == 6 || activeIndex == 7?item.w:item.runs}}</text>
+				</view>
+				<view class="size32 c3 ">
+					<text>{{activeIndex == 0 || activeIndex == 1?item.runs:activeIndex == 2 || activeIndex == 6?item.avg:activeIndex == 3?item.sr:activeIndex == 4?item['sixs']:activeIndex == 5?item.w:item.eco}}</text>
+				</view>
+			</view>
+			<u-empty
+				v-if="statsDetail.list.length == 0"
+				mode="data"
+				width="474"
+				height="312"
+				textSize="28"
+				marginTop="100"
+				:text="$t('common.nodata')"
+				icon="/static/image/common/nodata.png"
+			></u-empty>
+			<view class="mg-tp36 size28 c9 text-center">
+				{{statsDetail.updated_at}}
+			</view>
+		</view>
+		<view class="bgE5 clossary mg-tp36">
+			<!-- GLOSSARY -->
+			{{ $t('live.lab14') }}
+		</view>
+		<view class="main size28 c6">
+			<view class="mg-bt24"><text class="c3 Bold">#:</text>
+				<!-- Rank  -->
+				{{ $t('live.lab15') }}
+			</view>
+			<view class="mg-bt24"><text class="c3 Bold">B:</text>
+				<!-- Balls  -->
+				{{ $t('match.lab65') }}
+			</view>
+			<view class="mg-bt24"><text class="c3 Bold">M:</text>
+				<!-- Matches  -->
+				{{ $t('match.lab83') }}
+			</view>
+			<view class="mg-bt24"><text class="c3 Bold">R:</text>
+				<!-- Runs  -->
+				{{ $t('match.lab66') }}
+			</view>
+			<view class="mg-bt24"><text class="c3 Bold">O:</text>
+				<!-- Overs  -->
+				{{ $t('match.lab67') }}
+			</view>
+			<view class="mg-bt24"><text class="c3 Bold">W:</text>
+				<!-- Wickets  -->
+				{{ $t('match.lab68') }}
+			</view>
+			<view class="mg-bt24"><text class="c3 Bold">VS:</text>
+				<!-- Versus Team  -->
+				{{ $t('match.lab69') }}
+			</view>
+			<view class="mg-bt24"><text class="c3 Bold">INN:</text>
+				<!-- Innings  -->
+				{{ $t('match.lab70') }}
+			</view>
+			<view class="mg-bt24"><text class="c3 Bold">AVG:</text>
+				<!-- Average  -->
+				{{ $t('match.lab71') }}
+			</view>
+			<view class="mg-bt24"><text class="c3 Bold">S/R:</text>
+				<!-- Strike Rate  -->
+				{{ $t('match.lab72') }}
+			</view>
+			<view class="mg-bt24"><text class="c3 Bold">ECO:</text>
+				<!-- Economy Rate  -->
+				{{ $t('match.lab73') }}
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				acIndex:0,
+				list1:[
+					{
+						name: this.$t('match.lab74'),
+					},
+					{
+						name: this.$t('match.lab75'),
+					},
+					{
+						name: this.$t('match.lab76'),
+					},
+					{
+						name: this.$t('match.lab77'),
+					},
+					{
+						name: this.$t('match.lab78'),
+					},
+					{
+						name: this.$t('match.lab79'),
+					},
+					{
+						name: this.$t('match.lab80'),
+					},
+					{
+						name: this.$t('match.lab81'),
+					},
+					{
+						name: this.$t('match.lab82'),
+					},
+					{
+						name: this.$t('match.lab83'),
+					},
+					{
+						name: this.$t('match.lab84'),
+					}
+				],
+				statsDetail:{
+					list:[],
+					updated_at:''
+				},
+				parent:{},
+				activeIndex:0
+			}
+		},
+		onLoad(option) {
+			option.type = Number(option.type);
+			this.activeIndex = option.type;
+			this.parent = option;
+			this.getList()
+		},
+		methods: {
+			changeTab(e) {
+				console.log("e: ",e);
+				this.activeIndex = e.index;
+				this.getList()
+			},
+			getList() {
+				uni.$u.http.post('/api/Cricket/get_tournament_stats_list',{id:this.parent.id,type:this.activeIndex+1}).then(res=>{
+					// this.stats = res
+					this.statsDetail = res;
+				}).catch(res=>{})
+			}
+		},
+	}
+</script>
+
+<style lang="scss">
+	.select-head {
+		position: sticky;
+		top: 0;
+		z-index: 99;
+		background-color: $color1;
+		.select-tab {
+			padding: 0 28rpx;
+			margin-top: 20rpx;
+		}
+	}
+	
+	.list{
+		
+		.list-item-tr{
+			display: grid;
+			grid-template-columns: 130rpx 225rpx 90rpx 90rpx 90rpx 90rpx;
+			padding: 24rpx;
+			border-bottom: 1rpx solid #ccc;
+		}
+		.list-item-th{
+			display: grid;
+			grid-template-columns: 130rpx 225rpx 90rpx 90rpx 90rpx 90rpx;
+			padding: 24rpx;
+			border-bottom: 1rpx solid #ccc;
+			.list-avatar{
+				width: 90rpx;
+				height: 90rpx;
+				border-radius: 50px;
+				// overflow: visible;
+			}
+			.list-av {
+				position: relative;
+				&:before{
+					content: attr(name);
+					position: absolute;
+					left: 0rpx;
+					top: 50%;
+					width: 40rpx;
+					height: 40rpx;
+					border-radius: 200rpx;
+					background-color: #E5E5E5;
+					margin-top: -20rpx;
+					font-size: 24rpx;
+					color: #999;
+					text-align: center;
+					line-height: 40rpx;
+					z-index: 1;
+				}
+			}
+		}
+		.actives{
+			background: #FFE6E2;
+			.list-av{
+				&:before{
+					background: #DC3C23;
+					color: #fff;
+				}
+			}
+		}
+	}
+	
+	.clossary{
+		padding: 20rpx 28rpx;
+	}
+	
+	.main{
+		padding: 24rpx 28rpx;
+		margin-top: 30rpx;
+		view{
+			text{
+				margin-right: 16rpx;
+				display: inline-block;
+			}
+		}
+	}
+</style>

pages/Match/team.vue

@@ -0,0 +1,501 @@
+<template>
+	<view>
+		<view class="select-head">
+			<u-navbar :leftText="$t('navbar.txt2')" bgColor="transparent" leftIconColor="#fff" :titleStyle="{color:'#fff'}"
+				:fixed="false" leftIconSize="48" :autoBack="true"></u-navbar>
+		</view>
+		<view class="main">
+			<view class="heander-info cfff pd24">
+				<view class="flex size28">
+					<view class="flex-col align-center">
+						<text>{{obj.home_name}}</text>
+						<image :src="obj.home_logo" mode="aspectFill" class="team-icon"></image>
+					</view>
+					<image src="../../static/image/match/matches_detail_vs_ico.png" mode="aspectFit" class="vs-icon">
+					</image>
+					<view class="flex-col align-center">
+						<text>{{obj.away_name}}</text>
+						<image :src="obj.away_logo" mode="aspectFill" class="team-icon"></image>
+					</view>
+				</view>
+				<!-- <view class="flex">
+				</view> -->
+				<view class="flex mg-tp34 size28 cfff Bold">
+					<text>{{obj.home_win_probabilities}}%</text>
+					<text>{{obj.away_win_probabilities}}%</text>
+				</view>
+				<u-line-progress activeColor="#C8C8C8" inactiveColor="#DC3C23" :percentage="obj.home_win_probabilities"
+					:showText="false"></u-line-progress>
+				<view class="text-center size-28 cfff mg-tp10">
+					<!-- WIN PROBABILITY -->
+				{{ $t('match.labe85') }}
+				</view>
+			</view>
+
+			<view class="size32 c3 mg-tp40">
+				<text class="Bold">
+					<!-- Matches Played Recently -->
+				{{ $t('match.labe86') }}
+				</text>
+				<view class="size28 c6">
+					<!-- The Hundred -->
+				{{ $t('match.labe87') }}
+				</view>
+			</view>
+
+			<view class="table-list">
+				<view class="table-list-item" v-for="row in 2" :key="row">
+					<view class="table-list-item-header flex" @click="rowAcIndex=rowAcIndex==row?'':row">
+						<view class="list-left flexcenter">
+							<text class="size32 c3">{{row == 1?obj.home_name:obj.away_name}}</text>
+						</view>
+						<view class="flexcenter">
+							<view class="l-w" :class="{lwRed:item == 'L'}"
+								v-for="(item,index) in row == 1?obj.home:obj.away" :key="index">
+								{{item}}
+							</view>
+						</view>
+						<!-- <view class="flexcenter" v-else>
+							<view class="l-w" v-for="(item,index) in obj.away_site" :key="index">
+								{{item}}
+							</view>
+						</view> -->
+						<view class="list-left flex-end">
+							<image src="../../static/image/match/expert_down_ico.png" class="right-icon"
+								mode="widthFix"></image>
+						</view>
+					</view>
+					<view :class="{actives:row==rowAcIndex}" class="table-list-item-content bgE5">
+						<u-row justify="space-between" v-for="(item,index) in row == 1?obj.home_list:obj.away_list"
+							:key="index">
+							<view class="flex-col align-center">
+								<text class="size32 Bold" v-if="row == 1"
+									:style="{color:item.winner_id == obj.home_id?'#219430':'#DC3C23' }">{{item.home_display_score || 0}}</text>
+								<text class="size32 Bold" v-else
+									:style="{color:item.winner_id == obj.away_id?'#219430':'#DC3C23'}">{{item.home_display_score || 0}}</text>
+								<text class="c6 size24">({{item.home_display_overs || 0}})</text>
+							</view>
+							<view class="flex-col align-center table-list-item-content-views">
+								<view class="text-center size24 mg-bt10 c9">
+									{{item.date}} <br>
+									{{item.venue}}
+								</view>
+								<text class="c3 size28" style="text-align: center;">{{item.match_result}}</text>
+							</view>
+							<view class="flex-col align-center">
+								<text class="c6 size24">{{row == 2?obj.home_name:obj.away_name}}</text>
+								<text class="c3 size32n Bold">{{item.away_display_score || 0}}</text>
+								<text class=" size24">({{item.away_display_overs || 0}})</text>
+							</view>
+						</u-row>
+					</view>
+				</view>
+			</view>
+
+		</view>
+
+		<u-gap bgColor="#f3f3f3" height="24"></u-gap>
+
+		<view class="main">
+			<view class="mg-tp12 size32 c3">
+				Team Strengths
+			</view>
+			<text class="size28 c6">
+				{{ $t('match.labe87') }}
+				</text>
+			<view class="disflex mg-tp24">
+				<view class="disflex-img">
+					<image src="../../static/image/match/team_context_avatar.png" mode="widthFix"
+						class="team-avatar mg-rt24"></image>
+					<text>{{obj.home_win_num + obj.away_win_num + obj.no_result}}</text>
+				</view>
+				<view class="flex-col justify-between progress-l-w">
+					<view>
+						<view class="flex size28">
+							<text class="c6">{{obj.home_name}} {{ $t('match.labe89') }}</text>
+							<text class="c3">{{obj.home_win_num}}</text>
+						</view>
+						<u-line-progress activeColor="#DC3C23" inactiveColor="#C8C8C8"
+							:percentage="getNum(obj.home_win_num)" :showText="false"></u-line-progress>
+						<!-- <view class="progress-box bgc8"></view> -->
+					</view>
+					<view>
+						<view class="flex size28">
+							<text class="c6">{{obj.away_name}} {{ $t('match.labe89') }}</text>
+							<text class="c3">{{obj.away_win_num}}</text>
+						</view>
+						<u-line-progress activeColor="#DC3C23" inactiveColor="#C8C8C8"
+							:percentage="getNum(obj.away_win_num)" :showText="false"></u-line-progress>
+					</view>
+					<view>
+						<view class="flex size28">
+							<text class="c6">
+								{{ $t('match.labe90') }}
+							</text>
+							<text class="c3">{{obj.no_result}}</text>
+						</view>
+						<u-line-progress activeColor="#DC3C23" inactiveColor="#C8C8C8"
+							:percentage="getNum(obj.no_result)" :showText="false"></u-line-progress>
+					</view>
+				</view>
+			</view>
+
+			<view class="recent" v-for="(item,index) in obj.historical_confrontation" :key="index">
+				<view class="flex size32 c3">
+					<text class="Bold">
+						{{ $t('match.labe91') }}
+						</text>
+					<text class="size24 c9">
+								{{ $t('match.labe92') }}
+					</text>
+				</view>
+				<view class="flex mg-tp33">
+					<view class="lns-wnr bg831">{{obj.home_name}}</view>
+					<view class="lns-wnr bgc23">{{obj.away_name}}</view>
+				</view>
+				<view class="mg-tp24 flex align-start">
+					<view>
+						<text class="size32 c3 Bold">{{item.home_display_score}}</text>
+						<view class="size24 c6">
+							({{item.home_display_overs}})
+						</view>
+					</view>
+					<view class="flex-col align-center">
+						<view class="text-center size24 c9 text-center mg-bt10">
+							{{item.date}} <br>
+							{{item.venue}}
+						</view>
+						<text class="size28 c3" style="text-align: center;">{{item.match_result}}</text>
+					</view>
+					<view class="flex-col align-end">
+						<text class="size32 c3 Bold">{{item.away_display_score}}</text>
+						<text class="size24 c6">({{item.away_display_overs}})</text>
+					</view>
+				</view>
+			</view>
+
+		</view>
+
+		<!-- <u-gap bgColor="#f3f3f3" height="24"></u-gap> -->
+
+		<view class="main" style="display: none;">
+			<view class="recent mg-tp12 recent2">
+				<view class="flex size32 c3">
+					<text class="Bold">
+						{{ $t('match.labe88') }}
+					</text>
+					<view class="size24 c9">
+						{{ $t('match.labe93') }}
+					</view>
+				</view>
+
+				<view class="flex mg-tp33">
+					<view class="lns-wnr bg831">LNS</view>
+					<view class="lns-wnr bgc23">WNR</view>
+				</view>
+
+				<view class="mg-tp24 flex">
+					<view>
+						<text class="size32 c3 Bold">17</text>
+					</view>
+					<view class="flex driver-line">
+						<text> </text>
+						<view class="size28 cc6 text-center">{{ $t('match.labe94') }} <br>
+							({{ $t('match.labe95') }})</view>
+						<text> </text>
+					</view>
+					<view class="flex-col align-end">
+						<text class="size32 c3 Bold">16</text>
+					</view>
+				</view>
+
+				<view class="mg-tp24 flex">
+					<image src="../../static/image/common/[email protected]" mode="widthFix"
+						class="team-vs-avatar"></image>
+					<view class="flexcenter driver-line">
+						<text> </text>
+						<view class="size28 cc6 text-center">{{ $t('match.labe934') }} <br>
+							({{ $t('match.labe95') }})</view>
+						<text> </text>
+					</view>
+					<image src="../../static/image/common/[email protected]" mode="widthFix"
+						class="team-vs-avatar"></image>
+				</view>
+
+				<view class="flex size24 c9 mg-tp16">
+					<text>
+						{{ $t('match.labe96') }}
+					</text>
+					<text>
+						{{ $t('match.labe97') }}
+					</text>
+				</view>
+			</view>
+
+			<u-row class="mg-tp50">
+				<u-col span="6">
+					<view class="flex size24 c6">
+						<text>
+						{{ $t('match.labe98') }}
+							</text>
+						<text>50%</text>
+					</view>
+					<view class="progrees-serve">
+						<u-line-progress activeColor="#DC3C23" inactiveColor="#C8C8C8" :percentage="50"
+							:showText="false"></u-line-progress>
+					</view>
+				</u-col>
+				<u-col span="6">
+					<view class="flex size24 c6">
+						<text>
+						{{ $t('match.labe99') }}
+							</text>
+						<text>25%</text>
+					</view>
+					<view>
+						<u-line-progress activeColor="#219430" inactiveColor="#C8C8C8" :percentage="25"
+							:showText="false"></u-line-progress>
+					</view>
+				</u-col>
+			</u-row>
+			<u-row class="mg-tp50">
+				<u-col span="6">
+					<view class="flex size24 c6">
+						<text>
+						{{ $t('match.labe98') }}
+							</text>
+						<text>50%</text>
+					</view>
+					<view class="progrees-serve">
+						<u-line-progress activeColor="#DC3C23" inactiveColor="#C8C8C8" :percentage="50"
+							:showText="false"></u-line-progress>
+					</view>
+				</u-col>
+				<u-col span="6">
+					<view class="flex size24 c6">
+						<text>
+						{{ $t('match.la') }}
+							</text>
+						<text>25%</text>
+					</view>
+					<view>
+						<u-line-progress activeColor="#219430" inactiveColor="#C8C8C8" :percentage="25"
+							:showText="false"></u-line-progress>
+					</view>
+				</u-col>
+			</u-row>
+
+		</view>
+
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				rowAcIndex: null,
+				obj: {
+
+				}
+			};
+		},
+		onLoad(option) {
+			// 35240243
+			this.getDetail(option.match_id)
+		},
+		methods: {
+			getDetail(id) {
+				uni.$u.http.post('/api/Cricket/cricket_match_detail_fantasy_info', {
+					match_id: id
+				}).then(res => {
+					this.obj = res;
+				}).catch(res => {})
+			},
+			// 获取百分比
+			getNum(num) {
+				let {
+					home_win_num,
+					away_win_num,
+					no_result
+				} = this.obj;
+				let total = home_win_num + away_win_num + no_result;
+
+				return (num / total) * 100
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.select-head {
+		position: sticky;
+		top: 0;
+		z-index: 99;
+		background-color: $color1;
+
+		.select-tab {
+			padding: 0 28rpx;
+			margin-top: 20rpx;
+		}
+	}
+
+	.main {
+		padding: 24rpx 28rpx;
+
+		.heander-info {
+			background: url(../../static/image/match/team_context.png) center center/ 100% auto no-repeat;
+			border-radius: 10rpx;
+
+			.team-icon {
+				width: 80rpx;
+				height: 80rpx;
+			}
+
+			.vs-icon {
+				width: 48rpx;
+				height: 48rpx;
+			}
+		}
+
+		.table-list {
+			box-shadow: 0rpx 0rpx 8rpx 1rpx $color7;
+			border-radius: 10rpx 10rpx 10rpx 10rpx;
+			overflow: hidden;
+			margin-top: 24rpx;
+
+			.table-list-item {
+				.table-list-item-header {
+					background: #FFFFFF;
+					padding: 36rpx 0;
+
+					.list-left {
+						width: 86rpx;
+						padding: 0 24rpx;
+
+						image {
+							width: 19rpx;
+							height: 19rpx;
+						}
+					}
+
+					.l-w {
+						width: 48rpx;
+						height: 48rpx;
+						background-color: #219430;
+						margin-left: 16rpx;
+						text-align: center;
+						color: #FFFFFF;
+
+						&:first-child {
+							margin-left: 0;
+						}
+					}
+
+					.lwRed {
+						background-color: #DC3C23;
+						margin-left: 16rpx;
+					}
+
+				}
+
+				.table-list-item-content {
+					height: 0;
+					overflow: hidden;
+
+					.u-row {
+						padding: 24rpx 0;
+						border-bottom: 1rpx solid #ccc;
+
+						view {
+							padding: 0 24rpx;
+						}
+
+						.table-list-item-content-views {
+							flex: 1;
+						}
+					}
+				}
+
+				.actives {
+					height: inherit;
+				}
+			}
+		}
+
+		.team-avatar {
+			width: 227rpx;
+			height: 216rpx;
+			border-radius: 10rpx;
+		}
+
+		.disflex-img {
+			position: relative;
+
+			text {
+				position: absolute;
+				right: 42rpx;
+				bottom: 22rpx;
+				color: #fff;
+				font-size: 40rpx;
+			}
+		}
+
+		.progress-l-w {
+			flex: 1;
+
+			.progress-box {
+				height: 16rpx;
+				width: 100%;
+				border-radius: 30rpx;
+			}
+		}
+
+		.recent {
+			background: #FFFFFF;
+			box-shadow: 0rpx 0rpx 6rpx 1rpx rgba(0, 0, 0, 0.3);
+			border-radius: 10rpx 10rpx 10rpx 10rpx;
+			margin-top: 24rpx;
+			padding: 24rpx;
+
+			.lns-wnr {
+				padding: 0 17rpx;
+				display: block;
+				color: #FFFFFF;
+				font-size: 24rpx;
+			}
+
+			.team-vs-avatar {
+				width: 66rpx;
+				height: 66rpx;
+			}
+
+			.driver-line {
+				flex: 1;
+
+				text {
+					display: block;
+					width: 100%;
+					flex: 1;
+					height: 1rpx;
+					background-color: #ccc;
+					margin: 0 22rpx;
+				}
+
+				view {
+					margin: 0 8rpx;
+					color: #666;
+					font-size: 24rpx;
+				}
+			}
+		}
+
+		.recent2 {
+			box-shadow: none;
+		}
+
+		.progrees-serve {
+			transform: rotateZ(180deg);
+		}
+	}
+</style>

pages/Match/teams/detail.vue

@@ -0,0 +1,120 @@
+<template>
+	<view class="detail">
+		<view class="head">
+			<u-navbar :leftText="$t('navbar.txt9')" bgColor="transparent" leftIconColor="#fff" :titleStyle="{color:'#fff'}" :fixed="false" leftIconSize="48" :autoBack="true"></u-navbar>
+			<view class="flex-start head-info">
+				<image :src="playerInfo.image_path || '/static/image/common/[email protected]'" mode="aspectFit"></image>
+				<view class="head-info-left">
+					<view class="title font32">
+						{{playerInfo.full_name}}
+					</view>
+					<view class="t">
+						{{playerInfo.type}}
+					</view>
+					<view class="t">
+						{{playerInfo.birth}}
+					</view>
+				</view>
+			</view> 
+			<view class="select-tab flex-center">
+				<u-tabs
+				:list="list1"
+				@click="changeTab"
+				:isscroll="false"
+				lineHeight="4" 
+				:current="tabIndex"
+				lineColor="#DC3C23"   
+				:activeStyle="{color:'#DC3C23',fontSize:'32rpx',fontWeight:'Bold'}" 
+				:inactiveStyle="{color:'#333',fontSize:'32rpx'}"
+				></u-tabs>
+			</view>
+		</view>
+		
+		<Bio v-show="tabIndex == 0" ref="bio"></Bio>
+		<career v-show="tabIndex == 1" ref="career"></career>
+	</view>
+</template>
+
+<script>
+	import Bio from '@/pages/Match/compontent/Bio.vue'
+	import career from '@/pages/Match/compontent/Career.vue'
+	export default {
+		components:{Bio,career},
+		data() {
+			return {
+				parent:{},
+				list1: [
+					{
+						name: this.$t('match.lab29'),
+					},
+					{
+						name: this.$t('match.lab30'),
+					},
+					// {
+					// 	name: this.$t('match.lab31'),
+					// }
+				],
+				tabIndex:1,
+				playerInfo:{}
+			}
+		},
+		onLoad(option) {
+			this.parent = option;
+			this.getDetail()
+			this.$nextTick(res=>{
+				this.$refs.bio.getBio(option.id)
+				this.$refs.career.getInfo(this.parent.id)
+			})
+		},
+		methods:{
+			changeTab(e) {
+				this.tabIndex = e.index
+				if(e.index == 1) {
+					this.$nextTick(res=>{
+						this.$refs.career.getInfo(this.parent.id)
+					})
+				}
+			},
+			/* 获取详情 */
+			getDetail() {
+				uni.$u.http.post('/api/CricketPlayer/cricket_player_index',{player_id:this.parent.id}).then(res=>{
+					this.playerInfo = res
+				}).catch(res=>{})
+			}
+			
+		}
+	}
+</script>
+
+<style lang="scss">
+	.info {
+		
+	}
+	.select-tab {
+		margin: 0 24rpx;
+		margin-bottom: 40rpx;
+		border-radius: 40rpx 40rpx 0 0;
+		background-color: white;
+	}
+	.head {
+		background-color: #1D2550;
+	}
+	.head-info {
+		color: #fff;
+		margin-top: 26rpx;
+		padding: 24rpx 28rpx;
+		
+		image {
+			width: 120rpx;
+			height: 120rpx;
+			margin-right: 24rpx;
+		}
+		.title {
+			font-weight: bold;
+		}
+		.t {
+			color: #999;
+			font-size: 24rpx;
+		}
+	}
+</style>

pages/Match/teams/teams.vue

@@ -0,0 +1,99 @@
+<template>
+	<view class="size32 c3">
+		<view class="select-head">
+			<u-navbar :leftText="parent.title" bgColor="transparent" leftIconColor="#fff" :titleStyle="{color:'#fff'}" :fixed="false" leftIconSize="48" :autoBack="true"></u-navbar>
+		</view>
+		<view class="mg-tp24 mg-bt24 text-center size28 c9">
+			<!-- Full squad for this tour -->
+			{{ $t('match.lab32') }}
+		</view>
+		
+		<view class="" v-for="(item,index) in tournament_list" :key="index">
+			<view class="bgE5 title flex">
+				<text class="Bold">{{item.name}}</text>
+				<text>{{item.count}}</text>
+			</view>
+			<view class="stats-main mg-tp12">
+				<view class="stats-main-content">
+					<u-row v-for="(item1,index1) in item.players" :key="index1" justify="space-between"  @click="$toUrl('./detail?id=' + item1.player_id)">
+						<view class="flex-start">
+							<image :src="item1.players_logo || '/static/image/common/[email protected]'" mode="aspectFit" class="avatar"></image>
+							<view>
+								<text class="size32 c3 Bold">{{item1.players_name}}</text>
+								<view class="mg-tp5 size c3 font28">
+									{{item.name == 'batters'?item1.batting_style:item.name == 'bowlers'?item1.bowling_style:item1.batting_style+'，'+item1.bowling_style}}
+								</view>
+							</view>
+						</view>
+					</u-row>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				parent:{
+					title:'',
+				},
+				tournament_list:{}
+			};
+		},
+		onLoad(option) {
+			this.parent = option;
+			this.get_tournament_team_list()
+		},
+		methods:{
+			/* 获取团队列表 */
+			get_tournament_team_list() {
+				uni.$u.http.post('/api/Cricket/get_tournament_team_list',{competitor_id:this.parent.id}).then(res=>{
+					console.log('----------------');
+					for (let var1 in res) {
+						res[var1].name = var1
+					}
+					// console.log(res);
+					this.tournament_list = res
+				}).catch(res=>{})
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	.title{
+		padding: 24rpx 28rpx;
+		font-size: 28rpx;
+	}
+	.select-head {
+		position: sticky;
+		top: 0;
+		z-index: 99;
+		background-color: $color1;
+		.select-tab {
+			padding: 0 28rpx;
+			margin-top: 20rpx;
+		}
+	}
+	.stats-main{
+		.stats-main-content{
+			background: #FFFFFF;
+			.u-row{
+				border-bottom: 1rpx solid #E5E5E5;
+				padding: 24rpx 28rpx;
+				.avatar{
+					width: 90rpx;
+					height: 90rpx;
+					border-radius: 50%;
+					margin-right: 16rpx;
+				}
+				.arrow-right{
+					width: 48rpx;
+					height: 48rpx;
+				}
+			}
+		}
+	}
+</style>

pages/Match/updates-detail.vue

@@ -0,0 +1,75 @@
+<template>
+	<view class="updates-detail">
+		<u-navbar bgColor="transparent" leftIconColor="#000" :fixed="false" leftIconSize="48" :autoBack="true"></u-navbar>
+		<view class="pd-lt28 pd-rt28">
+			<text class="cC23 size280 mg-tp240">
+				<!-- ANALYSIS -->
+				{{ $t('match.la1') }}
+			</text>
+			<view class="size32 c3 Bold mg-tp24">
+				<!-- Magnificent Malan , strokeful Stirling key 
+				attractions in Match25 -->
+				{{ $t('match.la2') }}
+			</view>
+			<text class="size24 c9 mg-tp24">
+				<!-- By Anirudh Garg • Updated on 25 Aug , 2022 -->
+				{{ $t('match.la3') }}
+			</text>
+		</view>
+		<image src="../../static/image/match/[email protected]" mode="widthFix" class="detail-pic"></image>
+		<view class="pd-lt28 pd-rt28 size28 c3 mg-bt36">
+			<text class="mg-tp36">
+				<!-- Adam Rossington(wk) , Daniel Bell-Drummond , Ben McDermott , Dan Lawrence , Eoin Morgan(c) , KieronPollard , Jordan Thompson , Liam Dawson , Nathan Ellis , Chris Wood , Mason Crane Adam Rossington(wk) , Daniel Bell-Drummond , Ben McDermott , Dan Lawrence , Eoin Morgan(c) , KieronPollard , Jordan Thompson , Liam Dawson , Nathan Ellis , Chris Wood , Mason Crane -->
+				{{ $t('match.la4') }}
+			</text>
+			<view class="size32 Bold mg-tp36">
+				<!-- Magnificent Malan -->
+				{{ $t('match.la5') }}
+			</view>
+			<view class="mg-tp24 mg-bt24">
+				<!-- Adam Rossington(wk) , Daniel Bell-Drummond , Ben McDermott , Dan Lawrence , Eoin Morgan(c) , KieronPollard , Jordan Thompson , Liam Dawson , Nathan Ellis , Chris Wood , Mason Crane Adam Rossington(wk) , Daniel Bell-Drummond , Ben McDermott , Dan Lawrence , Eoin Morgan(c) , KieronPollard , Jordan Thompson , Liam Dawson , Nathan Ellis , Chris Wood , Mason Crane -->
+				{{ $t('match.la6') }}
+			</view>
+			<u-gap height="1" bgColor="#ccc"></u-gap>
+			<view class="flex-start mg-tp36">
+				<image src="/static/image/common/player_avatar_ico.png" mode="aspectFill" class="mg-rt16 avatar-pic"></image>
+				<text class="size32 c3 Bold">
+					<!-- CricTracker -->
+				{{ $t('match.la7') }}
+				</text>
+			</view>
+		</view>
+		<u-gap height="24" bgColor="#E5E5E5"></u-gap>
+		<view class="pd-lt28 pd-rt28 size28">
+			<view class="size32 Bold mg-tp36">
+				<!-- Magnificent Malan -->
+				{{ $t('match.la5') }}
+			</view>
+		</view>
+		<Updates/>
+	</view>
+</template>
+
+<script>
+	import Updates from './compontent/Updates.vue';
+	export default {
+		components:{Updates},
+		data() {
+			return {
+				
+			};
+		}
+	}
+</script>
+
+<style lang="scss">
+	.avatar-pic{
+		width: 80rpx;
+		height: 80rpx;
+		border-radius: 200rpx;
+	}
+	.detail-pic{
+		width: 100%;
+		margin: 36rpx 0;
+	}
+</style>

pages/Match/venue.vue

@@ -0,0 +1,244 @@
+<template>
+	<view class="detail">
+		<view class="detail-head flex-col-between">
+				<u-navbar bgColor="transparent" leftIconColor="#fff" :fixed="false" leftIconSize="48" :autoBack="true"></u-navbar>
+				<view class="mg-bt24 pd-lt24">
+					<view class="size40 cfff Bold">
+						<!-- THhe Rose Bowl -->
+					{{ $t('match.la8') }}
+					</view>
+					<view class="size28 cC flex-start">
+						<text class="mg-rt80">
+							<!-- Southampton,England -->
+					{{ $t('match.la9') }}
+						</text>
+						<text>6500</text>
+					</view>
+				</view>
+		</view>
+		<view class="main size28 c3">
+			<text class="size32 Bold">
+				<!-- Pitch Report -->
+				{{ $t('match.la10') }}
+			</text>
+			<view class="mg-tp24">
+				<text class="Bold">
+					<!-- Pitch Behaviour -->
+				{{ $t('match.la11') }}
+				</text>
+				<view class="size24 c6">
+					<!-- Based on last 2 Years data -->
+				{{ $t('match.la12') }}
+				</view>
+			</view>
+			<view class="ball-info flex-start align-end">
+				<u-line color="#EEA831" direction="col" dashed length="209rpx" class="mg-rt11"></u-line>
+				<view class="size24 mg-bt151 mg-rt74">
+					<text class="c6">
+						<!-- OVERALL -->
+				{{ $t('match.la13') }}
+					</text>
+					<view class="Bold">
+						<!-- Bowling	 -->
+				{{ $t('match.la14') }}
+					</view>
+				</view>
+				<u-line color="#EEA831" direction="col" dashed length="104rpx" class="mg-bt46 mg-rt11"></u-line>
+				<view class="size24 mg-bt85 mg-rt74">
+					<text class="c6">
+						<!-- BEST SUITED FOR -->
+				{{ $t('match.la15') }}
+					</text>
+					<view class="Bold">
+						<!-- Pacers	 -->
+				{{ $t('match.la16') }}
+					</view>
+				</view>
+			</view>
+		</view>
+		
+		<u-gap height="24" bgColor="#E5E5E5"></u-gap>
+		
+		<view class="main size28 c3 mg-tp12">
+			<text class="size32 Bold">
+				<!-- Statistics -->
+				{{ $t('match.la17') }}
+			</text>
+			<view class="mg-tp24">
+				<text class="Bold">
+					<!-- Top players at this venue -->
+				{{ $t('match.la18') }}
+				</text>
+				<view class="size24 c6">
+					<!-- Based on last 2 Years The Hunderd matches -->
+				{{ $t('match.la19') }}
+				</view>
+			</view>
+			<view class="table-list">
+				<view class="table-list-header bgE5 size24 c6">
+					<view>
+						<!-- BATSMEN -->
+				{{ $t('match.la20') }}
+					</view>
+					<view class="flexcenter">
+						<!-- Matches -->
+						{{ $t('match.lab83') }}
+					</view>
+					<view class="flexcenter">{{ $t('match.lab83') }}</view>
+					<view>SR</view>
+				</view>
+				<view class="table-list-item flex-start" v-for="item in 5" :key="item">
+					<view class="">
+						<text>{{ $t('match.la30') }}</text>
+						<view class="sob">
+							SOB
+						</view>
+					</view>
+					<view class="flexcenter">6</view>
+					<view class="flexcenter">34.2</view>
+					<view>141.37</view>
+				</view>
+			</view>
+			
+			<view class="infomation flex-start">
+				<image src="../../static/image/match/venue_prompt_ico.png" mode="aspectFit" class="prompt-pic"></image>
+				<text class="size24 c9">
+					<!-- No information found on past performances of the
+					other team's batsmen at this venue. -->
+				{{ $t('match.la21') }}
+				</text>
+			</view>
+			<view class="mg-tp36 Bold">
+				<!-- The Hundred Stats -->
+				{{ $t('match.la22') }}
+			</view>
+			<u-row justify="space-between">
+				<view class="size24">
+					<text class="c6">
+						<!-- AVG.TOTAL SCORE -->
+				{{ $t('match.la23') }}
+					</text>
+					<view class="size40 mg-bt16">
+						132
+					</view>
+				</view>
+				<view class="size24">
+					<text class="c6">
+						<!-- AVG.1ST INNINGS SCORE -->
+				{{ $t('match.la24') }}
+					</text>
+					<view class="size40 mg-bt16">
+						132
+					</view>
+				</view>
+			</u-row>
+			<view class="size24 mg-tp44">
+				<text class="c6">
+					<!-- TOSS WINERS OPT TO -->
+				{{ $t('match.la25') }}
+				</text>
+				<u-line-progress class="mg-tp24" activeColor="#DC3C23" inactiveColor="#CCCCCC"	 :percentage="60" :showText="false"></u-line-progress>
+				<view class="flex Bold" :style="{width:'60%'}">
+					<text>
+						<!-- Bowl First -->
+				{{ $t('match.la26') }}
+					</text>
+					<text>60%</text>
+				</view>
+			</view>
+			<view class="size24 mg-tp44">
+				<text class="c6">
+					<!-- TOSS WINERS OPT TO -->
+				{{ $t('match.la25') }}
+				</text>
+				<u-line-progress class="mg-tp24" activeColor="#DC3C23" inactiveColor="#CCCCCC"	 :percentage="80" :showText="false"></u-line-progress>
+				<view class="flex Bold" :style="{width:'80%'}">
+					<text>
+						<!-- Wins -->
+				{{ $t('match.la27') }}
+					</text>
+					<text>80%</text>
+				</view>
+			</view>
+		</view>
+		
+		<u-gap height="24" bgColor="#E5E5E5"></u-gap>
+		
+		<view class="main mg-tp12">
+			<text class="size32 c3 Bold">
+				<!-- Venue Info -->
+				{{ $t('match.la28') }}
+			</text>
+			<view class="mg-tp24 avg">
+				{{ $t('match.la29') }}
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			};
+		}
+	}
+</script>
+
+<style lang="scss">
+	.detail-head {
+		background: url(@/static/image/match/venue_context.png) center top / 100% 100% no-repeat;
+		height: 406rpx;
+	}
+	.main{
+		padding: 24rpx 28rpx;
+		.ball-info{
+			margin: 24rpx 114rpx 0;
+			background: url('@/static/image/match/expert_pitch.png') center bottom/100% auto no-repeat;
+		}
+		
+		.table-list{
+			margin-top: 24rpx;
+			background: #FFFFFF;
+			box-shadow: 0rpx 0rpx 8rpx 1rpx $color7;
+			border-radius: 10rpx 10rpx 10rpx 10rpx;
+			overflow: hidden;
+			.table-list-header{
+				display: grid;
+				grid-template-rows: 80rpx;
+				padding: 0 24rpx;
+				grid-template-columns: 158rpx  160rpx 200rpx 151rpx;
+				line-height: 80rpx;
+			}
+			.table-list-item{
+				display: grid;
+				border-bottom: 1rpx solid #E5E5E5;
+				grid-template-rows: 120rpx;
+				grid-template-columns: 158rpx  160rpx 200rpx 151rpx;
+				padding: 0 24rpx;
+				.sob{
+					background-color: #219430;
+					padding: 1rpx 16rpx;
+					color: #FFFFFF;
+					width: max-content;
+				}
+			}
+		}
+		
+		.infomation{
+			border-radius: 10rpx;
+			padding: 8rpx 27rpx;
+			margin-top: 24rpx;
+			background-color: #E5E5E5;
+			.prompt-pic{
+				width: 42rpx;
+				height: 42rpx;
+				margin-right: 24rpx;
+			}
+		}
+		.avg{
+			font-size: 24rpx;
+		}
+	}
+</style>

pages/News/community-detail.vue

@@ -0,0 +1,370 @@
+<!-- 文章详情 -->
+<template>
+	<view class="detail">
+		<view class="detail-head flex">
+			<image class="detail-head-left" @click="$back()" src="/static/image/common/left.png" mode=""></image>
+			<!-- <image class="detail-head-logo" :src="detail.info.avatar" mode=""></image> -->
+			<view class="detail-head-name">{{info.classification_name}}</view>
+			<!-- <image src="/static/image/news/topic3.png" mode="" @click="$navigateTo('../download')"></image> -->
+			
+		</view>
+		<view class="detail-comtent">
+			<view class="album flex">
+				<view class="album_top flex-start" v-if="info">
+					<image class="logo" :src="info.avatar" mode=""></image>
+					<view class="">
+						<u--text :text="info.user_nickname" bold size="32"></u--text>
+						<u--text margin="6px 0 0 0" color="#999" size="26" :text="info.addtimeString"></u--text>
+					</view>
+				</view>
+				<view class="detail-head-status" :class="{active:info.is_attention == 1}" @click="attention(info.is_attention)" v-if="infos.id != info.uid">
+					<image src="/static/image/match/guanzhu.png" mode=""></image>
+					{{info.is_attention == 1?$t('news.followed'):$t('news.follow')}}
+				</view>
+			</view>
+			
+			<view class="font28" style="width: 100%;overflow: hidden;color: #333;" v-if="detail.info" v-html="detail.info.title"></view>
+			
+			<view class="album__content" v-if="info.is_flie_type == 0">
+				<u-album multipleSize="200" space="16" :urls="info.img"></u-album>
+			</view>
+			<view class="album__content" v-else >
+				<video style="width: 100%;" v-if="info.video[0]" :src="info.video[0].video"></video>
+				<!-- <image v-if="info.video[0]" :src="info.video[0].img+'?vframe/jpg/offset/0'" mode=""></image> -->
+				<!-- <image class="play" src="/static/image/match/play.png" mode=""></image> -->
+			</view>
+			
+			<view class="detail-link flex-start">
+				<view class="flex-start type">
+					<image :src="info.classification_icon" mode="aspectFill"></image>
+					{{info.classification_name}}
+				</view>
+				<view class="flex-start">
+					<image src="/static/image/news/eyes.png" mode=""></image>
+					<text class="font24">{{info.click}}</text>
+				</view>
+			</view>
+			
+		</view>
+		<comment-community ref="eg" :articleId="id" style="background-color: white;"></comment-community>
+		
+		
+		<view class="detail-common flex">
+			<view class="flex-start input"  @click="setEg()">
+				<image src="/static/image/news/topic9.png" mode=""></image>
+				<text>{{$t('news.input')}}</text>
+			</view>
+			<!-- <image src="/static/image/news/topic7.png" mode="" @click="setEg()"></image> -->
+			<view class="flex-start">
+				<image :src="info.is_likes == 0?'/static/image/news/topic4.png' :'/static/image/news/zan.png'" mode="" @click="likes(info.is_likes)"></image>
+				<text>{{info.likes}}</text>
+			</view>
+			<image :src="info.is_favorites == 0?'/static/image/news/topic1.png':'/static/image/news/fav.png'" mode="" @click="favorites(info.is_favorites)"></image>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				id:0,
+				info:{
+					
+				},
+				detail:{}
+			}
+		},
+		mounted() {
+			
+			
+		},
+		computed:{
+			infos() {
+				return this.$store.state.info
+			},
+		},
+		onLoad(optin) {
+			this.id = optin.id;
+			this.navigate(optin)
+			// this.$u.get('/api/Headlines/getInfo', {id:optin.id}).then(res => {
+			// 	this.detail = res
+			// })
+		},
+		methods:{
+			/* 关注 */
+			attention(type) {
+				if (this.$store.state.isLogin != 1) {
+					this.$toUrl('/pages/login/login')
+					return
+				}
+				uni.showLoading({
+					title:this.$t('common.lab')
+				})
+				uni.$u.http.post('/api/Member/attention', {id:this.info.uid}).then(res => {
+					uni.hideLoading()
+					this.info.is_attention = type == 1?type = 0 : type = 1
+				})
+				
+			},
+			navigate(item){
+				uni.showLoading({
+					title:'loading'
+				})
+				// console.log(item);
+				uni.$u.http.get('/api/circle/info', {params:{id:item.id}}).then(res => {
+					this.detail = res;
+					this.info = res.info;
+					uni.hideLoading()
+					uni.pageScrollTo({ 　　　　　　
+				　　　　duration: 0,//过渡时间必须为0，否则运行到手机会报错
+				　　　　scrollTop: 0 //滚动到实际距离是元素距离顶部的距离减去最外层盒子的滚动距离（如res.top - data.top）
+				　　})
+				})
+			},
+			
+			/* 打开评论 */
+			setEg() {
+				this.$refs.eg.showCom()
+			},
+			
+			/* 点赞 */
+			likes(type) {
+				if (this.$store.state.isLogin != 1) {
+					this.$toUrl('/pages/login/login')
+					return
+				}
+				uni.showLoading({
+					title:this.$t('common.lab')
+				})
+				uni.$u.http.post('api/Circleuser/likes',{id:this.info.id}).then(res=>{
+					this.info.is_likes = type==1?0:1;
+					type == 1?this.info.likes -- : this.info.likes ++
+					uni.hideLoading()
+				}).catch(res=>{})
+			},
+			/* 收藏 */
+			favorites(type) {
+				if (this.$store.state.isLogin != 1) {
+					this.$toUrl('/pages/login/login')
+					return
+				}
+				uni.showLoading({
+					title:this.$t('common.lab')
+				})
+				uni.$u.http.post('api/Circleuser/favorites',{id:this.info.id}).then(res=>{
+					this.info.is_favorites = type==1?0:1;
+					uni.hideLoading()
+				}).catch(res=>{})
+			}
+			
+		}
+	}
+</script>
+
+<style>
+	.detail-comtent>>>img {
+		height: auto !important;
+		width: 100% !important;
+	}
+</style>
+<style lang="scss" scoped>
+	page {
+		background-color: #F3F3F7;
+	}
+	.detail {
+		padding-bottom: 100rpx;
+	}
+	video {
+		margin-top: 20rpx;
+		z-index: 0;
+	}
+	.album {
+		// margin-top: 20rpx;
+		padding: 0 24rpx;
+		margin-bottom: 64rpx;
+		border-radius: 12rpx;
+		background-color: white;
+		.logo {
+			width: 72rpx;
+			height: 72rpx;
+			border-radius: 50%;
+			margin-right: 16rpx;
+		}
+		.nav {
+			padding-top: 20rpx;
+		}
+		.album__content {
+			position: relative;
+			margin-top: 30rpx;
+			image {
+				border-radius: 10rpx;
+			}
+			
+			.play {
+				position: absolute;
+				top: 40%;
+				left: 50%;
+				margin-left: -60rpx;
+				width: 80rpx;
+				height: 80rpx;
+				
+			}
+		}
+		.tabbar {
+			margin-top: 22rpx;
+			padding: 0 22rpx;
+			image {
+				width: 48rpx;
+				height: 48rpx;
+			}
+			view {
+				display: flex;
+				align-items: center;
+				justify-content: flex-start;
+			}
+		}
+		.detail-head-status {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			color: #fff;
+			font-size: 24rpx;
+			border-radius: 6rpx;
+			padding: 10rpx;
+			border-radius: 10rpx;
+			text-align: center;
+			border: 2rpx solid #F1F1F1;
+			background: url('/static/image/live/live-at.png')center top / 100% 100%;
+			// background: linear-gradient(90deg, #DC3C23 0%, #DC3C23 100%);
+			image {
+				width: 28rpx;
+				height: 26rpx;
+				margin-right: 10rpx;
+			}
+		}
+		.active {
+			background:#ccc
+		}
+	}
+	.detail-head {
+		position: sticky;
+		top: 0;
+		z-index: 99;
+		padding: 14rpx 24rpx;
+		background-color: white;
+		border-bottom: 2rpx solid #F0F0F0;
+		image {
+			width: 60rpx;
+			height: 60rpx;
+			margin-right: 20rpx;
+		}
+		.detail-head-left {
+			width: 60rpx;
+			height: 60rpx;
+			margin-right: 32rpx;
+		}
+		.detail-head-logo {
+			width: 72rpx;
+			height: 72rpx;
+			border-radius: 50%;
+			margin-right: 16rpx;
+		}
+		.detail-head-name {
+			flex: 1;
+			font-size: 28rpx;
+			
+		}
+		
+	}
+	.detail-comtent {
+		margin-top: 20rpx;
+		padding: 32rpx 24rpx;
+		background-color: white;
+		.detail-link {
+			margin-top: 24rpx;
+			view {
+				color: #999;
+				image {
+					width: 32rpx;
+					height: 24rpx;
+					margin-right: 16rpx;
+					border-radius: 6rpx;
+				}
+			}
+		}
+		.type {
+			color: #fff !important;
+			border-radius: 10rpx;
+			margin-right: 20rpx;
+			padding: 10rpx 20rpx;
+			background: rgb(238, 192, 123);
+			text {
+				color: #fff;
+			}
+			image {
+				height: 32rpx !important;
+			}
+		}
+	}
+	.detail-article {
+		padding: 0 24rpx;
+		margin-top: 20rpx;
+		padding-bottom: 120rpx;
+		background-color: white;
+		
+		.detail-article-title {
+			color: #333;
+			font-size: 32rpx;
+			font-weight: bold;
+			padding-top: 32rpx;
+			
+		}
+		.detail-article-li {
+			padding: 30rpx 0;
+			border-bottom: 2rpx solid #F0F0F0;
+			view {
+				flex: 1;
+				color: #333;
+				font-size: 32rpx;
+				margin-right: 90rpx;
+			}
+			image {
+				width: 242rpx;
+				height: 136rpx;
+				border-radius: 12rpx;
+			}
+		}
+	}
+
+	.detail-common {
+		position: fixed;
+		bottom: 0;
+		right: 0;
+		left: 0;
+		background-color: white;
+		padding: 18rpx 28rpx;
+		image {
+			width: 60rpx;
+			height: 60rpx;
+			margin-left: 16rpx;
+		}
+		text {
+			color: #999;
+		}
+		.input {
+			flex: 1;
+			color: #999;
+			font-size: 28rpx;
+			border-radius: 12rpx;
+			padding: 22rpx 32rpx;
+			background-color: #F5F5F5;
+			image {
+				width: 28rpx;
+				height: 28rpx;
+				margin-right: 32rpx;
+			}
+		}
+	}
+	
+</style>

pages/News/community.vue

@@ -0,0 +1,8 @@
+<template>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>