对内容进行修改

This commit is contained in:
libowei 2023-12-07 15:09:23 +08:00
parent 88fc295058
commit 1f09e30dfe
2 changed files with 211 additions and 120 deletions

View File

@ -9,14 +9,14 @@
</view>
<view class="substance">
<!-- 渲染Text -->
<text :class="{ 'active': itemActive[item.id] === TextIndex }" v-for="(TextItem,TextIndex) in item.tests"
:key="TextIndex" @click="Bages_addActive(TextIndex,item.id,TextItem) ">
<text :class="{ 'active': itemActive[item.id] === TextIndex || TextIndex ==0 }" v-for="(TextItem,TextIndex) in item.tests"
:key="TextIndex" @click="Bages_addActive(TextIndex,item.id) ">
{{TextItem.name}}
</text>
</view>
<!-- 渲染part -->
<view v-for="(TextItem,TextIndex) in item.tests" :key="TextIndex">
<view v-for="(partitem,partindex) in TextItem.parts" :key="partindex" v-if="itemActive[item.id] === TextIndex || TextIndex==0">
<view v-for="(partitem,partindex) in TextItem.parts" :key="partindex" v-if="itemActive[item.id] === TextIndex || TextIndex===0">
<view>
<view class="Part1">
<view class="imaflex" @click="icon(partitem.id)">
@ -57,7 +57,6 @@
data() {
return {
listHearing: [],
itemActive: {}, //
checked: [],
subsets: [],
itemActive: {},
@ -74,16 +73,12 @@
hearing() {
this.$u.get('https://api.admin-v2.langsi.online/admin-api/ielts/paper/list', {classify: 1}).then(res => {
this.listHearing = res.data
let arr =res.data
for(let a of arr){
a.active = 'Test 1'
}
this.listHearing= arr
})
},
// test
Bages_addActive(idex, id,TextItem) {
this.itemActive[id] = idex
Bages_addActive(TextIndex, id) {
this.itemActive[id] = TextIndex
this.$forceUpdate()

View File

@ -126,61 +126,140 @@
</view>
</view>
<!-- 作业安排 -->
<view>
<view>
<view>
<view class="view_tubiao">
<view class="view_title">作业安排</view>
<view class="view_tb">
</view>
<view>
<view class="Ielts">IELTS 18</view>
<view style="background-color: #fff; padding: 32rpx 40rpx;">
<u-time-line>
<u-time-line-item nodeTop="2">
<template v-slot:content>
<view>
<view style="display: flex;">
<view class="view_add">
<text>+</text>
<view class="Test">Test 2</view>
<view class="greener">听力</view>
</view>
<view class="u-order-desc">
<text>Part 1多选题</text>
</view>
</view>
</template>
</u-time-line-item>
<u-time-line-item nodeTop="2">
<template v-slot:content>
<view>
<view style="display: flex;">
<view class="Test">Test 2</view>
<view class="greener">听力</view>
</view>
<view class="u-order-desc">
<text>Part 1多选题</text>
</view>
</view>
</template>
</u-time-line-item>
<u-time-line-item nodeTop="2">
<template v-slot:content>
<view>
<view style="display: flex;">
<view class="Test">Test 2</view>
<view class="greener">听力</view>
</view>
<view class="u-order-desc">
<text>Part 1多选题</text>
</view>
</view>
</template>
</u-time-line-item>
</u-time-line>
</view>
</view>
</view>
<view>
<view class="Ielts">IELTS 18</view>
<view style="background-color: #fff; padding: 32rpx 40rpx;">
<view style="display: flex; align-items: center;">
<view class="yuandi"></view>
<view class="Test">Test 2</view>
<view class="ellipses">听力</view>
</view>
<view class="u-order-desc">
<text>Part 1多选题</text>
</view>
</view>
</view>
<view>
<view>
<view class="Ielts">IELTS 18</view>
<view style="background-color: #fff; padding: 32rpx 40rpx;">
<u-time-line>
<u-time-line-item nodeTop="2">
<template v-slot:content>
<view>
<view style="display: flex;">
<view class="Test">Test 2</view>
<view class="erotic">听力</view>
</view>
<view class="u-order-desc">
<text>Part 1多选题</text>
</view>
</view>
</template>
</u-time-line-item>
<u-time-line-item nodeTop="2">
<template v-slot:content>
<view>
<view style="display: flex;">
<view class="Test">Test 2</view>
<view class="erotic">听力</view>
</view>
<view class="u-order-desc">
<text>Part 1多选题</text>
</view>
</view>
</template>
</u-time-line-item>
</u-time-line>
</view>
</view>
</view>
<!--按钮 -->
<view style="display: flex; justify-content: center; margin-top: 32rpx;">
<view class="increase">
<u-icon name="plus"></u-icon>
添加
</view>
</view>
</view>
<view class="view_operation">
<view>
<view class="view_ap">
<text>听力-IELTS 18-Test 2</text>
<view class="view_qbs">
<view class="view_qb">
<image src="https://file.langsi.online/yasiimg/web/static/uUikvKyGaRLDLWE2KYjv" mode=""></image>
</view>
<view class="view_qb">
<image src="https://file.langsi.online/yasiimg/web/static/uvmKnUiil91Tfpd570Ev" mode=""></image>
</view>
</view>
</view>
<view></view>
</view>
<view class="view_English">
<view>Part 1Questions1-10</view>
<view>Complete the notes below.</view>
</view>
</view>
</view>
<view>
<view class="view_operation">
<view>
<view class="view_ap">
<text>听力-IELTS 18-Test 2</text>
<view class="view_qbs">
<view class="view_qb">
<image src="https://file.langsi.online/yasiimg/web/static/uUikvKyGaRLDLWE2KYjv" mode=""></image>
</view>
<view class="view_qb">
<image src="https://file.langsi.online/yasiimg/web/static/uvmKnUiil91Tfpd570Ev" mode=""></image>
</view>
</view>
</view>
<view></view>
</view>
<view class="view_English">
<view>Part 1Questions1-10</view>
<view>Complete the notes below.</view>
</view>
</view>
</view>
</view>
<!-- 截止时间 -->
<view>
@ -191,7 +270,7 @@
<view class="view_form">
<u-picker mode="time" v-model="show" :params="params" @confirm="printValue"></u-picker>
<u-form-item prop="times">
<u-input v-model="form.times" :type="type" :border="border" placeholder="选择作业截止的时间" @click="show = true" />
<u-input v-model="form.times" :type="type" :border="border" placeholder="选择作业截止的时间" @click="show = true" placeholder-style="color: rgba(46,73,117,0.4);font-size: 24rpx;"/>
</u-form-item>
@ -204,7 +283,7 @@
<view class="view_title">描述</view>
</view>
<view class="view_textrea">
<textarea value="" placeholder="输入你的描述... " />
<textarea value="" placeholder="输入你的描述... "placeholder-style="color: rgba(46,73,117,0.4);font-size: 24rpx;"/>
</view>
</view>
</view>
@ -253,6 +332,10 @@
}
</script>
<style lang="scss" scoped>
// 穿
::v-deep .u-dot {
background: #2D7CE6 !important;
}
.concent {
width: 100vw;
background: linear-gradient(183deg, #F0F6FF 0%, #FAFAFA 100%);
@ -285,28 +368,6 @@
margin-top: 46rpx;
}
.view_tb {
display: flex;
justify-content: center;
align-items: center;
height: 52rpx;
background: #FFFFFF;
border-radius: 26rpx 26rpx 26rpx 26rpx;
opacity: 1;
border: 2rpx solid #F1F1F1;
}
.view_add {
font-size: 24rpx;
font-family: 'PingFang';
font-weight: 500;
color: #F18F21;
padding: 14rpx 24rpx;
text {
margin-right: 5rpx;
}
}
.class_bj {
margin-top: 16rpx;
}
@ -322,6 +383,12 @@
height: 56rpx;
margin-right: 12rpx;
}
.Ielts{
font-size: 40rpx;
font-weight: 400;
color: #2E4975;
margin: 20rpx 0;
}
.class_ys {
width: 215rpx;
@ -342,58 +409,18 @@
font-weight: 500;
color: #072F5A;
}
.view_qb {
width: 24rpx;
height: 24rpx;
margin-left: 40rpx;
}
.view_qbs {
display: flex;
}
.view_ap {
display: flex;
justify-content: space-between;
text {
font-size: 28rpx;
font-weight: 800;
color: #2E4975;
}
}
.view_operation {
margin-top: 20rpx;
background: #FFFFFF;
border-radius: 20rpx 20rpx 20rpx 20rpx;
padding: 34rpx 32rpx;
}
.view_English {
margin-top: 24rpx;
padding: 20rpx;
background: #F9F9F9;
border-radius: 20rpx 20rpx 20rpx 20rpx;
view {
font-size: 24rpx;
font-weight: 500;
color: #2E4975;
}
}
.view_form{
padding: 26rpx 32rpx;
padding: 0rpx 32rpx;
background: #FFFFFF;
margin-top: 16rpx;
border-radius: 20rpx 20rpx 20rpx 20rpx;
}
.view_textrea{
height: 260rpx;
background: #FFFFFF;
border-radius: 20rpx 20rpx 20rpx 20rpx;;
// padding: 26rpx 32rpx;
margin-top:16rpx;
padding: 28rpx 32rpx;
}
.view_button{
width: 93.1%;
@ -414,4 +441,73 @@
box-shadow: 0rpx -10rpx 16rpx 0rpx rgba(202,202,202,0.25);
margin-top: 8rpx;
}
.u-node {
width: 44rpx;
height: 44rpx;
border-radius: 100rpx;
display: flex;
justify-content: center;
align-items: center;
background: #d0d0d0;
}
.u-order-desc {
padding: 20rpx;
background: #F9F9F9;
border-radius: 20rpx 20rpx 20rpx 20rpx;
margin: 12rpx 0rpx;
text {
font-size: 24rpx;
font-weight: 500;
color: #2E4975;
}
}
.u-order-time {
color: rgb(200, 200, 200);
font-size: 26rpx;
}
.yuandi{
width: 18rpx;
height: 18rpx;
background: #2D7CE6;
border-radius: 24rpx 24rpx 24rpx 24rpx;
}
.Test{
font-size: 28rpx;
font-weight: 800;
color: #2E4975;
margin-left: 12rpx;
}
.ellipses{
font-size: 20rpx;
background: rgba(242,170,2,0.2);
margin-left: 12rpx;
padding: 8rpx 20rpx;
color: #F2AA02;
border-radius: 20rpx 20rpx 20rpx 20rpx;
}
.erotic{
font-size: 20rpx;
background: rgba(242,63,170,0.1);
margin-left: 12rpx;
padding: 8rpx 20rpx;
color: #F23FEB;
border-radius: 20rpx 20rpx 20rpx 20rpx;
}
.greener{
font-size: 20rpx;
background: rgba(27,225,178,0.1);
margin-left: 12rpx;
padding: 8rpx 20rpx;
color: #1BE1B2;
border-radius: 20rpx 20rpx 20rpx 20rpx;
}
.increase{
padding: 26rpx 125rpx;
color: #FFFFFF;
background-color: #F39852;
border-radius: 20rpx 20rpx 20rpx 20rpx;
text-align: center;
}
</style>