Browse Source

Merge branch 'master' of http://git.jhcs888.com/zpj/zh-new-promotion

# Conflicts:
#	pages/index/index.vue
zpj 2 năm trước cách đây
mục cha
commit
d5b7a2f18a
1 tập tin đã thay đổi với 191 bổ sung và 261 xóa
  1. 191 261
      pages/index/index.vue

+ 191 - 261
pages/index/index.vue

@@ -1,151 +1,104 @@
 <template>
-	<view class="index-box box-border-box flex-common-css">
+	<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" :class="isPlay?'music-anumation':''" src="@/static/img/c-music.png" @click.stop="musicPause()" mode="scaleToFill"></image>
+			<!-- <image class="music-img" src="@/static/img/c-music.png" mode="scaleToFill"></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.stop="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="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.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>
+						<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>
 							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.stop="save()">提交</view>
+						
+						<view class="save-box wow animate__animated animate__bounceInUp" @click="save()">提交</view>
 					</view>
 				</view>
 			</swiper-item>
@@ -154,30 +107,27 @@
 
 </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() {
@@ -185,120 +135,128 @@
 		},
 		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
-				})
+      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
+        })
 
-			},
-			musicPause() {
-				if (this.audioServe) {
-					this.audioServe.pause();
-					this.audioServe.onPause(() => {
-						this.isPlay = false;
-					});
-				}else{
-					this.musicPlay();
-				}
+      },
+      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() {
-									// 设置成功
-								}
-							})
-						});
-					}
-				})
-			},
+      },
+      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) {
-				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;
@@ -308,85 +266,66 @@
 	}
 </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;
 	}
-	.music-anumation{
-		animation: rotation 2s linear infinite;
-	}
-	
-	@keyframes rotation {
-	  from { transform: rotate(0deg); }
-	  to { transform: rotate(360deg); }
-	}
-
-	.index-1 {
-		.img-text {
+	.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;
@@ -395,11 +334,10 @@
 			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;
@@ -407,60 +345,51 @@
 			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;
@@ -472,4 +401,5 @@
 			}
 		}
 	}
-</style>
+
+</style>