mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-mobile.git
synced 2025-12-12 20:36:46 +08:00
767 lines
19 KiB
Vue
767 lines
19 KiB
Vue
<template>
|
|
<view class="learn_path">
|
|
<view class="path_header">
|
|
<view class="text">{{$route.query.name}}</view>
|
|
</view>
|
|
<view class="path_body" :style="{height:dataList.length<=7?'93vh':''}">
|
|
<view class="body_header">
|
|
<view class="left" @click="goAllPath">全岗位路径</view>
|
|
<view class="right">
|
|
<u-switch size="14" v-model="openDown"></u-switch>
|
|
<text class="text">高亮显示未完成</text>
|
|
</view>
|
|
</view>
|
|
<view class="body_check">
|
|
<view class="left_check">
|
|
<view class="left"></view>
|
|
<view class="text">必修</view>
|
|
</view>
|
|
<view class="right_check">
|
|
<view class="right"></view>
|
|
<view class="text">选修</view>
|
|
</view>
|
|
</view>
|
|
<view class="end_learn">您的学习之旅已结束</view>
|
|
<view :class="dataList.length<=7?'learn':'learn14'">
|
|
<view v-for="(item,index) in dataList" :key="index">
|
|
<view @click="showPopup(index)" class="learn_item" :style="{
|
|
backgroundColor: getColor(item.flag, (notColor.length>0?
|
|
(notColor.includes(item.id)?4:item.id == istabId?flagToggle:0):item.id == istabId?flagToggle:0)),
|
|
left: getPosition(item.name, index).left + 'rpx',
|
|
top: getPosition(item.name, index).top + 'rpx'
|
|
}">
|
|
<view class="icon">
|
|
<view v-if="item.currentRatio!=100" class="icon-content" :style="{ background: getColor(item.flag, (notColor.length>0?
|
|
(notColor.includes(item.id)?4:item.id == istabId?flagToggleTwo:1):item.id == istabId?flagToggleTwo:1)) }">
|
|
{{item.currentRatio || 0}}%
|
|
</view>
|
|
<view v-else class="icon-content" :style="{background: getColor(item.flag,1)}">
|
|
<svg style="width: 15px;height: 15px;" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
|
|
<g transform="matrix(1 0 0 1 -583 -2082 )">
|
|
<path d="M 6.163343558282208 9.152636718750001 L 15.538803680981593 0.0888671875 L 17.948926380368096 2.536132812499999 L 6.189570552147239 13.903613281250001 L 0.022776073619630802 8.07119140625 L 2.406671779141104 5.599316406250001 L 6.163343558282208 9.152636718750001 Z " fill-rule="nonzero" fill="#ffffff" stroke="none" transform="matrix(1 0 0 1 583 2082 )" />
|
|
</g>
|
|
</svg>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view @click="showPopup(index)" class="learn_text" :style="{
|
|
left: getPositionText(item.name, index).left + 'rpx',
|
|
top: getPositionText(item.name, index).top + 'rpx'
|
|
}">
|
|
{{item.title}}
|
|
</view>
|
|
</view>
|
|
<view v-if="dataList.length<=7" class="text_start">开启您的学习之旅</view>
|
|
</view>
|
|
</view>
|
|
<u-popup mode="center" v-if="currentItem !== null" :show="currentItem.show" @close="closePopup">
|
|
<view class="popup_item">
|
|
<view class="item_name">{{ currentItem.title }}</view>
|
|
<view class="tabs">
|
|
<view :class="currentItem.flag == 0 ?'flag':'flag2'">
|
|
{{currentItem.flag == 0 ? '选修' : '必修'}}
|
|
</view>
|
|
<view class="type">{{currentItem.type==5?'考试':currentItem.type==1?'在线':''}}</view>
|
|
</view>
|
|
<view class="pregress">
|
|
<view class="text">学习进度</view>
|
|
<view class="prp">
|
|
<u-line-progress style="width:100%;" :percentage="currentItem.currentRatio" :showText="false" height="5" activeColor="#387DF7 ">
|
|
|
|
</u-line-progress>
|
|
<view class="text">{{currentItem.currentRatio || 0}}%</view>
|
|
</view>
|
|
</view>
|
|
<view v-if="currentItem.type==1" class="tea_text">
|
|
<view>课程讲师: {{currentItem.teacherName?currentItem.teacherName.split(',').length > 3
|
|
? currentItem.teacherName.split(',').slice(0, 3).join(',') + '...'
|
|
: currentItem.teacherName:''}}</view>
|
|
<view class="text_tea">课程简介: {{currentItem.introduce}}</view>
|
|
</view>
|
|
<view class="btn" @click="goStudy(currentItem)">
|
|
<view class="text">学习中</view>
|
|
<image class="go" src="@/static/images/go.png" mode=""></image>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { taskList,submitExternalExam } from "@/api/modules/growth.js"
|
|
export default {
|
|
onLoad(options) {
|
|
this.growId = options.growId
|
|
this.titleName = options.name
|
|
},
|
|
data() {
|
|
return {
|
|
istabId: '',
|
|
notColor: [],
|
|
flagToggle: 0,
|
|
flagToggleTwo: 1,
|
|
growId: '',
|
|
titleName: '',
|
|
openDown: false,
|
|
show: false,
|
|
colorAttrValue: {
|
|
0: ['#FFD04B', "#FBA944",'#FFD04B', "#FBA944","#EE423D"],
|
|
1: ["#b8e3b8", "#8ac84a","#b8e3b8","#8ac84a","#EE423D"],
|
|
2: ['#FFD04B', '#FBA944']
|
|
},
|
|
iconAttrs: {
|
|
'路径图背景1':{
|
|
positions: [
|
|
{left: -8,top: 378},
|
|
]
|
|
},
|
|
'路径图背景2':{
|
|
positions: [
|
|
{left: 380,top: 660},
|
|
{left: 46,top: 238},
|
|
]
|
|
},
|
|
'路径图背景3':{
|
|
positions: [
|
|
{left: 416,top: 684},
|
|
{left: -18,top: 412},
|
|
{left: 114,top: 138},
|
|
]
|
|
},
|
|
'路径图背景4':{
|
|
positions: [
|
|
{left: 484,top: 734},
|
|
{left: 14,top: 534},
|
|
{left: 6,top: 332},
|
|
{left: 118,top: 132},
|
|
]
|
|
},
|
|
'路径图背景5':{
|
|
positions: [
|
|
{left: 484,top: 734},
|
|
{left: 14,top: 544},
|
|
{left: 6,top: 354},
|
|
{left: 98,top: 162},
|
|
{left: 344,top: -28},
|
|
]
|
|
},
|
|
'路径图背景6':{
|
|
positions: [
|
|
{left: 504,top: 762},
|
|
{left: 138,top: 602},
|
|
{left: -14,top: 440},
|
|
{left: 26,top: 280},
|
|
{left: 130,top: 118},
|
|
{left: 344,top: -28},
|
|
]
|
|
},
|
|
'路径图背景7':{
|
|
positions: [
|
|
{left: 524,top: 782},
|
|
{left: 138,top: 644},
|
|
{left: -2,top: 506},
|
|
{left: -8,top: 370},
|
|
{left: 54,top: 232},
|
|
{left: 162,top: 84},
|
|
{left: 344,top: -28},
|
|
]
|
|
},
|
|
'路径图背景全':{
|
|
positions: [
|
|
{left: 204,top: 2428},
|
|
{left: 58,top: 2240},
|
|
{left: -14,top: 2052},
|
|
{left: 78,top: 1864},
|
|
{left: 398,top: 1676},
|
|
{left: 580,top: 1488},
|
|
{left: 606,top: 1300},
|
|
{left: 524,top: 1110},
|
|
{left: 306,top: 922},
|
|
{left: 38,top: 734},
|
|
{left: 42,top: 546},
|
|
{left: 102,top: 358},
|
|
{left: 194,top: 170},
|
|
{left: 440,top: -18},
|
|
]
|
|
},
|
|
},
|
|
iconAttrsText: {
|
|
'路径图背景1':{
|
|
positions: [
|
|
{left: 80,top: 386},
|
|
]
|
|
},
|
|
'路径图背景2':{
|
|
positions: [
|
|
{left: 86,top: 668},
|
|
{left: 134,top: 246},
|
|
]
|
|
},
|
|
'路径图背景3':{
|
|
positions: [
|
|
{left: 116,top: 692},
|
|
{left: 70,top: 420},
|
|
{left: 202,top: 146},
|
|
]
|
|
},
|
|
'路径图背景4':{
|
|
positions: [
|
|
{left: 198,top: 742},
|
|
{left: 102,top: 542},
|
|
{left: 94,top: 340},
|
|
{left: 206,top: 140},
|
|
]
|
|
},
|
|
'路径图背景5':{
|
|
positions: [
|
|
{left: 188,top: 742},
|
|
{left: 102,top: 552},
|
|
{left: 94,top: 362},
|
|
{left: 186,top: 170},
|
|
{left: 46,top: -20},
|
|
]
|
|
},
|
|
'路径图背景6':{
|
|
positions: [
|
|
{left: 210,top: 770},
|
|
{left: 226,top: 610},
|
|
{left: 74,top: 448},
|
|
{left: 114,top: 288},
|
|
{left: 218,top: 126},
|
|
{left: 46,top: -20},
|
|
]
|
|
},
|
|
'路径图背景7':{
|
|
positions: [
|
|
{left: 226,top: 790},
|
|
{left: 226,top: 652},
|
|
{left: 86,top: 514},
|
|
{left: 80,top: 378},
|
|
{left: 142,top: 240},
|
|
{left: 250,top: 92},
|
|
{left: 44,top: -20},
|
|
]
|
|
},
|
|
'路径图背景全':{
|
|
positions: [
|
|
{left: 292,top: 2436},
|
|
{left: 146,top: 2248},
|
|
{left: 74,top: 2060},
|
|
{left: 166,top: 1872},
|
|
{left: 100,top: 1684},
|
|
{left: 276,top: 1496},
|
|
{left: 308,top: 1308},
|
|
{left: 222,top: 1118},
|
|
{left: 10,top: 930},
|
|
{left: 126,top: 742},
|
|
{left: 130,top: 554},
|
|
{left: 190,top: 366},
|
|
{left: 282,top: 178},
|
|
{left: 140,top: -10},
|
|
]
|
|
},
|
|
},
|
|
dataList: [],
|
|
currentItem: null,
|
|
}
|
|
},
|
|
mounted() {
|
|
taskList(this.growId).then(res=>{
|
|
if(res.code == 200 ){
|
|
if(res.data.length <= 7){
|
|
this.dataList = res.data.map(item=>({
|
|
title:item.name,
|
|
...item,
|
|
name: '路径图背景' + res.data.length,
|
|
}))
|
|
}else{
|
|
this.dataList = res.data.map(item=>({
|
|
title:item.name,
|
|
...item,
|
|
name: '路径图背景全',
|
|
}))
|
|
}
|
|
const foundItemIndex = this.dataList.findIndex(item => item.currentRatio !== 100);
|
|
if (foundItemIndex !== -1) {
|
|
const scrollTop = this.iconAttrs[this.dataList[0].name].positions[foundItemIndex]
|
|
// 滚动到指定位置
|
|
this.performScroll(scrollTop.top);
|
|
//判断显示提示弹窗
|
|
this.istabId = this.dataList[foundItemIndex].id
|
|
}
|
|
}
|
|
})
|
|
},
|
|
methods: {
|
|
toggleFlag() {
|
|
this.flagToggle = this.flagToggle === 2 ? 3 : 2;
|
|
this.flagToggleTwo = this.flagToggleTwo === 2 ? 3 : 2;
|
|
},
|
|
startToggleInterval() {
|
|
this.intervalId = setInterval(this.toggleFlag, 500);
|
|
},
|
|
async performScroll(scrollTop) {
|
|
await this.$nextTick();
|
|
window.scrollTo({ top: scrollTop, behavior: 'smooth' });
|
|
this.startToggleInterval();
|
|
setTimeout(() => {
|
|
this.explainBody = false
|
|
clearInterval(this.intervalId);
|
|
this.flagToggle = 0
|
|
this.flagToggleTwo = 1
|
|
}, 10000);
|
|
},
|
|
goAllPath(){
|
|
uni.navigateTo({url:'/pages/learnPath/allPath'})
|
|
},
|
|
goStudy(item){
|
|
if(item.type == 1){
|
|
console.log(item,'在线')
|
|
uni.navigateTo({url:"/pages/study/courseStudy?id=" + item.targetId});
|
|
}else if (item.type == 5) {
|
|
if(item.examType != 1){
|
|
submitExternalExam({
|
|
"type": 14,
|
|
"externalId": item.courseId,
|
|
"externalName": item.title,
|
|
"targetId": this.$route.query.growId,
|
|
"studentNo": item.studentNo
|
|
}).then(res=>{
|
|
console.log(res,'res')
|
|
})
|
|
this.$router.push({
|
|
path: '/pages/learnPath/ExamScore',
|
|
query: {
|
|
id: item.id,
|
|
type: 14,
|
|
pName: item.title,
|
|
courseId: item.courseId,
|
|
studentNo: item.studentNo
|
|
}
|
|
})
|
|
return
|
|
}
|
|
console.log(item,'考试')
|
|
uni.navigateTo({url:"/pages/exam/exam?id=" + item.targetId});
|
|
}else{
|
|
console.log(item,'其他')
|
|
}
|
|
},
|
|
showPopup(index) {
|
|
// 设置当前选中的数组元素
|
|
this.currentItem = this.dataList[index];
|
|
// 显示选中元素对应的弹出层
|
|
this.currentItem.show = true;
|
|
},
|
|
closePopup() {
|
|
// 关闭当前弹出层时重置状态
|
|
if (this.currentItem !== null) {
|
|
this.currentItem.show = false;
|
|
this.currentItem = null;
|
|
}
|
|
},
|
|
getColor(status, index) {
|
|
return this.colorAttrValue[status][index]
|
|
},
|
|
getPosition(name, index) {
|
|
return this.iconAttrs[name].positions[index]
|
|
},
|
|
getPositionText(name, index) {
|
|
return this.iconAttrsText[name].positions[index]
|
|
},
|
|
},
|
|
watch: {
|
|
openDown(val){
|
|
if(val){
|
|
const notList = []
|
|
this.dataList.forEach(item => {
|
|
if(item.currentRatio != 100){
|
|
notList.push(item)
|
|
}
|
|
});
|
|
this.notColor = notList.map(item => item.id)
|
|
}else{
|
|
this.notColor = []
|
|
}
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.learn_path{
|
|
background: #387DF7;
|
|
.popup_item{
|
|
width: 90vw;
|
|
.item_name{
|
|
font-weight: 600;
|
|
font-size: 32rpx;
|
|
color: #333333;
|
|
line-height: 44rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
margin: 50rpx 0 38rpx 76rpx;
|
|
}
|
|
.tabs{
|
|
display: flex;
|
|
.flag{
|
|
width: 156rpx;
|
|
height: 60rpx;
|
|
background: #FFF2E8;
|
|
border-radius: 8rpx;
|
|
border: 2rpx solid #FE9C4A;
|
|
margin: 0 24rpx 40rpx 78rpx;
|
|
text-align: center;
|
|
line-height: 60rpx;
|
|
color: #FE9C4A;
|
|
}
|
|
.flag2{
|
|
width: 156rpx;
|
|
height: 60rpx;
|
|
background: #F7FFF5;
|
|
border-radius: 8rpx;
|
|
border: 2rpx solid #31AF0D;
|
|
margin: 0 24rpx 40rpx 78rpx;
|
|
text-align: center;
|
|
line-height: 60rpx;
|
|
color: #31AF0D;
|
|
}
|
|
.type{
|
|
width: 156rpx;
|
|
height: 60rpx;
|
|
background: #E6EFFF;
|
|
border-radius: 8rpx;
|
|
border: 2rpx solid #387DF7;
|
|
text-align: center;
|
|
line-height: 60rpx;
|
|
color: #387DF7;
|
|
}
|
|
}
|
|
.pregress{
|
|
margin: 0 0 24rpx 78rpx;
|
|
width: 70%;
|
|
.text{
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #387DF7;
|
|
line-height: 40rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
margin-bottom: 12rpx;
|
|
}
|
|
.prp{
|
|
display: flex;
|
|
position: relative;
|
|
width: 444rpx;
|
|
.text{
|
|
position: absolute;
|
|
right: -78rpx;
|
|
top: -14rpx;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #666666;
|
|
line-height: 40rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
margin-left: 24rpx;
|
|
}
|
|
}
|
|
}
|
|
.tea_text{
|
|
margin: 0 0 26rpx 80rpx;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
line-height: 60rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
.text_tea{
|
|
margin-right:80rpx;
|
|
overflow: hidden;
|
|
word-break:break-all;
|
|
text-overflow: ellipsis;
|
|
-webkit-box-orient: vertical;
|
|
display: -webkit-box;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
-webkit-line-clamp: 3;
|
|
}
|
|
}
|
|
.btn{
|
|
width: 85%;
|
|
height: 80rpx;
|
|
background: #387DF7;
|
|
border-radius: 12rpx;
|
|
margin: 0 0 44rpx 50rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: relative;
|
|
.text{
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 600;
|
|
font-size: 28rpx;
|
|
color: #FFFFFF;
|
|
line-height: 40rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
.go{
|
|
position: absolute;
|
|
top: 20rpx;
|
|
right: 20rpx;
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
}
|
|
}
|
|
}
|
|
.path_header{
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-bottom: 38rpx;
|
|
.text{
|
|
max-width: 80%;
|
|
margin-top: 26rpx;
|
|
height: 60rpx;
|
|
font-weight: 600;
|
|
font-size: 44rpx;
|
|
color: #FFFFFF;
|
|
line-height: 60rpx;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
.path_body{
|
|
background: #FFFFFF;
|
|
border-radius: 40rpx 40rpx 0rpx 0rpx;
|
|
/* height: 100vh; */
|
|
.body_header{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
.left{
|
|
width: 204rpx;
|
|
height: 52rpx;
|
|
line-height: 52rpx;
|
|
text-align: center;
|
|
background: #387DF7;
|
|
border-radius: 26rpx;
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
color: #FFFFFF;
|
|
margin-left: 30rpx;
|
|
margin-top: 26rpx;
|
|
}
|
|
.right{
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 32rpx;
|
|
margin-right: 34rpx;
|
|
.text{
|
|
height: 40rpx;
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
line-height: 40rpx;
|
|
margin-left: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
.body_check{
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: 34rpx;
|
|
.left_check{
|
|
display: flex;
|
|
align-items: center;
|
|
.left{
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
background: #34CA2B;
|
|
border-radius: 4rpx;
|
|
}
|
|
.text{
|
|
height: 40rpx;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
line-height: 40rpx;
|
|
margin-left: 18rpx;
|
|
}
|
|
}
|
|
.right_check{
|
|
display: flex;
|
|
align-items: center;
|
|
margin-left: 102rpx;
|
|
.right{
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
background: #FE9C4A;
|
|
border-radius: 4rpx;
|
|
}
|
|
.text{
|
|
height: 40rpx;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
line-height: 40rpx;
|
|
margin-left: 18rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.end_learn{
|
|
text-align: right;
|
|
margin-top: 30rpx;
|
|
margin-right: 24rpx;
|
|
height: 40rpx;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #387DF7;
|
|
line-height: 40rpx;
|
|
margin-bottom: 30rpx;
|
|
}
|
|
.learn{
|
|
width: 616rpx;
|
|
height: 952rpx;
|
|
background: url("../../static/images/learnpath/7learn.png") no-repeat;
|
|
background-size: 100%;
|
|
margin-left: 88rpx;
|
|
position: relative;
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: -16rpx;
|
|
right: 48rpx;
|
|
background: url("../../static/images/learnpath/plane.png");
|
|
width: 64rpx;
|
|
height: 68rpx;
|
|
background-repeat: no-repeat;
|
|
background-size: 100%;
|
|
z-index: 1000;
|
|
}
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -6rpx;
|
|
right: -12rpx;
|
|
background: url("../../static/images/learnpath/plane.png");
|
|
transform: rotateY(180deg);
|
|
width: 64rpx;
|
|
height: 68rpx;
|
|
background-repeat: no-repeat;
|
|
background-size: 100%;
|
|
z-index: 1000;
|
|
}
|
|
.text_start{
|
|
position: absolute;
|
|
right: 64rpx;
|
|
bottom: 4rpx;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #387DF7;
|
|
line-height: 40rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
}
|
|
.learn14{
|
|
width: 680rpx;
|
|
height: 2676rpx;
|
|
background: url("../../static/images/learnpath/14learn.png") no-repeat;
|
|
background-size: 100%;
|
|
margin-left: 40rpx;
|
|
position: relative;
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 38rpx;
|
|
left: 340rpx;
|
|
background-image: url('../../static/images/learnpath/begin.png');
|
|
background-repeat: no-repeat;
|
|
background-size: 100%;
|
|
width: 300rpx;
|
|
height: 90rpx;
|
|
z-index: 1000;
|
|
}
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: -16rpx;
|
|
right: 62rpx;
|
|
background: url("../../static/images/learnpath/plane.png");
|
|
width: 66rpx;
|
|
height: 68rpx;
|
|
background-repeat: no-repeat;
|
|
background-size: 100%;
|
|
z-index: 1000;
|
|
}
|
|
}
|
|
.learn_item{
|
|
width: 64rpx;
|
|
height: 64rpx;
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
&:before {
|
|
content: "";
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 32px;
|
|
height: 32px;
|
|
clip: rect(16px 64px 32px 16px);
|
|
background: inherit;
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
.icon {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
background-color: #fff;
|
|
border-radius: 50%;
|
|
transform: translate(-50%, -50%);
|
|
cursor: pointer;
|
|
|
|
.icon-content {
|
|
position: absolute;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
top: 50%;
|
|
left: 50%;
|
|
font-size: 10px;
|
|
color: #fff;
|
|
text-align: center;
|
|
transform: translate(-50%, -50%);
|
|
width: 44rpx;
|
|
height: 44rpx;
|
|
line-height: 44rpx;
|
|
background-color: #8bc94b;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
}
|
|
.learn_text{
|
|
width: 240rpx;
|
|
height: 56rpx;
|
|
font-size: 24rpx;
|
|
line-height: 56rpx;
|
|
text-align: center;
|
|
background: linear-gradient( 301deg, #0071FF 0%, #8FC1FF 99%, #3D73ED 100%);
|
|
border-radius: 160rpx 160rpx 160rpx 16rpx;
|
|
position: absolute;
|
|
padding: 0 12rpx 0 20rpx;
|
|
font-weight: 400;
|
|
color: #FFFFFF;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
}
|
|
</style>
|