项目平台——项目首页设计（五）

深藏阁楼爱情的钟 2024-02-25 05:59 38阅读 0赞

![在这里插入图片描述][4ea970217280431e8ffbe1eedb826989.gif_pic_center]

--------------------

#### 这里写目录标题 ####

*  一、页面成果图展示
 *  二、滚动条组件的使用
 *  三、页面设计
 *   *  1、需要4个盒子
     *  2、项目名称样式设计
     *  3、对基本信息、bug统计、执行记录进行样式设计
     *  4、基本信息
     *  5、bug统计
 *  四、echarts使用
 *   *  1、安装
     *  2、折线图的使用

## 一、页面成果图展示 ##

![在这里插入图片描述][b52b0d0c7c1c402d924d7024f9efbac4.png]  
![在这里插入图片描述][2546bcf970644a689fc5027c6c24c04a.png]

## 二、滚动条组件的使用 ##

当内容超过屏幕高度时自动产生滚动条

## 三、页面设计 ##

### 1、需要4个盒子 ###

![在这里插入图片描述][1aab0f0b07fa4866af05304104613645.png]

![在这里插入图片描述][d40b6883e1bf4d92b24b67b5adfe11fd.png]

### 2、项目名称样式设计 ###

<div class="pro_title">{
        {
        pro.name}}</div>

/* 项目标题样式 */
    	.pro_title{
        
    		height: 50px;  行高
    		background: #ececeb;  背景
    		text-align: center;   居中
    		font: bold 28px/50px '微软雅黑';  字体加粗、大小/行高、字体
    		color: rgb(21, 192, 135);
    	}

### 3、对基本信息、bug统计、执行记录进行样式设计 ###

/* 小标题样式 */
    	.title{
        
    		/* 加粗 */
    		font-weight: bold;
    		line-height: 40px;
    		color: #363636;
    	}

### 4、基本信息 ###

element-plus中描述列表使用  
![在这里插入图片描述][637b3f75fc0340be94e535dc745f4c83.png]

element-plus中卡片组件使用  
![在这里插入图片描述][d83089305bd34bcbad0f092d5f6b31e1.png]

从后端接口的返回值可以看到，前端不必要定义所有的字段  
![在这里插入图片描述][9ea3045be2da4ebd8c7f45653ecc10de.png]  
描述列表中label指定描述列表的名字，后面的值对应接口返回的值  
![在这里插入图片描述][9d772b2f5ff349c3a9941a78852bd45f.png]  
通过v-for实现

结果展示  
![在这里插入图片描述][9e65e71166524e3b8944d6faddba31b4.png]

element-plus中layout布局的使用  
![在这里插入图片描述][4f45e04acae54805a43dc950e015c5ca.png]

<div class="title">【基本信息】</div>
    	<el-card body-style="padding:0">
    		<el-descriptions border column="4">
    		<el-descriptions-item label="创建人">{
        {
        pro.leader}}</el-descriptions-item>
    		<el-descriptions-item label="创建时间">{
        {
        pro.create_time}}</el-descriptions-item>
    		<el-descriptions-item v-for='(item,index) in proinfo.info' :key="index" :label="item.name">{
        {
        item.value}}</el-descriptions-item>
      		</el-descriptions>
    
    		<el-row :gutter="20">
    			<el-col :span="4" v-for="(item,index) in proinfo.info" :key="index">
    				<div class="info_chart">
    					<el-progress type="dashboard" :percentage="100" color="#00aa7f">
    						<template #default>
    							<span class="percentage-value">
    								<b style="color:#00aa7f">{
        {
        item.value}}</b>
    								<span>个</span>
    							</span>
    							<span class="percentage-label">{
        {
        item.name}}</span>
    						</template>
    					</el-progress>
    				</div>
    			</el-col>
    			<el-col :span="4"><div class="info_chart" /></el-col>
    			
    		</el-row>

![在这里插入图片描述][81de9b26877f42138ca62e1f91c0b351.png]

### 5、bug统计 ###

![在这里插入图片描述][5ee9af915b3745ad8257cd9960697251.png]

<div class="title">【bug统计】</div>
    	<el-card body-style="padding:0">
    		<el-descriptions border column="4">
    		<el-descriptions-item v-for='(item,index) in proinfo.bugs' :key="index" :label="item.name">{
        {
        item.value}}</el-descriptions-item>
      		</el-descriptions>
    
    		<el-row :gutter="20">
    			<el-col :span="6" v-for="(item,index) in proinfo.bugs" :key="index">
    				<div class="info_chart">
    					<el-progress type="circle" :percentage="100" color="#87CEFA">
    						<template #default>
    							<span class="percentage-value">
    								<b style="color:#00aa7f">{
        {
        item.value}}</b>
    								<span>个</span>
    							</span>
    							<span class="percentage-label">{
        {
        item.name}}</span>
    						</template>
    					</el-progress>
    				</div>
    			</el-col>
    			<el-col :span="4"><div class="info_chart" /></el-col>
    			
    		</el-row>
    	</el-card>

![在这里插入图片描述][5d12d131d69d428092a9a61228201b22.png]

## 四、echarts使用 ##

### 1、安装 ###

![在这里插入图片描述][148a0c04f49d4138b5167a9fe39bddb2.png]

### 2、折线图的使用 ###

// 编写图表工具函数
    import * as echarts from 'echarts';
    import {
         useFormLabelWidth } from 'element-plus/es/components/form/src/utils';
    
    export default{
        
        // 折线图
        chart1(ele,label,datas){
        
            // ele:渲染图标的元素（盒子）
            // label:x轴的刻度文字
            // datas:数据
            // 初始化一个图表对象
            const myChart = echarts.init(ele);
            const option={
        
                // 编写图标的配置
                xAxis: {
        
                    type: 'category',
                    boundaryGap: false,
                    data: label
                },
                yAxis: {
        
                    type: 'value'
                },
                series: [
                    {
        
                    data: datas,
                    type: 'line',
                    areaStyle: {
        }
                    }
                ]
            };
            // 渲染图表
            option && myChart.setOption(option);
    
        },

[4ea970217280431e8ffbe1eedb826989.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/a760f802504342ecb75149252f746bc1.png
[b52b0d0c7c1c402d924d7024f9efbac4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/4302275d58fc42d4b00f6959b65a9c86.png
[2546bcf970644a689fc5027c6c24c04a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/ab62f0504dae4c3c84e6a4b461b5ea5d.png
[1aab0f0b07fa4866af05304104613645.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/09d38a85d04e47fb8cfd7db6333519ab.png
[d40b6883e1bf4d92b24b67b5adfe11fd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/0362e69462fa442c851ddc65ada6343b.png
[637b3f75fc0340be94e535dc745f4c83.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/aa35ef7a9f874c48affbeac3f7ff9dda.png
[d83089305bd34bcbad0f092d5f6b31e1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/000bdb0cbbd24a9eb3516112063085e7.png
[9ea3045be2da4ebd8c7f45653ecc10de.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/fb30bef1dd80487c883e1c47f2b376d1.png
[9d772b2f5ff349c3a9941a78852bd45f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/91a74077dff14e1ead8ba39782b19909.png
[9e65e71166524e3b8944d6faddba31b4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/09d0ec7861b54baf816edf7c8fc900f7.png
[4f45e04acae54805a43dc950e015c5ca.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/c8eefea03fe44588b7d6c0d2c9187cbf.png
[81de9b26877f42138ca62e1f91c0b351.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/3ba0d6d48e14435ea14b697de2702a17.png
[5ee9af915b3745ad8257cd9960697251.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/31b06711e23e48979e481b72894efbb6.png
[5d12d131d69d428092a9a61228201b22.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/906eb5a0c6284aeca62cabb9264a8f36.png
[148a0c04f49d4138b5167a9fe39bddb2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/21f0d08e5a5b435fa261e304cc6eb3da.png