981 lines
25 KiB
Vue
981 lines
25 KiB
Vue
<template>
|
||
<view class="pagebox">
|
||
<view class="topbox">
|
||
<u-navbar title="LILY"
|
||
:border-bottom="false"
|
||
:background="bgc"
|
||
title-color='#FFFFFF'
|
||
title-size='36'
|
||
height='36'></u-navbar>
|
||
<view class="echarts">
|
||
<!-- <mpvue-echarts id="main" ref="pieChart" :echarts="echarts" @onInit="initChart" /> -->
|
||
<l-echart ref="chart"
|
||
@finished="initChart"></l-echart>
|
||
</view>
|
||
<view class="infobigbox">
|
||
<view class="logo">
|
||
<image src="https://file.langsi.online/yasiimg/web/static/ubtuFZZ3dgSoSc444qIg"
|
||
style="z-index: 0;"></image>
|
||
</view>
|
||
<view class="infobox">
|
||
|
||
<view class="infobox_top">
|
||
<view class="infobox_top_left">
|
||
<view class="infobox_top_lefttop">
|
||
今日学习（分）
|
||
</view>
|
||
<view class="infobox_top_leftbot">
|
||
320
|
||
</view>
|
||
</view>
|
||
<view class="infobox_top_right">
|
||
<view class="infobox_top_righttop">
|
||
较昨日
|
||
</view>
|
||
<view class="infobox_top_rightbot">
|
||
20%
|
||
</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">
|
||
43
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="study_info_box">
|
||
|
||
<view class="study_info_top">
|
||
<view class="study_info_top_left">
|
||
作业完成情况
|
||
</view>
|
||
<view class="study_info_top_right">
|
||
本周
|
||
<view class="iconfont icon-arow_down"></view>
|
||
</view>
|
||
</view>
|
||
<view class="study_info_cont_box">
|
||
|
||
<view class="study_info_cont">
|
||
<view class="data">Mon</view>
|
||
<view class="study_box">
|
||
<view class="study"
|
||
v-for="(item, index) in sdydata"
|
||
:key="index"
|
||
:style="{ backgroundColor: item.background }"></view>
|
||
</view>
|
||
|
||
</view>
|
||
<view class="study_info_cont">
|
||
<view class="data">Tue</view>
|
||
<view class="study_box">
|
||
<view class="study"
|
||
v-for="(item, index) in sdydata"
|
||
:key="index"
|
||
:style="{ backgroundColor: item.background }"></view>
|
||
</view>
|
||
|
||
</view>
|
||
<view class="study_info_cont">
|
||
<view class="data">Wed</view>
|
||
<view class="study_box">
|
||
<view class="study"
|
||
v-for="(item, index) in sdydata"
|
||
:key="index"
|
||
:style="{ backgroundColor: item.background }"></view>
|
||
</view>
|
||
|
||
</view>
|
||
<view class="study_info_cont">
|
||
<view class="data">Thu</view>
|
||
<view class="study_box">
|
||
<view class="study"
|
||
v-for="(item, index) in sdydata"
|
||
:key="index"
|
||
:style="{ backgroundColor: item.background }"></view>
|
||
</view>
|
||
|
||
</view>
|
||
<view class="study_info_cont">
|
||
<view class="data">Fri</view>
|
||
<view class="study_box">
|
||
<view class="study"
|
||
v-for="(item, index) in sdydata"
|
||
:key="index"
|
||
:style="{ backgroundColor: item.background }"></view>
|
||
</view>
|
||
|
||
</view>
|
||
<view class="study_info_cont">
|
||
<view class="data">Sat</view>
|
||
<view class="study_box">
|
||
<view class="study"
|
||
v-for="(item, index) in sdydata"
|
||
:key="index"
|
||
:style="{ backgroundColor: item.background }"></view>
|
||
</view>
|
||
|
||
</view>
|
||
<view class="study_info_cont">
|
||
<view class="data">Sun</view>
|
||
<view class="study_box">
|
||
<view class="study"
|
||
v-for="(item, index) in sdydata"
|
||
:key="index"
|
||
:style="{ backgroundColor: item.background }"></view>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
|
||
|
||
</view>
|
||
|
||
</view>
|
||
<view class="work_info">
|
||
<view class="work_info_top">
|
||
<view class="work_info_top_text">
|
||
作业记录
|
||
</view>
|
||
<view class="work_info_top_right">
|
||
作业记录
|
||
<view class="iconfont icon-arow_down"></view>
|
||
</view>
|
||
</view>
|
||
<view class="work_card">
|
||
<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>
|
||
<view class="work_card_top_right">
|
||
进行中
|
||
</view>
|
||
</view>
|
||
<view class="work_card_cont_box">
|
||
<view class="work_card_cont">
|
||
<view class="work_card_cont_point"></view>
|
||
<view class="work_card_cont_text">
|
||
IELTS 18-Test 2-Part 1
|
||
</view>
|
||
<view class="work_card_cont_tag">
|
||
听力
|
||
</view>
|
||
</view>
|
||
<view class="work_card_cont">
|
||
<view class="work_card_cont_point"></view>
|
||
<view class="work_card_cont_text">
|
||
IELTS 18-Test 2-Part 1
|
||
</view>
|
||
<view class="work_card_cont_tag">
|
||
听力
|
||
</view>
|
||
</view>
|
||
<view class="work_card_cont">
|
||
<view class="work_card_cont_point"></view>
|
||
<view class="work_card_cont_text">
|
||
IELTS 18-Test 2-Part 1
|
||
</view>
|
||
<view class="work_card_cont_tag">
|
||
听力
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<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>
|
||
描述
|
||
</view>
|
||
<view class="work_card_info_bot">
|
||
最好在中午十二点之前完成交上作业，过期不候
|
||
</view>
|
||
</view>
|
||
<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>
|
||
时间
|
||
</view>
|
||
|
||
<view class="work_card_info_bot">
|
||
02-12 12:00
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="work_card"
|
||
:class="isalready == true ? 'act1' : ''">
|
||
<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>
|
||
<view class="work_card_top_right"
|
||
:class="isalready == true ? 'act2' : ''">
|
||
进行中
|
||
</view>
|
||
</view>
|
||
<view class="work_card_cont_box">
|
||
<view class="work_card_cont">
|
||
<view class="work_card_cont_point"></view>
|
||
<view class="work_card_cont_text">
|
||
IELTS 18-Test 2-Part 1
|
||
</view>
|
||
<view class="work_card_cont_tag">
|
||
听力
|
||
</view>
|
||
</view>
|
||
<view class="work_card_cont">
|
||
<view class="work_card_cont_point"></view>
|
||
<view class="work_card_cont_text">
|
||
IELTS 18-Test 2-Part 1
|
||
</view>
|
||
<view class="work_card_cont_tag">
|
||
听力
|
||
</view>
|
||
</view>
|
||
<view class="work_card_cont">
|
||
<view class="work_card_cont_point"></view>
|
||
<view class="work_card_cont_text">
|
||
IELTS 18-Test 2-Part 1
|
||
</view>
|
||
<view class="work_card_cont_tag">
|
||
听力
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<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>
|
||
描述
|
||
</view>
|
||
<view class="work_card_info_bot">
|
||
最好在中午十二点之前完成交上作业，过期不候
|
||
</view>
|
||
</view>
|
||
<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>
|
||
时间
|
||
</view>
|
||
|
||
<view class="work_card_info_bot">
|
||
02-12 12:00
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
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,
|
||
// https://file.langsi.online/yasiimg/web/static/uBHiWpVS8LQdX241DdjX
|
||
}
|
||
},
|
||
onLoad(option) {
|
||
|
||
|
||
|
||
this.changedata()
|
||
},
|
||
|
||
methods: {
|
||
async initChart() {
|
||
let _this = this
|
||
|
||
const option = {
|
||
color: ['#d1f7ff', '#95c6fd'],
|
||
legend: { // 图例组件
|
||
|
||
},
|
||
backgroundColor: 'transparent',
|
||
radar: [{ // 雷达图坐标系组件，只适用于雷达图。
|
||
center: ['50%', '50%'],
|
||
// 圆中心坐标，数组的第一项是横坐标，第二项是纵坐标。[ default: ['50%', '50%'] ]
|
||
radius: '70rpx',
|
||
// 圆的半径，数组的第一项是内半径，第二项是外半径。
|
||
startAngle: 90,
|
||
// 坐标系起始角度，也就是第一个指示器轴的角度。[ default: 90 ]
|
||
name: { // (圆外的标签)雷达图每个指示器名称的配置项。
|
||
formatter: '{value}',
|
||
textStyle: {
|
||
fontSize: '24rpx',
|
||
color: '#4DA1FF'
|
||
}
|
||
},
|
||
nameGap: 5,
|
||
// 指示器名称和指示器轴的距离。[ default: 15 ]
|
||
splitNumber: 1,
|
||
// (这里是圆的环数)指示器轴的分割段数。[ default: 5 ]
|
||
shape: 'circle',
|
||
// 雷达图绘制类型，支持 'polygon'(多边形) 和 'circle'(圆)。[ default: 'polygon' ]
|
||
axisLine: { // (圆内的几条直线)坐标轴轴线相关设置
|
||
lineStyle: {
|
||
color: '#daedff',
|
||
// 坐标轴线线的颜色。
|
||
width: 1,
|
||
// 坐标轴线线宽。
|
||
type: 'solid',
|
||
// 坐标轴线线的类型。
|
||
}
|
||
},
|
||
splitLine: { // (这里是指所有圆环)坐标轴在 grid 区域中的分隔线。
|
||
lineStyle: {
|
||
color: ['#daedff', '#daedff', '#daedff', '#daedff', '#daedff', '#91c5ff'],
|
||
// 分隔线颜色
|
||
width: 1,
|
||
// 分隔线线宽
|
||
type: ['solid', 'dashed'],
|
||
// 坐标轴线线的类型
|
||
}
|
||
},
|
||
splitArea: { // 坐标轴在 grid 区域中的分隔区域，默认不显示。
|
||
show: true,
|
||
areaStyle: { // 分隔区域的样式设置。
|
||
color: ' #E1F0FF',
|
||
// 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
|
||
}
|
||
},
|
||
indicator: [
|
||
{ // 雷达图的指示器，用来指定雷达图中的多个变量（维度）,跟data中 value 对应
|
||
name: '平均成绩/分' + ' ' + Number(_this.totalScore).toFixed(1),
|
||
// 指示器名称
|
||
max: 100,
|
||
// 指示器的最大值，可选，建议设置
|
||
color: '#FFFFFF ' // 标签特定的颜色。
|
||
},
|
||
{
|
||
name: '写作' + ' ' + Number(_this.grammaticalScore).toFixed(1),
|
||
max: 100,
|
||
color: '#FFFFFF' // 标签特定的颜色。
|
||
},
|
||
{
|
||
name: '阅读' + ' ' + Number(_this.vocabularyScore).toFixed(1),
|
||
max: 100,
|
||
color: '#FFFFFF' // 标签特定的颜色。
|
||
},
|
||
{
|
||
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: {
|
||
width: 2,
|
||
color: '#3F9AFF',
|
||
},
|
||
opacity: 1
|
||
},
|
||
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'
|
||
}
|
||
}
|
||
}]
|
||
},
|
||
]
|
||
};
|
||
const chart = await this.$refs.chart.init(echarts);
|
||
chart.setOption(option)
|
||
//return chart
|
||
},
|
||
|
||
changedata() {
|
||
this.sdydata = [];
|
||
|
||
for (let i = 0; i < 10; i++) {
|
||
const isStudy = Math.random() < 0.5;
|
||
let totalNum = "0";
|
||
let alreadyNum = "0";
|
||
|
||
if (isStudy) {
|
||
totalNum = String(Math.floor(Math.random() * 100));
|
||
alreadyNum = String(Math.floor(Math.random() * (parseInt(totalNum) + 1)));
|
||
}
|
||
|
||
this.sdydata.push({
|
||
isStudy,
|
||
totalNum,
|
||
alreadyNum,
|
||
});
|
||
}
|
||
|
||
for (let i = 0; i < this.sdydata.length; i++) {
|
||
const item = this.sdydata[i];
|
||
if (item.isStudy) {
|
||
const percentage = (parseInt(item.alreadyNum) / parseInt(item.totalNum)) * 100;
|
||
const color = this.getColorByPercentage(percentage);
|
||
item.background = color;
|
||
} else {
|
||
item.background = '#F6F6F6';
|
||
}
|
||
}
|
||
|
||
console.log(this.sdydata, 'this.sdydata');
|
||
},
|
||
getColorByPercentage(percentage) {
|
||
// 将百分比转换为透明度
|
||
const alpha = percentage / 100;
|
||
|
||
// 返回颜色值，使用计算得到的透明度
|
||
return `rgba(61, 202, 211, ${alpha})`;
|
||
}
|
||
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background: #F7F9FC;
|
||
padding-bottom: 50rpx;
|
||
}
|
||
|
||
|
||
.pagebox {
|
||
|
||
width: 750rpx;
|
||
|
||
.topbox {
|
||
// display: flex;
|
||
// flex-wrap: wrap;
|
||
padding: 0 32rpx;
|
||
width: 750rpx;
|
||
height: 1345.92rpx;
|
||
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;
|
||
}
|
||
|
||
.infobigbox {
|
||
width: 686rpx;
|
||
position: relative;
|
||
|
||
.logo {
|
||
position: absolute;
|
||
left: 20rpx;
|
||
top: -342rpx;
|
||
width: 220rpx;
|
||
height: 485.82rpx;
|
||
z-index: 0 !important;
|
||
}
|
||
|
||
.infobox {
|
||
position: relative;
|
||
width: 686rpx;
|
||
|
||
background: rgba(255, 255, 255, 0.7);
|
||
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||
|
||
border: 2rpx solid #FFFFFF;
|
||
// z-index: 999;
|
||
|
||
.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;
|
||
|
||
}
|
||
|
||
.infobox_top_leftbot {
|
||
font-size: 76rpx;
|
||
font-family: 'PingFang';
|
||
font-weight: 800;
|
||
color: #2E4975;
|
||
margin-top: 12rpx;
|
||
}
|
||
}
|
||
|
||
.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 {
|
||
margin-top: 4rpx;
|
||
font-size: 40rpx;
|
||
font-family:'PingFang','PingFang';
|
||
font-weight: 800;
|
||
color: #F18F21;
|
||
}
|
||
}
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.infobox_bot_cont_bot {
|
||
margin-top: 8rpx;
|
||
font-size: 36rpx;
|
||
font-family:'PingFang','PingFang';
|
||
font-weight: 800;
|
||
color: #2E4975;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.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;
|
||
}
|
||
}
|
||
}
|
||
|
||
.study_info_cont_box {
|
||
margin-top: 32rpx;
|
||
display: flex;
|
||
// flex-wrap: warp;
|
||
flex-wrap: wrap;
|
||
|
||
.study_info_cont {
|
||
margin-top: 4rpx;
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
align-content: center;
|
||
|
||
// justify-content: space-between;
|
||
.data {
|
||
width: 40rpx;
|
||
font-size: 20rpx;
|
||
font-family:'PingFang','PingFang';
|
||
font-weight: 500;
|
||
color: #2E4975;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
}
|
||
|
||
.work_info {
|
||
|
||
margin-top: 40rpx;
|
||
padding: 0 32rpx;
|
||
|
||
.work_info_top {
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.work_info_top_text {
|
||
font-size: 32rpx;
|
||
font-family:'PingFang','PingFang';
|
||
font-weight: 800;
|
||
color: #2E4975;
|
||
}
|
||
|
||
.work_info_top_right {
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
align-items: center;
|
||
font-size: 24rpx;
|
||
font-family:'PingFang','PingFang';
|
||
font-weight: 500;
|
||
color: rgba(7, 47, 90, 0.6);
|
||
|
||
.icon-arow_down {
|
||
margin-left: 8rpx;
|
||
font-size: 16rpx;
|
||
color: #2E4975;
|
||
}
|
||
}
|
||
}
|
||
|
||
.work_card {
|
||
margin-top: 20rpx;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
width: 686rpx;
|
||
padding: 32rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||
|
||
border-left: 8rpx solid #F18F21;
|
||
|
||
.work_card_top {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.work_card_top_left {
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
align-items: center;
|
||
font-size: 28rpx;
|
||
font-family:'PingFang','PingFang';
|
||
font-weight: 800;
|
||
color: #2E4975;
|
||
|
||
.work_card_top_left_img {
|
||
margin-right: 8rpx;
|
||
width: 38rpx;
|
||
height: 32rpx;
|
||
}
|
||
}
|
||
|
||
.work_card_top_right {
|
||
font-size: 24rpx;
|
||
font-family:'PingFang','PingFang';
|
||
font-weight: 500;
|
||
color: #F18F21;
|
||
}
|
||
|
||
.act2 {
|
||
color: #2D7CE6;
|
||
}
|
||
}
|
||
|
||
.work_card_cont_box {
|
||
margin-top: 16rpx;
|
||
padding: 24rpx;
|
||
width: 100%;
|
||
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;
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
.work_card_info_box {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
margin-top: 22rpx;
|
||
|
||
.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;
|
||
}
|
||
}
|
||
}
|
||
|
||
.act1 {
|
||
border-left: 8rpx solid #2D7CE6;
|
||
}
|
||
}
|
||
}</style>
|