|
|
@@ -32,18 +32,51 @@
|
|
|
</view>
|
|
|
<view class="task_desc">
|
|
|
课程简介：文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案
|
|
|
- <view><text>展开</text></view>
|
|
|
</view>
|
|
|
+ <view class="expand_btn"><text class="expand_text">展开</text><uni-icons class="expand_icon" type="down"></uni-icons></view>
|
|
|
</view>
|
|
|
<view class="row_gap"></view>
|
|
|
+ <!-- 吸顶 -->
|
|
|
+ <uv-sticky style="top:98rpx">
|
|
|
+ <!-- 搜索框 -->
|
|
|
+ <uni-easyinput class="search_box" v-model="state.searchWord" trim="all" :styles="state.searchInputStyles"
|
|
|
+ :placeholderStyle="state.searchInputPlaceholderStyle" placeholder="请输入关键字搜索" @input="HandleSearchInput">
|
|
|
+ <template #left>
|
|
|
+ <image src="/static/image/overview/search.png" class="search_icon"></image>
|
|
|
+ </template>
|
|
|
+ </uni-easyinput>
|
|
|
+ <scroll-view class="scroll_tabs" scroll-x="true" scroll-left="0" :show-scrollbar="false">
|
|
|
+ <view :class="['tab_item',{'selected':item.value==state.tabsSelected}]" v-for="item in state.tabList" :key="item.value" @click="SelectTabsValue(item.value)">
|
|
|
+ {{item.label}}
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ </uv-sticky>
|
|
|
<view class="page_content">
|
|
|
- sss
|
|
|
+ <view class="total">共 230 人</view>
|
|
|
+ <view class="list_item">
|
|
|
+ <view class="created_progress_status">
|
|
|
+ <text class="created_by">刘惟安</text>
|
|
|
+ <view class="item_progress">
|
|
|
+ <view class="progress_bar">
|
|
|
+ <view class="bar_width" style="width: 49%;"></view>
|
|
|
+ </view>
|
|
|
+ <view class="progress_label">80%</view>
|
|
|
+ </view>
|
|
|
+ <view class="item_status await">待完成</view>
|
|
|
+ </view>
|
|
|
+ <view class="item_time">
|
|
|
+ <text class="time">开始时间：2025-11-01</text>
|
|
|
+ <text class="time">结束时间：2025-11-04</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
import uniEasyinput from '@/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue';
|
|
|
+ import uniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue';
|
|
|
+ import uvSticky from '@/uni_modules/uv-sticky/components/uv-sticky/uv-sticky.vue';//吸顶
|
|
|
import navBar from '@/components/nav-bar.vue';
|
|
|
import { selectCourseDetail,addQuestionAnswerData } from '@/reqApi/teacherStudy.js';
|
|
|
import {
|
|
|
@@ -55,6 +88,22 @@
|
|
|
} from 'vue';
|
|
|
const state = reactive({
|
|
|
id: '', //任务id
|
|
|
+ searchInputStyles: { //搜素框样式
|
|
|
+ borderColor: '#DCDFE6',
|
|
|
+ color: '#333333'
|
|
|
+ },
|
|
|
+ searchInputPlaceholderStyle: 'color: #C0C4CC;fontSize: 28rpx' ,//搜素框样式
|
|
|
+ tabsSelected:'0',
|
|
|
+ tabList:[{
|
|
|
+ label:'全部',
|
|
|
+ value:'0'
|
|
|
+ },{
|
|
|
+ label:'待完成',
|
|
|
+ value:'1'
|
|
|
+ },{
|
|
|
+ label:'已完成',
|
|
|
+ value:'2'
|
|
|
+ }]
|
|
|
});
|
|
|
onLoad((option) => {
|
|
|
state.id = option.id;
|
|
|
@@ -172,6 +221,25 @@
|
|
|
display: -webkit-box;
|
|
|
-webkit-line-clamp: 3;
|
|
|
-webkit-box-orient: vertical;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .expand_btn{
|
|
|
+ width: 100%;
|
|
|
+ height: 40rpx;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ align-items: center;
|
|
|
+ .expand_text{
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #2E64FA;
|
|
|
+ margin-right: 8rpx;
|
|
|
+ }
|
|
|
+ .expand_icon{
|
|
|
+ font-size: 32rpx !important;
|
|
|
+ color: #2E64FA !important;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -180,4 +248,120 @@
|
|
|
width: 100%;
|
|
|
height: 24rpx;
|
|
|
}
|
|
|
+ :deep(.search_box) {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: 100%;
|
|
|
+ padding: 24rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ .is-input-border{
|
|
|
+ border-radius: 8rpx;
|
|
|
+ border: 2rpx solid #DCDFE6;
|
|
|
+ border-color: #DCDFE6 !important;
|
|
|
+ }
|
|
|
+ .search_icon {
|
|
|
+ width: 32rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ margin-left:24rpx;
|
|
|
+ }
|
|
|
+ .uni-easyinput__content-input {
|
|
|
+ padding-left: 8rpx !important;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #333333;
|
|
|
+ height: 72rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .scroll_tabs{
|
|
|
+ padding-bottom: 24rpx;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ }
|
|
|
+ .total{
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #333333;
|
|
|
+ padding-bottom: 24rpx;
|
|
|
+ border-bottom: 2rpx solid #F3F3F3;
|
|
|
+ }
|
|
|
+ .list_item{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ width: 100%;
|
|
|
+ padding: 24rpx 0;
|
|
|
+ border-bottom: 2rpx solid #F3F3F3;
|
|
|
+ .created_progress_status{
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ .created_by{
|
|
|
+ flex:1;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ .item_progress{
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ width: 308rpx;
|
|
|
+ .progress_bar{
|
|
|
+ width: 200rpx;
|
|
|
+ height: 12rpx;
|
|
|
+ background-color: #E2E6F0;
|
|
|
+ border-radius: 14rpx;
|
|
|
+ position: relative;
|
|
|
+ .bar_width{
|
|
|
+ position: absolute;
|
|
|
+ left:0;
|
|
|
+ top:0;
|
|
|
+ height: 12rpx;
|
|
|
+ background-color: #2E64FA;
|
|
|
+ border-radius: 14rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .progress_label{
|
|
|
+ flex: 1;
|
|
|
+ margin-left: 24rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .item_status{
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 96rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 24rpx;
|
|
|
+ margin-left: 68rpx;
|
|
|
+ &.await{
|
|
|
+ background-color: rgba(46,100,250,0.1);
|
|
|
+ color: #2E64FA;
|
|
|
+ }
|
|
|
+ &.finish{
|
|
|
+ background-color: rgba(43,198,68,0.1);
|
|
|
+ color: #2BC644;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .item_time{
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ align-items: center;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap:16rpx;
|
|
|
+ margin-top: 18rpx;
|
|
|
+ .time{
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|
