Commit f2b6bc8d authored by 罗超's avatar 罗超

2

parent 0bad2a46
<template>
<view class="wordPronItem">
<view class="num">
1/26
</view>
</view>
</template>
<script>
import {
ref,
reactive,
toRefs,
toRef,
getCurrentInstance,
watch,
computed,
onMounted,
provide,
} from "vue";
export default {
components: {
},
props:{
item:{
type:Object,
default:()=>{return {}}
}
},
setup(){
let data = reactive({
})
let methods = {
}
return {
...toRefs(data),
...methods,
};
}
}
</script>
<style scoped>
.wordPronItem {
width: 640rpx;
height: 990rpx;
}
.wordPronItem .num {
font-size: 26rpx;
font-family: PingFang SC;
font-weight: bold;
color: #999999;
}
</style>
......@@ -98,6 +98,12 @@
}, {
"path": "learningGardenDetails" //学习园地详情
}]
},
{
"root": "pages/word", //单词分包
"pages": [{
"path": "word" //
}]
}
],
"tabBar": {
......
<template>
<view class="indexpage">
<navbar>
<view class="navbarCon">
<view class="pagetitle" @click="jumpPage('/pages/login/login')">
首页
</view>
<view class="loginBox">
<indexassembly @success='againdata'>
<view class="flex_start_center">
<image
src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/login2x.png"
mode="aspectFit" class="loginIcon" id="loadImg"></image>
登录
</view>
</indexassembly>
</view>
<van-sticky >
<navbar class="navbarSticky">
<view class="navbarCon">
<view class="pagetitle" @click="jumpPage('/pages/login/login')">
首页
</view>
<view class="loginBox">
<indexassembly @success='againdata'>
<view class="flex_start_center">
<image
src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/login2x.png"
mode="aspectFit" class="loginIcon" id="loadImg"></image>
登录
</view>
</indexassembly>
</view>
<view class="scanBox">
<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/scan2x.png"
mode="aspectFit" class="scanIcon"></image>
<view class="scanText">
签到
<view class="scanBox" @click="jumpPage('/pages/word/word')">
<image
src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/scan2x.png"
mode="aspectFit" class="scanIcon"></image>
<view class="scanText">
签到
</view>
</view>
</view>
</view>
</navbar>
</navbar>
</van-sticky>
<view class="activeContent" v-if="ActivityList.length >= 0">
<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" indicator-color="#CCCCCC"
indicator-active-color="#000000" :vertical="true" circular>
......@@ -188,6 +192,11 @@
const formatres = `rgba(${res.r},${res.g},${res.b})`
console.log(168, formatres)
return formatres
},
againdata(){
data.pageData = uni.getStorageSync("userInfo");
methods.getIndexData();
methods.getActivityData();
}
};
......@@ -231,7 +240,11 @@
box-sizing: border-box;
padding-bottom: 40rpx;
}
.navbarSticky{
display: sticky;
top: 0;
z-index: 9;
}
.navbarCon {
height: 100%;
box-sizing: border-box;
......
<template>
<view class="page-box">
<!-- <van-nav-bar :border="fasle" fixed :z-index="99">
<view slot="left" class="page-title" title="shouye">首页</view>
</van-nav-bar> -->
<navbar>
<view class="navbarCon">
<view class="pagetitle">
首页
</view>
<view class="loginBox">
<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/login2x.png" mode="aspectFit" class="loginIcon"></image>
登录
</view>
<view class="scanBox">
<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/scan2x.png" mode="aspectFit" class="scanIcon"></image>
<view class="scanText">
签到
</view>
</view>
</view>
</navbar>
<view class="con">
<view class="personInfo flex flex_start_center">
<van-image
round
width="100rpx"
height="100rpx"
fit="cover"
:src="userinfo.UserIcon ? userinfo.UserIcon : userinfo.GroupLogo"
class="headimg"
@click="jumpPage('/pages/login/login')"
/>
<view class="grow">
<view class="name" v-if="userinfo.AccountName"> {{ userinfo.AccountName?userinfo.AccountName:'' }} </view>
<view v-else>
<indexassembly @success='againdata'></indexassembly>
</view>
<view class="phone">
{{ userinfo.Account?userinfo.Account:'' }}
</view>
</view>
<view class="saleInfo">
<view class="info1">
<van-icon
name="contact"
size="23rpx"
style="margin-right: 10rpx"
/>服务人员
</view>
<view class="info2 one_line">
<text style="margin-right: 10rpx">课程顾问</text
>{{ userinfo.EnterPhone2?userinfo.EnterPhone2:'无' }}
</view>
</view>
</view>
<view class="baseInfo flex flex_wrap">
<view
class="baseInfo_item flex flex_between_center"
v-for="(item, index) in baseInfo"
:key="index"
:style="{ 'background-color': item.bgcolor }"
@click="jumpPage(item.jumpUrl)"
>
<view style="height: 100%; max-width: 120rpx">
<view class="baseInfo_name">
{{ item.name }}
</view>
<view class="baseInfo_desc one_line" :title="item.desc">
{{ item.desc }}
</view>
</view>
<van-image width="58rpx" height="66rpx" fit="cover" :src="item.img" />
</view>
</view>
<view class="LearningGarden flex flex_wrap">
<view
v-for="(item, index) in learnList"
:key="index"
class="LearningGarden-item"
:style="{ backgroundColor: item.bgcolor }"
@click="jumpPage(item.jumpUrl)"
>
<view class="LearningGarden-item-name">{{ item.name }}</view>
<view class="LearningGarden-item-desc">{{ item.desc }}</view>
<image :src="item.img" class="LearningGarden-item-img" />
</view>
</view>
<view class="title" v-if="indexData && indexData.FeedBackList && indexData.FeedBackList.length > 0">
课程反馈
</view>
<view class="feedback" v-if="indexData && indexData.FeedBackList && indexData.FeedBackList.length > 0">
<view class="feedback-info flex flex_start_center">
<image
:src="indexData.FeedBackList[0].TeacherIcon"
class="info-headimg"
/>
<view class="grow">
<view
class="teacher-name one_line"
v-if="indexData.FeedBackList[0].TeacherName"
>{{ indexData.FeedBackList[0].TeacherName }} {{indexData.FeedBackList[0].CourseName}} </view
>
<view class="rate">
<van-rate
:value="indexData.FeedBackList[0].Score"
:count="indexData.FeedBackList[0].Score"
icon="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/rate.png"
void-icon=""
size="24rpx"
/>
<text class="FeedBackTime">{{indexData.FeedBackList[0].ClassDateStr}}&nbsp;{{indexData.FeedBackList[0].StartTime}}</text>
</view>
</view>
<view
class="feedback-all"
@click="jumpPage('/pages/course/feedback')"
>
全部
<van-icon name="arrow" style="margin-left: 30rpx" />
</view>
</view>
<view class="two_line feedback-text">
{{ indexData.FeedBackList[0].Comment }}
</view>
<view class="flex">
<view
v-for="(item, index) in indexData.FeedBackList[0].PhotoList"
:key="index"
v-if="index === 0 || index === 1 || index === 2"
class="feedback-img"
>
<view style="width: 100%; height: 100%" >
<image
:src="item"
style="width: 100%; height: 100%"
mode="aspectFill"
v-if="item.indexOf('mp4')==-1"
@click="previewImage(item, index)"
>
</image>
<video :id="'myVideo'+index" :src="item" style="width: 100%; height: 100%;"
:controls='controls'
:show-center-play-btn='false'
:show-fullscreen-btn='false'
@fullscreenchange='videoControl'
v-if="item.indexOf('mp4')!=-1"
></video>
<view @click="enlarge(index)" v-if="item.indexOf('mp4')!=-1"
style="position: absolute;left: 50%;top: 50%;margin-top: -49rpx;margin-left: -49rpx;width: 98rpx;height: 98rpx;border-radius: 20rpx;background-color: rgba(255,255,255,.4);display: flex;align-items: center;justify-content: center;">
<!-- 播放按钮 -->
<image
src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616471847000_345.png"
style="width: 37rpx;height: 44rpx;" mode=""></image>
</view>
</view>
<view
class="layer"
v-if="
indexData.FeedBackList[0].PhotoList.length > 3 && index === 2
"
></view>
<view
class="layer2 flex flex_center_center"
v-if="
indexData.FeedBackList[0].PhotoList.length > 3 && index === 2
"
>
+{{ indexData.FeedBackList[0].PhotoList.length - 3 }}</view
>
</view>
</view>
</view>
<view class="activeContent" v-if="ActivityList.length > 0">
<swiper
class="swiper"
:indicator-dots="indicatorDots"
:autoplay="autoplay"
indicator-color="#CCCCCC"
indicator-active-color="#000000"
:vertical="true"
circular
>
<swiper-item
v-for="(item, index) in ActivityList"
:key="index"
@click="goActiveDetail(item.Id)"
>
<view
class="swiperList"
:style="{
'background-image': item.CoverImg
? `url(${item.CoverImg})`
: `url(https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/defaultBgimg.png)`,
}"
>
<view class="swiper_Time">{{ item.BMStart }}</view>
<view class="swiper_Name">{{ item.ActivityName }}</view>
</view>
</swiper-item>
</swiper>
</view>
<view class="timetable">
<view class="timetable_item flex flex_between_center">
<text class="timetable_title">我的课表</text>
<view
class="timetable_btn"
@click="
jumpPage(`/pages/course/timeTable?classId=${indexData.ClassId}`)
"
v-if="indexData.ClassPlan.TimeStart"
>
全部
<van-icon name="arrow" style="margin-left: 30rpx" />
</view>
</view>
<view class="timetable_item2">
日期:
<text v-if="indexData.ClassPlan.NewPlanDateTimeStr">{{
indexData.ClassPlan.NewPlanDateTimeStr
}}</text>
<text v-else>暂无</text>
</view>
<view class="timetable_item2">
时间:
<text v-if="indexData.ClassPlan.TimeStr">{{
indexData.ClassPlan.TimeStr
}}</text>
<text v-else>暂无</text>
</view>
<view class="timetable_item2">
老师:
<text v-if="indexData.ClassPlan.TeacherName">{{
indexData.ClassPlan.TeacherName
}}</text>
<text v-else>暂无</text>
</view>
<view class="timetable_item2">
状态:
<text v-if="indexData.ClassPlan.TimeStatusStr === 0">待上课</text>
<text v-if="indexData.ClassPlan.TimeStatusStr === 1">上课中</text>
<text v-if="indexData.ClassPlan.TimeStatusStr === 2">下课</text>
</view>
</view>
<van-cell-group :border="false">
<van-cell title="我的考试" title-class="title" :border="false">
<view
class="value"
@click="
jumpPage(`/pages/exam/examPaperList?Id=${indexData.GuestId}`)
"
>
查看更多
</view>
</van-cell>
</van-cell-group>
<view v-if="indexData && indexData.paperList && indexData.paperList.length == 0">
<van-empty description="暂无数据" />
</view>
<view class="mytest flex" v-if="indexData && indexData.paperList && indexData.paperList.length > 0">
<view
v-for="(item, index) in indexData.paperList"
:key="index"
class="test-item no_shrink"
:style="{
'background-image': item.PicList[0]
? `url(${item.PicList[0]})`
: `url(https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/defaultBgimg.png)`,
}"
@click="getItemStatus(item)"
>
<view class="testName">
{{ item.PaperName }}
</view>
<view class="testTime"> 考试时间:{{ item.ExamStartTime }} </view>
<view class="teacherInfo-bg"></view>
<view class="teacherInfo flex flex_between_center">
<view class="flex flex_start_center">
<!-- <van-image
round
width="45rpx"
height="45rpx"
fit="cover"
src="https://img.yzcdn.cn/vant/cat.jpeg"
/>
<view class="teacherName">{{ indexData.TeacherName }}</view> -->
</view>
<view
class="test-status"
:class="{
'status-blue': item.ExamStatusStr == '未开始',
'status-green': item.ExamStatusStr == '已开始',
'status-black': item.ExamStatusStr == '完成',
'status-red': item.ExamStatusStr == '缺考',
}"
>
{{ item.ExamStatusStr }}
</view>
</view>
</view>
</view>
</view>
<van-toast id="van-toast" />
</view>
</template>
<script>
import {
ref,
reactive,
toRefs,
toRef,
getCurrentInstance,
watch,
computed,
onMounted,
provide,
} from "vue";
import { getIndexInfo } from "../../api/index";
import { getActivityList } from "../../api/activity";
import { desensitization } from "../../utils/index";
import indexassembly from './components/indexassembly.vue'
import navbar from '../../components/navbar.vue'
export default {
components: {
indexassembly,
navbar,
},
setup(props) {
let { proxy } = getCurrentInstance();
proxy.$isLogin();
let data = reactive({
statusBarHeight: 0,
userinfo: {},
indexData: {
FeedBackList: [],
},
baseInfo: [
{
name: "学区",
desc: "",
img: "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/icon2.png",
bgcolor: "#CCEDFE",
jumpUrl: "",
},
{
name: "课程",
desc: "N1~N3",
img: "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/icon1.png",
bgcolor: "#DDE6FF",
jumpUrl: "/pages/course/course",
},
{
name: "进度",
desc: "上到哪里了",
img: "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/icon4.png",
bgcolor: "#FFEFE4",
jumpUrl: `/pages/progress/progress`,
},
{
name: "剩余课时",
desc: "100",
img: "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/icon3.png",
bgcolor: "#FFEAFE",
jumpUrl: `/pages/surplusTime/surplusTime`,
},
{
name: "电子合同",
desc: "5个",
img: "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/icon5.png",
bgcolor: "#D9FAF1",
jumpUrl: "/pages/contract/contract",
},
{
name: "我的老师",
desc: "李琴",
img: "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/icon6.png",
bgcolor: "#FFE7E6",
jumpUrl: "/pages/course/askForLeaveList",
},
],
// 学习园地
learnList: [
{
name: "日语学习园地",
desc: "日本語の勉強",
bgcolor: "#F6E5FE",
img: "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/garden1.png",
jumpUrl: "/pages/learningGarden/learningGardenList",
},
{
name: "韩语学习园地",
desc: "정원",
bgcolor: "#FEF5D6",
img: "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/garden2.png",
jumpUrl: "",
},
],
indicatorDots: true, //是否显示轮播指示点
autoplay: false,
ActiveMsg: {
pageIndex: 1,
pageSize: 10,
ActivityType: 0,
SelectIsEnd: 0,
},
ActivityList: [], //活动数据
videoContext:null
});
let methods = {
jumpPage(url) {
uni.navigateTo({
url: url,
});
},
async getIndexdata() {
let res = await getIndexInfo();
if (res) {
data.indexData = res.Data;
uni.setStorageSync("indexData", res.Data);
data.baseInfo[0].desc = res.Data.SName;
data.baseInfo[1].desc = res.Data.CourseName;
data.baseInfo[1].jumpUrl =
"/pages/course/course?id=" + res.Data.CourseId;
data.baseInfo[2].jumpUrl =
"/pages/progress/progress?id=" + res.Data.ClassId;
data.baseInfo[3].desc = res.Data.SurplusHours + "课时";
data.baseInfo[3].jumpUrl =
"/pages/surplusTime/surplusTime?id=" + res.Data.ClassId;
data.baseInfo[4].desc = res.Data.ContractNum;
data.baseInfo[5].desc = res.Data.TeacherName;
}
},
async getActivityData() {
let res = await getActivityList(data.ActiveMsg);
if (res.resultCode == 1) {
data.ActivityList = res.data.pageData;
}
},
//根据状态跳转
getItemStatus(item) {
//ExamStatus 1未开始 2已开始 3已考试 4缺考 5已阅卷
if (item.ExamStatus == 5) {
this.jumpPage(
`/pages/exam/examScore?GuestId=${item.GuestId}&&PaperId=${item.PaperId}&&Id=${item.Id}&&Exam_Student_Id=${item.Exam_Student_Id}&&ExamStatus=${item.ExamStatus}`
);
} else {
this.jumpPage(
`/pages/exam/examPaper?GuestId=${item.GuestId}&&PaperId=${item.PaperId}&&Id=${item.Id}&&Exam_Student_Id=${item.Exam_Student_Id}&&ExamStatus=${item.ExamStatus}`
);
}
},
//跳转至详情
goActiveDetail(Id) {
this.jumpPage(`/pages/activity/activityDetails?Id=${Id}`);
},
previewImage(item, i) {
let arr=[item]
uni.previewImage({
urls: arr,
current: i,
longPressActions: {
itemList: ["发送给朋友", "保存图片", "收藏"],
success: function (data) {},
fail: function (err) {
console.log(err.errMsg);
},
},
});
},
enlarge(i) {
// 全屏
data.videoContext = uni.createVideoContext('myVideo'+i);
data.videoContext.requestFullScreen({direction: 0})
},
videoControl(e){
if(e.detail.fullScreen==false){
data.videoContext.stop()
data.controls=false
}else{
data.videoContext.play()
data.controls=true
}
},
againdata(){
data.userinfo = uni.getStorageSync("userInfo");
that.getIndexdata();
that.getActivityData();
data.userinfo.EnterPhone2 = desensitization(
data.userinfo.EnterPhone,
3,
-4
);
}
};
onMounted(() => {
console.log(process.env);
console.log(uni.getSystemInfoSync());
data.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
data.userinfo = uni.getStorageSync("userInfo");
data.userinfo.EnterPhone2 = desensitization(
data.userinfo.EnterPhone,
3,
-4
);
});
let that = methods;
return {
...toRefs(data),
...methods,
};
},
onShow() {
this.getIndexdata();
this.getActivityData();
},
onLoad() {
uni.setNavigationBarTitle({
title: "首页",
});
},
onShareAppMessage() {
return {
title: "甲小鹤",
query: "/pages/index/index",
imageUrl: "",
};
},
onShareTimeline() {
return {
title: "甲小鹤",
query: "/pages/index/index",
imageUrl: "",
};
},
};
</script>
<style scoped>
.navbarCon{
height: 100%;
box-sizing: border-box;
padding: 0 30rpx;
display: flex;
align-items: center;
}
.pagetitle{
font-size: 46rpx;
font-weight: 800;
color: #111111;
margin-right: 30rpx;
}
.loginBox{
height: 100%;
display: flex;
align-items: center;
font-size: 24rpx;
font-family: PingFang SC;
font-weight: 800;
color: #4C50E7;
margin-right: 220rpx;
}
.loginIcon{
width: 50rpx;
height: 50rpx;
margin-right:10rpx;
}
.scanBox{
width: 40rpx;
display: flex;
flex-wrap: wrap;
}
.scanIcon{
width: 40rpx;
height: 40rpx;
}
.scanText{
font-size: 20rpx;
font-family: PingFang SC;
font-weight: 800;
color: #111111;
line-height: 20rpx;
}
.con {
box-sizing: border-box;
/* padding: 0rpx 30rpx 50rpx; */
}
.page-title {
font-size: 44rpx;
font-family: PingFang SC;
font-weight: bold;
color: #0f1b35;
}
.personInfo {
height: 100rpx;
position: relative;
margin-bottom: 50rpx;
}
.headimg {
margin-right: 30rpx;
}
.name {
font-size: 30rpx;
font-family: PingFang SC;
font-weight: bold;
color: #0f1b35;
}
.phone {
font-size: 26rpx;
font-family: PingFang SC;
font-weight: 500;
color: #999999;
}
.saleInfo {
/* width: 200rpx; */
height: 66rpx;
background-color: #00acf9;
border-radius: 33rpx 0rpx 0rpx 33rpx;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: -30rpx;
z-index: 10;
box-sizing: border-box;
padding: 0 20rpx;
font-family: PingFang SC;
color: #ffffff;
}
.saleInfo .info1 {
text-align: center;
font-size: 22rpx;
font-weight: bold;
}
.saleInfo .info2 {
font-size: 20rpx;
}
.baseInfo {
margin-bottom: 10rpx;
}
.baseInfo_item {
width: 220rpx;
height: 140rpx;
border-radius: 20rpx;
box-sizing: border-box;
padding: 38rpx 20rpx;
margin-right: 15rpx;
margin-bottom: 30rpx;
}
.baseInfo .baseInfo_item:nth-child(3n) {
margin-right: 0rpx;
}
.baseInfo_name {
font-size: 28rpx;
font-family: PingFang SC;
font-weight: bold;
color: #0f1b35;
margin: -7rpx 0 3rpx 0;
}
.baseInfo_desc {
font-size: 22rpx;
font-family: PingFang SC;
font-weight: 500;
color: #333e52;
}
.timetable {
height: 360rpx;
background-image: url("https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/coursebg.png");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
border-radius: 20rpx;
overflow: hidden;
box-sizing: border-box;
padding: 30rpx 30rpx 0 50rpx;
margin-bottom: 50rpx;
}
.timetable_item {
color: #fff;
margin-bottom: 20rpx;
}
.timetable_title {
font-size: 32rpx;
font-family: PingFang SC;
font-weight: bold;
}
.timetable_btn {
font-size: 24rpx;
font-family: PingFang SC;
/* font-weight: 500; */
}
.timetable_item2 {
color: #fff;
margin-bottom: 20rpx;
font-size: 26rpx;
font-family: PingFang SC;
font-weight: 500;
}
/deep/.title {
font-size: 32rpx;
font-family: PingFang SC;
font-weight: 800;
color: #0f1b35;
}
/deep/.value {
font-size: 24rpx;
font-family: PingFang SC;
font-weight: 500;
color: #333f53;
}
/deep/.van-cell {
padding: 0;
}
.mytest {
width: 720rpx;
height: 250rpx;
margin-top: 30rpx;
overflow-x: scroll;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
transition: all 0.5s;
}
.test-item {
width: 620rpx;
height: 250rpx;
box-sizing: border-box;
border-radius: 20rpx;
overflow: hidden;
margin-right: 30rpx;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-origin: border-box;
background-clip: border-box;
padding-top: 60rpx;
padding-left: 44rpx;
position: relative;
}
.testName {
font-size: 40rpx;
font-family: PingFang SC;
font-weight: bold;
color: #0f1b35;
margin-bottom: 20rpx;
}
.testTime {
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 500;
color: #0f1b35;
}
.teacherInfo-bg {
position: absolute;
left: 0;
bottom: 0;
width: 620rpx;
height: 70rpx;
background-image: linear-gradient(90deg, #000000, #ffffff);
opacity: 0.4;
z-index: 1;
}
.teacherInfo {
position: absolute;
left: 0;
bottom: 0;
width: 620rpx;
height: 70rpx;
z-index: 2;
box-sizing: border-box;
padding: 0 30rpx;
}
.teacherName {
font-size: 24rpx;
font-family: PingFang SC;
font-weight: 500;
color: #ffffff;
margin-left: 10rpx;
}
.test-status {
font-size: 24rpx;
font-family: PingFang SC;
font-weight: bold;
/* color: #00acf9; */
}
.status-blue {
color: #00acf9;
}
.status-green {
color: #00df9f;
}
.status-black {
color: #111111;
}
.status-red {
color: #ff3816;
}
.LearningGarden {
box-sizing: border-box;
margin-bottom: 10rpx;
}
.LearningGarden-item {
width: 330rpx;
height: 140rpx;
border-radius: 20rpx;
margin-right: 30rpx;
margin-bottom: 30rpx;
box-sizing: border-box;
padding: 30rpx 20rpx;
position: relative;
}
.LearningGarden .LearningGarden-item:nth-child(2n) {
margin-right: 0rpx !important;
}
.LearningGarden-item-name {
width: 220rpx;
font-size: 28rpx;
font-family: PingFang SC;
font-weight: bold;
color: #0f1b35;
}
.LearningGarden-item-desc {
width: 220rpx;
font-size: 22rpx;
font-family: PingFang SC;
font-weight: 500;
color: #333e52;
margin-top: 10rpx;
}
.LearningGarden-item-img {
width: 64rpx;
height: 66rpx;
position: absolute;
top: 38rpx;
right: 20rpx;
}
.feedback {
margin: 30rpx 0;
}
.feedback-info {
height: 60rpx;
}
.info-headimg {
width: 60rpx;
height: 60rpx;
background-color: #c4a1a1;
border-radius: 50%;
margin-right: 20rpx;
}
.teacher-name {
max-width: 500rpx;
font-size: 26rpx;
font-family: PingFang SC;
font-weight: 500;
color: #111111;
}
.FeedBackTime{
font-size: 24rpx;
font-family: PingFang SC;
font-weight: 500;
color: #111111;
margin-left: 20rpx;
}
.feedback-all {
font-size: 24rpx;
font-family: PingFang SC;
font-weight: 500;
color: #999999;
}
.feedback-text {
font-size: 24rpx;
font-family: PingFang SC;
font-weight: 400;
color: #111111;
margin: 20rpx 0;
}
.feedback-img {
width: 210rpx;
height: 210rpx;
border-radius: 20rpx;
background-color: #eee;
overflow: hidden;
margin-right: 30rpx;
position: relative;
box-shadow: 0rpx 10rpx 30rpx 0rpx rgba(36, 36, 36, 0.2);
}
.feedback-img:nth-child(3n) {
margin-right: 0rpx !important;
}
.layer {
width: 210rpx;
height: 210rpx;
border-radius: 20rpx;
background-color: #cbd9ed;
opacity: 0.5;
position: absolute;
top: 0;
right: 0;
}
.layer2 {
width: 210rpx;
height: 210rpx;
border-radius: 20rpx;
font-size: 36rpx;
font-family: PingFang SC;
font-weight: bold;
color: #111111;
position: absolute;
top: 0;
right: 0;
z-index: 5;
}
.activeContent {
width: 100%;
height: 250rpx;
border-radius: 20rpx;
margin-bottom: 30rpx;
overflow: hidden;
}
.swiperList {
position: relative;
width: 100%;
height: 250rpx;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-clip: border-box;
box-sizing: border-box;
overflow: hidden;
color: #fff;
border-radius: 20rpx;
}
.swiper_Time {
position: absolute;
top: 20rpx;
right: 40rpx;
font-size: 26rpx;
}
.swiper_Name {
position: absolute;
bottom: 20rpx;
left: 30rpx;
font-size: 26rpx;
}
.swiper {
position: relative;
border-radius: 20rpx;
}
/* .swiper /deep/ .wx-swiper-dots {
position: absolute;
right: -10rpx;
top: 50%;
transform: translateY(-50%);
z-index: 999;
} */
.swiper /deep/ .wx-swiper-dot {
width: 10rpx;
height: 10rpx;
margin-right: 0;
}
</style>
<template>
<view class="word">
<swiper class="swiper">
<swiper-item v-for="(item,index) in test" :key="index">
<view class="swiper-item uni-bg-green">index</view>
<Pronunciation></Pronunciation>
</swiper-item>
</swiper>
</view>
</template>
<script>
import {
ref,
reactive,
toRefs,
toRef,
getCurrentInstance,
watch,
computed,
onMounted,
provide,
} from "vue";
import Pronunciation from '../../components/word/Pronunciation.vue'
export default {
components: {
Pronunciation
},
setup(props) {
let data = reactive({
test: [1,2,3]
})
let methods = {
}
onMounted(() => {
})
let that = methods;
return {
...toRefs(data),
...methods,
};
},
onLoad(option) {
uni.setNavigationBarTitle({
title: '新的标题'
});
},
}
</script>
<style scoped>
.word {
min-height: 100vh;
background-color: #F5F5F5;
}
</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