chuangte/smartmeter-app
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
0dbc55ce51
smartmeter-app/pages/Mystudent/Mystudent.vue

971 lines
27 KiB
Vue
Raw Normal View History

新建分支提交
2023-12-05 16:45:28 +08:00
<template>
<view class="pagebox">
<view class="topbox">
页面渲染 数据处理
2023-12-26 22:40:39 +08:00
<u-navbar title="LILY" :border-bottom="false" :background="bgc" title-color='#FFFFFF' title-size='36'
height='36'></u-navbar>
新建分支提交
2023-12-05 16:45:28 +08:00
<view class="echarts">
<!-- <mpvue-echarts id="main" ref="pieChart" :echarts="echarts" @onInit="initChart" /> -->
页面渲染 数据处理
2023-12-26 22:40:39 +08:00
<l-echart ref="chart" @finished="initChart"></l-echart>
新建分支提交
2023-12-05 16:45:28 +08:00
</view>
<view class="infobigbox">
<view class="logo">
页面渲染 数据处理
2023-12-26 22:40:39 +08:00
<image src="https://file.langsi.online/yasiimg/web/static/ubtuFZZ3dgSoSc444qIg" style="z-index: 0;">
</image>
新建分支提交
2023-12-05 16:45:28 +08:00
</view>
<view class="infobox">
<view class="infobox_top">
<view class="infobox_top_left">
<view class="infobox_top_lefttop">
今日学习（分）
</view>
<view class="infobox_top_leftbot">
页面渲染 数据处理
2023-12-26 22:40:39 +08:00
{{workinfo.todayStudyPoint}}
新建分支提交
2023-12-05 16:45:28 +08:00
</view>
</view>
<view class="infobox_top_right">
<view class="infobox_top_righttop">
较昨日
</view>
页面渲染 数据处理
2023-12-26 22:40:39 +08:00
<view class="infobox_top_rightbot" style="color: #2D7CE6; " v-if="isup">
<view class="iconfont icon-xiangshangjiantoucuxiao">
</view>
<view class="text">
{{beforyes}}%
</view>
</view>
<view class="infobox_top_rightbot" v-if="beforyes==0" style="color: #2E4975;">
<view class="text">
{{beforyes}}%
</view>
</view>
<view class="infobox_top_rightbot" v-if="isup==false">
<view class="iconfont icon-xiangxiajiantoucuxiao">
</view>
<view class="text">
{{beforyes}}%
</view>
新建分支提交
2023-12-05 16:45:28 +08:00
</view>
</view>
</view>
<view class="infobox_bot">
<view class="infobox_bot_cont">
<view class="infobox_bot_cont_top">
总学习（时）
</view>
<view class="infobox_bot_cont_bot">
320
</view>
</view>
<view class="infobox_bot_cont">
<view class="infobox_bot_cont_top">
今日做题（道）
</view>
<view class="infobox_bot_cont_bot">
4300
</view>
</view>
<view class="infobox_bot_cont">
<view class="infobox_bot_cont_top">
今日问AI（次）
</view>
<view class="infobox_bot_cont_bot">
页面渲染 数据处理
2023-12-26 22:40:39 +08:00
{{workinfo.askAiNum}}
新建分支提交
2023-12-05 16:45:28 +08:00
</view>
</view>
</view>
</view>
</view>
<view class="study_info_box">
<view class="study_info_top">
<view class="study_info_top_left">
作业完成情况
</view>
页面渲染 数据处理
2023-12-26 22:40:39 +08:00
<!-- <view class="study_info_top_right">
新建分支提交
2023-12-05 16:45:28 +08:00
本周
<view class="iconfont icon-arow_down"></view>
页面渲染 数据处理
2023-12-26 22:40:39 +08:00
</view> -->
新建分支提交
2023-12-05 16:45:28 +08:00
</view>
<view class="study_info_cont_box">
页面渲染 数据处理
2023-12-26 22:40:39 +08:00
<view class="study_info_cont" v-for="(item, index) in sdydata" :key="index">
<view class="data" v-if="index==1">Sun</view>
<view class="data" v-if="index==2">Mon</view>
<view class="data" v-if="index==3">Tus</view>
<view class="data" v-if="index==4">Wed</view>
<view class="data" v-if="index==5">Thu</view>
<view class="data" v-if="index==6">Fri</view>
<view class="data" v-if="index==7">Sat</view>
新建分支提交
2023-12-05 16:45:28 +08:00
<view class="study_box">
页面渲染 数据处理
2023-12-26 22:40:39 +08:00
<view class="study" v-for="(items,indexs) in item" :key="indexs"
:style="{ backgroundColor: items.background }"></view>
新建分支提交
2023-12-05 16:45:28 +08:00
</view>
</view>
</view>
</view>
页面渲染 数据处理
2023-12-26 22:40:39 +08:00
新建分支提交
2023-12-05 16:45:28 +08:00
</view>
<view class="work_info">
<view class="work_info_top">
<view class="work_info_top_text">
作业记录
</view>
样式修改
2024-01-02 22:30:22 +08:00
<view class="work_info_top_right" v-if="false">
新建分支提交
2023-12-05 16:45:28 +08:00
作业记录
<view class="iconfont icon-arow_down"></view>
</view>
</view>
作业渲染
2024-01-03 18:02:54 +08:00
<view class="card_bigbox">
<view class="work_card" v-for="(item,index ) in works" :key="index" @click="toworkdetail(item.id)"
:class="item.status === 1 ? 'act1' : (item.status === '2' ? 'act3' : 'default')">
<view class="work_card_top">
<view class="work_card_top_left">
<view class="work_card_top_left_img">
<image src="https://file.langsi.online/yasiimg/web/static/u07sCQb6mW6OSamVr1Va"></image>
</view>
<view class="txt" v-html="highlightSearch(item.name)">
</view>
新建分支提交
2023-12-05 16:45:28 +08:00
</view>
作业渲染
2024-01-03 18:02:54 +08:00
<view class="work_card_top_right" :class="item.status == 1 ? 'act2' : ''">
进行中
新建分支提交
2023-12-05 16:45:28 +08:00
</view>
</view>
作业渲染
2024-01-03 18:02:54 +08:00
<view class="work_card_cont_box">
<!-- v-if="indexs<3" -->
<view class="work_card_cont" v-for="(items,indexs ) in item.infos" :key="indexs" v-if="indexs<3">
<view class="work_card_cont_point"></view>
<view class="work_card_cont_text" v-if="items.classify==1||items.classify==2">
{{items.paperName}}-{{items.testName}}-{{items.partName}}
</view>
<view class="work_card_cont_text" v-if="items.classify==4" style="display: inline-flex;flex-wrap: nowrap;">
{{items.moduleName}}-{{items.partName}}-<view style="width:140rpx; overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{items.questionName}}</view>-跟读
</view>
<view class="work_card_cont_text" v-if="items.classify==3">
{{items.paperName}}-{{items.testName}}-{{items.partName}}
</view>
<view class="work_card_cont_tag" v-if="items.classify==1"
style="background: rgba(27,225,178,0.1);color: #1BE1B2;">
听力
</view>
<view class="work_card_cont_tag" v-if="items.classify==2"
style="background: rgba(242,182,42,0.2);color: #F2AA02 ;">
阅读
</view>
<view class="work_card_cont_tag" v-if="items.classify==3"
style="background:rgba(63,122,242,0.2);color: #3F7AF2 ;">
写作
</view>
<view class="work_card_cont_tag" v-if="items.classify==4"
style="background: rgba(242,63,235,0.1);color: #F23FEB ;">
口语
</view>
新建分支提交
2023-12-05 16:45:28 +08:00
</view>
作业渲染
2024-01-03 18:02:54 +08:00
<view class="work_card_cont" v-if="item.infos.length>3">
<view class="work_card_cont_point" style="margin-right: 10rpx;"></view>
<view class="work_card_cont_point" style="margin-right: 10rpx;"></view>
<view class="work_card_cont_point"></view>
新建分支提交
2023-12-05 16:45:28 +08:00
</view>
</view>
作业渲染
2024-01-03 18:02:54 +08:00
<view class="work_card_info_box">
<view class="work_card_info_top">
<view class="work_card_info_topimg">
<image src="https://file.langsi.online/yasiimg/web/static/uw2jJ5BraHhwDDaIZ0MC"></image>
</view>
描述
新建分支提交
2023-12-05 16:45:28 +08:00
</view>
作业渲染
2024-01-03 18:02:54 +08:00
<view class="work_card_info_bot">
{{item.des}}
新建分支提交
2023-12-05 16:45:28 +08:00
</view>
</view>
作业渲染
2024-01-03 18:02:54 +08:00
<view class="work_card_info_box">
<view class="work_card_info_top">
<view class="work_card_info_topimg">
<image src="https://file.langsi.online/yasiimg/web/static/uhApaomh5maFP29oecp3">
</image>
</view>
时间
新建分支提交
2023-12-05 16:45:28 +08:00
</view>
作业渲染
2024-01-03 18:02:54 +08:00
<view class="work_card_info_bot">
{{item.doneTime}}
<!-- {{ formatTimestamp(item.createTime) }} -->
新建分支提交
2023-12-05 16:45:28 +08:00
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
页面渲染 数据处理
2023-12-26 22:40:39 +08:00
import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
// import echarts from '@/common/echarts.min2.js' /*chart.min.js为在线定制*/
import mpvueEcharts from '@/components/mpvue-echarts/src/echarts.vue'
import LEchart from '@/uni_modules/lime-echart/components/l-echart/l-echart.vue';
export default {
components: {
mpvueEcharts,
LEchart
},
data() {
return {
// echarts,
totalScore: 10,
grammaticalScore: 8,
vocabularyScore: 8,
pronounceScore: 8,
fluencyScore: 8,
bgc: {
backgroundColor: "transparent",
},
sdydata: [],
isalready: true,
id: 1523,
workinfo: {},
orgworkinfo: {},
beforyes: '',
作业渲染
2024-01-03 18:02:54 +08:00
isup: '',
works:{}
页面渲染 数据处理
2023-12-26 22:40:39 +08:00
// https://file.langsi.online/yasiimg/web/static/uBHiWpVS8LQdX241DdjX
}
},
onLoad(option) {
新建分支提交
2023-12-05 16:45:28 +08:00
页面渲染 数据处理
2023-12-26 22:40:39 +08:00
// this.changedata()
this.getinfo()
},
新建分支提交
2023-12-05 16:45:28 +08:00
页面渲染 数据处理
2023-12-26 22:40:39 +08:00
methods: {
作业渲染
2024-01-03 18:02:54 +08:00
highlightSearch(name) {
// 使用正则表达式替换匹配到的 searchKeyword 为带有颜色的文字
if (this.searchKeyword) {
const regex = new RegExp(this.searchKeyword, 'gi');
return name.replace(regex, match => `<span style="color: #2D7CE6 ;">${match}</span>`);
}
return name;
},
页面渲染 数据处理
2023-12-26 22:40:39 +08:00
getinfo() {
this.$u.get(
`https://api.admin-v2.langsi.online/admin-api/classroom/work-record/statistics?memberId=${this.id}`
).then(res => {
新建分支提交
2023-12-05 16:45:28 +08:00
页面渲染 数据处理
2023-12-26 22:40:39 +08:00
if (res.code == 0) {
this.workinfo = res.data
this.sdydata = this.workinfo.weekWorkStatistics
this.orgworkinfo = JSON.parse(JSON.stringify(res.data));
const percentageChange = ((this.workinfo.todayStudyPoint - this.workinfo
.yesterdayStudyPoint) / Math.abs(this.workinfo.yesterdayStudyPoint)) * 100;
// Determine whether it's an improvement or decline
this.isup = percentageChange > 0;
// Assign the absolute percentage change to this.beforyes
this.beforyes = Math.abs(percentageChange);
this.changedata()
// this.classlist = res.data.list
// this.isloding = false
}
})
作业渲染
2024-01-03 18:02:54 +08:00
this.$u.get(
`https://api.admin-v2.langsi.online/admin-api/classroom/work-member/list?memberId=${501}`
).then(res => {
if (res.code == 0) {
this.works = res.data
// this.classlist = res.data.list
// this.isloding = false
}
})
页面渲染 数据处理
2023-12-26 22:40:39 +08:00
},
async initChart() {
let _this = this
const option = {
color: ['#d1f7ff', '#95c6fd'],
legend: { // 图例组件
新建分支提交
2023-12-05 16:45:28 +08:00
},
页面渲染 数据处理
2023-12-26 22:40:39 +08:00
backgroundColor: 'transparent',
radar: [{ // 雷达图坐标系组件，只适用于雷达图。
样式修改
2024-01-02 22:30:22 +08:00
center: ['50%', '55%'],
页面渲染 数据处理
2023-12-26 22:40:39 +08:00
// 圆中心坐标，数组的第一项是横坐标，第二项是纵坐标。[ default: ['50%', '50%'] ]
样式修改
2024-01-02 22:30:22 +08:00
radius: '60rpx',
页面渲染 数据处理
2023-12-26 22:40:39 +08:00
// 圆的半径，数组的第一项是内半径，第二项是外半径。
startAngle: 90,
// 坐标系起始角度，也就是第一个指示器轴的角度。[ default: 90 ]
name: { // (圆外的标签)雷达图每个指示器名称的配置项。
formatter: '{value}',
textStyle: {
fontSize: '24rpx',
color: '#4DA1FF'
}
新建分支提交
2023-12-05 16:45:28 +08:00
},
页面渲染 数据处理
2023-12-26 22:40:39 +08:00
nameGap: 5,
// 指示器名称和指示器轴的距离。[ default: 15 ]
splitNumber: 1,
// (这里是圆的环数)指示器轴的分割段数。[ default: 5 ]
shape: 'circle',
// 雷达图绘制类型，支持 'polygon'(多边形) 和 'circle'(圆)。[ default: 'polygon' ]
axisLine: { // (圆内的几条直线)坐标轴轴线相关设置
lineStyle: {
color: '#daedff',
// 坐标轴线线的颜色。
width: 1,
// 坐标轴线线宽。
type: 'solid',
// 坐标轴线线的类型。
}
新建分支提交
2023-12-05 16:45:28 +08:00
},
页面渲染 数据处理
2023-12-26 22:40:39 +08:00
splitLine: { // (这里是指所有圆环)坐标轴在 grid 区域中的分隔线。
lineStyle: {
color: ['#daedff', '#daedff', '#daedff', '#daedff', '#daedff', '#91c5ff'],
// 分隔线颜色
width: 1,
// 分隔线线宽
type: ['solid', 'dashed'],
// 坐标轴线线的类型
}
新建分支提交
2023-12-05 16:45:28 +08:00
},
页面渲染 数据处理
2023-12-26 22:40:39 +08:00
splitArea: { // 坐标轴在 grid 区域中的分隔区域，默认不显示。
show: true,
areaStyle: { // 分隔区域的样式设置。
color: ' #E1F0FF',
// 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
}
新建分支提交
2023-12-05 16:45:28 +08:00
},
页面渲染 数据处理
2023-12-26 22:40:39 +08:00
indicator: [{ // 雷达图的指示器，用来指定雷达图中的多个变量（维度）,跟data中 value 对应
name: '平均成绩/分' + ' ' + Number(_this.totalScore).toFixed(1),
// 指示器名称
max: 100,
// 指示器的最大值，可选，建议设置
color: '#FFFFFF ' // 标签特定的颜色。
新建分支提交
2023-12-05 16:45:28 +08:00
},
页面渲染 数据处理
2023-12-26 22:40:39 +08:00
{
name: '写作' + ' ' + Number(_this.grammaticalScore).toFixed(1),
max: 100,
color: '#FFFFFF' // 标签特定的颜色。
新建分支提交
2023-12-05 16:45:28 +08:00
},
页面渲染 数据处理
2023-12-26 22:40:39 +08:00
{
name: '阅读' + ' ' + Number(_this.vocabularyScore).toFixed(1),
max: 100,
color: '#FFFFFF' // 标签特定的颜色。
新建分支提交
2023-12-05 16:45:28 +08:00
},
页面渲染 数据处理
2023-12-26 22:40:39 +08:00
{
name: '口语' + ' ' + Number(_this.pronounceScore).toFixed(1),
max: 100,
color: '#FFFFFF' // 标签特定的颜色。
},
{
name: '听力' + ' ' + Number(_this.fluencyScore).toFixed(1),
max: 100,
color: '#FFFFFF' // 标签特定的颜色。
}
]
}],
series: [{
name: '雷达图',
// 系列名称,用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
type: 'radar',
// 系列类型: 雷达图
itemStyle: { // 折线拐点标志的样式。
normal: { // 普通状态时的样式
lineStyle: {
新建分支提交
2023-12-05 16:45:28 +08:00
width: 2,
页面渲染 数据处理
2023-12-26 22:40:39 +08:00
color: '#3F9AFF',
新建分支提交
2023-12-05 16:45:28 +08:00
},
页面渲染 数据处理
2023-12-26 22:40:39 +08:00
opacity: 1
新建分支提交
2023-12-05 16:45:28 +08:00
},
页面渲染 数据处理
2023-12-26 22:40:39 +08:00
emphasis: { // 高亮时的样式
lineStyle: {
width: 0,
color: '#60abff',
},
opacity: 1
}
},
data: [
// { // 雷达图的数据是多变量（维度）的
// name: '',
// // 数据项名称
// value: [100, 100, 100, 100, 100],
// // 其中的value项数组是具体的数据，每个值跟 radar.indicator 一一对应。
// symbol: 'circle',
// // 单个数据标记的图形。
// symbolSize: 0,
// // 单个数据标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。
// // label: { // 单个拐点文本的样式设置
// // normal: {
// // show: false,
// // // 单个拐点文本的样式设置。[ default: false ]
// // position: 'top',
// // // 标签的位置。[ default: top ]
// // distance: 5,
// // // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。[ default: 5 ]
// // color: '#d1f7ff',
// // // 文字的颜色。如果设置为 'auto'，则为视觉映射得到的颜色，如系列色。[ default: "#fff" ]
// // fontSize: 14,
// // // 文字的字体大小
// // formatter: function(params) {
// // return params.value;
// // }
// // }
// // },
// itemStyle: { // 单个拐点标志的样式设置。
// normal: {
// borderColor: '#d1f7ff',
// // 拐点的描边颜色。[ default: '#000' ]
// borderWidth: 0,
// // 拐点的描边宽度，默认不描边。[ default: 0 ]
// }
// },
// lineStyle: { // 单项线条样式。
// normal: {
// opacity: 0.5,// 图形透明度
// width: 2,
// color: '#d1f7ff',
// },
// emphasis: { // 高亮时的样式
// width: 2,
// color: '#d1f7ff',
// opacity: 1
// }
// },
// areaStyle: { // 单项区域填充样式
// normal: {
// color: '#d1f7ff' // 填充的颜色。[ default: "#000" ]
// }
// }
// },
{
name: '',
value: [Number(_this.grammaticalScore).toFixed(1) * 10, Number(_this
.grammaticalScore).toFixed(1) * 10, Number(_this
.vocabularyScore).toFixed(1) * 10, Number(_this
.pronounceScore).toFixed(1) * 10, Number(_this
.fluencyScore).toFixed(1) * 10],
symbol: 'circle',
symbolSize: 0,
// label: {
// normal: {
// show: false,
// position: 'top',
// distance: 5,
// color: '#95c6fd',
// fontSize: 14,
// formatter: function(params) {
// return params.value;
// }
// }
// },
itemStyle: {
normal: {
borderColor: '##3F9AFF',
borderWidth: 0,
}
},
lineStyle: {
normal: {
opacity: 0.5,
width: 2,
color: '#2D7CE6',
},
emphasis: { // 高亮时的样式
width: 2,
color: '#2D7CE6',
opacity: 1
}
},
areaStyle: {
normal: {
color: '#2D7CE6'
}
新建分支提交
2023-12-05 16:45:28 +08:00
}
}
页面渲染 数据处理
2023-12-26 22:40:39 +08:00
]
}, ]
};
const chart = await this.$refs.chart.init(echarts);
chart.setOption(option)
//return chart
},
新建分支提交
2023-12-05 16:45:28 +08:00
页面渲染 数据处理
2023-12-26 22:40:39 +08:00
changedata() {
作业安排页面添加渲染
2024-01-10 22:27:43 +08:00
// this.sdydata[1][0].times = 10
页面渲染 数据处理
2023-12-26 22:40:39 +08:00
for (const key in this.sdydata) {
if (this.sdydata.hasOwnProperty(key)) {
const items = this.sdydata[key];
新建分支提交
2023-12-05 16:45:28 +08:00
页面渲染 数据处理
2023-12-26 22:40:39 +08:00
// Loop through each item in the structure
for (const item of items) {
// Compare times with maxTimes and calculate the percentage
const percentage = (item.times / this.workinfo.maxTimes) * 100;
新建分支提交
2023-12-05 16:45:28 +08:00
页面渲染 数据处理
2023-12-26 22:40:39 +08:00
// Get the background color using the getColorByPercentage method
const backgroundColor = this.getColorByPercentage(percentage);
新建分支提交
2023-12-05 16:45:28 +08:00
页面渲染 数据处理
2023-12-26 22:40:39 +08:00
// Add the background property to the item
item.background = backgroundColor;
}
}
新建分支提交
2023-12-05 16:45:28 +08:00
}
页面渲染 数据处理
2023-12-26 22:40:39 +08:00
console.log(this.sdydata, 'sdydatasdydata');
},
getColorByPercentage(percentage) {
// 将百分比转换为透明度
const alpha = percentage / 100;
// 返回颜色值，使用计算得到的透明度
return `rgba(61, 202, 211, ${alpha})`;
新建分支提交
2023-12-05 16:45:28 +08:00
}
}
}
</script>
页面渲染 数据处理
2023-12-26 22:40:39 +08:00
<style lang="scss">
page {
background: #F7F9FC;
padding-bottom: 50rpx;
}
新建分支提交
2023-12-05 16:45:28 +08:00
页面渲染 数据处理
2023-12-26 22:40:39 +08:00
.pagebox {
新建分支提交
2023-12-05 16:45:28 +08:00
width: 750rpx;
页面渲染 数据处理
2023-12-26 22:40:39 +08:00
.topbox {
// display: flex;
// flex-wrap: wrap;
padding: 0 32rpx;
width: 750rpx;
样式修改
2024-01-02 22:30:22 +08:00
padding-bottom: 20rpx;
border-radius: 20rpx;
// height: 1345.92rpx;
页面渲染 数据处理
2023-12-26 22:40:39 +08:00
background-image: url("https://file.langsi.online/yasiimg/web/static/uBHiWpVS8LQdX241DdjX");
background-size: cover;
background-position: center;
.echarts {
margin-top: 70rpx;
margin-left: auto;
margin-right: 20rpx;
width: 400rpx;
height: 300rpx;
// background:transparent;
新建分支提交
2023-12-05 16:45:28 +08:00
}
页面渲染 数据处理
2023-12-26 22:40:39 +08:00
.infobigbox {
新建分支提交
2023-12-05 16:45:28 +08:00
width: 686rpx;
页面渲染 数据处理
2023-12-26 22:40:39 +08:00
position: relative;
新建分支提交
2023-12-05 16:45:28 +08:00
页面渲染 数据处理
2023-12-26 22:40:39 +08:00
.logo {
position: absolute;
left: 20rpx;
top: -342rpx;
width: 220rpx;
height: 485.82rpx;
z-index: 0 !important;
}
新建分支提交
2023-12-05 16:45:28 +08:00
页面渲染 数据处理
2023-12-26 22:40:39 +08:00
.infobox {
position: relative;
width: 686rpx;
新建分支提交
2023-12-05 16:45:28 +08:00
页面渲染 数据处理
2023-12-26 22:40:39 +08:00
background: rgba(255, 255, 255, 0.7);
border-radius: 20rpx 20rpx 20rpx 20rpx;
新建分支提交
2023-12-05 16:45:28 +08:00
页面渲染 数据处理
2023-12-26 22:40:39 +08:00
border: 2rpx solid #FFFFFF;
// z-index: 999;
新建分支提交
2023-12-05 16:45:28 +08:00
页面渲染 数据处理
2023-12-26 22:40:39 +08:00
.infobox_top {
display: flex;
flex-wrap: nowrap;
// align-items: center;
.infobox_top_left {
width: 196rpx;
margin-top: 48rpx;
margin-left: 100rpx;
.infobox_top_lefttop {
font-size: 28rpx;
font-family: 'PingFang';
font-weight: 400;
color: #2E4975;
}
新建分支提交
2023-12-05 16:45:28 +08:00
页面渲染 数据处理
2023-12-26 22:40:39 +08:00
.infobox_top_leftbot {
font-size: 76rpx;
font-family: 'PingFang';
font-weight: 800;
color: #2E4975;
margin-top: 12rpx;
}
新建分支提交
2023-12-05 16:45:28 +08:00
}
页面渲染 数据处理
2023-12-26 22:40:39 +08:00
.infobox_top_right {
margin-left: 112rpx;
margin-top: 78rpx;
.infobox_top_righttop {
font-size: 24rpx;
font-family: 'PingFang', 'PingFang';
font-weight: 800;
color: #2E4975;
}
.infobox_top_rightbot {
display: flex;
flex-wrap: nowrap;
margin-top: 4rpx;
align-items: flex-end;
/* Align items at the bottom */
color: #F18F21;
.icon-xiangshangjiantoucuxiao {
font-size: 16rpx;
margin-bottom: 12rpx;
}
.icon-xiangxiajiantoucuxiao {
font-size: 16rpx;
margin-bottom: 12rpx;
}
.text {
font-size: 40rpx;
font-family: 'PingFang', 'PingFang';
font-weight: 800;
}
}
新建分支提交
2023-12-05 16:45:28 +08:00
}
}
页面渲染 数据处理
2023-12-26 22:40:39 +08:00
.infobox_bot {
margin-left: 32rpx;
margin-top: 32rpx;
margin-bottom: 32rpx;
width: 622rpx;
height: 126rpx;
background: #F6F6F6;
border-radius: 20rpx 20rpx 20rpx 20rpx;
display: flex;
flex-wrap: nowrap;
justify-content: space-around;
align-items: center;
.infobox_bot_cont {
width: 140rpx;
display: flex;
flex-wrap: wrap;
justify-content: center;
.infobox_bot_cont_top {
font-size: 20rpx;
font-family: 'PingFang', 'PingFang';
font-weight: 500;
color: #2E4975;
}
新建分支提交
2023-12-05 16:45:28 +08:00
页面渲染 数据处理
2023-12-26 22:40:39 +08:00
.infobox_bot_cont_bot {
margin-top: 8rpx;
font-size: 36rpx;
font-family: 'PingFang', 'PingFang';
font-weight: 800;
color: #2E4975;
}
新建分支提交
2023-12-05 16:45:28 +08:00
}
页面渲染 数据处理
2023-12-26 22:40:39 +08:00
}
}
}
新建分支提交
2023-12-05 16:45:28 +08:00
页面渲染 数据处理
2023-12-26 22:40:39 +08:00
.study_info_box {
// position: absolute;
margin-top: 20rpx;
width: 686rpx;
padding: 32rpx;
// height: 365rpx;
background: #FFFFFF;
border-radius: 20rpx 20rpx 20rpx 20rpx;
.study_info_top {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
.study_info_top_left {
font-size: 28rpx;
font-family: 'PingFang', 'PingFang';
font-weight: 800;
color: #2E4975;
}
.study_info_top_right {
display: flex;
flex-wrap: nowrap;
align-items: center;
font-size: 24rpx;
font-family: 'PingFang', 'PingFang';
font-weight: 500;
color: rgba(46, 73, 117, 0.65);
line-height: 38rpx;
.icon-arow_down {
margin-left: 8rpx;
font-size: 16rpx;
color: #2E4975;
新建分支提交
2023-12-05 16:45:28 +08:00
}
}
}
页面渲染 数据处理
2023-12-26 22:40:39 +08:00
.study_info_cont_box {
样式修改
2024-01-02 22:30:22 +08:00
margin-bottom: 20rpx;
新建分支提交
2023-12-05 16:45:28 +08:00
margin-top: 32rpx;
display: flex;
页面渲染 数据处理
2023-12-26 22:40:39 +08:00
// flex-wrap: warp;
flex-wrap: wrap;
新建分支提交
2023-12-05 16:45:28 +08:00
页面渲染 数据处理
2023-12-26 22:40:39 +08:00
.study_info_cont {
margin-top: 4rpx;
新建分支提交
2023-12-05 16:45:28 +08:00
display: flex;
页面渲染 数据处理
2023-12-26 22:40:39 +08:00
flex-wrap: nowrap;
align-content: center;
新建分支提交
2023-12-05 16:45:28 +08:00
页面渲染 数据处理
2023-12-26 22:40:39 +08:00
// justify-content: space-between;
.data {
width: 40rpx;
新建分支提交
2023-12-05 16:45:28 +08:00
font-size: 20rpx;
页面渲染 数据处理
2023-12-26 22:40:39 +08:00
font-family: 'PingFang', 'PingFang';
新建分支提交
2023-12-05 16:45:28 +08:00
font-weight: 500;
color: #2E4975;
}
页面渲染 数据处理
2023-12-26 22:40:39 +08:00
.study_box {
margin-left: 12rpx;
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
.study {
margin-right: 2rpx;
width: 57.4rpx;
height: 32.41rpx;
background: #F6F6F6;
}
新建分支提交
2023-12-05 16:45:28 +08:00
}
}
}
页面渲染 数据处理
2023-12-26 22:40:39 +08:00
新建分支提交
2023-12-05 16:45:28 +08:00
}
页面渲染 数据处理
2023-12-26 22:40:39 +08:00
新建分支提交
2023-12-05 16:45:28 +08:00
}
页面渲染 数据处理
2023-12-26 22:40:39 +08:00
.work_info {
margin-top: 40rpx;
padding: 0 32rpx;
新建分支提交
2023-12-05 16:45:28 +08:00
页面渲染 数据处理
2023-12-26 22:40:39 +08:00
.work_info_top {
新建分支提交
2023-12-05 16:45:28 +08:00
display: flex;
flex-wrap: nowrap;
align-items: center;
页面渲染 数据处理
2023-12-26 22:40:39 +08:00
justify-content: space-between;
新建分支提交
2023-12-05 16:45:28 +08:00
页面渲染 数据处理
2023-12-26 22:40:39 +08:00
.work_info_top_text {
font-size: 32rpx;
font-family: 'PingFang', 'PingFang';
新建分支提交
2023-12-05 16:45:28 +08:00
font-weight: 800;
color: #2E4975;
}
页面渲染 数据处理
2023-12-26 22:40:39 +08:00
.work_info_top_right {
新建分支提交
2023-12-05 16:45:28 +08:00
display: flex;
flex-wrap: nowrap;
align-items: center;
font-size: 24rpx;
页面渲染 数据处理
2023-12-26 22:40:39 +08:00
font-family: 'PingFang', 'PingFang';
新建分支提交
2023-12-05 16:45:28 +08:00
font-weight: 500;
页面渲染 数据处理
2023-12-26 22:40:39 +08:00
color: rgba(7, 47, 90, 0.6);
新建分支提交
2023-12-05 16:45:28 +08:00
.icon-arow_down {
margin-left: 8rpx;
font-size: 16rpx;
color: #2E4975;
}
}
}
作业渲染
2024-01-03 18:02:54 +08:00
.card_bigbox {
.work_card {
margin-top: 20rpx;
新建分支提交
2023-12-05 16:45:28 +08:00
display: flex;
作业渲染
2024-01-03 18:02:54 +08:00
flex-wrap: wrap;
width: 686rpx;
padding: 32rpx;
background: #FFFFFF;
页面渲染 数据处理
2023-12-26 22:40:39 +08:00
border-radius: 20rpx 20rpx 20rpx 20rpx;
作业渲染
2024-01-03 18:02:54 +08:00
border-left: 8rpx solid #F18F21;
.work_card_top {
width: 100%;
页面渲染 数据处理
2023-12-26 22:40:39 +08:00
display: flex;
flex-wrap: nowrap;
align-items: center;
作业渲染
2024-01-03 18:02:54 +08:00
justify-content: space-between;
.work_card_top_left {
display: flex;
flex-wrap: nowrap;
align-items: center;
font-size: 28rpx;
页面渲染 数据处理
2023-12-26 22:40:39 +08:00
font-family: 'PingFang', 'PingFang';
作业渲染
2024-01-03 18:02:54 +08:00
font-weight: 800;
页面渲染 数据处理
2023-12-26 22:40:39 +08:00
color: #2E4975;
作业渲染
2024-01-03 18:02:54 +08:00
.work_card_top_left_img {
margin-right: 8rpx;
width: 38rpx;
height: 32rpx;
}
.txt{
font-size: 28rpx;
font-family: 'PingFang', 'PingFang';
font-weight: 800;
color: #2E4975;
}
页面渲染 数据处理
2023-12-26 22:40:39 +08:00
}
作业渲染
2024-01-03 18:02:54 +08:00
.work_card_top_right {
font-size: 24rpx;
页面渲染 数据处理
2023-12-26 22:40:39 +08:00
font-family: 'PingFang', 'PingFang';
font-weight: 500;
color: #F18F21;
}
作业渲染
2024-01-03 18:02:54 +08:00
.act2 {
color: #2D7CE6;
}
页面渲染 数据处理
2023-12-26 22:40:39 +08:00
}
作业渲染
2024-01-03 18:02:54 +08:00
.work_card_cont_box {
margin-top: 16rpx;
padding: 24rpx;
页面渲染 数据处理
2023-12-26 22:40:39 +08:00
width: 100%;
作业渲染
2024-01-03 18:02:54 +08:00
background: #F9F9F9;
border-radius: 20rpx 20rpx 20rpx 20rpx;
.work_card_cont:last-child {
margin-bottom: 0;
}
.work_card_cont {
margin-bottom: 24rpx;
display: flex;
flex-wrap: nowrap;
align-items: center;
.work_card_cont_point {
width: 8rpx;
height: 8rpx;
background: #2E4975;
border-radius: 50%;
}
.work_card_cont_text {
margin-left: 20rpx;
font-size: 24rpx;
font-family: 'PingFang', 'PingFang';
font-weight: 500;
color: #2E4975;
}
.work_card_cont_tag {
margin-left: 30rpx;
padding: 8rpx 18rpx;
background: #FFF2E4;
border-radius: 20rpx 20rpx 20rpx 20rpx;
font-size: 20rpx;
font-family: 'PingFang', 'PingFang';
font-weight: 500;
color: #F18F21;
}
页面渲染 数据处理
2023-12-26 22:40:39 +08:00
}
新建分支提交
2023-12-05 16:45:28 +08:00
}
作业渲染
2024-01-03 18:02:54 +08:00
.work_card_info_box {
display: flex;
flex-wrap: wrap;
margin-top: 22rpx;
width: 100%;
.work_card_info_top {
display: flex;
flex-wrap: nowrap;
align-items: center;
width: 100%;
font-size: 20rpx;
font-family: 'PingFang', 'PingFang';
font-weight: 500;
color: rgba(46, 73, 117, 0.6);
.work_card_info_topimg {
margin-right: 8rpx;
width: 18.74rpx;
height: 20rpx;
}
}
.work_card_info_bot {
margin-top: 4rpx;
font-size: 24rpx;
font-family: 'PingFang', 'PingFang';
font-weight: 500;
color: #2E4975;
}
新建分支提交
2023-12-05 16:45:28 +08:00
}
}
作业渲染
2024-01-03 18:02:54 +08:00
.act1 {
border-left: 8rpx solid #2D7CE6;
}
.act3 {
border-left: 8rpx solid #DFDFDF;
}
新建分支提交
2023-12-05 16:45:28 +08:00
}
作业渲染
2024-01-03 18:02:54 +08:00
页面渲染 数据处理
2023-12-26 22:40:39 +08:00
.act1 {
border-left: 8rpx solid #2D7CE6;
新建分支提交
2023-12-05 16:45:28 +08:00
}
}
}
页面渲染 数据处理
2023-12-26 22:40:39 +08:00
</style>
Reference in New Issue Copy Permalink