no message

pages/index/index.vue

@@ -2,103 +2,150 @@
 	<view class="index-box box-border-box flex-common-css" @click.stop="play()">
 		<view class="flex-justify-space box-border-box plr-32">
 			<image class="logo-img" src="@/static/img/c-logo.png" mode="scaleToFill"></image>
-			<!-- <image class="music-img" src="@/static/img/c-music.png" mode="scaleToFill"></image> -->
+			<image class="music-img" :class="isPlay?'music-anumation':''" src="@/static/img/c-music.png" mode="scaleToFill" @click.stop="musicPause()"></image>
 		</view>
 		<swiper class="swiper" :vertical='true' @change="swiperChange">
 			<!-- 邀请函 -->
 			<swiper-item>
 				<view class="swiper-item index-1" v-if="index == 0">
-					<image class="img-text wow animate__animated animate__bounceInUp" src="@/static/img/yqh-text.png" mode="scaleToFill"></image>
-					<view class="fs-48 fc-f text-align-center mb-16 wow animate__animated animate__bounceInLeft">振合网科技集团实体联盟</view>
-					<view class="fs-32 fc-f text-align-center mb-72 wow animate__animated animate__bounceInRight">未来已来   一触即发</view>
-					<image class="img-xian wow animate__animated animate__bounceInUp" src="@/static/img/xian.png" mode="scaleToFill"></image>
-					<image class="name-text wow animate__animated animate__bounceInLeft" src="@/static/img/name-text.png" mode="scaleToFill"></image>
-					<image class="time-text wow animate__animated animate__bounceInRight" src="@/static/img/time-text.png" mode="scaleToFill"></image>
-					<image class="up-icon wow animate__animated animate__bounceInUp" src="@/static/img/c-up-icon.png" mode="scaleToFill"></image>
+					<image class="img-text wow animate__animated animate__bounceInUp" src="@/static/img/yqh-text.png"
+						mode="scaleToFill"></image>
+					<view class="fs-48 fc-f text-align-center mb-16 wow animate__animated animate__bounceInLeft">
+						振合网科技集团实体联盟</view>
+					<view class="fs-32 fc-f text-align-center mb-72 wow animate__animated animate__bounceInRight">未来已来
+						一触即发</view>
+					<image class="img-xian wow animate__animated animate__bounceInUp" src="@/static/img/xian.png"
+						mode="scaleToFill"></image>
+					<image class="name-text wow animate__animated animate__bounceInLeft"
+						src="@/static/img/name-text.png" mode="scaleToFill"></image>
+					<image class="time-text wow animate__animated animate__bounceInRight"
+						src="@/static/img/time-text.png" mode="scaleToFill"></image>
+					<image class="up-icon wow animate__animated animate__bounceInUp" src="@/static/img/c-up-icon.png"
+						mode="scaleToFill"></image>
 				</view>
 			</swiper-item>
 			<!-- 诚挚邀请 -->
 			<swiper-item>
 				<view class="swiper-item">
 					<view class="index-2" v-if="index == 1">
-						<image class="text-img wow animate__animated animate__bounceInUp" src="@/static/img/czyq-text.png" mode="scaleToFill"></image>
-						<view class="fs-32 fc-F2D4A9 fw-b mb-24 wow animate__animated animate__bounceInUp">尊敬的{{userName?userName:'用户'}}</view>
+						<image class="text-img wow animate__animated animate__bounceInUp"
+							src="@/static/img/czyq-text.png" mode="scaleToFill"></image>
+						<view class="fs-32 fc-F2D4A9 fw-b mb-24 wow animate__animated animate__bounceInUp">
+							尊敬的{{userName?userName:'用户'}}</view>
 						<view class="fs-32 fc-F2D4A9 text-box wow animate__animated animate__bounceInUp">
-							您好！感谢百忙之中阅读此邀请函。我们诚挚的邀请您参加于10月20日振合科技集团举办的2024年度招商说明会。我们深知在发展的道路上离不开您的信任与支持，我们取得的成绩中有您的辛勤付出。此次盛会邀请多位行业专家共聚一堂，特此诚邀您出席盛会，期待与您共话友情、 展望末来、共创属于我们新的商业传奇。
+							您好！感谢百忙之中阅读此邀请函。我们诚挚的邀请您参加于10月20日振合科技集团举办的2024年度招商说明会。我们深知在发展的道路上离不开您的信任与支持，我们取得的成绩中有您的辛勤付出。此次盛会邀请多位行业专家共聚一堂，特此诚邀您出席盛会，期待与您共话友情、
+							展望末来、共创属于我们新的商业传奇。
 						</view>
-						<view class="fc-F2D4A9 fw-b fs-32 text-align-right mt-32 wow animate__animated animate__bounceInUp">振合网科技集团</view>
-						<view class="fs-28 fc-F2D4A9 text-align-right wow animate__animated animate__bounceInUp">2024年10月20日</view>
+						<view
+							class="fc-F2D4A9 fw-b fs-32 text-align-right mt-32 wow animate__animated animate__bounceInUp">
+							振合网科技集团</view>
+						<view class="fs-28 fc-F2D4A9 text-align-right wow animate__animated animate__bounceInUp">
+							2024年10月20日</view>
 					</view>
-					<image class="up-icon wow animate__animated animate__bounceInUp" src="@/static/img/c-up-icon.png" mode="scaleToFill"></image>
+					<image class="up-icon wow animate__animated animate__bounceInUp" src="@/static/img/c-up-icon.png"
+						mode="scaleToFill"></image>
 				</view>
 			</swiper-item>
 			<!-- 活动地址 -->
 			<swiper-item>
 				<view class="swiper-item">
 					<view class="index-2" v-if="index == 2">
-						<image class="text-img-1 wow animate__animated animate__bounceInUp" src="@/static/img/hdtd-text.png" mode="scaleToFill"></image>
-						<image class="img-1 wow animate__animated animate__bounceInUp" src="@/static/img/h-1.png" mode="scaleToFill"></image>
-						
+						<image class="text-img-1 wow animate__animated animate__bounceInUp"
+							src="@/static/img/hdtd-text.png" mode="scaleToFill"></image>
+						<image class="img-1 wow animate__animated animate__bounceInUp" src="@/static/img/h-1.png"
+							mode="scaleToFill"></image>
+
 						<view class="flex-justify-space">
-							<image class="img-2 wow animate__animated animate__bounceInLeft" src="@/static/img/h-2.png" mode="scaleToFill"></image>
-							<image class="img-2 wow animate__animated animate__bounceInRight" src="@/static/img/h-3.png" mode="scaleToFill"></image>
+							<image class="img-2 wow animate__animated animate__bounceInLeft" src="@/static/img/h-2.png"
+								mode="scaleToFill"></image>
+							<image class="img-2 wow animate__animated animate__bounceInRight" src="@/static/img/h-3.png"
+								mode="scaleToFill"></image>
 						</view>
-						
-						<view class="fc-F2D4A9 fs-40 text-align-center mb-16 wow animate__animated animate__bounceInUp">重庆丽星君顿酒店</view>
-						<view class="fs-28 fc-F2D4A9 text-align-center wow animate__animated animate__bounceInUp">地址：重庆市渝北区服装城大道48号</view>
+
+						<view class="fc-F2D4A9 fs-40 text-align-center mb-16 wow animate__animated animate__bounceInUp">
+							重庆丽星君顿酒店</view>
+						<view class="fs-28 fc-F2D4A9 text-align-center wow animate__animated animate__bounceInUp">
+							地址：重庆市渝北区服装城大道48号</view>
 					</view>
-					<image class="up-icon wow animate__animated animate__bounceInUp" src="@/static/img/c-up-icon.png" mode="scaleToFill"></image>
+					<image class="up-icon wow animate__animated animate__bounceInUp" src="@/static/img/c-up-icon.png"
+						mode="scaleToFill"></image>
 				</view>
 			</swiper-item>
 			<!-- 地址导航 -->
 			<swiper-item>
 				<view class="swiper-item" v-if="index == 3">
 					<view class="index-2">
-						<image class="text-img wow animate__animated animate__bounceInUp" src="@/static/img/dzdh-text.png" mode="scaleToFill"></image>
-						<view class="b-f wow animate__animated animate__bounceInUp" @click="toMap()">
+						<image class="text-img wow animate__animated animate__bounceInUp"
+							src="@/static/img/dzdh-text.png" mode="scaleToFill"></image>
+						<view class="b-f wow animate__animated animate__bounceInUp" @click.stop="toMap()">
 							<image class="img-3" src="@/static/img/map.png" mode="scaleToFill"></image>
 							<view class="b-c">开始导航</view>
 						</view>
-						<view class="fc-F2D4A9 fs-36 text-align-center mb-16 wow animate__animated animate__bounceInLeft">会议地址</view>
-						<view class="fc-F2D4A9 fs-28 text-align-center mb-32 wow animate__animated animate__bounceInRight">重庆丽星君顿酒店</view>
-						<view class="fc-F2D4A9 fs-36 text-align-center mb-16 wow animate__animated animate__bounceInLeft">会议时间</view>
-						<view class="fc-F2D4A9 fs-28 text-align-center mb-32 wow animate__animated animate__bounceInRight">10月20日 上午08:30</view>
-						<view class="fc-F2D4A9 fs-36 text-align-center mb-16 wow animate__animated animate__bounceInLeft" @click="playPhone()">联系方式</view>
-						<view class="fc-F2D4A9 fs-28 text-align-center mb-32 wow animate__animated animate__bounceInRight" @click="playPhone()">
-							<uni-icons style="margin-right: 10rpx;" type="phone-filled" color="#f2d4a9" size="14"></uni-icons>
+						<view
+							class="fc-F2D4A9 fs-36 text-align-center mb-16 wow animate__animated animate__bounceInLeft">
+							会议地址</view>
+						<view
+							class="fc-F2D4A9 fs-28 text-align-center mb-32 wow animate__animated animate__bounceInRight">
+							重庆丽星君顿酒店</view>
+						<view
+							class="fc-F2D4A9 fs-36 text-align-center mb-16 wow animate__animated animate__bounceInLeft">
+							会议时间</view>
+						<view
+							class="fc-F2D4A9 fs-28 text-align-center mb-32 wow animate__animated animate__bounceInRight">
+							10月20日 上午08:30</view>
+						<view
+							class="fc-F2D4A9 fs-36 text-align-center mb-16 wow animate__animated animate__bounceInLeft"
+							@click.stop="playPhone()">联系方式</view>
+						<view
+							class="fc-F2D4A9 fs-28 text-align-center mb-32 wow animate__animated animate__bounceInRight"
+							@click.stop="playPhone()">
+							<uni-icons style="margin-right: 10rpx;" type="phone-filled" color="#f2d4a9" size="14">
+							</uni-icons>
 							023-67177907
 						</view>
 					</view>
-					<image class="up-icon wow animate__animated animate__bounceInUp" src="@/static/img/c-up-icon.png" mode="scaleToFill"></image>
+					<image class="up-icon wow animate__animated animate__bounceInUp" src="@/static/img/c-up-icon.png"
+						mode="scaleToFill"></image>
 				</view>
 			</swiper-item>
 			<!-- 参与预约 -->
 			<swiper-item>
 				<view class="swiper-item" v-if="index == 4">
 					<view class="index-2">
-						<image class="text-img-2 wow animate__animated animate__bounceInUp" src="@/static/img/cyyy-text.png" mode="scaleToFill"></image>
+						<image class="text-img-2 wow animate__animated animate__bounceInUp"
+							src="@/static/img/cyyy-text.png" mode="scaleToFill"></image>
 						<view class="mb-32">
-							<view class="fc-F2D4A9 fs-32 mb-16 wow animate__animated animate__bounceInLeft">您的姓名<span class="fc-ED301D fs-32">*</span></view>
-							<input class="wow animate__animated animate__bounceInRight" v-model="fromData.name" type="text" placeholder="请输入您的姓名">
+							<view class="fc-F2D4A9 fs-32 mb-16 wow animate__animated animate__bounceInLeft">您的姓名<span
+									class="fc-ED301D fs-32">*</span></view>
+							<input class="wow animate__animated animate__bounceInRight" v-model="fromData.name"
+								type="text" placeholder="请输入您的姓名">
 						</view>
 						<view class="mb-32">
-							<view class="fc-F2D4A9 fs-32 mb-16 wow animate__animated animate__bounceInLeft">您的手机号<span class="fc-ED301D fs-32">*</span></view>
-							<input class="wow animate__animated animate__bounceInRight" v-model="fromData.phone" type="number" placeholder="请输入您的手机号">
+							<view class="fc-F2D4A9 fs-32 mb-16 wow animate__animated animate__bounceInLeft">您的手机号<span
+									class="fc-ED301D fs-32">*</span></view>
+							<input class="wow animate__animated animate__bounceInRight" v-model="fromData.phone"
+								type="number" placeholder="请输入您的手机号">
 						</view>
 						<view class="mb-32">
-							<view class="fc-F2D4A9 fs-32 mb-16 wow animate__animated animate__bounceInLeft">您的公司名称<span class="fc-ED301D fs-32">*</span></view>
-							<input class="wow animate__animated animate__bounceInRight" v-model="fromData.corporate" type="text" placeholder="请输入您的公司名称">
+							<view class="fc-F2D4A9 fs-32 mb-16 wow animate__animated animate__bounceInLeft">您的公司名称<span
+									class="fc-ED301D fs-32">*</span></view>
+							<input class="wow animate__animated animate__bounceInRight" v-model="fromData.corporate"
+								type="text" placeholder="请输入您的公司名称">
 						</view>
 						<view class="mb-32">
-							<view class="fc-F2D4A9 fs-32 mb-16 wow animate__animated animate__bounceInLeft">邀请人<span class="fc-ED301D fs-32">*</span></view>
-							<input class="wow animate__animated animate__bounceInRight" v-model="fromData.inviter" type="text" placeholder="请输入您的邀请人">
+							<view class="fc-F2D4A9 fs-32 mb-16 wow animate__animated animate__bounceInLeft">邀请人<span
+									class="fc-ED301D fs-32">*</span></view>
+							<input class="wow animate__animated animate__bounceInRight" v-model="fromData.inviter"
+								type="text" placeholder="请输入您的邀请人">
 						</view>
 						<view class="mb-72">
-							<view class="fc-F2D4A9 fs-32 mb-16 wow animate__animated animate__bounceInLeft">邀请人手机号<span class="fc-ED301D fs-32">*</span></view>
-							<input class="wow animate__animated animate__bounceInRight" v-model="fromData.inviter_phone" type="number" placeholder="请输入邀请人的手机号">
+							<view class="fc-F2D4A9 fs-32 mb-16 wow animate__animated animate__bounceInLeft">邀请人手机号<span
+									class="fc-ED301D fs-32">*</span></view>
+							<input class="wow animate__animated animate__bounceInRight" v-model="fromData.inviter_phone"
+								type="number" placeholder="请输入邀请人的手机号">
 						</view>
-						
-						<view class="save-box wow animate__animated animate__bounceInUp" @click="save()">提交</view>
+
+						<view class="save-box wow animate__animated animate__bounceInUp" @click.stop="save()">提交</view>
 					</view>
 				</view>
 			</swiper-item>
@@ -107,27 +154,30 @@
 
 </template>
 <script>
-import {getJsConfig, userParticipation} from '@/api/user.js';
+	import {
+		getJsConfig,
+		userParticipation
+	} from '@/api/user.js';
 	import tools from "@/service/tools";
-import wxJs from "jweixin-module"
+	import wxJs from "jweixin-module"
 	export default {
 		components: {},
 		data() {
 			return {
-				userName:'',
-				fromData:{
-					m_id:'',
-					name:'',
-					phone:'',
-					corporate:'',
-					inviter:'',//邀请人
-					inviter_phone:'',
+				userName: '',
+				fromData: {
+					m_id: '',
+					name: '',
+					phone: '',
+					corporate: '',
+					inviter: '', //邀请人
+					inviter_phone: '',
 				},
-				isAJAX:false,
-				index:0,
-        audioServe:undefined,
-        isPlay:false,
-        isAutoPlay:false,
+				isAJAX: false,
+				index: 0,
+				audioServe: undefined,
+				isPlay: false,
+				isAutoPlay: false,
 			}
 		},
 		onshow() {
@@ -135,128 +185,128 @@ import wxJs from "jweixin-module"
 		},
 		mounted() {
 			this.userName = uni.getStorageSync('userName');
-      let isWeiXin = tools.isWx();
-      if(isWeiXin){
-        this.getJsConfig()
-      }
-      this.musicPlay()
+			let isWeiXin = tools.isWx();
+			if (isWeiXin) {
+				this.getJsConfig()
+			}
+			this.musicPlay()
 		},
 		methods: {
-      musicPlay() {
-        if (!this.audioServe) {
-          this.audioServe = uni.createInnerAudioContext();
-          this.audioServe.autoplay = true;
-          this.audioServe.loop = true;
-          this.audioServe.obeyMuteSwitch = true;
-          this.audioServe.src = 'https://jhnewshop.oss-cn-chengdu.aliyuncs.com/RockHouseJail.mp3';
-        }
-        this.audioServe.play();
-        this.audioServe.onPlay(() => {
-          this.isPlay = true;
-          this.isAutoPlay = true
-        })
-
-      },
-      play(){
-       if(!this.isPlay && this.audioServe){
-         this.audioServe.play();
-         this.audioServe.onPlay(() => {
-           this.isPlay = true;
-           this.isAutoPlay = true
-         })
-       }
-      },
-      musicPause() {
-        if (this.audioServe) {
-          this.audioServe.pause();
-          this.audioServe.onPause(() => {
-            this.isPlay = false;
-          });
-        }
-
-      },
-      getJsConfig(){
-        console.log(window.location)
-        let url = window.location.href.split('#')[0];
-        getJsConfig({
-          'url': url
-        }).then(res=>{
-          if (res.code===1){
-            wxJs.config({
-              debug: false,
-              appId: res.data.appid,
-              nonceStr: res.data.noncestr,
-              signature: res.data.signature,
-              timestamp: res.data.timestamp * 1, // 必填，生成签名的时间戳
-              jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData']
-            })
-            wxJs.ready(() => {
-              //自定义“分享给朋友”
-              // this.musicPlay()
-              wxJs.updateAppMessageShareData({
-                title: '利用互联网模式，让传统代理商实现10倍收益',
-                desc: '振合网实体联盟全国招商中',
-                link: "https://enroll.jhcs888.com/#/" , // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
-                imgUrl: 'https://jhnewshop.oss-cn-chengdu.aliyuncs.com/storage/attest/20210927/949e48fb7c286836097efdd4ba4d0bd9.jpg', // 分享图标
-                success: function() {
-                  // 设置成功
-                }
-              })
-              //自定义“分享到朋友圈”
-              wxJs.updateTimelineShareData({
-                title: '利用互联网模式，让传统代理商实现10倍收益', // 分享标题
-                desc: '振合网实体联盟全国招商中',
-                link: "https://enroll.jhcs888.com/#/", // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
-                imgUrl: 'https://jhnewshop.oss-cn-chengdu.aliyuncs.com/storage/attest/20210927/949e48fb7c286836097efdd4ba4d0bd9.jpg', // 分享图标
-                success: function() {
-                  // 设置成功
-                }
-              })
-            });
-          }
-        })
-      },
+			musicPlay() {
+				if (!this.audioServe) {
+					this.audioServe = uni.createInnerAudioContext();
+					this.audioServe.autoplay = true;
+					this.audioServe.loop = true;
+					this.audioServe.obeyMuteSwitch = true;
+					this.audioServe.src = 'https://jhnewshop.oss-cn-chengdu.aliyuncs.com/RockHouseJail.mp3';
+				}
+				this.audioServe.play();
+				this.audioServe.onPlay(() => {
+					this.isPlay = true;
+					this.isAutoPlay = true
+				})
+
+			},
+			play() {
+				if (!this.isPlay && this.audioServe) {
+					this.audioServe.play();
+					this.audioServe.onPlay(() => {
+						this.isPlay = true;
+						this.isAutoPlay = true
+					})
+				}
+			},
+			musicPause() {
+				if (this.audioServe) {
+					this.audioServe.pause();
+					this.audioServe.onPause(() => {
+						this.isPlay = false;
+					});
+				}
+
+			},
+			getJsConfig() {
+				console.log(window.location)
+				let url = window.location.href.split('#')[0];
+				getJsConfig({
+					'url': url
+				}).then(res => {
+					if (res.code === 1) {
+						wxJs.config({
+							debug: false,
+							appId: res.data.appid,
+							nonceStr: res.data.noncestr,
+							signature: res.data.signature,
+							timestamp: res.data.timestamp * 1, // 必填，生成签名的时间戳
+							jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData']
+						})
+						wxJs.ready(() => {
+							//自定义“分享给朋友”
+							// this.musicPlay()
+							wxJs.updateAppMessageShareData({
+								title: '利用互联网模式，让传统代理商实现10倍收益',
+								desc: '振合网实体联盟全国招商中',
+								link: "https://enroll.jhcs888.com/#/", // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
+								imgUrl: 'https://jhnewshop.oss-cn-chengdu.aliyuncs.com/storage/attest/20210927/949e48fb7c286836097efdd4ba4d0bd9.jpg', // 分享图标
+								success: function() {
+									// 设置成功
+								}
+							})
+							//自定义“分享到朋友圈”
+							wxJs.updateTimelineShareData({
+								title: '利用互联网模式，让传统代理商实现10倍收益', // 分享标题
+								desc: '振合网实体联盟全国招商中',
+								link: "https://enroll.jhcs888.com/#/", // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
+								imgUrl: 'https://jhnewshop.oss-cn-chengdu.aliyuncs.com/storage/attest/20210927/949e48fb7c286836097efdd4ba4d0bd9.jpg', // 分享图标
+								success: function() {
+									// 设置成功
+								}
+							})
+						});
+					}
+				})
+			},
 			playPhone() {
 				uni.makePhoneCall({
 					phoneNumber: '023-67177907'
 				});
 			},
-			
-			swiperChange(e){
-        this.play()
-				if(e.detail.current!=this.index){
+
+			swiperChange(e) {
+				this.play()
+				if (e.detail.current != this.index) {
 					this.index = e.detail.current;
 				}
 			},
-			toMap(){
+			toMap() {
 				uni.openLocation({
-				  latitude: 29.665085,
-				  longitude: 106.615366,
-				  scale: 18,
-				  name: '重庆丽星君顿酒店',
-				  address: '重庆市渝北区服装城大道48号',
-				  success() {},
-				  fail(error) {}
+					latitude: 29.665085,
+					longitude: 106.615366,
+					scale: 18,
+				 name: '重庆丽星君顿酒店',
+					address: '重庆市渝北区服装城大道48号',
+					success() {},
+				 fail(error) {}
 				});
 			},
-			save(){
-				if(this.isAJAX){
+			save() {
+				if (this.isAJAX) {
 					return
 				}
 				this.isAJAX = true;
 				this.fromData.m_id = uni.getStorageSync('m_id');
-				userParticipation(this.fromData).then((res)=>{
-					if(res.code === 1){
+				userParticipation(this.fromData).then((res) => {
+					if (res.code === 1) {
 						tools.success('预约成功')
 						this.fromData = {
-							m_id:'',
-							name:'',
-							phone:'',
-							corporate:'',
-							inviter:'',//邀请人
-							inviter_phone:'',
+							m_id: '',
+							name: '',
+							phone: '',
+							corporate: '',
+							inviter: '', //邀请人
+							inviter_phone: '',
 						}
-					}else{
+					} else {
 						tools.error(res.msg)
 					}
 					this.isAJAX = false;
@@ -266,66 +316,91 @@ import wxJs from "jweixin-module"
 	}
 </script>
 <style lang="scss" scoped>
-	.index-box{
+	.index-box {
 		background-image: url('@/static/img/c-bg.png');
 		background-size: 100% 100%;
 	}
-	.up-icon{
+
+	.up-icon {
 		width: 64rpx;
 		height: 64rpx;
 		margin: 0 auto;
 	}
-	.swiper{
+
+	.swiper {
 		flex: 1;
 		width: 100%;
 		height: 100%;
-		.swiper-item{
+
+		.swiper-item {
 			width: 100%;
 			height: 100%;
 		}
 	}
-	.logo-img{
+
+	.logo-img {
 		width: 136rpx;
 		height: 79rpx;
 		margin-top: 8rpx;
 	}
-	.music-img{
+
+	.music-img {
 		margin-top: 16rpx;
 		width: 56rpx;
 		height: 56rpx;
 	}
-	.index-1{
-		.img-text{
+
+	.music-anumation {
+		animation: rotation 2s linear infinite;
+	}
+
+	@keyframes rotation {
+		from {
+			transform: rotate(0deg);
+		}
+
+		to {
+			transform: rotate(360deg);
+		}
+	}
+
+	.index-1 {
+		.img-text {
 			width: 384rpx;
 			height: 232rpx;
 			margin: 76rpx auto 36rpx auto;
 		}
-		.img-xian{
+
+		.img-xian {
 			width: 10rpx;
 			height: 174rpx;
 			margin: 0 auto 154rpx auto;
 		}
-		.name-text{
+
+		.name-text {
 			width: 288rpx;
 			height: 32rpx;
 			margin: 0 auto 10rpx auto;
 		}
-		.time-text{
+
+		.time-text {
 			width: 274rpx;
 			height: 37rpx;
 			margin: 0 auto 140rpx auto;
 		}
 	}
-	.index-2{
+
+	.index-2 {
 		width: 686rpx;
 		min-height: 1032rpx;
-		background: rgba(23,49,74,0.51);
+		background: rgba(23, 49, 74, 0.51);
 		border-radius: 12rpx;
-		border: 2rpx solid rgba(51,121,163,0.8);
+		border: 2rpx solid rgba(51, 121, 163, 0.8);
 		margin: 40rpx auto;
 		box-sizing: border-box;
 		padding: 32rpx;
-		input{
+
+		input {
 			width: 622rpx;
 			height: 80rpx;
 			background: #FFFFFF;
@@ -334,10 +409,11 @@ import wxJs from "jweixin-module"
 			padding: 0 20rpx;
 			font-size: 28rpx;
 		}
-		.save-box{
+
+		.save-box {
 			width: 622rpx;
 			height: 80rpx;
-			background: linear-gradient( 90deg, #EBC795 0%, #E3BB83 100%);
+			background: linear-gradient(90deg, #EBC795 0%, #E3BB83 100%);
 			border-radius: 10rpx;
 			text-align: center;
 			line-height: 80rpx;
@@ -345,51 +421,60 @@ import wxJs from "jweixin-module"
 			font-weight: 600;
 			color: #3A2E1C;
 		}
-		.text-img{
+
+		.text-img {
 			width: 302rpx;
 			height: 116rpx;
 			margin: 0 auto 44rpx auto;
 		}
-		.text-box{
+
+		.text-box {
 			line-height: 68rpx;
 			letter-spacing: 4rpx;
 			display: block;
 			text-indent: 72rpx;
 		}
-		.text-img-1{
+
+		.text-img-1 {
 			width: 224rpx;
 			height: 116rpx;
 			margin: 0 auto 44rpx auto;
 		}
-		.text-img-2{
+
+		.text-img-2 {
 			width: 214rpx;
 			height: 116rpx;
 			margin: 0 auto 44rpx auto;
 		}
-		.img-1{
+
+		.img-1 {
 			width: 622rpx;
 			height: 328rpx;
 			border-radius: 10rpx;
 			margin-bottom: 24rpx;
 		}
-		.img-2{
+
+		.img-2 {
 			width: 300rpx;
 			height: 214rpx;
 			margin-bottom: 60rpx;
 		}
-		.img-3{
+
+		.img-3 {
 			width: 622rpx;
 			height: 354rpx;
 			border-radius: 10rpx;
 			margin-bottom: 40rpx;
 		}
-		.b-f{
+
+		.b-f {
 			position: relative;
-			.b-c{
+
+			.b-c {
 				position: absolute;
 				right: 24rpx;
 				bottom: 22rpx;
-				
+
 				width: 172rpx;
 				height: 56rpx;
 				background: #2F80ED;
@@ -401,5 +486,4 @@ import wxJs from "jweixin-module"
 			}
 		}
 	}
-
-</style>
+</style>