mini_rabot/pages/index/index.vue

<template>
	<view class="content">
		<!-- <navigation-custom :config="config" :scrollTop="scrollTopNav" @customConduct="customConduct" :scrollMaxHeight="scrollMaxHeight" /> -->
		<scroll-view id="scrollview" class='chat-box' :style="{height: style.contentViewHeight + 'px'}" scroll-y="true"
		 :scroll-with-animation="false" :scroll-top="scrollTop" @scrolltoupper="lower()">
		    <view class="auth" v-if="!isAuth">
				<text>对不起，您还未登录！请</text>
				<button open-type="getUserInfo" @getuserinfo="getUserInfo">授权登录</button>
			</view>
			<!-- <view class="tips-box">
				{{nowTime}}
			</view> -->
		<!-- 	<view class="tips-box tips-title">
				您好，智能投顾很高兴为您服务！
			</view> -->

			<!-- <view class="talk-box">
				<view class="talk-head-box">
					<image src="../../static/rabotHead.png" mode="" class="talk-head"></image> 
				</view>
				<view class="talk-content">您好，欢迎您使用阿拉灯神丁。我可以给您提供股票投资建议，快来试试吧。</view>
			</view> -->

			<view v-for="chat in talkList" :key="chat.talkType"  class="m-item">
				<view class="talk-box talk-box-end" v-show="chat.content">
					<view class="talk-reply">{{chat.content}}</view>
					<view class="talk-head-box">
						<image :src='userHeadUrl' mode="" class="talk-head"  @click.stop='goUserSelf'></image>
					</view>
				</view>
				<view class="talk-box">
					<view class="talk-head-box">
						<image :src='rabotHeadImg' mode="" class="talk-head" ></image>
					</view>
					<view class="talk-content">{{chat.reply}}<text class="goRechargeText" v-if='chat.isRecharge' @click.stop="goSharePage()">去分享</text></view>   
				</view>

			</view>

		</scroll-view>
		<view class="send-box" :style="{ 'padding-bottom' : isShowKeyBoard + 'px'}">
			<image :src="[!isVoiceType ? '/static/icon/voice-icon.png' : '/static/icon/keyBoard-icon.png']"  @click.stop='tabVoice()'></image>
		    
			<view class="voice-mode" v-if='isVoiceType'  @click="asrStart" >语音识别</view>
			  <!-- <view>{{arsRes}}</view> -->
			    <!-- 语音识别 -->
			  <wechat-asr ref="weixinAsr" @callback="asrResult"/>
			<input type="text"  v-if="!isVoiceType" class="enter-box" v-model="inputInfo" :adjust-position="true"  @focus="isNeedAuth()"
		    :style="{'width':inputWidth}" confirm-hold='true' confirm-type='send' @confirm="sendInputInfo" />
			
			<!-- @input='isInputing' -->
			<!-- <button type="primary" class="submit-message" @click="sendInputInfo()" v-if='isShowSend'>发送</button> -->
			<image src="/static/setIcon.png"  @click.stop='openModal()' v-if='isShowSetCenter'></image>
		</view>
		
	<!-- 	录音UI效果
		<view class="record" :class="recording?'':'hidden'">
			<view class="ing" :class="willStop?'hidden':''"><image src="../../static/icon/send-icon.png" style="width: 64rpx;height:  64rpx;"></image></view>
			<view class="cancel" :class="willStop?'':'hidden'"><image src="../../static/icon/cancel-icon.png" style="width:  64rpx;height:  64rpx;"></image></view>
			<view class="tis" :class="willStop?'change':''">{{recordTis}}</view>
		</view> -->
		
		 <!-- <drag-button :isDock="true" :existTabBar="true"  @btnClick="goUserSelf" /> -->
		<uni-popup ref="popup" type="bottom">
		   <view class="uni-share">
		 		<view class="uni-share-content">
		 			
					<view  class="uni-share-content-box" @click.stop='goUserSelf' >
		 				<view class="uni-share-content-image">
		 					<image src="/static/icon/userSetIcon.png" class="image" />
		 				</view>
		 			<view class="uni-share-content-text">个人中心</view>
		 	      </view>
				  
			      <view  class="uni-share-content-box" @click.stop='goSharePage' >
			      		<view class="uni-share-content-image">
			      		 	<image src="/static/icon/share-icon.png" class="image" />
			      		 </view>
			      		<view class="uni-share-content-text">去分享</view>
			      </view>
			      
				<!--  <view  class="uni-share-content-box" @click.stop='tabVoice' >
				  		<view class="uni-share-content-image">
				  		 	<image src="/static/icon/userSetIcon.png" class="image" />
				  		 </view>
				  		 <view class="uni-share-content-text">语音输入</view>
				  </view> -->
				  
				  
				<view  class="uni-share-content-box" @click.stop='cleanChatRecord()' >
						<view class="uni-share-content-image">
						 	<image src="/static/icon/clean-icon.png" class="image" />
						 </view>
						<view class="uni-share-content-text">清空</view>
				</view>
				  
			
			
			
			<!-- 	  <view  class="uni-share-content-box" @click.stop='goRecharge'  v-if="!isIos">
				  			<view class="uni-share-content-image">
				  				 <image src="/static/icon/recharge.png" class="image" />
				  			</view>
				  		<view class="uni-share-content-text">去充值</view>
				  </view> -->
		 		
				
			 </view>
				
				 <view class="uni-share-btn" @click="cancelModal()">取消</view>
		 	  </view>
		 </uni-popup>
	</view>
</template>

<script>
	import uniPopup from "@/components/uni-popup/uni-popup.vue"
	import WechatAsr from '../chat/chat.vue';
	var md5 = require("../../common/md5.js");
	var page = 1;
	const recorderManager = uni.getRecorderManager();
	const innerAudioContext = uni.createInnerAudioContext();
	export default {
		data() {
			return {
				isShowSend:false,
				isShowSetModal:false,
				isShowSetCenter:true,
				isShowRecharge:false,
				inputWidth:'70%',
				title: 'RABOT',
				nowTime: '',
				nowHeight: '622px',
				inputInfo: '',
				isShowKeyBoard:0,
				rabotHeadImg: "../../static/rabotHead.png",
				userHeadUrl: getApp().globalData.user_headUrl || '../../static/userDefault.png',
				talkList: [],
				scrollTopNav: 0, // 当linear为true的时候需要通过onpagescroll传递参数
				scrollMaxHeight: 200 ,//滑动的高度限制，超过这个高度即背景全部显示
				scrollTop:0,
				scrollRequestEnable: true, 
				pageSize:10,
				isIos:Boolean,
				style: {
					pageHeight: 0,
					contentViewHeight: 0,
					footViewHeight: 90,
					mitemHeight: 0
				},
				isAuth:true,
				iv:'',
				session_key:'',
				encryptedData:'',
				
				//录音相关参数
				isVoiceType:false,
				RECORDER:uni.getRecorderManager(),
				isVoice:false,
				voiceTis:'按住 说话',
				recordTis:"手指上滑 取消发送",
				recording:false,
				willStop:false,
				initPoint:{identifier:0,Y:0},
				recordTimer:null,
				recordLength:0,
				
				//播放语音相关参数
				AUDIO:uni.createInnerAudioContext(),
				playMsgid:null,
				VoiceTimer:null,
				voicePath: '',
				arsRes: '',
				inviteId:''
			}
		},
		components: {
			uniPopup,
			WechatAsr
		},
		onPageScroll(e) {
			this.scrollTopNav = e.scrollTop;
		},
		onShareAppMessage(){
			    return {
			      title: '阿拉灯神丁',
			      path: '/pages/index/index?inviteId=' + getApp().globalData.user_id 
			    }
		 },
		 
		onLoad(options) {
			if(options.inviteId){
				this.inviteId = options.inviteId;
			}
			this.userLogin();
			this.getEquipmentHeight();
		},
		onShow() {
			// this.getNowTime();
			console.log(getApp().globalData.isAuth)
			this.userHeadUrl = getApp().globalData.user_headUrl || '../../static/userDefault.png',
			getApp().globalData.isAuth ? this.isAuth = true : this.isAuth = false ;
			getApp().globalData.isAuth ? this.getHistory() : this.isAuth = false ;
		},
		methods: {
			userLogin(){
				uni.showLoading({})
				uni.login({
					success: (res) => {
				        this.getCodeRabot(res)
					}
				});
			},
			// 获取用户信息
			getUserInfo(e) {
				console.log(e);
				if (e.detail.errMsg == "getUserInfo:ok") {
					
					this.iv = e.detail.iv;
					this.encryptedData = e.detail.encryptedData;
					
					this.loginUserInfo()
				} else {
					console.log("用户信息授权失败");
					this.isShowAuthBtn = true;
				}
			},
			loginUserInfo(){
				let that = this;
				uni.request({
					url:getApp().globalData.shareUrl, //需要设置为全局
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						method: 'auth',
						timestamp: getApp().globalData.globalTimestamp, //Date.now()
						uid:getApp().globalData.user_id,
						sign: md5('auth' + getApp().globalData.globalTimestamp),
						nickname:getApp().globalData.user_name,
						headimg:getApp().globalData.user_headUrl,
						iv:that.iv,
						session_key:that.session_key,
						encryptedData:that.encryptedData,
						invited:that.inviteId
					},
					success: res => {
						that.isAuth = true;
						getApp().globalData.user_id = res.data.msg.id;
						getApp().globalData.open_id = res.data.msg.openid;
						getApp().globalData.isAuth = that.isAuth;
						getApp().globalData.times = res.data.msg.times;
						getApp().globalData.total_times = res.data.msg.total_times;
						getApp().globalData.user_headUrl = res.data.msg.headimg;
						getApp().globalData.user_name = res.data.msg.name;
						that.userHeadUrl = res.data.msg.headimg || '../../static/userDefault.png';
						that.getHistory();
					} 
				});
			},
			getCodeRabot(res){
				let that = this;
				uni.request({
					url:getApp().globalData.shareUrl, //需要设置为全局
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						method: 'login',
						timestamp: getApp().globalData.globalTimestamp, //Date.now()
						code: res.code,
						sign: md5('login' + getApp().globalData.globalTimestamp),
					},
					success: res => {
						// 通过openid发起会员登录
						 // getApp().globalData.user_id = res.data.msg.id;
						 // getApp().globalData.open_id = res.data.msg.openid;
						 // getApp().globalData.isAuth = res.data.msg.isauth === '0';
						 // getApp().globalData.times = res.data.msg.times;
						 // getApp().globalData.total_times = res.data.msg.total_times;
						 // getApp().globalData.user_headUrl = res.data.msg.headimg;
						 // getApp().globalData.user_name = res.data.msg.name;
						 // that.userHeadUrl = res.data.msg.headimg || '../../static/userDefault.png';
						// that.getHistory();
						var isAuth = res.data.msg.isauth === 1;
						that.session_key = res.data.msg.session_key;
						if(isAuth){
							 this.isAuth = true; 
							 getApp().globalData.user_id = res.data.msg.id;
							 getApp().globalData.open_id = res.data.msg.openid;
					         getApp().globalData.isAuth = true;
							 getApp().globalData.times = res.data.msg.times;
							 getApp().globalData.total_times = res.data.msg.total_times;
							 getApp().globalData.user_headUrl = res.data.msg.headimg;
							 getApp().globalData.user_name = res.data.msg.name;
							 that.userHeadUrl = res.data.msg.headimg || '../../static/userDefault.png';
							 that.getHistory();
						}else{
							getApp().globalData.session_key = res.data.msg.session_key;
							that.isAuth = isAuth;
							getApp().globalData.isAuth = isAuth;
							
							wx.hideLoading();
							
						}
					    
					} 
				});
			},
			getNowTime() {
				let time = new Date();
				let y = time.getFullYear();
				let m = time.getMonth() + 1;
				let d = time.getDate();
				let h = time.getHours();
				let i = time.getMinutes();
				i = i > 10 ? i : '0' + i;
				this.nowTime = y + "年" + m + "月" + d + "日" + "   " + h + ":" + i
			},
			getEquipmentHeight() {
				const height = uni.getSystemInfoSync().windowHeight;
				this.nowHeight = height + 'px';
				getApp().globalData.glbalHeight = this.nowHeight;
				this.style.pageHeight = height;
				this.style.contentViewHeight = height - uni.getSystemInfoSync().screenWidth / 750 * (100) -7; //像素   因为给出的是像素高度 然后我们用的是upx  所以换算一下 
			},
			scrollToBottom() {
				let that = this;
				let query = uni.createSelectorQuery();
				query.selectAll('.m-item').boundingClientRect();
				query.select('#scrollview').boundingClientRect();
				query.exec((res) => {
							that.style.mitemHeight = 0;
							res[0].forEach((rect) => that.style.mitemHeight = that.style.mitemHeight + rect.height + 40) //获取所有内部子元素的高度
							// 因为vue的虚拟DOM 每次生成的新消息都是之前的，所以采用异步setTimeout    主要就是添加了这红字
							that.scrollTop = that.style.mitemHeight - that.style.contentViewHeight
							// setTimeout(() => {
							// 	if (that.style.mitemHeight > (that.style.contentViewHeight - 100)) { //判断子元素高度是否大于显示高度
							// 		that.scrollTop = that.style.mitemHeight - that.style.contentViewHeight //用子元素的高度减去显示的高度就获益获得序言滚动的高度
							// 	}
							// }, 100)
						})
					},
			getHistory(isShow) {
				        // if(getApp.globalData.isAuth){this.isAuth = true}
						let that = this;
						uni.request({
							url: getApp().globalData.shareUrl, //需要设置为全局
							method: 'POST',
							header: {
								'content-type': 'application/x-www-form-urlencoded'
							},
							data: {
								method: 'question_list',
								timestamp: getApp().globalData.globalTimestamp, //Date.now()
								uid: getApp().globalData.user_id,
								sign: md5('question_list' + getApp().globalData.globalTimestamp),
								page: page || 1,
								pageSize: 10,
							},
							success: res => {
                                uni.hideLoading()
				                that.isIos = getApp().globalData.isIos;
								if(isShow){
									res.data.msg[0].isRecharge = 1
								}
								if(page === 1){
									that.scrollRequestEnable = true;
									that.talkList  = ((res.data.msg).reverse());
									setTimeout(()=>{
										that.scrollToBottom()	
									},100)
								}else if (page > 1 && res.data.msg.length === that.pageSize) {
										that.scrollRequestEnable = true;
										that.talkList.unshift(...((res.data.msg).reverse()));
								}else if (page > 1 && (res.data.msg.length > 0) && (res.data.msg.length < that.pageSize)){
										that.scrollRequestEnable = true;
										that.talkList.unshift(...((res.data.msg).reverse()));
								}else if (page > 1 && res.data.msg.length == 0){
									    that.scrollRequestEnable = false;
								}
							}
						});
					},
			goUserSelf() {
				        this.$refs.popup.close()
						uni.navigateTo({
							url: '../selfInfo/selfInfo'
						})
					},
			goRecharge() {
						this.$refs.popup.close()
						uni.navigateTo({
							url: '../selfInfo/payList/payList'
						})
					},
			sendMsgRequest(msg) {
				        if(getApp().globalData.user_id=='') return false;
						let that = this;
						uni.request({
							url: getApp().globalData.shareUrl, //需要设置为全局
							method: 'POST',
							header: {
								'content-type': 'application/x-www-form-urlencoded'
							},
							data: {
								method: 'question',
								timestamp: getApp().globalData.globalTimestamp, //Date.now()
								uid: getApp().globalData.user_id,
								sign: md5('question' + getApp().globalData.globalTimestamp),
								content: msg
							},
							success: res => {
								if(res.data.code === 100){
									that.isShowRecharge = true;
									that.inputInfo = '';
									that.getHistory('show');
								}else {
									that.inputInfo = '';
									that.getHistory();
									that.isShowRecharge = false
								}
						
							}
						});
					},
			sendInputInfo() {
						// this.inputWidth = '80%';
						// this.isShowSend = false;
						// this.isShowSetCenter = true;
						if (!this.inputInfo) {
							uni.showToast({
								title: '请输入股票代码',
								icon: 'none'
							});
						} else {
							page = 1;
							this.sendMsgRequest(this.inputInfo)
						}
					},
			isInputing(){
				if (this.inputInfo) {
					this.inputWidth = '72%';
					this.isShowSend = true;
					this.isShowSetCenter = false;
				} else {
					this.inputWidth = '80%';
					this.isShowSend = false;
					this.isShowSetCenter = true;
				}
			},	
			isNeedAuth(){
				console.log(this.isAuth)
				if(!this.isAuth){
					setTimeout(()=>{
						uni.navigateTo({
							url: '../auth/index',
							success: res => {},
							fail: () => {},
							complete: () => {}
						});
					},500)
				}
			},	
			// 滚动至底部触发的事件
			lower() {
				if (this.scrollRequestEnable) {
					// 允许滚动时，触底page加一，重新请求数据
					console.log(666)
					page++;
					this.getHistory();
				} else {
					// 不允许滚动时，只显示"到底了"提示
					// this.showBottem = true
					console.log('noData')
				}
			},		
			getInputFocus(e){
				//this.isShowKeyBoard = e.detail.height
			},
			getInputBlur(){
				//this.isShowKeyBoard = 0
			},
			goSharePage(){
				uni.navigateTo({
					url: '../share/sharePage',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			tabVoice(){
				this.isVoiceType = !this.isVoiceType;
			},
			clearChat(){
				
			},
			openModal(){
			        // 需要在 popup 组件，指定 ref 为 popup
					if(!this.isAuth){
						uni.navigateTo({
							url: '../auth/index',
							success: res => {},
							fail: () => {},
							complete: () => {}
						});
					}else {
						this.$refs.popup.open();
					}
			      },
			cancelModal(){
				          // 需要在 popup 组件，指定 ref 为 popup
				     this.$refs.popup.close();
			  },
			//情况聊天记录
			 cleanChatRecord(){
				 if(getApp().globalData.user_id=='') return false;
				 let that = this;
				 uni.request({
				 	url: getApp().globalData.shareUrl, //需要设置为全局
				 	method: 'POST',
				 	header: {
				 		'content-type': 'application/x-www-form-urlencoded'
				 	},
				 	data: {
				 		method: 'clear_question',
				 		timestamp: getApp().globalData.globalTimestamp, //Date.now()
				 		uid: getApp().globalData.user_id,
				 		sign: md5('clear_question' + getApp().globalData.globalTimestamp),
				 	},
				 	success: res => {
				 		console.log(res)
						if(res.data.code === 200){
							uni.showToast({
								title: '清除成功',
								icon:'none',
								duration:1500
							});
							that.$refs.popup.close();
							page = 1;
							that.getHistory();
						}else{
							uni.showToast({
								title: res.data.msg,
								icon:'none',
								duration:1500
							});
						}
				 	}
				 });
			 },
	         // 语音识别
	        asrStart () {
	                this.$refs.weixinAsr.show();
	              },
	         asrResult (res) {
	                //this.arsRes = res;
					res = res.substring(0,res.length-1)
					page = 1;
					this.sendMsgRequest(res)
	              }
			},
		
			onShareAppMessage(){
				
			}
		}
</script>

<style>
	.content {
		text-align: center;
	}

	.chat-box {
		background: #f4f5f7;
		padding-top: 3%;
		/* padding-bottom: 100upx; */
	}

	.tips-box {
		background: #D5D5DA;
		font-size: 28upx;
		color: #fff;
		border-radius: 30upx;
		width: 50%;
		margin: 0 auto;
		height: 50rpx;
		line-height: 50rpx
	}

	.tips-title {
		width: 70%;
		margin-top: 5%;
		font-size: 30rpx;
		height: 70rpx;
		line-height: 70rpx
	}

	.send-box {
		width: 100%;
		height: 90rpx;
		position: fixed;
		bottom: 0;
		background: #F4F0ED;
		display: flex;
		align-items: center;
		padding: 2upx;
	}

	.talk-box {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-top: 3%;
	}

	.talk-box-end {
		justify-content: flex-end;
	}

	.talk-head-box {
		width: 80rpx;
		height: 80rpx;
		border-radius: 30rpx;
		margin-left: 2%;
		margin-right: 2%;
	}

	.talk-head {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.talk-content {
		padding: 2%;
		background: #fff;
		font-size: 28rpx;
		border-top-right-radius: 20rpx;
		border-bottom-left-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
		text-align: left;
		max-width: 70%;
	}
	.talk-reply{
		padding: 2%;
		background: #9EEA6A;
		font-size: 28rpx;
		border-top-left-radius: 20rpx;
		border-bottom-left-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
		text-align: left;
		max-width: 70%;
	}
    .goRechargeText {
		color:#0A98D5
	} 
	.enter-box {
		height: 70rpx;
		background: #fff;
		border-radius: 1%;
		text-align: left;
		margin: 8px;
		margin-bottom: 10px;
		padding-left:8px;
	}
    .send-box image {
		width: 60rpx;
		height: 60rpx;
		margin-right: 10upx;
		margin-left: 10upx;
	}
	.submit-message {
		width: 18%;
		margin-right: 20upx;
		height: 70rpx;
		font-size: 28rpx;
		line-height: 70rpx;
		color: #fff;
		background-color: #0A98D5 !important;
	}

	.logo {
		height: 200upx;
		width: 200upx;
		margin-top: 200upx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50upx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36upx;
		color: #8f8f94;
	}
	
	.uniFab{
		width:98px;
		height:36px;
		background:rgba(231,247,236,1);
		box-shadow:-6px 5px 74px 0px rgba(60,188,99,0.08);
		border-radius:100px 0px 0px 100px;
		right: 0upx;
		position: fixed;
		z-index: 9999;
		top: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.uniFab text{
		width:64px;
		font-size:16px;
		font-family:PingFangSC;
		font-weight:600;
		color:rgba(60,188,99,1);
		text-shadow:0px 1px 2px rgba(12,39,20,0.2);
	}
	
	.uni-share-content {
		display: flex;
		flex-wrap: wrap;
		padding: 15px;
		/* justify-content: center */
	}
	
	.uni-share-content-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 25%;
		box-sizing: border-box;
	}
	
	.uni-share-content-image {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 60upx;
		height: 60upx;
		overflow: hidden;
		border-radius: 10upx;
	}
	
	.uni-share-content-image .image {
		width: 100%;
		height: 100%;
	}
	
	.uni-share-content-text {
		font-size: 26upx;
		color: #333;
		padding-top: 5px;
		padding-bottom: 10px;
	}
	
	.uni-share-btn {
		height: 90upx;
		line-height: 90upx;
		border-top: 1px #f5f5f5 solid;
		text-align: center;
		color: #666;
		font-size: 30rpx;
	}
	/* .placeHolder {
		padding:2px
	} */
	
	
	.auth{
		display: flex;
		flex-direction: row;
		font-size: 14px;
		justify-content: center;
		align-items: center;
		background-color: #eee;
	}
	
	.auth button{
		font-size: 14px;
		padding:0px;
		margin:0px;
		color:#007AFF;
		background-color: #eee;
		
		
	}
	
	.auth button:after{
		border: 0px;
	}
	
	.voice-mode {
		width: 70%;
		height: 70rpx;
		background: #fff;
		border-radius: 1%;
		text-align: left;
		margin: 8px;
		margin-bottom: 10px;
		padding-left:8px;
		text-align: center;
		line-height: 70upx;
		font-size: 30upx
	}
	
	
.icon {
		font-family:"HMfont-home" !important;
		font-size:56upx;
		font-style:normal;
		color: #333;
	}

.hidden{
	display: none !important;
}
.record{
	width: 40vw;
	height: 40vw;
	position: fixed;
	top: 55%;
	left: 30%;
	background-color: rgba(0,0,0,.6);
	border-radius: 20upx;	
}
.ing{
		width: 100%;
		height: 30vw;
		display: flex;
		justify-content: center;
		align-items: center;
		// 模拟录音音效动画	
	}
	@keyframes volatility {
			0% {background-position: 0% 130%;}
			20% {background-position: 0% 150%;}
			30% {background-position: 0% 155%;}
			40% {background-position: 0% 150%;}
			50% {background-position: 0% 145%;}
			70% {background-position: 0% 150%;}
			80% {background-position: 0% 155%;}
			90% {background-position: 0% 140%;}
			100% {background-position: 0% 135%;}
		}
.cancel{
		width: 100%;
		height: 30vw;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.icon{
		background-image:linear-gradient(to bottom,#f09b37,#fff 50%); 
		background-size:100% 200%;
		animation: volatility 1.5s ease-in-out -1.5s infinite alternate;
		-webkit-background-clip:text; 
		-webkit-text-fill-color:transparent; 
		font-size: 150upx;
		color: #f09b37;
	}
	.tis{
		width: 100%;
		height: 10vw;
		display: flex;
		justify-content: center;
		font-size: 28upx;
		color: #fff;
		
	}
	.change{
		color: #f09b37;
	}
</style>