1

.history/components/carousels/carousels_20230522091628.vue

@@ -0,0 +1,149 @@
+<template>
+	<view class="swiper-content">
+		<swiper class="swiper-box" autoplay :interval="3000" circular @change="change">
+			<swiper-item v-for="(item ,index) in BannerList" :key="`swiper_${index}`">
+				<view class="swiper-item" @click.stop="lookDetails(item)">
+					<image :src="item.thumbnail" ></image>
+				</view>
+			</swiper-item>
+		</swiper>
+		<div class="custom-indicator">
+			<span :class="['indicator' , current === index ? 'active-indicator' : '']"
+				v-for="(item , index) in BannerList">
+			</span>
+		</div>
+	</view>
+</template>
+
+<script>
+	
+	export default {
+		name: "carousels",
+		props: {
+			BannerList: {
+				type: Array,
+				default: () => []
+			}
+		},
+		data() {
+			return {
+				info: [{
+					content: '内容 A'
+				}, {
+					content: '内容 B'
+				}, {
+					content: '内容 C'
+				}],
+				current: 0,
+				mode: 'round',
+			}
+		},
+		methods: {
+			change(e) {
+				this.current = e.detail.current;
+			},
+			lookDetails(item){
+				uni.navigateTo({
+					url: `/pages/content/article-details?id=${item.id}`
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.swiper-box{
+			height: 280rpx;
+	}
+	.swiper-content { 
+		padding: 0 $pages-padding;
+	}
+
+	.swiper-box {
+
+		.swiper-item {
+			width: 100%;
+			height: 280rpx;
+			image {
+				width: 100%;
+				height: 100%;
+				border-radius: 10rpx;
+			}
+		}
+
+	}
+
+	.custom-indicator {
+
+		width: 100%;
+		padding-top: 20rpx;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		flex-wrap: wrap;
+		// gap: 20rpx 20rpx;
+
+		.indicator {
+			width: 8rpx;
+			height: 8rpx;
+			background-color: #d9d9d9;
+			transform: rotate(45deg);
+		}
+
+		.indicator+.indicator {
+			margin-left: 16rpx;
+		}
+
+		.active-indicator {
+			background-color: #27B082;
+		}
+	}
+
+	// .my-swipe {
+	// 	overflow: hidden;
+
+	// 	::v-deep .van-swipe__track {
+
+	// 		height: 280rpx;
+	// 	}
+
+	// 	.van-swipe-item {
+	// 		display: inline-block;
+	// 		height: 100%;
+
+	// 		.swipe-img {
+	// 			width: 100%;
+	// 			height: 100%;
+
+	// 			::v-deep .van-image__img {
+	// 				width: 100%;
+	// 				height: 100%;
+	// 			}
+	// 		}
+
+	// 		;
+	// 	}
+	// }
+
+	// .custom-indicator {
+
+	// 	width: 100%;
+	// 	padding-top: 15rpx;
+	// 	display: flex;
+	// 	justify-content: center;
+	// 	align-items: center;
+	// 	flex-wrap: wrap;
+	// 	gap: 20rpx 20rpx;
+
+	// 	.indicator {
+	// 		width: 10rpx;
+	// 		height: 10rpx;
+	// 		background-color: #d9d9d9;
+	// 		transform: rotate(45deg);
+	// 	}
+
+	// 	.active-indicator {
+	// 		background-color: #27B082;
+	// 	}
+	// }
+</style>

.history/components/carousels/carousels_20230522094354.vue

@@ -0,0 +1,149 @@
+<template>
+	<view class="swiper-content">
+		<swiper class="swiper-box" autoplay :interval="3000" circular @change="change">
+			<swiper-item v-for="(item ,index) in BannerList" :key="`swiper_${index}`">
+				<view class="swiper-item" @click.stop="lookDetails(item)">
+					<image :src="item.thumbnail" ></image>
+				</view>
+			</swiper-item>
+		</swiper>
+		<div class="custom-indicator">
+			<span :class="['indicator' , current === index ? 'active-indicator' : '']"
+				v-for="(item , index) in BannerList">
+			</span>
+		</div>
+	</view>
+</template>
+
+<script>
+	
+	export default {
+		name: "carousels",
+		props: {
+			BannerList: {
+				type: Array,
+				default: () => []
+			}
+		},
+		data() {
+			return {
+				info: [{
+					content: '内容 A'
+				}, {
+					content: '内容 B'
+				}, {
+					content: '内容 C'
+				}],
+				current: 0,
+				mode: 'round',
+			}
+		},
+		methods: {
+			change(e) {
+				this.current = e.detail.current;
+			},
+			lookDetails(item){
+				uni.navigateTo({
+					url: this.$path.articleDetails + `${item.id}`
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.swiper-box{
+			height: 280rpx;
+	}
+	.swiper-content { 
+		padding: 0 $pages-padding;
+	}
+
+	.swiper-box {
+
+		.swiper-item {
+			width: 100%;
+			height: 280rpx;
+			image {
+				width: 100%;
+				height: 100%;
+				border-radius: 10rpx;
+			}
+		}
+
+	}
+
+	.custom-indicator {
+
+		width: 100%;
+		padding-top: 20rpx;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		flex-wrap: wrap;
+		// gap: 20rpx 20rpx;
+
+		.indicator {
+			width: 8rpx;
+			height: 8rpx;
+			background-color: #d9d9d9;
+			transform: rotate(45deg);
+		}
+
+		.indicator+.indicator {
+			margin-left: 16rpx;
+		}
+
+		.active-indicator {
+			background-color: #27B082;
+		}
+	}
+
+	// .my-swipe {
+	// 	overflow: hidden;
+
+	// 	::v-deep .van-swipe__track {
+
+	// 		height: 280rpx;
+	// 	}
+
+	// 	.van-swipe-item {
+	// 		display: inline-block;
+	// 		height: 100%;
+
+	// 		.swipe-img {
+	// 			width: 100%;
+	// 			height: 100%;
+
+	// 			::v-deep .van-image__img {
+	// 				width: 100%;
+	// 				height: 100%;
+	// 			}
+	// 		}
+
+	// 		;
+	// 	}
+	// }
+
+	// .custom-indicator {
+
+	// 	width: 100%;
+	// 	padding-top: 15rpx;
+	// 	display: flex;
+	// 	justify-content: center;
+	// 	align-items: center;
+	// 	flex-wrap: wrap;
+	// 	gap: 20rpx 20rpx;
+
+	// 	.indicator {
+	// 		width: 10rpx;
+	// 		height: 10rpx;
+	// 		background-color: #d9d9d9;
+	// 		transform: rotate(45deg);
+	// 	}
+
+	// 	.active-indicator {
+	// 		background-color: #27B082;
+	// 	}
+	// }
+</style>

.history/components/carousels/carousels_20230522094409.vue

@@ -0,0 +1,149 @@
+<template>
+	<view class="swiper-content">
+		<swiper class="swiper-box" autoplay :interval="3000" circular @change="change">
+			<swiper-item v-for="(item ,index) in BannerList" :key="`swiper_${index}`">
+				<view class="swiper-item" @click.stop="lookDetails(item)">
+					<image :src="item.thumbnail" ></image>
+				</view>
+			</swiper-item>
+		</swiper>
+		<div class="custom-indicator">
+			<span :class="['indicator' , current === index ? 'active-indicator' : '']"
+				v-for="(item , index) in BannerList">
+			</span>
+		</div>
+	</view>
+</template>
+
+<script>
+	
+	export default {
+		name: "carousels",
+		props: {
+			BannerList: {
+				type: Array,
+				default: () => []
+			}
+		},
+		data() {
+			return {
+				info: [{
+					content: '内容 A'
+				}, {
+					content: '内容 B'
+				}, {
+					content: '内容 C'
+				}],
+				current: 0,
+				mode: 'round',
+			}
+		},
+		methods: {
+			change(e) {
+				this.current = e.detail.current;
+			},
+			lookDetails(item){
+				uni.navigateTo({
+					url: this.$path.articleDetails + `${item.id}`
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.swiper-box{
+			height: 280rpx;
+	}
+	.swiper-content { 
+		padding: 0 $pages-padding;
+	}
+
+	.swiper-box {
+
+		.swiper-item {
+			width: 100%;
+			height: 280rpx;
+			image {
+				width: 100%;
+				height: 100%;
+				border-radius: 10rpx;
+			}
+		}
+
+	}
+
+	.custom-indicator {
+
+		width: 100%;
+		padding-top: 20rpx;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		flex-wrap: wrap;
+		// gap: 20rpx 20rpx;
+
+		.indicator {
+			width: 8rpx;
+			height: 8rpx;
+			background-color: #d9d9d9;
+			transform: rotate(45deg);
+		}
+
+		.indicator+.indicator {
+			margin-left: 16rpx;
+		}
+
+		.active-indicator {
+			background-color: #27B082;
+		}
+	}
+
+	// .my-swipe {
+	// 	overflow: hidden;
+
+	// 	::v-deep .van-swipe__track {
+
+	// 		height: 280rpx;
+	// 	}
+
+	// 	.van-swipe-item {
+	// 		display: inline-block;
+	// 		height: 100%;
+
+	// 		.swipe-img {
+	// 			width: 100%;
+	// 			height: 100%;
+
+	// 			::v-deep .van-image__img {
+	// 				width: 100%;
+	// 				height: 100%;
+	// 			}
+	// 		}
+
+	// 		;
+	// 	}
+	// }
+
+	// .custom-indicator {
+
+	// 	width: 100%;
+	// 	padding-top: 15rpx;
+	// 	display: flex;
+	// 	justify-content: center;
+	// 	align-items: center;
+	// 	flex-wrap: wrap;
+	// 	gap: 20rpx 20rpx;
+
+	// 	.indicator {
+	// 		width: 10rpx;
+	// 		height: 10rpx;
+	// 		background-color: #d9d9d9;
+	// 		transform: rotate(45deg);
+	// 	}
+
+	// 	.active-indicator {
+	// 		background-color: #27B082;
+	// 	}
+	// }
+</style>

.history/components/rollMessage/rollMessage_20230508101452.vue

@@ -0,0 +1,108 @@
+<template>
+	<view class="roll-box">
+		<image class="roll-icon" src="@/static/images/icon_01.png" mode="aspectFit"></image>
+		<view class="roll-list hide_1">
+			<u-notice-bar icon='' bgColor="" duration="3000" direction="column" @click="lookDetails" :text="rollMsg.map(el => {
+				return el.title || ''
+			})">
+			</u-notice-bar>
+			<!-- <view class="roll-item hide_1">
+				币王BiKing合约交易所代理签约邀您加入币王BiKing合约交易所代理签约邀您加入
+			</view> -->
+		</view>
+
+		<image class="roll-more" src="@/static/images/icon_02.png" mode="aspectFit"></image>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "rollMessage",
+		props: {
+			rollMsg: {
+				type: Array,
+				default: () => []
+			}
+		},
+		data() {
+			return {
+
+				list: [
+					'币王BiKing合约交易所代理签约邀您加入币王BiKing合约交易所代理签约邀您加入',
+					'币王BiKing合约交易所代理签约邀您加入币王BiKing合约交易所代理签约邀您加入',
+					'币王BiKing合约交易所代理签约邀您加入币王BiKing合约交易所代理签约邀您加入',
+					'币王BiKing合约交易所代理签约邀您加入币王BiKing合约交易所代理签约邀您加入',
+					'币王BiKing合约交易所代理签约邀您加入币王BiKing合约交易所代理签约邀您加入',
+					'币王BiKing合约交易所代理签约邀您加入币王BiKing合约交易所代理签约邀您加入',
+					'币王BiKing合约交易所代理签约邀您加入币王BiKing合约交易所代理签约邀您加入',
+					'币王BiKing合约交易所代理签约邀您加入币王BiKing合约交易所代理签约邀您加入'
+				]
+			};
+		},
+		methods:{
+			lookDetails(index){
+				const id = this.rollMsg[index]?.id;
+				uni.navigateTo({
+					url: `/pages/content/article-details?id=${id}`
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.roll-box {
+		width: 100%;
+		height: 70rpx;
+		background-color: $modules-box-bg;
+		padding: 0 $pages-padding;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		border-bottom: 1rpx solid $border-color2;
+		.roll-icon
+		.roll-more {
+			width: 33rpx;
+			height: 30rpx;
+			flex-shrink: 0;
+
+		}
+
+		.roll-list {
+			width: calc(100% - 60rpx);
+			height: 100%;
+			flex-shrink: 0;
+			padding: 0 20rpx;
+			display: flex;
+			align-items: center;
+			// .roll-item{
+			// 	width: 100%; 
+
+			// 	font-size: 26rpx;
+			// 	font-family: PingFang SC, PingFang SC-Regular;
+			// 	font-weight: 400;
+			// 	text-align: left;
+			// 	color: #1a1a1a; 
+			// 	letter-spacing: 0.52px;
+			// }
+			::v-deep .u-notice-bar {
+				// width: 100%;
+				padding-left: 0;
+				padding-right: 0;
+
+				.u-notice__swiper__item__text {
+					font-size: 24rpx !important;
+					font-family: PingFang SC, PingFang SC-Regular !important;
+					font-weight: 400 !important;
+
+					color: #1a1a1a !important;
+					letter-spacing: 0.52px !important;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					white-space: nowrap;
+					word-wrap: break-word;
+				}
+			}
+		}
+	}
+</style>

.history/components/rollMessage/rollMessage_20230522094434.vue

@@ -0,0 +1,108 @@
+<template>
+	<view class="roll-box">
+		<image class="roll-icon" src="@/static/images/icon_01.png" mode="aspectFit"></image>
+		<view class="roll-list hide_1">
+			<u-notice-bar icon='' bgColor="" duration="3000" direction="column" @click="lookDetails" :text="rollMsg.map(el => {
+				return el.title || ''
+			})">
+			</u-notice-bar>
+			<!-- <view class="roll-item hide_1">
+				币王BiKing合约交易所代理签约邀您加入币王BiKing合约交易所代理签约邀您加入
+			</view> -->
+		</view>
+
+		<image class="roll-more" src="@/static/images/icon_02.png" mode="aspectFit"></image>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "rollMessage",
+		props: {
+			rollMsg: {
+				type: Array,
+				default: () => []
+			}
+		},
+		data() {
+			return {
+
+				list: [
+					'币王BiKing合约交易所代理签约邀您加入币王BiKing合约交易所代理签约邀您加入',
+					'币王BiKing合约交易所代理签约邀您加入币王BiKing合约交易所代理签约邀您加入',
+					'币王BiKing合约交易所代理签约邀您加入币王BiKing合约交易所代理签约邀您加入',
+					'币王BiKing合约交易所代理签约邀您加入币王BiKing合约交易所代理签约邀您加入',
+					'币王BiKing合约交易所代理签约邀您加入币王BiKing合约交易所代理签约邀您加入',
+					'币王BiKing合约交易所代理签约邀您加入币王BiKing合约交易所代理签约邀您加入',
+					'币王BiKing合约交易所代理签约邀您加入币王BiKing合约交易所代理签约邀您加入',
+					'币王BiKing合约交易所代理签约邀您加入币王BiKing合约交易所代理签约邀您加入'
+				]
+			};
+		},
+		methods:{
+			lookDetails(index){
+				const id = this.rollMsg[index]?.id;
+				uni.navigateTo({
+					url: this.$path.articleDetails +  `${id}`
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.roll-box {
+		width: 100%;
+		height: 70rpx;
+		background-color: $modules-box-bg;
+		padding: 0 $pages-padding;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		border-bottom: 1rpx solid $border-color2;
+		.roll-icon
+		.roll-more {
+			width: 33rpx;
+			height: 30rpx;
+			flex-shrink: 0;
+
+		}
+
+		.roll-list {
+			width: calc(100% - 60rpx);
+			height: 100%;
+			flex-shrink: 0;
+			padding: 0 20rpx;
+			display: flex;
+			align-items: center;
+			// .roll-item{
+			// 	width: 100%; 
+
+			// 	font-size: 26rpx;
+			// 	font-family: PingFang SC, PingFang SC-Regular;
+			// 	font-weight: 400;
+			// 	text-align: left;
+			// 	color: #1a1a1a; 
+			// 	letter-spacing: 0.52px;
+			// }
+			::v-deep .u-notice-bar {
+				// width: 100%;
+				padding-left: 0;
+				padding-right: 0;
+
+				.u-notice__swiper__item__text {
+					font-size: 24rpx !important;
+					font-family: PingFang SC, PingFang SC-Regular !important;
+					font-weight: 400 !important;
+
+					color: #1a1a1a !important;
+					letter-spacing: 0.52px !important;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					white-space: nowrap;
+					word-wrap: break-word;
+				}
+			}
+		}
+	}
+</style>

.history/pages/content/h5-list_20230507165444.vue

@@ -0,0 +1,122 @@
+<template>
+	<view>
+		<headContent statusBarBg="#191A2E" bgColor="#191A2E">
+
+			<template #left>
+				<reverse-back iconColor="#fff" />
+			</template>
+			<template #content>
+				<view class="haed-title">
+					{{ title }}
+				</view>
+			</template>
+			<template #right>
+				<closeIocn iconColor="#fff" />
+			</template>
+		</headContent>
+		<view class="new-content">
+			<template v-for="(item , index) in ContentList">
+				<view class="content-item" @click.syop="readArticle(item.id)">
+					<text class="item-lable hide_1">{{ item.title }}</text>
+					<text class="item-icon iconfont">&#xe88e;</text>
+				</view>
+			</template>
+		</view>
+	</view>
+</template>
+
+<script>
+	import {
+		Api_getNewDetail,
+		Api_getNewsList
+	} from "@/api/index.js"
+	export default {
+		name: 'article-details',
+		data() {
+			return {
+				cids: [
+					0,
+					19,
+					102
+				],
+				title: '',
+				cidIndex: 0,
+				ContentList: [],
+			};
+		},
+		onLoad(opt) {
+			this.cidIndex = opt?.id;
+			switch (this.cidIndex) {
+				case '1':
+				case 1:
+					this.title = "关于我们";
+					break;
+				case '2':
+				case 2:
+					this.title = "活动中心";
+					break;
+				default:
+					this.title = "";
+			}
+			this.getNewDetail()
+		},
+		mounted() {
+
+		},
+		methods: {
+			getNewDetail() {
+				if (this.cidIndex) {
+					Api_getNewsList({
+						c_id: this.cids[this.cidIndex],
+						limit: 1000
+					}).then(res => {
+						this.ContentList = res.list || [];
+
+					})
+				}
+			},
+			readArticle(id) {
+				uni.navigateTo({
+					url: `/pages/content/article-details?id=${id}`
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.haed-title {
+		color: #fff !important;
+	}
+
+	.new-content {
+		.content-item {
+			width: 100%;
+			height: 100rpx;
+			padding: 0 40rpx;
+			border-bottom: 1rpx solid $border-color;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+
+			.item-lable {
+				width: 1px;
+				flex: 1;
+				font-size: 34rpx;
+				font-weight: 600;
+			}
+
+			.item-icon {
+				flex-shrink: 0;
+				font-size: 40rpx;
+				color: $btnBgColor;
+				font-weight: bold;
+			}
+
+			// <view class="content-item">
+			// 	<text class="item-lable">{{ item.title }}</text>
+			// 	<text class="item-icon iconfont">&#xe88e;</text>
+			// </view>
+		}
+	}
+</style>

.history/pages/content/h5-list_20230522094442.vue

@@ -0,0 +1,122 @@
+<template>
+	<view>
+		<headContent statusBarBg="#191A2E" bgColor="#191A2E">
+
+			<template #left>
+				<reverse-back iconColor="#fff" />
+			</template>
+			<template #content>
+				<view class="haed-title">
+					{{ title }}
+				</view>
+			</template>
+			<template #right>
+				<closeIocn iconColor="#fff" />
+			</template>
+		</headContent>
+		<view class="new-content">
+			<template v-for="(item , index) in ContentList">
+				<view class="content-item" @click.syop="readArticle(item.id)">
+					<text class="item-lable hide_1">{{ item.title }}</text>
+					<text class="item-icon iconfont">&#xe88e;</text>
+				</view>
+			</template>
+		</view>
+	</view>
+</template>
+
+<script>
+	import {
+		Api_getNewDetail,
+		Api_getNewsList
+	} from "@/api/index.js"
+	export default {
+		name: 'article-details',
+		data() {
+			return {
+				cids: [
+					0,
+					19,
+					102
+				],
+				title: '',
+				cidIndex: 0,
+				ContentList: [],
+			};
+		},
+		onLoad(opt) {
+			this.cidIndex = opt?.id;
+			switch (this.cidIndex) {
+				case '1':
+				case 1:
+					this.title = "关于我们";
+					break;
+				case '2':
+				case 2:
+					this.title = "活动中心";
+					break;
+				default:
+					this.title = "";
+			}
+			this.getNewDetail()
+		},
+		mounted() {
+
+		},
+		methods: {
+			getNewDetail() {
+				if (this.cidIndex) {
+					Api_getNewsList({
+						c_id: this.cids[this.cidIndex],
+						limit: 1000
+					}).then(res => {
+						this.ContentList = res.list || [];
+
+					})
+				}
+			},
+			readArticle(id) {
+				uni.navigateTo({
+					url: this.$path.articleDetails + `${id}`
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.haed-title {
+		color: #fff !important;
+	}
+
+	.new-content {
+		.content-item {
+			width: 100%;
+			height: 100rpx;
+			padding: 0 40rpx;
+			border-bottom: 1rpx solid $border-color;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+
+			.item-lable {
+				width: 1px;
+				flex: 1;
+				font-size: 34rpx;
+				font-weight: 600;
+			}
+
+			.item-icon {
+				flex-shrink: 0;
+				font-size: 40rpx;
+				color: $btnBgColor;
+				font-weight: bold;
+			}
+
+			// <view class="content-item">
+			// 	<text class="item-lable">{{ item.title }}</text>
+			// 	<text class="item-icon iconfont">&#xe88e;</text>
+			// </view>
+		}
+	}
+</style>

.history/pages/login/register_20230522092747.vue

@@ -0,0 +1,153 @@
+<template>
+	<view>
+		<headContent>
+			<template #left>
+				<view class="head-revers-back iconfont" @click.stop="reversBackBtn()">&#xe604;</view>
+			</template>
+		</headContent>
+
+		<view class="page-content">
+			<text class="login-title">注册</text>
+			<text class="login-content">立即注册属于您的币王账号</text>
+			<tabList ref="tabListRef" :tabIndex.sync="tabIndexs" />
+
+			<phoneRegister v-show="tabIndexs === 0" :accounts="accounts" />
+
+			<email-register v-show="tabIndexs === 1" :accounts="accounts" />
+
+			<view class="form-agreement" @click.stop="readAgreement = !readAgreement">
+				<view class="agreement-confirm">
+					<text class="confirm-icon iconfont" v-show="readAgreement">&#xe6c5;</text>
+				</view>
+				<text>我已阅读并同意</text>
+				<text class="agreement-name" @click.stop="readAgreementText">《用户协议》</text>
+			</view>
+			<view class="form-btn" @click.stop="formSubmit">
+				下一步
+			</view>
+			<view class="form-hint">
+				已有账号？<text class="hint-btn"> 立即登录</text>
+			</view>
+		</view>
+
+		<slider-verify ref="sliderVerifyRef" @slideImgSuccess="slideImgSuccess" />
+	</view>
+</template>
+
+<script>
+	import {
+		reverseBack
+	} from "@/utils/common.js"
+	import tabList from "./modules/tab.vue"
+	import emailRegister from "./modules/email-register.vue"
+	import phoneRegister from "./modules/phone-register.vue"
+
+	export default {
+		name: 'register',
+		components: {
+			tabList,
+			emailRegister,
+			phoneRegister
+		},
+		data() {
+			return {
+				readAgreement: false,
+				tabIndexs: 0,
+				accounts: {
+					areaCode: 86,
+					phone: '',
+					email: '',
+					invitationCode: '',
+				}
+
+
+			};
+		},
+		methods: {
+			// 阅读协议
+			readAgreementText() {
+				uni.navigateTo({
+					url: '/pages/content/article-details?id=8'
+				})
+			},
+			setAreaCode(e) {
+				if (e) {
+					this.accounts.areaCode = e.area_code;
+				}
+			},
+			reversBackBtn() {
+				reverseBack()
+			},
+			formSubmit(e) {
+				// tabIndexs: 0,
+				// accounts: {
+				// 	areaCode:86,
+				// 	phone: '',
+				// 	email: '',
+				// 	invitationCode: '',
+				// }
+				if (this.tabIndexs === 0 && !this.accounts.phone) {
+					uni.showToast({
+						title: '请填写手机号',
+						icon: "none"
+					})
+					return false
+				}
+				if (this.tabIndexs === 1 && !this.accounts.email) {
+					uni.showToast({
+						title: '请填写邮箱',
+						icon: "none"
+					})
+					return false
+				}
+				if (!this.accounts.invitationCode) {
+					uni.showToast({
+						title: '请填写邀请码',
+						icon: "none"
+					})
+					return false
+				}
+				if (!this.readAgreement) {
+					uni.showToast({
+						title: '请先阅读用户协议',
+						icon: "none"
+					})
+					return false
+				}
+				this.$nextTick(() => {
+					this.$refs.sliderVerifyRef.open();
+				})
+			},
+			slideImgSuccess() {
+				// tabIndexs: 1,
+				// accounts: {
+				// 	phone: '13133111133',
+				// 	email:'biking2023@163.com',
+				// 	invitationCode: '',
+				// }
+				let data = ''
+				switch (this.tabIndexs) {
+					case 0:
+						data =
+							`type=${this.tabIndexs}&areaCode=${this.accounts.areaCode}&account=${this.accounts.phone}&invitationCode=${this.accounts.invitationCode}`;
+						break;
+					case 1:
+						data =
+							`type=${this.tabIndexs}&account=${this.accounts.email}&invitationCode=${this.accounts.invitationCode}`;
+						break;
+
+				}
+				uni.navigateTo({
+					url: `/pages/login/email-verify?${data}`
+				})
+			},
+			// formReset() {
+
+			// }
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import "~./common.scss"
+</style>

.history/pages/login/register_20230522094454.vue

@@ -0,0 +1,153 @@
+<template>
+	<view>
+		<headContent>
+			<template #left>
+				<view class="head-revers-back iconfont" @click.stop="reversBackBtn()">&#xe604;</view>
+			</template>
+		</headContent>
+
+		<view class="page-content">
+			<text class="login-title">注册</text>
+			<text class="login-content">立即注册属于您的币王账号</text>
+			<tabList ref="tabListRef" :tabIndex.sync="tabIndexs" />
+
+			<phoneRegister v-show="tabIndexs === 0" :accounts="accounts" />
+
+			<email-register v-show="tabIndexs === 1" :accounts="accounts" />
+
+			<view class="form-agreement" @click.stop="readAgreement = !readAgreement">
+				<view class="agreement-confirm">
+					<text class="confirm-icon iconfont" v-show="readAgreement">&#xe6c5;</text>
+				</view>
+				<text>我已阅读并同意</text>
+				<text class="agreement-name" @click.stop="readAgreementText">《用户协议》</text>
+			</view>
+			<view class="form-btn" @click.stop="formSubmit">
+				下一步
+			</view>
+			<view class="form-hint">
+				已有账号？<text class="hint-btn"> 立即登录</text>
+			</view>
+		</view>
+
+		<slider-verify ref="sliderVerifyRef" @slideImgSuccess="slideImgSuccess" />
+	</view>
+</template>
+
+<script>
+	import {
+		reverseBack
+	} from "@/utils/common.js"
+	import tabList from "./modules/tab.vue"
+	import emailRegister from "./modules/email-register.vue"
+	import phoneRegister from "./modules/phone-register.vue"
+
+	export default {
+		name: 'register',
+		components: {
+			tabList,
+			emailRegister,
+			phoneRegister
+		},
+		data() {
+			return {
+				readAgreement: false,
+				tabIndexs: 0,
+				accounts: {
+					areaCode: 86,
+					phone: '',
+					email: '',
+					invitationCode: '',
+				}
+
+
+			};
+		},
+		methods: {
+			// 阅读协议
+			readAgreementText() {
+				uni.navigateTo({
+					url: this.$path.articleDetails + '8'
+				})
+			},
+			setAreaCode(e) {
+				if (e) {
+					this.accounts.areaCode = e.area_code;
+				}
+			},
+			reversBackBtn() {
+				reverseBack()
+			},
+			formSubmit(e) {
+				// tabIndexs: 0,
+				// accounts: {
+				// 	areaCode:86,
+				// 	phone: '',
+				// 	email: '',
+				// 	invitationCode: '',
+				// }
+				if (this.tabIndexs === 0 && !this.accounts.phone) {
+					uni.showToast({
+						title: '请填写手机号',
+						icon: "none"
+					})
+					return false
+				}
+				if (this.tabIndexs === 1 && !this.accounts.email) {
+					uni.showToast({
+						title: '请填写邮箱',
+						icon: "none"
+					})
+					return false
+				}
+				if (!this.accounts.invitationCode) {
+					uni.showToast({
+						title: '请填写邀请码',
+						icon: "none"
+					})
+					return false
+				}
+				if (!this.readAgreement) {
+					uni.showToast({
+						title: '请先阅读用户协议',
+						icon: "none"
+					})
+					return false
+				}
+				this.$nextTick(() => {
+					this.$refs.sliderVerifyRef.open();
+				})
+			},
+			slideImgSuccess() {
+				// tabIndexs: 1,
+				// accounts: {
+				// 	phone: '13133111133',
+				// 	email:'biking2023@163.com',
+				// 	invitationCode: '',
+				// }
+				let data = ''
+				switch (this.tabIndexs) {
+					case 0:
+						data =
+							`type=${this.tabIndexs}&areaCode=${this.accounts.areaCode}&account=${this.accounts.phone}&invitationCode=${this.accounts.invitationCode}`;
+						break;
+					case 1:
+						data =
+							`type=${this.tabIndexs}&account=${this.accounts.email}&invitationCode=${this.accounts.invitationCode}`;
+						break;
+
+				}
+				uni.navigateTo({
+					url: `/pages/login/email-verify?${data}`
+				})
+			},
+			// formReset() {
+
+			// }
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import "~./common.scss"
+</style>

.history/utils/common_20230519161015.js

@@ -0,0 +1,233 @@
+// import config from "./config"
+import store from "@/store/index.js"
+
+import {
+	Decimal
+} from 'decimal.js'
+import config from "./config.js"
+export const setToken = (tokenVal) => {
+	try {
+		uni.setStorageSync(config.tokenKey, tokenVal);
+	} catch (e) {
+		// error
+	}
+}
+
+
+export const getToken = () => {
+	try {
+		const value = uni.getStorageSync(config.tokenKey);
+		return value || ''
+	} catch (e) {
+		// error
+	}
+}
+
+export const setStorageSync = (key, val) => { 
+	try {
+		uni.setStorageSync(key, val);
+	} catch (e) {
+		// error
+	}
+}
+
+export const getStorageSync = (key) => {
+	try {
+		const value = uni.getStorageSync(key);
+		return value || ''
+	} catch (e) {
+		// error
+	}
+}
+
+
+export const removeStorageSync = (key) => {
+	try {
+		uni.removeStorageSync(key);
+	} catch (e) {
+		// error
+	}
+}
+
+export const refreshAccount = () => {
+	store.commit('app/SET_TOKEN', '')
+	uni.reLaunch({
+		url: '/pages/index/index'
+	});
+}
+
+// 判断是否登录
+export const ifLogin_ = () => {
+	return new Promise((resolve, reject) => {
+		if (getToken()) {
+			resolve()
+		} else {
+			uni.navigateTo({
+				url: '/pages/login/index'
+			});
+
+			reject()
+		};
+	})
+};
+
+
+
+export const reverseBack = (path = undefined) => {
+	const pages = getCurrentPages();
+	if (pages.length <= 1) {
+		uni.reLaunch({
+			url: '/pages/index/index'
+		});
+	} else {
+		let deltaNum = 1;
+		if (path) {
+			if (path.indexOf('/') === 0) {
+				path = path.substring(1);
+			};
+			const pageLength = pages.length
+			let num = pageLength;
+			for (let i = 1; i <= pageLength; i++) {
+				num -= 1;
+				if (pages[num].route === path) {
+					deltaNum = i;
+					break;
+				}
+			}
+
+		};
+		uni.navigateBack({
+			delta: deltaNum,
+			fail: err => {}
+		})
+	}
+}
+
+export const decimalNum = {
+	// 加法
+	add: (a, b) => {
+		return new Decimal(a).add(new Decimal(b))
+	},
+	// 减法
+	sub: (a, b) => {
+		return new Decimal(a).sub(new Decimal(b))
+	},
+	// 乘法
+	mul: (a, b) => {
+		return new Decimal(a).mul(new Decimal(b))
+	},
+	// 除法
+	div: (a, b) => {
+		return new Decimal(a).div(new Decimal(b))
+	},
+
+	// // 加法
+	// let c = new Decimal(a).add(new Decimal(b)) 
+	// // 减法
+	// let d = new Decimal(a).sub(new Decimal(b))
+	// // 乘法
+	// let e = new Decimal(a).mul(new Decimal(b))
+	// // 除法
+	// let f = new Decimal(a).div(new Decimal(b))
+
+}
+
+
+// 涨跌颜色
+export const setColor = (nums , type = false) => {
+	if(type){
+		return nums >= 0 ? true : false
+	}else{
+		return nums >= 0 ? 'zhang' : 'die'
+	}
+	
+}
+
+
+const doubleDigit = (t) => {
+	if (t <= 9) {
+		return `0${t}`
+	}
+	return t
+
+}
+export const getData_ = (time = '', type = true) => {
+	if (time || type) {
+		let now = time ? new Date(time) : new Date();
+		const year = now.getFullYear();
+		const month = doubleDigit(now.getMonth() + 1);
+		const day = doubleDigit(now.getDate());
+		const hour = doubleDigit(now.getHours());
+		const min = doubleDigit(now.getMinutes());
+		const seon = doubleDigit(now.getSeconds());
+		return `${year}-${month}-${day} ${hour}:${min}:${seon}`
+	}
+	return ''
+
+}
+
+export const scanCode = () => {
+	// 允许从相机和相册扫码
+	return new Promise((resolve, reject) => {
+		uni.scanCode({
+			success: res => {
+				console.log('条码类型：' + res.scanType);
+				console.log('条码内容：' + res.result);
+				resolve(res.result)
+			},
+			fail: err => {
+				reject()
+			},
+		});
+	})
+
+
+}
+
+// 阅读文章详情
+export const readArticleInfo = (id) => {
+	uni.navigateTo({
+		url: `/pages/content/article-details?id=${id}`
+	})
+}
+
+
+// 数字截取
+export const numIntercepting = (num = 0, decimals = 0) => {
+	if (num) {
+		try {
+			num = parseInt(num).toFixed(decimals)
+		} catch {}
+	}
+
+	return num
+}
+
+
+
+export const getChange = (item, type) => {
+	// 计算
+	let num = ''
+	switch (type) {
+		case 1:
+			// 浮动盈亏 = （（开仓价格 - 标记价格） × 数量 - 手续费）*100/ 标记价格
+			num = ((item.update_price - item.origin_price) * item.number - item.trade_fee) * 100 / item
+				.origin_price
+			if (num) {
+				num = num.toFixed(2)
+			};
+			break;
+		case 2:
+			// 保证金*100/可用余额
+			num = item.caution_money * 100 / item.user.lever
+			break;
+		case 3:
+			// 强平价 = 标记价格*100
+			num = item.origin_price * 100
+			break;
+
+
+	}
+
+	return (num || num === 0) ? num : '--'
+}

.history/utils/common_20230522094503.js

@@ -0,0 +1,233 @@
+// import config from "./config"
+import store from "@/store/index.js"
+
+import {
+	Decimal
+} from 'decimal.js'
+import config from "./config.js"
+export const setToken = (tokenVal) => {
+	try {
+		uni.setStorageSync(config.tokenKey, tokenVal);
+	} catch (e) {
+		// error
+	}
+}
+
+
+export const getToken = () => {
+	try {
+		const value = uni.getStorageSync(config.tokenKey);
+		return value || ''
+	} catch (e) {
+		// error
+	}
+}
+
+export const setStorageSync = (key, val) => { 
+	try {
+		uni.setStorageSync(key, val);
+	} catch (e) {
+		// error
+	}
+}
+
+export const getStorageSync = (key) => {
+	try {
+		const value = uni.getStorageSync(key);
+		return value || ''
+	} catch (e) {
+		// error
+	}
+}
+
+
+export const removeStorageSync = (key) => {
+	try {
+		uni.removeStorageSync(key);
+	} catch (e) {
+		// error
+	}
+}
+
+export const refreshAccount = () => {
+	store.commit('app/SET_TOKEN', '')
+	uni.reLaunch({
+		url: '/pages/index/index'
+	});
+}
+
+// 判断是否登录
+export const ifLogin_ = () => {
+	return new Promise((resolve, reject) => {
+		if (getToken()) {
+			resolve()
+		} else {
+			uni.navigateTo({
+				url: '/pages/login/index'
+			});
+
+			reject()
+		};
+	})
+};
+
+
+
+export const reverseBack = (path = undefined) => {
+	const pages = getCurrentPages();
+	if (pages.length <= 1) {
+		uni.reLaunch({
+			url: '/pages/index/index'
+		});
+	} else {
+		let deltaNum = 1;
+		if (path) {
+			if (path.indexOf('/') === 0) {
+				path = path.substring(1);
+			};
+			const pageLength = pages.length
+			let num = pageLength;
+			for (let i = 1; i <= pageLength; i++) {
+				num -= 1;
+				if (pages[num].route === path) {
+					deltaNum = i;
+					break;
+				}
+			}
+
+		};
+		uni.navigateBack({
+			delta: deltaNum,
+			fail: err => {}
+		})
+	}
+}
+
+export const decimalNum = {
+	// 加法
+	add: (a, b) => {
+		return new Decimal(a).add(new Decimal(b))
+	},
+	// 减法
+	sub: (a, b) => {
+		return new Decimal(a).sub(new Decimal(b))
+	},
+	// 乘法
+	mul: (a, b) => {
+		return new Decimal(a).mul(new Decimal(b))
+	},
+	// 除法
+	div: (a, b) => {
+		return new Decimal(a).div(new Decimal(b))
+	},
+
+	// // 加法
+	// let c = new Decimal(a).add(new Decimal(b)) 
+	// // 减法
+	// let d = new Decimal(a).sub(new Decimal(b))
+	// // 乘法
+	// let e = new Decimal(a).mul(new Decimal(b))
+	// // 除法
+	// let f = new Decimal(a).div(new Decimal(b))
+
+}
+
+
+// 涨跌颜色
+export const setColor = (nums , type = false) => {
+	if(type){
+		return nums >= 0 ? true : false
+	}else{
+		return nums >= 0 ? 'zhang' : 'die'
+	}
+	
+}
+
+
+const doubleDigit = (t) => {
+	if (t <= 9) {
+		return `0${t}`
+	}
+	return t
+
+}
+export const getData_ = (time = '', type = true) => {
+	if (time || type) {
+		let now = time ? new Date(time) : new Date();
+		const year = now.getFullYear();
+		const month = doubleDigit(now.getMonth() + 1);
+		const day = doubleDigit(now.getDate());
+		const hour = doubleDigit(now.getHours());
+		const min = doubleDigit(now.getMinutes());
+		const seon = doubleDigit(now.getSeconds());
+		return `${year}-${month}-${day} ${hour}:${min}:${seon}`
+	}
+	return ''
+
+}
+
+export const scanCode = () => {
+	// 允许从相机和相册扫码
+	return new Promise((resolve, reject) => {
+		uni.scanCode({
+			success: res => {
+				console.log('条码类型：' + res.scanType);
+				console.log('条码内容：' + res.result);
+				resolve(res.result)
+			},
+			fail: err => {
+				reject()
+			},
+		});
+	})
+
+
+}
+
+// 阅读文章详情
+export const readArticleInfo = (id) => {
+	uni.navigateTo({
+		url: this.$path.articleDetails + `${id}`
+	})
+}
+
+
+// 数字截取
+export const numIntercepting = (num = 0, decimals = 0) => {
+	if (num) {
+		try {
+			num = parseInt(num).toFixed(decimals)
+		} catch {}
+	}
+
+	return num
+}
+
+
+
+export const getChange = (item, type) => {
+	// 计算
+	let num = ''
+	switch (type) {
+		case 1:
+			// 浮动盈亏 = （（开仓价格 - 标记价格） × 数量 - 手续费）*100/ 标记价格
+			num = ((item.update_price - item.origin_price) * item.number - item.trade_fee) * 100 / item
+				.origin_price
+			if (num) {
+				num = num.toFixed(2)
+			};
+			break;
+		case 2:
+			// 保证金*100/可用余额
+			num = item.caution_money * 100 / item.user.lever
+			break;
+		case 3:
+			// 强平价 = 标记价格*100
+			num = item.origin_price * 100
+			break;
+
+
+	}
+
+	return (num || num === 0) ? num : '--'
+}

.history/utils/path_20230522094628.js

@@ -0,0 +1,16 @@
+ const path = {
+
+ 	// 客服 :
+ 	service: '/pages/content/customer-service',
+
+	// 文章详情
+	articleDetails:'/pages/content/article-details?id='
+	
+
+
+
+
+ }
+
+
+ export default path

.history/utils/path_20230522133621.js

@@ -0,0 +1,16 @@
+ const path = {
+
+ 	// 客服 :
+ 	service: '/pages/content/customer-service',
+
+	// 文章详情
+	articleDetails:'/pages/content/article-details?id='
+	
+
+ 
+
+
+ }
+
+
+ export default path

components/carousels/carousels.vue

@@ -3,7 +3,7 @@
 		<swiper class="swiper-box" autoplay :interval="3000" circular @change="change">
 			<swiper-item v-for="(item ,index) in BannerList" :key="`swiper_${index}`">
 				<view class="swiper-item" @click.stop="lookDetails(item)">
-					<image :src="item.thumbnail" mode="aspectFit"></image>
+					<image :src="item.thumbnail" ></image>
 				</view>
 			</swiper-item>
 		</swiper>
@@ -44,7 +44,7 @@
 			},
 			lookDetails(item){
 				uni.navigateTo({
-					url: `/pages/content/article-details?id=${item.id}`
+					url: this.$path.articleDetails + `${item.id}`
 				})
 			}
 		}
@@ -67,7 +67,7 @@
 			image {
 				width: 100%;
 				height: 100%;
-
+				border-radius: 10rpx;
 			}
 		}
 

components/k-line/k-line.vue

@@ -2,6 +2,8 @@
 	<iframe
 		:src="`https://biking.okenx.com/biking/kline.html?legal_id=${currencyVal.legal_id}&currency_id=${currencyVal.currency_id}&symbol=${currencyVal.currency_name}/${currencyVal.legal_name}`"
 		frameborder="0"></iframe>
+		<!-- <web-view :src="'/k/index.html' + `?legal_id=${currencyVal.legal_id}&currency_id=${currencyVal.currency_id}&symbol=${currencyVal.currency_name}/${currencyVal.legal_name}`"></web-view> -->
+		<!-- <web-view src="/hybrid/html/local.html"></web-view> -->
 </template>
 
 <script>

components/rollMessage/rollMessage.vue

@@ -43,7 +43,7 @@
 			lookDetails(index){
 				const id = this.rollMsg[index]?.id;
 				uni.navigateTo({
-					url: `/pages/content/article-details?id=${id}`
+					url: this.$path.articleDetails +  `${id}`
 				})
 			}
 		}

components/sharePage/sharePage.vue

@@ -8,6 +8,7 @@
 				<shareInvite v-if="shareType === 1">
 					<template #qrcode>
 						<tki-qrcode ref="qrcodeRef" :size="100" :showLoading="false" :val="qrcodeVal" />
+						<!-- <ay-qrcode ref="qrcodeRef" :width="100" :height="100" :url="qrcodeVal"></ay-qrcode> -->
 					</template>
 				</shareInvite>
 
@@ -98,11 +99,12 @@
 		methods: {
 			drawCode() {
 				if (this.$refs.qrcodeRef) {
+					// this.$refs.qrcodeRef.crtQrCode()
 					this.$refs.qrcodeRef._makeCode()
 				} else {
 					setTimeout(() => {
 						this.drawCode()
-					}, 100)
+					}, 50)
 				}
 
 			},

hybrid/html/css/kline.css

@@ -0,0 +1,396 @@
+* {
+	margin: 0;
+	padding: 0;
+}
+html{
+	background-color: #131623;
+}
+#app{
+	height: 100vh;
+	width: 100vw;
+	overflow-y: scroll;
+	overflow-x: hidden;
+	-webkit-overflow-scrolling: touch;
+}
+.head{
+	padding: 10px;
+}
+.price{
+	display: flex;
+	align-items: center;
+}
+.price-label{
+	font-size: 26px;
+	font-weight: bold;
+	color: #38ad70;
+}
+.price-value{
+	margin-left: 10px;
+	font-size: 12px;
+	color: #fff;
+	margin-top: 4px;
+}
+.head-item{
+	margin-top: 5px;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
+.head-item-cell{
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+}
+.hic-label{
+	font-size: 10px;
+	color: rgba(255,255,255,0.38);
+}
+.hic-value{
+	margin-left: 5px;
+	font-size: 10px;
+	color: rgba(255,255,255,0.7);
+}
+.tabs{
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	border-bottom: 1px solid rgba(255,255,255,0.1);
+	padding: 0 10px;
+}
+.tabs-item{
+	margin-right: 20px;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+.tabs-item-text{
+	font-size: 12px;
+	line-height: 24px;
+	color: rgba(255,255,255,0.38);
+}
+.tabs-item-text-active{
+	color: #fff;
+}
+.tabs-item-bar{
+	width: 0;
+	height: 2px;
+	background-color: transparent;
+	transition: all .2s;
+}
+.tabs-item-bar-active{
+	width: 16px;
+	background-color: #fff;
+}
+.category{
+	position: sticky;
+	top: 0;
+	z-index: 999;
+	background-color: #131623;
+	margin-top: 10px;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: center;
+	border-bottom: 1px solid rgba(255,255,255,0.1);
+	padding: 0 10px;
+}
+.category-item-wrap{
+	flex: 1;
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+}
+.category-item{
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+.category-item-text{
+	font-size: 14px;
+	line-height: 28px;
+	color: rgba(255,255,255,0.38);
+}
+.category-item-text-active{
+	color: #fff;
+}
+.category-item-bar{
+	width: 0;
+	height: 2px;
+	background-color: transparent;
+	transition: all .2s;
+}
+.category-item-bar-active{
+	width: 100%;
+	background-color: #fff;
+}
+.category-main{
+	padding: 10px;
+}
+.depth-head{
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: space-between;
+}
+.depth-head-left{
+	flex: 1;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+}
+.depth-head-center{
+	flex: 1;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: center;
+}
+.depth-head-right{
+	flex: 1;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: flex-end;
+}
+.depth-head-label{
+	font-size: 10px;
+	color: rgba(255,255,255,0.38);
+}
+.depth-head-left-index{
+	width: 30px;
+	margin-right: 10px;
+	text-align: left;
+}
+.depth-head-right-index{
+	width: 30px;
+	margin-left: 10px;
+	text-align: right;
+}
+.depth-main{
+	margin-top: 15px;
+	display: flex;
+	flex-direction: row;
+}
+.depth-main-item{
+	flex: 1;
+}
+.dmi-cell{
+	position: relative;
+	height: 30px;
+	display: flex;
+	flex-direction: row;
+}
+.dmi-cell-item{
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+}
+.dmi-cell-item-right{
+	justify-content: flex-end;
+}
+.dmi-cell-bg{
+	background-color: red;
+	width: 0;
+	height: 100%;
+}
+.dmi-cell-index{
+	width: 30px;
+	font-size: 12px;
+	color: #fff;
+}
+.dmi-cell-num{
+	flex: 1;
+	margin: 0 10px;
+	font-size: 12px;
+	color: #fff;
+}
+.dmi-cell-price{
+	font-size: 12px;
+	color: #fff;
+}
+.transaction{
+	
+}
+.transaction-head{
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: space-between;
+}
+.transaction-head-item{
+	color: rgba(255,255,255,0.38);
+	font-size: 10px;
+}
+.transaction-main{
+	margin-top: 10px;
+}
+.transaction-main-cell{
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: space-between;
+}
+.tmc-label{
+	color: #fff;
+	font-size: 12px;
+	height: 30px;
+	line-height: 30px;
+}
+.tmc-time{
+	width: 30%;
+}
+.tmc-type{
+	text-align: center;
+	width: 20%;
+}
+.tmc-price{
+	text-align: center;
+	width: 20%;
+}
+.tmc-num{
+	text-align: right;
+	width: 30%;
+}
+.introduction{
+	
+}
+.introduction-name{
+	color: #fff;
+	font-size: 16px;
+	font-weight: bold;
+	padding-bottom: 20px;
+}
+.introduction-cell{
+	margin-top: 20px;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: space-between;
+}
+.introduction-cell-label{
+	color: rgba(255,255,255,0.38);
+	font-size: 12px;
+}
+.introduction-cell-value{
+	color: #fff;
+	font-size: 12px;
+	font-weight: bold;
+}
+.introduction-label{
+	margin-top: 40px;
+	color: #fff;
+	font-size: 16px;
+	font-weight: bold;
+}
+.introduction-value{
+	margin-top: 20px;
+	color: #fff;
+	font-size: 14px;
+}
+.btns{
+	position: fixed;
+	z-index: 1000;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: center;
+	padding: 10px;
+	box-sizing: border-box;
+	background-color: #131623;
+}
+.btn{
+	flex: 1;
+	height: 40px;
+	border-radius: 4px;
+	line-height: 40px;
+	text-align: center;
+	color: #fff;
+	font-size: 16px;
+}
+.btn-green{
+	margin-right: 20px;
+	background-color: #38ad70;
+}
+.btn-red{
+	background-color: #fe5c57;
+}
+.charts-border {
+	position: relative;
+}
+
+.charts {
+	width: 100vw;
+	height: 420px;
+}
+
+.charts-label {
+	position: absolute;
+	left: 10px;
+	top: 5px;
+	font-size: 10px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.charts-label div {
+	margin-right: 14px;
+}
+
+.charts-MA5 {
+	color: #eef4ba;
+}
+
+.charts-MA10 {
+	color: #83c1c5;
+}
+
+.charts-MA30 {
+	color: #b39cd8;
+}
+
+.charts-bar-label {
+	position: absolute;
+	left: 10px;
+	top: 76%;
+	font-size: 10px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.charts-bar-label div {
+	margin-right: 14px;
+}
+
+.charts-tooltip-row {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: space-between;
+	padding: 5px 0;
+}
+
+.ctr-label {
+	color: #51617b;
+}
+
+.ctr-value {
+	color: #acbadf;
+	margin-left: 30px;
+}
+
+.price-green{
+	color: #38ad70;
+}
+.price-red{
+	color: #fe5c57;
+}

hybrid/html/js/kline.js

@@ -0,0 +1,588 @@
+
+var myChart;
+
+// post请求封装
+// function post(url,data) {
+// 	let baseUrl='http://192.168.3.135:8080';
+// 	return new Promise((resolve,reject)=>{
+// 		axios({
+// 			headers:{
+// 				"Content-Type": "application/x-www-form-urlencoded",
+// 			},
+// 			method:'post',
+// 			url:baseUrl+url,
+// 			data:Qs.stringify( data || {})
+// 		})
+// 		.then(res=>{
+// 			console.log(res)
+// 			if(res.data.code==1){
+// 				resolve(res.data)
+// 			}else{
+// 				reject()
+// 				alertError('请求超时')
+// 			}
+// 		})
+// 		.catch(err=>{
+// 			alertError('请求超时')
+// 		})
+// 	})
+// }
+// 弹窗
+function alertError(title) {
+	document.addEventListener('plusready',function() {
+		console.log('......')
+	})
+	try{
+		plus.nativeUI.toast(title, {
+			 icon:'/static/common/toast-error.png',
+			 style:'inline',
+			 verticalAlign:'top'
+		});
+	}catch(e){
+		//TODO handle the exception
+	}
+}
+var app = new Vue({
+	el:'#app',
+	data:{
+		MA5:'',
+		MA10:'',
+		MA30:'',
+		volMA5:'',
+		volMA10:'',
+		current:1,
+		tabs:[
+			{'label':'1分钟','value':1},
+			{'label':'15分钟','value':2},
+			{'label':'30分钟','value':3},
+			{'label':'1小时','value':4},
+			{'label':'4小时','value':5},
+			{'label':'1天','value':6},
+		],
+		category:1,
+		categoryList:[
+			{'label':'深度','value':1},
+			{'label':'成交','value':2},
+			{'label':'简介','value':3},
+		],
+		txData:{},//交易数据统计
+		buyList:[],
+		sellList:[],
+		dealHis:[],
+		tokenInfo:{},
+		page:1,
+		
+	},
+	created() {
+		this.getTxData()
+		this.getDepth()
+	},
+	mounted() {
+		myChart = echarts.init(document.getElementById('main'));
+		this.draw()
+		this.getKline()
+	},
+	methods:{
+		// 返回上一页
+		back(){
+			uni.navigateBack()
+		},
+		// 获取24小时交易数据统计
+		getTxData(){
+			this.txData=txData;
+		},
+		// 获取k线数据,生成k线
+		getKline(){
+			var dataMA5 = this.calculateMA(5, data);
+			var dataMA10 = this.calculateMA(10, data);
+			var dataMA30 = this.calculateMA(30, data);
+			var volumeMA5 = this.calculateMA(5, volumes);
+			var volumeMA10 = this.calculateMA(10, volumes);
+			myChart.setOption({
+				xAxis: [
+					{
+						data: dates
+					},
+					{
+						data: dates
+					},
+				],
+				series: [
+					{
+						name: '日K',
+						data: data
+					},
+					{
+						name: 'MA5',
+						data: dataMA5
+					},
+					{
+						name: 'MA10',
+						data: dataMA10
+					},
+					{
+						name: 'MA30',
+						data: dataMA30
+					},
+					{
+						name: 'Volume',
+						data: volumes
+					},
+					{
+						name: 'VolumeMA5',
+						data: volumeMA5
+					},
+					{
+						name: 'VolumeMA10',
+						data: volumeMA10
+					},
+				]
+			})
+		},
+		// 列表条数不足补全
+		addItem(list,type){
+			// type: 1开头加，2末尾加
+			list=list || [];
+			let len=20-list.length;
+			if(len>0){
+				for(let i=0;i<len;i++){
+					if(type==1){
+						list.unshift({})
+					}else{
+						list.push({})
+					}
+				}
+			}
+			return list;
+		},
+		// 获取深度数据
+		getDepth(){
+			this.buyList=this.addItem(depthList().buyList || []);
+			this.sellList=this.addItem(depthList().sellList || []);
+		},
+		// 获取成交记录
+		getDealHis(){
+			this.dealHis=dealHis();
+		},
+		// 获取项目简介信息
+		getTokenInfo(){
+			this.tokenInfo=tokenInfo;
+		},
+		
+		// 切换tab
+		switchTab(val){
+			if(this.current==val) return;
+			this.current=val;
+			this.getKline()
+		},
+		// 切换类目
+		switchCategory(val){
+			if(this.category==val) return;
+			this.category=val;
+			if(this.category==1){
+				this.getDepth()
+			}else if(this.category==2){
+				this.getDealHis()
+			}else{
+				this.getTokenInfo()
+			}
+		},
+		// 截取数字字符串 保留precision小数
+		formatterNum(value, precision) {
+			// console.log(value)
+			let reg = new RegExp('^\\d+(?:\\.\\d{0,' + precision + '})?')
+			return value.toString().match(reg)
+		},
+		// 计算MA
+		calculateMA(dayCount, data) {
+			var result = [];
+			for (var i = 0, len = data.length; i < len; i++) {
+				if (i < dayCount) {
+					result.push('-');
+					continue;
+				}
+				var sum = 0;
+				for (var j = 0; j < dayCount; j++) {
+					sum += data[i - j][1];
+				}
+				// console.log(sum, dayCount)
+				result.push((sum / dayCount).toFixed(2));
+			}
+			return result;
+		},
+		// 绘制(配置项)
+		draw(){
+			let that=this;
+			var upColor = '#03ad91';
+			var downColor = '#dd345b';
+			var colorList = ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074',
+				'#546570', '#c4ccd3'
+			];
+			var labelFont = 'bold 12px Sans-serif';
+			var option = {
+				backgroundColor: '#0d1723',
+				title: {
+					show: false
+				},
+				legend: {
+					show: false
+				},
+				visualMap: {
+				            show: false,
+				            seriesIndex: 4,
+				            dimension: 2,
+				            pieces: [{
+				                value: 1,
+				                color: downColor
+				            }, {
+				                value: -1,
+				                color: upColor
+				            }]
+				        },
+				grid: [{
+						top: '5%',
+						left: 20,
+						right: 20,
+						height: '70%'
+					},
+					{
+						top: '80%',
+						left: 20,
+						right: 20,
+						height: '16%'
+					},
+				],
+				axisPointer: { //坐标轴指示器配置项
+					link: {
+						xAxisIndex: 'all'
+					},
+					label: {
+						backgroundColor: '#0d1723',
+						color: '#fff',
+						borderColor: 'rgb(99, 117, 139)',
+						borderWidth: 1,
+						borderRadius: 2,
+						fontSize: 10
+					}
+				},
+				xAxis: [{
+					type: 'category', //坐标轴类型。(value:数值轴，适用于连续数据。,category:类目轴，适用于离散的类目数据,time: 时间轴，适用于连续的时序数据,log:对数轴。适用于对数数据)
+					data: [], //类目数据，在类目轴（type: 'category'）中有效。
+					scale: true,
+					boundaryGap: false, //坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。
+					axisLine: {
+						show: false
+					}, //坐标轴轴线相关设置
+					axisTick: {
+						show: false
+					}, //坐标轴刻度相关设置。
+					axisLabel: {
+						show: false,
+					}, //坐标轴刻度标签的相关设置。
+					splitLine: {
+						show: false,
+						lineStyle: {
+							color: 'rgba(255,255,255, 0.1)'
+						}
+					}, //坐标轴在 grid 区域中的分隔线。
+					min: 'dataMin', //坐标轴刻度最小值。可以设置成特殊值 'dataMin'，此时取数据在该轴上的最小值作为最小刻度。
+					max: 'dataMax', //坐标轴刻度最大值。可以设置成特殊值 'dataMax'，此时取数据在该轴上的最大值作为最大刻度。
+					axisPointer: {
+						label: {
+							margin: 200
+						}
+					},
+				}, {
+					type: 'category',
+					gridIndex: 1, //x 轴所在的 grid 的索引，默认位于第一个 grid。
+					data: [], //类目数据，在类目轴（type: 'category'）中有效。
+					scale: true,
+					boundaryGap: false, //坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。
+					axisLine: {
+						show: false,
+						lineStyle: {
+							color: 'rgba(255,255,255,1)',
+							width: 1
+						}
+					}, //坐标轴轴线相关设置
+					axisTick: {
+						show: false
+					}, //坐标轴刻度相关设置。
+					axisLabel: { //坐标轴刻度标签的相关设置。
+						show: true,
+						margin: 6,
+						fontSize: 10,
+						color: 'rgba(99, 117, 139, 1.0)',
+						formatter: function(value) {
+							return echarts.format.formatTime('MM-dd', value);
+						}
+					},
+					splitNumber: 20,
+					splitLine: {
+						show: false,
+						lineStyle: {
+							color: 'rgba(255,255,255, 0.1)'
+						}
+					}, //坐标轴在 grid 区域中的分隔线。
+					min: 'dataMin', //坐标轴刻度最小值。可以设置成特殊值 'dataMin'，此时取数据在该轴上的最小值作为最小刻度。
+					max: 'dataMax', //坐标轴刻度最大值。可以设置成特殊值 'dataMax'，此时取数据在该轴上的最大值作为最大刻度。
+					// axisPointer: { show: true, type: 'none', label: { show: false }},
+				}],
+				yAxis: [{
+					type: 'value', //坐标轴类型。(value:数值轴，适用于连续数据。,category:类目轴，适用于离散的类目数据,time: 时间轴，适用于连续的时序数据,log:对数轴。适用于对数数据)
+					position: 'right', //y 轴的位置。'left','right'
+					scale: true, //是否是脱离 0 值比例。设置成 true 后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用。(在设置 min 和 max 之后该配置项无效。)
+					axisLine: {
+						show: true
+					}, //坐标轴轴线相关设置。
+					axisTick: {
+						show: true,
+						inside:true
+					}, //坐标轴刻度相关设置。
+					axisLabel: { //坐标轴刻度标签的相关设置。
+						show: true,
+						color: 'rgba(99, 117, 139, 1.0)',
+						inside: true,
+						fontSize: 10,
+						formatter: function(value) {
+							return Number(value).toFixed(2)
+						}
+					},
+					splitLine: {
+						show: false,
+						lineStyle: {
+							color: 'rgba(255,255,255, 0.1)'
+						}
+					}, //坐标轴在 grid 区域中的分隔线。
+				}, {
+					type: 'value',
+					position: 'right',
+					scale: true,
+					gridIndex: 1,
+					axisLine: {
+						show: false
+					},
+					axisTick: {
+						show: false
+					},
+					axisLabel: {
+						show: false
+					},
+					splitLine: {
+						show: false
+					}
+				}],
+			
+				animation: false, //是否开启动画。
+				color: colorList,
+				tooltip: {
+					show: true, //是否显示提示框组件，包括提示框浮层和 axisPointer。
+					trigger: 'axis', //触发类型。item,axis,none
+					formatter(params){
+						let tooltip = '';
+						let time = '', open = 0, high = 0, low = 0, close = 0, amount = 0;
+						for (var i = 0; i < params.length; i++) {
+							if (params[i].seriesName === '日K') {
+								time = params[i].name;
+								open = params[i].data.length > 1 ? Number(that.formatterNum(params[i].data[1], 2)) : 0;
+								close = params[i].data.length > 1 ? Number(that.formatterNum(params[i].data[2], 2)) : 0;
+								low = params[i].data.length > 1 ? Number(that.formatterNum(params[i].data[3], 2)) : 0;
+								high = params[i].data.length > 1 ? Number(that.formatterNum(params[i].data[4], 2)) : 0;
+								amount = params[i].data.length > 1 ? Number(that.formatterNum(params[i].data[5], 2)) : 0;
+								// console.log(time,open,close,low,high,amount)
+								tooltip = '<div class="charts-tooltip">' +
+									'<div class="charts-tooltip-row"><div class="ctr-label">' + '时间' + '</div><div class="ctr-value">' + time + '</div></div>' + 
+									'<div class="charts-tooltip-row"><div class="ctr-label">' + '开' + '</div><div class="ctr-value">' + open + '</div></div>' + 
+									'<div class="charts-tooltip-row"><div class="ctr-label">' + '高' + '</div><div class="ctr-value">' + high + '</div></div>' + 
+									'<div class="charts-tooltip-row"><div class="ctr-label">' + '低' + '</div><div class="ctr-value">' + low + '</div></div>' + 
+									'<div class="charts-tooltip-row"><div class="ctr-label">' + '收' + '</div><div class="ctr-value">' + close + '</div></div>' + 
+									'<div class="charts-tooltip-row"><div class="ctr-label">' + '数量' + '</div><div class="ctr-value">' +amount + '</div></div></div>';
+							}
+							if (params[i].seriesName === 'MA5') {
+								that.MA5 = params[i].data !== 'NAN' ? Number(that.formatterNum(params[i].data, 2)) : 0
+							}
+							if (params[i].seriesName === 'MA10') {
+								that.MA10 = params[i].data !== 'NAN' ? Number(that.formatterNum(params[i].data, 2)) : 0
+							}
+							if (params[i].seriesName === 'MA30') {
+								that.MA30 = params[i].data !== 'NAN' ? Number(that.formatterNum(params[i].data, 2)) : 0
+							}
+							if (params[i].seriesName === 'VolumeMA5') {
+								that.volMA5 = params[i].data !== 'NAN' ? Number(that.formatterNum(params[i].data, 2)) : 0
+							}
+							if (params[i].seriesName === 'VolumeMA10') {
+								that.volMA10 = params[i].data !== 'NAN' ? Number(that.formatterNum(params[i].data, 2)) : 0
+							}
+						}
+						return tooltip;
+					},
+					triggerOn: 'click', //提示框触发的条件 'mousemove','click','mousemove|click','none'
+					textStyle: {
+						fontSize: 10
+					}, //提示框浮层的文本样式
+					backgroundColor: 'rgba(30,42,66,0.8);', //提示框浮层的背景颜色。
+					borderColor: '#2f3a56', //提示框浮层的边框颜色。
+					borderWidth:2,
+					position: function(pos, params, el, elRect, size) { //提示框浮层的位置，默认不设置时位置会跟随鼠标的位置。
+						var obj = {
+							top: 20
+						};
+						obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 10;
+						return obj;
+					},
+					axisPointer: { //坐标轴指示器配置项。
+						label: {
+							color: 'rgba(255,255,255,.87)',
+							fontSize: 9,
+							backgroundColor: '#020204',
+							borderColor: "#9c9fa4",
+							shadowBlur: 0,
+							borderWidth: 0.5,
+							padding: [4, 2, 3, 2],
+						},
+						animation: false,
+						type: 'cross',
+						lineStyle: {
+							color: {
+								type: 'linear',
+								x: 0,
+								y: 0,
+								x2: 0,
+								y2: 1,
+								colorStops: [{
+									offset: 0,
+									color: 'rgba(30, 42, 66, 0.1)' // 0% 处的颜色
+								}, {
+									offset: 0.7,
+									color: 'rgba(30, 42, 66,0.9)' // 100% 处的颜色
+								}, {
+									offset: 1,
+									color: 'rgba(30, 42, 66,0.2)' // 100% 处的颜色
+								}]
+							},
+							width: 10,
+							shadowColor: 'rgba(30, 42, 66,0.7)',
+							shadowBlur: 0,
+							shadowOffsetY: 68,
+						}
+					}
+				},
+			
+				dataZoom: [{ //用于区域缩放
+					type: 'inside',
+					xAxisIndex: [0, 1],
+					realtime: false,
+					start: 50,
+					end: 100,
+				}
+				],
+				series: [
+					{
+						type: 'candlestick',
+						name: '日K',
+						data: [],
+						itemStyle: {
+							color: upColor,
+							color0: downColor,
+							borderColor: upColor,
+							borderColor0: downColor
+						},
+						markPoint: {
+							symbol: 'rect',
+							symbolSize: [-10, 0.5],
+							symbolOffset: [5, 0],
+							itemStyle: {
+								color: 'rgba(255,255,255,.87)'
+							},
+							label: {
+								color: 'rgba(255,255,255,.87)',
+								offset: [10, 0],
+								fontSize: 10,
+								align: 'left',
+								formatter: function(params) {
+									return Number(params.value).toFixed(2)
+								}
+							},
+							data: [{
+									name: 'max',
+									type: 'max',
+									valueDim: 'highest'
+								},
+								{
+									name: 'min',
+									type: 'min',
+									valueDim: 'lowest'
+								}
+							]
+						},
+					}, 
+					{
+						name: 'MA5',
+						type: 'line',
+						data: [],
+						symbol: 'none',//去除圆点
+						smooth: true,
+						lineStyle: { normal: { opacity: 1, width: 1, color: "#eef4ba" } },
+						z: 5
+					}, 
+					{
+						name: 'MA10',
+						type: 'line',
+						data: [],
+						symbol: 'none',//去除圆点
+						smooth: true,
+						lineStyle: { normal: { opacity: 1, width: 1, color: '#83c1c5' } },
+						z: 4
+					},
+					{
+						name: 'MA30',
+						type: 'line',
+						data: [],
+						symbol: 'none',//去除圆点
+						smooth: true,
+						lineStyle: { normal: { opacity: 1, width: 1, color: '#b39cd8' } },
+						z: 3
+					},
+					{
+							name: 'Volume',
+							type: 'bar',
+							xAxisIndex: 1,
+							yAxisIndex: 1,
+							data: []
+						},
+						{
+							name: 'VolumeMA5',
+							type: 'line',
+							xAxisIndex: 1,
+							yAxisIndex: 1,
+							data: [],
+							symbol: 'none',//去除圆点
+							smooth: true,
+							lineStyle: { normal: { opacity: 1, width: 1, color: "#eef4ba" } },
+							z: 5
+						},
+						{
+							name: 'VolumeMA10',
+							type: 'line',
+							xAxisIndex: 1,
+							yAxisIndex: 1,
+							data: [],
+							symbol: 'none',//去除圆点
+							smooth: true,
+							lineStyle: { normal: { opacity: 1, width: 1, color: '#83c1c5' } },
+							z: 4
+						},
+				]
+			};
+			myChart.setOption(option);
+			// 加载上一页数据
+			myChart.on('datazoom',function(params){
+				let num=params.batch[0]['start'];
+				if(num==0){
+					console.log('到最左边了')
+				}
+			})
+			window.addEventListener('resize', () => { myChart.resize()})
+		}
+	}
+})

hybrid/html/js/mock.js

@@ -0,0 +1,126 @@
+// K线数据
+var rawData = [
+	["2004-01-05", 10411.85, 10544.07, 10411.85, 10575.92, 221290000],
+	["2004-01-06", 10543.85, 10538.66, 10454.37, 10584.07, 191460000],
+	["2004-01-07", 10535.46, 10529.03, 10432.12, 10587.55, 225490000],
+	["2004-01-08", 10530.07, 10592.44, 10480.59, 10651.99, 237770000],
+	["2004-01-09", 10589.25, 10458.89, 10420.52, 10603.48, 223250000],
+	["2004-01-12", 10461.55, 10485.18, 10389.85, 10543.03, 197960000],
+	["2004-01-13", 10485.18, 10427.18, 10341.19, 10539.25, 197310000],
+	["2004-01-14", 10428.67, 10538.37, 10426.89, 10573.85, 186280000],
+	["2004-01-15", 10534.52, 10553.85, 10454.52, 10639.03, 260090000],
+	["2004-01-16", 10556.37, 10600.51, 10503.71, 10666.88, 254170000],
+	["2004-01-20", 10601.42, 10528.66, 10447.92, 10676.96, 224300000],
+	["2004-01-21", 10522.77, 10623.62, 10453.11, 10665.72, 214920000],
+	["2004-01-22", 10624.22, 10623.18, 10545.03, 10717.41, 219720000],
+	["2004-01-23", 10625.25, 10568.29, 10490.14, 10691.77, 234260000],
+	["2004-01-26", 10568.12, 10702.51, 10510.44, 10725.18, 186170000],
+	["2004-01-27", 10701.11, 10609.92, 10579.33, 10748.81, 206560000],
+	["2004-01-28", 10610.07, 10468.37, 10412.44, 10703.25, 247660000],
+	["2004-01-29", 10467.41, 10510.29, 10369.92, 10611.56, 273970000],
+	["2004-01-30", 10510.22, 10488.07, 10385.56, 10551.03, 208990000],
+	["2004-02-02", 10487.78, 10499.18, 10395.55, 10614.44, 224800000],
+	["2004-02-03", 10499.48, 10505.18, 10414.15, 10571.48, 183810000],
+	["2004-02-04", 10503.11, 10470.74, 10394.81, 10567.85, 227760000],
+	["2004-02-05", 10469.33, 10495.55, 10399.92, 10566.37, 187810000],
+	["2004-02-06", 10494.89, 10593.03, 10433.74, 10634.81, 182880000],
+	["2004-02-09", 10592.41, 10579.03, 10433.72, 10634.81, 160720000],
+	["2004-02-10", 10578.74, 10613.85, 10511.18, 10667.03, 160590000],
+	["2004-02-11", 10605.48, 10737.72, 10561.55, 10779.41, 277850000],
+	["2004-02-12", 10735.18, 10694.07, 10636.44, 10775.03, 197560000],
+	["2004-02-13", 10696.22, 10627.85, 10578.66, 10755.47, 208340000],
+	["2004-02-17", 10628.88, 10714.88, 10628.88, 10762.07, 169730000],
+	["2004-02-18", 10706.68, 10671.99, 10623.62, 10764.36, 164370000],
+	["2004-02-19", 10674.59, 10664.73, 10626.44, 10794.95, 219890000],
+	["2004-02-20", 10666.29, 10619.03, 10559.11, 10722.77, 220560000],
+	["2004-02-23", 10619.55, 10609.62, 10508.89, 10711.84, 229950000],
+	["2004-02-24", 10609.55, 10566.37, 10479.33, 10681.41, 225670000],
+	["2004-02-25", 10566.59, 10601.62, 10509.42, 10660.73, 192420000],
+	["2004-02-26", 10598.14, 10580.14, 10493.71, 10652.96, 223230000],
+	["2004-02-27", 10581.55, 10583.92, 10519.03, 10689.55, 200050000],
+];
+var dates = rawData.map(function(item) {
+	return item[0];
+});
+var data = rawData.map(function(item) {
+	return [+item[1], +item[2], +item[3], +item[4], +item[5]];
+});
+var volumes = rawData.map(function(item, index) {
+	return [index, item[5], item[1] > item[2] ? 1 : -1];
+});
+
+// 交易统计数据
+var txData={
+		// 最新成交价
+		"lastPrice": 8.944,
+		// 涨幅
+		"upRate": "-79.67%",
+		// 1涨绿 2跌红
+		"upFlag": "2",
+		// 24小时交易量
+		"volume": 3,
+		// 24小时最高价
+		"high": 11.922,
+		// 24小时最低价
+		"low": 8.944
+}
+// 获取指定区间随机数
+function sum (m,n){
+　　var num = Math.floor(Math.random()*(m - n) + n);
+	return num;
+}
+// 深度数据
+var depthList=function(){
+	let obj={
+		buyList:[],
+		sellList:[]
+	};
+	for(let i=0;i<20;i++){
+		obj.buyList.push({
+			"price": 0.988,
+			"amount": 12,
+			'width':sum(1,100)
+		})
+		obj.sellList.push({
+			"price": 0.252,
+			"amount": 15,
+			'width':sum(1,100)
+		})
+	}
+	return obj;
+}
+
+// 成交列表
+var dealHis=function(){
+	let arr=[];
+	for(let i =0;i<20;i++){
+		arr.push({
+			"date": "07-22 16:27:44",
+			// 1买入 2卖出
+			"takerFlag": "1",
+			"price": 44,
+			"amount": 444
+		})
+	}
+	return arr;
+}
+// 项目信息
+var tokenInfo={
+		"tokenName": "XXX",
+		// 发行时间
+		"issueDate": "2020-06-15",
+		// 发行总量
+		"totalSupply": "1000000000",
+		// 流通总量
+		"nowSupply": "--",
+		// 众筹价格
+		"price": "--",
+		// 白皮书地址
+		"whitePaper": "--",
+		// 官网
+		"webSite": "--",
+		// 区块查询
+		"exploereSite": "--",
+		// 简介
+		"remark": "--"
+}

hybrid/html/js/uni.webview.1.5.2.js

@@ -0,0 +1,152 @@
+! function(e, n) {
+	"object" == typeof exports && "undefined" != typeof module ? module.exports = n() : "function" == typeof define &&
+		define.amd ? define(n) : (e = e || self).uni = n()
+}(this, function() {
+	"use strict";
+
+	function i(e, n) {
+		var i = {
+			options: {
+				timestamp: +new Date
+			},
+			name: e,
+			arg: n
+		};
+		if (window.__dcloud_weex_postMessage || window.__dcloud_weex_) {
+			if ("postMessage" === e) {
+				var t = {
+					data: [n]
+				};
+				return window.__dcloud_weex_postMessage ? window.__dcloud_weex_postMessage(t) : window.__dcloud_weex_.postMessage(
+					JSON.stringify(t))
+			}
+			var o = {
+				type: c,
+				args: {
+					data: i,
+					webviewIds: w
+				}
+			};
+			window.__dcloud_weex_postMessage ? window.__dcloud_weex_postMessageToService(o) : window.__dcloud_weex_.postMessageToService(
+				JSON.stringify(o))
+		}
+		if (!window.plus) return window.parent.postMessage({
+			type: c,
+			data: i,
+			pageId: ""
+		}, "*");
+		if (0 === w.length) {
+			var a = plus.webview.currentWebview();
+			if (!a) throw new Error("plus.webview.currentWebview() is undefined");
+			var d = a.parent(),
+				r = "";
+			r = d ? d.id : a.id, w.push(r)
+		}
+		if (plus.webview.getWebviewById(u)) plus.webview.postMessageToUniNView({
+			type: c,
+			args: {
+				data: i,
+				webviewIds: w
+			}
+		}, u);
+		else {
+			var s = JSON.stringify(i);
+			plus.webview.getLaunchWebview().evalJS('UniPlusBridge.subscribeHandler("'.concat(c, '",').concat(s, ",").concat(
+				JSON.stringify(w), ");"))
+		}
+	}
+	var w = [],
+		u = "__uniapp__service",
+		c = "WEB_INVOKE_APPSERVICE",
+		n = {
+			navigateTo: function(e) {
+				var n = (0 < arguments.length && void 0 !== e ? e : {}).url;
+				i("navigateTo", {
+					url: encodeURI(n)
+				})
+			},
+			navigateBack: function(e) {
+				var n = (0 < arguments.length && void 0 !== e ? e : {}).delta;
+				i("navigateBack", {
+					delta: parseInt(n) || 1
+				})
+			},
+			switchTab: function(e) {
+				var n = (0 < arguments.length && void 0 !== e ? e : {}).url;
+				i("switchTab", {
+					url: encodeURI(n)
+				})
+			},
+			reLaunch: function(e) {
+				var n = (0 < arguments.length && void 0 !== e ? e : {}).url;
+				i("reLaunch", {
+					url: encodeURI(n)
+				})
+			},
+			redirectTo: function(e) {
+				var n = (0 < arguments.length && void 0 !== e ? e : {}).url;
+				i("redirectTo", {
+					url: encodeURI(n)
+				})
+			},
+			getEnv: function(e) {
+				window.plus ? e({
+					plus: !0
+				}) : e({
+					h5: !0
+				})
+			},
+			postMessage: function(e) {
+				i("postMessage", (0 < arguments.length && void 0 !== e ? e : {}).data || {})
+			}
+		},
+		t = /uni-app/i.test(navigator.userAgent),
+		o = /complete|loaded|interactive/;
+	var a = window.my && -1 < navigator.userAgent.indexOf("AlipayClient");
+	var d = window.swan && window.swan.webView && /swan/i.test(navigator.userAgent);
+	var r = window.qq && window.qq.miniProgram && /QQ/i.test(navigator.userAgent) && /miniProgram/i.test(navigator.userAgent);
+	var s = window.tt && window.tt.miniProgram && /toutiaomicroapp/i.test(navigator.userAgent);
+	var g = window.wx && window.wx.miniProgram && /micromessenger/i.test(navigator.userAgent) && /miniProgram/i.test(
+		navigator.userAgent);
+	for (var e, v = function() {
+			window.UniAppJSBridge = !0, document.dispatchEvent(new CustomEvent("UniAppJSBridgeReady", {
+				bubbles: !0,
+				cancelable: !0
+			}))
+		}, p = [function(e) {
+			if (t) return window.__dcloud_weex_postMessage || window.__dcloud_weex_ ? document.addEventListener(
+				"DOMContentLoaded", e) : window.plus && o.test(document.readyState) ? setTimeout(e, 0) : document.addEventListener(
+				"plusready", e), n
+		}, function(e) {
+			if (g) return window.WeixinJSBridge && window.WeixinJSBridge.invoke ? setTimeout(e, 0) : document.addEventListener(
+				"WeixinJSBridgeReady", e), window.wx.miniProgram
+		}, function(e) {
+			if (r) return window.QQJSBridge && window.QQJSBridge.invoke ? setTimeout(e, 0) : document.addEventListener(
+				"QQJSBridgeReady", e), window.qq.miniProgram
+		}, function(e) {
+			if (a) {
+				document.addEventListener("DOMContentLoaded", e);
+				var n = window.my;
+				return {
+					navigateTo: n.navigateTo,
+					navigateBack: n.navigateBack,
+					switchTab: n.switchTab,
+					reLaunch: n.reLaunch,
+					redirectTo: n.redirectTo,
+					postMessage: n.postMessage,
+					getEnv: n.getEnv
+				}
+			}
+		}, function(e) {
+			if (d) return document.addEventListener("DOMContentLoaded", e), window.swan.webView
+		}, function(e) {
+			if (s) return document.addEventListener("DOMContentLoaded", e), window.tt.miniProgram
+		}, function(e) {
+			return document.addEventListener("DOMContentLoaded", e), n
+		}], l = 0; l < p.length && !(e = p[l](v)); l++);
+	e = e || {};
+	var f = "undefined" != typeof uni ? uni : {};
+	return f.navigateTo ? f.webView = e : Object.assign(f, e, {
+		webView: e
+	}), f
+});

hybrid/html/local.html

@@ -0,0 +1,171 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<title>K线</title>
+		<link rel="stylesheet" type="text/css" href="css/kline.css"/>
+	</head>
+
+	<body>
+		<div id="app">
+			<div class="head">
+				<div class="price">
+					<span class="price-label">{{txData.lastPrice || 0}}</span>
+					<span class="price-value">≈ ${{txData.lastPrice || 0}}</span>
+				</div>
+				<div class="head-item">
+					<div class="head-item-cell">
+						<span class="hic-label">涨跌幅</span>
+						<span class="hic-value" :class="txData.upFlag==1?'price-green':'price-red'">{{txData.upRate || 0}}</span>
+					</div>
+					<div class="head-item-cell">
+						<span class="hic-label">高</span>
+						<span class="hic-value">{{txData.high || 0}}</span>
+					</div>
+				</div>
+				<div class="head-item">
+					<div class="head-item-cell">
+						<span class="hic-label">24H</span>
+						<span class="hic-value">{{txData.volume || 0}}</span>
+					</div>
+					<div class="head-item-cell">
+						<span class="hic-label">低</span>
+						<span class="hic-value">{{txData.low || 0}}</span>
+					</div>
+				</div>
+			</div>
+			<div class="tabs">
+				<div @click="switchTab(item.value)" class="tabs-item" v-for="(item,index) in tabs" :key="index">
+					<span class="tabs-item-text" :class="{'tabs-item-text-active':current==item.value}">{{item.label}}</span>
+					<div class="tabs-item-bar" :class="{'tabs-item-bar-active':current==item.value}"></div>
+				</div>
+			</div>
+			<div class="charts-border">
+				<div id="main" class="charts"></div>
+				<div class="charts-label">
+					<div class="charts-MA5">MA5:{{MA5 || 0}}</div>
+					<div class="charts-MA10">MA10:{{MA10 || 0}}</div>
+					<div class="charts-MA30">MA30:{{MA30 || 0}}</div>
+				</div>
+				<div class="charts-bar-label">
+					<div class="charts-MA5">MA5:{{volMA5 || 0}}</div>
+					<div class="charts-MA10">MA10:{{volMA10 || 0}}</div>
+				</div>
+			</div>
+			<div class="category">
+				<div class="category-item-wrap" v-for="(item,index) in categoryList" :key="index">
+					<div @click="switchCategory(item.value)" class="category-item">
+						<span class="category-item-text" :class="{'category-item-text-active':category==item.value}">{{item.label}}</span>
+						<div class="category-item-bar" :class="{'category-item-bar-active':category==item.value}"></div>
+					</div>
+				</div>
+			</div>
+			<div class="category-main">
+				<div v-if="category==1" class="depth">
+					<div class="depth-head">
+						<div class="depth-head-left">
+							<div class="depth-head-label depth-head-left-index">买盘</div>
+							<div class="depth-head-label">数量(XRD)</div>
+						</div>
+						<div class="depth-head-center">
+							<div class="depth-head-label">价格(USDT)</div>
+						</div>
+						<div class="depth-head-right">
+							<div class="depth-head-label">数量(XRD)</div>
+							<div class="depth-head-label depth-head-right-index">卖盘</div>
+						</div>
+					</div>
+					<div class="depth-main">
+						<div class="depth-main-item">
+							<div class="dmi-cell" style="justify-content: flex-end;" v-for="(item,index) in buyList" :key="index">
+								<div class="dmi-cell-bg" :style="{'width': `${item.width}%`,'backgroundColor':'#303f38'}"></div>
+								<div class="dmi-cell-item">
+									<div class="dmi-cell-index">{{index+1}}</div>
+									<div class="dmi-cell-num">{{item.amount || '--'}}</div>
+									<div class="dmi-cell-price" style="padding-right: 5px;">{{item.price || '--'}}</div>
+								</div>
+							</div>
+						</div>
+						<div class="depth-main-item">
+							<div class="dmi-cell" v-for="(item,index) in sellList || 10" :key="index">
+								<div class="dmi-cell-bg" :style="{'width': `${item.width}%`,'backgroundColor':'#3c2a2e'}"></div>
+								<div class="dmi-cell-item">
+									<div class="dmi-cell-price" style="padding-left: 5px;">{{item.price || '--'}}</div>
+									<div class="dmi-cell-num" style="text-align: right;">{{item.amount || '--'}}</div>
+									<div class="dmi-cell-index" style="text-align: right;">{{index+1}}</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div v-else-if="category==2" class="transaction">
+					<div class="transaction-head">
+						<div class="transaction-head-item tmc-time">时间</div>
+						<div class="transaction-head-item tmc-type">方向</div>
+						<div class="transaction-head-item tmc-price">价格</div>
+						<div class="transaction-head-item tmc-num">数量</div>
+					</div>
+					<div class="transaction-main">
+						<div class="transaction-main-cell" v-for="(item,index) in dealHis || 10" :key="index">
+							<span class="tmc-label tmc-time">{{item.date || '--'}}</span>
+							<span class="tmc-label tmc-type" :style="{color:item.takerFlag==1?'#38ad70':'#fe5c57'}">{{item.takerFlag==1?'买入':'卖出'}}</span>
+							<span class="tmc-label tmc-price">{{item.price || '--'}}</span>
+							<span class="tmc-label tmc-num">{{item.amount || '--'}}</span>
+						</div>
+					</div>
+				</div>
+				<div v-else="category==3" class="introduction">
+					<div class="introduction-name">{{tokenInfo.tokenName || '--'}}</div>
+					<div class="introduction-cell">
+						<span class="introduction-cell-label">发行时间</span>
+						<span class="introduction-cell-value">{{tokenInfo.issueDate || '--'}}</span>
+					</div>
+					<div class="introduction-cell">
+						<span class="introduction-cell-label">发行总量</span>
+						<span class="introduction-cell-value">{{tokenInfo.totalSupply || '--'}}</span>
+					</div>
+					<div class="introduction-cell">
+						<span class="introduction-cell-label">流通总量</span>
+						<span class="introduction-cell-value">{{tokenInfo.nowSupply || '--'}}</span>
+					</div>
+					
+					<div class="introduction-cell">
+						<span class="introduction-cell-label">众筹价格</span>
+						<span class="introduction-cell-value">{{tokenInfo.price || '--'}}</span>
+					</div>
+					<div class="introduction-cell">
+						<span class="introduction-cell-label">白皮书</span>
+						<span class="introduction-cell-value">{{tokenInfo.whitePaper || '--'}}</span>
+					</div>
+					<div class="introduction-cell">
+						<span class="introduction-cell-label">官网</span>
+						<span class="introduction-cell-value">{{tokenInfo.webSite || '--'}}</span>
+					</div>
+					<div class="introduction-cell">
+						<span class="introduction-cell-label">区块查询</span>
+						<span class="introduction-cell-value">{{tokenInfo.exploereSite || '--'}}</span>
+					</div>
+					<div class="introduction-label">简介</div>
+					<div class="introduction-value">{{tokenInfo.remark || '--'}}</div>
+				</div>
+			</div>
+			<div style="height:80px"></div>
+			<div class="btns">
+				<div @click="back" class="btn btn-green">买入</div>
+				<div @click="back" class="btn btn-red">卖出</div>
+			</div>
+			
+			
+		</div>
+		<script type="text/javascript" src="js/uni.webview.1.5.2.js"></script>
+		<script type="text/javascript" src="js/echarts.min.js"></script>
+		<script type="text/javascript" src="js/qs.js"></script>
+		<script type="text/javascript" src="js/axios.js"></script>
+		<script type="text/javascript" src="js/vue.js"></script>
+		<script type="text/javascript" src="js/mock.js"></script>
+		<script type="text/javascript" src="js/kline.js"></script>
+	</body>
+	<script>
+	</script>
+</html>