成果展示下拉条bug修改

src/router/index.js

@@ -249,7 +249,7 @@ const routes = [{
             { //成果展示
                 name: 'echarts',
                 path: '/echarts',
-                component: () =>import ('@/views/echarts.vue'),
+                component: () =>import ('@/views/echarts/echarts.vue'),
                 meta: { isAuth: true }
             },
         ]

src/views/activityManage/makerActvity.vue

@@ -52,8 +52,9 @@
         <div class="selectLabel">状态</div>
         <el-select v-model="pavalues.value3" @change="getData" placeholder="请选择">
           <el-option label="所有状态" value=""/>
-          <el-option label="未报销" :value="0"/>
-          <el-option label="已报销" :value="1"/>  
+          <el-option label="未审核" :value="0"/>
+          <el-option label="未报销" :value="1"/> 
+          <el-option label="已报销" :value="2"/>
         </el-select>
       </div>
 
@@ -112,8 +113,9 @@
           align="center"
           min-width="7%">
           <template #default="scope">
-                <span v-if="scope.row.state==0">未报销</span>
-                <span v-if="scope.row.state==1">已报销</span>
+                <span v-if="scope.row.state==0">未审核</span>
+                <span v-if="scope.row.state==1">未报销</span>
+                <span v-if="scope.row.state==2">已报销</span>
           </template>
         </el-table-column>
         <el-table-column
@@ -133,16 +135,15 @@
           >
           <template #default="scope">
               <div class="operations">
-                  <!-- <el-button type="primary" > -->
                         <el-button type="primary"  @click="MADetails(scope.row.acId)" size="mini">查看详情</el-button>
 
                         <el-button type="primary" v-if="scope.row.state==0"  @click="audi(scope.row)" size="mini">审核</el-button>
-                        <el-button type="info" disabled v-show="scope.row.state==1" size="mini">审核</el-button>
+                        <el-button type="info" disabled v-show="scope.row.state==1 || scope.row.state==2" size="mini">审核</el-button>
                         
                         <el-button type="primary"  size="mini" @click="edit(scope)">申请表</el-button>
-                        <el-button type="primary" v-show="scope.row.reportFile==''||scope.row.reportFile==null" size="mini" @click="end(scope.row)" >完结</el-button>
-                        <el-button type="info" v-show="scope.row.reportFile!=''&&scope.row.reportFile!=null" size="mini" disabled>完结</el-button>
-                  <!-- </el-button> -->
+                        <el-button type="primary" v-show="scope.row.state==1" size="mini" @click="end(scope.row)" >完结</el-button>
+                        <el-button type="info" v-show="scope.row.state==2||scope.row.state==0" size="mini" disabled>完结</el-button>
+
               </div>
           </template>
         </el-table-column>
@@ -408,15 +409,26 @@ import beUpload from '../../components/tool/beUpload'
             file:JSON.stringify(this.endTable.file),
           }).then(res=>{
             if(res.data==1){
-              this.$message.success("结项成功");
-              this.endDialog = false;
-
+              this.ajax.post(this.$store.state.api+"/UpdateActivityState",{
+                uid:this.$store.state.userInfo.userid,
+                aid:this.endTable.Id,
+                st:2,
+              }).then(res2=>{
+                if(res2.data==1){
+                  this.$message.success("结项成功");
+                  this.endDialog = false;
+                  this.getData()
+                }else{
+                  this.$message.error("结项失败")
+                }
+                this.getData();
+              }).catch(err2=>{
+                console.log(err2)
+              })
             }else{
               this.$message.error("结项失败")
             }
-            this.getData();
           })
-          // this.endDialog=false;
         },
         
         edit(){ // 申请表按钮

src/views/echarts.vue

@@ -1,428 +0,0 @@
-<template>
-    <!-- 创业公司登记 -->
-    <div class="firm">
-      <div class="pAHeader">
-        <div class="pAHeader1">数据监测</div>
-      </div>
-      <hr />
-      <!-- 顶部展示信息区开始 -->
-      <div class="topDataBlock">    
-        <div class="topData">
-          <div class="DataTitle">创客项目人数</div>
-          <div class="topData_value">
-            <span>{{HeaderData.people}}</span>
-            <span><img src="@/assets/img/upIcon.png"></span>
-          </div>
-        </div>
-        <div class="topData">
-          <div class="DataTitle">目前积累创客项目数量</div>
-          <div class="topData_value">
-            <span>{{ HeaderData.project }}</span>
-          </div>
-        </div>
-        <div class="topData">
-          <div class="DataTitle">创客活动数量</div>
-          <div class="topData_value">
-            <span>{{ HeaderData.activity }}</span>
-          </div>
-        </div>
-        <div class="topData">
-          <div class="DataTitle">学院目前资金总预算</div>
-          <div class="topData_value">
-            <span>{{ HeaderData.budget }}</span>
-            <span>（千万）</span>
-          </div>
-        </div>
-        <div class="topData">
-          <div class="DataTitle">已支出预算</div>
-          <div class="topData_value">
-            <span>{{ HeaderData.isPay }}</span>
-            <span>（千万）</span>
-          </div>
-        </div>
-        
-      </div>
-      <!-- 顶部展示信息区结束 -->
-
-      <!-- 中部大饼区开始 -->
-     <div class="midBlock">
-        <div ref="Circular" class="mid"></div>
-        <div ref="Horizontal" class="mid"></div>
-     </div>
-      <!-- 中部大饼区结束 -->
-
-      <!-- 柱状图区域开始 -->
-      <div ref="Columnar" class="histogram"></div>
-      <!-- 柱状图区域结束 -->
-
-      <!-- 底部表格区域开始 -->
-      <div class="tabTit">
-          <div>
-              <p>项目排名</p>
-          </div>
-      </div>
-
-      <div class="projectBlock" style="padding-bottom: 60px;">
-      <el-table
-      :data="tableData"
-      tooltip-effect="dark"
-      stripe
-      class="fontSize"
-      :header-cell-style="{ background: '#3867d6',color:'#fff' }"
-      >
-     
-      <el-table-column
-        type="index"
-        label="排名"
-        align="center"
-        width="100">
-      </el-table-column>
-
-      <el-table-column
-        prop="title"
-        label="项目名称"
-        align="center">
-      </el-table-column>
-
-      <el-table-column
-        prop="pro_leader"
-        label="项目负责人"
-        align="center">
-      </el-table-column>
-
-      <el-table-column
-        prop="TypeName"
-        label="创客类型"
-        align="center">
-      </el-table-column>
-
-      <el-table-column
-        prop="Activity"
-        label="活跃度"
-        align="center">
-      </el-table-column>
-
-      <el-table-column
-        prop="ClassName"
-        label="所属学院"
-        align="center">
-      </el-table-column>
-     
-    </el-table>
-    </div>
-<!-- 通知表格结束-->
-      <!-- 底部表格区域结束 -->
-
-
-    </div>
-  </template>
-    
-  <script>
- import * as echarts from 'echarts';
-  export default {
-   
-    data() {
-      return {
-        //头部区域数据
-        HeaderData:{
-          people:329,
-          project:40,
-          activity:25,
-          budget:100,
-          isPay:25
-        },
-        //圆形
-        CircularData:[
-          {value:30,name:"个人创客"},
-          {value:70,name:"创客活动"}
-        ],
-        //横行的柱状
-        HorizontalData:[
-            [ '物联网激光切割器',0],
-            [ '人工智能领跑马拉松',1000, ],
-            [ '3D演奏智能工具', 2000],
-            [ '人工智能分链机器',3000],
-        ],
-        // 柱状
-        ColumnarData:[
-              ['3D智能分链机器', 2000],
-              ['3D智能分链机器1',3000],
-              ['3D智能分链机器2', 2500],
-              ['3D智能分链机器3', 1000],
-              ['3D智能分链机器4', 2000],
-              ['3D智能分链机器5',3000],
-              ['3D智能分链机器6', 2500],
-              ['3D智能分链机器7', 1000],
-              ['3D智能分链机器8', 2000],
-              ['3D智能分链机器9',3000],
-              ['3D智能分链机器10', 2500],
-              ['3D智能分链机器11', 1000],
-              ['3D智能分链机器12', 2000],
-              ['3D智能分链机器13',3000],
-              ['3D智能分链机器14', 2500],
-              ['3D智能分链机器15', 1000],
-            ],
-        tableData: [
-          {title:"人工智能分链机器",pro_leader:"覃罡彤",TypeName:"个人创客",Activity:"286",ClassName:"信息与通讯学院"},
-          {title:"3D演奏智能工具",pro_leader:"袁一鸣",TypeName:"个人创客",Activity:"225",ClassName:"信息与通讯学院"},
-          {title:"物联网切割机器",pro_leader:"张晓分",TypeName:"个人创客",Activity:"169",ClassName:"中德制造"},
-          {title:"人工智能领航AI马拉松",pro_leader:"林子夏",TypeName:"创客活动",Activity:"121",ClassName:"中德制造"},
-        ]
-      };
-    },
-    methods: {
-      //圆形饼图
-      setCircularData(){
-        const Circular = echarts.init(this.$refs['Circular']);
-        let option = {
-          title:{
-            text:"创新创业项目类型"
-          },
-          legend: {
-            orient: 'vertical',
-            top:"10%",
-            left:"left"
-          },
-          series: [
-            {
-              type: 'pie',
-              label: {
-                show:true,
-                position:"inner",
-                formatter:'{d}%'
-              },
-              data: this.CircularData
-            }
-          ]
-        }
-        Circular.setOption(option)
-      },
-      //横向柱状图
-      setHorizontalData(){
-        const Horizontal = echarts.init(this.$refs['Horizontal']);
-        let option = {
-          grid: {
-            top: 80, // 设置网格顶部的边距为 50px 
-            left:10,
-            bottom:0,
-            right:"100px"
-            // left:'-10px'
-          },
-          title:{
-            text:"创客活动资金"
-          },
-          dataset: {
-            source: [
-              [ 'product', 'amount'],
-              ...this.HorizontalData
-            ],
-          },
-          xAxis: { 
-            position:"top",
-            name:"单位：万元",
-            nameTextStyle:{
-              fontSize:14,
-              align:"left",
-              verticalAlign:"bottom",
-              padding:[0,0,7,10],
-            }
-          },
-          yAxis: {
-            type: 'category',
-            zlevel:1,
-            axisLabel:{
-              inside:true,
-              margin:4,
-              formatter: function (value) {
-                const vl = Math.floor(value.length/2);
-                let newText = value.slice(0,vl)+'\n'+value.slice(vl)
-                return newText;
-            },
-            color:function(value,index){
-              console.log(option)
-              const textWidth = option['dataset']['source'][option['dataset']['source'].length-1][1]/6/2;
-              const vl = option['dataset']['source'][index+1][1]
-              return vl >= textWidth ? 'white' : '#3c4654';
-            }
-            },
-          },
-          series: [
-            {
-              type: 'bar',
-              barWidth:55,
-              label:{
-                show:true,
-                position:"right"
-              },
-              encode: {
-                x: 'amount',
-                y: 'product'
-              },
-              itemStyle:{
-                color:"#3eb370"
-              }
-            }
-          ]
-        }
-        Horizontal.setOption(option)
-      },
-      setColumnarData(){
-        const Columnar = echarts.init(this.$refs['Columnar']);
-        let option ={
-          grid: {
-            top: 80,
-          },
-          title:{
-            text:"个人创客资金",
-            top:0
-          },
-          dataset: {
-            // 提供一份数据。
-            source:this.ColumnarData
-          },
-          // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
-          xAxis: { 
-            type: 'category',
-            axisLabel: {
-              formatter: function (value) {
-                // 设置每行显示的最大字符数
-                var maxLength = 4;
-                // 计算文本需要换行的行数
-                var rowNumber = Math.ceil(value.length / maxLength);
-                // 拼接换行后的文本
-                var newText = '';
-                for (var i = 0; i < rowNumber; i++) {
-                  var start = i * maxLength;
-                  var end = start + maxLength;
-                  newText += value.slice(start, end) + '\n';
-                }
-                return newText;
-              }
-            }
-          },
-          // 声明一个 Y 轴，数值轴。
-          yAxis: {
-            name:"单位：万元",
-            nameTextStyle:{
-              fontSize:14,
-              align:"center",
-            }
-          },
-          // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
-          series: [{ type: 'bar' ,itemStyle:{color:"#5aaef3"}}]
-        }
-        Columnar.setOption(option)
-      }
-    },
-    mounted() {
-      this.setCircularData();
-      this.setHorizontalData();
-      this.setColumnarData();
-    },
-  };
-  </script>
-    
-<style lang="less">
-  .topDataBlock{
-    margin-top: 20px;
-    width: 100%;
-    height: 130px;
-    // background: #b65f5f;
-    display: flex;
-    justify-content:space-between;
-    align-items: center;
-    .topData{
-      width: 19%;
-      height: 94%;
-      border-radius: 5px;
-      box-sizing: border-box;
-      // padding: 15px 10px 10px 35px;
-      .DataTitle{
-        margin: 15px 10px 10px 35px;
-        color: white;
-        font-size: 18px;
-        position: relative;
-        &::after{
-          content: '';
-          display: block;
-          position: absolute;
-          width: 7px;
-          height: 86%;
-          top: 7%;
-          left: -15px;
-          background-color: white;
-        }
-      }
-      .topData_value{
-        width: auto;
-        height: 40%;
-        margin: 15px 20px 10px 20px;
-        display: flex;
-        align-items: center;
-        color: white;
-        span{
-          height: 100%;
-          display: flex;
-          // align-items: flex-end;
-        }
-        span:nth-of-type(1){
-          font-size: 2.8em;
-        }
-        span:nth-of-type(2){
-          align-items: flex-end;
-          img{
-            height: 32px;
-            margin-left: 5px;
-          }
-        }
-      }
-    }
-    .topData:nth-child(1){
-      background-image: linear-gradient(100deg, #3caef5 60%,#497df5);
-    }
-    .topData:nth-child(2){
-      background-image: linear-gradient(100deg, #fcb871 60%,#f77c5f);
-    }
-    .topData:nth-child(3){
-      background-image: linear-gradient(100deg, #3ce0ea 60%,#29bfa3);
-    }
-    .topData:nth-child(4){
-      background-image: linear-gradient(100deg, #3caef5 60%,#497df5);
-    }
-    .topData:nth-child(5){
-      background-image: linear-gradient(100deg, #fcb871 60%,#f77c5f);
-    }
-  }
-  .midBlock{     //中部大饼
-    width: 100%;
-    height: 400px;
-    margin-top: 20px;
-    // background: #ce7070;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    .mid{
-      height: 95%;
-      width: 49%;
-      padding: 20px;
-      box-sizing: border-box;
-      background: #f3f6f7;
-    }
-  }
-
-  .histogram{       //柱状图
-    margin-top: 20px;
-    box-sizing: border-box;
-    padding: 20px;
-    width: 100%;
-    height: 400px;
-    background: #f3f6f7;
-  }
-
-  .el-table__header{
-    height:60px;
-  }
-  .el-table__row{
-    height: 60px;
-  }
-</style>

src/views/echarts/components/CircularChart.vue

@@ -0,0 +1,44 @@
+<template>
+    <div ref="Circular" class="mid"></div>
+</template>
+
+<script>
+ import * as echarts from 'echarts';
+    export default {
+        props:['data'],
+        methods:{
+            setCircularData(){
+              const Circular = echarts.init(this.$refs['Circular']);
+              let option = {
+                title:{
+                  text:"创新创业项目类型"
+                },
+                legend: {
+                  orient: 'vertical',
+                  top:"10%",
+                  left:"left"
+                },
+                series: [
+                  {
+                    type: 'pie',
+                    label: {
+                      show:true,
+                      position:"inner",
+                      formatter:'{d}%'
+                    },
+                    data: this.data
+                  }
+                ]
+              }
+              Circular.setOption(option)
+            },
+        },
+        mounted(){
+            this.setCircularData();
+        }
+    }
+</script>
+
+<style lang="less" scoped>
+
+</style>

src/views/echarts/components/ColumnarChart.vue

@@ -0,0 +1,67 @@
+<template>
+    <div ref="Columnar" class="histogram"></div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+    export default {
+        props:['data'],
+        methods:{
+            //横向柱状图
+            setColumnarData(){
+              const Columnar = echarts.init(this.$refs['Columnar']);
+              let option ={
+                grid: {
+                  top: 80,
+                },
+                title:{
+                  text:"个人创客资金",
+                  top:0
+                },
+                dataset: {
+                  // 提供一份数据。
+                  source:this.data
+                },
+                // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
+                xAxis: { 
+                  type: 'category',
+                  axisLabel: {
+                    formatter: function (value) {
+                      // 设置每行显示的最大字符数
+                      var maxLength = 4;
+                      // 计算文本需要换行的行数
+                      var rowNumber = Math.ceil(value.length / maxLength);
+                      // 拼接换行后的文本
+                      var newText = '';
+                      for (var i = 0; i < rowNumber; i++) {
+                        var start = i * maxLength;
+                        var end = start + maxLength;
+                        newText += value.slice(start, end) + '\n';
+                      }
+                      return newText;
+                    }
+                  }
+                },
+                // 声明一个 Y 轴，数值轴。
+                yAxis: {
+                  name:"单位：万元",
+                  nameTextStyle:{
+                    fontSize:14,
+                    align:"center",
+                  }
+                },
+                // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
+                series: [{ type: 'bar' ,itemStyle:{color:"#5aaef3"}}]
+              }
+              Columnar.setOption(option)
+            }
+        },
+        mounted(){
+            this.setColumnarData();
+        }
+    }
+</script>
+
+<style lang="less" scoped>
+
+</style>

src/views/echarts/components/HorizontalChart.vue

@@ -0,0 +1,87 @@
+<template>
+    <div ref="Horizontal" class="mid"></div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+    export default {
+        props:['data'],
+        methods:{
+            setHorizontalData(){
+              const Horizontal = echarts.init(this.$refs['Horizontal']);
+              let option = {
+                grid: {
+                  top: 80, // 设置网格顶部的边距为 50px 
+                  left:10,
+                  bottom:0,
+                  right:"100px"
+                  // left:'-10px'
+                },
+                title:{
+                  text:"创客活动资金"
+                },
+                dataset: {
+                  source: [
+                    [ 'product', 'amount'],
+                    ...this.data
+                  ],
+                },
+                xAxis: { 
+                  position:"top",
+                  name:"单位：万元",
+                  nameTextStyle:{
+                    fontSize:14,
+                    align:"left",
+                    verticalAlign:"bottom",
+                    padding:[0,0,7,10],
+                  }
+                },
+                yAxis: {
+                  type: 'category',
+                  zlevel:1,
+                  axisLabel:{
+                    inside:true,
+                    margin:4,
+                    formatter: function (value) {
+                      const vl = Math.floor(value.length/2);
+                      let newText = value.slice(0,vl)+'\n'+value.slice(vl)
+                      return newText;
+                  },
+                  color:function(value,index){
+                    const textWidth = option['dataset']['source'][option['dataset']['source'].length-1][1]/6/2;
+                    const vl = option['dataset']['source'][index+1][1]
+                    return vl >= textWidth ? 'white' : '#3c4654';
+                  }
+                  },
+                },
+                series: [
+                  {
+                    type: 'bar',
+                    barWidth:55,
+                    label:{
+                      show:true,
+                      position:"right"
+                    },
+                    encode: {
+                      x: 'amount',
+                      y: 'product'
+                    },
+                    itemStyle:{
+                      color:"#3eb370"
+                    }
+                  }
+                ]
+              }
+              Horizontal.setOption(option)
+            },
+        },
+        mounted(){
+            this.setHorizontalData();
+        }
+
+    }
+</script>
+
+<style lang="less" scoped>
+
+</style>

src/views/echarts/components/RankingTable.vue

@@ -0,0 +1,73 @@
+<template>
+    <div>
+        <div class="tabTit">
+          <div>
+              <p>项目排名</p>
+          </div>
+          </div>
+
+          <div class="projectBlock" style="padding-bottom: 60px;">
+          <el-table
+          :data="tableData"
+          tooltip-effect="dark"
+          stripe
+          class="fontSize"
+          :header-cell-style="{ background: '#3867d6',color:'#fff' }"
+          >
+        
+          <el-table-column
+            type="index"
+            label="排名"
+            align="center"
+            width="100">
+          </el-table-column>
+
+          <el-table-column
+            prop="title"
+            label="项目名称"
+            align="center">
+          </el-table-column>
+
+          <el-table-column
+            prop="pro_leader"
+            label="项目负责人"
+            align="center">
+          </el-table-column>
+
+          <el-table-column
+            prop="TypeName"
+            label="创客类型"
+            align="center">
+          </el-table-column>
+
+          <el-table-column
+            prop="Activity"
+            label="活跃度"
+            align="center">
+          </el-table-column>
+
+          <el-table-column
+            prop="ClassName"
+            label="所属学院"
+            align="center">
+          </el-table-column>
+      
+        </el-table>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        props:['tableData'],
+    }
+</script>
+
+<style lang="less">
+  .el-table__header{
+    height:60px;
+  }
+  .el-table__row{
+    height: 60px;
+  }
+</style>

src/views/echarts/components/topData.vue

@@ -0,0 +1,125 @@
+<template>
+    <div class="topDataBlock">    
+        <div class="topData">
+          <div class="DataTitle">创客项目人数</div>
+          <div class="topData_value">
+            <span>{{data.people}}</span>
+            <span><img src="@/assets/img/upIcon.png"></span>
+          </div>
+        </div>
+        <div class="topData">
+          <div class="DataTitle">目前积累创客项目数量</div>
+          <div class="topData_value">
+            <span>{{ data.project }}</span>
+          </div>
+        </div>
+        <div class="topData">
+          <div class="DataTitle">创客活动数量</div>
+          <div class="topData_value">
+            <span>{{ data.activity }}</span>
+          </div>
+        </div>
+        <div class="topData">
+          <div class="DataTitle">学院目前资金总预算</div>
+          <div class="topData_value">
+            <span>{{ data.budget }}</span>
+            <span>（千万）</span>
+          </div>
+        </div>
+        <div class="topData">
+          <div class="DataTitle">已支出预算</div>
+          <div class="topData_value">
+            <span>{{ data.isPay }}</span>
+            <span>（千万）</span>
+          </div>
+        </div>
+        
+      </div>
+</template>
+
+<script>
+    export default {
+        props:['data']
+    }
+</script>
+
+<style lang="less" scoped>
+  .topDataBlock{
+    margin-top: 20px;
+    width: 100%;
+    height: 130px;
+    // background: #b65f5f;
+    display: flex;
+    justify-content:space-between;
+    align-items: center;
+    .topData{
+      width: 19%;
+      height: 94%;
+      border-radius: 5px;
+      box-sizing: border-box;
+      position: relative;
+      // padding: 15px 10px 10px 35px;
+      .DataTitle{
+        margin: 15px 10px 10px 0px;
+        color: white;
+        font-size: 18px;
+        position: relative;
+        box-sizing: border-box;
+        padding-left: 35px;
+        width: 100%;
+        text-overflow: ellipsis;
+        display: flex;
+        overflow: hidden;
+        white-space: nowrap;
+        &::after{
+          content: '';
+          display: block;
+          position: absolute;
+          width: 7px;
+          height: 86%;
+          top: 7%;
+          left: 23px;
+          background-color: white;
+        }
+      }
+      .topData_value{
+        width: auto;
+        height: 40%;
+        margin: 15px 20px 10px 20px;
+        display: flex;
+        align-items: center;
+        color: white;
+        span{
+          height: 100%;
+          display: flex;
+          // align-items: flex-end;
+        }
+        span:nth-of-type(1){
+          font-size: 2.8em;
+        }
+        span:nth-of-type(2){
+          align-items: flex-end;
+          img{
+            height: 32px;
+            margin-left: 5px;
+          }
+        }
+      }
+    }
+    .topData:nth-child(1){
+      background-image: linear-gradient(100deg, #3caef5 60%,#497df5);
+    }
+    .topData:nth-child(2){
+      background-image: linear-gradient(100deg, #fcb871 60%,#f77c5f);
+    }
+    .topData:nth-child(3){
+      background-image: linear-gradient(100deg, #3ce0ea 60%,#29bfa3);
+    }
+    .topData:nth-child(4){
+      background-image: linear-gradient(100deg, #3caef5 60%,#497df5);
+    }
+    .topData:nth-child(5){
+      background-image: linear-gradient(100deg, #fcb871 60%,#f77c5f);
+    }
+  }
+</style>

src/views/echarts/echarts.vue

@@ -0,0 +1,126 @@
+<template>
+    <!-- 创业公司登记 -->
+    <div class="firm">
+      <div class="pAHeader">
+        <div class="pAHeader1">数据监测</div>
+      </div>
+      <hr />
+      <!-- 顶部展示信息区开始 -->
+      <topData :data="HeaderData"/>
+      <!-- 顶部展示信息区结束 -->
+      <!-- 中部大饼区开始 -->
+     <div class="midBlock">
+      <!-- 圆形图开始 -->
+      <CircularChart :data="CircularData"/>
+      <!-- 圆形图结束 -->
+      <!-- 横向柱状图开始 -->
+      <HorizontalChart :data="HorizontalData"/>
+      <!-- 横向柱状图结束 -->
+     </div>
+      <!-- 中部大饼区结束 -->
+
+      <!-- 柱状图区域开始 -->
+      <ColumnarChart :data="ColumnarData"/>
+      <!-- 柱状图区域结束 -->
+
+      <!-- 底部表格区域开始 -->
+      <RankingTable :tableData="tableData"/>
+<!-- 通知表格结束-->
+      <!-- 底部表格区域结束 -->
+
+
+    </div>
+  </template>
+    
+  <script>
+ //顶部数据
+ import topData from './components/topData.vue'
+ //圆形图
+ import CircularChart from './components/CircularChart.vue';
+ //横向柱状图
+ import HorizontalChart from './components/HorizontalChart.vue';
+ //竖向柱状图
+ import ColumnarChart from './components/ColumnarChart.vue';
+ //排名表格
+ import RankingTable from './components/RankingTable.vue';
+  export default {
+   components:{topData,CircularChart,HorizontalChart,ColumnarChart,RankingTable},
+    data() {
+      return {
+        //头部区域数据
+        HeaderData:{
+          people:329,
+          project:40,
+          activity:25,
+          budget:100,
+          isPay:25
+        },
+        //圆形
+        CircularData:[
+          {value:30,name:"个人创客"},
+          {value:70,name:"创客活动"}
+        ],
+        //横行的柱状
+        HorizontalData:[
+            [ '物联网激光切割器',0],
+            [ '人工智能领跑马拉松',1000, ],
+            [ '3D演奏智能工具', 2000],
+            [ '人工智能分链机器',3000],
+        ],
+        // 柱状
+        ColumnarData:[
+              ['3D智能分链机器', 2000],
+              ['3D智能分链机器1',3000],
+              ['3D智能分链机器2', 2500],
+              ['3D智能分链机器3', 1000],
+              ['3D智能分链机器4', 2000],
+              ['3D智能分链机器5',3000],
+              ['3D智能分链机器6', 2500],
+              ['3D智能分链机器7', 1000],
+              ['3D智能分链机器8', 2000],
+              ['3D智能分链机器9',3000],
+              ['3D智能分链机器10', 2500],
+              ['3D智能分链机器11', 1000],
+              ['3D智能分链机器12', 2000],
+              ['3D智能分链机器13',3000],
+              ['3D智能分链机器14', 2500],
+              ['3D智能分链机器15', 1000],
+            ],
+        tableData: [
+          {title:"人工智能分链机器",pro_leader:"覃罡彤",TypeName:"个人创客",Activity:"286",ClassName:"信息与通讯学院"},
+          {title:"3D演奏智能工具",pro_leader:"袁一鸣",TypeName:"个人创客",Activity:"225",ClassName:"信息与通讯学院"},
+          {title:"物联网切割机器",pro_leader:"张晓分",TypeName:"个人创客",Activity:"169",ClassName:"中德制造"},
+          {title:"人工智能领航AI马拉松",pro_leader:"林子夏",TypeName:"创客活动",Activity:"121",ClassName:"中德制造"},
+        ]
+      };
+    },
+  };
+  </script>
+    
+<style lang="less">
+  .midBlock{     //中部大饼
+    width: 100%;
+    height: 400px;
+    margin-top: 20px;
+    // background: #ce7070;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .mid{
+      height: 95%;
+      width: 49%;
+      padding: 20px;
+      box-sizing: border-box;
+      background: #f3f6f7;
+    }
+  }
+
+  .histogram{       //柱状图
+    margin-top: 20px;
+    box-sizing: border-box;
+    padding: 20px;
+    width: 100%;
+    height: 400px;
+    background: #f3f6f7;
+  }
+</style>

src/views/home.vue

@@ -77,13 +77,15 @@
               .btns{
                 display: flex;
                 width: 100%;
-                height: 80px;
+                height: 70px;
                 align-items: center;  
                 font-size: 16px;
                 cursor: pointer;
                 box-sizing: border-box;
                 padding-left: 20%;
-                
+                &:hover{
+                  background-color: #cccccc;
+                }
 
                 span{
                   align-items: center;

src/views/resultShow/resultShowDetail.vue

@@ -545,7 +545,7 @@
                 let scrollTop = e.target.scrollTop;
                 if(scrollTop>=200){
                     Nav.style = `width:100%;padding:0 20%;box-sizing: border-box;border-radius:0;display:flex;justify-content: space-around;position: fixed;top:calc(60px - 20px);z-index:99;align-items: center;box-shadow: 0 0 5px gray;`
-                }else{
+                }else if(scrollTop<=100){
                     Nav.style = ``
                 }
             });