From c176db9cc5f42c03a9bb02537a2c2031372a7a1b Mon Sep 17 00:00:00 2001 From: taoxu <2622874537@qq.com> Date: Tue, 19 Dec 2023 23:00:57 +0800 Subject: [PATCH] =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E4=BF=AE=E6=94=B9=20echarts?= =?UTF-8?q?=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/index/index.vue | 633 ++++++++++++++++++------------------------ 1 file changed, 273 insertions(+), 360 deletions(-) diff --git a/pages/index/index.vue b/pages/index/index.vue index 7882b02..09dd28e 100644 --- a/pages/index/index.vue +++ b/pages/index/index.vue @@ -1,150 +1,100 @@ <template> <!-- 头部代码 --> <view class="view_by"> - <view> - <u-navbar :is-back="false" title='首页' title-color="#000" :border-bottom="false" :background="true" id="navbar"> - </u-navbar> - <view class="header_button"> - <u-button type="primary" shape="circle" :hair-line="false" class="custom-style">学生</u-button> - <u-button class="custom-style" shape="circle" :hair-line="false">班级</u-button> + <u-navbar :is-back="false" title='首页' title-color="#2E4975" :border-bottom="false" :background="true" + id="navbar"> + </u-navbar> + <view class="top_message"> + <view class="top_message_left"> + <view class="top_message_left_top"> + 32 + </view> + <view class="top_message_left_bot"> + 已完成人数(人) + </view> + </view> + <view class="top_message_cent"> + + </view> + <view class="top_message_right"> + <view class="top_message_right_top"> + 90% + </view> + <view class="top_message_right_bot"> + 已完成作业正确率 + </view> </view> </view> - <!-- 登录之后显示的页面 --> - <view v-if="flag"> - <view class="view_body"> - <view class="content_box"> - <view class="view_text">32</view> - <view>已完成人数(人)</view> + <view class="work_msa"> + <view class="work_msa_top"> + <view class="work_msa_top_left"> + 作业完成情况 </view> - <view class="content_box"> - <view class="view_text">90%</view> - <view>已完成作业正确率</view> + <view class="work_msa_top_right"> + 本周 <view class="iconfont icon-arrow-down"></view> </view> </view> - <!-- 作业完成情况 --> - <view class="echarts_bar"> - <view> - <text>作业完成情况</text> - <view class="echarts_text"> - <view>本周</view> - - </view> - </view> - - <view class="echarts"> - <l-echart ref="chart" @finished="initChart"></l-echart> - </view> - - </view> - </view> - <!-- 没有数据显示的页面 --> - <view> - <view class="deer"> - <view class="deer_images"> - <image src="https://file.langsi.online/yasiimg/web/static/udGRdnpSfgV3LMD8Ksuv" mode=""></image> - </view> - <view class="deer_right"> - <view class="deer_text">当前暂无学习数据,快去布置作业吧!</view> - <view class="deer_button"> - <view>去安排</view> - <view class="r_image"><image src="https://file.langsi.online/yasiimg/web/static/uITFZ6vUIiA0P2KBz1i8" mode=""></image></view> - </view> - </view> - - </view> - <view class="echarts_bar"> - <view> - <text>作业完成情况</text> - <view class="echarts_text"> - <view>本周</view> - - </view> - </view> - <view class="echarts"> + <!-- <mpvue-echarts id="main" ref="pieChart" :echarts="echarts" @onInit="initChart" /> --> <l-echart ref="chart" @finished="initChart"></l-echart> </view> + </view> + <div class="data"> + 8月31日<view class="iconfont icon-arrow-down"></view> + </div> + <view class="class_infobox"> + <view class="class_info" style="width:80rpx ;"> + + <view class="class_info_bot"> + 21 + </view> + <view class="class_info_top"> + 完成人数 + </view> + </view> + <view class="class_info"> + <view class="class_info_bot"> + 6 + </view> + <view class="class_info_top"> + 平均成绩/分 + </view> + + </view> + <view class="class_info"> + + <view class="class_info_bot"> + 80% - </view> - </view> - <!-- 底部区域 --> - <view v-if="flag"> - <view class="date"> - 8月31日 + </view> + <view class="class_info_top"> + 作业正确率 + </view> </view> - - <view class="box_rate"> - <view class="rate_item"> - <view class="number"> - 21 - </view> - <view class="text"> - 完成人数 - </view> + </view> + <div class="card"> + <view class="card_left"> + <view class="stu_img"> + <image src="https://file.langsi.online/yasiimg/web/static/udWNTRG6GulmTtgPRQ49" mode=""></image> </view> - <view class="rate_item"> - <view class="number"> - 6 + <view class="stu_info"> + <view class="stu_info_top"> + 口语单科模考 </view> - <view class="text"> - 平均成绩/分 - </view> - </view> - <view class="rate_item"> - <view class="number"> - 80% - </view> - <view class="text"> - 作业正确率 + <view class="stu_info_bot"> + 李斯丹妮 </view> </view> </view> - <view> - <view class="view_botton"> - <view class="view_spoken"> - <view> - <image src="https://file.langsi.online/yasiimg/web/static/u80EhqyvMfcOaaSyK09X" mode=""></image> - </view> - <view class="view_span"> - <text>口语单科模考</text> - <text>李斯丹妮</text> - </view> - </view> - <view class="view_text2"> - <view>正确率<text class="text2">80%</text></view> - <text>2023/02/23 12:00</text> - </view> + <view class="card_right"> + <view class="card_right_top"> + 正确率 80% </view> - <view class="view_botton"> - <view class="view_spoken"> - <view> - <image src="https://file.langsi.online/yasiimg/web/static/u80EhqyvMfcOaaSyK09X" mode=""></image> - </view> - <view class="view_span"> - <text>口语单科模考</text> - <text>李斯丹妮</text> - </view> - </view> - <view class="view_text2"> - <view>正确率<text class="text2">80%</text></view> - <text>2023/02/23 12:00</text> - </view> + <view class="card_right_bot"> + 2023/02/23 12:00 </view> - </view> - <!--底部导航栏 --> - </view> - <!-- 没有数据显示的区域 --> - <view class="zu_footer"> - - <view class="date">8月31日</view> - <view class="zu_zp"> - <view class="zu_image"><image src="https://file.langsi.online/yasiimg/web/static/uFgs4acAUC68weaKB9Yi" mode=""></image></view> - <view class="zu_text">暂无学习记录,快去安排作业吧!</view> - </view> - - - </view> + </div> </view> </template> @@ -158,7 +108,7 @@ }, data() { return { - flag:false + flag: true } }, methods: { @@ -166,19 +116,38 @@ let _this = this const option = { + grid: { + left: 0, + right: 0, + top: 10, + bottom: 0, + containLabel: true, + }, xAxis: { type: 'category', - data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] + data: ['Mon', '', 'Wed', '', 'Fri', '', 'Sun'] }, yAxis: { type: 'value', - boundaryGap: ['10%', '20%',] + min: 0, + max: 100, + interval: 20, + axisLabel: { + formatter: '{value}%' + } }, series: [{ - data: [120, 200, 150, 80, 70, 110, 130], - type: 'bar' + data: [90, 45, 66, 82, 37, 65, 40], + type: 'bar', + itemStyle: { + normal: { + color: '#2D7CE6', + barBorderRadius: [5, 5, 0, 0] // 设置四个角的半径,都为10像素 + } + } }] - } + }; + const chart = await this.$refs.chart.init(echarts); chart.setOption(option) @@ -189,280 +158,224 @@ } </script> -<style lang="scss" scoped> - .view_by { +<style lang="scss"> + page { background: linear-gradient(180deg, #E1EEFF 0%, #FFFFFF 100%); - padding: 32rpx; - + } + + .view_by { + padding: 0 32rpx; + + .top_message { - .header_button { display: flex; - justify-content: space-evenly; - align-items: center; + flex-wrap: nowrap; + justify-content: space-between; - - .custom-style { - width: 180rpx; - height: 72rpx; - - - } - - .active { - background: #2D7CE6; - color: #fff; - box-shadow: inset 0rpx 8rpx 16rpx 0rpx rgba(255, 255, 255, 0.35); - } - - } - - .view_body { - display: flex; - justify-content: center; - align-items: center; - margin-top: 52rpx; - - .content_box { - flex: 1; - } - - - - .content_box:first-child { - - border-right: 2rpx solid rgba(0, 0, 0, 0.11); - } - - .view_text { - font-size: 76rpx; - font-family: PingFang SC, PingFang SC; - font-weight: 500; - color: #2E4975; - - - } - - view { + .top_message_left { + margin-left: 60rpx; display: flex; - flex-direction: column; - align-items: center; + flex-wrap: wrap; + .top_message_left_top { + width: 100%; + text-align: center; + font-size: 76rpx; + font-family: PingFang SC, PingFang SC; + font-weight: 800; + color: #2E4975; + } + + .top_message_left_bot { + width: 100%; + text-align: center; + font-size: 28rpx; + font-family: PingFang SC, PingFang SC; + font-weight: 500; + color: #2E4975; + } } + .top_message_cent { + width: 0; + height: 146rpx; + border-radius: 0rpx 0rpx 0rpx 0rpx; + margin-left: 2rpx; + border: 2rpx solid rgba(0, 0, 0, 0.11); + } + + .top_message_right { + margin-right: 60rpx; + display: flex; + flex-wrap: wrap; + + .top_message_right_top { + width: 100%; + text-align: center; + font-size: 76rpx; + font-family: PingFang SC, PingFang SC; + font-weight: 800; + color: #2E4975; + } + + .top_message_right_bot { + width: 100%; + text-align: center; + font-size: 28rpx; + font-family: PingFang SC, PingFang SC; + font-weight: 500; + color: #2E4975; + } + } } - .echarts_bar { + .work_msa { + padding: 32rpx; + margin-top: 32rpx; width: 686rpx; height: 459rpx; background: #FFFFFF; border-radius: 20rpx 20rpx 20rpx 20rpx; - opacity: 1; - margin-top: 32rpx; - padding: 32rpx; - view { + .work_msa_top { display: flex; + flex-wrap: nowrap; justify-content: space-between; - text { + // justify-content: center; + .work_msa_top_left { font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: 800; color: #2E4975; } + .work_msa_top_right { + display: flex; + align-items: center; + flex-wrap: nowrap; + font-size: 24rpx; + font-family: PingFang SC, PingFang SC; + font-weight: 500; + color: rgba(46, 73, 117, 0.65); + + .icon-arrow-down { + margin-left: 8rpx; + font-size: 24rpx; + } + } } - - - } - - - .box_rate { + .echarts { + // width: 100%; + // height: 80%; + width: 622rpx; + height: 350rpx; + } + .data{ display: flex; - justify-content: center; + flex-wrap: nowrap; align-items: center; - padding: 30rpx; - background: linear-gradient(179deg, rgba(255, 237, 223, 0.65) 0%, #FFFFFF 100%); - border-radius: 18rpx 18rpx 18rpx 18rpx; - - .rate_item { - flex: 1; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - - } - - .number { - font-size: 28rpx; - font-family: PingFang SC, PingFang SC; - font-weight: 800; - color: #2D7CE6; - } - - .text { - font-size: 20rpx; - font-family: PingFang SC, PingFang SC; - font-weight: 500; - color: rgba(7, 47, 90, 0.5); - } - } - - .date { + margin-top: 32rpx; font-size: 24rpx; font-family: PingFang SC, PingFang SC; font-weight: 800; color: #2E4975; - padding: 30rpx; + + .icon-arrow-down { + color: #2E4975 ; + margin-left: 8rpx; + font-size: 24rpx; + } } - - .view_botton { + .class_infobox { + margin-top: 20rpx; display: flex; + flex-wrap: nowrap; align-items: center; - justify-content: space-between; - height: 124rpx; - background: #fff; + justify-content: space-around; + width: 686rpx; + height: 128rpx; + background: linear-gradient(179deg, rgba(255,237,223,0.65) 0%, #FFFFFF 100%); border-radius: 20rpx 20rpx 20rpx 20rpx; - margin: 20rpx 0rpx; - padding: 24rpx; - - .view_spoken { + + .class_info { + width: 110rpx; display: flex; - align-items: center; - - .view_span { - display: flex; - flex-direction: column; - margin-left: 16rpx; + flex-wrap: wrap; + justify-content: center; + + .class_info_top { + margin-top: 12rpx; + font-size: 20rpx; + font-family: 'PingFang', 'PingFang'; + font-weight: 500; + color: rgba(7, 47, 90, 0.5); } - - .view_span text:nth-child(1) { + + .class_info_bot { + font-size: 28rpx; - font-family: PingFang SC, PingFang SC; - font-weight: bold; - color: #072F5A; - margin-bottom: 7rpx; - + font-family: 'PingFang', 'PingFang'; + font-weight: 800; + color: #2D7CE6; } - - .view_span text:nth-child(2) { + } + } + .card{ + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 20rpx; + padding: 24rpx; + width: 686rpx; + height: 124rpx; + background: #FFFFFF; + border-radius: 20rpx 20rpx 20rpx 20rpx; + .card_left{ + display: flex; + flex-wrap: nowrap; + .stu_img{ + width: 76rpx; + height: 76rpx; + border-radius: 50%; + } + .stu_info{ + margin-left: 16rpx; + .stu_info_top{ + font-size: 28rpx; + font-family: PingFang SC, PingFang SC; + font-weight: bold; + color: #072F5A; + } + .stu_info_bot{ + margin-top: 4rpx; + font-size: 20rpx; + font-family: PingFang SC, PingFang SC; + font-weight: 500; + color: rgba(46,73,117,0.5); + } + } + } + .card_right{ + + .card_right_top{ + text-align: right; font-size: 20rpx; font-family: PingFang SC, PingFang SC; font-weight: 500; - color: rgba(46, 73, 117, 0.5); - margin-bottom: 7rpx; - } - } - - .view_text2 { - display: flex; - flex-direction: column; - text-align: right; - - view .text2 { color: #F18F21; - font-size: 27rpx; - font-weight: 800; - margin-left: 7rpx; } - + .card_right_bot{ + margin-top: 4rpx; + text-align: right; + font-size: 20rpx; + font-family: PingFang SC, PingFang SC; + font-weight: 500; + color: rgba(7,47,90,0.4); + } } - - - - .view_text2 view { - font-size: 20rpx; - font-family: PingFang SC, PingFang SC; - font-weight: 500; - color: #F18F21; - } - - - .view_text2 text { - font-size: 20rpx; - font-family: PingFang SC, PingFang SC; - font-weight: 500; - color: rgba(7, 47, 90, 0.4); - } - - image { - width: 76rpx; - height: 76rpx; - } - } - .echarts{ - width: 300rpx; - height: 600rpx; - margin-top: -100rpx; - } - .deer{ - display: flex; - align-items: center; - } - .deer_images{ - width: 145rpx; - height: 245rpx; - margin-left: 15rpx; - } - .r_image{ - width: 16rpx; - height: 16rpx; - line-height: 16rpx; - margin-left: 8rpx; - } - .deer_button{ - display: flex; - justify-content: center; - align-items: center; - margin-top: 19rpx; - width: 160rpx; - height: 56rpx; - font-size: 20rpx; - font-weight: 500; - color: #FFFFFF; - - background: #2D7CE6; - border-radius: 86rpx 86rpx 86rpx 86rpx; - - } - .deer_right{ - margin-left: 20rpx; - } - .deer_text{ - font-size: 28rpx; - - font-weight: 500; - color: #627698; - } - .operation{ - height: 459rpx; - background: #FFFFFF; - border-radius: 20rpx 20rpx 20rpx 20rpx; - } - .zu_image{ - width: 172rpx; - height: 162rpx; - - } - .zu_text{ - font-size: 24rpx; - font-weight: 400; - color: #0E3B77; - margin: 20rpx 0rpx 50rpx 0rpx; - } - .zu_footer{ - // padding: 32rpx 0rpx; - } - .zu_zp{ - display: flex; - flex-direction: column; - align-items: center; - padding: 72rpx; - } - } -</style> +</style> \ No newline at end of file