Skip to content

E
educationStu
Commit 5bb6ec6e authored by 黄奎's avatar 黄奎
Browse files
Options

页面更新

parent 5837f8f9
Hide whitespace changes
Inline Side-by-side
Showing with 441 additions and 421 deletions
src/components/question/listen.vue
View file @ 5bb6ec6e
...@@ -7,35 +7,40 @@ ...@@ -7,35 +7,40 @@
<van-icon name="cross" size="40rpx" @click="goBack()" /> <van-icon name="cross" size="40rpx" @click="goBack()" />
</template> </template>
<template #title> <template #title>
<text class="Exam_Current">{{current+1}}</text><text class="Exam_Count">/{{Count}}</text> <text class="Exam_Current">{{ current + 1 }}</text>
<text class="Exam_Count">/{{ Count }}</text>
</template> </template>
</van-nav-bar> </van-nav-bar>
<swiper class="swiper-box" :style="{height: `calc(100vh - 180rpx)`}" :current="current" @change="onchange"> <swiper class="swiper-box" :style="{ height: `calc(100vh - 180rpx)` }" :current="current" @change="onchange">
<swiper-item v-for="(item1, index1) in dataList" :key="index1"> <swiper-item v-for="(item1, index1) in dataList" :key="index1">
<view class="My_listen" @click="play(item1.Src)"> <view class="My_listen" @click="play(item1.Src)">
<i class="icon_audio_default" v-if="!isPlay"></i> <i class="icon_audio_default" v-if="!isPlay"></i>
<i class="icon_audio_playing" v-else></i> <i class="icon_audio_playing" v-else></i>
</view> </view>
<view class="showtime">
<view class="">当前时长:{{ currentTime }}s /</view>
<view class="">总时长:{{ duration }}s</view>
</view>
<view class="item1" :style="{ height: `calc(100vh - 480rpx)` }"> <view class="item1" :style="{ height: `calc(100vh - 480rpx)` }">
<template v-if="item1.StudentAnswer.length<item1.QuestionContentObj.length"> <template v-if="item1.StudentAnswer.length < item1.QuestionContentObj.length">
<view class="questionView"> <view class="questionView">
<view v-for="(item2, index2) in item1.QuestionContentObj" :key="index2" class="item2"> <view v-for="(item2, index2) in item1.QuestionContentObj" :key="index2" class="item2">
<view class="flex questionTitle"> <view class="flex questionTitle">
<view>{{ index2 + 1 }}、({{item2.QuestionName.slice(0, 2)}})</view> <view>{{ index2 + 1 }}、({{ item2.QuestionName.slice(0, 2) }})</view>
<view v-html="item2.SubTitle"></view> <view v-html="item2.SubTitle"></view>
</view> </view>
<view v-for="(item3, index3) in item2.SubAnwser" :key="index3"> <view v-for="(item3, index3) in item2.SubAnwser" :key="index3">
<!-- 单选 、判断--> <!-- 单选 、判断-->
<view class="flex flex_start_center item3" <view class="flex flex_start_center item3" v-if="item2.QuestionKey === 'single'">
v-if="item2.QuestionKey === 'single'"> <view class="chooseNum" :class="{ myAnswer: item1.StudentAnswer[index2] == item3.Name }" @click="singerChange(item1, index2, item3)">
<view class="chooseNum" {{ item3.Name }}
:class="{ 'myAnswer': item1.StudentAnswer[index2]==item3.Name }"
@click="singerChange(item1, index2, item3)">{{ item3.Name }}
</view>
<view class="chooseName"
:class="{ 'myAnswer': item1.StudentAnswer[index2]==item3.Name }"
@click="singerChange(item1, index2, item3)" v-html="item3.Content">
</view> </view>
<view
class="chooseName"
:class="{ myAnswer: item1.StudentAnswer[index2] == item3.Name }"
@click="singerChange(item1, index2, item3)"
v-html="item3.Content"
></view>
</view> </view>
</view> </view>
</view> </view>
...@@ -45,37 +50,34 @@ ...@@ -45,37 +50,34 @@
<view class="questionView"> <view class="questionView">
<view v-for="(item2, index2) in item1.QuestionContentObj" :key="index2" class="item2"> <view v-for="(item2, index2) in item1.QuestionContentObj" :key="index2" class="item2">
<view class="flex questionTitle"> <view class="flex questionTitle">
<view>{{ index2 + 1 }}、({{item2.QuestionName.slice(0, 2)}})</view> <view>{{ index2 + 1 }}、({{ item2.QuestionName.slice(0, 2) }})</view>
<view v-html="item2.SubTitle"></view> <view v-html="item2.SubTitle"></view>
</view> </view>
<view v-for="(item3, index3) in item2.SubAnwser" :key="index3"> <view v-for="(item3, index3) in item2.SubAnwser" :key="index3">
<!-- 单选 、判断--> <!-- 单选 、判断-->
<view class="flex flex_start_center item3" <view class="flex flex_start_center item3" v-if="item2.QuestionKey === 'single'">
v-if="item2.QuestionKey === 'single'"> <view class="chooseNum" :class="{ isRightAnswer: item3.IsAnswer, isNotRightAnswer: getErrorAnswer(item1, index2, item3.Name) }">
<view class="chooseNum"
:class="{ 'isRightAnswer': item3.IsAnswer,'isNotRightAnswer':getErrorAnswer(item1,index2,item3.Name)}">
{{ item3.Name }} {{ item3.Name }}
</view> </view>
<view class="chooseName" <view
:class="{ 'isRightText': item3.IsAnswer,'isNotAnswer':getErrorAnswer(item1,index2,item3.Name)}" class="chooseName"
v-html="item3.Content"></view> :class="{ isRightText: item3.IsAnswer, isNotAnswer: getErrorAnswer(item1, index2, item3.Name) }"
v-html="item3.Content"
></view>
</view> </view>
</view> </view>
<view class="AnswerContent"> <view class="AnswerContent">
<view> <view>
<text style="color: #8c8a94">正确答案：</text> <text style="color: #8c8a94">正确答案：</text>
<text class="isTrueAnswer">{{item1.QuestionAnswerList[index2]}}</text>， <text class="isTrueAnswer">{{ item1.QuestionAnswerList[index2] }}</text>
，
<text> <text>
您的答案： 您的答案：
<template v-if="item1.StudentAnswer.length>0"> <template v-if="item1.StudentAnswer.length > 0">
<text <text v-if="item1.StudentAnswer[index2] == item1.QuestionAnswerList[index2]" class="isTrueAnswer">
v-if="item1.StudentAnswer[index2] == item1.QuestionAnswerList[index2]"
class="isTrueAnswer">
{{ item1.StudentAnswer[index2] }}，回答正确 {{ item1.StudentAnswer[index2] }}，回答正确
</text> </text>
<text v-else class="isNotAnswer"> <text v-else class="isNotAnswer">{{ item1.StudentAnswer[index2] }}，回答错误</text>
{{ item1.StudentAnswer[index2] }}，回答错误
</text>
</template> </template>
<template v-else> <template v-else>
<text class="isNotAnswer">未回答</text> <text class="isNotAnswer">未回答</text>
...@@ -84,8 +86,7 @@ ...@@ -84,8 +86,7 @@
</view> </view>
</view> </view>
</view> </view>
<view style="word-wrap: break-word; margin-bottom:30rpx;display: flex;" <view style="word-wrap: break-word; margin-bottom:30rpx;display: flex;" class="AnswerContent" v-if="item1.AnswerParse">
class="AnswerContent" v-if="item1.AnswerParse">
<text style="color: #8c8a94;flex-shrink: 0;">解析：</text> <text style="color: #8c8a94;flex-shrink: 0;">解析：</text>
<view style="color: #000" v-html="item1.AnswerParse"></view> <view style="color: #000" v-html="item1.AnswerParse"></view>
</view> </view>
...@@ -93,9 +94,10 @@ ...@@ -93,9 +94,10 @@
</template> </template>
</view> </view>
<view class="AnswerBtn clear" style="display:none"> <view class="AnswerBtn clear" style="display:none">
<view class="AnswerBtnFirst" @click="getBeforeExam()" v-if="current!=0">上一题</view> <view class="AnswerBtnFirst" @click="getBeforeExam()" v-if="current != 0">上一题</view>
<view class="AnswerBtnSecond" :class="{'isCanNext':item1.StudentAnswer.length==0}" <view class="AnswerBtnSecond" :class="{ isCanNext: item1.StudentAnswer.length == 0 }" v-if="current != dataList.length" @click="getNextExam(item1)">
v-if="current!=dataList.length" @click="getNextExam(item1)">下一题</view> 下一题
</view>
</view> </view>
</swiper-item> </swiper-item>
</swiper> </swiper>
...@@ -104,410 +106,428 @@ ...@@ -104,410 +106,428 @@
</template> </template>
<script> <script>
import { import { ref, reactive, toRefs, toRef, getCurrentInstance, watch, computed, onMounted, onUnmounted } from 'vue';
ref, const innerAudioContext = uni.createInnerAudioContext();
reactive, innerAudioContext.autoplay = false;
toRefs, const bgAudioManager = uni.getBackgroundAudioManager();
toRef, import { SetStudentPractice } from '../../api/exam';
getCurrentInstance,
watch, export default {
computed, props: {
onMounted, paperData: Array,
onUnmounted, Count: Number,
} from "vue"; Times: Number,
const innerAudioContext = uni.createInnerAudioContext(); StartIndex: Number
innerAudioContext.autoplay = false; },
const bgAudioManager = uni.getBackgroundAudioManager(); setup(props, context) {
import { let { refs } = getCurrentInstance();
SetStudentPractice console.log(163, refs);
} from "../../api/exam"; let data = reactive({
dataList: props.paperData,
export default { current: 0, //默认从第几个开始-用于从快捷菜单点入
props: { statusBarHeight: 0,
paperData: Array, audioAction: {
Count: Number, method: 'pause'
Times: Number, },
StartIndex: Number isIOS: false,
}, isPlay: false,
setup(props, context) { currentTime: 0,
let { duration: 0
refs });
} = getCurrentInstance(); let UserInfo = uni.getStorageSync('userInfo');
console.log(163, refs); let sys = uni.getSystemInfoSync().system;
let data = reactive({ watch(
dataList: props.paperData, () => [...props.paperData],
current: 0, //默认从第几个开始-用于从快捷菜单点入 val => {
statusBarHeight: 0,
audioAction: {
method: "pause"
},
isIOS: false,
isPlay: false
});
let UserInfo = uni.getStorageSync('userInfo');
let sys = uni.getSystemInfoSync().system;
watch(() => [...props.paperData], (val) => {
data.dataList = [...data.dataList, ...val]; data.dataList = [...data.dataList, ...val];
}) }
// watch(()=>props.StartIndex,(val)=>{ );
// if(val>-1){ // watch(()=>props.StartIndex,(val)=>{
// data.current=val; // if(val>-1){
// } // data.current=val;
// }) // }
watch(()=>data.current, (newVal, oldValue) => { // })
innerAudioContext.stop(); watch(
data.isPlay=false; () => data.current,
},{deep:true}); (newVal, oldValue) => {
let methods = { innerAudioContext.stop();
//阻止手动滑动 data.isPlay = false;
stopTouchMove() { innerAudioContext.src = data.dataList[newVal].Src;
data.duration = innerAudioContext.duration.toFixed(0);
},
{ deep: true }
);
let methods = {
//阻止手动滑动
stopTouchMove() {
return true;
},
jumpPage() {
uni.navigateTo({
url: '/pages/exam/examPaper'
});
},
goBack() {
uni.navigateBack();
},
//----------------------------------------选题----------------------------------
// 单选
singerChange(item1, index, item3) {
item1.StudentAnswer[index] = item3.Name;
if (item1.StudentAnswer.length == item1.QuestionAnswerList.length) {
this.getNextExam();
}
},
getErrorAnswer(item1, index, name) {
if (item1.StudentAnswer[index] == name) {
return true; return true;
}, } else {
jumpPage() { return false;
uni.navigateTo({ }
url: "/pages/exam/examPaper", },
}); onchange(e) {
}, data.currentTime = 0;
goBack() { data.duration = 0;
uni.navigateBack(); data.current = e.detail.current;
}, data.isPlay = false;
//----------------------------------------选题---------------------------------- if (data.current + 1 == data.dataList.length) {
// 单选 this.$emit('getAfter');
singerChange(item1, index, item3) { }
item1.StudentAnswer[index] = item3.Name; },
if (item1.StudentAnswer.length == item1.QuestionAnswerList.length) { play(Src) {
this.getNextExam(); if (data.isPlay) {
} innerAudioContext.pause();
}, data.isPlay = false;
getErrorAnswer(item1, index, name) { } else {
if (item1.StudentAnswer[index] == name) { innerAudioContext.src = Src;
return true innerAudioContext.play();
} else { data.isPlay = true;
return false innerAudioContext.onEnded(e => {
}
},
onchange(e) {
data.current = e.detail.current;
if (data.current + 1 == data.dataList.length) {
this.$emit('getAfter');
}
},
play(Src) {
if (data.isPlay) {
innerAudioContext.pause();
data.isPlay = false; data.isPlay = false;
} else { });
innerAudioContext.src = Src; const time = setInterval(() => {
innerAudioContext.play() data.currentTime = innerAudioContext.currentTime.toFixed(0); //当前播放位置
data.isPlay = true; data.duration = innerAudioContext.duration.toFixed(0); //音频总长度
innerAudioContext.onEnded((e) => { if (!data.isPlay) {
data.isPlay = false; clearInterval(time);
})
}
},
//点击上一题
getBeforeExam() {
data.current = data.current - 1;
},
//点击下一题
getNextExam(item) {
let msg = {
Id: 0,
StudentId: UserInfo.AccountId,
Category: data.dataList[data.current].Category,
QuestionId: data.dataList[data.current].QuestionId,
Title: data.dataList[data.current].Title,
QuestionContent: data.dataList[data.current].QuestionContentObj,
QuestionTypeId: data.dataList[data.current].QuestionTypeId,
QuestionTypeKey: data.dataList[data.current].QuestionTypeKey,
StudentAnswer: data.dataList[data.current].StudentAnswer,
AnswerParse: data.dataList[data.current].AnswerParse,
LevelType: data.dataList[data.current].LevelType,
Answer: data.dataList[data.current].QuestionAnswerList.toString(),
IsAnswer: 0,
IsWrong: 0,
Times: props.Times
}
if (data.dataList[data.current].StudentAnswer.length > 0) {
msg.IsAnswer = 1;
} else {
msg.IsAnswer = 0;
}
if (data.dataList[data.current].StudentAnswer.length == data.dataList[data.current]
.QuestionAnswerList.length) {
if (data.dataList[data.current].StudentAnswer.toString() == data.dataList[data.current]
.QuestionAnswerList.toString()) {
msg.IsWrong = 0
} else {
msg.IsWrong = 1
} }
}, 500);
}
},
//点击上一题
getBeforeExam() {
data.current = data.current - 1;
data.currentTime = 0;
data.duration = 0;
},
//点击下一题
getNextExam(item) {
data.currentTime = 0;
data.duration = 0;
let msg = {
Id: 0,
StudentId: UserInfo.AccountId,
Category: data.dataList[data.current].Category,
QuestionId: data.dataList[data.current].QuestionId,
Title: data.dataList[data.current].Title,
QuestionContent: data.dataList[data.current].QuestionContentObj,
QuestionTypeId: data.dataList[data.current].QuestionTypeId,
QuestionTypeKey: data.dataList[data.current].QuestionTypeKey,
StudentAnswer: data.dataList[data.current].StudentAnswer,
AnswerParse: data.dataList[data.current].AnswerParse,
LevelType: data.dataList[data.current].LevelType,
Answer: data.dataList[data.current].QuestionAnswerList.toString(),
IsAnswer: 0,
IsWrong: 0,
Times: props.Times
};
if (data.dataList[data.current].StudentAnswer.length > 0) {
msg.IsAnswer = 1;
} else {
msg.IsAnswer = 0;
}
if (data.dataList[data.current].StudentAnswer.length == data.dataList[data.current].QuestionAnswerList.length) {
if (data.dataList[data.current].StudentAnswer.toString() == data.dataList[data.current].QuestionAnswerList.toString()) {
msg.IsWrong = 0;
} else {
msg.IsWrong = 1;
} }
let res = SetStudentPractice(msg).then(res => { }
if (res) { let res = SetStudentPractice(msg).then(res => {
if (res.Code == 1) { if (res) {
if (res.Code == 1) {
}
} }
});
if(msg.IsWrong == 0){
data.current = data.current + 1;
innerAudioContext.stop();
data.isPlay = false;
} }
}, });
}; if (msg.IsWrong == 0) {
onMounted(() => { data.current = data.current + 1;
data.statusBarHeight = uni.getSystemInfoSync().statusBarHeight; innerAudioContext.stop();
}); data.isPlay = false;
onUnmounted(() => { }
innerAudioContext.stop(); }
data.isPlay = true; };
}); onMounted(() => {
let that = methods; data.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
return { });
...toRefs(data), onUnmounted(() => {
...methods, data.currentTime = 0;
}; data.duration = 0;
}, innerAudioContext.stop();
}; data.isPlay = true;
});
let that = methods;
return {
...toRefs(data),
...methods
};
}
};
</script> </script>
<style scoped> <style scoped>
.AnswerBtn { swiper-item {
margin-top: 38rpx; overflow-y: scroll;
/* position: absolute; */ }
} .showtime {
height: 30px;
.clear { display: flex;
clear: both; justify-content: center;
} align-items: center;
}
.AnswerBtnFirst { .AnswerBtn {
width: 250rpx; margin-top: 38rpx;
height: 60rpx; /* position: absolute; */
text-align: center; }
line-height: 60rpx;
border-radius: 10rpx; .clear {
border: 1px solid #00acf9; clear: both;
color: #00acf9; }
float: left;
} .AnswerBtnFirst {
width: 250rpx;
.AnswerBtnSecond { height: 60rpx;
width: 250rpx; text-align: center;
height: 60rpx; line-height: 60rpx;
text-align: center; border-radius: 10rpx;
line-height: 60rpx; border: 1px solid #00acf9;
border-radius: 10rpx; color: #00acf9;
background-color: #00acf9; float: left;
color: #fff; }
float: right;
} .AnswerBtnSecond {
width: 250rpx;
.name { height: 60rpx;
height: 90rpx; text-align: center;
font-size: 30rpx; line-height: 60rpx;
font-family: PingFang SC; border-radius: 10rpx;
font-weight: 800; background-color: #00acf9;
color: #111111; color: #fff;
display: flex; float: right;
align-items: center; }
justify-content: space-between;
} .name {
height: 90rpx;
.isRightAnswer { font-size: 30rpx;
background-color: green !important; font-family: PingFang SC;
color: #fff !important; font-weight: 800;
} color: #111111;
display: flex;
.isRightText { align-items: center;
color: green !important; justify-content: space-between;
} }
.isTrueAnswer { .isRightAnswer {
color: green !important; background-color: green !important;
} color: #fff !important;
}
.isNotRightAnswer {
background-color: red; .isRightText {
color: #fff !important; color: green !important;
} }
.isNotAnswer { .isTrueAnswer {
color: red; color: green !important;
} }
.AnswerContent { .isNotRightAnswer {
font-size: 30rpx; background-color: red;
padding: 25rpx; color: #fff !important;
background-color: #f4f4f4; }
border-radius: 5px;
} .isNotAnswer {
color: red;
.swiper-box { }
box-sizing: border-box;
position: relative; .AnswerContent {
} font-size: 30rpx;
padding: 25rpx;
.num { background-color: #f4f4f4;
font-size: 30rpx; border-radius: 5px;
font-family: PingFang SC; }
color: #111111;
} .swiper-box {
box-sizing: border-box;
.item { position: relative;
position: relative; }
}
.num {
.item1 { font-size: 30rpx;
align-items: center; font-family: PingFang SC;
overflow-y: auto; color: #111111;
margin-top: 30rpx; }
}
.item {
.questionView { position: relative;
overflow-y: auto; }
z-index: 999;
} .item1 {
align-items: center;
.audioBox { /* overflow-y: auto; */
width: 120rpx; margin-top: 30rpx;
height: 30rpx; }
background: #b4ddfe;
border: 1px solid #35b4fb; .questionView {
border-radius: 4rpx; overflow-y: auto;
font-size: 22rpx; z-index: 999;
font-family: PingFang SC; }
font-weight: 500;
color: #00acf9; .audioBox {
} width: 120rpx;
height: 30rpx;
.item2 { background: #b4ddfe;
box-sizing: border-box; border: 1px solid #35b4fb;
margin: 30rpx 0; border-radius: 4rpx;
/* padding: 0 30rpx; */ font-size: 22rpx;
} font-family: PingFang SC;
font-weight: 500;
.item3 { color: #00acf9;
padding-left: 25rpx; }
margin: 20rpx 0;
} .item2 {
box-sizing: border-box;
.myAnswer { margin: 30rpx 0;
background-color: #00acf9 !important; /* padding: 0 30rpx; */
color: #ffffff !important; }
}
.item3 {
.chooseNum { padding-left: 25rpx;
width: 50rpx; margin: 20rpx 0;
height: 50rpx; }
text-align: center;
line-height: 50rpx; .myAnswer {
border-radius: 50%; background-color: #00acf9 !important;
border: 1px solid #e2e2e2; color: #ffffff !important;
margin-right: 30rpx; }
font-size: 30rpx;
font-family: PingFang SC; .chooseNum {
font-weight: bold; width: 50rpx;
color: #111111; height: 50rpx;
} text-align: center;
line-height: 50rpx;
.chooseName { border-radius: 50%;
font-size: 30rpx; border: 1px solid #e2e2e2;
font-family: PingFang SC; margin-right: 30rpx;
font-weight: 500; font-size: 30rpx;
color: #111111; font-family: PingFang SC;
} font-weight: bold;
color: #111111;
.chooseName2 { }
flex-grow: 1;
border-bottom: 1px solid #111; .chooseName {
} font-size: 30rpx;
font-family: PingFang SC;
.questionTitle { font-weight: 500;
font-size: 28rpx; color: #111111;
font-family: PingFang SC; }
font-weight: bold;
color: #111111; .chooseName2 {
} flex-grow: 1;
border-bottom: 1px solid #111;
.listen .van-count-down { }
font-size: 22rpx !important;
color: #00acf9 !important; .questionTitle {
} font-size: 28rpx;
font-family: PingFang SC;
.Exam_Current { font-weight: bold;
font-size: 35rpx; color: #111111;
color: red; }
}
.listen .van-count-down {
.Exam_Count { font-size: 22rpx !important;
color: gray; color: #00acf9 !important;
font-size: 26rpx; }
.Exam_Current {
font-size: 35rpx;
color: red;
}
.Exam_Count {
color: gray;
font-size: 26rpx;
}
.Exam_Score {
color: #999999;
font-size: 28rpx;
}
.isCanNext {
background-color: gray !important;
}
.icon_audio_default {
background: transparent url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/iconloop.png') no-repeat 0 0;
width: 18px;
height: 25px;
vertical-align: middle;
display: inline-block;
-webkit-background-size: 54px 25px;
background-size: 54px 25px;
background-position: -36px center;
}
.icon_audio_playing {
background: transparent url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/iconloop.png') no-repeat 0 0;
width: 18px;
height: 25px;
vertical-align: middle;
display: inline-block;
-webkit-background-size: 54px 25px;
background-size: 54px 25px;
-webkit-animation: audio_playing 1s infinite;
background-position: 0px center;
}
@-webkit-keyframes audio_playing {
30% {
background-position: 0px center;
} }
.Exam_Score { 31% {
color: #999999; background-position: -18px center;
font-size: 28rpx;
} }
.isCanNext { 61% {
background-color: gray !important; background-position: -18px center;
} }
.icon_audio_default { 61.5% {
background: transparent url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/iconloop.png') no-repeat 0 0;
width: 18px;
height: 25px;
vertical-align: middle;
display: inline-block;
-webkit-background-size: 54px 25px;
background-size: 54px 25px;
background-position: -36px center; background-position: -36px center;
} }
.icon_audio_playing { 100% {
background: transparent url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/iconloop.png') no-repeat 0 0; background-position: -36px center;
width: 18px;
height: 25px;
vertical-align: middle;
display: inline-block;
-webkit-background-size: 54px 25px;
background-size: 54px 25px;
-webkit-animation: audio_playing 1s infinite;
background-position: 0px center;
}
@-webkit-keyframes audio_playing {
30% {
background-position: 0px center;
}
31% {
background-position: -18px center;
}
61% {
background-position: -18px center;
}
61.5% {
background-position: -36px center;
}
100% {
background-position: -36px center;
}
}
.My_listen {
width: 150rpx;
height: 150rpx;
background-color: #E4E5FB;
border-radius: 50%;
margin: 0 auto 30rpx;
display: flex;
justify-content: center;
align-items: center;
} }
}
.My_listen {
width: 150rpx;
height: 150rpx;
background-color: #e4e5fb;
border-radius: 50%;
margin: 0 auto 30rpx;
display: flex;
justify-content: center;
align-items: center;
}
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment