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>

		<view>
			<uni-popup ref="showCountsModal" type="center" :custom="true">
				<view class="uni-tip everyDay-box">
					<image src="/static/rabotHead.png" mode="aspectFit"></image>
					<view>恭喜你获取{{ everyDayCounts }}次查询机会</view>
					<button type="default" @click.stop="addEveryDayCounts">我知道啦</button>
				</view>
			</uni-popup>
		</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:'',
			everyDayCounts:''
		}
	},
	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();
		this.userHeadUrl = getApp().globalData.user_headUrl || '../../static/userDefault.png',
		getApp().globalData.isAuth ? this.isAuth = true : this.isAuth = false ;
		getApp().globalData.user_id ? this.getUserStorage(): 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.getUserStorage();
					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 => {
					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.getUserStorage();
						 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
		},
		getUserStorage(){
			let that = this
			uni.getStorage({
			    key: 'getTime',
			    success: function (res) {
						let nowTime = Date.now();
						let lastTime = res.data;
						if(nowTime - lastTime >= 86400000){
							that.getEveryDayCounts()
						}else {
							return false
						}
			    },
				fail:function  () {
					that.getEveryDayCounts()
				}
			});
		},
		getEveryDayCounts(){
			let that = this;
			uni.request({
				url: getApp().globalData.shareUrl, //需要设置为全局
				method: 'POST',
				header: {
					'content-type': 'application/x-www-form-urlencoded'
				},
				data: {
					method: 'add_freegive_times',
					timestamp: getApp().globalData.globalTimestamp, //Date.now()
					uid: getApp().globalData.user_id,
					sign: md5('add_freegive_times' + getApp().globalData.globalTimestamp),
				},
				success: res => {
					if(res.data.code === 200){
						that.everyDayCounts = res.data.msg.times;
						that.$refs.showCountsModal.open();
						uni.setStorage({
							 key: 'getTime',
							 data:Date.now(),
							 success: function () {
							  console.log('success');
							  //that.$refs.showCountsModal.close()
							 }
						});
					}
					else {
						uni.showToast({
							title:res.data.msg,
							icon:'none',
							duration:1500
						})
						}
					}
			});
		},
		addEveryDayCounts(){
			console.log('已领取');
			this.$refs.showCountsModal.close()
		},
		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, 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;
}
.everyDay-box {
	background: #fff;
	padding: 20px;
	border-radius: 5%;
}
.everyDay-box image {
	width: 240rpx;
	height: 240rpx;
}
.everyDay-box view {
	font-size: 28rpx;
}
.everyDay-box button {
	font-size: 28rpx;
	margin-top: 5%;
	color: #fff;
	background: #00bfff;
}
</style>