Skip to content

T
thinkApp
Commit c74dee3d authored by 黄奎's avatar 黄奎
Browse files
Options

Merge branch 'master' of http://gitlab.oytour.com/youjie/thinkapp

parents f528002d 563252ec
Hide whitespace changes
Inline Side-by-side
Showing with 372 additions and 11 deletions
src/components/index/workSituation/courseCard.vue 0 → 100644
View file @ c74dee3d
<template>
<view class="course-card">
<view class="course-item">
<view style="width:287rpx;">
<view class="course-name">
成都2022科学益智L4-05乐思会
</view>
<van-progress percentage="75" :show-pivot="false" track-color="#EFEFEF" color="#282828"
stroke-width="5" />
<view class="course-progress">
上课进度 5/12
</view>
<view class="course-opera">
<van-button @click="exchangeItemHandler" class-prefix="iconfont" icon=" icon-qiehuan1" round type="default" size="mini"
custom-style="color:#E23B4A;font-size: 24rpx;padding-left:10rpx;padding-right:10px;">切换课程
</van-button>
</view>
</view>
<image class="illustration"
src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1653464014000_494.png"
mode="widthFix"></image>
</view>
<image class="end"
src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1653464014000_413.png"
mode="widthFix"></image>
<van-popup
:show="showItems"
round
position="bottom"
@click-overlay="hideExchangeBoxHandler"
custom-style="height: 75%"
>
<view class="exchange-items">
<view class="title-box">
<text class="main-title">课程选择</text>
<text class="sub-title">(共有3门课程)</text>
</view>
<view class="courseCard-search">
<van-search
v-model="Keywords"
shape="round"
style="border-radius: 20rpx;"
input-align="center"
background="#F6F6F6"
placeholder="请输入搜索关键词"
/>
<!-- <input v-model="Keywords" placeholder="请输入搜索关键词"/> -->
</view>
<view class="courseCard-title">
<view class="workSituation-title-box flex">
<view class="workSituation-title flex"
:class="tabNme==t.name?'active':''"
v-for="(t,index) in titleList" :key="index"
@click="toggleTitle(t.name)">
<text class="name">{{t.name}}</text>
<view class="num">({{t.num}})</view>
<view class="current-title-box flex" v-show="tabNme==t.name">
<text class="name">{{t.name}}</text>
<view class="num">({{t.num}})</view>
</view>
</view>
</view>
</view>
<view class="items">
<view class="item-course">
<view class="course-pic">
<image src="https://www.kfzimg.com/G06/M00/B5/48/p4YBAFsJY12AK0n7AAEM2KDUHRw535_n.jpg" mode="aspectFill"></image>
</view>
<view class="content">
<view class="one_line course-name">
高中物理鸿志班（二期周五下午上课）
</view>
<van-progress percentage="46" :show-pivot="false" track-color="#EFEFEF" color="#282828"
stroke-width="5" />
<view class="course-progress">
上课进度 5/12
</view>
<view style="text-align: right;">
<van-button @click="hideExchangeBoxHandler" color="#C91727" round size="mini"
custom-style="color:#FFF;font-size: 24rpx;padding-left:16rpx;padding-right:10px;">
选择课程
</van-button>
</view>
</view>
</view>
<view class="item-course">
<view class="course-pic">
<image src="https://www.kfzimg.com/G06/M00/B5/48/p4YBAFsJY12AK0n7AAEM2KDUHRw535_n.jpg" mode="aspectFill"></image>
</view>
<view class="content">
<view class="one_line course-name">
高中物理鸿志班（二期周五下午上课）
</view>
<van-progress percentage="46" :show-pivot="false" track-color="#EFEFEF" color="#282828"
stroke-width="5" />
<view class="course-progress">
上课进度 5/12
</view>
<view style="text-align: right;">
<van-button @click="hideExchangeBoxHandler" color="#C91727" round size="mini"
custom-style="color:#FFF;font-size: 24rpx;padding-left:16rpx;padding-right:10px;">
选择课程
</van-button>
</view>
</view>
</view>
<view class="item-course">
<view class="course-pic">
<image src="https://www.kfzimg.com/G06/M00/B5/48/p4YBAFsJY12AK0n7AAEM2KDUHRw535_n.jpg" mode="aspectFill"></image>
</view>
<view class="content">
<view class="one_line course-name">
高中物理鸿志班（二期周五下午上课）
</view>
<van-progress percentage="46" :show-pivot="false" track-color="#EFEFEF" color="#282828"
stroke-width="5" />
<view class="course-progress">
上课进度 5/12
</view>
<view style="text-align: right;">
<van-button @click="hideExchangeBoxHandler" color="#C91727" round size="mini"
custom-style="color:#FFF;font-size: 24rpx;padding-left:16rpx;padding-right:10px;">
选择课程
</van-button>
</view>
</view>
</view>
<view class="item-course">
<view class="course-pic">
<image src="https://www.kfzimg.com/G06/M00/B5/48/p4YBAFsJY12AK0n7AAEM2KDUHRw535_n.jpg" mode="aspectFill"></image>
</view>
<view class="content">
<view class="one_line course-name">
高中物理鸿志班（二期周五下午上课）
</view>
<van-progress percentage="46" :show-pivot="false" track-color="#EFEFEF" color="#282828"
stroke-width="5" />
<view class="course-progress">
上课进度 5/12
</view>
<view style="text-align: right;">
<van-button @click="hideExchangeBoxHandler" color="#C91727" round size="mini"
custom-style="color:#FFF;font-size: 24rpx;padding-left:16rpx;padding-right:10px;">
选择课程
</van-button>
</view>
</view>
</view>
</view>
</view>
</van-popup>
</view>
</template>
<script>
import {
ref,
reactive,
toRefs,
toRef,
getCurrentInstance,
watch,
computed,
onMounted,
} from "vue";
export default {
props: {},
setup() {
let data = reactive({
statusBarHeight: 24,
showItems:false,
Keywords:'',
titleList:[
{name:'全部课程',num:18},
{name:'进行中',num:5},
{name:'已完成',num:18},
],
tabNme:'进行中'
});
let methods={
toggleTitle(t) {
data.tabNme = t
},
exchangeItemHandler(){
data.showItems=true
},
hideExchangeBoxHandler(){
data.showItems=false
}
}
return {
...toRefs(data),
...methods
};
},
};
</script>
<style scoped>
.num{
font-size: 20rpx;
display: inline-block;
margin-top: 5rpx;
}
.current-title-box{
color: #FFFFFF;
background: #282828;
padding: 26rpx 36rpx;
width: 80%;
position: absolute;
left: -18%;
right: 0;
top: -28rpx;
border-radius: 39rpx;
justify-content: center;
}
.workSituation-title.active{
position: relative;
}
.workSituation-title{
flex: 1;
color: #282828;
font-size: 26rpx;
font-weight: bold;
align-items: center;
letter-spacing: 1px;
}
.workSituation-title-box{
margin: 0 50rpx;
padding: 17rpx 0 17rpx 28rpx;
background: #F0F0F0;
border-radius: 30rpx;
}
.courseCard-search{
margin: 40rpx 0;
padding: 0 30rpx;
overflow: hidden;
/* background: #FFFFFF; */
}
.course-card {
padding: 70rpx 50rpx 0 50rpx;
}
.course-card .course-item {
height: 294rpx;
background: linear-gradient(37deg, #C91727, #E64150);
padding: 40rpx 35rpx;
border-radius: 50rpx;
position: relative;
box-sizing: border-box;
}
.course-card .course-item .illustration {
position: absolute;
left: 350rpx;
top: -11rpx;
width: 340rpx;
}
.course-card .end {
width: 550rpx;
margin: 0 auto;
display: block;
}
.course-card .course-item .course-name {
font-size: 30rpx;
font-weight: bold;
color: #FFFFFF;
line-height: 42rpx;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
margin-bottom: 20rpx;
}
.course-card .course-item .course-progress {
font-size: 20rpx;
font-weight: 400;
color: #FDC4CA;
line-height: 45rpx;
}
.course-card .course-item .course-opera {
margin-top: 20rpx;
}
.course-card .exchange-items{
padding:50rpx 0;
padding-bottom: 0;
height: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
background: #F6F6F6;
}
.course-card .exchange-items .title-box{
padding:0 50rpx;
}
.course-card .exchange-items .title-box .main-title{
font-size: 36rpx;
font-weight: 800;
color:#282828;
}
.course-card .exchange-items .title-box .sub-title{
font-size: 26rpx;
font-weight: normal;
color:#6F6F6F;
margin-left: 10rpx;
}
.course-card .exchange-items .items{
width: 100%;
flex:1;
overflow-y:auto;
margin-top:40rpx;
padding:0 50rpx;
box-sizing: border-box;
}
.course-card .exchange-items .items .item-course{
margin-bottom: 50rpx;
padding:40rpx 36rpx;
display: flex;
align-items: flex-start;
background-color: #FFF;
border-radius: 30rpx;
}
.course-card .exchange-items .items .item-course .course-pic{
width: 100rpx;
height: 140rpx;
margin-right: 36rpx;
overflow: hidden;
}
.course-card .exchange-items .items .item-course .course-pic image{
width:100%;
height: 100%;
}
.course-card .exchange-items .items .item-course .content{
flex:1;
width: 1px;
}
.course-card .exchange-items .items .item-course .content .course-name{
font-size: 30rpx;
font-weight: bold;
color: #282828;
line-height: 42rpx;
margin-bottom: 20rpx;
}
.course-card .exchange-items .items .item-course .content .course-progress{
color: #282828;
font-weight: 400;
font-size: 20rpx;
margin-top: 4rpx;
margin-bottom: 10rpx;
}
</style>
src/pages/index/workSituation.vue
View file @ c74dee3d
......@@ -20,7 +20,7 @@
<view style="font-size: 50rpx;">李老师</view>
</view>
</view>
<course-card></course-card>
<courseCard></courseCard>
<view class="index-student-information">
<view class="workSituation-title-box flex">
<view class="workSituation-title flex"
......@@ -43,7 +43,7 @@
</template>
<script>
import courseCard from '../../components/index/course-card'
import courseCard from '@/components/index/workSituation/courseCard'
import operation from '@/components/index/workSituation/operation'
import studentList from '@/components/index/workSituation/studentList'
import examList from '@/components/index/workSituation/examList'
......@@ -166,7 +166,7 @@
border-radius: 30rpx;
}
.index-student-information{
min-height: 500rpx;
min-height: 800rpx;
background: rgba(255,255,255,.7);
border-radius: 50rpx 50rpx 0 0;
padding: 50rpx 0 30rpx 0;
......
src/utils/wxcomponents/vant/search/index.vue
View file @ c74dee3d
......@@ -126,8 +126,8 @@ export default global['__wxComponents']['vant/search/index']
padding-left: var(--padding-sm,24rpx);
border-radius: 4rpx;
border-radius: var(--border-radius-sm,4rpx);
background-color: #f7f8fa;
background-color: var(--search-background-color,#f7f8fa);
background-color: #FFFFFF;
background-color: var(--search-background-color,#FFFFFF);
}
.van-search__content--round {
......
src/utils/wxcomponents/vant/search/index.wxss
View file @ c74dee3d
......@@ -21,8 +21,8 @@
padding-left: var(--padding-sm,24rpx);
border-radius: 4rpx;
border-radius: var(--border-radius-sm,4rpx);
background-color: #f7f8fa;
background-color: var(--search-background-color,#f7f8fa);
background-color: #FFFFFF;
background-color: var(--search-background-color,#FFFFFF);
}
.van-search__content--round {
......
src/wxcomponents/vant/search/index.vue
View file @ c74dee3d
......@@ -126,8 +126,8 @@ export default global['__wxComponents']['vant/search/index']
padding-left: var(--padding-sm,24rpx);
border-radius: 4rpx;
border-radius: var(--border-radius-sm,4rpx);
background-color: #f7f8fa;
background-color: var(--search-background-color,#f7f8fa);
background-color: #FFFFFF;
background-color: var(--search-background-color,#FFFFFF);
}
.van-search__content--round {
......
src/wxcomponents/vant/search/index.wxss
View file @ c74dee3d
......@@ -21,8 +21,8 @@
padding-left: var(--padding-sm,24rpx);
border-radius: 4rpx;
border-radius: var(--border-radius-sm,4rpx);
background-color: #f7f8fa;
background-color: var(--search-background-color,#f7f8fa);
background-color: #FFFFFF;
background-color: var(--search-background-color,#FFFFFF);
}
.van-search__content--round {
......
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